{"id":24571581,"url":"https://github.com/AndrewKhassapov/connect-iq","last_synced_at":"2025-10-04T23:30:34.684Z","repository":{"id":207953178,"uuid":"720484747","full_name":"AndrewKhassapov/connect-iq","owner":"AndrewKhassapov","description":"Creating a Garmin watch-face 101","archived":false,"fork":false,"pushed_at":"2024-11-14T04:04:40.000Z","size":408,"stargazers_count":27,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-01-20T09:14:45.350Z","etag":null,"topics":["101","connect-iq","connect-iq-watchface","connect-iq-widget","garmin","garmin-watch","instructions","monkey-c","template"],"latest_commit_sha":null,"homepage":"https://andrewkhassapov.github.io/connect-iq/","language":"Monkey C","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/AndrewKhassapov.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-11-18T16:22:22.000Z","updated_at":"2025-01-15T20:16:34.000Z","dependencies_parsed_at":"2024-04-24T06:45:52.595Z","dependency_job_id":"399b3e0f-76ec-487a-8cbd-ead21b6e4559","html_url":"https://github.com/AndrewKhassapov/connect-iq","commit_stats":null,"previous_names":["andrewkhassapov/connect-iq"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AndrewKhassapov%2Fconnect-iq","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AndrewKhassapov%2Fconnect-iq/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AndrewKhassapov%2Fconnect-iq/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AndrewKhassapov%2Fconnect-iq/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/AndrewKhassapov","download_url":"https://codeload.github.com/AndrewKhassapov/connect-iq/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":235325670,"owners_count":18971938,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["101","connect-iq","connect-iq-watchface","connect-iq-widget","garmin","garmin-watch","instructions","monkey-c","template"],"created_at":"2025-01-23T18:01:52.654Z","updated_at":"2025-10-04T23:30:29.342Z","avatar_url":"https://github.com/AndrewKhassapov.png","language":"Monkey C","funding_links":[],"categories":["Miscellaneous"],"sub_categories":["Older resources"],"readme":"# connect-iq\n\n## Creating a Garmin watch-face 101 [^1]\n\nYou've got yourself a fancy new Garmin watch ⌚.\nHooray!\nAfter spending ~~4~~ ~~8~~ ~~12~~ 24 hours playing around with new watchfaces and apps, you decide to create your own custom watchface.\n\n### Step 1. Garmin IQ SDK\n\nDownload the [Garmin IQ SDK](https://developer.garmin.com/connect-iq/sdk/) using the SDK Manager.\n\n### 2. Visual Studio Code\n\nInstall [Visual Studio Code](https://code.visualstudio.com/Download)\n\n### 3. Installing the Visual Studio Code Monkey C Extension:\n\n3.1. In Visual Studio Code, go to\n**View \u003e Extensions**\n\n3.2. In the Extensions Marketplace, search box type \"**Monkey C**\"\n\n3.3. Select the Monkey C extension from Garmin.\n\n3.4. Use the Install button to install the extension in Visual Studio Code. This will require a restart of Visual Studio Code.\n\n3.5. After Visual Studio Code restarts, summon the command palette with Ctrl + Shift + P (Command + Shift + P on Mac).\n\n3.6. Type \"Verify Installation\" and select Monkey C: Verify Installation\n\n![Screenshot 2023-11-26 024714](https://github.com/AndrewKhassapov/connect-iq/assets/53222142/ef6641dd-2bd2-4006-8368-9f0a3bd3f856)\n\n### 4. Creating your first watch-face 🔨\n\n4.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\n\n![Screenshot 2023-11-26 024554](https://github.com/AndrewKhassapov/connect-iq/assets/53222142/bc510fca-3ff6-4df1-9e97-98a706ee2ef3)\n\n4.1-B.\n\n\u003e [!NOTE]\n\u003e If you have a **developer key** then open Extensions, search **Monkey C**, select the Monkey C 'Manage' :gear: \u003e 'Extension Settings', then update the **Monkey C: Developer Path Key** directory\n\n![Screenshot 2023-11-26 025650](https://github.com/AndrewKhassapov/connect-iq/assets/53222142/ed410407-2e04-482d-8982-eabf5c66158e)\n\n4.2. Create a new project via command palette, then typing \"New Project\" and select Monkey C: New Project\n\n![Screenshot 2023-11-26 025824](https://github.com/AndrewKhassapov/connect-iq/assets/53222142/6316024d-a507-4955-868c-49b7a8987c30)\n\n4.3. Name your project, for example \"myWatchface\"\n\n![Screenshot 2023-11-26 030114](https://github.com/AndrewKhassapov/connect-iq/assets/53222142/608971f1-01d9-4917-8a1b-9ec4a26ce1e2)\n\n4.4. Select 'Watch Face' \u003e Select 'Simple' \u003e Select your target API. eg. 3.0.0\n\n![image](https://github.com/AndrewKhassapov/connect-iq/assets/53222142/e3e3aa16-9d0b-4beb-99c1-f3f5327853d7)\n\n4.5. Select your watches to target. eg. We will select all.\n\n![Screenshot 2023-11-26 031710](https://github.com/AndrewKhassapov/connect-iq/assets/53222142/ed0474ff-4ec1-4b6b-a0c7-1fb712392d2e)\n\n4.6-A. Select a folder to save to. Visual Studio Code will open the new project.\n\n\u003e [!CAUTION]\n\u003e ❌ If the project does not open, including 'monkey.jungle' then move to the next step.\n\u003e ⚠️⏩ Otherwise skip the next step\n\n4.6-B.\n\n\u003e [!NOTE]\n\u003e In Explorer, open your newly created directory in Visual Studio Code. eg. In 'myWatchFace' directory \u003e Right click \u003e Select Open With Code. Or open the 'monkey.jungle' file in Visual Studio Code\n\n4.7. From the toolbar \u003e Select Run \u003e Run Without Debugging (Ctrl F5 or Command F5)\n\n![Screenshot 2023-11-26 032721](https://github.com/AndrewKhassapov/connect-iq/assets/53222142/635c4c97-7b40-4e6e-a558-eb468f901f87)\n\n4.8. Select Debugger \u003e Monkey C. Then select your test watch. eg. Venu 3.\n\n4.9. Congratulations! You have created and tested your watch-face!🎆[^3]\n\n### 5. Next steps: Developing your first watch-face 💻\n\n5.1. To change watch-face visuals \u003e Update the '/resources/layouts/layout.xml' file.\n\n\u003e [!TIP]\n\u003e Most Garmin devices set (x, y) = (0, 0) as the top left corner of the stage.\n\u003e With the stage range as **([0, screenWidth], [0, screenHeight])**.\n\u003e\n\u003e ![image](https://github.com/AndrewKhassapov/connect-iq/assets/53222142/a3f06502-7dbd-4893-9403-f727c63af5f0)\n\n5.2. To add functionality \u003e Update the '/source/\\*.mc' files.\n\n\u003e [!TIP]\n\u003e Refer to the [Monkey-C programming language reference guide](https://developer.garmin.com/connect-iq/reference-guides/monkey-c-reference/).\n\n### 6. Building your watch-face 🛠️\n\n6.1. In Visual Studio Code \u003e summon the command palette (Ctrl + Shift + P or Command + Shift + P)\n\n6.2. Type 'Build for Device' \u003e select Monkey C: Build for Device\n\n6.3. Select your device. eg Venu 3 \u003e Select a directory to build to. eg. Create a 'build' folder \u003e Select 'build' folder\n\n![image](https://github.com/AndrewKhassapov/connect-iq/assets/53222142/d183617d-265c-4b61-9623-86c550a9c04b)\n\n6.4. In Explorer \u003e Open your 'build' folder \u003e Locate the **.prg** file. eg. myWatchface.prg\n\n6.5. With your Garmin watch \u003e Connect to your device via USB\n\n6.6. Copy your **.prg** watch-face to your Garmin device \u003e 'GARMIN/Apps' folder\n\n6.7. Disconnect your Garmin watch \u003e On your Garmin watch \u003e Select your watch-face\n\n6.8. Congratulations! You have built a fully-functioning Garmin watch-face!🎆🎆🎆\n\n### 7. Resources 💡\n\u003cdetails\u003e\u003csummary\u003e\nDisplay resources\n\u003c/summary\u003e\n\u003cp\u003e\n7.1. Github Repositories\n\u003cbr/\u003e\u003cbr/\u003e\n  \n[Simple analogue watchface. A useful template. Simple-Times by winston-de](https://github.com/winston-de/Simple-Times)\u003cbr/\u003e\n\u003cimg src=\"https://services.garmin.com/appsLibraryExternalServices/api/icons/30f64e29-76fc-46b0-a1e5-9277e636f4b3\" height=\"200\"\u003e\u003cbr/\u003e\u003cbr/\u003e\n\n[Smart Arcs Active analogue watchface. Indicators as arcs. By okdar](https://github.com/okdar/smartarcsactive)\u003cbr/\u003e\n\u003cimg src=\"https://github.com/okdar/smartarcsactive/blob/master/connect_iq_store/black_cover.png?raw=true\" height=\"200\"\u003e\u003cbr/\u003e\u003cbr/\u003e\n\n[Garmin written digital watchface. Text instead of numbers. By Cutwell](https://github.com/Cutwell/garmin-written-watchface)\u003cbr/\u003e\n\u003cimg src=\"https://raw.githubusercontent.com/Cutwell/garmin-written-watchface/main/cover-image.png\" height=\"200\"\u003e\u003cbr/\u003e\n[Garmin square watchhands analogue watchface. Squares instead of arrows. By Cutwell](https://github.com/Cutwell/garmin-square-watchhands-watchface)\u003cbr/\u003e\n\u003cimg src=\"https://github.com/AndrewKhassapov/connect-iq/assets/53222142/8e2e4132-26d5-4e66-9b68-bda5d48fbc4d\" height=\"200\"\u003e\u003cbr/\u003e\n\n\u003cbr/\u003e\n  \n7.2. Garmin Official\n\u003cbr/\u003e\u003cbr/\u003e\n[Compatible devices](https://developer.garmin.com/connect-iq/compatible-devices/)\u003cbr/\u003e\n[Submit an app](https://developer.garmin.com/connect-iq/submit-an-app/)\u003cbr/\u003e\n[Connect-IQ debugging](https://developer.garmin.com/connect-iq/core-topics/debugging/)\u003cbr/\u003e\n[Monkey-Ccode reference](https://developer.garmin.com/connect-iq/reference-guides/monkey-c-reference/)\u003cbr/\u003e\n[Toybox.Graphics.Dc Class in Monkey-C](https://developer.garmin.com/connect-iq/api-docs/Toybox/Graphics/Dc.html)\u003cbr/\u003e\u003cbr/\u003e\n7.3. Garmin Forum\n\u003cbr/\u003e\u003cbr/\u003e\n[Garmin Connect-IQ forum](https://forums.garmin.com/developer/connect-iq/)\n\n\u003cbr/\u003e\n\u003c/p\u003e\n\u003c/details\u003e\n\n---\n\n\u003e Footnotes:\n\u003e\n\u003e [^1]: Valid as of October, 2024. Using Visual Studio Code as recommended IDE [^2] by Garmin.\n\u003e [^2]: 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.\n\u003e [^3]: Official documentation available at [Garmin](https://developer.garmin.com/connect-iq/connect-iq-basics/getting-started/).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FAndrewKhassapov%2Fconnect-iq","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FAndrewKhassapov%2Fconnect-iq","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FAndrewKhassapov%2Fconnect-iq/lists"}