connect-iq

Creating a Garmin watch-face 101 ¹

You've got yourself a fancy new Garmin watch ⌚. Hooray! After spending 4 8 12 24 hours playing around with new watchfaces and apps, you decide to create your own custom watchface.

Step 1. Garmin IQ SDK

Download the Garmin IQ SDK using the SDK Manager.

2. Visual Studio Code

Install Visual Studio Code

3. Installing the Visual Studio Code Monkey C Extension:

3.1. In Visual Studio Code, go to View > Extensions

3.2. In the Extensions Marketplace, search box type "Monkey C"

3.3. Select the Monkey C extension from Garmin.

3.4. Use the Install button to install the extension in Visual Studio Code. This will require a restart of Visual Studio Code.

3.5. After Visual Studio Code restarts, summon the command palette with Ctrl + Shift + P (Command + Shift + P on Mac).

3.6. Type "Verify Installation" and select Monkey C: Verify Installation

4. Creating your first watch-face 🔨

4.1-A. Generate your developer key via command palette (Ctrl + Shift + P or Command + Shift + P) then typing "Generate a Deverloper Key" amd select Monkey C: Generate a Developer Key

4.1-B.

Note

If you have a developer key then open Extensions, search Monkey C, select the Monkey C 'Manage' ⚙️ > 'Extension Settings', then update the Monkey C: Developer Path Key directory

4.2. Create a new project via command palette, then typing "New Project" and select Monkey C: New Project

4.3. Name your project, for example "myWatchface"

4.4. Select 'Watch Face' > Select 'Simple' > Select your target API. eg. 3.0.0

4.5. Select your watches to target. eg. We will select all.

4.6-A. Select a folder to save to. Visual Studio Code will open the new project.

Caution

❌ If the project does not open, including 'monkey.jungle' then move to the next step. ⚠️⏩ Otherwise skip the next step

4.6-B.

Note

In Explorer, open your newly created directory in Visual Studio Code. eg. In 'myWatchFace' directory > Right click > Select Open With Code. Or open the 'monkey.jungle' file in Visual Studio Code

4.7. From the toolbar > Select Run > Run Without Debugging (Ctrl F5 or Command F5)

4.8. Select Debugger > Monkey C. Then select your test watch. eg. Venu 3.

4.9. Congratulations! You have created and tested your watch-face!🎆²

5. Next steps: Developing your first watch-face 💻

5.1. To change watch-face visuals > Update the '/resources/layouts/layout.xml' file.

Tip

Most Garmin devices set (x, y) = (0, 0) as the top left corner of the stage. With the stage range as ([0, screenWidth], [0, screenHeight]).

5.2. To add functionality > Update the '/source/*.mc' files.

Tip

Refer to the Monkey-C programming language reference guide.

6. Building your watch-face 🛠️

6.1. In Visual Studio Code > summon the command palette (Ctrl + Shift + P or Command + Shift + P)

6.2. Type 'Build for Device' > select Monkey C: Build for Device

6.3. Select your device. eg Venu 3 > Select a directory to build to. eg. Create a 'build' folder > Select 'build' folder

6.4. In Explorer > Open your 'build' folder > Locate the .prg file. eg. myWatchface.prg

6.5. With your Garmin watch > Connect to your device via USB

6.6. Copy your .prg watch-face to your Garmin device > 'GARMIN/Apps' folder

6.7. Disconnect your Garmin watch > On your Garmin watch > Select your watch-face

6.8. Congratulations! You have built a fully-functioning Garmin watch-face!🎆🎆🎆

7. Resources 💡

Display resources

7.1. Github Repositories

Simple analogue watchface. A useful template. Simple-Times by winston-de

Smart Arcs Active analogue watchface. Indicators as arcs. By okdar

Garmin written digital watchface. Text instead of numbers. By Cutwell

Garmin square watchhands analogue watchface. Squares instead of arrows. By Cutwell

7.2. Garmin Official

Compatible devices
Submit an app
Connect-IQ debugging
Monkey-Ccode reference
Toybox.Graphics.Dc Class in Monkey-C

7.3. Garmin Forum

Garmin Connect-IQ forum

---

Footnotes:

Footnotes

1. Valid as of October, 2024. Using Visual Studio Code as recommended IDE ³ by Garmin. ↩

2. Official documentation available at Garmin. ↩

3. I know Visual Studio Code isn't an "Intergrated Development Environment" itself. Let's call it VS Code with Java JDK, Garmin IQ SDK and Monkey-C extension. OS agnostic. ↩