(1.1.0) Cookbook

Collection of (hopefully) useful recipes for making bits of Open Stage Control layouts. Feel free to ask if you need a hand, and add anything to this page that you think isn’t explained well by the Open Stage Control documentation.

Sending multiple OSC messages with one button

1. Create a button and set up as normal, other than the osc section of the inspector.

2. Set bypass to true in the osc section of the inspector to stop the button sending its default OSC messages.

3. In the onValue handler, in the scripting section of the editor, use the send function to send as many OSC messages as required.

   1. The syntax looks like this: send('[ip address]:[port]', '[/osc/address]', 'all', 'the', 'arguments'); (without square brackets)

   2. A variable, value is available, which is replaced with the button’s new value.

e.g:

Open

This sends /hello/1 and /hello/2 with the button’s new value as an argument to localhost:9000 whenever the button’s value changes.

Any other JavaScript can be used in this onValue property for basic logic, etc.
Feel free to ask if you’re doing something unusual.

References: https://openstagecontrol.ammd.net/docs/widgets/scripting/ , https://openstagecontrol.discourse.group/t/two-or-more-osc-address-on-a-toggle-button/178/6

Using image assets

You can use the image widget for this.

For example, to use an image on a button:

1. Create a panel container widget to group the button and image widgets.

2. Within the panel, create button and image widgets.

   1. Set both of their geometry settings to fill their parent containers, as in the screenshot below.

   2. Make sure the button is on top of the image - i.e. above it in the project tree.

   3. Style the button as required - it’s probably worth making the button mostly invisible, as in the screenshot below.

3. Set up the button’s OSC sending/behaviour as required.

4. Set the image’s value property in the value section of the inspector to the desired image.

   1. The simplest way to do this is to convert the image to base64 using this utility: Base64 Image Encoder. Upload an image, click “copy image”, and paste this into the the value property of the image component.

5. You should see the image appear after you click out of the value input.

6. Now clicking the image will actually click the button in front of it and send the required OSC.

Open

Geometry settings

Open

Button styling

You can follow similar steps to use an image elsewhere (without grouping it/creating the button etc.)

If we didn’t do the base64 conversion the image would have to be made accessible to the browser by the service, which is a bit annoying.

Alternate base64 conversion using WSL/bash: (echo "data:image/*;base64," && base64 [image file]) | tr --delete '\n' > a (without square brackets). Copy contents of new file 'a' into value property.

References: https://openstagecontrol.ammd.net/docs/customization/css-tips/, https://openstagecontrol.discourse.group/t/an-image-on-a-push-button/96