New JSON Editor + Color Picker (Rule Engine)

We’re excited to introduce a new JSON editor for device commands and, separately, an updated Color Picker in the Rule Engine!

JSON Editor

The new JSON editor is built upon the base editor used in expressions (and in the Custom Tiles editor). The new editor is available when editing JSON arguments of a device command as well as HTTP Actions and includes a number of neat features:

  • Syntax highlighting and automatic bracket matching
  • Syntax validation with error indicators
  • Ability to use inline expressions within JSON :exploding_head:
  • Support for the newer JSON5 standard (incl. comments in JSON)

:bulb: As a reminder, you can switch between the Color Map and JSON data types in device commands by flipping the ‘Advanced’ toggle in the top-right corner of a device action on, then tap the icon to the left of the argument to select a new type.

This update also includes an enhancement where the existing value is retained when switching between Color Map and JSON data types (when possible).

Inline Expressions

You can now use inline expressions within your JSON payloads, making it easier to use variables and calculations in various parts of your JSON. This should make it much easier to build dynamic JSON payloads!

To use an inline expression, simply wrap the expression in double braces: {{ 1 + 2 }}

Keep in mind that the resulting JSON needs to have the appropriate formatting for various types, so you may need to wrap your braces in quotations for string values.

Examples
For example, you could use the setColor() command to display a random color by changing the hue:

{
  "hue": {{ randomInt(0,100) }}, //numeric, so we don't use quotes
  "saturation": 100,
  "level": 100
}

Or for a device which accepts JSON directly, like the execute() command of the Fully Kiosk driver.

{
  "text":"We {{ $context.event.params.force ? 'will' : 'will not' }} interrupt the previous message",
  "queue": {{ $context.event.params.force ? 0 : 1 }}
}

:thinking: This is a bit more complex looking example, but it’s showing that you can use context variables and expressions inline within strings as well as determining numeric or other types of output.

Color Picker

While working on the new JSON Editor experience, we found ourselves frequently using the setColor() command as an example, so we updated the color picker to use the color wheel that’s available on dashboards.

1 Like