You are reading a single comment by @sp and its replies. Click here to read the full conversation.
  • 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);
    }
    
About

Avatar for sp @sp started