Initial working version

app/index.js

@@ -0,0 +1,74 @@
+import clock from 'clock';
+import document from 'document';
+import { today } from 'user-activity';
+import { HeartRateSensor } from "heart-rate";
+import { preferences } from 'user-settings';
+import { language_names, weekday_names, month_names } from './localDates'
+import * as util from '../common/utils';
+
+// Update the clock every minute
+clock.granularity = 'seconds';
+
+let hrm = new HeartRateSensor();
+let lastReading = 0;
+
+hrm.onreading = () => {
+  heartRate_text.text = (hrm.timestamp === lastReading) ? "--" : hrm.heartRate;
+
+  lastReading = hrm.timestamp;
+  hrm.stop();
+};
+
+// clock face
+const digit_h1 = document.getElementById('digit_h1');
+const digit_h2 = document.getElementById('digit_h2');
+const digit_m1 = document.getElementById('digit_m1');
+const digit_m2 = document.getElementById('digit_m2');
+
+// date widget
+const date_dayOfWeek = document.getElementById('date_dayOfWeek');
+const date_dayOfMonth = document.getElementById('date_dayOfMonth');
+const date_Month = document.getElementById('date_Month');
+
+// steps widget
+const steps_text = document.getElementById('steps_text');
+
+// calories widget
+const calories_text = document.getElementById('calories_text');
+
+// heart widget
+const heartRate_text = document.getElementById('heartRate_text');
+
+// stairs widget
+const stairs_text = document.getElementById('stairs_text');
+
+
+// Update the <text> element every tick with the current time
+clock.ontick = (evt) => {
+  const now = evt.date;
+  const hours = util.zeroPad(
+    (preferences.clockDisplay === '12h')
+      ? now.getHours()
+      : now.getHours() % 12 || 12
+  );
+
+  const mins = util.zeroPad(now.getMinutes());
+
+  digit_h1.href = `digits/default/${hours[0]}.png`;
+  digit_h2.href = `digits/default/${hours[1]}.png`;
+  digit_m1.href = `digits/default/${mins[0]}.png`;
+  digit_m2.href = `digits/default/${mins[1]}.png`;
+
+
+  // while we're at it, update the date widget
+  date_dayOfWeek.text = weekday_names['en_US'][now.getDay()];
+  date_dayOfMonth.text = now.getDate();
+  date_Month.text = month_names['en_US'][now.getMonth()];
+
+  // let's do the others
+  steps_text.text = (today.local.steps.toLocaleString('en_US') || 0);
+  calories_text.text = (today.local.calories.toLocaleString('en_US') || 0);
+  stairs_text.text = (today.local.elevationGain || 0);
+
+  hrm.start();
+}

app/localDates.js

@@ -0,0 +1,125 @@
+const language_names = {
+    "en_US": ["English", "English"],
+    "fr_FR": ["French", "Français"],
+    "de_DE": ["German", "Deutsch"],
+    "es_ES": ["Spanish", "Español"],
+    "it_IT": ["Italian", "Italiano"],
+    "nl_NL": ["Dutch", "Nederlands"],
+    "tr_TR": ["Turkish", "Türkçe"],
+    "cs_CZ": ["Czech", "Čeština"],
+    "pt_BR": ["Portuguese", "Português"],
+    "el_GR": ["Greek", "Ελληνικά"],
+    "sv_SE": ["Swedish", "Svenska"],
+    "pl_PL": ["Polish", "Polski"],
+    "sk_SK": ["Slovak", "Slovenčina"],
+    "vi_VN": ["Vietnamese", "Tiếng Việt"],
+    "ro_RO": ["Romanian", "Română"],
+    "ca_CA": ["Catalan", "Català"],
+    "no_NO": ["Norwegian", "Norsk"],
+    "ru_RU": ["Russian", "Русский"],
+    "et_EE": ["Estonian", "Eesti"],
+    "eu_ES": ["Basque", "Euskara"],
+    "fi_FI": ["Finnish", "Suomi"],
+    "da_DK": ["Danish", "Dansk"],
+    "lt_LT": ["Lithuanian", "Lietuviškai"],
+    "sl_SI": ["Slovenian", "Slovenščina"],
+    "hu_HU": ["Hungarian", "Magyar"],
+    "hr_HR": ["Croatian", "Hrvatski"],
+    "ga_IE": ["Irish", "Gaeilge"],
+    "lv_LV": ["Latvian", "Latviešu"],
+    "sr_SP": ["Serbian", "Srpski"],
+    "zh_CN": ["Chinese", "中文"],
+    "id_ID": ["Indonesian", "Bahasa Indonesia"],
+    "uk_UA": ["Ukranian", "Українська"],
+    "cy_GB": ["Welsh", "Cymraeg"],
+    "gl_ES": ["Gallacian", "Galego"],
+    "jp_JP": ["Japanese", "日本語"],
+    "ko_KR": ["Korean", "한국어"],
+    "he_IL": ["Hebrew", "עברית"],
+    "ar_AR": ["Arabic", "العربية"]
+};
+
+const weekday_names = {
+	"en_US": ["SUN", "MON", "TUE", "WED", "THU", "FRI", "SAT"],
+	"fr_FR": ["DIM", "LUN", "MAR", "MER", "JEU", "VEN", "SAM"],
+	"de_DE": ["SO",  "MO",  "DI",  "MI",  "DO",  "FR",  "SA"],
+	"es_ES": ["DOM", "LUN", "MAR", "MIÉ", "JUE", "VIE", "SÁB"],
+	"it_IT": ["DOM", "LUN", "MAR", "MER", "GIO", "VEN", "SAB"],
+	"nl_NL": ["ZO",  "MA",  "DI",  "WO",  "DO",  "VR",  "ZA"],
+	"tr_TR": ["PAZ", "PTS", "SAL", "ÇAR", "PER", "CUM", "CTS"],
+	"cs_CZ": ["NE",  "PO",  "ÚT",  "ST",  "ČT",  "PÁ",  "SO"],
+	"pt_BR": ["DOM", "SEG", "TER", "QUA", "QUI", "SEX", "SÁB"],
+	"el_GR": ["ΚΥΡ", "ΔΕΥ", "ΤΡΙ", "ΤΕΤ", "ΠΕΜ", "ΠΑΡ", "ΣΑΒ"],
+	"sv_SE": ["SÖN", "MÅN", "TIS", "ONS", "TOR", "FRE", "LÖR"],
+	"pl_PL": ["NDZ", "PON", "WTO", "ŚRO", "CZW", "PIĄ", "SOB"],
+	"sk_SK": ["NE", "PO", "UT", "ST", "ŠT", "PI", "SO"],
+	"vi_VN": ["CN", "T2", "T3", "T4", "T5", "T6", "T7"],
+	"ro_RO": ["DUM", "LUN", "MAR", "MIE", "JOI", "VIN", "SÂM"],
+	"ca_CA": ["DG", "DL", "DT", "DC", "DJ", "DV", "DS"],
+	"no_NO": ["SØN", "MAN", "TIR", "ONS", "TOR", "FRE", "LØR"],
+	"ru_RU": ["ВС", "ПН", "ВТ", "СР", "ЧТ", "ПТ", "СБ"],
+	"et_EE": ["P", "E", "T", "K", "N", "R", "L"],
+	"eu_ES": ["IG", "AL", "AR", "AZ", "OG", "OL", "LR"],
+	"fi_FI": ["SU", "MA", "TI", "KE", "TO", "PE", "LA"],
+	"da_DK": ["SØN", "MAN", "TIR", "ONS", "TOR", "FRE", "LØR"],
+	"lt_LT": ["SEK", "PIR", "ANT", "TRE", "KET", "PEN", "ŠEŠ"],
+	"sl_SI": ["NED", "PON", "TOR", "SRE", "ČET", "PET", "SOB"],
+	"hu_HU": ["VAS", "HÉT", "KED", "SZE", "CSÜ", "PÉN", "SZO"],
+	"hr_HR": ["NED", "PON", "UTO", "SRE", "ČET", "PET", "SUB"],
+	"ga_IE": ["DOM", "LUA", "MÁI", "CÉA", "DÉA", "AOI", "SAT"],
+	"lv_LV": ["SVĒ", "PIR", "OTR", "TRE", "CET", "PIE", "SES"],
+	"sr_SP": ["NE", "PO", "UT", "SR", "ČE", "PE", "SU"],
+	"zh_CN": ["日", "一", "二", "三", "四", "五", "六"],
+	"id_ID": ["MIN", "SEN",  "SEL", "RAB", "KAM", "JUM", "SAB"],
+	"uk_UA": ["НД", "ПН", "ВТ",  "СР", "ЧТ", "ПТ", "СБ"],
+	"cy_GB": ["SUL", "LLN", "MAW", "MER", "IAU", "GWE", "SAD"],
+	"gl_ES": ["DOM", "LUN", "MAR", "MER", "XOV", "VEN", "SAB"],
+	"jp_JP": ["日", "月", "火", "水", "木", "金", "土"],
+	"ko_KR": ["일", "월", "화", "수", "목", "금", "토"],
+	"he_IL": ["א", "ב", "ג", "ד", "ה", "ו", "ש"],
+  "ar_AR": ["أحد", "إثن", "ثلاث", "أرب", "خمس", "جمع", "سبت"]
+};
+
+const month_names = {
+    "en_US":["JAN","FEB","MAR","APR","MAY","JUN","JUL","AUG","SEP","OCT","NOV","DEC"],
+    "fr_FR":["JAN","FÉV","MAR","AVR","MAI","JUI","JUL","AOÛ","SEP","OCT","NOV","DÉC"],
+    "de_DE":["JAN","FEB","MÄR","APR","MAI","JUN","JUL","AUG","SEP","OKT","NOV","DEZ"],
+    "es_ES":["ENE","FEB","MAR","ABR","MAY","JUN","JUL","AGO","SEP","OCT","NOV","DIC"],
+    "it_IT":["GEN","FEB","MAR","APR","MAG","GIU","LUG","AGO","SET","OTT","NOV","DIC"],
+    "nl_NL":["JAN","FEB","MRT","APR","MEI","JUN","JUL","AUG","SEP","OKT","NOV","DEC"],
+    "tr_TR":["OCA","ŞUB","MAR","NİS","MAY","HAZ","TEM","AĞU","EYL","EKİ","KAS","ARA"],
+    "cs_CZ":["LED","ÚNO","BŘE","DUB","KVĚ","ČRV","ČVC","SRP","ZÁŘ","ŘÍJ","LIS","PRO"],
+    "pt_BR":["JAN","FEV","MAR","ABR","MAI","JUN","JUL","AGO","SET","OUT","NOV","DEZ"],
+    "el_GR":["ΙΑΝ","ΦΕΒ","ΜΑΡ","ΑΠΡ","ΜΑΪ","ΙΟΝ","ΙΟΛ","ΑΥΓ","ΣΕΠ","ΟΚΤ","ΝΟΕ","ΔΕΚ"],
+    "sv_SE":["JAN","FEB","MAR","APR","MAJ","JUN","JUL","AUG","SEP","OKT","NOV","DEC"],
+    "pl_PL":["STY","LUT","MAR","KWI","MAJ","CZE","LIP","SIE","WRZ","PAŹ","LIS","GRU"],
+    "sk_SK":["JAN","FEB","MAR","APR","MÁJ","JÚN","JÚL","AUG","SEP","OKT","NOV","DEC"],
+    "vi_VN":["Th1","Th2","Th3","Th4","Th5","Th6","Th7","Th8","Th9","T10","T11","T12"],
+    "ro_RO":["IAN","FEB","MAR","APR","MAI","IUN","IUL","AUG","SEP","OCT","NOI","DEC"],
+    "ca_CA":["GEN","FEB","MAR","ABR","MAI","JUN","JUL","AGO","SET","OCT","NOV","DES"],
+    "no_NO":["JAN","FEB","MAR","APR","MAI","JUN","JUL","AUG","SEP","OKT","NOV","DES"],
+    "ru_RU":["ЯНВ","ФЕВ","МАР","АПР","МАЙ","ИЮН","ИЮЛ","АВГ","СЕН","ОКТ","НОЯ","ДЕК"],
+    "et_EE":["JAN","VEB","MÄR","APR","MAI","JUN","JUL","AUG","SEP","OKT","NOV","DET"],
+    "eu_ES":["URT","OTS","MAR","API","MAI","EKA","UZT","ABU","IRA","URR","AZA","ABE"],
+    "fi_FI":["TAM","HEL","MAA","HUH","TOU","KES","HEI","ELO","SYY","LOK","MAR","JOU"],
+    "da_DK":["JAN","FEB","MAR","APR","MAJ","JUN","JUL","AUG","SEP","OKT","NOV","DEC"],
+    "lt_LT":["SAU","VAS","KOV","BAL","GEG","BIR","LIE","RUG","RGS","SPA","LAP","GRU"],
+    "sl_SI":["JAN","FEB","MAR","APR","MAJ","JUN","JUL","AVG","SEP","OKT","NOV","DEC"],
+    "hu_HU":["JAN","FEB","MÁR","ÁPR","MÁJ","JÚN","JÚL","AUG","SZE","OKT","NOV","DEC"],
+    "hr_HR":["SIJ","VEL","OŽU","TRA","SVI","LIP","SRP","KOL","RUJ","LIS","STU","PRO"],
+    "ga_IE":["EAN","FEA","MÁR","AIB","BEA","MEI","IÚI","LÚN","MFÓ","DFÓ","SAM","NOL"],
+    "lv_LV":["JAN","FEB","MAR","APR","MAI","JŪN","JŪL","AUG","SEP","OKT","NOV","DEC"],
+    "sr_SP":["JAN","FEB","MAR","APR","MAJ","JUN","JUL","AVG","SEP","OKT","NOV","DEC"],
+    "zh_CN":["1","2","3","4","5","6","7","8","9","10","11","12"],
+    "id_ID":["JAN","FEB","MAR","APR","MEI","JUN","JUL","AGU","SEP","OKT","NOV","DES"],
+    "uk_UA":["СІЧ","ЛЮТ","БЕР","КВІ","ТРА","ЧЕР","ЛИП","СЕР","ВЕР","ЖОВ","ЛИС","ГРУ"],
+    "cy_GB":["ION","CHW","MAW","EBR","MAI","MEH","GOR","AWS","MED","HYD","TCH","RHA"],
+    "gl_ES":["XAN","FEB","MAR","ABR","MAI","XUÑ","XUL","AGO","SET","OUT","NOV","NAD"],
+    "jp_JP":["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"],
+    "ko_KR":["1월","2월","3월","4월","5월","6월","7월","8월","9월","10월","11월","12월"],
+    "he_IL":["ינו","פבר","מרץ","אפר","מאי","יונ","יול","אוג","ספט","אוק","נוב","דצמ"],
+    "ar_AR":["JAN","FEB","MAR","APR","MAY","JUN","JUL","AUG","SEP","OCT","NOV","DEC"]
+};
+
+
+export { language_names, weekday_names, month_names };

common/utils.js

@@ -0,0 +1,9 @@
+// Add zero in front of numbers < 10
+export function zeroPad(i) {
+  if (i < 10) {
+    i = "0" + i;
+  }
+  return "" + i;
+}
+
+// export function digi

package.json

@@ -0,0 +1,55 @@
+{
+  "fitbit": {
+    "appUUID": "5aff7cf5-8384-4a5b-b379-ac8574e92a60",
+    "appType": "clockface",
+    "appDisplayName": "TimeStyle",
+    "iconFile": "resources/icon.png",
+    "wipeColor": "",
+    "requestedPermissions": [
+      "access_activity",
+      "access_user_profile",
+      "access_heart_rate",
+      "access_location",
+      "access_internet"
+    ],
+    "buildTargets": [
+      "higgs",
+      "meson"
+    ],
+    "i18n": {
+      "en": {
+        "name": "TimeStyle"
+      },
+      "de": {
+        "name": "TimeStyle"
+      },
+      "es": {
+        "name": "TimeStyle"
+      },
+      "fr": {
+        "name": "TimeStyle"
+      },
+      "it": {
+        "name": "TimeStyle"
+      },
+      "ja": {
+        "name": "TimeStyle"
+      },
+      "ko": {
+        "name": "TimeStyle"
+      },
+      "nl": {
+        "name": "TimeStyle"
+      },
+      "sv": {
+        "name": "TimeStyle"
+      },
+      "zh-cn": {
+        "name": "TimeStyle"
+      },
+      "zh-tw": {
+        "name": "TimeStyle"
+      }
+    }
+  }
+}

resources/index.gui

@@ -0,0 +1,78 @@
+<svg class="background">
+  <svg id="clock_area" x="0" y="0" width="50%" height="100%">
+    <image id="digit_h1" href="digits/default/0.png"
+            width="90" height="123"
+            x="3" y="0"
+            fill="#ff5500" load="sync" />
+    <image id="digit_h2" href="digits/default/6.png"
+            width="90" height="123"
+            x="$-5" y="0"
+            fill="#ff5500" load="sync" />
+    <image id="digit_m1" href="digits/default/2.png"
+            width="90" height="123"
+            x="3" y="100%-123"
+            fill="#ff5500" load="sync" />
+    <image id="digit_m2" href="digits/default/3.png"
+            width="90" height="123"
+            x="$-5" y="100%-123"
+            fill="#ff5500" load="sync" />
+  </svg>
+  <!--       <rect y="0" x="0" width="100%" height="100%" fill="#00ff00" /> -->
+
+
+  <svg id="widebar" x="50%" y="0" width="50%-60" height="100%">
+    <!-- Steps Widget -->
+    <svg x="0" y="5" width="100%" height="54">
+      <image href="icons_invert/icon_steps.png"
+             width="48" height="48"
+             x="50%-24" y="-12" 
+             fill="#ff5500"
+             load="sync"/>
+      <text id="steps_text" class="widget_text" x="50%" y="53" fill="#ffffff">0</text>
+    </svg>
+
+    <!-- Calories Widget -->
+    <svg x="0" y="85" width="100%" height="69">
+      <image href="icons_invert/icon_calories.png"
+             width="48" height="48"
+             x="50%-24" y="-4"
+             fill="#ff5500" load="sync"/>
+      <text id="calories_text" class="widget_text" x="50%" y="68" fill="#ffffff">--</text>
+    </svg>
+
+    <!-- Heart Rate Widget -->
+    <svg x="0" y="100%-68" width="100%" height="62">
+      <image href="icons_invert/icon_heart.png"
+             width="48" height="48"
+             x="50%-24" y="-7"
+             fill="#ff5500" load="sync"/>
+      <text id="heartRate_text" class="widget_text" x="50%" y="61" fill="#ffffff">--</text>
+    </svg>
+  </svg>
+
+  <svg id="sidebar" x="100%-60" y="0" width="60" height="100%">
+    <rect y="0" x="0" width="100%" height="100%" fill="#ff5500" />
+
+    <!--  Weather Widget   -->
+<!--     <svg x="0" y="5" width="100%" height="74">
+      <image href="icons/icon_partly_cloudy.png" width="48" height="48" x="50%-24" y="0"/>
+      <text class="widget_text" x="50%" y="73">75&deg;</text>
+    </svg> -->
+
+        <!--  Stairs Widget   -->
+    <svg x="0" y="5" width="100%" height="74">
+      <image href="icons/icon_stairs.png" width="48" height="48" x="50%-24" y="0"/>
+      <text id="stairs_text" class="widget_text" x="50%" y="73">0</text>
+    </svg>
+
+    <!--  Date Widget    -->
+    <svg x="0" y="100%-103" width="100%" height="97">
+      <text id="date_dayOfWeek" class="widget_text" x="50%" y="20"></text>
+      <image href="icons/icon_calendar.png" width="48" height="48" x="50%-24" y="24"/>
+      <text id="date_dayOfMonth" class="widget_text" x="50%" y="62"></text>
+      <text id="date_Month" class="widget_text" x="50%" y="96"></text>
+    </svg>
+
+  </svg>
+
+</svg>

resources/styles.css

@@ -0,0 +1,26 @@
+.background {
+  viewport-fill: black;
+  width: 100%;
+  height: 100%;
+
+}
+
+.widget_text {
+  font-family: Fabrikat-Bold;
+  font-size: 28;
+  text-length: 12;
+  text-anchor: middle;
+  fill: black;
+}
+
+#myLabel {
+  font-family: Fabrikat-Bold;
+  font-size: 80;
+  text-length: 32;
+  text-anchor: middle;
+  x: 50%;
+  y: 50%;
+  fill: white;
+}
+
+/* .test { fill: #3fc0fc; opacity: 1; } */

resources/widgets.gui

@@ -0,0 +1,6 @@
+<svg>
+  <defs>
+    <link rel="stylesheet" href="styles.css" />
+    <link rel="import" href="/mnt/sysassets/widgets_common.gui" />
+  </defs>
+</svg>