|
|
@@ -0,0 +1,126 @@
|
|
|
+<!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
|
