changes fonts

app/index.js

@@ -7,17 +7,27 @@ import { display } from "display";
 import { battery } from 'power';
 
 import * as util from "../common/utils";
+import { FitFont } from 'fitfont'
 
 clock.granularity = "minutes";
 
-const clockHoursLabel = document.getElementById("clockHoursLabel");
-const clockMinutesLabel = document.getElementById("clockMinutesLabel");
-// const clockShadow = document.getElementById("clockShadow");
 const batteryLabel = document.getElementById("batteryLabel");
 const heartRateLabel = document.getElementById("heartRateLabel");
 const calendarLabel = document.getElementById("calendarLabel");
 const stepsLabel = document.getElementById("stepsLabel");
 
+const clockHoursLabel = new FitFont({
+    id: 'clockHoursLabel',
+    font: 'PT_Sans_Narrow_80',
+    halign: 'middle'
+});
+
+const clockMinutesLabel = new FitFont({
+    id: 'clockMinutesLabel',
+    font: 'PT_Sans_Narrow_60',
+    halign: 'middle'
+});
+
 clock.ontick = (event) => {
 
     let currentDate = event.date;

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "reader-face",
+  "name": "reading-girl-clock-face",
   "version": "0.1.0",
   "devDependencies": {
     "@fitbit/sdk": "~4.2.0",
@@ -8,7 +8,7 @@
   "fitbit": {
     "appUUID": "5656b78f-0aaa-4bcf-98f6-0701c363f2fe",
     "appType": "clockface",
-    "appDisplayName": "Reader Face",
+    "appDisplayName": "reading-girl-clock-face",
     "iconFile": "resources/icon.png",
     "wipeColor": "#ffffff",
     "requestedPermissions": [
@@ -25,5 +25,8 @@
   },
   "scripts": {
     "build": "fitbit-build"
+  },
+  "dependencies": {
+    "fitfont": "^1.3.3"
   }
 }

resources/fitfont.gui

@@ -0,0 +1,9 @@
+<defs>
+  <!-- The symbol for a character -->
+  <symbol id="fitfont-char">
+    <image class="fitfont-char" load="sync" x="0" y="0"/>
+  </symbol>
+
+  <!-- The custom font symbol -->
+  <symbol id="fitfont" />
+</defs>

resources/index.gui

@@ -4,24 +4,35 @@
   <image id="background-image" href="images/lesen.png" />
 
   <!-- time and shadow-->
-  <text id="clockHoursLabel" opacity="0.9" />
-  <text id="clockMinutesLabel" class="label" opacity="0.5" />
-  <!-- <text id="clockShadow" opacity="0.4" /> -->
+  <!-- <text id="clockHoursLabel" opacity="0.9" />
+  <text id="clockMinutesLabel" class="label" opacity="0.5" /> -->
+
+  <!-- hours label -->
+  <use href="#fitfont" id="clockHoursLabel">
+    <use href="#fitfont-char" />
+    <use href="#fitfont-char" />
+  </use>
+
+  <!-- minutes label -->
+  <use href="#fitfont" id="clockMinutesLabel">
+    <use href="#fitfont-char" />
+    <use href="#fitfont-char" />
+  </use>
 
   <!-- battery information -->
-  <image id="batteryImage" class="sensor" href="images/battery.png" />
-  <text id="batteryLabel" class="label" />
+  <image id="batteryImage" x="9" y="9" class="sensor" href="images/battery.png" />
+  <text id="batteryLabel" x="40" y="26" class="label" />
 
   <!-- heart rate information -->
-  <image id="heartRateImage" class="sensor" href="images/heart.png" />
-  <text id="heartRateLabel" class="label" />
+  <image id="heartRateImage" x="9" y="35" class="sensor" href="images/heart.png" />
+  <text id="heartRateLabel" x="40" y="52" class="label" />
 
   <!-- steps information -->
-  <image id="stepsImage" class="sensor" href="images/steps.png" />
-  <text id="stepsLabel" class="label" />
+  <image id="stepsImage" x="9" y="60" class="sensor" href="images/steps.png" />
+  <text id="stepsLabel" x="40" y="77" class="label" />
 
   <!-- calendar information -->
-  <image id="calendarImage" class="sensor" href="images/calendar.png" />
-  <text id="calendarLabel" class="label" />
+  <image id="calendarImage" x="9" y="85" class="sensor" href="images/calendar.png" />
+  <text id="calendarLabel" x="40" y="102" class="label" />
 
 </svg>

resources/styles.css

@@ -1,84 +1,25 @@
 
 #clockHoursLabel {
-  font-size: 120;
-  font-family: Colfax-Bold;
-  text-length: 32;
-  text-anchor: middle;
   x: 55%;
   y: 90%;
   fill: white;
   z-index: 999;
 }
 
 #clockMinutesLabel {
-  font-size: 95;
-  font-family: Colfax-Bold;
-  text-length: 32;
-  text-anchor: middle;
-  x: 70%;
+  x: 77%;
   y: 95%;
-  fill: black;
+  fill: white;
 }
 
-/* #clockShadow {
-  font-size: 90;
-  font-family: Colfax-Bold;
-  text-length: 32;
-  text-anchor: middle;
-  x: 50% + 1;
-  y: 90% + 1;
-  fill: black;
-} */
-
 .sensor {
   width: 24;
   height: 24;
 }
 
 .label {
   text-length: 100;
-  font-size: 20;
-  text-anchor: start;
+  font-size: 16;
   font-family: Colfax-Bold;
   fill: white;
 }
-
-#batteryImage {
-  x: 9;
-  y: 9;
-}
-
-#batteryLabel {
-  x: 40;
-  y: 29;
-}
-
-#heartRateImage {
-  x: 9;
-  y: 35;
-}
-
-#heartRateLabel {
-  x: 40;
-  y: 55;
-}
-
-#calendarImage {
-  x: 9;
-  y: 85;
-}
-
-#calendarLabel {
-  x: 40;
-  y: 105;
-}
-
-#stepsImage {
-  x: 9;
-  y: 60;
-}
-
-#stepsLabel {
-  x: 40;
-  y: 80;
-}

resources/widgets.gui

@@ -2,5 +2,7 @@
   <defs>
     <link rel="stylesheet" href="styles.css" />
     <!-- <link rel="import" href="/mnt/sysassets/system_widget.defs" /> -->
+    <!-- import FitFont ui file -->
+    <link rel="import" href="fitfont.gui" />
   </defs>
 </svg>