Battery circle

- Added battery circle in the center
- Added "draw arc" function for battery circle

apps/rings/app.js

@@ -13,6 +13,7 @@ const watch = {
   dateRing : { size:109, weight:20, color:"#00FF00", numbers: true, range: 30 , bubble:false},
   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" },
 };
 
@@ -81,9 +82,7 @@ function drawCircle(ringValues, offset, value ) {
   // draw circle
   g.setColor(ringValues.color).fillCircle(watch.screen.centerX, watch.screen.centerY, ringValues.size + offset);
   g.setColor("#000000").fillCircle(watch.screen.centerX, watch.screen.centerY, ringValues.size - ringValues.weight + offset);
-  // draw line
-  //let location_x = watch.screen.centerX +(ringValues.size + offset) * Math.cos((-(value / ringValues.range)+0.25)*2*Math.PI);
-  //let location_y = watch.screen.centerY -(ringValues.size + offset) * Math.sin((-(value / ringValues.range)+0.25)*2*Math.PI);
+
   tobj = { x:watch.screen.centerX, y:watch.screen.centerY, scale:1, rotate:ttime };
   if(ringValues.bubble){
     tver = [-1, 0, 1, 0, 1, -ringValues.size-offset, -1, -(ringValues.size + offset -21)];
@@ -118,6 +117,37 @@ function drawCircle(ringValues, offset, value ) {
   
 }
 
+
+// For battery disable 
+function drawArc(percent, color, ArchR) {
+  let offset = 0;
+  let end = 360;
+  let radius = ArchR + 2;
+
+  if (percent <= 0) return; // no gauge needed
+  if (percent > 1) percent = 1;
+
+  let startRotation = -offset;
+  let endRotation = startRotation - (end * percent);
+
+  g.setColor(color);
+  // convert to radians
+  startRotation *= Math.PI / 180;
+  let amt = Math.PI / 10;
+  endRotation = (endRotation * Math.PI / 180) - amt;
+  // all we need to draw is an arc, because we'll fill the center
+  let poly = [watch.screen.centerX, watch.screen.centerY];
+  for (let r = startRotation; r > endRotation; r -= amt)
+    poly.push(
+      watch.screen.centerX - radius * Math.sin(r),
+      watch.screen.centerY - radius * Math.cos(r)
+    );
+  g.fillPoly(poly);
+  g.setColor("#000000").fillCircle(watch.screen.centerX, watch.screen.centerY, ArchR - 10);
+  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){
 
@@ -174,6 +204,7 @@ function shrinkCircles(toggle){
     counter = 1;
     // We're finished, so queue next draw.
     queueDraw();
+    if(!toggle) drawArc(E.getBattery() / 100, watch.batteryRing.color, watch.batteryRing.size);
     return;
   } 
   
@@ -189,16 +220,13 @@ function shrinkCircles(toggle){
   // Draw the date ring (unless it's the last run of an expansion).
   if(counter < 11 || toggle){
 
-    //drawTimeCircle(watch.dateRing.color, watch.dateRing.size + delta, watch.dateRing.weight, getDays(date.getFullYear(), date.getMonth()+1), date.getDate() );
      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()) ;
   }
   
-  //drawTimeCircle(watch.hourRing.color, watch.hourRing.size + delta, watch.hourRing.weight, 12, date.getHours() );
   drawCircle(watch.hourRing, delta, date.getHours()); 
   drawCircle(watch.minuteRing, delta, date.getMinutes()); 
-  //drawTimeCircle(watch.minuteRing.color, watch.minuteRing.size + delta, watch.minuteRing.weight, 60, date.getMinutes() );
   
   counter += 1;
   setTimeout(shrinkCircles, 10, toggle);
@@ -221,19 +249,15 @@ function draw() {
   // If unlocked, draw date ring and text and make hour and minute rings smaller
   if(!Bangle.isLocked()){
     unLockedOffset = 24;
-    console.log("jee");
     var days_month = getDays(date.getFullYear(), date.getMonth()+1);
     // if the day has changed
     if(watch.dateRing.range != days_month) watch.dateRing.range = days_month;
-    //drawTimeCircle(watch.dateRing.color, watch.dateRing.size - unLockedOffset, watch.dateRing.weight, getDays(date.getFullYear(), date.getMonth()+1), date.getDate() );
     drawCircle(watch.dateRing, -unLockedOffset, days_month);
     drawMonthCircleText( month[date.getMonth()]+" "+date.getFullYear(), watch.dateRing.size - unLockedOffset, getDays(date.getFullYear(), date.getMonth()+1), date.getDate()) ;
   }
-  
-  //drawTimeCircle(watch.hourRing.color, watch.hourRing.size - unLockedOffset, watch.hourRing.weight, 12, date.getHours() );
-  //drawTimeCircle(watch.minuteRing.color, watch.minuteRing.size -unLockedOffset , watch.minuteRing.weight, 60, date.getMinutes() );
   drawCircle(watch.hourRing, -unLockedOffset, date.getHours());
   drawCircle(watch.minuteRing, -unLockedOffset, date.getMinutes());
+  drawArc(E.getBattery() / 100, watch.batteryRing.color, watch.batteryRing.size);
   queueDraw();
 }