Right, well I get the dial but no hand and no value, here's my code below;
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 = 0; 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, 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(); drawIcons(); try { function accelHandler() { if (accel.z > maxZ) { maxZ = accel.z; } drawHand(Math.round(maxZ)); layout.maxZ.label = maxZ; // layout.render(); } Bangle.setPollInterval(80); Bangle.on('accel', accelHandler); } catch(e) { print(e.message); print("value exceeds limits"); drawHand(MIN); }
@sp started
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.
Right, well I get the dial but no hand and no value, here's my code below;