Merge pull request #3897 from RKBoss6/ChargeAnimSettings

Add settings to Charge Animation [Show Time, Show Battery Percent]

apps/chargeanim/ChangeLog

@@ -1,2 +1,3 @@
 0.01: New App!
 0.02: Bangle.js 2 compatibility
+0.03: Add settings menu for showing time and battery percent with animation.

apps/chargeanim/app.js

@@ -1,8 +1,19 @@
+
+var settings = Object.assign({
+  // default values
+  showBatPercent: true,
+  showTime: true,
+  
+  
+  }, require("Storage").readJSON("chargeAnimSettings.json", true) || {});
+
+
 g.setBgColor(0, 0, 0);
 g.clear().flip();
 var imgbat = require("heatshrink").decompress(atob("nFYhBC/AH4A/AGUeACA22HEo3/G8YrTAC422HBQ2tHBI3/G/43/G/43/G/43/G/43/G/43/G+fTG+vSN+w326Q31GwI3/G9g2WG742CG/43rGwY3yGwg33RKo3bNzQ3bGwo3/G9A2GG942dG/43QGw43uGxA34IKw3VGyY3iG0I3pb8pBRG+wYPG8wYQG/42uG8oZSG/43bDKY3iDKg3cNzI3iRKo3gGyo3/G7A2WG7g2aG/43WGzA3dGzI3/G6fTGzRvcG/43/G/43/G/43/G/43/G/43/G/437HFw2IHFo2KAH4A/AH4Aa"));
 var imgbubble = require("heatshrink").decompress(atob("i0UhAebgoAFCaYXNBocjAAIWNCYoVHCw4UFIZwqELJQWFKZQVOChYVzABwVaCx7wKCqIWNCg4WMChIXJCZgAnA=="));
-
+require("Font8x12").add(Graphics);
+var batteryPercentStr="";
 var W=g.getWidth(),H=g.getHeight();
 var b2v = (W != 240)?-1:1;
 var b2rot = (W != 240)?Math.PI:0;
@@ -12,11 +23,50 @@ for (var i=0;i<10;i++) {
   bubbles.push({y:Math.random()*H,ly:0,x:(0.5+(i<5?i:i+8))*W/18,v:0.6+Math.random(),s:0.5+Math.random()});
 }
 
+g.setFont("Vector",22);
+g.setFontAlign(0,0);
+
+var clockStr="";
+var x=g.getWidth()/2;
+var cy=g.getHeight()-(g.getHeight()/7)
+var by=g.getHeight()-(g.getHeight()/3.500)
+
+
+function calculateTime(){
+
+  var d=new Date();
+  clockStr = require("locale").time(d, 1); // Hour and minute
+  var meridian=require("locale").meridian(d);
+  if(meridian!=""){
+    //Meridian active
+    clockStr=clockStr+" "+meridian;
+  }
+  
+}
+function calculate(){
+  if(settings.showTime==true){
+    calculateTime();
+  }
+  if(settings.showBatPercent==true){
+    batteryPercentStr=E.getBattery()+"%";
+  }
+  
+  
+}
+
 function anim() {
   /* we don't use any kind of buffering here. Just draw one image
   at a time (image contains a background) too, and there is minimal
   flicker. */  
-  var mx = W/2.0, my = H/2.0;
+  var mx = W/2.0;
+  var my;
+  if(settings.showBatPercent){
+    var my = H/2.5;
+  }else{
+    var my = H/2.0;
+  }
+  
+  
   bubbles.forEach(f=>{
     f.y-=f.v * b2v;
     if (f.y<-24)
@@ -26,10 +76,25 @@ function anim() {
     g.drawImage(imgbubble,f.y,f.x,{scale:f.s * b2scale, rotate:b2rot});
   });
   g.drawImage(imgbat, mx,my,{scale:b2scale, rotate:Math.sin(getTime()*2)*0.5-Math.PI/2 + b2rot});
+  if(settings.showTime==true){
+    g.drawString(clockStr,x,cy);
+  }
+  if(settings.showBatPercent==true){
+    g.drawString(batteryPercentStr,x,by,true);
+  }
   g.flip();
+  
+  
 }
   
-setInterval(anim,20);
+if(settings.showBatPercent||settings.showTime){
+  //Eliminate unnesccesary need for calculation
+  calculate();
+  setInterval(calculate,20000);
+}
+
+setInterval(anim,22);
+
 
 Bangle.on("charging", isCharging => {
   if (!isCharging) load();

apps/chargeanim/metadata.json

@@ -1,16 +1,21 @@
 {
   "id": "chargeanim",
   "name": "Charge Animation",
-  "version": "0.02",
+  "version": "0.03",
-  "description": "When charging, show a sideways charging animation and keep the screen on. When removed from the charger load the clock again.",
+  "description": "When charging, show a sideways charging animation and optionally, show time, or show battery percentage. When removed from the charger, clock loads again.",
   "icon": "icon.png",
   "tags": "battery",
   "supports": ["BANGLEJS", "BANGLEJS2"],
   "allow_emulator": true,
-  "screenshots": [{"url":"bangle2-charge-animation-screenshot.png"},{"url":"bangle-charge-animation-screenshot.png"}],
+  "screenshots": [
+    {"url":"Screenshot1.png"},
+    {"url":"Screenshot2.png"},
+    {"url":"Screenshot3.png"}],
   "storage": [
     {"name":"chargeanim.app.js","url":"app.js"},
     {"name":"chargeanim.boot.js","url":"boot.js"},
+    {"name":"chargeanim.settings.js","url":"settings.js"},
     {"name":"chargeanim.img","url":"app-icon.js","evaluate":true}
-  ]
+  ],
+  "data": [{"name":"chargeAnimSettings.json"}]
 }

apps/chargeanim/settings.js

@@ -0,0 +1,44 @@
+(function(back) {
+  var FILE = "chargeAnimSettings.json";
+  // Load settings
+  
+  var settings = Object.assign({
+    // default values
+    showBatPercent: true,
+    showTime: true,
+    
+
+  }, require('Storage').readJSON(FILE, true) || {});
+
+  function writeSettings() {
+    require('Storage').writeJSON(FILE, settings);
+  }
+
+  // Show the menu
+  E.showMenu({
+    "" : { "title" : "Charge Animation" },
+    "< Back" : () => back(),
+    'Show Percent Charged': {
+      value: !!settings.showBatPercent,  // !! converts undefined to false
+      onchange: v => {
+        settings.showBatPercent = v;
+        writeSettings();
+      }
+      // format: ... may be specified as a function which converts the value to a string
+      // if the value is a boolean, showMenu() will convert this automatically, which
+      // keeps settings menus consistent
+    },
+    'Show Time': {
+      value: !!settings.showTime,  // !! converts undefined to false
+      onchange: v => {
+        settings.showTime = v;
+        writeSettings();
+      }
+      // format: ... may be specified as a function which converts the value to a string
+      // if the value is a boolean, showMenu() will convert this automatically, which
+      // keeps settings menus consistent
+    }
+    
+    
+  });
+})