Embedded Files
(2021/09/18)昨日參加marty的一小時線上研習課程，趕快把自己可以理解的部份記錄下來
Marty的講義：http://gg.gg/wa0917
一、網頁編輯器
線上網頁編輯器
範例1：網頁計數器
程式碼：
<h1 id='txt'>0</h1>
<button id='btn'>Click</button>
<script>
var i=0;
btn.addEventListener('click',()=>{
txt.innerHTML = ++i+''
})
</script>
執行畫面
範例2：MQTT測試
web components - <wa-mqtt>
<wa-mqtt id='mqtt' sub='zzz' set='txt.innerHTML'></wa-mqtt>
zzz為訂閱主題；'txt.innerHTML'為 設定HTML元素屬性
有關MQTT Server的設定在 https://marty5499.github.io/lit/build/wa-mqtt.js 裡面，如下
n.Server={server:"wss://mqtt1.webduino.io/mqtt",userName:"webduino",password:"webduino"}
程式碼：
<!DOCTYPE html>
<head>
<!-- mqtt-js -->
<script src="https://blocklypro.webduino.io/dist/lib/webduino-all-0.4.20.min.js"></script>
<script src="https://blocklypro.webduino.io/node_modules/webduino-module-mqtt/mqttClient.min.js"></script>
<script type="module" src="https://marty5499.github.io/lit/build/wa-mqtt.js"></script>
</head>
<body>
<h1 id='txt'>0</h1>
<button id='btn'>Click</button>
<wa-mqtt id='mqtt' sub='zzz' set='txt.innerHTML'></wa-mqtt>
<script>
var i=0;
btn.addEventListener('click',()=>{
mqtt.publish('zzz',++i);
})
</script>
</body>
範例3：控制智慧插座
可利用【按鍵】、【Web:Bit模擬器】、【MQTTBox】來交互測試
程式碼：
<!DOCTYPE html>
<html>
<head>
<!-- mqtt-js -->
<script src="https://blocklypro.webduino.io/dist/lib/webduino-all-0.4.20.min.js"></script>
<script src="https://blocklypro.webduino.io/node_modules/webduino-module-mqtt/mqttClient.min.js"></script>
<script type="module" src="https://marty5499.github.io/lit/build/wa-mqtt.js"></script>
</head>
<body>
<h1 id='txt'>0</h1>
<button id='btn'>Click</button>
<wa-mqtt id='mqtt' sub='wenyu/set' set='txt.innerHTML'></wa-mqtt>
<script>
var i = 0;
btn.addEventListener('click', () => {
mqtt.publish('wenyu/set', ++i % 2 == 0 ? "on" : "off");
})
</script>
</body>
</html>
在MQTTBox 設定 Webduino MQTT Broker
Page updated
Google Sites
Report abuse