connect-iq
Creating a Garmin watch-face 101 1
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’ :gear: > ‘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!🎆2
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](https://github.com/winston-de/Simple-Times)
[Smart Arcs Active analogue watchface. Indicators as arcs. By okdar](https://github.com/okdar/smartarcsactive)
[Garmin written digital watchface. Text instead of numbers. By Cutwell](https://github.com/Cutwell/garmin-written-watchface)
[Garmin square watchhands analogue watchface. Squares instead of arrows. By Cutwell](https://github.com/Cutwell/garmin-square-watchhands-watchface)
7.2. Garmin Official
[Compatible devices](https://developer.garmin.com/connect-iq/compatible-devices/)
[Submit an app](https://developer.garmin.com/connect-iq/submit-an-app/)
[Connect-IQ debugging](https://developer.garmin.com/connect-iq/core-topics/debugging/)
[Monkey-Ccode reference](https://developer.garmin.com/connect-iq/reference-guides/monkey-c-reference/)
[Toybox.Graphics.Dc Class in Monkey-C](https://developer.garmin.com/connect-iq/api-docs/Toybox/Graphics/Dc.html)
7.3. Garmin Forum
[Garmin Connect-IQ forum](https://forums.garmin.com/developer/connect-iq/)
Footnotes: