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

Former Member
Former Member

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 :

<layout id="WatchFace">
<label id="BatteryDisplay" x="center" y="center" font="Graphics.FONT_SMALL" justification="Graphics.TEXT_JUSTIFY_CENTER" color="Graphics.COLOR_RED" />
<label id="TimeDisplay" x="center" y="top" font="Graphics.FONT_SMALL" color="Graphics.COLOR_RED" justification="Graphics.TEXT_JUSTIFY_CENTER"/>
<label color="Graphics.COLOR_RED" font="Graphics.FONT_SMALL" id="DateDisplay" justification="Graphics.TEXT_JUSTIFY_CENTER" x="center" y="bottom"/>
<label color="Graphics.COLOR_RED" id="HeartrateDisplay" font="Graphics.FONT_SMALL" justification="Graphics.TEXT_JUSTIFY_CENTER" x="left" y="center"/>
</layout>

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")]);


var view = View.findDrawableById("TimeDisplay");
view.setText(timeString);
}

private function setDateDisplay() {
var now = Time.now();
var date = Gregorian.info(now, Time.FORMAT_LONG);
var dateString = Lang.format("$1$ $2$, $3$", [date.month, date.day, date.year]);
var dateDisplay = View.findDrawableById("DateDisplay");
dateDisplay.setText(dateString);
}

private function setBatteryDisplay() {
var battery = System.getSystemStats().battery;
var batteryDisplay = View.findDrawableById("BatteryDisplay");
batteryDisplay.setText(battery.format("%d")+"%");
}

private function setHeartrateDisplay() {
var heartRate = "";

if(Mon has :INVALID_HR_SAMPLE) {
heartRate = retrieveHeartrateText();
}
else {
heartRate = "";
}

var heartrateDisplay = View.findDrawableById("HeartrateDisplay");
heartrateDisplay.setText(heartRate);
}

private function retrieveHeartrateText() {
var heartrateIterator = ActivityMonitor.getHeartRateHistory(null, false);
var currentHeartrate = heartrateIterator.next().heartRate;

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
    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.

  • 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}