Automatically refresh the value in Justgage

Question

  <!doctype html>
<html>

<head>
    <title>Machine Learning Data Dashboard</title>
    <link rel="stylesheet" href='../static/style.css'/>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <style>
        body {
            text-align: center;
        }
        #g1,
        #g2,
        #g3,
        #g4 {
            width: 350px;
            height: 260px;
            display: inline-block;
            margin: 4em;
        }
    </style>
</head>

<body>
    <h1>Machine Learning Data Dashboard</h1>
    <div id="g1"></div>
    <div id="g2"></div>
    <div id="g3"></div>
    <div id="g4"></div>
    <hr>
    <h3> Last Sensors Reading: {{ time }} ==> <a href="/"class="button">REFRESH</a></h3>    
    <hr>
    <h3> HISTORICAL DATA </h3>
        <p> Enter number of samples to retrieve:
        <form method="POST">
            <input name="numSamples" value= {{numSamples}}>
            <input type="submit">
        </form></p>
        <hr>
        <img src="/plot/temp" alt="Image Placeholder" width="22%">
        <img src="/plot/hum" alt="Image Placeholder" width="22%">
        <img src="/plot/nois" alt="Image Placeholder" width="22%">
        <img src="/plot/pres" alt="Image Placeholder" width="22%">
    <p> @2018 Developed by MJRoBot.org</p>

    <script src="../static/raphael-2.1.4.min.js"></script>
    <script src="../static/justgage.js"></script>
    <script>
        var g1, g2, g3, g4;
        document.addEventListener("DOMContentLoaded", function(event) {
            g1 = new JustGage({
                id: "g1",
                value: {{temp}},
                valueFontColor: "yellow",
                titleFontColor: "yellow",
                pointer: true,
                min: -10,
                max: 50,
                pointer: true,
                    pointerOptions: {
                      stroke_width: -1,
                      stroke_linecap: 'round'
                    },
                title: "Temperature",
                label: "°C"
            });
            g2 = new JustGage({
                id: "g2",
                value: {{hum}},
                valueFontColor: "yellow",
                titleFontColor: "yellow",
                donut: true,
                pointer: true,
                    gaugeWidthScale: 0.4,
                min: 0,
                max: 100,
                title: "Humidity",
                label: "%"
            });
            g3 = new JustGage({
                id: "g3",
                value: {{nois}},
                valueFontColor: "yellow",
                titleFontColor: "yellow",
                donut: true,
                pointer: true,
                    gaugeWidthScale: 0.4,
                min: 0,
                max: 100,
                title: "Noise",
                label: "dB"
            });
            g4 = new JustGage({
                id: "g4",
                value: {{pres}},
                valueFontColor: "yellow",
                titleFontColor: "yellow",
                min: 0,
                max: 100,
                pointer: true,
                    pointerOptions: {
                      toplength: 8,
                      bottomlength: -20,
                      bottomwidth: 6,
                      stroke_width: 3,
                      stroke_linecap: 'round'
                    },
                gaugeWidthScale: 0.1,
                title: "Pressure",
                label: "Pa"
            });

            setInterval(function() {
                  g1.refresh();
                  g2.refresh;
                  g3.refresh;
                  g4.refresh;
                }, 2500);



        });
    </script>
</body>

</html>

I am trying to get the gage value in the project to be auto-updated, rather than updated by clicking the REFRESH button currently.

There is a Justgage sample show auto-refresh like following code:

 setInterval(function() {
      g1.refresh(getRandomInt(50, 100));
      g2.refresh(getRandomInt(50, 100));
      g3.refresh(getRandomInt(0, 50));
      g4.refresh(getRandomInt(0, 50));
    }, 2500);

Here are using random number, but my 4 VARiables are updated by database's data, so I don't need the random part.

Anyone can suggest how should I write this part of code to auto-refresh the gage?

setInterval? setTimeout? Or Ajax is needed?

I am poor in Javascript, thanks.

score 0 · Answer 1 · answered Aug 20 '21 at 00:24

The best way to refresh the Gauges is using FCM (firebase).

https://firebase.google.com/docs/cloud-messaging?hl=pt-br

In each change yout send a notification for the firebase and when back the response firebase you call the function.

If you are using PHP you can send notification using curl. Like:

public function sendNotification($title, $body, $token)
 {
    $url = 'https://fcm.googleapis.com/fcm/send';
    $headers = [
        'Authorization: key=GET_THE_AUTORIZATION_AND_PUT_HERE',
        'Content-type: application/json'
    ];
    $notification = [
        'title' => $title,
        'body'  => $body
    ];

    $request = [
        'notification' => $notification,
        "registration_ids" => array($token)
    ];

    $ch = curl_init();
    curl_setopt($ch, CURLOPT_URL, $url);
    curl_setopt($ch, CURLOPT_POST, true);
    curl_setopt($ch, CURLOPT_HTTPHEADER, $headers);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
    curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
    curl_setopt($ch, CURLOPT_POSTFIELDS, json_encode($request));

    $res = curl_exec($ch);
    return $res;

    curl_close($ch);
 }

After your register in Firebase, you get the infos and put in your code js. Should be like this:

// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
var firebaseConfig = {
    apiKey: "this information is filled by firebase",
    authDomain: "this information is filled by firebase",
    projectId: "this information is filled by firebase",
    storageBucket: "this information is filled by firebase",
    messagingSenderId: "this information is filled by firebase",
    appId: "this information is filled by firebase",
    measurementId: "this information is filled by firebase"
};
 // Initialize Firebase
 firebase.initializeApp(firebaseConfig);

 let token;
 const fcm = firebase.messaging();
 fcm.getToken({
 vapidkey: 'IN HERE YOU PUT KEY PAIR' // yout get in settings > cloudmessaging - in the firebase
 }).then((currentToken) => {
if (currentToken) {
    token = currentToken;
    console.log(currentToken);
} else {
    // Show permission request UI
    console.log('No registration token available. Request permission to generate one.');
}
}).catch((err) => {
    console.log('An error occurred while retrieving token. ', err);
 });

 fcm.onMessage((data) => {
     // in here you call
     g1.refresh(getRandomInt(50, 100));
     g2.refresh(getRandomInt(50, 100));
     g3.refresh(getRandomInt(0, 50));
     g4.refresh(getRandomInt(0, 50));
 }

Automatically refresh the value in Justgage

1 Answers1