Component Creation Video Tutorial

A forum where Flowcode v6 user created components can be shared, discussed and reviewed.

Moderator: Benj

Post Reply
User avatar
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

Post by Benj »

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.
MotorComponent.fcfx
(11.89 KiB) Downloaded 646 times

stewartbaker
Posts: 116
Joined: Tue Jul 17, 2012 9:34 am
Been thanked: 18 times
Contact:

Re: Component Creation Video Tutorial

Post by stewartbaker »

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

User avatar
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

Post by JonnyW »

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...":
000030_Flowcode1 _.png
Copy properties from stepper
(39.7 KiB) Downloaded 17091 times
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.
000031_copy_properties_01.fcfx _.png
Component.Property.CopyChildValues()
(5.94 KiB) Downloaded 17091 times
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.
000032_copy_properties_01.fcfx _.png
Inherit macros
(19.46 KiB) Downloaded 17091 times
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.
copy_properties_01.fcfx
Example copy of component
(9.08 KiB) Downloaded 542 times
I hope this clears things up.

Jonny

stewartbaker
Posts: 116
Joined: Tue Jul 17, 2012 9:34 am
Been thanked: 18 times
Contact:

Re: Component Creation Video Tutorial

Post by stewartbaker »

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

User avatar
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

Post by JonnyW »

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

stewartbaker
Posts: 116
Joined: Tue Jul 17, 2012 9:34 am
Been thanked: 18 times
Contact:

Re: Component Creation Video Tutorial

Post by stewartbaker »

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

User avatar
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

Post by JonnyW »

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.
000028_Flowcode1.png
(69.12 KiB) Downloaded 17046 times
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

stewartbaker
Posts: 116
Joined: Tue Jul 17, 2012 9:34 am
Been thanked: 18 times
Contact:

Re: Component Creation Video Tutorial

Post by stewartbaker »

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.
Hi,
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

User avatar
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

Post by JonnyW »

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.
button_helper_01.fcfx
(4.04 KiB) Downloaded 528 times
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

stewartbaker
Posts: 116
Joined: Tue Jul 17, 2012 9:34 am
Been thanked: 18 times
Contact:

Re: Component Creation Video Tutorial

Post by stewartbaker »

Hi,
Unfortunately something is wrong with the file.

When loading gave error message:-
Failed to open document.
Attribute <start> is not found

S.

User avatar
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

Post by JonnyW »

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

stewartbaker
Posts: 116
Joined: Tue Jul 17, 2012 9:34 am
Been thanked: 18 times
Contact:

Re: Component Creation Video Tutorial

Post by stewartbaker »

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.

User avatar
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

Post by JonnyW »

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).
button_helper_lever.fcfx
Lever using registration in the button helper
(4.79 KiB) Downloaded 463 times
button_helper_event.fcfx
Lever demo but in an event
(6.64 KiB) Downloaded 445 times
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.
button_helper_tristate.fcfx
Tri-state button using ButtonHelper
(10.13 KiB) Downloaded 446 times
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

stewartbaker
Posts: 116
Joined: Tue Jul 17, 2012 9:34 am
Been thanked: 18 times
Contact:

Re: Component Creation Video Tutorial

Post by stewartbaker »

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

User avatar
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

Post by JonnyW »

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

stewartbaker
Posts: 116
Joined: Tue Jul 17, 2012 9:34 am
Been thanked: 18 times
Contact:

Re: Component Creation Video Tutorial

Post by stewartbaker »

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 :|
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.
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...

Cheers,

Stewart

User avatar
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

Post by JonnyW »

Hi Stewart.
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...
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:
button_helper_tristate_b.fcfx
(10.24 KiB) Downloaded 437 times
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!)
000029_3D_ System Panel.png
(30.15 KiB) Downloaded 16988 times
Cheers,

Jonny

stewartbaker
Posts: 116
Joined: Tue Jul 17, 2012 9:34 am
Been thanked: 18 times
Contact:

Re: Component Creation Video Tutorial

Post by stewartbaker »

Wrong file format again...

Stewart

User avatar
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

Post by JonnyW »

Hi Stweart. Sorry, updated the above post using 6.0.4!

Jonny

stewartbaker
Posts: 116
Joined: Tue Jul 17, 2012 9:34 am
Been thanked: 18 times
Contact:

Re: Component Creation Video Tutorial

Post by stewartbaker »

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

User avatar
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

Post by JonnyW »

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

User avatar
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

Post by Benj »

Here are a couple of new vids...

[/youtube]

[/youtube]

[/youtube]

Post Reply