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.
Download the Garmin IQ SDK using the SDK Manager.
Install Visual Studio Code
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.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.
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.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.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!🎆🎆🎆
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:
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent