Some settings changes

Made bubble option global
Added date to text

apps/rings/app.js

@@ -3,29 +3,27 @@
 // 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 = {
-const watch = {  
   color:"#000000", 
-  dateRing : { size:109, weight:20, color:"#00FF00", numbers: true, range: 30 , bubble:true},
+  dateRing : { size:109, weight:20, color:"#00FF00", numbers: true, range: 30 },
-  hourRing : { size:82, weight:20, color:"#00FFFF", numbers: true, range: 12, bubble:true},
+  hourRing : { size:82, weight:20, color:"#00FFFF", numbers: true, range: 12},
-  minuteRing : { size:55, weight:18, color:"#FFFF00", numbers: true, range: 60, bubble:false},
+  minuteRing : { size:55, weight:18, color:"#FFFF00", numbers: true, range: 60},
-  batteryRing: { size :30, weight:10, color:"#ff3300", numbers: false, range: 100, bubble:false},
+  batteryRing: { size :30, weight:10, color:"#ff3300", numbers: false, range: 100},
-  screen : { width:g.getWidth(), height:g.getHeight(), centerX: g.getWidth() *0.5, centerY: g.getHeight() * 0.5, cursor: 14, font:"6x8:2" },
+  screen : { width:g.getWidth(), height:g.getHeight(), centerX: g.getWidth() *0.5, centerY: g.getHeight() * 0.5, cursor: 14, font:"Vector:18", bubble:false },
 };
 
 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;
+  watch.screen.bubble = settings.bubble;
 }
 delete settings;
 const month= ["JANUARY","FEBRUARY","MARCH","APRIL","MAY","JUNE","JULY",
@@ -57,34 +55,7 @@ function queueDraw() {
   }, wait - (Date.now() % wait));
 }
 
-// Draws a time circle (date, hours, minutes)
+// Draws a circles (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
   let tver, tobj, tran;
@@ -95,7 +66,7 @@ function drawCircle(ringValues, offset, value ) {
   g.setColor("#000000").fillCircle(watch.screen.centerX, watch.screen.centerY, ringValues.size - ringValues.weight + offset);
 
   tobj = { x:watch.screen.centerX, y:watch.screen.centerY, scale:1, rotate:ttime };
-  if(ringValues.bubble){
+  if(watch.screen.bubble){
     tver = [-1, 0, 1, 0, 1, -ringValues.size-offset, -1, -(ringValues.size + offset -21)];
     tran = g.transformVertices(tver, tobj);
     if(ringValues.numbers){
@@ -165,8 +136,8 @@ function drawMonthCircleText( text, circleSize, range, value){
 
     monthCircleTextBuffer.clear();
     monthCircleTextBuffer.fillRect(0,0,watch.screen.width,watch.screen.height);
-    
     var tver, tobj, tran;
+    
 
     // From here: https://forum.espruino.com/comments/16781795/
     var gr = Graphics.createArrayBuffer(24,16,1,{msb:true});
@@ -230,7 +201,7 @@ function shrinkCircles(toggle){
 
      drawCircle(watch.dateRing, delta, date.getDate()); 
     // Draw month and year in date ring
-    drawMonthCircleText( month[date.getMonth()]+" "+date.getFullYear(), watch.dateRing.size - 24, getDays(date.getFullYear(), date.getMonth()+1), date.getDate()) ;
+    drawMonthCircleText( date.getDate() + " " + month[date.getMonth()] + " " +date.getFullYear(), watch.dateRing.size - 24, getDays(date.getFullYear(), date.getMonth()+1), date.getDate()) ;
   }
   
   drawCircle(watch.hourRing, delta, date.getHours()); 

apps/rings/settings.js

@@ -3,17 +3,15 @@
   // Load settings
   var settings = Object.assign({
     minute: {
-      bubble: true,
       numbers: true,
     },
     hour: {
-      bubble: true,
       numbers: true
     },
     date: {
-      bubble: true,
       numbers: true,
-    },    
+    },  
+    bubble: true,   
   }, require('Storage').readJSON(FILE, true) || {});
 
   function writeSettings(key, value) {
@@ -26,13 +24,6 @@
     /*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) => { 
@@ -44,13 +35,6 @@
       /*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) => { 
@@ -62,13 +46,6 @@
       /*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) => { 
@@ -76,7 +53,14 @@
                     writeSettings(); 
                     },
                   }
-      }),      
+      }),
+      /*LANG*/"BG Bubble?" : {
+      value : settings.bubble,
+      onchange: (m) => {
+        settings.bubble = m;
+        writeSettings();
+      }
+    },      
   }
 
   // Show the menu