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
}"

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.

1 Like