瀏覽代碼

上傳檔案到 'web'

allen 2 年之前
父節點
當前提交
c4cfa7f0b2
共有 1 個文件被更改,包括 157 次插入0 次删除
  1. 157 0
      web/coffeeloader.html

+ 157 - 0
web/coffeeloader.html

@@ -0,0 +1,157 @@
+<html>
+<meta charset="utf-8">
+<title>Coffee Loader Demo</title>
+
+<!--
+<script src="mqttws31.min.js" type="text/javascript"></script>
+-->
+<script src="https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.1/mqttws31.min.js" type="text/javascript"></script>
+<style>
+button {
+            background-color: white;
+            border-radius:10px;
+            border: 3px solid lightgray;
+        }
+
+</style>
+
+<script>
+// the URL or IP address of the MQTT server to connect to
+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   9c:65:f9:1e:6c:68   b8:27:eb:84:e9:3f  b8:27:eb:f8:24:92   
+const mqtt_pub_topic = "AISKY/Coffee/MK-G/b8:27:eb:7e:24:78";
+// the MQTT topic to subscribe to   b8:27:eb:b4:59:3e b8:27:eb:7e:24:78
+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;
+}
+
+function publish_message_otadownload() {
+    var url_text = document.getElementById("OTA_DOWNLOAD");
+    var payload = {
+        command: "a061",
+        url:"git clone "+url_text.value
+    }
+    var message = new Paho.MQTT.Message(JSON.stringify(payload));
+    message.destinationName = mqtt_pub_topic;
+    message.qos = Number(2);
+    client.send(message);
+}
+
+
+
+function publish_message_isp() {
+    var hex_text = document.getElementById("sensor").value;
+    var payload = {
+        command: "a063",
+        hex:hex_text+".hex",
+    }
+    var message = new Paho.MQTT.Message(JSON.stringify(payload));
+    message.destinationName = mqtt_pub_topic;
+    message.qos = Number(2);
+    client.send(message);
+}
+
+
+function publish_message_clear() {
+    var payload = {
+        command: "a064",
+    }
+    var message = new Paho.MQTT.Message(JSON.stringify(payload));
+    message.destinationName = mqtt_pub_topic;
+    message.qos = Number(2);
+    client.send(message);
+}
+
+
+
+
+//-------------------------------------------------------------------------------
+function init() {
+    document.getElementById("mqtt_otadownload").addEventListener('click', publish_message_otadownload);
+    document.getElementById("mqtt_isp").addEventListener('click', publish_message_isp);
+    document.getElementById("mqtt_clear").addEventListener('click', publish_message_clear);
+    // 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>
+
+<body>
+<p><h2>
+Coffee Loader Demo
+</h2></p>
+<p>
+</p>
+<div>
+
+<input type="text" id="OTA_DOWNLOAD"/>
+<button id="mqtt_otadownload">燒錄檔案下載</button>
+<br><br>
+<form>
+<select id="sensor"style="font-size:20px">
+ <option value="RELAY">RELAY</option>
+ <option value="PH">PH</option>
+ <option value="DO">DO</option>
+ <option value="EC">EC</option>
+  <option value="LIDARS">LIDARS</option>
+ <option value="ORP">ORP</option>
+ <option value="SHT11">SHT11</option>
+ <option value="SOIL">SOIL</option>
+  <option value="SONIC">SONIC</option>
+ <option value="TEMP">TEMP</option>
+ <option value="WATERLEVEL">WATERLEVEL</option>
+  <option value="PWM">PWM</option>
+  <option value="bmp280">BMP280</option>
+  <option value="servo">SERVO</option>
+  <option value="stepmotor">STEPMOTOR</option>
+  <option value="motorfeedback">MOTORFEEDBACK</option>
+  <option value="KIT0139">KIT0139</option>
+  ...
+</select>
+</form>
+<button id="mqtt_isp">燒錄</button>
+<br><br>
+<button id="mqtt_clear">清除</button>
+<br><br>
+
+</div><br>
+<div id="mqtt_monitor">
+</div>
+</body>
+</html>