文章/答案/技术大牛

发布

问自动刷新Justgage中的值
EN

Stack Overflow用户

提问于 2018-05-18 18:02:29

回答 1查看 1.2K关注 0票数 2

  <!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>

我正在尝试获取项目中要自动更新的仪表值，而不是当前通过单击刷新按钮进行更新。

有一个Justgage示例显示自动刷新，如下代码所示：

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

这里使用的是随机数，但我的4个VARiables是通过数据库的数据更新的，所以我不需要随机部分。

任何人都可以建议我应该如何编写这部分代码来自动刷新仪表盘？

setInterval？setTimeout？还是需要Ajax？

我的Javascript很差，谢谢。

justgage

javascript

html

ajax

setinterval

回答 1

Stack Overflow用户

发布于 2021-08-20 00:24:45

刷新仪表的最好方法是使用FCM (firebase)。

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

在每次更改中，您都会发送一个firebase通知，当返回响应firebase时，您将调用该函数。

如果你使用的是PHP，你可以使用curl发送通知。像这样：

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

在Firebase中注册后，您将获得信息并将代码放入js中。应该是这样的：

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/50408774

复制

相似问题

问自动刷新Justgage中的值
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问自动刷新Justgage中的值EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问自动刷新Justgage中的值
EN