webduino-learn

目錄

• LED
  • 燈泡圖片亮 & LED 燈亮
  • 點擊燈泡圖片切換 LED 燈開關
  • 黃亮紅不亮，黃不亮紅亮 切換
  • 紅綠燈
• 超音波傳感器 (Ultrasonic Sensor, HC-SRO4+)
  • 超音波 顯示 擷取距離
  • 利用 超音波 擷取距離 縮放圖片大小
• 三色 LED (RGB LED)
  • 三色 LED 調色盤
  • 點擊按鈕改變 三色 LED 顏色
  • 利用拉霸調整 三色 LED 顏色
  • 七彩霓虹燈 - 利用時間改變 三色 LED 燈 顏色
• 三色 LED (RGB LED) & 超音波傳感器 (Ultrasonic Sensor, HC-SRO4+)
  • 利用超音波改變 三色 LED 燈 顏色
• 按鈕開關 (Button)
  • 監聽按鈕動作 (按下、放開、長按)
  • 按鈕 按下 + 1、按住 歸 0
  • 按按鈕 比賽跑
• 人體紅外線偵測傳感器 (PIR sensor, Passive infrared sensor) & LED
  • 人體紅外線偵測傳感器 控制 LED
• 溫濕度傳感器 (Humidity and Temperature Sensor, DHT11)
  • 顯示溫度、濕度
  • 利用 Google Charts 繪製溫濕度圖表
  • 利用 Google Charts 繪製溫濕度指針
  • 利用 Firebase 記錄溫濕度
• 蜂鳴器 (Buzzer)
  • 嗡鳴器發出「獻給愛麗絲」
• 聲音偵測傳感器 (Sound Detector Sensor)
  • 聲音偵測傳感器 偵測是否有聲音
• 伺服馬達 (Servomotor, SG90)
  • 控制 伺服馬達 轉動角度
• LED 點矩陣 (8 x 8 LED matrix)
  • 利用 LED 點矩陣 顯示「XD」
• LED 點矩陣 (8 x 8 LED matrix) & 按鈕開關 (Button)
  • 利用 按鈕開關 執行倒數計時，並將時間顯示在 LED 點矩陣 上
• LED 點矩陣 (8 x 8 LED matrix) & 土壤濕度傳感器 (Soil Moisture Sensor)
  • 利用 土壤濕度傳感器 偵測土壤濕度，並將數值顯示在 LED 點矩陣 上
• 水泵 (Water Pump) & 繼電器 (Relay, JQC-3FF-S-Z)
  • 利用 繼電器 操控 水泵
• 計時器 (8 x 8 LED matrix)
• 計時器 (8 x 8 LED matrix, Google Voice)

---

LED

Webduino 官方教學範例 - LED 燈

燈泡圖片亮 & LED 燈亮

接線

• GND (接地)：LED 短腳
• 10：LED 長腳

實際接線照片

varled;boardReady({device: 'wa8w'},board=>{board.systemReset();board.samplingInterval=250;led=getLed(board,10);led.on();document.getElementById("light").className="on";});

---

點擊燈泡圖片切換 LED 燈開關

接線

• GND (接地)：LED 短腳
• 10：LED 長腳

varled;varlight=document.getElementById("light");boardReady({device: 'wa8w'},board=>{board.systemReset();board.samplingInterval=250;led=getLed(board,10);led.off();light.className="off";light.addEventListener("click",()=>{led.toggle();light.className=light.className=="on" ? "off" : "on";});});

---

黃亮紅不亮，黃不亮紅亮 切換

接線

• GND (接地)：LED 短腳
• 10：紅 LED 長腳
• 11：黃 LED 長腳

實際接線照片

點擊燈泡圖片 切換

varled_red,led_yellow;varlight=document.getElementById("light");boardReady({device: 'wa8w'},board=>{board.systemReset();board.samplingInterval=250;led_red=getLed(board,10);led_yellow=getLed(board,11);led_red.off();led_yellow.on();light.className="off";light.addEventListener("click",()=>{led_red.toggle();led_yellow.toggle();light.className=light.className=="on" ? "off" : "on";});});

---

自動間隔幾秒後 切換

varled_red,led_yellow;varlight=document.getElementById("light");boardReady({device: 'wa8w'},board=>{board.systemReset();board.samplingInterval=250;led_red=getLed(board,10);led_yellow=getLed(board,11);led_red.off();led_yellow.on();light.className="off";setInterval(()=>{led_red.toggle();led_yellow.toggle();light.className=light.className=="on" ? "off" : "on";},2000);});

Demo：

---

紅綠燈

接線

• GND (接地)：LED 短腳
• 10：紅 LED 長腳
• 11：黃 LED 長腳
• 7：綠 LED 長腳

實際接線照片

說明：

• 開始綠燈亮，可按 點擊燈泡圖片 切換 紅燈 或 綠燈 狀態
• 切換紅燈狀態：點擊燈泡圖片 2 秒後換黃燈亮 (其他不亮)，再 2 秒後換紅燈亮 (其他不亮)
• 切換綠燈狀態：點擊燈泡圖片 2 秒後換綠燈亮 (其他不亮)

varled_red,led_yellow,led_green;varlight=document.getElementById("light");(asyncfunction(){boardReady({device: 'wa8w'},asyncboard=>{board.systemReset();board.samplingInterval=250;led_red=getLed(board,10);led_yellow=getLed(board,11);led_green=getLed(board,7);led_red.off();led_yellow.off();led_green.on();light.className="off";light.addEventListener("click",Traffic_Light);});}());asyncfunctionTraffic_Light(){if(light.className=="off"){awaitdelay(2);led_red.off();led_yellow.on();led_green.off();awaitdelay(2);led_red.on();led_yellow.off();led_green.off();light.className="on";}else{awaitdelay(2);led_red.off();led_yellow.off();led_green.on();light.className="off";}}

Demo：

---

超音波傳感器 (Ultrasonic Sensor, HC-SRO4+)

• VCC：供應電源 (3 ~ 5.5V)
• Trig：超音波觸發信號，訊號發送出去
• Echo：超音波接收結果輸出
• GND：接地

Webduino 官方教學範例

• 超音波 顯示 擷取距離
• 利用 超音波 擷取距離 縮放圖片大小

接線

• VCC：3.3V
• Trig：11
• Echo：10
• GND：GND

實際接線照片

超音波 顯示 擷取距離

varultrasonic;boardReady({device: 'kzpV'},board=>{board.systemReset();board.samplingInterval=250;ultrasonic=getUltrasonic(board,11,10);ultrasonic.ping(cm=>{console.log(ultrasonic.distance);document.getElementById("show").innerHTML=ultrasonic.distance;},500);});

利用 超音波 擷取距離 縮放圖片大小

varultrasonic;boardReady({device: 'kzpV'},board=>{board.systemReset();board.samplingInterval=250;ultrasonic=getUltrasonic(board,11,10);ultrasonic.ping(cm=>{console.log(ultrasonic.distance);varimageWidth=ultrasonic.distance;varimageHeight=ultrasonic.distance;document.getElementById("image").style.width=imageWidth+"px";document.getElementById("image").style.height=imageHeight+"px";},500);});

---

三色 LED (RGB LED)

Webduino 官方教學範例

• 控制三色 LED
• 三色 LED 調色盤

接線

• V：3.3V
• R：10
• B：6
• G：9

實際接線照片

三色 LED 調色盤

varrgbled;boardReady({device: 'wa8w'},board=>{board.systemReset();board.samplingInterval=250;rgbled=getRGBLed(board,10,9,6);document.getElementById("color").oninput=_color=>{_color=this.value;rgbled.setColor(_color);};});

Demo：

---

點擊按鈕改變 三色 LED 顏色

varrgbled;boardReady({device: 'wa8w'},board=>{board.systemReset();board.samplingInterval=250;rgbled=getRGBLed(board,10,9,6);rgbled.setColor('#000000');document.getElementById("show").style.background='#000';changeColor("redBtn",'#f00');changeColor("greenBtn",'#3f3');changeColor("blueBtn",'#33f');changeColor("clearBtn",'#000');});functionchangeColor(btn,color){document.getElementById(btn).addEventListener("click",()=>{rgbled.setColor(color);document.getElementById("show").style.background=color;});}

Demo：

---

利用拉霸調整 三色 LED 顏色

varrgbled;varcolor={"red": "00","green": "00","blue": "00"};boardReady({device: 'wa8w'},board=>{board.systemReset();board.samplingInterval=250;rgbled=getRGBLed(board,10,9,6);rgbled.setColor('#000');document.getElementById("show").style.background='#000';document.getElementById("red").addEventListener("change",changeColor);document.getElementById("green").addEventListener("change",changeColor);document.getElementById("blue").addEventListener("change",changeColor);});functionchangeColor(e){varid=e.target.id;color[id]=e.target.value*1;color[id]=color[id]<17 ? "0"+color[id].toString(16) : color[id].toString(16);varrgb="#"+color.red+color.green+color.blue;rgbled.setColor(rgb);document.getElementById("show").style.background=rgb;}

Demo：

---

七彩霓虹燈 - 利用時間改變 三色 LED 燈 顏色

varrgbled,timer,time=300;varlight=document.getElementById("light");boardReady({device: 'wa8w'},board=>{board.systemReset();board.samplingInterval=250;rgbled=getRGBLed(board,10,9,6);rgbled.setColor('#000');light.setAttribute("class","off");light.addEventListener("click",()=>{if(light.getAttribute("class")=="off"){light.className="on";rgbled.setColor('#000');repeat();}else{light.className="off";rgbled.setColor('#000');clearTimeout(timer);}});});functiondelay(time){returnnewPromise(resolve=>timer=setTimeout(resolve,time));}functionrepeat(){delay(1).then(()=>{rgbled.setColor('#f00');returndelay(time);}).then(()=>{rgbled.setColor('#f90');returndelay(time);}).then(()=>{rgbled.setColor('#ff3');returndelay(time);}).then(()=>{rgbled.setColor('#3f3');returndelay(time);}).then(()=>{rgbled.setColor('#33f');returndelay(time);}).then(()=>{rgbled.setColor('#c6c');returndelay(time);}).then(()=>repeat());}

---

三色 LED (RGB LED) & 超音波傳感器 (Ultrasonic Sensor, HC-SRO4+)

Webduino 官方教學範例 - 利用超音波改變 三色 LED 燈 顏色

接線

• 三色LED (RGB LED)
  • V：3.3V
  • R：10
  • B：6
  • G：9
• 超音波傳感器 (Ultrasonic Sensor, HC-SRO4+)
  • VCC：5V
  • Trig：7
  • Echo：8
  • GND：GND

實際接線照片

利用超音波改變 三色 LED 燈 顏色

varrgbled,ultrasonic,i=0;varcolor=["#f00","#f90","#ff0","#3f3","#33f","#c6c"];varshow=document.getElementById("show");boardReady({device: 'kzpV'},board=>{board.systemReset();board.samplingInterval=250;rgbled=getRGBLed(board,10,9,6);ultrasonic=getUltrasonic(board,7,8);rgbled.setColor('#000');show.style.background='#000';ultrasonic.ping(cm=>{console.log(ultrasonic.distance);i=Math.floor(ultrasonic.distance/10);if(ultrasonic.distance<50){rgbled.setColor(color[i]);show.style.background=color[i];}else{rgbled.setColor(color[5]);show.style.background=color[5];}},500);});

---

按鈕開關 (Button)

Webduino 官方教學範例 - 按鈕開關

接線

利用麵包板中間斷路的設計，將按鈕開關各邊的兩腳橫跨兩邊，才能讓四腳都通路，然後再用電阻連接 GND (為了避免有短路的可能發生，所以要接一顆電阻進行保護)

• 按鈕開關 (Button)
  • 3.3V
  • 11
  • 按鈕開關 → 電阻 → GND

實際接線照片

監聽按鈕動作 (按下、放開、長按)

varbutton;varshow=document.getElementById("show");boardReady({device: 'kzpV'},board=>{board.systemReset();board.samplingInterval=250;button=getButton(board,11);button.on("pressed",()=>show.innerHTML='按下');button.on("released",()=>show.innerHTML='放開');button.on("longPress",()=>show.innerHTML='長按');});

---

按鈕 按下 + 1、按住 歸 0

varbutton,count=0;varshow=document.getElementById("show");boardReady({device: 'kzpV'},board=>{board.systemReset();board.samplingInterval=250;button=getButton(board,11);show.innerHTML=0;button.on("pressed",()=>show.innerHTML=count++);button.on("longPress",()=>show.innerHTML=count=0);});

---

按按鈕 比賽跑

varbutton;varNpcShow=document.getElementById("npcshow"),UserShow=document.getElementById("usershow"),Npc=document.getElementById("npc"),User=document.getElementById("user"),Start=document.getElementById("start"),Timer,GameA=0,GameB=0,Distance=100,NpcSpeed=2,UserSpeed;boardReady({device: 'wa8w'},function(board){board.systemReset();board.samplingInterval=250;button=getButton(board,11);Start.className="";document.getElementById("goal").innerHTML=Distance;Start.addEventListener("click",go);});functiongo(){Start.className="go";GameA=0,GameB=0;button.on("pressed",userRun);Timer=setInterval(NPCRun,120);}functionuserRun(){UserShow.innerHTML=GameA+=5;User.style.marginLeft=GameA+"px";if(GameA>=Distance){alert("You Win !!!");stop();}}functionNPCRun(){NpcShow.innerHTML=GameB+=NpcSpeed;Npc.style.marginLeft=GameB+"px";if(GameB>=Distance){alert("GAME OVER !!! You Lose !!!");stop();}}functionstop(){clearInterval(Timer);GameA=0,GameB=0;NpcShow.innerHTML=0;UserShow.innerHTML=0;Npc.style.marginLeft=0;User.style.marginLeft=0;Start.className="";button.removeAllListeners("pressed");}

Demo：

---

人體紅外線偵測傳感器 (PIR sensor, Passive infrared sensor) & LED

Webduino 官方教學範例 - 人體紅外線偵測傳感器 控制 LED

接線

• 人體紅外線偵測傳感器 (PIR sensor)
  • GND：GND
  • OUT：11
  • VCC：5V
• LED
  • 長腳：10
  • 短腳：GND

實際接線照片

人體紅外線偵測傳感器 控制 LED

varpir,led;varlight=document.getElementById("light");boardReady({device: 'wa8w'},board=>{board.systemReset();board.samplingInterval=250;pir=getPir(board,11);led=getLed(board,10);led.off();pir.on("detected",()=>{light.className="on";led.on();});pir.on("ended",()=>{light.className="off";led.off();});});

---

溫濕度傳感器 (Humidity and Temperature Sensor, DHT11)

Webduino 官方教學範例

• 溫濕度傳感器
• 使用 Firebase 資料庫記錄溫濕度

接線

• VCC：3.3V
• Data：11
• N/C：沒有作用
• GND：GND

實際接線照片

顯示溫度、濕度

vardht;boardReady({device: 'wa8w'},board=>{board.systemReset();board.samplingInterval=250;dht=getDht(board,11);dht.read(evt=>{document.getElementById("temperature").innerHTML=dht.temperature;document.getElementById("humidity").innerHTML=dht.humidity;},1000);});

---

利用 Google Charts 繪製溫濕度圖表

vardht;varchart_div=document.getElementById("chart_div");boardReady({device: 'wa8w'},board=>{board.systemReset();board.samplingInterval=20;dht=getDht(board,11);varareachart={areachart: false,origin: [["時間","溫度 (℃)","濕度 (%)"]]};google.load("visualization","1",{packages: ["corechart"],callback: ()=>areachart.areachart=true});dht.read(evt=>{document.getElementById("temperature").innerHTML=dht.temperature;document.getElementById("humidity").innerHTML=dht.humidity;vartime=newDate();varts=time.getSeconds();vartm=time.getMinutes();varth=time.getHours();vara=[];if(areachart.areachart){chart_div.style.display="block";a[0]=th+":"+tm+":"+ts;a[1]=dht.temperature;a[2]=dht.humidity;areachart.origin.push(a);drawAreaChart(areachart.origin);}if(areachart.gauge){chart_div.style.display="none";areachart.origin1=[["Label","Value"],["humidity",humidity]];areachart.origin2=[["Label","Value"],["temperature",temperature]];drawGuage(areachart.origin1,areachart.origin2);}},1000);});functiondrawAreaChart(d){if(!Array.isArray(d))return;vartitleTextStyle={fontName: "微軟正黑體",bold: true,italic: false};vardata=google.visualization.arrayToDataTable(d);varoptions={title: "",hAxis: {title: "時間",titleTextStyle: titleTextStyle},vAxis: {title: "溫濕度",minValue: 0,titleTextStyle: titleTextStyle},chartArea: {top: 50,left: 50,width: "70%",height: "70%"},colors: ['#f00','#00f']};varcode=newgoogle.visualization.AreaChart(chart_div);returncode.draw(data,options);}

Demo：

---

利用 Google Charts 繪製溫濕度指針

vardht;vargauge;varchart_div=document.getElementById("chart_div");varchart_div1=document.getElementById("chart_div1");varchart_div2=document.getElementById("chart_div2");vartemperature=document.getElementById("temperature");varhumidity=document.getElementById("humidity");boardReady({device: 'wa8w'},function(board){board.systemReset();board.samplingInterval=20;dht=getDht(board,11);vargauge={guage: false,origin1: [["Label","Value"],["humidity",55]],origin2: [["Label","Value"],["temperature",30]]};google.load("visualization","1",{packages: ["gauge"],callback: ()=>gauge.gauge=true});dht.read(evt=>{temperature.innerHTML=dht.temperature;humidity.innerHTML=dht.humidity;vartime=newDate();varts=time.getSeconds();vartm=time.getMinutes();varth=time.getHours();vara=[];if(gauge.areachart){chart_div.style.display="block";chart_div1.style.display="none";chart_div2.style.display="none";a[0]=th+":"+tm+":"+ts;a[1]=dht.temperature;a[2]=dht.humidity;gauge.origin.push(a);drawAreaChart(gauge.origin);}if(gauge.gauge){chart_div.style.display="none";chart_div1.style.display="inline-block";chart_div2.style.display="inline-block";gauge.origin1=[["Label","Value"],["humidity",dht.humidity]];gauge.origin2=[["Label","Value"],["temperature",dht.temperature]];drawGuage(gauge.origin1,gauge.origin2);}},1000);});functiondrawGuage(d1,d2){if(!Array.isArray(d1)||!Array.isArray(d2))return;vardata1=google.visualization.arrayToDataTable(d1);vardata2=google.visualization.arrayToDataTable(d2);varoptions1={width: 400,height: 200,redFrom: 90,redTo: 100,yellowFrom:75,yellowTo: 90,minorTicks: 5,redColor:"#00f",yellowColor:"#9cf",animation:{easing:"in"}};varoptions2={width: 400,height: 200,redFrom: 90,redTo: 100,yellowFrom:75,yellowTo: 90,minorTicks: 5,animation:{easing:"in"}};varchart1=newgoogle.visualization.Gauge(chart_div1);chart1.draw(data1,options1);varchart2=newgoogle.visualization.Gauge(chart_div2);chart2.draw(data2,options2);}

Demo：

---

利用 Firebase 記錄溫濕度

詳細教學說明

vardht,myFirebase;vartemperature=document.getElementById("temperature");varhumidity=document.getElementById("humidity");boardReady({device: 'kzpV'},board=>{board.systemReset();board.samplingInterval=20;dht=getDht(board,10);myFirebase=newFirebase("https://<Your-Firebase>.firebaseio.com/");dht.read(evt=>{temperature.innerHTML=dht.temperature;humidity.innerHTML=dht.humidity;myFirebase.push({date: get_date(),time: get_time(),temperature: dht.temperature,humidity: dht.humidity});},1000);});functionget_date(){varnowDay=newDate(),nowYear=nowDay.getFullYear(),nowMonth=nowDay.getMonth()+1,nowDate=nowDay.getDate();returnnowYear+"/"+nowMonth+"/"+nowDate;}functionget_time(){varnowTime=newDate(),nowHours=nowTime.getHours(),nowMinutes=nowTime.getMinutes(),nowSeconds=nowTime.getSeconds();returnnowHours+":"+nowMinutes+":"+nowSeconds;}

Demo：

---

蜂鳴器 (Buzzer)

Webduino 官方教學範例 - 蜂鳴器

接線

• 正極：11
• 負極：GND

嗡鳴器發出「獻給愛麗絲」

varbuzzer;// 獻給愛麗絲varmusic=[{notes:"E4",tempos:"6"},{notes:"DS4",tempos:"6"},{notes:"E4",tempos:"4"},{notes:"DS4",tempos:"4"},{notes:"E4",tempos:"4"},{notes:"B3",tempos:"4"},{notes:"D4",tempos:"4"},{notes:"C4",tempos:"4"},{notes:"A3",tempos:"4"},{notes:"0",tempos:"4"},{notes:"C3",tempos:"6"},{notes:"E3",tempos:"6"},{notes:"A3",tempos:"6"},{notes:"B3",tempos:"4"},{notes:"0",tempos:"4"},{notes:"D3",tempos:"6"},{notes:"GS3",tempos:"6"},{notes:"B3",tempos:"6"},{notes:"C4",tempos:"4"}];boardReady({device: 'wa8w'},board=>{board.systemReset();board.samplingInterval=20;buzzer=getBuzzer(board,11);buzzer.play(buzzer_music(music).notes,buzzer_music(music).tempos);});functionbuzzer_music(m){varmusicNotes={notes: [],tempos: []};if(m[0].notes.length>1){for(vari=0;i<m.length;i++){if(Array.isArray(m[i].notes))musicNotes.notes=musicNotes.notes.concat(m[i].notes);elsemusicNotes.notes.push(m[i].notes);if(Array.isArray(m[i].tempos))musicNotes.tempos=musicNotes.tempos.concat(m[i].tempos);elsemusicNotes.tempos.push(m[i].tempos);}}else{musicNotes.notes=[m[0].notes];musicNotes.tempos=[m[0].tempos];}returnmusicNotes;}

---

聲音偵測傳感器 (Sound Detector Sensor)

主要用於偵測是否有聲音，在聲音偵測傳感器上有一個十字旋鈕，可用螺絲起子自行調整零敏度

Webduino 官方教學範例 - 聲音偵測傳感器

接線

• GND：GND
• OUT：10
• 5V：5V

聲音偵測傳感器 偵測是否有聲音

varsound;vardemo=document.getElementById("demo");boardReady({device: 'wa8w'},board=>{board.systemReset();board.samplingInterval=20;sound=getSound(board,10);sound.on("detected",()=>demo.innerHTML="有聲音");sound.on("ended",()=>demo.innerHTML="沒聲音");});

---

伺服馬達 (Servomotor, SG90)

伺服馬達有機械結構上的限制，旋轉角度大約為 180 度，可能是 1 ~ 180 度，也可能是 -5 度到 174 度...等

Webduino 官方教學範例 - 伺服馬達

接線

• 橘：11
• 紅：5V
• 棕：GND

控制 伺服馬達 轉動角度

varservo;varbar=document.getElementById("bar");varbar_value=document.getElementById("bar_value");boardReady({device: 'wa8w'},board=>{board.systemReset();board.samplingInterval=20;servo=getServo(board,11);bar.setAttribute("min",0);bar.setAttribute("max",180);bar.setAttribute("step",5);bar.setAttribute("value",90);bar.oninput=_value=>{_value=bar.value;bar_value.innerHTML=_value;servo.angle=_value;};});

Demo：

---

LED 點矩陣 (8 x 8 LED matrix)

為 8 × 8 的 LED 點矩陣，可用 16 個字元的代碼將 LED 點矩陣排出多種圖形或是文字

16 個字元內每 2 個字元為 1 個單位，共有 8 組，透過十六進位與二進位之間的轉換，來表示該亮哪些燈

如果想要快速產生圖形代碼可至官方的「Webduino LED 點矩陣代碼產生器」

• LED 點矩陣全暗的代碼是 16 個 0：0000000000000000
• LED 點矩陣全亮的代碼是 16 個 f：ffffffffffffffff

Webduino 官方教學範例 - LED 點矩陣

接線

• VCC：VCC
• GND：GND
• DIN：2
• CS (晶片選擇)：3
• CLK (時脈)：4

實際接線照片

利用 LED 點矩陣 顯示「XD」

varmatrix;boardReady({device: 'wa8w'},board=>{board.systemReset();board.samplingInterval=20;matrix=getMax7219(board,2,3,4);matrix.animateStop();matrix.on("0000000000000000");matrix.on("316aaaa4a4aa6a31");// XD});

Demo：

---

LED 點矩陣 (8 x 8 LED matrix) & 按鈕開關 (Button)

接線

• LED 點矩陣 (8 x 8 LED matrix)
  • VCC：VCC
  • GND：GND
  • DIN：2
  • CS (晶片選擇)：3
  • CLK (時脈)：4
• 按鈕開關 (Button)
  • 3.3V
  • 12
  • 按鈕開關 → 電阻 → GND

實際接線照片

利用 按鈕開關 執行倒數計時，並將時間顯示在 LED 點矩陣 上

varmatrix;vartimer=20;varisStartTimer=false;// 0, 1, 2, 3, 4, 5, 6 ,7, 8, 9varmatrixStr=["7e81817e","8482ff80","c6a1918e","66819966","1f10ff10","4f898971","7e898971","07c1310f","7689916e","8e91917e"];vardemo=document.getElementById("demo");boardReady({device: 'wa8w'},function(board){board.systemReset();board.samplingInterval=20;button=getButton(board,12);matrix=getMax7219(board,2,3,4);matrix.animateStop();matrix.on("0000000000000000");demo.innerHTML=timer;matrix.on(timerFormat());button.on("pressed",()=>countSecond());});functiontimerFormat(){timer10=timer<10 ? 0 : Math.floor(timer/10);timer1=timer<10 ? timer : timer-timer10*10;returnmatrixStr[timer10]+matrixStr[timer1];}functioncountSecond(){timer-=1;demo.innerHTML=timer;matrix.on(timerFormat());if(timer<=0){matrix.on("316aaaa4a4aa6a31");// XDsetTimeout(()=>timer=30,3000);}elsesetTimeout("countSecond()",1000);}

Demo：

---

LED 點矩陣 (8 x 8 LED matrix) & 土壤濕度傳感器 (Soil Moisture Sensor)

Webduino 官方教學範例 - 偵測土壤濕度並由 LED 點矩陣顯示

接線

• LED 點矩陣 (8 x 8 LED matrix)
  • VCC：VCC
  • GND：GND
  • DIN：7
  • CS (晶片選擇)：8
  • CLK (時脈)：9
• 土壤濕度傳感器 (Soil Moisture Sensor)
  • 正極：VCC
  • 負極：GND
  • S：A3 (A：類比訊號)

實際接線照片

利用 土壤濕度傳感器 偵測土壤濕度，並將數值顯示在 LED 點矩陣 上

varsoil,matrix,value;vardemo=document.getElementById("demo");boardReady({device: 'kzpV'},board=>{board.systemReset();board.samplingInterval=250;soil=getSoil(board,3);matrix=getMax7219(board,7,8,9);soil.on(val=>{soil.detectedVal=val;value=Math.round(soil.detectedVal);demo.innerHTML=value;if(a<10){matrix.animateStop();matrix.on("0000000000000000");matrix.on((max7219_number(value)));}else{matrix.animateStop();// 愛心matrix.animate(max7219_horse("left","0c1e3e7c3e1e0c00"),100);}});});

---

水泵 (Water Pump) & 繼電器 (Relay, JQC-3FF-S-Z)

Webduino 官方教學範例 - 操控水泵

接線

• 水泵 (Water Pump)
  • 5V (紅)：繼電器 COM
  • GND (白)：GND
• 繼電器 (Relay, JQC-3FF-S-Z)
  • NO：VCC
  • COM：水泵 5V (紅)
  • VCC：3.3V
  • GND：GND
  • IN：11

實際接線照片

利用 繼電器 操控 水泵

varrelay;varbtnON=document.getElementById("btnON");varbtnOFF=document.getElementById("btnOFF");boardReady({device: 'kzpV'},board=>{board.systemReset();board.samplingInterval=20;relay=getRelay(board,11);btnON.addEventListener("click",()=>relay.on());btnOFF.addEventListener("click",()=>relay.off());});

---

計時器 (8 x 8 LED matrix)

Youtube

將超音波當下感測物品的距離數值當作計時器的開始倒數時間，最高 60 秒，同時還能即時在 LED 矩陣上看到時間。當按下按鈕後會依當下感測物體的距離數值開始倒數計時，當歸 0 時，你會看到 LED 矩陣顯示出笑臉 XD，而且 LED 燈會亮，並且會聽到嗡鳴器發出「獻給愛麗絲」的曲子，當曲子停止後，燈也會熄滅，LED 矩陣會改變成當下感測物體的距離數值

接線

• LED
  • 短腳：GND
  • 長腳：13
• 按鈕開關 (Button)
  • 3.3V
  • 12
  • 按鈕開關 → 電阻 → GND
• 蜂鳴器 (Buzzer)
  • 正極：7
  • 負極：GND
• 超音波傳感器 (Ultrasonic Sensor, HC-SRO4+)
  • VCC：3.3V
  • Trig：9
  • Echo：8
  • GND：GND
• LED 點矩陣 (8 x 8 LED matrix)
  • VCC：VCC
  • GND：GND
  • DIN：2
  • CS (晶片選擇)：3
  • CLK (時脈)：4

實際接線照片

Source code：計時器 (8 x 8 LED matrix)

---

計時器 (8 x 8 LED matrix, Google Voice)

承接上面的範例，加入 Google 語音：說出「計時」即可開始倒數計時

接線

• LED
  • 短腳：GND
  • 長腳：13
• 按鈕開關 (Button)
  • 3.3V
  • 12
  • 按鈕開關 → 電阻 → GND
• 蜂鳴器 (Buzzer)
  • 正極：7
  • 負極：GND
• 超音波傳感器 (Ultrasonic Sensor, HC-SRO4+)
  • VCC：3.3V
  • Trig：9
  • Echo：8
  • GND：GND
• LED 點矩陣 (8 x 8 LED matrix)
  • VCC：VCC
  • GND：GND
  • DIN：2
  • CS (晶片選擇)：3
  • CLK (時脈)：4

實際接線照片

Source code：計時器 (8 x 8 LED matrix, Google Voice)