Helm: Designer Tutorial

This tutorial takes you through constructing and running a simple panel to control keying on an Imagestore Solo. It will also introduce you to the basic operations of Helm Designer.

Our panel will have a master ‘keyer on/off’ button, and two further buttons which select between different logos.

As you work through the tutorial, it’s a good idea to save the panel design at various places. You can do this with the File menu, which offers the usual choices of New/Open/Save/Save as, and a list of recently used files for easy access.

Panel Background

Start up Helm, and select New from the File menu. You’ll see a grey rectangle in your work area.

First, let’s select a background for our panel. Any windows BMP or JPEG file can be loaded. Click anywhere in the grey rectangle, and the Property Inspector will show the properties for the “Root Panel”. We want to change the “Picture” property, so click on the button by that with the ellipsis (This means there’s more settings that can be accessed).

You’ll now see the Picture Edit dialog. Click the Load button, and open the file “panel_background_1.png”, which will be in a sub-folder of the folder where you installed Helm. This is typically c:\Program Files\Rascular\Helm Designer. You can resize the dialog to see more of the picture if you want. To confirm your choice, now click “OK”.

Now the background is loaded, you can either set the panel size to match the graphic or use the Stretch Mode property to fit the background to the current panel size. There are various stretch options but Fill probably makes best sense here.

Place an Imagestore

Now, use the left mouse button to drag an IS Solo icon from the Parts Bin, and drop it onto the panel background. This adds an IS Solo device to the panel, which we can then control from buttons which we add later.

The IS Solo icon will not be visible when the panel is run, but is shown in the designer to help you design the panel.

The IS Solo is automatically named “is2_solodevice_1”. Every item we add to the panel is given a name, which you can change to a more useful one. Device names should be ideally changed before you assign actions to the devices, otherwise you will need to manually edit the action scripts.

Use the Property Inspector to change the name to “MyIS”, and to enter the IP address of the Imagestore.

If you want your panel to control more than one Imagestore, you can add more IS Solo icons to the panel, and set the IP address and name for each one independently.

Every item on the panel must have a unique name, otherwise your panel will not operate correctly.

Adding Buttons

Now, we’ll add the buttons to our panel. From the parts bin, drag two small buttons and one wide button onto the panel, and arrange them like this:

You will find later how you to add new button styles to the parts bin. For now, we will use the ‘built in’ ones. We also added a Rascular logo here.

You can move items on the panel by clicking and dragging them. Use “shift-click” to select and move multiple items together. When you have multiple items selected, you can set common properties to the same value. Select all three buttons, and set the Top property to 100. This will make sure the buttons are neatly aligned.

The two small buttons will load the two logos. Use the property inspector to name them “Bug1” and “Bug2”.

We’ll use the GroupIndex property to make these buttons interlock. Set the GroupIndex for both buttons to 1.

We’ll also put Captions on the buttons. Set the Captions to be “Bug 1” and “Bug 2”, or something similar.

Next, set up the wide button with Name = “KEYER”, Caption= “Keyer ON”. Set its GroupIndex to -1 (which means it latches, but does not interlock with other buttons.)

The result should look like this.

Testing the design

Before we add any actions to our buttons, we can test the overall design by using the Run Panel button.

The Parts Bin and Property Inspector are now hidden, and the buttons can be pressed to ensure that they interlock correctly.

When you have finished testing this, just close the panel window and return to Helm Designer.

Adding actions to buttons

The next stage is to make our buttons do something useful. We need to assign some ACTIONS to the various EVENTS which our buttons can generate.

Start with the KEYER button: We wish to make it turn the keyer on when the button is turned on, and turn the keyer off when the button is turned off.

Select the KEYER button, and click on the ellipsis dots for the OnClick Event Script.

Open the properties for the KEYER button, and press the “Edit Actions…” button to call up the action script editor.

The Script Property Editor will open, and we can enter the actions we require. You can type directly into the top ‘edit’ section of the script window, or use the lower section to enter Actions interactively. We want to make the Imagestore keyer turn on, so we select the ‘my IS’ device from the Device Chooser.

The Action Chooser will now have a list of possible actions for the Imagestore, and as you select each one, the Parameters section will update with any required parameters.

We want the FadeUp action, which has no parameters (at least, not on an IS2 Solo). Select it, and then click “Update”. This updates the event script to contain the new action.

You’ll see that all script actions have the format “DEVICENAME:ACTIONNAME (PARAMETERS)”.

If you change the name of a device via the properties page, you may need to manually change any action scripts which refer to the device.  Because of this, you should set the device names up before assigning actions to events.

Click OK to accept this script, and repeat for the KEYER OnClickOff event, adding a FadeDown action for the my_IS device.

Your KEYER button should now control the Imagestore’s foreground keyer. You can test this directly by turning off design mode and monitoring your Imagestore’s output.

Assigning “Image Load” actions

We now need to make our pair of logo select buttons work. For each button, assign a MyIS LoadLogo action to their OnClick event. When you select the LoadLogo action, a parameter entry field will appear, where you should enter the name of the Image file to load. For this panel, assume we have logos called LOGO1.OXT and LOGO2.OXT present in the Imagestore.

The Final Touch


We should give a ‘caption’ to our panel, which is shown in the panel’s title bar when run. Select the Caption Property for the Root Panel, and enter “Logo Control” or a similar name.

Now you can save your panel for the last time.

The finished panel from this tutorial is called “tutorial.helm” and is installed in the “c:/Program Files/Rascular/Helm Designer” directory. If you wish to try this panel with your own Imagestore, just change the Imagestore IP address as shown earlier.

We could easily extend this panel to make the master KEYER button act as a tally, so it follows the keyer state if automation –or another control source – uses the keyer. To do this, we add scripts to the KeyerOn and KeyerOff events for the MyIS device, and make them perform SetOn and SetOff actions on the KEYER button respectively.