Settings and logs

- Added settings to select number and bubble
- Modified logs

apps/rings/ChangeLog

@@ -1 +1,2 @@
 0.01: First rev. Could use a little optimization love.
+0.02: Added battery ring, bubble background for numbers, settings and little optimaztion love.

apps/rings/app.js

@@ -2,21 +2,33 @@
 // for Bangle.js 2 
 // by Amos Blanton
 // Remixed from / inspired by Rinkulainen watch face by Jukio Kallio
-
+// 2023: pinq- added new futures
 // To Do:
 // Make Month / year text buffer 1/2 size
 // Optimize text positioning transforms 
 
-const watch = { 
-  x:0, y:0, w:0, h:0, 
+
+const watch = {  
   color:"#000000", 
-  dateRing : { size:109, weight:20, color:"#00FF00", numbers: true, range: 30 , bubble:false},
+  dateRing : { size:109, weight:20, color:"#00FF00", numbers: true, range: 30 , bubble:true},
   hourRing : { size:82, weight:20, color:"#00FFFF", numbers: true, range: 12, bubble:true},
   minuteRing : { size:55, weight:18, color:"#FFFF00", numbers: false, range: 60, bubble:false},
   batteryRing: { size :30, weight:10, color:"#ff3300", numbers: false, range: 100, bubble:false},
   screen : { width:g.getWidth(), height:g.getHeight(), centerX: g.getWidth() *0.5, centerY: g.getHeight() * 0.5, cursor: 14, font:"6x8:2" },
 };
 
+var settings = require('Storage').readJSON("rings.settings.json", true) || {};
+
+if(settings.minute){
+  watch.minuteRing.numbers = settings.minute.numbers;
+  watch.minuteRing.bubble = settings.minute.bubble;
+  watch.hourRing.numbers = settings.hour.numbers;
+  watch.hourRing.bubble = settings.hour.bubble;
+  watch.dateRing.numbers = settings.date.numbers;
+  watch.dateRing.bubble = settings.date.bubble;
+}
+
+delete settings;
 const month= ["JANUARY","FEBRUARY","MARCH","APRIL","MAY","JUNE","JULY",
             "AUGUST","SEPTEMBER","OCTOBER","NOVEMBER","DECEMBER"];
 
@@ -46,33 +58,6 @@ function queueDraw() {
   }, wait - (Date.now() % wait));
 }
 
-// Draws a time circle (date, hours, minutes)
-function drawTimeCircle(color, size, weight, range, value ) {  
-  // variables for vertex transformations and positioning time
-  var tver, tobj, tran;
-  var ttime = (value / range) * (Math.PI * 2);
-
-  // draw circle and line
-  g.setColor(color).fillCircle(watch.screen.centerX, watch.screen.centerY, size);
-  g.setColor("#000000").fillCircle(watch.screen.centerX, watch.screen.centerY, size - weight);
-
-  tver = [-watch.screen.cursor, 0, watch.screen.cursor, 0, watch.screen.cursor, -size*1.01, -watch.screen.cursor, -size*1.05];
-
-  tobj = { x:watch.screen.centerX, y:watch.screen.centerY, scale:1, rotate:ttime };
-  tran = g.transformVertices(tver, tobj);
-  g.fillPoly(tran);
-    
-  // Draw numbers
-  g.setFontAlign(0,0).setFont(watch.screen.font, 2).setColor(1,1,1);
-  
-  // size - 21 is the right offset to get the numbers aligned in the circle.
-  tver = [-1, 0, 1, 0, 1, -size, -1, -(size -21)];
-  tran = g.transformVertices(tver, tobj);
-  g.setColor(1,1,1);
-  g.drawString(value, (tran[4]+tran[6]) / 2 , (tran[5]+tran[7]) / 2 ); 
-  
-}
-
 
 function drawCircle(ringValues, offset, value ) {  
   // variables for vertex transformations and positioning time
@@ -117,7 +102,6 @@ function drawCircle(ringValues, offset, value ) {
   
 }
 
-
 // For battery disable 
 function drawArc(percent, color, ArchR) {
   let offset = 0;
@@ -147,7 +131,6 @@ function drawArc(percent, color, ArchR) {
   g.setColor(color).fillCircle(watch.screen.centerX - (radius -5) * Math.sin(endRotation + amt),  watch.screen.centerY - (radius -5) * Math.cos(endRotation + amt), 4);
 }
 
-
 // Draws text for month and year in date circle
 function drawMonthCircleText( text, circleSize, range, value){
 

apps/rings/metadata.json

@@ -1,7 +1,7 @@
 { "id": "rings",
   "name": "Rings - an animated watchface",
   "shortName":"Rings",
-  "version":"0.01",
+  "version":"0.02",
   "description": "Ring based watchface that animates to show the date when unlocked. Inspired by / remixed from Rinkulainen.",
   "icon": "app.png",
   "screenshots":  [{"url":"screenshot1.png"}, {"url":"screenshot2.png"}], 
@@ -11,6 +11,8 @@
   "readme": "README.md",
   "storage": [
     {"name":"rings.app.js","url":"app.js"},
-    {"name":"rings.img","url":"app-icon.js","evaluate":true}
-  ]
+    {"name":"rings.img","url":"app-icon.js","evaluate":true},
+    {"name":"rings.settings.js","url":"settings.js"}
+  ],
+  "data": [{"name":"rings.settings.json"}],
 }

apps/rings/rings.settings.js

@@ -0,0 +1,84 @@
+(function(back) {
+  var FILE = "rings.settings.json";
+  // Load settings
+  var settings = Object.assign({
+    minute: {
+      bubble: true,
+      numbers: true,
+    },
+    hour: {
+      bubble: true,
+      numbers: true
+    },
+    date: {
+      bubble: true,
+      numbers: true,
+    },    
+  }, require('Storage').readJSON(FILE, true) || {});
+
+  function writeSettings(key, value) {
+    settings[key] = value;
+    require("Storage").write("rings.settings.json",settings);
+  }
+  var mainmenu = {
+    "" : { "title" : "Rings" },
+    "< Back" : () => back(),
+    /*LANG*/"Minute" : () => E.showMenu({
+        "" : { "title" : /*LANG*/"Minute" },
+        "< Back" : ()=>E.showMenu(mainmenu),
+        /*LANG*/"Bubble" : {
+                  value: settings.minute.bubble,
+                  onchange: (m) => { 
+                    settings.minute.bubble = m,
+                    writeSettings(); 
+                    },
+                  },
+        /*LANG*/"Number" : {
+                  value: settings.minute.numbers,
+                  onchange: (m) => { 
+                    settings.minute.numbers = m,
+                    writeSettings(); 
+                    },
+                  }
+      }),    
+      /*LANG*/"Hour" : () => E.showMenu({
+        "" : { "title" : /*LANG*/"Hour" },
+        "< Back" : ()=>E.showMenu(mainmenu),
+        /*LANG*/"Bubble" : {
+                  value: settings.hour.bubble,
+                  onchange: (m) => { 
+                    settings.hour.bubble = m,
+                    writeSettings(); 
+                    },
+                  },
+        /*LANG*/"Number" : {
+                  value: settings.hour.numbers,
+                  onchange: (m) => { 
+                    settings.hour.numbers = m,
+                    writeSettings(); 
+                    },
+                  }
+      }),    
+      /*LANG*/"Date" : () => E.showMenu({
+        "" : { "title" : /*LANG*/"Date" },
+        "< Back" : ()=>E.showMenu(mainmenu),
+        /*LANG*/"Bubble" : {
+                  value: settings.date.bubble,
+                  onchange: (m) => { 
+                    settings.date.bubble = m,
+                    writeSettings(); 
+                    },
+                  },
+        /*LANG*/"Number" : {
+                  value: settings.date.numbers,
+                  onchange: (m) => { 
+                    settings.date.numbers = m,
+                    writeSettings(); 
+                    },
+                  }
+      }),      
+  }
+
+  // Show the menu
+  E.showMenu(mainmenu);
+})