Your code gave a whole bunch of errors on the console, like the drawIcons function being missing, accel not existing, and so on. If you fix those then it kindof works. I made some other small tweaks, so try this:
var center = {
x: g.getWidth()/2,
y: g.getHeight()/2,
};
var MIN = 0;
var MAX = 12;
var NUMBER_OF_VALUES = MAX - MIN;
var SCALE_TICK_STEP = 4;
var SCALE_VALUES_STEP = 2;
var NUMBER_OF_LABELS = NUMBER_OF_VALUES / SCALE_VALUES_STEP;
var NUMBER_OF_TICKS = NUMBER_OF_VALUES / SCALE_TICK_STEP;
var ZERO_OFFSET = (Math.PI / 4) * 3;
var SCALE_SPAN = (Math.PI / 2) * 3;
var TICK_LENGTH = 10;
var HAND_LENGTH = 45;
var HAND_WIDTH = 5;
var maxZ = -10000; // ensure we call for an update as soon as we have data
function generatePoly(radius, width, angle){
var x = center.x + Math.cos(angle) * radius;
var y = center.y + Math.sin(angle) * radius;
var d = {
x: width/2 * Math.cos(angle + Math.PI/2),
y: width/2 * Math.sin(angle + Math.PI/2),
};
var poly = [center.x - d.x, center.y - d.y, center.x + d.x, center.y + d.y, x + d.x, y + d.y, x - d.x, y - d.y];
return poly;
}
function drawHand(value){
g.setColor(g.theme.fg2);
g.setFontAlign(0,0);
g.setFont("Vector",24);
g.drawString(value.toFixed(2), center.x, center.y * 2 - 65, true);
var angle = SCALE_SPAN / NUMBER_OF_VALUES * (value - MIN) + ZERO_OFFSET;
g.fillPoly(generatePoly(HAND_LENGTH, HAND_WIDTH, angle), true);
g.fillCircle(center.x ,center.y, 4);
}
function drawTicks(){
g.setColor(g.theme.fg);
for(let i= 0; i <= NUMBER_OF_TICKS; i++){
var angle = (i * (SCALE_SPAN/NUMBER_OF_TICKS)) + ZERO_OFFSET;
var tickWidth = i%5==0 ? 5 : 2;
g.fillPoly(generatePoly(center.x, tickWidth, angle), true);
}
g.setColor(g.theme.bg);
g.fillCircle(center.x,center.y,center.x - TICK_LENGTH);
}
function drawScaleLabels(){
g.setColor(g.theme.fg);
g.setFont("Vector",17);
let label = MIN;
for (let i=0;i <= NUMBER_OF_LABELS; i++){
var angle = (i * (SCALE_SPAN/NUMBER_OF_LABELS)) + ZERO_OFFSET;
var labelDimensions = g.stringMetrics(label);
var LABEL_PADDING = 5;
var radius = center.x - TICK_LENGTH - LABEL_PADDING;
var x = center.x + Math.cos(angle) * radius;
var y = center.y + Math.sin(angle) * radius;
var visualX = x > center.x ? x - labelDimensions.width : x + labelDimensions.width > center.x ? x - (labelDimensions.width / 2) : x;
var visualY = y >= center.y - labelDimensions.height / 2 ? y - labelDimensions.height / 2 : y;
g.drawString(label, visualX, visualY);
label += SCALE_VALUES_STEP;
}
}
g.setBgColor(g.theme.bg);
g.clear();
drawTicks();
drawScaleLabels();
function accelHandler(accel) {
if (accel.z > maxZ) {
maxZ = accel.z;
g.clear();
drawTicks();
drawScaleLabels();
drawHand(maxZ*10); // x10 just to match the scale better
}
}
Bangle.setPollInterval(80);
Bangle.on('accel', accelHandler);
Espruino is a JavaScript interpreter for low-power Microcontrollers. This site is both a support community for Espruino and a place to share what you are working on.
Your code gave a whole bunch of errors on the console, like the
drawIcons
function being missing,accel
not existing, and so on. If you fix those then it kindof works. I made some other small tweaks, so try this: