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