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

wohrm: Refactor renderLshape() 

rename variables and document renderLshape()
master
Adam Schmalhofer 2021-12-20 11:08:08 +01:00
parent 0caa10b705
commit 4f16d6ce35
2 changed files with 61 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apps.json
View File

@ -1714,7 +1714,7 @@
{ {
"id": "wohrm", "id": "wohrm",
"name": "Workout HRM", "name": "Workout HRM",
"version": "0.09-rc7", "version": "0.09-rc10",
"description": "Workout heart rate monitor notifies you with a buzz if your heart rate goes above or below the set limits.", "description": "Workout heart rate monitor notifies you with a buzz if your heart rate goes above or below the set limits.",
"icon": "app.png", "icon": "app.png",
"type": "app", "type": "app",

110
apps/wohrm/app.js
View File

@ -27,30 +27,30 @@ let setterHighlightTimeout;
const isB1 = process.env.HWVERSION==1; const isB1 = process.env.HWVERSION==1;
const upperLshape = isB1 ? { const upperLshape = isB1 ? {
minX: 125, right: 125,
maxX: 210, left: 210,
minY: 40, bottom: 40,
maxY: 210, top: 210,
rectWidth: 30, rectWidth: 30,
cornerRoundness: 5, cornerRoundness: 5,
orientation: -1, orientation: -1,
color: '#f00' color: '#f00'
} : { } : {
minX: Bangle.appRect.x2-100, right: Bangle.appRect.x2-100,
maxX: Bangle.appRect.x2, left: Bangle.appRect.x2,
minY: 24, bottom: 24,
maxY: Bangle.appRect.y2, top: Bangle.appRect.y2,
rectWidth: 26, rectWidth: 26,
cornerRoundness: 4, cornerRoundness: 4,
orientation: -1, orientation: -1, // rotated 180°
color: '#f00' color: '#f00'
}; };
const lowerLshape = { const lowerLshape = {
maxX: isB1 ? 10 : Bangle.appRect.x, left: isB1 ? 10 : Bangle.appRect.x,
minX: 100, right: 100,
minY: upperLshape.maxY, bottom: upperLshape.top,
maxY: upperLshape.minY, top: upperLshape.bottom,
rectWidth: upperLshape.rectWidth, rectWidth: upperLshape.rectWidth,
cornerRoundness: upperLshape.cornerRoundness, cornerRoundness: upperLshape.cornerRoundness,
orientation: 1, orientation: 1,
@ -58,8 +58,8 @@ const lowerLshape = {
}; };
const centerBar = { const centerBar = {
minY: (upperLshape.minY + upperLshape.maxY - upperLshape.rectWidth)/2, minY: (upperLshape.bottom + upperLshape.top - upperLshape.rectWidth)/2,
maxY: (upperLshape.minY + upperLshape.maxY + upperLshape.rectWidth)/2, maxY: (upperLshape.bottom + upperLshape.top + upperLshape.rectWidth)/2,
confidenceWidth: isB1 ? 10 : 8, confidenceWidth: isB1 ? 10 : 8,
minX: isB1 ? 55 : upperLshape.rectWidth + 14, minX: isB1 ? 55 : upperLshape.rectWidth + 14,
maxX: isB1 ? 165 : Bangle.appRect.x2 - upperLshape.rectWidth - 14 maxX: isB1 ? 165 : Bangle.appRect.x2 - upperLshape.rectWidth - 14
@ -80,50 +80,60 @@ function fillEllipse(x, y, x2, y2) {
Math.max(y, y2)); Math.max(y, y2));
} }
/**
* @param p.left: the X coordinate of the left side of the L in its orientation
* @param p.right: the X coordinate of the right side of the L in its orientation
* @param p.top: the Y coordinate of the top side of the L in its orientation
* @param p.bottom: the Y coordinate of the bottom side of the L in its orientation
* @param p.strokeWidth: how thick we draw the letter.
* @param p.cornerRoundness: how much the corners should be rounded
* @param p.orientation: 1 == turned 0°; -1 == turned 180°
* @param p.color: the color to draw the shape
*/
function renderLshape(p) { function renderLshape(p) {
g.setColor(p.color); g.setColor(p.color);
g.fillRect(p.minX, p.minY, p.maxX, p.minY-p.orientation*p.rectWidth); g.fillRect(p.right, p.bottom, p.left, p.bottom-p.orientation*p.rectWidth);
g.fillRect(p.maxX+p.orientation*p.rectWidth, g.fillRect(p.left+p.orientation*p.rectWidth,
p.minY-p.orientation*p.rectWidth, p.bottom-p.orientation*p.rectWidth,
p.maxX, p.left,
p.maxY+p.orientation*p.cornerRoundness*2); p.top+p.orientation*p.cornerRoundness*2);
//Round end of small line //Round end of small line
fillEllipse(p.minX+p.orientation*p.cornerRoundness*2, fillEllipse(p.right+p.orientation*p.cornerRoundness*2,
p.minY, p.bottom,
p.minX-p.orientation*p.cornerRoundness*2, p.right-p.orientation*p.cornerRoundness*2,
p.minY-p.orientation*p.rectWidth); p.bottom-p.orientation*p.rectWidth);
//Round outer corner //Round outer corner
g.setColor(g.theme.bg); g.setColor(g.theme.bg);
g.fillRect(p.maxX+p.orientation*p.cornerRoundness, g.fillRect(p.left+p.orientation*p.cornerRoundness,
p.minY, p.bottom,
p.maxX, p.left,
p.minY-p.orientation*p.cornerRoundness); p.bottom-p.orientation*p.cornerRoundness);
g.setColor(p.color); g.setColor(p.color);
fillEllipse(p.maxX+p.orientation*p.cornerRoundness*4, fillEllipse(p.left+p.orientation*p.cornerRoundness*4,
p.minY, p.bottom,
p.maxX, p.left,
p.minY-p.orientation*p.cornerRoundness*2); p.bottom-p.orientation*p.cornerRoundness*2);
//Round inner corner //Round inner corner
g.fillRect(p.maxX+p.orientation*(p.rectWidth+p.cornerRoundness+1), g.fillRect(p.left+p.orientation*(p.rectWidth+p.cornerRoundness+1),
p.minY-p.orientation*(p.rectWidth+1), p.bottom-p.orientation*(p.rectWidth+1),
p.maxX+p.orientation*(p.rectWidth+1), p.left+p.orientation*(p.rectWidth+1),
p.minY-p.orientation*(p.rectWidth+p.cornerRoundness-1)); p.bottom-p.orientation*(p.rectWidth+p.cornerRoundness-1));
g.setColor(g.theme.bg); g.setColor(g.theme.bg);
fillEllipse(p.maxX+p.orientation*(p.rectWidth+p.cornerRoundness*4), fillEllipse(p.left+p.orientation*(p.rectWidth+p.cornerRoundness*4),
p.minY-p.orientation*(p.rectWidth+1), p.bottom-p.orientation*(p.rectWidth+1),
p.maxX+p.orientation*(p.rectWidth+1), p.left+p.orientation*(p.rectWidth+1),
p.minY-p.orientation*(p.rectWidth+p.cornerRoundness*3-1)); p.bottom-p.orientation*(p.rectWidth+p.cornerRoundness*3-1));
//Round end of long line //Round end of long line
g.setColor(p.color); g.setColor(p.color);
fillEllipse(p.maxX+p.orientation*p.rectWidth, fillEllipse(p.left+p.orientation*p.rectWidth,
p.maxY+p.orientation*p.cornerRoundness*4, p.top+p.orientation*p.cornerRoundness*4,
p.maxX, p.left,
p.maxY); p.top);
} }
function drawTrainingHeartRate() { function drawTrainingHeartRate() {
@ -153,8 +163,8 @@ function renderUpperLimit() {
} }
g.setFontVector(fontSizes.limits).setFontAlign(-1, 0, 0); g.setFontVector(fontSizes.limits).setFontAlign(-1, 0, 0);
g.drawString("Upper: " + settings.upperLimit, g.drawString("Upper: " + settings.upperLimit,
upperLshape.minX, upperLshape.right,
upperLshape.minY+upperLshape.rectWidth/2); upperLshape.bottom+upperLshape.rectWidth/2);
upperLimitChanged = false; upperLimitChanged = false;
} }
@ -170,8 +180,8 @@ function renderCurrentHeartRate() {
g.setFontVector(fontSizes.heartRate); g.setFontVector(fontSizes.heartRate);
g.setFontAlign(1, 0, 0); g.setFontAlign(1, 0, 0);
g.drawString(currentHeartRate, g.drawString(currentHeartRate,
Math.max(upperLshape.minX+upperLshape.cornerRoundness, Math.max(upperLshape.right+upperLshape.cornerRoundness,
lowerLshape.minX-lowerLshape.cornerRoundness), lowerLshape.right-lowerLshape.cornerRoundness),
(centerBar.minY+centerBar.maxY)/2); (centerBar.minY+centerBar.maxY)/2);
//Reset alignment to defaults //Reset alignment to defaults
@ -192,8 +202,8 @@ function renderLowerLimit() {
} }
g.setFontVector(fontSizes.limits).setFontAlign(-1, 0, 0); g.setFontVector(fontSizes.limits).setFontAlign(-1, 0, 0);
g.drawString("Lower: " + settings.lowerLimit, g.drawString("Lower: " + settings.lowerLimit,
lowerLshape.maxX + lowerLshape.rectWidth/2, lowerLshape.left + lowerLshape.rectWidth/2,
lowerLshape.minY - lowerLshape.rectWidth/2); lowerLshape.bottom - lowerLshape.rectWidth/2);
lowerLimitChanged = false; lowerLimitChanged = false;
} }