coffeeloader.html 5.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157
  1. <html>
  2. <meta charset="utf-8">
  3. <title>Coffee Loader Demo</title>
  4. <!--
  5. <script src="mqttws31.min.js" type="text/javascript"></script>
  6. -->
  7. <script src="https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.1/mqttws31.min.js" type="text/javascript"></script>
  8. <style>
  9. button {
  10. background-color: white;
  11. border-radius:10px;
  12. border: 3px solid lightgray;
  13. }
  14. </style>
  15. <script>
  16. // the URL or IP address of the MQTT server to connect to
  17. const mqtt_server = "60.250.156.234"
  18. // the port of the MQTT server to connect to
  19. const mqtt_port = 8080
  20. // the MQTT topic to publish to 9c:65:f9:1e:6c:68 b8:27:eb:84:e9:3f b8:27:eb:f8:24:92
  21. const mqtt_pub_topic = "AISKY/Coffee/MK-G/b8:27:eb:7e:24:78";
  22. // the MQTT topic to subscribe to b8:27:eb:b4:59:3e b8:27:eb:7e:24:78
  23. const mqtt_sub_topic = "AISKY/Coffee/MK-G/b8:27:eb:7e:24:78/Log";
  24. var client = false;
  25. // the function to be executed when connected to the MQTT broker
  26. function onConnect() {
  27. // once connected, start subscribing to the topic
  28. console.log("onConnect: start subscribing to the topic");
  29. client.subscribe(mqtt_sub_topic, { qos: Number(2) });
  30. }
  31. // the function to be executed when the message is received
  32. function onMessageArrived(message) {
  33. console.log("onMessageArrived:" + message.payloadString);
  34. // display received messages on the webpage
  35. document.getElementById("mqtt_monitor").innerText = message.payloadString;
  36. }
  37. function publish_message_otadownload() {
  38. var url_text = document.getElementById("OTA_DOWNLOAD");
  39. var payload = {
  40. command: "a061",
  41. url:"git clone "+url_text.value
  42. }
  43. var message = new Paho.MQTT.Message(JSON.stringify(payload));
  44. message.destinationName = mqtt_pub_topic;
  45. message.qos = Number(2);
  46. client.send(message);
  47. }
  48. function publish_message_isp() {
  49. var hex_text = document.getElementById("sensor").value;
  50. var payload = {
  51. command: "a063",
  52. hex:hex_text+".hex",
  53. }
  54. var message = new Paho.MQTT.Message(JSON.stringify(payload));
  55. message.destinationName = mqtt_pub_topic;
  56. message.qos = Number(2);
  57. client.send(message);
  58. }
  59. function publish_message_clear() {
  60. var payload = {
  61. command: "a064",
  62. }
  63. var message = new Paho.MQTT.Message(JSON.stringify(payload));
  64. message.destinationName = mqtt_pub_topic;
  65. message.qos = Number(2);
  66. client.send(message);
  67. }
  68. //-------------------------------------------------------------------------------
  69. function init() {
  70. document.getElementById("mqtt_otadownload").addEventListener('click', publish_message_otadownload);
  71. document.getElementById("mqtt_isp").addEventListener('click', publish_message_isp);
  72. document.getElementById("mqtt_clear").addEventListener('click', publish_message_clear);
  73. // assign the client ID for MQTT broker authentication, you can assign it on your own
  74. var MQTT_CLIENT_ID = "iot_web_" + Math.floor((1 + Math.random()) * 0x10000000000).toString(16);
  75. // create a MQTT client instance
  76. // make sure the MQTT broker address and port number are correct
  77. // the port number should be used for websocket, not other protocol
  78. client = new Paho.MQTT.Client(mqtt_server, mqtt_port, '/ws', MQTT_CLIENT_ID);
  79. // the public MQTT broker "iot.eclipse.org" can be used for testing
  80. // client = new Paho.MQTT.Client("iot.eclipse.org", 80, '/ws', MQTT_CLIENT_ID);
  81. // the function to be executed when the message is received
  82. client.onMessageArrived = onMessageArrived;
  83. // connect to the MQTT broker
  84. client.connect({
  85. // if you don't use user name and password, just remove these lines
  86. userName: "aisky-server",
  87. password: "aisky",
  88. // the function to be executed when connected
  89. onSuccess:onConnect
  90. });
  91. }
  92. window.addEventListener('load', init, false);
  93. </script>
  94. <body>
  95. <p><h2>
  96. Coffee Loader Demo
  97. </h2></p>
  98. <p>
  99. </p>
  100. <div>
  101. <input type="text" id="OTA_DOWNLOAD"/>
  102. <button id="mqtt_otadownload">燒錄檔案下載</button>
  103. <br><br>
  104. <form>
  105. <select id="sensor"style="font-size:20px">
  106.  <option value="RELAY">RELAY</option>
  107.  <option value="PH">PH</option>
  108.  <option value="DO">DO</option>
  109.  <option value="EC">EC</option>
  110. <option value="LIDARS">LIDARS</option>
  111.  <option value="ORP">ORP</option>
  112.  <option value="SHT11">SHT11</option>
  113.  <option value="SOIL">SOIL</option>
  114. <option value="SONIC">SONIC</option>
  115.  <option value="TEMP">TEMP</option>
  116.  <option value="WATERLEVEL">WATERLEVEL</option>
  117. <option value="PWM">PWM</option>
  118. <option value="bmp280">BMP280</option>
  119. <option value="servo">SERVO</option>
  120. <option value="stepmotor">STEPMOTOR</option>
  121. <option value="motorfeedback">MOTORFEEDBACK</option>
  122. <option value="KIT0139">KIT0139</option>
  123. ...
  124. </select>
  125. </form>
  126. <button id="mqtt_isp">燒錄</button>
  127. <br><br>
  128. <button id="mqtt_clear">清除</button>
  129. <br><br>
  130. </div><br>
  131. <div id="mqtt_monitor">
  132. </div>
  133. </body>
  134. </html>