From e303c15ac27fb513bf98fe7c18f94bdce16b8f82 Mon Sep 17 00:00:00 2001
From: Gordon Williams <gw@pur3.co.uk>
Date: Fri, 9 Dec 2022 10:32:16 +0000
Subject: [PATCH] faster circles rendering

---
 apps/circlesclock/ChangeLog     |  1 +
 apps/circlesclock/app.js        | 21 ++++++++++++---------
 apps/circlesclock/metadata.json |  2 +-
 3 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/apps/circlesclock/ChangeLog b/apps/circlesclock/ChangeLog
index 9e36f67ba..262228ff0 100644
--- a/apps/circlesclock/ChangeLog
+++ b/apps/circlesclock/ChangeLog
@@ -34,3 +34,4 @@
 0.18: Improved clkinfo handling and using it for the weather circle
 0.19: Remove old code and fixing clkinfo handling (fix HRM and other items that change)
       Remove settings for what is displayed and instead allow circles to be changed by swiping
+0.20: Add much faster circle rendering (250ms -> 40ms)
diff --git a/apps/circlesclock/app.js b/apps/circlesclock/app.js
index efd0b0aa6..5585d7145 100644
--- a/apps/circlesclock/app.js
+++ b/apps/circlesclock/app.js
@@ -288,8 +288,7 @@ function drawInnerCircleAndTriangle(w) {
 function drawGauge(cx, cy, percent, color) {
   let offset = 15;
   let end = 360 - offset;
-  let radius = radiusInner + (circleCount == 3 ? 3 : 2);
-  let size = radiusOuter - radiusInner - 2;
+  let radius = radiusOuter+1;
 
   if (percent <= 0) return; // no gauge needed
   if (percent > 1) percent = 1;
@@ -299,14 +298,18 @@ function drawGauge(cx, cy, percent, color) {
 
   color = getGradientColor(color, percent);
   g.setColor(color);
-
-  // FIXME: this one loop takes 0.25 sec EACH TIME the function is called
-  for (let i = startRotation; i > endRotation - size; i -= size) {
-    let r = i * Math.PI / 180; // radians
-    g.fillCircle(
+  // 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 = [cx,cy];
+  for (let r = startRotation; r > endRotation; r -= amt)
+    poly.push(
       cx + radius * Math.sin(r),
-      cy + radius * Math.cos(r), size);
-  }
+      cy + radius * Math.cos(r)
+    );
+  g.fillPoly(poly);
 }
 
 function writeCircleText(w, content) {
diff --git a/apps/circlesclock/metadata.json b/apps/circlesclock/metadata.json
index 3b436a032..fb66c064e 100644
--- a/apps/circlesclock/metadata.json
+++ b/apps/circlesclock/metadata.json
@@ -1,7 +1,7 @@
 { "id": "circlesclock",
   "name": "Circles clock",
   "shortName":"Circles clock",
-  "version":"0.19",
+  "version":"0.20",
   "description": "A clock with three or four circles for different data at the bottom in a probably familiar style",
   "icon": "app.png",
   "screenshots": [{"url":"screenshot-dark.png"}, {"url":"screenshot-light.png"}, {"url":"screenshot-dark-4.png"}, {"url":"screenshot-light-4.png"}],