Tutorial I can follow?

I'm really confused. It seems, from looking at other peoples code, there are multiple ways of doing the same thing (e..g setting background color, setting background image, etc).

Is there a tutorial I can follow anywhere?

Amir

There are multiple ways of doing almost everything in every variety of programming language.
Are you talking about watchfaces, widget, or app?
Customizable settings for background/images or just setting one in general?

To simply put a background image in a watchface and absolutely nothing else (assuming below that you named the image background.png and that it is the right size in pixels to match your watch's face size:
Add the image you want to the images folder in your project.
Add: <bitmap id="Background" filename="images/background.png" />
Do code:
var background;

function onLayout(dc) {
background = Ui.loadResource(Rez.Drawables.Background);
}

function onUpdate(dc) {
dc.drawBitmap(0,0,background);
}


To simply make the background a color there are a billion ways, though it depends on whether you're manually drawing or using the layout systems...:
For manually drawing the background as black:
function onUpdate(dc) {
var foregroundColor = Gfx.COLOR_RED;
var backgroundColor = Gfx.COLOR_BLACK;
dc.setColor(foregroundColor, backgroundColor );
dc.clear(); //this makes the screen be the color in backgroundColor
}

Another less simplistic way of manually drawing black background that you may see done by some:
function onUpdate(dc) {
var screenWidth = dc.getWidth();
var screenHeight = dc.getHeight();
var foregroundColor = Gfx.COLOR_BLACK;
var backgroundColor = Gfx.COLOR_RED;
dc.setColor(foregroundColor , backgroundColor );
dc.fillRectangle(0, 0, screenWidth, screenHeight); //this makes the screen be the color that was in foregroundColor
}


Data field background image

Hi lightmatter,

The code doesn't work for Data field.
Is it only apply to Watch face?

I tried to google it and search in the forum, looks like it is not possible to give a back ground image on data field.

Please suggest.
Thanks so much.
Angus

The above code should work fine for a complex data field. If it doesn't work for you, please verify that your view class inherits from Ui.DataField (not Ui.SimpleDataField). You cannot do any custom drawing with a simple data field. If you still need an example, have a look at the MoxyDataField example included with recent versions of the ConnectIQ SDK.

Hi Travis,

Thanks for your reply.
I am using Ui.DataField class.
I have the function in AppView.mc
class AppView extends Ui.DataField {

var background;

function onLayout(dc){
background = Ui.loadResource(Rez.Drawables.background);
// background is now a BitmapResource instance
}
...

function onUpdate(dc) {
...
dc.drawBitmap(0, 0, background);
}


resources.xml is also defined.

It complies OK but return with the following error when Run
Failed invoking <symbol>
Out Of Memory Error
in onLayout (/Users/<username>/Documents/workspace/<AppName>/source/<AppName>View.mc:19)
Connection Finished

Any idea please?

I tried to look up MoxyDataField example in ConnectIQ SDK as suggested.
I can't see it loading a background image.
Any other data field sample that load a background image please?

Thanks so much,
Angus

I tried to look up MoxyDataField example in ConnectIQ SDK as suggested. I can't see it loading a background image.

You asked to see code that set the background color *or* a background image. The MoxyDataField shows how to set the background color. If you want to see how to draw a bitmap, have a look at the C64Face, MO2Display, or Primates examples. The code necessary to draw a bitmap is no different between the various app types.

It complies OK but return with the following error when Run
Failed invoking <symbol>
Out Of Memory Error
in onLayout (/Users/<username>/Documents/workspace/<AppName>/source/<AppName>View.mc:19)
Connection Finished

A data field has less than 16KB of memory available to it on some devices (even in the simulator). If you exceed that limit, your application will crash just as this error message indicates it is doing. Your data field is running out of memory. That is pretty simple to see, is it not?

The epix and edge_1000 have up to 128KB available for a data field. If you run your data field on the simulator using the one of them as the target device, you may be able to avoid the out of memory error and see exactly how much memory your data field is using. Then you'll know how much you need to trim to get it to work on a device with less memory available.

Any other data field sample that load a background image please?

As I said above, code to draw a bitmap is the same for a data field as it is for an app of any other type, so any example that shows drawing a bitmap will suffice. AFAICT, your code is correct, you are just running out of memory.

Thanks everyone. I think I found the problem ... The image is too large!
Then the next question is ... where can I find the max size for each device?
Seems API doesn't talk about that.
Thanks.

You can find it in devices.xml in the SDK, or you can see it when you simulate the device on the bottom line.

Also, there's a chart on this page that will tell you (memory size limits are the same in 1.2.x)

http://developer.garmin.com/index.php/blog/post/connect-iq-2-biker-monkey