Help ! Can't figure out how to draw bitmap behind my layout.

Former Member over 4 years ago

Hi, i try to create a structure to make my own watchface, i have very little developing background, i achieve to understand how to create placeholders for heart rate, date and such, but i can't find any method reliable to draw a bitmap behind everything.

Actually my project look like this :

XML Files :

Here's the drawables including my bitmap:

<drawables>
<bitmap id="background" filename="download.png" />
<bitmap id="LauncherIcon" filename="launcher_icon.png" />
</drawables>

Here's the data i want to update :

Code :

using Toybox.Graphics;
using Toybox.Lang;
using Toybox.System;
using Toybox.Time;
using Toybox.Time.Gregorian;
using Toybox.ActivityMonitor as Mon;
using Toybox.WatchUi;

class MyView extends WatchUi.WatchFace {

var myBitmap;

function initialize() {
WatchFace.initialize();

}

// 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() {
}

// Update the view

function onUpdate(dc) {

View.onUpdate(dc);
setBatteryDisplay();
setDateDisplay();
setClockDisplay();
setHeartrateDisplay();

}

function onHide() {
}

function onExitSleep() {
}

function onEnterSleep() {
}

private function setClockDisplay() {
var clockTime = System.getClockTime();
var timeString = Lang.format("$1$:$2$", [clockTime.hour, clockTime.min.format("%02d")]);

if(currentHeartrate == Mon.INVALID_HR_SAMPLE) {
return "";
}

return currentHeartrate.format("%d");
}

}

So i don't know if someone can share a working code, even only a code who JUST draw a bitmap on the screen. The SDK samples do a *** ton of others useless things for my case and it mess my mind even more. I tried to understand the primates one, but nothing worked :/
Display data placeholders was an easy task, but i can't find a clue on internet for bitmap drawing ...

Please help me, i'll struggle an entire month on this *** if nobody comes xD

Former Member over 4 years ago

By the way, i assume the problem comes from the function initialize / onShow / onLayout and onUpdate.

But i can't figure how they interact and if i need to initialize my bitmap, or a line is missing in the other ones.

On the function onUpdate, i already tried dc.drawBitmap(120,120,background); on top of every placeholder and on the bottom of View.onUpdate(dc); which doesn't work somehow.

I read somewhere that View.onUpdate(dc) basically clear everything on the screen so i put it above everything. Still not working.

Travis.ConnectIQ over 4 years ago in reply to Former Member

Yes, View.onUpdate() does clear the screen and then it draws the layout elements in order. This means that things that occur later in the layout definition will be drawn on top of things that were listed earlier.

If all you want to do is draw a small bitmap on top of the stuff in the layout you just need to call dc.drawBitmap() after calling View.onUpdate(dc).

If you want to draw a background that all of the layout elements will be drawn on top of, you either need to insert a bitmap into your layout (before the other things in the layout), or you need to draw the bitmap and the draw the things in the layout (without calling View.onUpdate() because that would clear the screen)

Also note that the other stuff you do (updating things in the layout) should happen before drawing the draw ales in the layout...

{code}
function onUpdate(dc) {

// update layout fields here

// clear the screen.. only necessary if bitmap is not full screen
dc.setColor(Graphics.COLOR_BLACK, Graphics.COLOR_BLACK);
dc.clear();

// draw background here
dc.drawBitmap(xcoord, ycoord, bitmap);

// draw each draw able
for (var i = 0; i < mLayout.size(); ++i) {
mLayout[i].draw(dc);
}
}

{code}