Update VodafoneDE.js

VodafoneDE-Datavolume/VodafoneDE.js

@@ -2,11 +2,59 @@
 // These must be at the very top of the file. Do not edit.
 // icon-color: teal; icon-glyph: magic;
 
-// Credits Sillium@GitHub (https://gist.github.com/Sillium/f904fb89444bc8dde12cfc07b8fa8728)
+// Credits: 
+//   - Sillium@GitHub (https://gist.github.com/Sillium/f904fb89444bc8dde12cfc07b8fa8728)
+//   - Chaeimg@Github (https://github.com/chaeimg/battCircle)
 
 // How many minutes should the cache be valid
 let cacheMinutes = 60;
 
+const canvFillColor = '#EDEDED';
+const canvStrokeColor = '#121212';
+const canvBackColor1 = '#D32D1F'; //Widget background color
+const canvBackColor2 = '#76150C'; //Widget background color
+const canvDarkModeBackColor1 = '#111111'; //Widget background color
+const canvDarkModeBackColor2 = '#222222'; //Widget background color
+const canvTextColor = '#FFFFFF'; //Widget text color
+
+const canvas = new DrawContext();
+const canvSize = 200;
+const canvTextSize = 36;
+
+const canvWidth = 22;
+const canvRadius = 80;
+
+canvas.opaque = false
+canvas.size = new Size(canvSize, canvSize);
+canvas.respectScreenScale = true;
+
+function sinDeg(deg) {
+  return Math.sin((deg * Math.PI) / 180);
+}
+
+function cosDeg(deg) {
+  return Math.cos((deg * Math.PI) / 180);
+}
+
+function drawArc(ctr, rad, w, deg) {
+  bgx = ctr.x - rad;
+  bgy = ctr.y - rad;
+  bgd = 2 * rad;
+  bgr = new Rect(bgx, bgy, bgd, bgd);
+
+  canvas.setFillColor(new Color(canvFillColor));
+  canvas.setStrokeColor(new Color(canvStrokeColor));
+  canvas.setLineWidth(w);
+  canvas.strokeEllipse(bgr);
+
+  for (t = 0; t < deg; t++) {
+    rect_x = ctr.x + rad * sinDeg(t) - w / 2;
+    rect_y = ctr.y - rad * cosDeg(t) - w / 2;
+    rect_r = new Rect(rect_x, rect_y, w, w);
+    canvas.fillEllipse(rect_r);
+  }
+}
+
 async function getSessionCookies() {
   let req;
   req = new Request("https://www.vodafone.de/mint/rest/session/start")
@@ -101,18 +149,20 @@ try {
 // Create Widget
 let widget = new ListWidget();
 
+widget.setPadding(10, 10, 10, 10)
+
 const gradient = new LinearGradient()
 gradient.locations = [0, 1]
 
-if (Device.isUsingDarkAppearance()){
+if (!Device.isUsingDarkAppearance()){
   gradient.colors = [
-    new Color("111111"),
-    new Color("222222")
+    new Color(canvDarkModeBackColor1),
+    new Color(canvDarkModeBackColor2)
   ]
 } else {
   gradient.colors = [
-    new Color("D32D1F"),
-    new Color("76150C")
+    new Color(canvBackColor1),
+    new Color(canvBackColor2)
   ]  
 }
 
@@ -125,17 +175,39 @@ widget.addSpacer()
 
 let remainingPercentage = (100 / data.total * data.remaining).toFixed(0);
 
-const remainingPercentageText = widget.addText(remainingPercentage + "%")
-remainingPercentageText.font = Font.boldSystemFont(36)
+drawArc(
+  new Point(canvSize / 2, canvSize / 2),
+  canvRadius,
+  canvWidth,
+  Math.floor(remainingPercentage * 3.6)
+);
+
+const canvTextRect = new Rect(
+  0,
+  100 - canvTextSize / 2,
+  canvSize,
+  canvTextSize
+);
+canvas.setTextAlignedCenter();
+canvas.setTextColor(new Color(canvTextColor));
+canvas.setFont(Font.boldSystemFont(canvTextSize));
+canvas.drawTextInRect(`${remainingPercentage}%`, canvTextRect);
+
+const canvImage = canvas.getImage();
+let image = widget.addImage(canvImage);
+image.centerAlignImage()
 
 widget.addSpacer()
 
-let remainingGB = (data.remaining / 1024).toFixed(1)
+// Total Values
+let remainingGB = (data.remaining / 1024).toFixed(2)
 let totalGB = (data.total / 1024).toFixed(0)
 let totalValuesText = widget.addText(`${remainingGB} GB von ${totalGB} GB`)
 totalValuesText.font = Font.mediumSystemFont(12)
+totalValuesText.centerAlignText()
 
-widget.addSpacer()
+// Last Update
+widget.addSpacer(5)
 let lastUpdateText = widget.addDate(lastUpdate)
 lastUpdateText.font = Font.mediumSystemFont(10)
 lastUpdateText.centerAlignText()