bryan
/
BangleApps
0
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

faster circles rendering

master
Gordon Williams 2022-12-09 10:32:16 +00:00
parent a0d3d15dbf
commit e303c15ac2
3 changed files with 14 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
apps/circlesclock/ChangeLog
View File

@ -34,3 +34,4 @@
0.18: Improved clkinfo handling and using it for the weather circle 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) 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 Remove settings for what is displayed and instead allow circles to be changed by swiping
0.20: Add much faster circle rendering (250ms -> 40ms)

21
apps/circlesclock/app.js
View File

@ -288,8 +288,7 @@ function drawInnerCircleAndTriangle(w) {
function drawGauge(cx, cy, percent, color) { function drawGauge(cx, cy, percent, color) {
let offset = 15; let offset = 15;
let end = 360 - offset; let end = 360 - offset;
let radius = radiusInner + (circleCount == 3 ? 3 : 2); let radius = radiusOuter+1;
let size = radiusOuter - radiusInner - 2;
if (percent <= 0) return; // no gauge needed if (percent <= 0) return; // no gauge needed
if (percent > 1) percent = 1; if (percent > 1) percent = 1;
@ -299,14 +298,18 @@ function drawGauge(cx, cy, percent, color) {
color = getGradientColor(color, percent); color = getGradientColor(color, percent);
g.setColor(color); g.setColor(color);
// convert to radians
// FIXME: this one loop takes 0.25 sec EACH TIME the function is called startRotation *= Math.PI / 180;
for (let i = startRotation; i > endRotation - size; i -= size) { let amt = Math.PI / 10;
let r = i * Math.PI / 180; // radians endRotation = (endRotation * Math.PI / 180) - amt;
g.fillCircle( // 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), cx + radius * Math.sin(r),
cy + radius * Math.cos(r), size); cy + radius * Math.cos(r)
} );
g.fillPoly(poly);
} }
function writeCircleText(w, content) { function writeCircleText(w, content) {

2
apps/circlesclock/metadata.json
View File

@ -1,7 +1,7 @@
{ "id": "circlesclock", { "id": "circlesclock",
"name": "Circles clock", "name": "Circles clock",
"shortName":"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", "description": "A clock with three or four circles for different data at the bottom in a probably familiar style",
"icon": "app.png", "icon": "app.png",
"screenshots": [{"url":"screenshot-dark.png"}, {"url":"screenshot-light.png"}, {"url":"screenshot-dark-4.png"}, {"url":"screenshot-light-4.png"}], "screenshots": [{"url":"screenshot-dark.png"}, {"url":"screenshot-light.png"}, {"url":"screenshot-dark-4.png"}, {"url":"screenshot-light-4.png"}],