display artifacting Garmin instinct 2 tactical

[Nasimovy]

the template and tap functions or entries show artifacts in the smaller screen

I have:

• [X] Used HTTPS to access HomeAssistant (with a public certificate)
• [X] Checked that my JSON Syntax is correct (options 2, 3, or 4 or otherwise)
• [X] Checked that my JSON follows the schema (options 2, 3, or 4)
• [X] Used the online editor to check my JSON against HomeAssistant (option 1)
• [X] Checked the Docs
• [X] Checked the Troubleshooting Guide

To Reproduce

1. open the homeassistant app
2. scroll down to template or tap option
3. look at the smaller section of screen

Expected behavior same icon or display as toggle

Screenshots

the toggle shows no artifacting/gibberish

Garmin Device:

• Model: instinct 2 tactical

Smartphone :

• Device: samsung S21 ultra
• OS: android 14

[philipabbey]

To Reproduce open the homeassistant app scroll down to template or tap option Expected behavior: same icon or display as toggle

Sorry I'm a bit lost on this one. The toggle icon is only present for toggle items, not for template ones. For template you have a text string you can form. In there you can include words or unicode (sometimes) characters to display the status of something from your HA instance.

[Nasimovy]

on the toggle option it shows the HA icon

on the tap and template things it shows gibberish/artifacts

[philipabbey]

I can recreate this in simulation. That "icon" (circular window) is doing some odd stuff. I wonder if this is due to the use of coloured SVG icons rather than black & white bitmap ones? For example, here is the tap icon in colour:

For example:

Here it is on the simulator:

The simulator does not agree with your watch in real life. So this means we need to change the way icons are managed for certain (black & white?) devices. We need to figure out which devices are affected and how to make the icons appear correctly on that subset. This could be really annoying.

For now though, I assume the app functions correctly even if it is not pretty?

[Nasimovy]

understood, if you want me to do some further testing i will happily do that its weird that the simulator shows the "smaller screen"inverted

For now though, I assume the app functions correctly even if it is not pretty?

yes the app is functioning perfectly

[philipabbey]

From https://developer.garmin.com/connect-iq/reference-guides/devices-reference/, those listed with "Display Colors 2" are:

1. Descent™ G1 / G1 Solar - 176 x 176
2. Edge® 130 - not supported
3. Edge® 130 Plus - not supported
4. Instinct® 2 / Solar / Dual Power / dēzl Edition - 176 x 176
5. Instinct® 2S / Solar / Dual Power - 163 x 156
6. Instinct® 2X Solar - 176 x 176
7. Instinct® Crossover - 176 x 176

Looks like that list covers just 1 screen sizes. So one new resource folder with black & white bitmap icons is required to fix this.

[Nasimovy]

would a black and white SVG also work ? the icon size of the instinct 62x62 do new svgs or bitmaps have to be created for them altogether?

[philipabbey]

We're already using SVG. We have to make different files anyway, may as well go for a safe option.

[philipabbey]

There seems to be a fundamental problem here. The same icon file needs to work in two places, each with different sizes.

The following are screenshots from the simulator, hence the rounding of the watch face is missing, you'll have to imagine an overlay.

instinct2 62x62 icons:

instinct2 simulator window screenshot for comparison to the above:

This should show you have the screen layout maps.

instinct2s 54x54 icons:

instinct2x 62x62 icons:

Instinctcrossover 62x62 icons:

Now obviously the menu items can't take a 54 or 62 square pixel icon, so the files have been scaled back to 18 and 21 square pixels respectively. They appear to be too big for the space they are required to occupy. The icons looks terrible in both locations and the backgrounds they go onn vary.

The background can be managed by yet another resource directory to invert the colours. I don't know how to manage the need for different sized icons in two places. With the toggle item, the menu item does not have an icon, hence defaults to the application 54/62 pixel icon (I assume). It would be better to use just 54/62 pixel icons in the top right circular window and noen in the menu item. I don't know how to separate that.

[philipabbey]

Perhaps the answer here is that on the following devices:

1. Descent™ G1 / G1 Solar - 176 x 176
2. Instinct® 2 / Solar / Dual Power / dēzl Edition - 176 x 176
3. Instinct® 2S / Solar / Dual Power - 163 x 156
4. Instinct® 2X Solar - 176 x 176
5. Instinct® Crossover - 176 x 176

the code should use a MenuItem instead of an IconMenuItem. That means writing code to conditionally alter which of those two menu items is used, and then the icon shown in the window would always be the application icon. This sounds like an awful solution!

Which begs the question, how does the code determine the device? partNumber?