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

Feature Requests
1

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
2

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
3

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

What are the possible values for BTTStreamDeckResizeImage?

4

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
5

Is this code for Shell Script, or Siri Shortcuts?

6

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