Bangle2 need help with barometer app

[espruino-discuss2]

Posted at 2022-10-14 by sp

Hi Gordan,
I was looking for a way to display accel data in dial type display like in the Barometer app. Can you please just show me the code to display maxZ value instead of barometer value.
Many thanks.

[espruino-discuss2]

Posted at 2022-10-14 by @gfwilliams

In the barometer app, as far as I can see you'd want to change MIN and MAX - maybe to -100 and +100: https://github.com/espruino/BangleApps/blob/master/apps/barometer/app.js#L6

Then instead of drawHand(Math.round(data.pressure)); you do drawHand(...); with a value between -100 and 100?

---

Posted at 2022-10-15 by sp

I've set the Min and Max values but still I'm not getting the value to display.
Below is my modified code, what's wrong with this, there is no hand on display;

try {
 function accelHandler(accel) {
  if (accel.z > maxZ) {
      maxZ = accel.z.toFixed(2);
    }
    
 
    drawHand(Math.round(accel.maxZ));
   layout.render();
  }
   Bangle.setPollInterval(80);
  Bangle.on('accel', accelHandler);


} catch(e) {
  print(e.message);
   print("value exceeds limits");
    drawHand(MIN);
}

---

Posted at 2022-10-17 by @gfwilliams

It looks like you're doing drawHand(Math.round(accel.maxZ)); when the actual variable you're setting up is just maxZ?

---

Posted at 2022-10-19 by sp

Still not getting it.

---

Posted at 2022-10-19 by RaoulDuke

This works for me, assuming "maxZ" is defined somewhere:

try {
  function accelHandler(accel) {
    if (accel.z > maxZ) {
      maxZ = accel.z.toFixed(2);  
    }
    drawHand(Math.round(maxZ));
   //layout.render();
  }
  Bangle.setPollInterval(80);  
  Bangle.on('accel', accelHandler);
} catch(e) {
  print(e.message);
  print("value exceeds limits");
  drawHand(MIN);
}

---

Posted at 2022-10-19 by sp

Still no hand.

---

Posted at 2022-10-19 by @gfwilliams

Do you get any errors shown? We're trying to help, but if you just show us a section of your code, and just say 'doesn't work' whenever we try to help, we're not going to be able to do much for you.

---

Posted at 2022-10-20 by sp

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);
}

---

Posted at 2022-10-20 by @thyttan

@sp If you go to edit your last reply above, then highlight all your pasted code and lastly click the <\> code button in the toolbar above the edit-box and then save changes, it will produce a nice coding block that is easier for others to read from. With numbered lines and a boarder. Just FYI :)

---

Posted at 2022-10-20 by sp

many thanks @ganblejs

---

Posted at 2022-10-20 by @gfwilliams

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);

---

Posted at 2022-10-20 by sp

Thanks guys. I noted on the AccelLog app there is a factor of 8192 used and here you have initialised maxZ = 10000.

---

Posted at 2022-11-06 by sp

on Bangle.JS2 how can I add a button with label RESET to reset the maxZ value? I tried this code from the counter app but it doesn't work. I've added it after line 80.

setWatch(() => {
   maxZ = 0;
   updateScreen();
 }, BTN2, {repeat:true});

---

Posted at 2022-11-06 by @thyttan

Here's the documentation for the setWatch-function.

It seems to me that the code you pasted listens for a press of physical button BTN2 - which is only present on Bangle.js 1. If you change 'BTN2' to 'BTN1' I think it could work on Bangle.js 2 as well.

---

Posted at 2022-11-07 by sp

Tried BTN1, BTN both didn't work.
How can I get a tiny text just next to the button that says RESET.

---

Posted at 2022-11-07 by @thyttan

Tried BTN1, BTN both didn't work.

Do you see any messages in the console field in the web ide when you run the code?

Have you defined the updateScreen()-function before this setWatch-block?

How can I get a tiny text just next to the button that says RESET.

I think you might want to use the layout library to get that, not entierly sure.

Edit: documentation regarding Bangle.js layout library.