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