123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126 |
- <!doctype html>
- <html>
- <head>
- <script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
- <script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.8/FileSaver.js"></script>
- <script src="https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.1/mqttws31.min.js" type="text/javascript"></script>
- </head>
- <body>
- <pre>脫皮機出料儲豆槽狀態_1:{{get_Peel_Output_status[0]}}</pre>
- <pre>脫皮機出料儲豆槽狀態_2:{{get_Peel_Output_status[1]}}</pre>
- <pre>發酵貨櫃入料儲豆槽狀態_1:{{get_Ferment_Input[0]}}</pre>
- <pre>發酵貨櫃入料儲豆槽狀態:{{get_Ferment_Input[1]}}</pre>
- <input type ="button" onclick="javascript:location.href='/'" value="回首頁"></input>
- <script>
- // the URL or IP address of the MQTT server to connect to
- //const mqtt_server = "54.248.68.32"
- const mqtt_server = "60.250.156.234"
- // the port of the MQTT server to connect to
- const mqtt_port = 8080
- // the MQTT topic to publish to
- const mqtt_pub_topic = "AISKY/Coffee/MK-G/b8:27:eb:7e:24:78";
- // the MQTT topic to subscribe to
- const mqtt_sub_topic = "AISKY/Coffee/MK-G/b8:27:eb:7e:24:78/Log";
- var client = false;
- // the function to be executed when connected to the MQTT broker
- function onConnect() {
- // once connected, start subscribing to the topic
- console.log("onConnect: start subscribing to the topic");
- client.subscribe(mqtt_sub_topic, { qos: Number(2) });
- }
- // the function to be executed when the message is received
- function onMessageArrived(message) {
- console.log("onMessageArrived:" + message.payloadString);
- // display received messages on the webpage
- document.getElementById("mqtt_monitor").innerText = message.payloadString;
- }
- // send the reboot command
- function publish_message_reboot() {
- var payload = {
- command: "reboot"
- }
- var message = new Paho.MQTT.Message(JSON.stringify(payload));
- message.destinationName = mqtt_pub_topic;
- message.qos = Number(2);
- client.send(message);
- }
- // send the report system information command
- function publish_message_system_info() {
- var payload = {
- command: "system_info"
- }
- var message = new Paho.MQTT.Message(JSON.stringify(payload));
- message.destinationName = mqtt_pub_topic;
- message.qos = Number(2);
- client.send(message);
- }
- function init() {
- // assign the function handler corresponding to each button
- document.getElementById("mqtt_reboot").addEventListener('click', publish_message_reboot);
- document.getElementById("mqtt_system_info").addEventListener('click', publish_message_system_info);
- // assign the client ID for MQTT broker authentication, you can assign it on your own
- var MQTT_CLIENT_ID = "iot_web_" + Math.floor((1 + Math.random()) * 0x10000000000).toString(16);
- // create a MQTT client instance
- // make sure the MQTT broker address and port number are correct
- // the port number should be used for websocket, not other protocol
- client = new Paho.MQTT.Client(mqtt_server, mqtt_port, '/ws', MQTT_CLIENT_ID);
- // the public MQTT broker "iot.eclipse.org" can be used for testing
- // client = new Paho.MQTT.Client("iot.eclipse.org", 80, '/ws', MQTT_CLIENT_ID);
- // the function to be executed when the message is received
- client.onMessageArrived = onMessageArrived;
- // connect to the MQTT broker
- client.connect({
- // if you don't use user name and password, just remove these lines
- userName: "aisky-server",
- password: "aisky",
- // the function to be executed when connected
- onSuccess:onConnect
- });
- }
- window.addEventListener('load', init, false);
- </script>
- <p>
- Project Name: AppleFarm<br><br>
- Publish Topic: AISKY/AppleFarm/MK-G/00:04:4b:e7:02:18<br><br>
- Subscribe Topic: AISKY/AppleFarm/MK-G/00:04:4b:e7:02:18/Log<br>
- </p>
- <div>
- <button id="mqtt_reboot">Reboot</button>
- <button id="mqtt_system_info">MQTT傳訊 No.A 清洗貨櫃出料至No.B發酵貨櫃入料儲豆槽</button>
- <button id="mqtt_system_info2">MQTT傳訊 No.B入料儲豆槽進行出豆作業No.FX發酵槽 進行入豆作業</button>
- </div><br>
- <div id="mqtt_monitor">
- </div>
- </body>
- </html
|