Add support for setting Icons via JSON in Stream Deck Script Widgets

I propose adding support for setting icons (images) via JSON in a script widget.

This could be done by adding support these properties:

  • BTTStreamDeckBackgroundIconPath
  • BTTStreamDeckBackgroundIconResize - true or false (maps to "fit" and "don't resize")
  • BTTStreamDeckBackgroundIconWidth - Width for fixed size
  • BTTStreamDeckBackgroundIconHeight- Height for fixed size

While it's currently not possible to use icon paths, you can provide the base64 encoded icon directly. Here is an example:

return "{

\"BTTStreamDeckImageHeight\" : 50,
\"BTTStreamDeckImageWidth\" : 50,
\"BTTStreamDeckResizeImage\" : 2,
\"BTTStreamDeckImage\" : \"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\"
}"

To get the base64 of an icon you can use this terminal command which will copy it to your clipboard
base64 -i "~/Downloads/youricon.png" | pbcopy

Alternatively you can also return SF Symbol configurations like this:

return  "{
     \"BTTStreamDeckSFSymbolName\" : \"house\",
     \"BTTStreamDeckIconColor1\" : \"255.000000, 45.000001, 33.000002, 255.000000\",  
     \"BTTStreamDeckIconColor2\" : \"110.000001, 193.000004, 56.000000, 255.000000\",    
     \"BTTStreamDeckIconColor3\" : \"241.000001, 208.000003, 48.000001, 255.000000\",
     \"BTTStreamDeckImageWidth\" : 50, 
     \"BTTStreamDeckIconType\" : 2
}"
2 Likes

Nice! - That totally solves what I'm trying to do.

What are the possible values for BTTStreamDeckResizeImage?

The easiest way to find the values, is to configure the widget, then copy it to your clipboard (cmd+c) and to some text editor (cmd+v). All possible keys are listed in the BTTTriggerConfig part of the JSON.

All properties that can be edited in the UI can also be returned from the script.

2 Likes

Is this code for Shell Script, or Siri Shortcuts?

Looks like this works on AppleScript widget. How can I modify it to work with shell script as well?

You can configure your widget with all script widgets.
I have a Shortcut widget which sets the background color.
For Shortcuts you have to return valid JSON instead of the escaped JSON from the info.