Component Creation Video Tutorial
Moderator: Benj
- Benj
- Matrix Staff
- Posts: 15312
- Joined: Mon Oct 16, 2006 10:48 am
- Location: Matrix TS Ltd
- Has thanked: 4803 times
- Been thanked: 4314 times
- Contact:
Component Creation Video Tutorial
Hello,
For anyone who wants to step in the world of component creation with v6, here is a quick how-to video I put together which should walk you through some of the basics. Full descriptions and explanations should be provided in the v6 help wiki for any details I missed.
[/youtube]
I can do other videos detailing more specifics so let me know what you would like to know. Remember every component in v6 has been written using this very interface so there is a great deal of potential.
Note that in the current patchset 2 there is a bug where the simulation API calls do not jump back to the correct position when you try to edit an icon. This is a very annoying bug that we are aware of and working on. You can get around by manually selecting the far right tab and then browsing to the correct simulation API call. Return values may be lost so be careful. This is the main reason for the jumps in the video as this took much longer then it should have done.
Component source file created in the video.
For anyone who wants to step in the world of component creation with v6, here is a quick how-to video I put together which should walk you through some of the basics. Full descriptions and explanations should be provided in the v6 help wiki for any details I missed.
[/youtube]
I can do other videos detailing more specifics so let me know what you would like to know. Remember every component in v6 has been written using this very interface so there is a great deal of potential.
Note that in the current patchset 2 there is a bug where the simulation API calls do not jump back to the correct position when you try to edit an icon. This is a very annoying bug that we are aware of and working on. You can get around by manually selecting the far right tab and then browsing to the correct simulation API call. Return values may be lost so be careful. This is the main reason for the jumps in the video as this took much longer then it should have done.
Component source file created in the video.
Regards Ben Rowland - MatrixTSL
Flowcode Product Page - Flowcode Help Wiki - Flowcode Examples - Flowcode Blog - Flowcode Course - My YouTube Channel
Flowcode Product Page - Flowcode Help Wiki - Flowcode Examples - Flowcode Blog - Flowcode Course - My YouTube Channel
-
- Posts: 116
- Joined: Tue Jul 17, 2012 9:34 am
- Been thanked: 18 times
- Contact:
Re: Component Creation Video Tutorial
HI Benj,
To get me started on component creation I tried following your video tutorial.
It was not easy, however I managed to get as far as where you use "Duplicate" for the Ev_Property and Motor Pins.
When I try it all I get with duplicate is a single additional property and no extra sim entries in the Ev_Property macro.
What am I doing wrong ?
Cheers
Stewart
To get me started on component creation I tried following your video tutorial.
It was not easy, however I managed to get as far as where you use "Duplicate" for the Ev_Property and Motor Pins.
When I try it all I get with duplicate is a single additional property and no extra sim entries in the Ev_Property macro.
What am I doing wrong ?
Cheers
Stewart
- JonnyW
- Posts: 1230
- Joined: Fri Oct 29, 2010 9:13 am
- Location: Matrix Multimedia Ltd
- Has thanked: 63 times
- Been thanked: 290 times
- Contact:
Re: Component Creation Video Tutorial
Hi Stewart. I am not sure exactly where you mean in the video, but the quickest way is:
To duplicate all properties of a sub-component make sure you have the root (panel) properties visible and from the 'Properties' entry drop-down select "Copy from...": To copy any changes made to your component back to the stepper (in this example we are just making a 1:1 copy of every property in this component) create a SIM icon and select the macro Component.Property.CopyChildValues(). Make the property name to copy an empty string - "" - which will mean 'copy everything'.
You can copy each property individually if you want to make alterations or want the values of the child to be different from your front-end. For completeness (this is not part of the question you asked) to inherit a components macros in 'Settings Manager' under the 'Advanced' tab select the sub-component to inherit from. This sample component program does nothing but make an exact, wrapped copy of the original component, which you can then build on with your own routines, swap-out its sub-components for your own, etc. I hope this clears things up.
Jonny
To duplicate all properties of a sub-component make sure you have the root (panel) properties visible and from the 'Properties' entry drop-down select "Copy from...": To copy any changes made to your component back to the stepper (in this example we are just making a 1:1 copy of every property in this component) create a SIM icon and select the macro Component.Property.CopyChildValues(). Make the property name to copy an empty string - "" - which will mean 'copy everything'.
You can copy each property individually if you want to make alterations or want the values of the child to be different from your front-end. For completeness (this is not part of the question you asked) to inherit a components macros in 'Settings Manager' under the 'Advanced' tab select the sub-component to inherit from. This sample component program does nothing but make an exact, wrapped copy of the original component, which you can then build on with your own routines, swap-out its sub-components for your own, etc. I hope this clears things up.
Jonny
-
- Posts: 116
- Joined: Tue Jul 17, 2012 9:34 am
- Been thanked: 18 times
- Contact:
Re: Component Creation Video Tutorial
Hi Jonny,
Thanks for your prompt reply and the information.
The point in the video where I am stuck is at time 09.06.
It maybe that I don't have a setting right, but duplicate only gives another property entry, not the additional 3 as in the video.
I really want to get a much better grip on how to make new components, and those based on existing ones...
Cheers
Stewart
Thanks for your prompt reply and the information.
The point in the video where I am stuck is at time 09.06.
It maybe that I don't have a setting right, but duplicate only gives another property entry, not the additional 3 as in the video.
I really want to get a much better grip on how to make new components, and those based on existing ones...
Cheers
Stewart
- JonnyW
- Posts: 1230
- Joined: Fri Oct 29, 2010 9:13 am
- Location: Matrix Multimedia Ltd
- Has thanked: 63 times
- Been thanked: 290 times
- Contact:
Re: Component Creation Video Tutorial
Hi. I think by the looks of it Ben has edited-out copying each property and setting them all up manually to save time in the video.
As in the video you can set everything up manually, but I would say the easiest way is to copy from the base component (in this case the stepper motor) then just delete (or hide) the ones you don't want to be available, especially when there are a lot of properties to copy.
The other 'short-cut' is the 'CopyChildValues' call that will copy everything you own into the target in a single call, saving on multiple macros. As said, you can do everything manually if you require greater control.
Cheers,
Jonny
As in the video you can set everything up manually, but I would say the easiest way is to copy from the base component (in this case the stepper motor) then just delete (or hide) the ones you don't want to be available, especially when there are a lot of properties to copy.
The other 'short-cut' is the 'CopyChildValues' call that will copy everything you own into the target in a single call, saving on multiple macros. As said, you can do everything manually if you require greater control.
Cheers,
Jonny
-
- Posts: 116
- Joined: Tue Jul 17, 2012 9:34 am
- Been thanked: 18 times
- Contact:
Re: Component Creation Video Tutorial
Ah !
The quickness of the video editing deceives the eye
Thought that I was going mad (not for the first time)...
Thanks for your help on short cuts, I should now be able to make progress.
I am finding information about component creation other than shape manipulation a little sparse.
A few examples would help. Out of focus videos are not really the answer.
In order to grasp the fundamentals, what I would like to do is try and make a toggle switch that switches between 2 pins and has a centre OFF position.
I guess as the base switch has only one pin I will have to use 2 of them. It is a pity that I can't see how the moving visual part (the toggle) of the base switch is done.
Any guidance would be most welcome.
regards
Stewart
The quickness of the video editing deceives the eye
Thought that I was going mad (not for the first time)...
Thanks for your help on short cuts, I should now be able to make progress.
I am finding information about component creation other than shape manipulation a little sparse.
A few examples would help. Out of focus videos are not really the answer.
In order to grasp the fundamentals, what I would like to do is try and make a toggle switch that switches between 2 pins and has a centre OFF position.
I guess as the base switch has only one pin I will have to use 2 of them. It is a pity that I can't see how the moving visual part (the toggle) of the base switch is done.
Any guidance would be most welcome.
regards
Stewart
- JonnyW
- Posts: 1230
- Joined: Fri Oct 29, 2010 9:13 am
- Location: Matrix Multimedia Ltd
- Has thanked: 63 times
- Been thanked: 290 times
- Contact:
Re: Component Creation Video Tutorial
Hi.
OK, I see. That (3-state switch) sounds like quite a good step-by-step project to document creation of on our forums here.
For information as to how the components are structured, it may help to go to the Component debugger and select 'Component Debugger', check 'Expose full component tree in property pane' then click the down arrow in the properties pane. You will see all the components available. In the image above, the ButtonCtrl is a component that sits in the background and turns objects into buttons - it is used by a lot of the top-level components to simulate button presses, etc.
Jonny
OK, I see. That (3-state switch) sounds like quite a good step-by-step project to document creation of on our forums here.
For information as to how the components are structured, it may help to go to the Component debugger and select 'Component Debugger', check 'Expose full component tree in property pane' then click the down arrow in the properties pane. You will see all the components available. In the image above, the ButtonCtrl is a component that sits in the background and turns objects into buttons - it is used by a lot of the top-level components to simulate button presses, etc.
Jonny
-
- Posts: 116
- Joined: Tue Jul 17, 2012 9:34 am
- Been thanked: 18 times
- Contact:
Re: Component Creation Video Tutorial
Hi,JonnyW wrote: OK, I see. That (3-state switch) sounds like quite a good step-by-step project to document creation of on our forums here.
Yes, I think that is a good idea. The process will help me, and I suspect a number of others.
I found the 'Expose full component tree in property pane' in the Component debugger, and looked at the tree of an existing project of mine. This really is the centre of what's going on, it gives a good view of the relationships.
OK, silly question coming up - re the ButtonCtrl component what comprises an object ?
Is it just the toggle of the switch or the complete switch ?
Cheers
Stewart
- JonnyW
- Posts: 1230
- Joined: Fri Oct 29, 2010 9:13 am
- Location: Matrix Multimedia Ltd
- Has thanked: 63 times
- Been thanked: 290 times
- Contact:
Re: Component Creation Video Tutorial
Hi Stewart.
As far as I go, 'object' and 'component' are interchangeable, except that I tend to think of objects as having 'solid' parts.
As an example, here is the button helper turning an LED object/component into a button. This doesn't do anything other than show what the helper component does - just run the simulation then click on the LED. ButtonHelper does not support more than two states for an object (yet). What you would do for a 3-state switch is whenever the button goes into its 'neutral' state you would change its 'on' position based on the next state. I might extend the helper at some point to deal with multiple states.
I hope this helps.
Jonny
As far as I go, 'object' and 'component' are interchangeable, except that I tend to think of objects as having 'solid' parts.
As an example, here is the button helper turning an LED object/component into a button. This doesn't do anything other than show what the helper component does - just run the simulation then click on the LED. ButtonHelper does not support more than two states for an object (yet). What you would do for a 3-state switch is whenever the button goes into its 'neutral' state you would change its 'on' position based on the next state. I might extend the helper at some point to deal with multiple states.
I hope this helps.
Jonny
-
- Posts: 116
- Joined: Tue Jul 17, 2012 9:34 am
- Been thanked: 18 times
- Contact:
Re: Component Creation Video Tutorial
Hi,
Unfortunately something is wrong with the file.
When loading gave error message:-
Failed to open document.
Attribute <start> is not found
S.
Unfortunately something is wrong with the file.
When loading gave error message:-
Failed to open document.
Attribute <start> is not found
S.
- JonnyW
- Posts: 1230
- Joined: Fri Oct 29, 2010 9:13 am
- Location: Matrix Multimedia Ltd
- Has thanked: 63 times
- Been thanked: 290 times
- Contact:
Re: Component Creation Video Tutorial
Hi. Sorry - I have tweaked the file format since v6.0.4 went out - something worth remembering when posting examples!
Updated the source file now - should download OK.
Jonny
Updated the source file now - should download OK.
Jonny
-
- Posts: 116
- Joined: Tue Jul 17, 2012 9:34 am
- Been thanked: 18 times
- Contact:
Re: Component Creation Video Tutorial
OK, that's fine now.
I can see the objects in the tree structure, the linking between ButtonCtrl1 and led_5mm_clip1. Also the constituent parts of the LED.
I note that clicking on the LED makes it move like a button. Tried a Pot Red Knob as a target instead. Boy that's cool !
So, the ButtonHelper linked to an object allows that object to act like a button.
Q's:-
Where in the ButtonHelper are the parameters stored that determine the direction and amount of movement ?
How do we change that up-down Button motion to a toggle ?
At the moment ButtonHelper can only handle 2 states. Presumably (at present) this rules out multi position rotary switches ?
Or is there something else ?
S.
I can see the objects in the tree structure, the linking between ButtonCtrl1 and led_5mm_clip1. Also the constituent parts of the LED.
I note that clicking on the LED makes it move like a button. Tried a Pot Red Knob as a target instead. Boy that's cool !
So, the ButtonHelper linked to an object allows that object to act like a button.
Q's:-
Where in the ButtonHelper are the parameters stored that determine the direction and amount of movement ?
How do we change that up-down Button motion to a toggle ?
At the moment ButtonHelper can only handle 2 states. Presumably (at present) this rules out multi position rotary switches ?
Or is there something else ?
S.
- JonnyW
- Posts: 1230
- Joined: Fri Oct 29, 2010 9:13 am
- Location: Matrix Multimedia Ltd
- Has thanked: 63 times
- Been thanked: 290 times
- Contact:
Re: Component Creation Video Tutorial
Hi.
Here is the same program, but using the LED as a latching lever. I have also changed the program to link to the LED programmatically, as this is the way most components can do this. There is an alternative using events, which is how the components operate when exported (there is no 'main' for a component, so this is used as a test program). You could do multiple states with the ButtonHelper in its present state, but it involves the use of events and is a bit more complicated. There are a couple of ways this can be done, I have only shown one here as the other involves 'stealing' events from the ButtonHelper, which is a bit overly complicated. This works by taking a 'snapshot' of the buttons position when simulation starts. It then moves this snapshot position to two different 'on' states, and tells the helper which one to use next each time the button is reset to its 'off' state.
I hope this is of use, I can go through any (or all) of the methods and calls needed in more detail as you would like.
Jonny
Here is the same program, but using the LED as a latching lever. I have also changed the program to link to the LED programmatically, as this is the way most components can do this. There is an alternative using events, which is how the components operate when exported (there is no 'main' for a component, so this is used as a test program). You could do multiple states with the ButtonHelper in its present state, but it involves the use of events and is a bit more complicated. There are a couple of ways this can be done, I have only shown one here as the other involves 'stealing' events from the ButtonHelper, which is a bit overly complicated. This works by taking a 'snapshot' of the buttons position when simulation starts. It then moves this snapshot position to two different 'on' states, and tells the helper which one to use next each time the button is reset to its 'off' state.
I hope this is of use, I can go through any (or all) of the methods and calls needed in more detail as you would like.
Jonny
-
- Posts: 116
- Joined: Tue Jul 17, 2012 9:34 am
- Been thanked: 18 times
- Contact:
Re: Component Creation Video Tutorial
Hi Jonny,
Many thanks for the examples. I see how the linking to the target can be either direct or programmatically.
Also how the axis are specified and that Z would give a rotational control.
The second example was quite straightforward, however the 3rd will take me a bit of time to assimilate.
How is latching achieved at this level ?
Also the switch I had in mind is not really a toggle one. It latches either to one side or the other, and also in the centre OFF position. The mouse pointer position needs to come in somewhere ?
This is great stuff, just what's wanted...
Cheers
Stewart
Many thanks for the examples. I see how the linking to the target can be either direct or programmatically.
Also how the axis are specified and that Z would give a rotational control.
The second example was quite straightforward, however the 3rd will take me a bit of time to assimilate.
How is latching achieved at this level ?
Also the switch I had in mind is not really a toggle one. It latches either to one side or the other, and also in the centre OFF position. The mouse pointer position needs to come in somewhere ?
This is great stuff, just what's wanted...
Cheers
Stewart
- JonnyW
- Posts: 1230
- Joined: Fri Oct 29, 2010 9:13 am
- Location: Matrix Multimedia Ltd
- Has thanked: 63 times
- Been thanked: 290 times
- Contact:
Re: Component Creation Video Tutorial
Hi Stewart. Glad your getting through all this.
In Flowcode you can 'snapshot' the position of an object. If you store this in a 'handle' variable the snapshot will exist as long as the handle does. You can then manipulate the position (in this case by rotating by 30 degrees) and at any point write that back to the component.
ButtonHelper allows you to set the 'on' and 'off' positions of your switch manually. What we do is manually reset the 'on' position every time the button is moved to the 'off' state. In the component debugger select 'Show position Handles on Panel'. You will see orange boxes where the two on and one off position are located.
Cheers,
Jonny
In Flowcode you can 'snapshot' the position of an object. If you store this in a 'handle' variable the snapshot will exist as long as the handle does. You can then manipulate the position (in this case by rotating by 30 degrees) and at any point write that back to the component.
ButtonHelper allows you to set the 'on' and 'off' positions of your switch manually. What we do is manually reset the 'on' position every time the button is moved to the 'off' state. In the component debugger select 'Show position Handles on Panel'. You will see orange boxes where the two on and one off position are located.
Cheers,
Jonny
-
- Posts: 116
- Joined: Tue Jul 17, 2012 9:34 am
- Been thanked: 18 times
- Contact:
Re: Component Creation Video Tutorial
JonnyW wrote: In Flowcode you can 'snapshot' the position of an object. If you store this in a 'handle' variable the snapshot will exist as long as the handle does. You can then manipulate the position (in this case by rotating by 30 degrees) and at any point write that back to the component.
OK. I think
I presume you mean "Show position objects on the panel" in the component debugger ?ButtonHelper allows you to set the 'on' and 'off' positions of your switch manually. What we do is manually reset the 'on' position every time the button is moved to the 'off' state. In the component debugger select 'Show position Handles on Panel'. You will see orange boxes where the two on and one off position are located.
If so, I see nothing in the way of orange boxes...
Cheers,
Stewart
- JonnyW
- Posts: 1230
- Joined: Fri Oct 29, 2010 9:13 am
- Location: Matrix Multimedia Ltd
- Has thanked: 63 times
- Been thanked: 290 times
- Contact:
Re: Component Creation Video Tutorial
Hi Stewart.
Jonny
Apologies, the check is right, but the boxes show a position based on the original object. The scale and size of an LED are different (size is a components scale multiplied by all sub-objects; don't ask...). The positions are being shown, but only show the scale of a position, which is what is used internally in all the maths. Objects have the same scale as size, so positions show what you would expect on the panel, as with this demo: This demo is identical but the previous but uses an object instead of a built-up component. It shows the positions OK. (I hope this isn't too confusing!) Cheers,I presume you mean "Show position objects on the panel" in the component debugger ?
If so, I see nothing in the way of orange boxes...
Jonny
-
- Posts: 116
- Joined: Tue Jul 17, 2012 9:34 am
- Been thanked: 18 times
- Contact:
-
- Posts: 116
- Joined: Tue Jul 17, 2012 9:34 am
- Been thanked: 18 times
- Contact:
Re: Component Creation Video Tutorial
Hi Jonny,
That example is OK now, and I see what is happening. Unfortunately, it is now getting rather confusing to me as I am used to a more defined approach.
There are a lot of new processes to understand, which are unlike any I have been previously exposed to.
I find that I learn best by taking someone else's ideas, and modifying (plagiarising) them !
You guys at Matrix have probably been eating, drinking and sleeping V6 for some time now, but many of the concepts are new to customers like me.
I need to take a bit of a break, do some (overdue) project hardware, and then come back to the subject of component development.
Maybe by then your plan to provide more in the way of support material on user designed components will have moved on.
Many thanks for your efforts.
regards
Stewart
That example is OK now, and I see what is happening. Unfortunately, it is now getting rather confusing to me as I am used to a more defined approach.
There are a lot of new processes to understand, which are unlike any I have been previously exposed to.
I find that I learn best by taking someone else's ideas, and modifying (plagiarising) them !
You guys at Matrix have probably been eating, drinking and sleeping V6 for some time now, but many of the concepts are new to customers like me.
I need to take a bit of a break, do some (overdue) project hardware, and then come back to the subject of component development.
Maybe by then your plan to provide more in the way of support material on user designed components will have moved on.
Many thanks for your efforts.
regards
Stewart
- JonnyW
- Posts: 1230
- Joined: Fri Oct 29, 2010 9:13 am
- Location: Matrix Multimedia Ltd
- Has thanked: 63 times
- Been thanked: 290 times
- Contact:
Re: Component Creation Video Tutorial
Hi Stewart. No problems at all.
There is a lot to take in. The deeper you get the more complicated things become, as the system is designed to shield users from what is going on. When I get the chance I will try to get something together for a 3-way switch as we do need to get how-to tutorials on subjects like this out there.
Jonny
There is a lot to take in. The deeper you get the more complicated things become, as the system is designed to shield users from what is going on. When I get the chance I will try to get something together for a 3-way switch as we do need to get how-to tutorials on subjects like this out there.
Jonny
- Benj
- Matrix Staff
- Posts: 15312
- Joined: Mon Oct 16, 2006 10:48 am
- Location: Matrix TS Ltd
- Has thanked: 4803 times
- Been thanked: 4314 times
- Contact:
Re: Component Creation Video Tutorial
Here are a couple of new vids...
[/youtube]
[/youtube]
[/youtube]
[/youtube]
[/youtube]
[/youtube]
Regards Ben Rowland - MatrixTSL
Flowcode Product Page - Flowcode Help Wiki - Flowcode Examples - Flowcode Blog - Flowcode Course - My YouTube Channel
Flowcode Product Page - Flowcode Help Wiki - Flowcode Examples - Flowcode Blog - Flowcode Course - My YouTube Channel