Tips and tricks for a MonkeyC Noob?

Former Member over 10 years ago

Hello everyone,

Recovering code addict. Haven't really done much programming in a year or two now. Python and PHP were my tools of trade. I just recently bought a VivoActive, yesterday, and wanted to make a couple custom watch faces.

I loaded the SDK and eclipse and started a new project. For my first test I just wanted to set a custom background with a simple digital clock over the top. I don't have the code with me, in fact I might have set it on fire after 3 hours of messing with it last night. But just wanted to ask what might have went wrong.

I created the background image, put it in the images folder. I setup the resources file to reference it. I created the variable, and loaded the resource in the code. The default template for a watch face included a call to a layout, which put a digital clock in the center of the page. If I had setLayout(Rez.Layouts.WatchFace(dc)); commented out, the background graphic would show, but the time wouldn't display. If I uncommented the layout the clock would show but not the background graphic.

I'm sure I made a noob mistake, and I know it would be a lot easier to diagnose if I had the code, but can anyone point me in the right direction? Is there a way to specify the background graphic in the layout.xml?

Thanks!

Top Replies

jim_m_58 over 10 years ago +1

Or, you can not use layouts at all, and if you just want to set the background color, use something like

dc.setColor(Gfx.COLOR_BLUE,Gfx.COLOR_BLUE); dc.clear();

and to use an image as the background…

All Replies

Former Member over 10 years ago

Create a watch app or widget project from the new project wizard. They include bitmaps in the generated layouts.

travis.vitek over 10 years ago

If I had setLayout(Rez.Layouts.WatchFace(dc)); commented out, the background graphic would show, but the time wouldn't display. If I uncommented the layout the clock would show but not the background graphic.

It sounds like your onUpdate() function is drawing the time and then calling through to the base class to update as well; something like this

function onUpdate(dc)
{
  // .. snip ...

  dc.drawText(x, y, font, time, justify);

  Ui.View.onUpdate(dc);
}

The problem is that if you set a layout (via setLayout()), the Ui.View.onUpdate() call clears the screen and draws the layout, writing over the top of your text. If you want to draw stuff with a layout, you have to draw on top of (after) the layout has been drawn...

function onUpdate(dc)
{
  // .. snip ...

  Ui.View.onUpdate(dc);

  dc.drawText(x, y, font, time, justify);
}

jim_m_58 over 10 years ago

Or, you can not use layouts at all, and if you just want to set the background color, use something like

dc.setColor(Gfx.COLOR_BLUE,Gfx.COLOR_BLUE);

dc.clear();

and to use an image as the background, do something like:

dc.drawBitmap()

Former Member over 10 years ago

Thanks! I got it to work. Only problem now is the organization I was making a watch face for ( just for fun ) doesn't let people use their logo for anything, so I can't publish it. I wanted a orange watch face with the Tough Mudder logo. It was a good starter project though. Now I just need to think up something I can share!

Thanks!

Former Member over 10 years ago

My next issue. Sys.getClockTime(); is returning a 0 for midnight. I tried to trick it with the code below and it wouldn't even work. Is there a better way to get and format the time?

var clockhour = clockTime.hour;
if( clockhour = 0 )
{
clockhour = 12;
}else{
clockhour = clockTime.hour;

}

Thanks!

jim_m_58 over 10 years ago

If you use the system settings, you can make it a bit smarter:

var settings=Sys.getDeviceSettings();

        if(settings.is24Hour) {
        	AMPM="";
        	hour=today.hour;
           	timeString= Lang.format("$1$:$2$",[today.hour, today.min.format("%02d")]);      	
        }
        //12hr format
        else {
            hour = today.hour % 12;
            hour = (hour == 0) ? 12 : hour;

            AMPM = (today.hour>11) ? "pm" : "am";
           	timeString= Lang.format("$1$:$2$ $3$",[hour, today.min.format("%02d"),AMPM]);
        }