PNG file layout locations for different devices

Former Member over 9 years ago

Hi Connectors,

How can I support identical layouts for different display geometries, in my case, FR245 vs. Fenix3? I'll ask my ultimate question here so it does not get lost in the cacophony below then I'll ask again where it is most relevant.

How can I programmatically detect in my Monkey C code which device is currently running?

As you can see the watch face is quite basic:

A time string defined in /resources*/layouts/layout.xml
Various data strings defined in /resources*/layouts/layout.xml
Three icons for battery, BLE, and notifications defined in resources/drawables/drawables.xml

Now, for the first two items I of course have them define in separate rez folders (*resources-fr235 and *resources-fenix3). This works great for tinkering with the font sizes and locations needed for the different screens, because I can change those values directly in the XMLs, thus keeping them separate and unique. I just simply call View.findDrawablById("myString").setText(myValue) and let the values in the XML values handle
details.

The problem comes with the icons. Drawables.xml does not seem to support setting x/y values; I have to handle that all directly in the main code:
/*[code1]*/ myPng = Ui.loadResource(Rez.Drawables.myPngId); followed by...
.
. //other stuff
.
/*[code2]*/ dc.drawBitmap(xVal, yVal, myPng);

This being the case, I am left with one watch face with an undesired layout. In the attached images (inline below), fr235 is how I want it; fenix3 is not. How can I programmatically detect in my Monkey C code which device is currently running to that I can throw [code2] in an if/else statement, giving me the power to set separate values?

I am relatively new at this so my requested approach may be off in the weeds. If so your criticism is desired and appreciated.

Thanks,
Jeff

HermoT over 9 years ago

This is a very common question that has been asked many times before.

The easiest is to define a string resource per device that acts as an identifier.

Load this string resource in your code and you can check the value to determine which device is running.

Check this thread for more info

HermoT over 9 years ago

There are other ways to solve the layout issue.

You could put your icons in a custom font and then define labels in your layouts for each device with the desired x/y values.

Another common technique used around here.

Check this thread for more info

Former Member over 9 years ago

Thanks HermoT,

I did my best to search the forums to make sure I wasn't asking a duplicate but came up empty. Thank you for your reply and suggestion.

Jeff

HermoT over 9 years ago

Thanks HermoT,

I did my best to search the forums to make sure I wasn't asking a duplicate but came up empty. Thank you for your reply and suggestion.

Jeff

No worries! I just mumbled to myself that I should find the posts, because previous times when people asked the same thing, I was too lazy.
But today I overcame that and actually supplied the links.

Now I have silenced my guilty conscience! :D

Former Member over 9 years ago

No worries! I just mumbled to myself that I should find the posts, because previous times when people asked the same thing, I was too lazy.
But today I overcame that and actually supplied the links.

Now I have silenced my guilty conscience! :D

And I thank you for that kindly action! Worked like a charm.

I have another matter If I may...you mentioned custom fonts. Hell, everybody mentions custom fonts - they seem to be the way to go. I have looked into the BMFont tool and must say it is not very intuitive. I will post a new thread on the matter to keep this one clean if you want or we can continue this discussion here. I'll defer to your experience.

Thanks,
Jeff

HermoT over 9 years ago

I have another matter If I may...you mentioned custom fonts. Hell, everybody mentions custom fonts - they seem to be the way to go. I have looked into the BMFont tool and must say it is not very intuitive. I will post a new thread on the matter to keep this one clean if you want or we can continue this discussion here. I'll defer to your experience.
Jeff

Correct, far from intuitive.

Something quick to get you going:

1) Load a font: Options -> Font Settings -> Font
2) Click Ok to close the dialog
3) Set texture to png: Options -> Export options -> Textures -> png
4) Click Ok to close the dialog
5) Save: Options -> Save bitmap font as..
6) Then define the font in your project as per the tutorials

Then once you get used to how BMFont works, you can start playing with font sizes.
Just take note that if the font becomes too big, you then have to adjust the Texture width and height for the resized font to fit: Options -> Export options -> Texture Width + Texture Height

Then eventually you can open the png in a graphics editor
Paste some icons instead of characters
Adjust the x and y values in the *.fnt file and check how your app displays the icon.

You will quickly get a feeling of what you need to do.

Former Member over 9 years ago

You will quickly get a feeling of what you need to do.

Ha! I already am, thanks! SO I generated a .png and a .fnt file. In the .fnt file there is a ton of information including line items for each character as such:

char id=32 x=250 y=113 width=3 height=1 xoffset=-1 yoffset=31 xadvance=17 page=0 chnl=15

I am assuming that I use the "char id" from the .fnt file to tell my program where in the .png file it can find a given character? I will read the tutorials on the BMFont site for further assistance.

Thanks again so much for your help.

Jeff

Former Member over 9 years ago

I got the fonts working! Nothin' to it once I got the hang of it. You really helped out so much. Thanks!!

HermoT over 9 years ago

I got the fonts working! Nothin' to it once I got the hang of it. You really helped out so much. Thanks!!

Awesome!
Looking forward to your first watchface or apps! :D