Icon on second line?

Hi @Andreas_Hegenberg,

Quick question: is it possible using JSON to place the icon on the second line instead of in front of the lines?

Robert Stiekema

It should have been possible, but I actually never tested this. It seems there was an issue which should now be fixed in 2.341 alpha.

You can place the icon at any location by using the {icon} placeholder. However you need to color the icon yourself if you want to do that and you might need to change the text offset afterwards.

1 Like

That sounds great.

It works when I use the Button Title, however using scripts I can't get the icon in place. My script returns:

"{\"text\":\"Saturday 20:01\\n {icon} 63%\",\"font_color\":\"124,252,0,255\",\"icon_path\":\"~/Desktop/battery/b3.png\"}"

also, it seems that with this alpha update my 3 and 4-finger gestures are not working anymore.

ah thanks a lot for testing, at least the gesture issue should be fixed in 3.243 (currently uploading, will be online in 5 minutes), maybe also the script icon issue.

1 Like

Testing with just a simple text button. LEFT JUSTIFIED TEXT

  1. When Icon is on first line it seems to make first line centered.
  2. Icon on second line seems to Justify the text correctly.


Unfortunately this seems to be an issue with images inside of strings, I'm not sure whether I can really fix this as all the formattings seem to be set correctly. The issue seems to happen inside the Apple framework. However you can workaround it by adding a zero-width space before the {icon}

I think I could just always insert such a zero widht space automatically.
// edit: done in 3.244

Just updated to 3.244 same issue. If I add a space in front of the {icon} tag it aligns.

I like how we are able to go negative using the arrows on the Icon Text Offset value. All other values (Free space after button, Extra padding (inside)) stop at 0 or will reset to 0 if you try to go negative. Figured it was some limitation, but if you can change the arrow keys on all value inputs, that would be very nice!

The icon placeholder doesn't seem to work so far.
When I place the iconplaceholder on line 1 I get:

Screenshot 2020-01-26 11.05.07
When I place the iconplaceholder on line 2 I get:

So it does seem to do something, also, the {icon} is removed textwise. When i use no placeholder, normally the icon would appear in front of the text. Now the whole touchbar is messed up:

weird, are you running macos 10.15 Catalina or an older version?

strange, it seems to work correctly with BTT 3.245 here. I'll have another look later!

Very strange indeed. I also run BTT 3.245.
Thanks for taking a look.

My script is as follows:

set batteryPercentage to word 6 of paragraph 2 of (do shell script "pmset -g batt") as number

if batteryPercentage < 15 then
	set fontColor to "\"font_color\":\"255,0,0,255\""
else if batteryPercentage < 35 then
	set fontColor to "\"font_color\":\"255,255,0,255\""
	set fontColor to "\"font_color\":\"124,252,0,255\""
end if

	do shell script "pmset -g batt | grep -wci \"charging\""
	set isCharging to true
on error errmsg number errnr
	set isCharging to false
end try

set status to ""
if isCharging then
	set status to "Charging "
	set icon to "\"icon_path\":\"~/Desktop/battery/bCharging.png\""
else if batteryPercentage > 75 then
	set icon to "\"icon_path\":\"~/Desktop/battery/b4.png\""
else if batteryPercentage > 50 then
	set icon to "\"icon_path\":\"~/Desktop/battery/b3.png\""
else if batteryPercentage > 25 then
	set icon to "\"icon_path\":\"~/Desktop/battery/b2.png\""
	set icon to "\"icon_path\":\"~/Desktop/battery/b1.png\""
end if

set currTime to (time string of (current date))
set currWeekday to (weekday of (current date))
set stringLength to length of currTime
set currTime to characters 1 thru (stringLength - 3) of currTime as string

#set title to "\"text\":\"" & currWeekday & " " & currTime & "\\n{icon}" & status & (batteryPercentage as string) & "%\""
set title to "\"text\":\"" & currWeekday & " " & currTime & "\\n  {icon}" & status & (batteryPercentage as string) & "%\""

return "{" & title & "," & fontColor & "," & icon & "}"
#return "{" & title & "," & fontColor & "}"

#return currTime & "
#" & status & (batteryPercentage as string) & "%"
1 Like

Robert 20200126.zip (696.6 KB)

This is my BTT triggers & settings export.
Maybe this helps to simulate my problem.

I feel like there is a bug in Apple's text rendering system but it's hard to pin down. It seems to be some sort of timing issue when rendering a string that contains images on a Touch Bar button.

I made some more adjustments in v 3.247, but I'm not completely sure whether they will help in all cases. Possibly I need to remove this feature if doesn't really work.

This example works for me based on your script (just without battery icons)
batteryscripttest.bttcompressedpresetbundle (14.9 KB - requires BTT 3.247)

By the way, with the new versions it's possible to place resources in a folder that's associated with the preset and reference them via BTT_PRESET_PATH, e.g.

	set icon to "\"icon_path\":\"BTT_PRESET_PATH/itworks.png\""

This makes sharing and backups easier. The associated folder can be accessed via the preset menu folder icons:

I have not yet looked at your export though!

Ok this is kinda silly, I imported your script. That works. Then I transferred this to my own. Works as well.

Turns out.... my icon was black, my background as well. So it was showing, I just didn't notice.

Thanks for testing the above and great tip for storage of images.

EDIT: I do have to select a random image in the menu, if not selected, my icon from the script will not show.

1 Like

I understand now why I didn't notice this. When using the icon in front of the lines, the font-colors are used. When placing them in-line, the background colors are used.
Is there a way to let the font-color be used on icons inline?

How do you get the favicon to show with the safari title

Hi Unfnshd,

I'm not familiar with safari, but I did achieve this for Google Chrome.
My macbook is currently being repaired, but when I get it back, I can send you that code.