Webduino
Webduino?
Webduino = Webcomponents + Arduino
http://blog.techbridge.cc/2017/01/06/web-components/



| Arduino | Webduino | |
|---|---|---|
| 開發語言 | C/C++ | HTML + JS |
| 開發環境 | Arduino IDE | Web Browser/ Webduino Blocky |
| 連接方式 | USB | Wifi |
| 更新方式 | 連接燒錄 | 即時更新 |
直接用HTML控制LED
<wa-led id='led' pin='10' state='on'>
</wa-led>Arduino Webduino
// constants won't change. They're used here to set pin numbers:
const int buttonPin = 2; // the number of the pushbutton pin
const int ledPin = 13; // the number of the LED pin
int buttonState = 0; // variable for reading the pushbutton status
void setup() {
// initialize the LED pin as an output:
pinMode(ledPin, OUTPUT);
// initialize the pushbutton pin as an input:
pinMode(buttonPin, INPUT);
}
void loop() {
// read the state of the pushbutton value:
buttonState = digitalRead(buttonPin);
// check if the pushbutton is pressed. If it is, the buttonState is HIGH:
if (buttonState == HIGH) {
digitalWrite(ledPin, HIGH); // turn LED on:
} else {
digitalWrite(ledPin, LOW); // turn LED off:
}
}var button;
boardReady('', function (board) {
board.samplingInterval = 20;
button = getButton(board, 11);
button.on("pressed",function(){
console.log("pressed");
document.getElementById("demo-area-01-show").innerHTML = 'AAA';
});
button.on("released",function(){
console.log("released");
document.getElementById("demo-area-01-show").innerHTML = 'BBB';
});
button.on("longPress",function(){
console.log("longPress");
document.getElementById("demo-area-01-show").innerHTML = 'CCC';
});
});
初始化設定
將Webduino板子設定成STA模式後接電
| Wi-Fi mode | 解釋 | 舉例 |
|---|---|---|
| AP(HostAP) | 允許其他無線設備連線 AP彼此間可互相連接 |
分享器 |
| STA(SoftAP) | 不接受無線的接入連線 可連接其他AP |
一般的無線網卡 |
使用能連網的裝置找到開發版的wifi並連線
- 名稱:板子SSID(通常是wa開頭)
- 密碼:12345678 (預設)
-------連線後----------
- 在瀏覽器輸入 192.168.4.1 打開網頁
- 在頁面輸入之後開發版接電要連線的網路密碼
- (此處的SSID 和 PASSWORD 是網路基地台
板子的) - 填完送出,檢查有沒有 SAVE OK
- (若無則請重新設定)
!!!!!移除開發版電源!!!!!
- 切換回AP模式
- 接上電源
- 確認開發板是否正常上線:
- 連上 webduino.io/device.html
- 輸入Device ID (4碼)
開始實作
- https://blockly.webduino.io/
- 內有多個範例程式
智慧插座接線教學
智慧插座接線教學
Line Chatbot 開燈
Web+Arduino
By jackiechen08
Web+Arduino
- 542