Stream Deck tips on uno’s JSON function for overlays

If you’ve read our previous Stream Deck tips and tricks, you probably have a basic understanding of how to set up your Stream Deck and use it with the uno plugin. However, you might not know that our Stream Deck plugin has an incredibly useful JSON function that allows you to control and edit uno overlays.

What can the JSON function do?

You might want a Stream Deck key that changes multiple values in an overlay at once. For example, you might want to reset the counters of both players in a gaming overlay. While you can do this using a Multi Action key, this can sometimes lead to delays, lags, or unexpected results. For our uno-nauts, this isn’t ideal. You don’t want a scoreboard to experience noticeable delays while streaming a high-stakes match.

You might also want to program a Stream Deck key that changes an overlay’s look to a pre-set, customized colors and logos. This is particularly useful if you regularly stream for a number of sports teams and need to set up quickly – or if you have multiple guests on a live podcast and need to swap quickly between their lower third titles. 

The JSON function allows you to change multiple values in a single Action – including content and customization. This works better than programming Multi Actions in your Stream Deck app. 

Here are a few things to help you get started, including using the “Fetch content JSON” button, tips on editing JSON values, and more. 

Fetch content JSON

You can use the “Fetch content JSON” button to take a snapshot of the settings in the overlay interface. For anyone not comfortable with coding, this is a simple solution and requires no editing of JSON. 

Here’s how to use the “Fetch content JSON” button:

1. Set up an Uno Control key.

2. In the Action dropdown menu, click on “Set overlay content JSON”.

3. Scroll down to find the “Fetch content JSON” button. Tap the button to fetch the current values from the overlay. 

When you press this Stream Deck key again later, you’ll recreate the exact values currently set in the uno overlay controls.

Setting overlay content vs. setting customization 

Set overlay content JSON allows you to change the values displayed in the overlay, for example points scored.

Meanwhile, with the Set customization JSON you can program a key to automatically change to certain logos, colors, and other settings in the uno overlay interface’s Customize panel.

Some overlays will support both the “Set overlay content JSON” and “Set customization JSON” actions, and are categorized as uno Essentials. All other overlays only support the “Set customization JSON” action. You’ll know which are available once you paste the overlay’s Uno Token into the Stream Deck Plugin and open the Action dropdown menu. 

Editing data in Content JSON

You can edit the data directly in the Content JSON textbox. However, it can be easier to edit if you copy and paste all the text in the Content JSON textbox into a text editor. Remember to turn your rich text editor off to make sure you’re not making formatting mistakes in your JSON data – or check your work with a tool like JSON Pretty Print. 

For example if you want to program the Stream Deck key to reset the scores of Player 1 and Player 2 back to zero, take the following steps:

1. On the Stream Deck App, press the “Fetch content JSON” button to fetch the current JSON payload.

2. Copy all the text in the Content JSON text box and paste in a text editor (for example, TextEdit). 

3. This function will work even if you only include the values you want to change, so you can delete the values except the player scores. The text in your text editor should look something like this:

{
  "Player 1 Score": 1,
  "Player 2 Score": 2
}

4. Edit the value for each Player Score to “0”. The JSON objects should now look like this:

{
  "Player 1 Score": 0,
  "Player 2 Score": 0
}

5. Copy the edited text and paste to replace the text in the Content JSON text box on the Stream Deck App. Now, when you press the Stream Deck key, it will reset the scores of both players at the exact same time.  

Valid JSON objects

If the Content JSON textbox turns red, the JSON value is invalid.

JSON syntax has particular rules for setting values. JSON data is written as name/value pairs, or key/value pairs. For example, a field name in double quotes is followed by a colon, followed by a value: 

{"name":"John"}

Valid JSON objects include: 

{  
   "A text field": "xxxxxxx", 
   "My text area": "xxxxxxx",
   "my color": "#ffffff",
   "Another color": "red",
   "my counter": 64,
   "A number": 22
}

Using the JSON feature on the uno Stream Deck plugin 

There are also some special rules for certain field types in the JSON function. So, for example, using “execute” or “click” as the value in a Button field type allows you to click that button. You can find more information on control node field types on the Singular Developer Portal.

You can also modify Number, Counter, and NormalizedNumber field types. 

• “+=1” adds 1 to the value displayed.
• “-=1” subtracts 1 from the value displayed.

The Time Control field type supports “play”, “pause”, “reset” and “start”. So for example, you might want to make a Stream Deck key that does both of these functions:

• Resets Player 1 and Player 2’s score to 0
• Restarts the timer

To do this, delete all the data in the Content JSON text box and insert the following text:

{
    "Player 1 Score": 0,
    "Player 2 Score": 0,
    "Timer Control": {    "command": "reset"  
   }
}

With these Stream Deck tips and tricks for using the our plugin’s JSON function, you should have some ideas on how to get your Stream Deck to do even more heavy lifting. But, we understand that learning to use the JSON function can take some time. If you’re stuck and don’t know why something isn’t working – or if you just want to ask our fantastic community for advice, come have a chat on the support channel on our Discord.