Bangle2 need help with barometer app

Posted on Fri 14th, October 2022

• #1

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.
• #2

Gordon

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?

• #3

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

• #4

Gordon

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

sp

Still not getting it.

• #6

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

• #7

sp

Still no hand.
• #8

Gordon

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.

• #9

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

• #10

Ganblejs

@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 :)
• #11

sp in reply to @Ganblejs

many thanks @ganblejs

• #12

Gordon

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

• #13

sp

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

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});
```
• #15

Ganblejs in reply to @sp

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.
• #16

sp

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

Ganblejs in reply to @sp

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.

Post a reply
- Bold
- Italics
- Link
- Image
- List
- Quote
- code
- Preview
Formatting Help

Don't worry about formatting, just type in the text and we'll take care of making sense of it. We will auto-convert links, and if you put asterisks around words we will make them bold.

Tips:

Create headers by underlining text with ==== or ----

To *italicise* text put one asterisk each side of the word

To **bold** text put two asterisks each side of the word

Embed images by entering:
![](https://www.google.co.uk/images/srpr/logo4w.png)
That's the hard one: exclamation, square brackets and then the URL to the image in brackets.

* Create lists by starting lines with asterisks

1. Create numbered lists by starting lines with a number and a dot

> Quote text by starting lines with >

Mention another user by @username

For syntax highlighting, surround the code block with three backticks:

```
Your code goes here
```
Just like Github, a blank line must precede a code block.

If you upload more than 5 files we will display all attachments as thumbnails.

For a full reference visit the Markdown syntax.

Bangle2 need help with barometer app

About