[pebble] Use the "locale" module, add /*LANG*/ placeholders

- Use the "locale" module to retrieve the date info instead of splitting the value of the toString()
- Add some /*LANG*/ here and there
- Some code clean up

apps/pebble/ChangeLog

@@ -1,8 +1,9 @@
-0.01: first release
-0.02: included deployment of pebble.settings.js in apps.json
+0.01: First release
+0.02: Included deployment of pebble.settings.js in apps.json
 0.03: Changed time+calendar font to LECO1976Regular, changed to slanting boot
 0.04: Fix widget hiding code (fix #1046)
 0.05: Fix typo in settings - Purple
-0.06: Added dependancy on Pedometer Widget
-0.07: Fixed icon and ong file to 48x48
-0.08: Added theme options and optional lock symbol
+0.06: Add dependancy on Pedometer Widget
+0.07: Fix icon and ong file to 48x48
+0.08: Add theme options and optional lock symbol
+0.09: Add support for internationalization (LANG placeholders + "locale" module)

apps/pebble/README.md

@@ -1,9 +1,9 @@
 # Pebble
 
-   *a Pebble style clock with configurable background color, to keep the revolution going*      
+*A Pebble style clock with configurable background color, to keep the revolution going*
 
 * Designed specifically for Bangle 2
-* A choice of 6 different background colous through its setting menu. Goto Settings, App/Widget settings, Pebble.
+* A choice of 6 different background colous through its settings menu. Goto *Settings* → *Apps* → *Pebble*.
 * Supports the Light and Dark themes (or set theme independently)
 * Uses pedometer widget to get latest step count
 * Dependant apps are installed when Pebble installs

apps/pebble/metadata.json

@@ -2,7 +2,7 @@
   "id": "pebble",
   "name": "Pebble Clock",
   "shortName": "Pebble",
-  "version": "0.08",
+  "version": "0.09",
   "description": "A pebble style clock to keep the rebellion going",
   "dependencies": {"widpedom":"app"},
   "readme": "README.md",

apps/pebble/pebble.app.js

@@ -27,18 +27,20 @@ const h3 = 7*h/8;
 let batteryWarning = false;
 
 function draw() {
+  let locale = require("locale");
   let date = new Date();
-  let da = date.toString().split(" ");
-  let timeStr = da[4].substr(0,5);
+  let dayOfWeek = locale.dow(date, 1).toUpperCase();
+  let dayOfMonth = date.getDate();
+  let time = locale.time(date, 1);
   const t = 6;
 
-  // turn the warning on once we have dipped below 30%
-  if (E.getBattery() < 30)
+  if (E.getBattery() < 30) {
+    // turn the warning on once we have dipped below 30%
     batteryWarning = true;
-
-  // turn the warning off once we have dipped above 40%
-  if (E.getBattery() > 40)
+  } else if (E.getBattery() > 40) {
+    // turn the warning off once we have dipped above 40%
     batteryWarning = false;
+  }
 
   g.reset();
   g.setColor(settings.bg);
@@ -49,14 +51,10 @@ function draw() {
   g.fillRect(0, h2 - t, w, h2);
 
   // day and steps
-  //if (settings.color == 'Blue' || settings.color == 'Red')
-  //  g.setColor('#fff'); // white on blue or red best contrast
-  //else
-  //  g.setColor('#000'); // otherwise black regardless of theme
   g.setColor(theme.day);
   g.setFontLECO1976Regular22();
   g.setFontAlign(0, -1);
-  g.drawString(da[0].toUpperCase(), w/4, ha); // day of week
+  g.drawString(dayOfWeek, w/4, ha);
   g.drawString(getSteps(), 3*w/4, ha);
 
   // time
@@ -67,7 +65,7 @@ function draw() {
   g.setFontLECO1976Regular42();
   g.setFontAlign(0, -1);
   g.setColor(!batteryWarning ? theme.fg : '#fff');
-  g.drawString(timeStr, w/2, h2 + 8);
+  g.drawString(time, w/2, h2 + 8);
 
   // contrast bar
   g.setColor(theme.fg);
@@ -79,8 +77,8 @@ function draw() {
 
   g.setColor(settings.bg);
   g.drawImage(img, w/2 + ((w/2) - 64)/2, 1, { scale: 1 });
-  drawCalendar(((w/2) - 42)/2, 14, 42, 4, da[2]);
-  
+  drawCalendar(((w/2) - 42)/2, 14, 42, 4, dayOfMonth);
+
   drawLock();
 }
 
@@ -115,8 +113,7 @@ function loadThemeColors() {
   if (settings.theme === "Dark") {
     theme.fg = g.toColor(1,1,1);
     theme.bg = g.toColor(0,0,0);
-  }
-  else if (settings.theme === "Light") {
+  } else if (settings.theme === "Light") {
     theme.fg = g.toColor(0,0,0);
     theme.bg = g.toColor(1,1,1);
   }
@@ -144,14 +141,18 @@ Bangle.on('lock', function(on) {
 
 g.clear();
 Bangle.loadWidgets();
-/*
- * we are not drawing the widgets as we are taking over the whole screen
- * so we will blank out the draw() functions of each widget and change the
- * area to the top bar doesn't get cleared.
- */
-for (let wd of WIDGETS) {wd.draw=()=>{};wd.area="";}
+
+// We are not drawing the widgets as we are taking over the whole screen
+// so we will blank out the draw() functions of each widget and change the
+// area to the top bar doesn't get cleared.
+for (let wd of WIDGETS) {
+  wd.draw=()=>{};
+  wd.area="";
+}
+
 loadSettings();
 loadThemeColors();
 setInterval(draw, 15000); // refresh every 15s
 draw();
+
 Bangle.setUI("clock");

apps/pebble/pebble.settings.js

@@ -1,21 +1,23 @@
 (function(back) {
   const SETTINGS_FILE = "pebble.json";
 
-  // initialize with default settings...
+  // TODO Only the color/theme indices should be written in the settings file so the labels can be translated
+
+  // Initialize with default settings...
   let s = {'bg': '#0f0', 'color': 'Green', 'theme':'System', 'showlock':false}
 
   // ...and overwrite them with any saved values
   // This way saved values are preserved if a new version adds more settings
-  const storage = require('Storage')
+  const storage = require('Storage');
   let settings = storage.readJSON(SETTINGS_FILE, 1) || s;
-  const saved = settings || {}
+  const saved = settings || {};
   for (const key in saved) {
     s[key] = saved[key]
   }
 
   function save() {
-    settings = s
-    storage.write(SETTINGS_FILE, settings)
+    settings = s;
+    storage.write(SETTINGS_FILE, settings);
   }
 
   var color_options = ['Green','Orange','Cyan','Purple','Red','Blue'];
@@ -24,8 +26,8 @@
   
   E.showMenu({
     '': { 'title': 'Pebble Clock' },
-    '< Back': back,
-    'Colour': {
+    /*LANG*/'< Back': back,
+    /*LANG*/'Colour': {
       value: 0 | color_options.indexOf(s.color),
       min: 0, max: 5,
       format: v => color_options[v],
@@ -35,7 +37,7 @@
         save();
       }
     },
-    'Theme': {
+    /*LANG*/'Theme': {
       value: 0 | theme_options.indexOf(s.theme),
       min: 0, max: theme_options.length - 1,
       format: v => theme_options[v],
@@ -44,13 +46,13 @@
         save();
       }
     },
-    'Show Lock': {
+    /*LANG*/'Show Lock': {
       value: settings.showlock,
-      format: () => (settings.showlock ? 'Yes' : 'No'),
+      format: () => (settings.showlock ? /*LANG*/'Yes' : /*LANG*/'No'),
       onchange: () => {
         settings.showlock = !settings.showlock;
         save();
       }
     },
   });
-})
+});