Touchbar Custom Icon Bug (since 2.605)

Bug Reports
1

Describe the bug
There is a visual glitch occuring with some of my custom touchbar icons.

Refer to the image for a visual description.
The original icons are white (and should remain white), with a transparent background and 70% opacity elements.

The button background colour (the pinkish red) was selected from the crayons colour picker, and it's hex code is: #941751.

**Affected input device: **
Touchbar

Screenshots

06%20pm
Touch Bar Shot 2018-08-28 at 6.41.06 pm.png2170×60 17.6 KB

Device information:

  • Type of Mac: MacBook Pro (13-inch, 2017, Four Thunderbolt 3 Ports)
  • macOS version: 10.13.4
  • BetterTouchTool version: 2.605
2

Could you attach these icons? I haven't had similar reports yet but maybe it's related the the opacity stuff.

3

wow fast!

here they are from BTT save as icon file:
icon2 icon

here they are from my icon bank in finder (which are then inserted into BTT):
TB_groupRelease_2x TB_group_2x

I was wrong about my mention about white icons initially, they are black now that I see the raw icons again.

4

Weird, they both seem to work fine here.
Do you have a custom icon size set for these buttons?

5

Might as well send the JSON for the buttons.

Group Button 
{
  "BTTTouchBarButtonName" : "Group",
  "BTTTriggerType" : 629,
  "BTTTriggerClass" : "BTTTriggerTypeTouchBar",
  "BTTPredefinedActionType" : -1,
  "BTTPredefinedActionName" : "No Action",
  "BTTShortcutToSend" : "55,5",
  "BTTEnabled2" : 1,
  "BTTUUID" : "838F847E-516A-462B-931A-D97BC0B796A9",
  "BTTEnabled" : 1,
  "BTTOrder" : 5,
  "BTTIconData" : "iVBORw0KGgoAAAANSUhEUgAAAHgAAAB4CAYAAAA5ZDbSAAABYWlDQ1BrQ0dDb2xvclNwYWNlRGlzcGxheVAzAAAokWNgYFJJLCjIYWFgYMjNKykKcndSiIiMUmB_yMAOhLwMYgwKicnFBY4BAT5AJQwwGhV8u8bACKIv64LMOiU1tUm1XsDXYqbw1YuvRJsw1aMArpTU4mQg_QeIU5MLikoYGBhTgGzl8pICELsDyBYpAjoKyJ4DYqdD2BtA7CQI+whYTUiQM5B9A8hWSM5IBJrB+API1klCEk9HYkPtBQFul8zigpzESoUAYwKuJQOUpFaUgGjn_ILKosz0jBIFR2AopSp45iXr6SgYGRiaMzCAwhyi+nMgOCwZxc4gxJrvMzDY7v____9uhJjXfgaGjUCdXDsRYhoWDAyC3AwMJ3YWJBYlgoWYgZgpLY2B4dNyBgbeSAYG4QtAPdHFacZGYHlGHicGBtZ7__9_VmNgYJ_MwPB3wv__vxf9__93MVDzHQaGA3kAFSFl7jXH0fsAAAAJcEhZcwAAFiUAABYlAUlSJPAAAAkISURBVHgB7dpLr1zFFQXgSwgEEggJGATiGQYMEEQowMACBpAECYnIE_gBDJhE4gflD2SSIUJIMAEJ8gCkIB5CvAwGQx42xDwTIDzW17cLmivLMrdPcau795aWz+njvnWq1zpr713VvbVVUQwUA8VAMVAMFAPFQDFQDBQDxUAxUAwUA8VAMVAMFAPFQDFQDBQDxUAxUAwUA8VAMVAMFAPFQDFQDBQDxUAxUAwUA8VAMVAMFAPFQDFQDBQDxUAxUAwUA8VAMVAM7GDglB2vp35p_NODH8yPve839fx7jfdlBv40+GJ+9LpL_LDLqN8MStxfBj8Nrgp+FFRsbX0SEl4K3g+eCbzuEr0Ebs79cWZ9fnBO8POA4BXb7r0gRHjgcSQ4enIn9xK4OZe4dwdnBq8GnwUVW1s_CQkHgv_OyTiSYxcn9xJYzZWWOZe4pwUfBP8LKra2zggJOBE4kqJxNnn0EpiD1dyfBQcD4v4xUHMqth9+Zezs4IoAT08FzdE5nSZ6CWzy6guoLSZO3GNBxTYDOGkcOeJs8uiSFiafZQ24awZ6OXjXEzrBH6pZHkg1_dSgPfXOF8PaUjeqrn0eqPuudVuKZOxhY1UENs9LA7XqN8G+wPraEsO1lokIKfXB34N3g0eC_wTWncrFRsXoAqtLlhS6zkuC84LL58crciSwbr25uAn8ca4R1f9dFhjjaOC6hm_y9WbGHDJGF5iAvw2Ie29AYGKdKEX7fwLaSJCi7wyIrYs_HPwpIPJGxKgCcy5xzwmIy4UXB4vpOC+PG83N7bNxsQxgDOOeOz9+mCPHr3U0Ekb7kBqp2wJ1977AjhihWq3N6XeKs_JuO2qcTOQ3A05e+3X5iAK39MuxBNZQce4y4cHwgBDXmJwrQ+iw17rxGk1g4nIrEX4fSM_S9FTByXcFbwdPBG8ELwdru0e+25QXTrqE+XCrOqmh8g3UlHPkYE42rszgHh5y19cyRnOwDvh3gaWQ817ByQcCDn4tOBrYCFm75dNoArcULU077xXtPmqwWtz2zEvgXozPx0X0NQEHO+8Vp2dg95Gmrw58q_NcsHbbmVPWt_CzdKiFUjP0rIvGtja2HHMvLu55vwy_N7GpKZqYRNVwWY79PxiNi0xp+RjtQyFefYTejmr3IrLOXd3n6BbWymoy8Z1bL3u9Ukuq0QQOf99rSNM3BfamfxUQUxBSPSbqwcD_Pxt8GLwVtPfldOwYTWDEcktzT28X60GkakG0z2dn3whM5I8C7_ln4IGwvem6ryTNd+gYTWDCvhNYp14U9FwqERP8kEBXDe7fwmvzsJPm+g0BBz8aHA0eD4g8dIwoMMcAUnsKbPxFyBaLGaPdu3HExURXq4WllfcP7eQ2eRMeIaS+pwPf+uhuuatHEFZdtdHh6L4nk241YTcHnOwBOBI8FvghwZAxmsBSpvRnbdrqYQ_iiKmBIiyxvT4ZgTm21WxO9jdcbawhG6_RNjqk5gfmcN4rPDyaJiDydxWHk_cHtwRXBhcFo5klU5r2m5rZgEv+w03HgncDzZZU7dqUQUxrWa6Dk3Fu3vataE7WhFlHq8ejmWU24dGeOs76d8BVfwguD+4NbERMEcTlWo3RewGhl3mALJs42ZzV47aEyukYMZrAWCGC5uetgCvUZMEpy7ikOdfY4GFaRtz8+Ww+llEygVqMz91mhfzp9DGiwD6lrvThgHPN8bLgngCZu4nmXMIeCjiXwMtGm5sUfWmgNrfxlx17kr8fVWB1UZOl1h2ef9K3cyQQEi1RpEf_v9PVraY2dy46V2omrmtThPtzrq82zavNKadjxKgCN3aI_GCAvOeD84Jbg33BjYHlVGtwCE1ca1Tu9DAQU8PmqGFzfQrnZphZNIEJ62dA7rPzgZu9ca_+GV3gJpimi5OJdyiQwi8JiEtIjkYs19q4cPSamM21yG+uzulkQWT3MgfwepgYXeBGFHFeCRD5QmCz4bqAg88PfI4msKaMo+4I_H8TtR1zaXNiVQSmiO5UcKzUrcuWurl5UeB38pqwbTuxt6tkGQ9PS_+tB8ilvY9VEniRLWJzckuPi2kR0X52++tA6MSJ3COIKbsoIccCa+uhMsWqChweZ6Q6Hi+4nLPV390urY437s5rBPawEdg9HcvBIaF3cNXrAZF13r0eZMutN4MjwaGAi6dagmWo5aPXB19+ZsuNIE1Kl9anPVOmsW1PuhcnE7ccHBJ6h1T5ZHBBsD_QdPUIafkvgb1oQrdGMKdjhKXFOgZnSc86aetiXfeUTubSNj5h3UNzN5R7M59utcnYexnEtHPFyQ8GnHx74Ou9KYJz_xpw7qsBgYeqvZnPLNa1BvtwRNZsWRdbRnGao7XzbjMXh+rMZQYbKsYmtvsMGessMMLVxKcDNdhntetlfbzbmkzMvwVHgocCziX4sLHuAnMcUUT7XpnrCK_D5mQ_7OPsna72t8CdsoF0r5YT11jEVYeHjnUXuJFPnKcCX+29EZwdXBv4EcFVgb1rIDKx24Ph7w4G0vuz8+OLObo+tHMzv1lsisBNMI0QB3LehQGh9gXqsi8wCAzez63c7_0E_leg9sKwNTdz+1ZsisDtQxP4HwGXHg6k6V8E3Lu4Zy0lE5LArwUeBA9Fa9xyuhqxaQJTpS1nuJCAfhBAaCL6UoKDCanGusa93rsyrs1cv45NFPjrD58TYttLFov112tpGlZSWB9AbLrAOFhpAX2AE4WntmKNGejlYKlN_QJLEl2qJUnFNgO4wIllW6v1OJs8eglsI+GlwB7wgcBmgg+gqanY7tqvDxHKw_2BPW2cTR69BNaF6j51p21DgJMtRyq2H3ji4sZ3ybjC2eRhPdgjjCv92DzYH_jZjPWmaxXbbn09RBD3z4E1NgdPnqZ7ObjV4Mx5thOkFttI4OiK7d5EWuZc4uKnS_RycJtsc7JunXt736_dd_QjA3CstNzFuaMTUPMrBoqBYqAYKAaKgWKgGCgGioFioBgoBoqBYqAYKAaKgWKgGCgGioFioBgoBoqBYqAYKAaKgWKgGCgGioFioBgoBoqBYqAYKAaKgWKgGCgGioFioBgoBoqBYqAY2EMGvgKUQOnrdTtTJQAAAABJRU5ErkJggg==",
  "BTTTriggerConfig" : {
    "BTTTouchBarApplyCornerRadiusTo" : 1,
    "BTTTouchBarButtonColor" : "148.108848, 22.549045, 81.253001, 255.000000",
    "BTTTouchBarItemIconWidth" : 60,
    "BTTTouchBarItemPlacement" : 0,
    "BTTTouchBarAlternateBackgroundColor" : "0.000000, 0.000000, 0.000000, 0.000000",
    "BTTTouchBarButtonCornerRadius" : 6,
    "BTTTouchBarFontColor" : "255.000000, 255.000000, 255.000000, 255.000000",
    "BTTTouchBarButtonName" : "Group",
    "BTTTouchBarOnlyShowIcon" : true,
    "BTTTouchBarFreeSpaceAfterButton" : 1,
    "BTTTouchBarItemIconHeight" : 60,
    "BTTTouchBarItemPadding" : -25
  }
}
Ungroup Button 
{
  "BTTTouchBarButtonName" : "Ungroup",
  "BTTTriggerType" : 629,
  "BTTTriggerClass" : "BTTTriggerTypeTouchBar",
  "BTTPredefinedActionType" : -1,
  "BTTPredefinedActionName" : "No Action",
  "BTTShortcutToSend" : "56,55,5",
  "BTTEnabled2" : 1,
  "BTTUUID" : "E927361C-A3EF-4D46-99EC-68DD6B9C591B",
  "BTTEnabled" : 1,
  "BTTOrder" : 6,
  "BTTIconData" : "iVBORw0KGgoAAAANSUhEUgAAAHgAAAB4CAYAAAA5ZDbSAAABYWlDQ1BrQ0dDb2xvclNwYWNlRGlzcGxheVAzAAAokWNgYFJJLCjIYWFgYMjNKykKcndSiIiMUmB_yMAOhLwMYgwKicnFBY4BAT5AJQwwGhV8u8bACKIv64LMOiU1tUm1XsDXYqbw1YuvRJsw1aMArpTU4mQg_QeIU5MLikoYGBhTgGzl8pICELsDyBYpAjoKyJ4DYqdD2BtA7CQI+whYTUiQM5B9A8hWSM5IBJrB+API1klCEk9HYkPtBQFul8zigpzESoUAYwKuJQOUpFaUgGjn_ILKosz0jBIFR2AopSp45iXr6SgYGRiaMzCAwhyi+nMgOCwZxc4gxJrvMzDY7v____9uhJjXfgaGjUCdXDsRYhoWDAyC3AwMJ3YWJBYlgoWYgZgpLY2B4dNyBgbeSAYG4QtAPdHFacZGYHlGHicGBtZ7__9_VmNgYJ_MwPB3wv__vxf9__93MVDzHQaGA3kAFSFl7jXH0fsAAAAJcEhZcwAAFiUAABYlAUlSJPAAAAyPSURBVHgB7drbr11VGQXw4gW1rVxbKJZeNNEHIsYnExp9UJAHg7cEEuML8kBijP4R_g+GxH_AFx94UhJNCBiNCBhrVFTaUk5bLKVAVSjeQB2_w5l1e3Iue6+z5z5z7zO_ZJy19jprzzXnGHN831xr7V27enQGOgOdgc5AZ6Az0BnoDHQGOgOdgc5AZ6Az0BnoDHQGOgOdgc5AZ6Az0BnoDHQGOgOdgc5AZ6Az0BnoDHQGOgOdgc5AZ6AzMBYDV4111rCTtP2O4JrgncHuoOb10vxU459p7a3gtZWtz3MXtQjX7tXBdcH9wcHgzmBvMA9BzDPBheCh4KXg+eBfwVzFuyr1lsCce0Nwa3AoOBrsCeYhipDvSWf1XyY6G5Tj2Z2PqOXg92f4XwoOBw8GhObeWtdL01MPLoZTwVLw9eB8MFdRy8Fq7oHgloCT1d83gn8Hfwv+E7QaSgvHmqTGcVPw98AYOJroLfc_3ftf1BIYGXcHRwLO_UfweHAx+ElwOWgxiCvr7A++Fly7sm+xdXtgsj4TGM9cRC2BiwO4wD6CXg4sWqS7VgV+d_omuPTN5b1du3DkOPfCPJWZ5c6nz1OP1QJLy48FZ4JfBlJeq_HrdIyLvxnc2Gonx+1XLQe7vvoFQs1SgzmXuJMIzD0mzPsC7RUXlbZzaDnUd9eRPmUM13Bs0nTqe+5956bOpq_rRi2BpTHCwFZSmv4dCtxP3xXsCz4WqPGOEV4QUpaAXwWvBo8Fl4JnAyl3R0YtgZFJ2KHi+p575vcG7kOlSgs226MBgS14iouLwLIEUf3vcKANtd_xhXFlxjJ21BSYu4rDxu7QyokE_GxA3AcDwhJroxTt_9LqTYEUfU9A7O8F54LvB0TeUVFT4CFEci5xrw2Iy4Uec46m43xcM4qby5i4WAbQhnY9bLF9PeD4HRGFjFYGayH1mUDd_VbgfpRQQzPB3nz3voCTiXs24OS_BjsiWhK4pF+OJbAFFeduJUwME4S42uRcGcJKeUcsvFoRmLjcSoRvBNKzND2t4OR7gz8FTwZnghPB3L08SJ8niqGpb6KLjHGyfnCrOmlBdX0wzb5xMCdrV2ZwDZPb8YWOVhxsBfz5wK2Q_VrByV8MOPh08HLgQYjV90JGKwKXFC1N268V5TpqsFo8d2+HJiWmFYER_dGAg+3XiqvTsOtI07cFXob8Npj0cWa+Mh8xzTq3lRGrhVIz1KyL2nZv7HbMtbi45vXS_PZGKw4uqbN2iiYmUS243I69GbTCQboy_WjJwUSG2o7SPhB2ocXN+KZ6K6K9eQor54VdPRchWnEwoj1lgtqkF2GlZ1joaEVgwr6yAvu1grhukV4PXgz8hGihRW5J4MshG2YhsB8GuJb3xLUzRi6xfdHKIsN96PHAWx+rW78EqRFeMDwTnF3ZcvBCP49uReC3QrTHhu5N7deKcp2LuQD3LvRjSiS2IrB0+YPgSPDlYJpvktLclXCdh4OlwISSqnuKDgm1Q939c+DRocWWJ01EnuYaYXTVrF1vlNZ7ROlR5ui17Xs44o2XnwRZqA0N_TBeGcS26iKvFQdLnS8FCP9uwMl+i4XQaQQSrZo5+J6AQGrveu7dm_95tVjC568GVt8m4NAyoh_GaTI_Evwl0K+h7eWrG0crAuulwSP+hYBjpFDBOaNuWj44wR_tElPbFlnE8jx6o5BBPFUrURxs8Wd_6EpfX4SXHjKIJ2rWAztC4IxzOW39OFvONfkOBw8EQ2syQjmEuOouoauRmbY3C5Pm5sAPG+4LiPudoNrPh1pycMa5nDKlUTP7nAMJP7MhUHGVrf_DaEi3gCwOK449n32LKamxOCi7G0Zpo5ykXf0C6XXIJME19+s_B5vEriObyAwm39SjNYHLABGpRiHjd4F09unAAudTgdspJAlCE4CIRP19QIQnAzXu2UBtJ4rzxokDOelY4DrCgujRQDY4GRBmksCzvstExqFdpUefjga7gzPB1EVuVWBCWNAQ5tzK_lK2iEW2Ge8cQApn+ims_yHqUuB8x3x_UuLwMlpn7WvLxJEJJhW4vCXTz+J+x8BYoEq0KnAZLGE4RmrjTM66dWVr1psATwTFqUTgeEK_FiBTG+M6N6cuByFGJ4V2LgQmy+lAppgkrsrJpwIu_twkX9zqubMS2AD9FAfsTxLFLUiVlksq1o59afPV4GxAYEIQHjaK4io10ATChTZt1UfHSjhenFb6PzoBynmbbY1h0sm2WZsb_n9WAhPmtkDtOR4QZkggx3elby6VMp8OLgYnApMBNiORuPsD_fl44AHLhwJZ4eZArVT3S5gEnwgOBtI_vBBwetNRS+AiBDGKQxDKVYcDThsS+_IlC6+SCWyJwU2EGddVxk1A98RHAgLbavuWgPAmQQmudQ5n64P_GYPxGONmEyqnbE_UEtjAnwpeCsx85NwbqGUPBKMLmHwcO6TNG4KSPrVzLLAdV9ycuhwbpWiCllW6drWvfhL+_kAGeTzwMOZnAZGbjFoCS13nA3XrclAcYDv6CDAftxxIrxFcSVgpn8gmlfFwMfFlJGHyGleTTq4lsFXtQ4FVrzR4MFCDpdR5COLKQsQ9GVgcjWYIqfyTASfLBBeDnwZvBE1FLYGlYitbg18KOFqtLPXYjB8SXGTCjKZo5HOaa6wVzgULqPK9tc4bPaY9Amsb7DtWQv+1JzjZhOBqE2K9fuRfs49aAhuw1CxtfTvg3A8EBFbLCD8kTJKvBLbCNR4NZAz1fjW5RVjnfyGQTjeLUnP13UTVpvHA6uDkOwKT+Q8BJytNq_uRQ9sTtQQ2GjMeDJqgyCK0NDb0uuo3UcsCyP6LwaVgrdsW190f6Mc41yWifjp_nJpanMy51wTcfiFoJoYSPekAkEZohJjhtkOCWK8EJdW6Dz4ZaPu5YLRO5uPyqvdItsg3GdZyYQ6vGZOcKzNxsiyiL+UWKrvbG7MS2CinkbbUwuIwbdrnHse5Z7XAVr2yBgEIxpk1woRTBvRFdsGr_UkmSU6ffsxS4On3fvMWCXwkUPft1wo8Hg7U+EOB2rwUrJ5wOTTbKKlutled3dWUAg6GoWVhnN5qm3Ndh7gyRs3rpfnxYtEdXFKn9FlzMheBCWshyLk1r5fmx4smOjFeVwefZYyzGCeRXcfKHZpw8CwGnrFua8xK4G0d5HoX3wkCWznXWj2P8lpW6Vb2sO0raJ1bdIEJ6ykX1BSZmOqu2zX35rWvl0uMF4suMOLdH0NNR2l79H6c0DWvl+bHi0VfRXPV84HHlF7w1xqvhzhnA0+xlgIunsaDnTSztag14K31anrfLina_WnNFK1tjyelZk4mbndwSKgdUuVTgSdZdwR7ghqhBPw88Cya0ERuIha9BnOW9OzFvJ_ReuEwTSdzaWmfsK7RzAo6falWk7TdQhDTq0ROfiTg5LsDPxqYRnDuEwHnngoI3ETtTT+WY9FrsEES2WLLa0ZPlzjN1jPjoRmMc70vlhn88E7bxHadpmInCIxwNfF4oAYbs_fKd658zmbiIOYvAqvmHwWcS_DmYqcIzHFEERwnuI7wVtic7HUiZ692te8Cd8oG0r1aTlxtEVcdbjJ2isCFfOI8HXi1dybw_vb2wC8+PhJ4GwREJnaZGL73XCC9_2Zl+8dsHW_SuenXcuw0gYtgFkIcyHkHAkLtC9Tl3QGBwfncyv3OJ_CFQO2F5mpu+vR_sdMELoMn8PmAS88F0vQHA+69LvC6T0jJhCTw6cBEMCnKwi27bce8C0wgtbPUz0nYLrczXEhAP30lNBEJzMGEVGMd417nDnVt6WeamF3Mu8D6fyggjPvQoU+QiO1Zshitvz5L0zBUWG0Q93DgPtz+zGLeBEY0EQFRxPBzHOQjT_psMfRV_9R5fRajE2crk+ft1tb5O28CI+JE4KH+hwOLomOBx4N3BVJqi6GUSPtg5U5cZUH6Xwos4KqIPG8CE1KtRJTUjDgi2yJuHsIYiGmSAqGriJt25+5ZtBT8w+D6gLA3BoSeaV3L9YaGDGOx5n3xw4EHJVbp1WLeHFxWtRwrrXEDoT24cAxaDWlZf738AP23daxatEzIeoPWZwuVPQHnWrjYun8tC5jsNhWl5krF7r8tEsury3K7VqXD8+ZgJBQnSHUE9ZnA5f41u82FzENUAkvLVV2b9q_EPDr4SudXdoprLbxaDhNRVHXs25fofzsDnYHOQGegM9AZ6Ax0BjoDnYHOQGegM9AZ6Ax0BjoDnYHOQGegM9AZ6Ax0BjoDnYHOQGegM9AZ6Ax0BjoDnYHOQGegM9AZmJiB_wKJfdQtbuL_MQAAAABJRU5ErkJggg==",
  "BTTTriggerConfig" : {
    "BTTTouchBarApplyCornerRadiusTo" : 2,
    "BTTTouchBarButtonColor" : "148.000000, 23.000000, 81.000000, 255.000000",
    "BTTTouchBarItemIconWidth" : 60,
    "BTTTouchBarItemPlacement" : 0,
    "BTTTouchBarAlternateBackgroundColor" : "0.000000, 0.000000, 0.000000, 0.000000",
    "BTTTouchBarButtonCornerRadius" : 6,
    "BTTTouchBarFontColor" : "255.000000, 255.000000, 255.000000, 255.000000",
    "BTTTouchBarButtonName" : "Ungroup",
    "BTTTouchBarOnlyShowIcon" : true,
    "BTTTouchBarFreeSpaceAfterButton" : 20,
    "BTTTouchBarItemIconHeight" : 60,
    "BTTTouchBarItemPadding" : -25
  }
}
6

Ah I think the issue is because you set 60 px width and height (the Touch Bar is only 30px tall).
I will add a check to prevent this in the future, but reducing it to 30px should work for now)

7

fixed!

Do note that the touchbar has a much longer width than 30px so allow widths more than 30px for rectangular images. (i plan to use some soon in my AquaTouch preset to indicate a holdable button)

8

yep, longer widths should already work

9

I meant, don't check against the width as a reminder~

1 Like