Intro

My wife recently got a new Garmin Venu and was customizing the face background. The watch pairs with an app that lets users do some basic customization, but she didn’t like how it didn’t have the best customization options. Luckily, she has me here to build a custom face!

The Final Result

Sunflower Watch Face for Venu | Garmin Connect IQ

I had some issues with the outline that I want to improve on, but really I was just excited to learn how to make a smartwatch app!

Below I’m going to go over how I put this together and how you can too. Then you can probably make something much nicer looking than me!

Developer Setup

Garmin already has some good developer content for setting up your development environment. Whenever possible I’m going to link you over to their pages, then you can come back here. I think it’s better to get information straight from the source, so I’ll always link to docs as often as possible.

Edit (April 2022):

Previously this section had details for using Eclipse, it seems that the SDK has moved away from Eclipse and now recommends using Visual Studio Code with the Garmin Monkey C extension. I’ve removed the eclipse reference here. You can still follow the instructions on the Garmin page for setting up Visual Studio Code.

To set up your system for development, simply follow the instructions here.

Project Setup

Now I’m going to send you to Garmin again for creating the project. Just go through the top 2 sections:

  1. Creating Your First Project
    • When you get to the App Template: Select Simple with Settings
  2. Running the Program

Click here to go to the Garmin page.

After following all of the above, the project should be set up and you should be able to run it in the simulator and get something like this:

Blank watch face from template.

Next I’m going into all the steps I went through to make the app. If you want to do your own reading on developing an app, the Garmin SDK you came with comes with a bunch of documentation. Open up a windows explorer and navigate to %APPDATA%\Garmin\ConnectIQ\Sdks and open up the SDK folder. There you’ll find a few html files full of useful documentation.

Setting a Background

I’m not sure if Garmin has a method to automatically scale an image, so to set a background we need to create an image that fits on the watch screen. To do that we need to know how big of a screen we have.

Getting the Screen Dimensions

First you need to get the dimensions of the watch you’re developing for. I did this by just adding a function to print the dimensions to the console. Open up the file named <YourProjectName>View.mc and add the following function:

function printDimensions(dc) {
    var width, height;
    width = dc.getWidth();
    height = dc.getHeight();
    System.println("Dimensions: " + width + "x" + height);
}

Then update the onUpdate function to call this debug function

function onUpdate(dc) {
    printDimensions(dc);
    // ... Template code ...
}

Execute this and the console will show your watch’s screen dimensions. For my Venu it’s 390×390 pixels

(Edit April 2022): If using visual studio code, make sure you open the “Debug Console” in the bottom section. If it’s on the terminal tab, you won’t see anything printed.

Snippet of console showing 390×390 pixels

Creating a background image

You can start with any image you like that fits your watch’s dimensions. If you don’t have anything to start with, my backgrounds came from Pixabay which has a ton of free images to choose from. Use a program of your choice to scale the image down to fit your watch screen. I’ll be using this sunflower image.

Sample background image.

Name your file background.png (or whatever your extension is) and copy it into your project’s resources/drawables folder.

The file resources/layouts/layouts.xml contains details on what the watch face is going to display. Open this and paste in the following:

<layout id="WatchFace">
    <bitmap id="LayoutBackground" filename="../drawables/background.png" />
    <label id="TimeLabel" x="center" y="center" font="Graphics.FONT_LARGE" justification="Graphics.TEXT_JUSTIFY_CENTER" color="Graphics.COLOR_BLUE" />
</layout>

Notice the bitmap tag. I set the filename to ../drawables/background.png. You may change background.png to whatever you called your background file.

Now run the app and your background should show up!

Watch face so far.

Wrapping Up

This post is getting quite long, so I’m ending it here. I’ll create another post that shows how to set the font, display more content, and use app settings in the future.

If you have any questions or if anything here is wrong or can be done better, please let me know!

Categories:

4 Responses

  1. Sorry Bee!
    I haven’t played with my watch for a while so there isn’t going to be a part 2… (Eventually I’ll fix my habit of not finishing things)…
    For custom fonts you have to use BMFont to export any font you find into the format supported by the watch.
    Then for app settings there’s some XML files you have to make. If you’re interested I can point you to the appropriate documentation. It’s all packaged somewhere in the SDK files.

    • hello can I have help with the steps counter???? cause i really try to make it but i dont know what to do i try to do
      var steps = Activity.getInfo().steps;
      but when i do setText fo a label in my layout its not working
      can i have help??

Leave a Reply

Your email address will not be published.