[p5] I want to change the value of the gauge graphic in real time

p5.js Libraries
1

[p5] I want to change the value of the gauge graphic in real time.

Is there an easy way to change that value?

link : p5.js Web Editor

ref : Gauge charts in JavaScript

source code

  1. index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.1/p5.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.1/addons/p5.sound.min.js"></script>
    <script src='https://cdn.plot.ly/plotly-2.14.0.min.js'></script>
    
    
    <link rel="stylesheet" type="text/css" href="style.css">
    <meta charset="utf-8" />

  </head>
  <body>
    <main>
    </main>
    <script src="sketch.js"></script>
    


  </body>
</html>
  1. sketch.js
var data = [
  {
    domain: { x: [0, 1], y: [0, 1] },
    value: 450,
    title: { text: "Speed" },
    type: "indicator",
    mode: "gauge+number+delta",
    delta: { reference: 380 },
    gauge: {
      axis: { range: [null, 500] },
      steps: [
        { range: [0, 250], color: "lightgray" },
        { range: [250, 400], color: "gray" }
      ],
      threshold: {
        line: { color: "red", width: 4 },
        thickness: 0.75,
        value: 490
      }
    }
  }
];

var layout = { width: 400, height: 200, margin: { t: 0, b: 0 } };



function setup() {
  
  createCanvas(400, 400);
  let cnv;

  let div_gauge = createDiv('');
  div_gauge.id('gauge_1');  
 
  div_gauge.position(0,0);  
  
  background(0);  
  
}

function draw() {

  data.value=100; // --?
  Plotly.newPlot('gauge_1', data, layout);  
  noLoop();
  
}

fig
fig1108×771 96.1 KB

I want to change the value in the variable of ‘data’ in real time. Is there a way?

data.value=100; // ????

2

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://cdn.plot.ly/plotly-2.14.0.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.1/p5.js">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.1/addons/p5.sound.min.js"> 
      </script>
  
    <link rel="stylesheet" type="text/css" href="style.css">
    <meta charset="utf-8" />

  </head>
  <body>
    <div id="gauge_1"><!-- Plotly chart will be drawn inside this DIV --></div>
    <script>
        Plotly.newPlot("gauge_1", {
            "data": [{
    domain: { x: [0, 1], y: [0, 1] },
    value: 0,
    title: { text: "Speed" },
    type: "indicator",
    mode: "gauge+number+delta",
    delta: { reference: 380 },
    gauge: {
      axis: { range: [null, 500] },
      steps: [
        { range: [0, 250], color: "lightgray" },
        { range: [250, 400], color: "gray" }
      ],
      threshold: {
        line: { color: "red", width: 4 },
        thickness: 0.75,
        value: 490
      }
    }
  }],
            "layout": { width: 400, height: 400, margin: { t: 0, b: 0 }}
        })
    </script>
    <main>
    </main>
    <script src="sketch.js"></script>
  </body>
</html>

sketch.js

let slider;

function setup() { 
// gauge_1 created in index.html
  slider = createSlider(0, 500, 100);
  slider.position(10, 380);
}

function draw() {
  Plotly.update('gauge_1', {value: slider.value()}, {}, [0]);
}

Gauge is created in index.html and will reflect slider value.

gauge
gauge810×800 28.7 KB

2 Likes
3

@svan

Plotly.update('gauge_1', {value: 50}, {}, [0]);

thank you for the reply.

How did you know about the above command?

You can use it as above.
Did you find it by looking at the .js file? Or do you mostly configure it as an update?
If you know, please reply, thank you.

4

https://stackoverflow.com/questions/62061915/plotly-gauge-dynamic

1 Like
5

@svan

Thanks for your kind reply.
It’s been a big help.