Returning JSON for Custom Touchbar widget

Hi,

I'm writing a custom widget that display my CPU history in the touch bar.

Unfortunately I can't figure how to update the widget icon every time the script is called.

My script generates an image with the history (of size 40x44) and returns a json that looks like this

"{
"icon_path":"/tmp/cpulogimage.heic",
"background_color": "255,85,100,255",
"font_color": "100,200,100,255",
"font_size": 10
}"

I can tell the script is executed periodically and works as intended but nothing appears in the touch bar button.

I tried returning escaped quotes, I tried returning the other fields as well but it does not seem to do a difference, the result is the same: nothing appears in the touch bar

Here is a screenshot of the touchbar, the big blank button is supposed to host the image I generate. I do not know why it is so large

Any help is welcome.

I have no idea whether the macOS APIs support heic images. Have you tried a different format? Escaping would definitely be necessary

I tried JPG and I tried escaping the path as well

\"{
\"icon_path":\"\/tmp\/cpulogimage.jpg\",
\"background_color\": \"255,85,100,255\",
\"font_color\": \"100,200,100,255\",
\"font_size\": 10
}\"

No change.

Here is the configuration I'm using, maybe I'm doing something wrong here?

In your escaped above one slash is missing for the icon path:

return "{\"icon_path\":\"\/tmp\/cpulogimage.jpg\",
\"background_color\": \"255,85,100,255\",
\"font_color\": \"100,200,100,255\",
\"font_size\": 10}"

nice catch but that didn't fix it

Just edited it again due to a copy & paste error I first made.

I copied your string and this is what I got, touchbar is still empty

55

Ah one more thing I just noticed is the extra slashes in the path. "/" doesn't need to be escaped:

return "{\"icon_path\":\"/tmp/cpulogimage.heic\",\"background_color\": \"255,85,100,255\",\"font_color\": \"100,200,100,255\",\"font_size\": 10}"

In general it's a good idea to use some tool like https://www.freeformatter.com/java-dotnet-escape.html#ad-output to do the escaping

No change, I even tried a reboot with no luck.

Could this be documented somewhere?

ps: Why are the escaping quotes even necessary? I can't even use most JSON serializers/deserializers because they don't escape quotes

Maybe post your complete example or try with something easy first.
For example:

echo "{\"text\":\"test text\", \"font_color\": \"100,200,100,255\"}"

It needs to be escaped because it's just a string. Every string escape tool should work fine.
Are you using the Apple Script or Shell Script widget?

Your widget is probably big because it is displaying a error message thrown by your command, you can decrease the font size of the widget to see it.

I finally figured it out and here is everything I learned and wished I knew 2 hours ago:

  1. The text field is mandatory, BTT will not display anything if the text field is absent or empty
  2. Quotes don't need to be escaped. At least not for the output. Depending on your programming language you might need to escape them if you enter a string as input but nobody should do that and everybody should use a JSON library
  3. heic is supported
  4. If BTT fail to parse the json then the button is huge, I'm guessing this is BTT itself returning an error and trying to fit the parsing error in the button
  5. Slashes in file path can be escaped or not, both "icon_path":"\/tmp\/cpulogimage.heic" and "icon_path":"/tmp/cpulogimage.heic" work
  6. Font color is mandatory otherwise the text is black
  7. Everything else is optional.
  8. extra credit: icon can't be bigger than 44x44

Here is a screenshot of it working using a zero-width space as text

Could you (or someone else) please document the JSON format thoroughly somewhere? I couldn't find anything and all those strange behaviors are extremely off-putting

Here is the whole source as well as explanations on how to install it https://github.com/andrevidela/CPU-Activity-Touchbar