Overlap Time over a Bitmap

Former Member over 10 years ago

Hi! First let me clarify that I'm not a programmer but I would like to do my own watch face :) your help is really appreciated.
I try to do a simple thing: use a bitmap as background and put the hour on top of the bitmap I’m using the example code of the SDK to try to figure it out.
I'm able to draw only the background without time also to draw the time without background but I can't do both, display the background and time together.

I have two questions about the code:

1) How do I overlap the time over the bitmap?
2) How do I specify x,y position for the time?

I’m using the following code to try to show time and bitmap:

using Toybox.WatchUi as Ui;

using Toybox.Graphics as Gfx;

using Toybox.System as Sys;

using Toybox.Lang as Lang;



class View extends Ui.WatchFace {

	var background;

    //! Load your resources here

    function onLayout(dc) {

        setLayout(Rez.Layouts.WatchFace(dc));

   //Load my background

        background=Ui.loadResource(Rez.Drawables.background);

    }



    //! 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) {

         //Draw Background

    	 dc.drawBitmap(7, 25, background);

        // Get and show the current time

        var clockTime = Sys.getClockTime();

        var timeString = Lang.format("$1$:$2$", [clockTime.hour, clockTime.min.format("%.2d")]);

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

    }



}

Thanks!!!

Kyle.ConnectIQ over 10 years ago

1) How do I overlap the time over the bitmap?

You'll want to call View.onUpdate() first. What this call does is draw your layout from an xml file. The first thing this function does is clear the screen, so this is why the time is not showing up.

2) How do I specify x,y position for the time?

In your layout xml file, you can adjust the position for the TimeLabel item. You can also modify it via code, but the layout would be the best way to change the position in this case.

var view = View.findDrawableById("TimeLabel");
view.setText(timeString);
view.locX = <x position>;
view.locY = <y position>;

Former Member over 10 years ago

You'll want to call View.onUpdate() first. What this call does is draw your layout from an xml file. The first thing this function does is clear the screen, so this is why the time is not showing up.

In your layout xml file, you can adjust the position for the TimeLabel item. You can also modify it via code, but the layout would be the best way to change the position in this case.
var view = View.findDrawableById("TimeLabel"); view.setText(timeString); view.locX = <x position>; view.locY = <y position>;

Hi Kyle! Thank you for your help! Please bear with me, I was able to position the clock with x,y with no issues in the screen of the watch : ) what I'm still not able to do is to overlap time and background I'm lost :/ I tried several times to use View.onUpdate(dc) with no success, should be something pretty obvious for programmers but I can figure it out yet.

Let me ask you where in the code should I call View.onUpdate(dc)?

Thanks!

Kyle.ConnectIQ over 10 years ago

The easiest way would be to move your bitmap to your layout that contains the time string. The individual parts of a layout are drawn in order, so make sure the bitmap is before the label.

<layout id="MainLayout">
    <bitmap id="id_monkey" x="center" y="30" filename="../images/monkey.png" />
    <label x="center" y="5" text="Click the menu button" color="Gfx.COLOR_WHITE" justification="Gfx.TEXT_JUSTIFY_CENTER" />
</layout>

I'll explain why it's not working so you'll know what's going on.

//Draw Background
dc.drawBitmap(7, 25, background);
//** The bitmap is drawn to the dc, so everything is ok so far

// Get and show the current time
var clockTime = Sys.getClockTime();
var timeString = Lang.format("$1$:$2$", [clockTime.hour, clockTime.min.format("%.2d")]);
var view = View.findDrawableById("TimeLabel");
view.setText(timeString);
//** At this point the time string has been updated to the correct value, but not drawn
      
// Call the parent onUpdate function to redraw the layout
View.onUpdate(dc);
//** This draws layout, which contains your time label, but the first thing this function does is clear the screen, removing the
//** the bitmap.

Former Member over 10 years ago

The easiest way would be to move your bitmap to your layout that contains the time string. The individual parts of a layout are drawn in order, so make sure the bitmap is before the label.

<layout id="MainLayout"> <bitmap id="id_monkey" x="center" y="30" filename="../images/monkey.png" /> <label x="center" y="5" text="Click the menu button" color="Gfx.COLOR_WHITE" justification="Gfx.TEXT_JUSTIFY_CENTER" /> </layout>

I'll explain why it's not working so you'll know what's going on.

//Draw Background dc.drawBitmap(7, 25, background); //** The bitmap is drawn to the dc, so everything is ok so far // Get and show the current time var clockTime = Sys.getClockTime(); var timeString = Lang.format("$1$:$2$", [clockTime.hour, clockTime.min.format("%.2d")]); var view = View.findDrawableById("TimeLabel"); view.setText(timeString); //** At this point the time string has been updated to the correct value, but not drawn // Call the parent onUpdate function to redraw the layout View.onUpdate(dc); //** This draws layout, which contains your time label, but the first thing this function does is clear the screen, removing the //** the bitmap.

Hello Kyle!

Thank you for help!! and take the time to explain to me what was going on, I appreciate that, great explanation, moving the bitmap to the layout make things easier. Now I'm able to draw the bitmap and time together!

Kyle, use the bitmap in the layout.xml is the right thing to do? or the easier thing to do? I see that few people use the bitmaps within the main code.

Thanks again!! : )

Kyle.ConnectIQ over 10 years ago

Kyle, use the bitmap in the layout.xml is the right thing to do? or the easier thing to do? I see that few people use the bitmaps within the main code.

It's up to your personal preference if you use the layout system or not. The layout system is there to help with supporting multiple devices, so you don't have to put checks in your code to see what kind of device the app is running on.

Former Member over 10 years ago

It's up to your personal preference if you use the layout system or not. The layout system is there to help with supporting multiple devices, so you don't have to put checks in your code to see what kind of device the app is running on.

Got it! I started to play with both! Thank you Kyle for your help.