Private & Confidential
(1.0.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
Create a button and set up as normal, other than the
osc
section of the inspector.Set
bypass
totrue
in theosc
section of the inspector to stop the button sending its default OSC messages.In the
onValue
handler, in thescripting
section of the editor, use the send function to send as many OSC messages as required.The syntax looks like this:
send('[ip address]:[port]', '[/osc/address]', 'all', 'the', 'arguments');
(without square brackets)A variable,
value
is available, which is replaced with the button’s new value.
e.g:
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:
Create a
panel
container widget to group the button and image widgets.Within the panel, create
button
andimage
widgets.Set both of their
geometry
settings to fill their parent containers, as in the screenshot below.Make sure the button is on top of the image - i.e. above it in the project tree.
Style the button as required - it’s probably worth making the button mostly invisible, as in the screenshot below.
Set up the button’s OSC sending/behaviour as required.
Set the image’s
value
property in thevalue
section of the inspector to the desired image.The simplest way to do this is to convert the image to base64 using this utility: https://www.base64-image.de/. Upload an image, click “copy image”, and paste this into the the
value
property of the image component.
You should see the image appear after you click out of the
value
input.Now clicking the image will actually click the button in front of it and send the required OSC.
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
(c) Igloo Vision 2020