Basic Watch Face background image issue

Hi,

I am very new to this and my question may seem stupid. I just can't get Eclipse to show my png file as background. I looked at possible similar issues, tried out different things to no avail so help would be greatly appreciated.

My png is 218*218, respecting the color chart, modest in size, stored in the drawable directory (tried with a separate Images directory but does not work).
In my drawable.xlm file I have:
<drawables>
<bitmap id="LauncherIcon" filename="launcher_icon.png" />
<bitmap id="background" filename="MyPicture.png" />
</drawables>

The compiler obviously finds it

In the view.mc, I have:

using Toybox.WatchUi as Ui;
using Toybox.Graphics as Gfx;
using Toybox.System as Sys;
using Toybox.Lang as Lang;

class ExecutiveOrangeView extends Ui.WatchFace {

var background;

function initialize() {
WatchFace.initialize();
background = Ui.loadResource(Rez.Drawables.background);
}

//! Load your resources here
function onLayout(dc) {
setLayout(Rez.Layouts.WatchFace(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() {

dc.setbitmap(background);
// just gave a try sticking it in there
}

//! Update the view
function onUpdate(dc) {
// Get and show the current time
dc.drawBitmap(0, 0, background);
var clockTime = Sys.getClockTime();
var timeString = Lang.format("$1$:$2$", [clockTime.hour, clockTime.min.format("%02d")]);
var view = View.findDrawableById("TimeLabel");
view.setText(timeString);

// Call the parent onUpdate function to redraw the layout
View.onUpdate(dc);
}

//! Called when this View is removed from the screen. Save the
//! state of this View here. This includes freeing resources from
//! memory.
function onHide() {
}

//! The user has just looked at their watch. Timers and animations may be started here.
function onExitSleep() {
}

//! Terminate any active timers and prepare for slow updates.
function onEnterSleep() {
}

}

So pretty much by the book but still does not work

Any idea ?

Thank you

travis.vitek over 8 years ago

function onShow() { dc.setbitmap(background); }

This code should cause the app to crash. I don't see where you are getting the variable dc from in this context, and if it is a Graphics.Dc instance, there is no such method.

function onUpdate(dc) { // Get and show the current time dc.drawBitmap(0, 0, background); var clockTime = Sys.getClockTime(); var timeString = Lang.format("$1$:$2$", [clockTime.hour, clockTime.min.format("%02d")]); var view = View.findDrawableById("TimeLabel"); view.setText(timeString); // Call the parent onUpdate function to redraw the layout View.onUpdate(dc); }

In this function, you draw the bitmap, setup your layout to be drawn, and then call the parent to draw the layout. That call (View.onUpdate(dc)) causes everything you've drawn up to that point to be drawn over by the layout. This means your bitmap won't display.

If you want to draw a background bitmap, you can do so by putting a bitmap into the layout and never drawing the bitmap explicitly, or you can explicitly draw the layout stuff yourself.

// setup the time text here...



// then draw everything

dc.drawBitmap(0, 0, background);

for (var i = 0; i < mLayout.size(); ++i) {

    mLayout.draw(dc);

}

[/code]



Travis