Screen pixel size problem in simulator Forerunner 920XT vs Epix/ Vivoactive

Former Member over 9 years ago

Hi community

I'm testing an update for a watchface but when changing the simulator for different watches Forerunner 920XT/Epix/Vivoactive I found an issue I'm using a clean install of SDK 1.2.4

With the following simple code to draw text in the coordinate 38,133 when using Epix/Vivoactive watches in the sim the text appears cut in the bottom of the screen, this do not happen in the 920XT, I have not watch to test, so I do not know what watch in the simulator will provide the correct output in a real watch.

dc.setColor(Gfx.COLOR_WHITE, Gfx.COLOR_TRANSPARENT);

        dc.drawText(38, 133, Gfx.FONT_XTINY, Lang.format("$1$Km/$2$Mi", [kmSubString,milesSubString]), Gfx.TEXT_JUSTIFY_CENTER);

Sim ok with 920XT : http://www.jmsnetwork.org/Ok%2038-133%20coordinate%20920XT.PNG

Sim not ok with EPIX, same code: http://www.jmsnetwork.org/Epix.PNG

Which one is correct?

As I mention I have not real watch to test. I want to keep the code I have, I do not want to get the screen size and then calculate from there. As you know all these watches have the same screen size 205 x 148 so I assume should be the same for all three watches.

Your help is appreciated.

Thanks!

HermoT over 9 years ago

Because of different fonts on the devices, the 920xt displays text slightly different than the vivoactive and epix.

This is a known fact, and there are two ways of catering for this anomaly:

1) Use the layout system, so each device has its own layout.
I usually do the vivoactive layout first, and then copy to the epix without any changes. (These two are always the same)
Then I copy it to the 920xt and then make changes until the 920 displays correctly.

2) Use a string resource with a unique value per device, and in code load that string resource and checks which device it is, and then draw accordingly. Usually only involve changing some x,y coordinates slightly to display the text correctly.

jim_m_58 over 9 years ago

As Hermo said, the fonts are different. Another approach is to get data about the font itself as well as screen height.

var height=dc.getHeight();
var fontHeight=dc.getFontHeight(Gfx.FONT_XTINY);

and then with your drawText():

dc.drawText(38, height-fontHeight, Gfx.FONT_XTINY, Lang.format("$1$Km/$2$Mi", [kmSubString,milesSubString]), Gfx.TEXT_JUSTIFY_CENTER);

The UXGuide in the SDK (Appendex B) gives you info on the fonts for specific devices,

Former Member over 9 years ago

HermoT/jim_m_58 Thanks!

Thanks to your suggestions I changed the code, for some reason I have problems when using the layout file some items do not draw after some modifications, as I want to publish the update ASAP while I continue to learn how to program correctly, I tried to use a if statement using the PartNumber value but I run into some issues as the value returned is a String, so I decide to use the isTouchScreen value to detect if the watch is an Epix/Vivoactive or a 920XT and this solved the problem, probably no as elegant as your suggestions which I think is the right way to go (until I figure out what I'm doing wrong in the layout file), the code used at the end is very simple:

if (settings.isTouchScreen == true) 

	    {

	    Yc = 130;

	    }

	    else

	    {

	    Yc = Yc;

	    }

Thanks!!

jim_m_58 over 9 years ago

I think what hermo was talking about is that you use resource directories for each device, and have the layout.xml file for that specific device in that directory (not doing it at runtime, but compile time.)

In addition to the standard resources directory, you also have

resources-vivoactive
resources-epix
etc...

(see the Programmer's Guide in the SDK - overriding resources, and the "layouts" sample in the SDK)