Fusion Control Centre

Categories

Fusion Brain-> (2)
Bundles
Sensors and Input Devices-> (1)
Output Devices
Cables

New Schwag

Carbon Film Resistors
$0.50

Quick Find

Information

Shipping & Returns
Privacy Notice
Conditions of Use
Contact Us

Fusion Control Centre Tutorial

Tutorials -> Skin Designer -> How to use the Skin Designer

This is a full in-depth tutorial on how to use the Skin Designer. Some of the other Skin Designer tutorials are just exported sections of the main tutorial.

The main Skin Designer tutorial will show you how to change the global skin settings, add and configure a digital output, add and configure an analogue input, add and configure a digital input, add and configure an other button, add a dead image, and how to open and save the skin file.

Open Program
	When you first open the program, this is what you will see. The only functional buttons when the program is first opened are on the top left. The entire right side is disabled until a Fusion Brain is added.

Add a Brain to the skin
	In order to actually start adding functional items, you need to first add a Fusion Brain. Do so by clicking the "plus sign" in the top menu bar. When you do a popup will appear...

Dialogue to Add a Brain

This is the popup that appears when you add a Brain. The Name is just a user identity. It does not matter what it is, because this will always be hidden in the program. However while using the skin designer, if you have multiple Fusion Brains, you should give thought to naming them after what they do, or where they go. Then when you add items to the skin later, you do not have to continuously refer back to the designer panel for the VID/PID you want.

The VID/PID is a unique hardware address. If when you bought the Brain you selected VID/PID Version #1, then the default is automatically filled in. Version #2 ends with a "d" instead of a "c", Version #3 ends with a "e" instead of the "c", and Version #4 ends with an "f" instead of the "c".

After a Brain is added
	After you add a brain to the Skin Designer, You will notice that an item is added to the Designer Panel as well as the buttons on the right are now available to use. The Designer Panel shows all the information about all of the Skin elements in a tree form while the area on the right is the graphical area.

Change the Size of the Skin

Select "Global Skin Details-->Program Settings-->Size" and left click. A popup dialog will appear as in the middle of this image. Enter the width and height of the skin. Both fields must be integer numbers (no decimals) and must be non-negative (greater than zero). After you change the skin size you will notice that the Graphic's Panel has adjusted to the size you entered to make sure you know where your boundaries will be. Please be aware that there are scroll bars which may hide the area if the new size is larger than your screen.

Send the Program to the System Tray
	If you wanted to start the program in stealth mode and control it externally, then this is the option for you. If set to true, when you run the main program a little atom icon will appear in the system tray (where the clock is) and no window will popup. To open the program to be viewable, double click the tray icon and it will pop-up. Then minimize the application to send it back to the tray.

Change the Output Refresh Rate
	The Output Refresh Rate is how many milliseconds between when the PC tells the Fusion Brain what the outputs should be. For instance, if you have an animation that blinks an output, changing this to a higher value will make the output blnk more slowly than if you were to change it to a lower value where it would blink faster. The value is in milliseconds (1000 milliseconds per second).

Change the Input Refresh Rate

The Input Refresh Rate is the time in milliseconds between when the PC polls the Fusion Brain for data from its inputs (both digital and analogue). The value is in milliseconds (1000 milliseconds per second). This means that the lower the value the faster the inputs are polled. This is a global setting and can not be changed for individual inputs. The higher the refresh rate, the more communication is needed on the USB line, which also means more CPU cycles. On lower end via systems, this may be a problem. On a Pentium 3, a value of 50-60mS is acceptable. The minimum value (fastest possible) is around 32mS due to the processing limitations.

Enable Speech/Voice Control

If Speech is enabled, then you can use voice commands to control the computer. Please look at the "How to setup Speech Control" tutorial for further information on the syntax of the file. If you do not have a microphone attached, make sure you leave this box disabled. If it is enabled and there is no mocrophone attached, it may randomly turn on and off outputs because of internal PC noise. If "Use Full Dictionary" is enabled, then there is less of a chance that random conversation will be interpretted as a command, but the accuracy will be lowered dramatically. For normal use, leave this off.

Show Menu Bar
	The Menu Bar is the top area of any windows area that has the minimize, maximize, and close buttons. If this is set to false, then that bar will be hidden. The only way to then close the program is to have an "Other Button" with an "Exit" function on it. This is for a cleaner look when embedding in a frontend or other application where the top bar may not be appropriate.

Select Background Image
	This is the main image that displays behind everything else. It can be displayed 3 ways: stretch, centre, and tile. Each will be explained in the next sections. The background image is global and does not change from page to page.

Stretch Background Image
	If you select Stretch as the option for the Background Image layout, it will take the original image no matter the size and scale it to equal size of the Graphical Panel.

Centre Background Image
	If you select Centre as the option for the Background Image layout, it will take the original image no matter the size and centre it on the Graphics Panel. If the image is larger than the Panel, then it will be cropped (not all of the image will show), and if the image is smaller, then the image will be surrounded by white.

Tile Background Image

If you select Tile as the option for the Background Image layout, it will take the original image no matter the size and position it in the top left corner of the Graphics Panel. It will then copy the image by first filling out the row horizontally, and then copying that row vertically. So it may clip the right-most column as well as the bottom-most row. This is useful for images such as a Brushed Metal Background where tiling gives it a better look, but the image used to create it is much smaller.

Change Button State in Designer
	The default button state for the skin designer is "Up". An "Up" button state means that any button with 2 image options will show image option number 1. This setting does not actually effect the skin, only the display in the Skin Designer. This is useful for testing both images on multiple image buttons. For a digital output, "Up" means not on and "Down" means the output has been turned on.

Button State Changed to Down
	For a digital output, "Up" means not on and "Down" means the output has been turned on. As you can see in the picture, when the Button State is set to "Down" then the images appear as if they were pushed down meaning their repsective functions are turned on.

Change the Current Page

The Program support multiple pages so that you do have to clutter everything on a single screen. The main page is numbered at 0. The program will not display negative pages (less than 0) but will display any positive intiger. Sometimes you want to create a hidden analogue input threshold for a current input so you can "hide" it by assigning it to a page of "-1". It will never be displayed, but will still be evaluated. To switch between pages while running the program, you need to create an Other Button to switch. In the skin designer this menu item will allow you to switch between pages, but will not effect the actual skin file in any way.

Refresh All
	This will redraw every element in the Graphics Panel. So if something happened and an item disappeared or something, then use this button.

Add a New Output
	In order to add a new output to the program, you need to either use the Output menu or select "Outputs" from the Designer Panel, and the add icon will become enabled. Both will bring up the same screen.

A New Output's Up Image
	After you click to add an output, you will see 2 popup windows. This is the first window. It asks you to select the image that will be used as the Up image. An Up image will be displayed when the output is not on.

A New Output's Down Image
	After you click to add an output, you will see 2 popup windows. This is the second window. It asks you to select the image that will be used as the Down image. A Down image will be displayed when the output is turned on, or the animation sequence is turned on.

The New Output Default Screen
	After both the Up and Down Images are successfully chosen and imported, this is the screen that will show up. You will notice that the Up and Down image path's are already filled in with the information that you provided in the previous two screens.

Output Image Area

This is where the image paths are filled in. If you want to change the image, click the button to the right of the path's text area. That will bring up a dialogue for you to navigate to a new image. Currently supported image types are *.gif, *.jpg, *.bmp, and *.png. I suggest avoid using bitmaps unless you want lossless image quality. They are large and will slow down any system if they become overused or are just large files. Jpeg are the good for backgrounds or other static images that dont need to be overlayed, reason being they are small and compress well. Gifs and pngs both support transparency, but do so differently. A gif supports on or off transparency meaning a pixel either has colour, or is transparent. That is it. Good for images that need a sharp cutoff, but have non-linear borders. A png supports multiple levels of transparancy. Every pixel may be any colour at any transparency. This allows for the best looking overlay picture where shadows, reflections, gradients, glows, and other graphical effects can be used easily.

Unique ID Number

You will notice that there is a box that you cannot alter. This is because this number is given to the output by the program and cannot be changed. It cooresponds to the Unique ID code for that button so no other button may have that same number. When you need to link other actions to this output you are creating, this is the number used to link those functions. The Skin Designer does this all in the background and will display both the name and the UID, but the main program has no use for names, and goes off of the UID only.

Output Name

This is the filed where you specify a name for the Output. It has no purpose other than making it easier for you to differentiate between the different outputs when selecting other functions and when viewing the item specific details in the Designer Panel. The main program relies on the UID, whereas humans may prefer the friendly naming. The name can be anything you want. By default it is "Output" followed by the UID.

Output VID and PID
	This dropdown menu will allow you to select which Fusion Brain this output belongs to. You need to have already added the Brain to the Skin Designer as shown in the steps earlier in this tutorial. If you only have added 1 Brain, then you will only be able to add 1 Brain.

Output Port

Since each Fusion Brain has 12 different output ports, you need to specify which port this output will be connected to. Please look in the user manual to see which outputs coorespond to which physical pins on the Fusion Brain. You can have multiple Output Buttons to control the same output, so you do not need to select different ports. This means that if you accidenatally do not specify the port, all your Output Buttons will be the same, which may prove frustrating if it is not intended.

Output Page
	This is where you select which page you want the Output Button to appear on. The default page is 0, and a page can be any number. Only numbers greater than or equal to 0 will actually be displayed. If you wanted a hidden button, then enter -1 as a page number, because it will never be displayed.

Output Button Border
	If you wanted a border to surround the image, then this is where you enter the border thickness in pixels. Only really usefull in low end graphic skins where software drawn borders rather than borders embedded into an image may save space.

Output Colour Up
	The Up Colour is the colour that is used for the text overlay of the button when the output is in the Up position meanning not on.

Output Colour Down
	The Down Colour is the colour that is used for the text overlay of the button when the output is in the Down position meanning turned on.

Output Text Font

This will select the font used to display the text over the Output Button. It reads all the currently installed fonts on your computer, to create the list. So if you see fonts in the image that you do not see, it is because they are not installed on your computer. The size below is in points just like you would find in your favourite office document editor. And if the checkbox for bold is checked, then the font will be bold.

Output Sounds
	This is where you setup the sounds to be played. You can leave these blank if you dont want any sound to be played. The sound file itself must be a *.wav file. The On to Off sound is played right after the output turns off after being on, and then Off to On sound is played right after an output is turned on after being off.

Output Timer
	This is how long the Output will stay on after the Brain loses communication with the PC such as after entering standby, hibernate, or shutting down. The time in seconds is the number entered cubed. So if you enter 2, then 2x2x2 = 8 so 8 seconds. If you enter 10, then it is 10x10x10 =1000 which is 1000s or 16 and a half minutes.

Output Link-To List

This is where you setup the Link-To list. You need to already have added outputs to see them listed in these checkboxes below, so it should be done during the editing phase after you have added all your outputs. Every output that is checked will be linked to the state of the current working output. For instance, if you have Output 1 linked to Output 2, everytime you turn on Output 1, Output 2 will turn on too no matter the current state of Output 2. If you turn off Output 1, then Output 2 will turn off no matter the current state. However, if Output 2 is not linked to Output 1, then Output 2 can be switched on and off independantly of Output 1.

Output Anti-Link-To List

This is where you setup the Anti-Link-To list. You need to already have added outputs to see them listed in these checkboxes below, so it should be done during the editing phase after you have added all your outputs. Every output that is checked will be linked to the opposite state of the current working output. For instance, if you have Output 1 anti-linked to Output 2, everytime you turn on Output 1, Output 2 will turn off no matter the current state of Output 2. If you turn off Output 1, then Output 2 will turn on no matter the current state. However, if Output 2 is not anti-linked to Output 1, then Output 2 can be switched on and off independantly of Output 1.

Output Link-Enable and Link-Disable Lists

This is where you setup the Link-Enable and Link-Disable lists. You need to already have added outputs to see them listed in these checkboxes below, so it should be done during the editing phase after you have added all your outputs. For the Link-Enable, every output that is checked will become "enabled" or allowed to be pressed, and those not checked will not change states. For the Link-Disable, every output that is checked will become "disabled" or not allowed to be pressed and those not checked will not change states.

Output Animations and Timed Outputs

This is perhaps one of the most important, versatile, and confusing feature for the digital outputs. This feature allows for up to 30 frames of synchronous or asynchronous animation of the outputs, as well as the ability to keep an output on for a set time and then shut off automatically.

First off you will notice 30 sets of 2 checkboxes. The checkbox on the left is the Enable/Disable box. The frame is not counted unless the box is checked. So at default there are 0 frames in the animation and nothing will happen if this Button is turned on. The second checkbox is the state of that frame. If the checkbox is checked, then that frame is an On frame meaning it will be turned on when that frame is being evaluated. Otherwise it will be an Off frame, and when evaluated the output will be turned on.

So to create a blinking output, you need 2 frames to be enabled. and 1 frame needs to have its state checkmark checked and the other unchecked. Now to make this blink forever such as an animation sequence for some lighting LEDs, you need to check the "Repeat Forever" checkbox in the "Forever"area. This will make it blink as long as the Output Button is turned on.

Now to make the output blink for a set amount of time, make sure the "Repeat Forever" is unchecked. Now you need to figure out how many "cycles" you need it to run for. You can determine the cycles needed by using the "Output Refresh Rate". The Output Refresh Rate is in milliseconds, and that time is equal to 1 cycle. So if you want this output to blink for 1second (1000 milliseconds), and your Output Refresh Rate is 50mS, then you need 1000/50 cycles which equals 20. So in the "Number of Repeats" area, enter the number 20. If your Output Refresh Rate is 30mS and you want the output on for 5seconds, then 5000/30 means 167 cycles.

This is the basis for the timed output. In order to create an output that stays on for x seconds continuously, you actually need to create an "animation". This animation would be 1 frame with the state checkbox checked. Then depending on how long you want the output on, you calculate the same cycles as you did above. So if you want to control your windows, and they need 3 seconds to be on, and your output refresh rate is 100mS, then 3000/100 is 30, so you would enter 30 in the cycles box.

Once you fully understand how easy it is to use this powerful feature, you will be able to do so much more with your Fusion Brain,

Save Newly Created Output

After you have set everything up, you can either Add the New Output, or Cancel. If you Cancel then nothing will be changed. So if you were editing a button, no changes will be made, and if you were creating a new button, nothing will be saved. If you are editting a button, then clicking the Add new output button, will overwrite the old button with this new one. If you are creating a new button, it will be added to the Designer Panel as well as the Graphical Panel.

After Adding New Output
	After you click the Add Button, you will see it added to the Designer Panel (on the left) with all the details shown in textual form, as well as in the Graphic Panel (on the right) in graphical form.

Add New Analogue Input
	Click this button to start the Add new Analogue Input button.

Add Single Static Image
	A Single Static image is an image that is used just as a background for the button. Good uses would be for a textual display. So a default button background and then adfter setting up the text, it will display the correct values.

Add Multiple Dynamic Images
	Multiple Dynamic Images means that depending on the value of the analogue input it will change images. Can be useful for graphs or for low resolution guages.

Add an Image (Multiple Dynamic)
	Click the add button to select an image. You should select the image you want to use for the lowest voltage range first. For example if you have a thermometer image, and the greater the voltage, the greater the temperature reading, then the first image you add should be of the thermometer mercury being really low, and the last image to add should be ofthe mercury high.

After Add an Image and Image Order(Multiple Dynamic)
	After you add an image to the list, you will notice that the 3 previously disabled buttons have become enabled. "Up" and "Down" move the image up and down in the list respectively. "Remove" will delete the image from the list.

Maximum and Minimum Values (Multiple Dynamic)
	Under the "Settings" area you will see the "Min Value" and "Max Value" boxes. These are in volts. The largest possible value that can be read in is 5v and the absolute smallest is 0v. These numbers will determine when each image is used. If you look where the image path is you will see the minimum and maximum values there as well. This is becaue reight now there is only 1 image.

After Adding a Second Image (Multiple Dynamic)

Now you will notice that after you add a second image with the maximum and minimum values still at 5 and 0 respectively, that the values next to the image paths have changed. Since the range is 0-5 and there are 2 pictures, each image has a range of 5/2 which is 2.5. So if the analogues value is between 0 and 2.5, it will display the image with the path next to it which is image number 1. If the analogues value is between 2.5 and 5, it will display the second image.

(Multiple Dynamic)
	blah...