Creating an analog Fitbit Ionic Clockface (Part 1)

First of all, you will need to either define a minute hand and an hour hand or use PNG images. We’ll generate the second hand.

Here’s a couple I put together along with a background:


They don’t look great, but they’ll do for our development. You can create your own, better ones.  Download these from above. Save them as: minuteHand.png, hourHand.png & background.png

Start the Fitbit Studio webapp and select an Empty Project, name it and create it. You will need to create new folders and files. Right-click on the Navigation pane on the left and choose the relevant option.

Create the following folders in the Studio: app, resources. In the ‘app’ folder create a new file called: index.js  In the ‘resources’ folder create new files: index.gui, styles.css, widgets.gui  You will need at least these to create your analog watchface. Use the “Blank” template for all new files.

Your Project navigation pane should look like this:

First, drag the above PNG files from your computer into the ‘resources’ folder in the Navigation area. They will upload to the Studio webapp.

Now we can start adding code.  Click on ‘index.js’ under the ‘app’ folder and add this code:

import clock from "clock";

// Update the clock every minute
clock.granularity = "seconds";

Click on ‘index.gui’ under the ‘resources’ folder and add this data:

<svg class="background">
  <defs>
    <section>
      <symbol id="sec-hand">
        <line x1="0" y1="0" x2="0" y2="120" stroke-width="2"/>
      </symbol>
      <symbol id="min-hand">

      </symbol>
      <symbol id="hour-hand">

      </symbol>
      <symbol id="center-dot">
        <circle r="4" fill="#F5F5F5"/>
        <circle r="2" fill="fb-dark-gray"/>
      </symbol>
    </section>
    <symbol id="clock-widget" class='clock-widget' type='clock-widget'
        focusable='false' pointer-events='visible' system-events='all' width='348' height='250' data-size='16'/>
  </defs>
  
  <image id="WatchFace" class="WatchFace" href="background.png" />
  
  <use id="analog-watch-hands" href='#clock-widget' x='0' y='0' >
    <g transform="translate(50%,50%)">
      <g id="second-hand">
        <use href="#sec-hand" class="sec-hand" />
      </g>
      <g id="minute-hand">
        <use href="#min-hand" class="min-hand" />
         <image href="minuteHand.png" width="9" height="125" class="min-hand" /> 
      </g>
      <g id="hour-hand">
        <use href="#hour-hand" class="hour-hand" />
         <image href="hourHand.png" width="13" height="80" class="hour-hand" /> 
      </g>
      <g id="dot">
        <use href="#center-dot" class="center-dot" />
      </g>
    </g>
  </use>
</svg>

Click on ‘styles.css’ under the ‘resources’ folder and add this data:

.background {
  viewport-fill: fb-black;
}

.sec-hand {
  y: -105;
  fill: fb-light-gray;
}

.min-hand {
  x: -4;
  y: -108;
}

.hour-hand {
  x: -6;
  y: -67;
}

Click on ‘widgets.gui’ under the ‘resources’ folder and add this code:

<svg>
  <defs>
    <link rel="stylesheet" href="styles.css" />
    <link rel="import" href="/mnt/sysassets/widgets_common.gui" />
  </defs>
</svg>

You will have already had to enrol in the Developer program and install the developer firmware on your watch, which takes about 30 minutes to do.

Go to the Settings on your watch and tap on Developer Bridge. Once connected you can click the |> RUN button to install and test. The first time you do it, the build will fail and it will create a package.json file for you automatically.  Click on it. You can change the “Display Name” for your clockface/app. I’d change the Type to “App” for now as it’s safer for development. You can change the Type to Clockface once all your bugs are ironed out.  As it’s an App, you need to select a “Wipe Color”.  Pick any color you like.  Don’t worry about the other Permissions for now as they are more advanced.

Hit the |> RUN button again and look at the lovely analog watch on your Fitbit Ionic smartwatch. Easy as 🙂

Here’s the final result:

Analog Clockface
Analog Clockface

 

(Visited 3,642 times, 3 visits today)

This site uses Akismet to reduce spam. Learn how your comment data is processed.