I'm trying to figure out a good way to place things on the screen, but the dc.getHeight() confuses me. My code is like this:
function initialize() {
View.initialize();
var time = App.getApp().getProperty("period_duration");
var sec = time%60;
var min = (time/60);
App.getApp().setProperty("menu_time_min", min);
App.getApp().setProperty("menu_time_sec", sec);
App.getApp().setProperty("menu_time_pos", 1);
}
// Load your resources here
// function onLayout(dc) {
// setLayout(Rez.Layouts.MainLayout(dc));
// }
// Called when this View is brought to the foreground. Restore
// the state of this View and prepare it to be shown. This includes
// loading resources into memory.
function onShow() {
}
// Update the view
function onUpdate(dc) {
// Call the parent onUpdate function to redraw the layout
View.onUpdate(dc);
var x = dc.getWidth()/2;
var y = percentInPx(15, dc.getHeight());
var numFont = Graphics.FONT_NUMBER_MEDIUM;
var text = "Set time";
dc.setColor(Graphics.COLOR_WHITE, Graphics.COLOR_TRANSPARENT);
dc.drawText(x, y, Graphics.FONT_MEDIUM, text, Graphics.TEXT_JUSTIFY_CENTER);
// Up-/downarrows
var triSize = 16;
y = percentInPx(32, dc.getHeight());
dc.fillPolygon([[x, y], [x+triSize, y+triSize], [x-triSize, y+triSize]]);
y = percentInPx(80, dc.getHeight());
dc.fillPolygon([[x, y+triSize], [x+triSize, y], [x-triSize, y]]);
// Draw time
y = percentInPx(50, dc.getHeight());
var sec = App.getApp().getProperty("menu_time_sec"); //time%60;
var min = App.getApp().getProperty("menu_time_min");//(time/60);
text = padLeft(min) + ":" + padLeft(sec);
var offset = dc.getTextWidthInPixels("00:", numFont);
var startOffset = dc.getTextWidthInPixels("00", numFont);
var shift = startOffset / 2 + offset*(App.getApp().getProperty("menu_time_pos")-1);
dc.drawText(x-shift, y, numFont, text, Graphics.TEXT_JUSTIFY_LEFT);
}
// Called when this View is removed from the screen. Save the
// state of this View here. This includes freeing resources from
// memory.
function onHide() {
}
function percentInPx(percent, total) {
return total / 100 * percent;
}
function padLeft(s) {
return s.toString().length() == 1 ? "0"+s.toString() : s.toString();
}
I thought this code would give me a semi-nice behavior on various devices but when I try different ones, the result varies a lot. I thought that at least the "time" would be rendered at the middle of my screen, but that's not the case. Look at the screenshots from a Fenix 7s, Fenix 5xPlus and FR230, respectively.
Is it the simulator that is erroneous or am I missing something in the implementation?
