Merge pull request #2012 from awkirk71/master

Sliding Clock: Settings Screen

apps/slidingtext/ChangeLog

@@ -5,4 +5,5 @@
 0.05: BUGFIX: pedometer widget interfered with the clock Font Alignment
 0.06: Use Bangle.setUI for button/launcher handling
 0.07: Support for Bangle.js 2 and themes
-0.08: Removed "wake LCD on face-up"-feature: A watch-face should not set things like "wake LCD on face-up". 
+0.08: Removed "wake LCD on face-up"-feature: A watch-face should not set things like "wake LCD on face-up".
+0.09: Added button control toggle and other live controls to new settings screen.

apps/slidingtext/README.md

@@ -6,22 +6,49 @@ Inspired by the Pebble sliding clock, old times are scrolled off the screen and
 
 ## Usage
 
-### Button 1
+### Bangle 2
+
+The Bangle 2 has Live Controls switched **off** by default so the colour and language have to be changed from the setting Menu.
+Please locate the Sliding Text clock under the setting->apps menu.
+
+With the Live Controls switched on:
+#### Bottom right hand corner press
+press the bottom right hand corner of the screen to change the colour
+
+| White                | Black                | Gray                 | Red                  |
+|----------------------|----------------------|----------------------|----------------------|
+| ![](b2_color-01.jpg) | ![](b2_color-02.jpg) | ![](b2_color-03.jpg) | ![](b2_color-04.jpg) |
+
+#### Top right hand corner press
+press the top right hand corner of the screen to change the language
+
+### Bangle 1
+
+By Default the Live Controls (The side buttons) are switched on, which means the clock face can be controlled dynamically using the 2 side buttons on the right hand side
+
+#### Button 1
 
 Use Button 1 (the top right button) to change the language
 
 |   English   |  English (Traditional)    |  French    | Japanese (Romanji) |
 | ---- | ---- | ---- | ---- |
-|   ![](./format-01.jpg)   | ![](format-02.jpg)     |  ![](format-03.jpg) |![](format-04.jpg)    |
+|   ![](format-01.jpg)   | ![](format-02.jpg)     |  ![](format-03.jpg) |![](format-04.jpg)    |
 |   **German**   |  **Spanish**    |      |  |
-|   ![](./format-05.jpg)   | ![](format-06.jpg)     | |    |
+|   ![](format-05.jpg)   | ![](format-06.jpg)     | |    |
 
-### Button 3
+#### Button 3
 Button 3 (bottom right button) is used to change the colour
 
 |  Black   |  Red    |  Gray    |  Purple    |
 | ---- | ---- | ---- | ---- |
-|   ![](./color-01.jpg) | ![](color-02.jpg) |  ![](color-03.jpg)   | ![](color-04.jpg)   |
+|   ![](b1_color-01.jpg) | ![](b1_color-02.jpg) |  ![](b1_color-03.jpg)   | ![](b1_color-04.jpg)   |
+
+#### Settings
+
+To turn off the Live Controls and change the settings statically please visit the settings menu. The settings menu will allow you to:
+- Colour Scheme
+- Language
+- Live Controls (On or Off)
 
 ## Further Details
 

apps/slidingtext/metadata.json

@@ -1,7 +1,7 @@
 {
   "id": "slidingtext",
   "name": "Sliding Clock",
-  "version": "0.08",
+  "version": "0.09",
   "description": "Inspired by the Pebble sliding clock, old times are scrolled off the screen and new times on. You are also able to change language on the fly so you can see the time written in other languages using button 1. Currently English, French, Japanese, Spanish and German are supported",
   "icon": "slidingtext.png",
   "type": "clock",
@@ -12,6 +12,7 @@
   "allow_emulator": false,
   "storage": [
     {"name":"slidingtext.app.js","url":"slidingtext.js"},
+    {"name":"slidingtext.settings.js","url":"slidingtext.settings.js"},
     {"name":"slidingtext.img","url":"slidingtext-icon.js","evaluate":true},
     {"name":"slidingtext.locale.en.js","url":"slidingtext.locale.en.js"},
     {"name":"slidingtext.locale.en2.js","url":"slidingtext.locale.en2.js"},
@@ -21,5 +22,6 @@
     {"name":"slidingtext.locale.jp.js","url":"slidingtext.locale.jp.js"},
     {"name":"slidingtext.locale.de.js","url":"slidingtext.locale.de.js"},
     {"name":"slidingtext.dtfmt.js","url":"slidingtext.dtfmt.js"}
-  ]
+  ],
+  "data": [{"name": "slidingtext.settings.json"}]
 }

apps/slidingtext/slidingtext.dtfmt.js

@@ -7,6 +7,7 @@ class DateFormatter {
      * to the lines of text on the screen
      */
     name(){return "no name";}
+    shortName(){return "no short name"}
     formatDate(date){
         return ["no","date","defined"];
     }

apps/slidingtext/slidingtext.js

@@ -5,11 +5,17 @@
  */
 
 const color_schemes = [
+  {
+    name: "white",
+    background : [1.0,1.0,1.0],
+    main_bar: [0.0,0.0,0.0],
+    other_bars: [0.1,0.1,0.1],
+  },
   {
     name: "black",
     background : [0.0,0.0,0.0],
     main_bar: [1.0,1.0,1.0],
-    other_bars: [0.85,0.85,0.85],
+    other_bars: [0.9,0.9,0.9],
   },
   {
     name: "red",
@@ -81,7 +87,7 @@ function reset_commands(){
 
 function has_commands(){
   return  command_stack_high_priority.length > 0 ||
-      command_stack_low_priority.lenth > 0;
+      command_stack_low_priority.length > 0;
 }
 
 class ShiftText {
@@ -244,15 +250,19 @@ function setRowDisplays(y, heights) {
     y += heights[i];
   }
 }
-if (g.getHeight()>200)
+
+function bangleVersion(){
+  return (g.getHeight()>200)? 1 : 2;
+}
+
+if (bangleVersion()<2)
   setRowDisplays(50, [40,30,30,30,40]);
 else
   setRowDisplays(34, [35,25,25,25,35]);
 
 function nextColorTheme(){
-  //console.log("next color theme");
   color_scheme_index += 1;
-  if(color_scheme_index >= row_displays.length){
+  if(color_scheme_index > row_displays.length){
     color_scheme_index = 0;
   }
   setColorScheme(color_schemes[color_scheme_index]);
@@ -411,8 +421,7 @@ function draw_clock(){
   reset_commands();
   date = display_time(date);
   console.log("draw_clock:" + last_draw_time.toISOString() + " display:" + date.toISOString());
-  // for debugging only
-  //date.setMinutes(37);
+
   var rows = date_formatter.formatDate(date);
   var display;
   for (var i = 0; i < rows.length; i++) {
@@ -495,7 +504,7 @@ function set_colorscheme(colorscheme_name){
 function set_dateformat(dateformat_name){
   console.log("setting date format:" + dateformat_name);
   for (var i=0; i < date_formatters.length; i++) {
-    if(date_formatters[i].name() == dateformat_name){
+    if(date_formatters[i].shortName() == dateformat_name){
       date_formatter_idx = i;
       date_formatter = date_formatters[date_formatter_idx];
       console.log("match");
@@ -503,6 +512,7 @@ function set_dateformat(dateformat_name){
   }
 }
 
+var enable_live_controls = false;
 const PREFERENCE_FILE = "slidingtext.settings.json";
 /**
  * Called on startup to set the watch to the last preference settings
@@ -510,7 +520,7 @@ const PREFERENCE_FILE = "slidingtext.settings.json";
 function load_settings(){
   var setScheme = false;
   try{
-    settings = require("Storage").readJSON(PREFERENCE_FILE);
+    var settings = require("Storage").readJSON(PREFERENCE_FILE);
     if(settings != null){
       console.log("loaded:" + JSON.stringify(settings));
       if(settings.color_scheme != null){
@@ -520,9 +530,15 @@ function load_settings(){
       if(settings.date_format != null){
         set_dateformat(settings.date_format);
       }
+      if(settings.enable_live_controls == null){
+        settings.enable_live_controls = (bangleVersion() <= 1);
+      }
+      enable_live_controls = settings.enable_live_controls;
     } else {
       console.log("no settings to load");
+      enable_live_controls = (bangleVersion() <= 1);
     }
+    console.log("enable_live_controls=" + enable_live_controls);
   } catch(e){
     console.log("failed to load settings:" + e);
   }
@@ -536,24 +552,30 @@ function load_settings(){
  */
 function save_settings(){
   var settings = {
-    date_format : date_formatter.name(),
+    date_format : date_formatter.shortName(),
     color_scheme : color_schemes[color_scheme_index].name,
+    enable_live_controls: enable_live_controls
   };
   console.log("saving:" + JSON.stringify(settings));
   require("Storage").writeJSON(PREFERENCE_FILE,settings);
 }
 
 function button1pressed() {
-  changeFormatter();
-  save_settings();
+  console.log("button1pressed");
+  if (enable_live_controls) {
+    changeFormatter();
+    save_settings();
+  }
 }
 
 function button3pressed() {
   console.log("button3pressed");
-  nextColorTheme();
-  reset_clock(true);
-  draw_clock();
-  save_settings();
+  if (enable_live_controls) {
+    nextColorTheme();
+    reset_clock(true);
+    draw_clock();
+    save_settings();
+  }
 }
 
 // The interval reference for updating the clock

apps/slidingtext/slidingtext.locale.de.js

@@ -66,6 +66,7 @@ function germanMinsToText(mins) {
 class GermanDateFormatter extends DateFormatter {
     constructor() { super();}
     name(){return "German";}
+    shortName(){return "de"}
     formatDate(date){
         var mins = date.getMinutes();
         var hourOfDay = date.getHours();

apps/slidingtext/slidingtext.locale.en.js

@@ -5,6 +5,7 @@ const numberToText = require("slidingtext.utils.en.js").numberToText;
 class EnglishDateFormatter extends DateFormatter {
     constructor() { super();}
     name(){return "English";}
+    shortName(){return "en"}
     formatDate(date){
         var hours_txt = hoursToText(date.getHours());
         var mins_txt = numberToText(date.getMinutes());

apps/slidingtext/slidingtext.locale.en2.js

@@ -7,6 +7,7 @@ class EnglishTraditionalDateFormatter extends DateFormatter {
         super();
     }
     name(){return "English (Traditional)";}
+    shortName(){return "en2"}
     formatDate(date){
         var mins = date.getMinutes();
         var hourOfDay = date.getHours();

apps/slidingtext/slidingtext.locale.es.js

@@ -47,6 +47,7 @@ function spanishMinsToText(mins){
 class SpanishDateFormatter extends DateFormatter {
     constructor() { super();}
     name(){return "Spanish";}
+    shortName(){return "es"}
     formatDate(date){
         var mins = date.getMinutes();
         var hourOfDay = date.getHours();

apps/slidingtext/slidingtext.locale.fr.js

@@ -31,6 +31,7 @@ function frenchHeures(hours){
 class FrenchDateFormatter extends DateFormatter {
     constructor() { super(); }
     name(){return "French";}
+    shortName(){return "fr"}
     formatDate(date){
         var hours = frenchHoursToText(date.getHours());
         var heures = frenchHeures(date.getHours());

apps/slidingtext/slidingtext.locale.jp.js

@@ -61,6 +61,7 @@ function japaneseMinsToText(mins){
 class JapaneseDateFormatter extends DateFormatter {
     constructor() { super(); }
     name(){return "Japanese (Romanji)";}
+    shortName(){return "jp"}
     formatDate(date){
         var hours_txt = japaneseHoursToText(date.getHours());
         var mins_txt = japaneseMinsToText(date.getMinutes());

apps/slidingtext/slidingtext.settings.js

@@ -0,0 +1,65 @@
+(function(back) {
+    const PREFERENCE_FILE = "slidingtext.settings.json";
+    var settings = Object.assign({},
+        require('Storage').readJSON(PREFERENCE_FILE, true) || {});
+    // the screen controls are defaulted on for a bangle 1 and off for a bangle 2
+    if(settings.enable_live_controls == null){
+        settings.enable_live_controls = (g.getHeight()> 200);
+    }
+    console.log("loaded:" + JSON.stringify(settings));
+
+    const LANGUAGES_FILE = "slidingtext.languages.json";
+    const LANGUAGES_DEFAULT = ["en","en2"];
+    var locales = null;
+    try {
+        locales = require("Storage").readJSON(LANGUAGES_FILE);
+    } catch(e) {
+        console.log("failed to load languages:" + e);
+    }
+    if(locales == null || locales.length == 0){
+        locales = LANGUAGES_DEFAULT;
+        console.log("defaulting languages to locale:" + locales);
+    }
+
+    function writeSettings() {
+        console.log("saving:" + JSON.stringify(settings));
+        require('Storage').writeJSON(PREFERENCE_FILE, settings);
+    }
+
+    // Helper method which uses int-based menu item for set of string values
+    function stringItems(startvalue, writer, values) {
+        return {
+            value: (startvalue === undefined ? 0 : values.indexOf(startvalue)),
+            format: v => values[v],
+            min: 0,
+            max: values.length - 1,
+            wrap: true,
+            step: 1,
+            onchange: v => {
+                writer(values[v]);
+                writeSettings();
+            }
+        };
+    }
+
+    // Helper method which breaks string set settings down to local settings object
+    function stringInSettings(name, values) {
+        return stringItems(settings[name], v => settings[name] = v, values);
+    }
+
+    // Show the menu
+    E.showMenu({
+        "" : { "title" : "Sliding Text" },
+        "< Back" : () => back(),
+        "Colour": stringInSettings("color_scheme", ["white", "black", "red","grey","purple","blue"]),
+        "Languages": stringInSettings("date_format", locales),
+        "Live Control": {
+            value: (settings.enable_live_controls !== undefined ? settings.enable_live_controls : true),
+            format: v => v ? "On" : "Off",
+            onchange: v => {
+                settings.enable_live_controls = v;
+                writeSettings();
+            }
+        },
+    });
+})