used an image as a background but it's hiding the time shown

Hi, I'm trying to make a watch face for the first time and struggling a bit here with an image I added to the watch face. I want it overall to be an analog watch but right now it is a digital watch but the png file of the picture I added causing the time to dissapear as follows: /resized-image/__size/320x240/__key/communityserver-discussions-components-files/12/pastedimage1631410153505v1.png

TY in advance

I am adding the source View code hopefully the problem will be seen and there's a solution for this situation (I am adding as a text because for some reason I can't add it with an insert>code):

import Toybox.Graphics;
import Toybox.Lang;
import Toybox.System;
import Toybox.WatchUi;

class sharinganView extends WatchUi.WatchFace {
var myBmp;

function initialize() {
WatchFace.initialize();
myBmp=WatchUi.loadResource(Rez.Drawables.sharinganPhoto); //load the bitmap using your id in place of id_pic
}

function onUpdate(dc) {
var x=0,y=0; //upper left is at 10,10
dc.drawBitmap(x, y, myBmp);
}
}


// Load your resources here
function onLayout(dc as Dc) as Void {
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() as Void {
}

// Update the view
function onUpdate(dc as Dc) as Void {
// Get and show the current time
var clockTime = System.getClockTime();
var timeString = Lang.format("$1$:$2$", [clockTime.hour, clockTime.min.format("%02d")]);
var view = View.findDrawableById("TimeLabel") as Text;
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() as Void {
}

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

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

  • I'm no expert at this, but have designed a few apps using text.  Two things that I noticed that might be part of your problem:

    1. you are missing the format statement for the hour value (like you have for the minutes)

    2. you can also use this command to display the text (I'm not familiar with the view commands you're using): 

    dc.drawText( 25, 50, Graphics.FONT_NUMBER_MILD, timeString, Graphics.TEXT_JUSTIFY_LEFT );

    where 25 and 50 are just the x/y coordinates for where the text string is located on the screen, FONT_NUMBER_MILD is a font size selection, and TEXT_JUSTIFY_LEFT is one of several options for how the text is positioned relative to the x/y coords.

    try it and see if it helps, I know there's usually more than one way to do things, but I've used this in the past many times and its worked for me.

  • You have the function onUpdate() defined twice, with first definition drawing your background and the second definition drawing the time.

    It also seems that your 2nd onUpdate call, as well your empty implementations of onShow, onHide, etc. actually exist outside of the View class, which means they would have no effect either way (but it does explain why your code is able to build with 2 onUpdate() definitions).

    function onUpdate(dc) {
    var x=0,y=0; //upper left is at 10,10
    dc.drawBitmap(x, y, myBmp);
    }
    } // <===== this brace marks the end of the sharinganView class. Everything else goes in the global scope and is effectively ignored.

    This would be apparent if you beautified your code (so that it's indented properly) and/or if you were able to use the Insert Code feature of the forums. I see that Insert Code doesn't work with your code, as you said, which is pretty unfortunate. (Yes, these forums are terrible to work with -- honestly I couldn't hate them more.)

    Try reformatting your code, combining the 2 onUpdate() functions, and putting everything inside the view class, like this:

    https://pastebin.com/vtGxb0Pj

    Here it is as inline text, with the proper indentation. (I pasted this into a plain text editor -- like Notepad -- before copying and pasting it back to my post, to avoid various formatting issues. For example, if I had pasted directly from VS Code, I would've gotten nice syntax highlighting, but I would've also had an extra newline between every line, which is super annoying to try to fix.)

    import Toybox.Graphics;
    import Toybox.Lang;
    import Toybox.System;
    import Toybox.WatchUi;

    class sharinganView extends WatchUi.WatchFace {
        var myBmp;

        function initialize() {
            WatchFace.initialize();
            myBmp = WatchUi.loadResource(Rez.Drawables.sharinganPhoto); //load the bitmap using your id in place of id_pic
        }

        // Load your resources here
        function onLayout(dc as Dc) as Void {
            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() as Void {}

        // Update the view
        function onUpdate(dc as Dc) as Void {
            var x = 0,
                y = 0; //upper left is at 10,10
            dc.drawBitmap(x, y, myBmp);

            // Get and show the current time
            var clockTime = System.getClockTime();
            var timeString = Lang.format("$1$:$2$", [clockTime.hour, clockTime.min.format("%02d")]);
            var view = View.findDrawableById("TimeLabel") as Text;
            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() as Void {}

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

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

    I haven't tried building or running this, but hopefully that should help get you on the right track. Note that your code mixes direct DC calls and layout calls. While this may be possible, you may run into issues. See this thread:

    forums.garmin.com/.../port-from-direct-draw-to-layout

  • The easiest solution here is to get rid of the layout and just use dc.drawText() to display the time.  When you do the View.onUpdate()  that first clears the screen so you lose the bitmap.

    So, replace

     

    var view = View.findDrawableById("TimeLabel") as Text;
    view.setText(timeString);
    
    // Call the parent onUpdate function to redraw the layout
    View.onUpdate(dc);

    with something like

    dc.setColor(Graphics.COLOR_BLACK,Graphics.COLOR_TRANSPARENT);
    dc.drawText(dc.getWidth()/2,dc.getHeight()/2,Graphics.FONT_NUMBER_MILD,timeString,Graphics.TEXT_JUSTIFY_CENTER|Graphics.TEXT_JUSTIFY_VCENTER);
    Which will center the time on the screen on top of the bitmap

  • brilliant! TY both for helping! Flowstate ty for your the whole time invested for this and TY Jim for the improvement of the code!

  • The thread flowstate linked to says it all. about mixing layouts and dc calls.