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 長腳

實際接線照片

var led;

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 長腳

var led;
var light = 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 長腳

實際接線照片

點擊燈泡圖片 切換

var led_red, led_yellow;
var light = 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";
    });
});

---

自動間隔幾秒後 切換

var led_red, led_yellow;
var light = 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 秒後換綠燈亮 (其他不亮)

var led_red, led_yellow, led_green;
var light = document.getElementById("light");

(async function () {
    boardReady({device: 'wa8w'}, async board => {
        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);
    });
}());

async function Traffic_Light() {
    if (light.className == "off") {
        await delay(2);
        led_red.off();
        led_yellow.on();
        led_green.off();
        await delay(2);
        led_red.on();
        led_yellow.off();
        led_green.off();
        light.className = "on";
    } else {
        await delay(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

實際接線照片

超音波 顯示 擷取距離

var ultrasonic;

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);
});

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

var ultrasonic;

boardReady({device: 'kzpV'}, board => {
    board.systemReset();
    board.samplingInterval = 250;
    ultrasonic = getUltrasonic(board, 11, 10);
    ultrasonic.ping(cm => {
        console.log(ultrasonic.distance);
        var imageWidth = ultrasonic.distance;
        var imageHeight = 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 調色盤

var rgbled;

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 顏色

var rgbled;

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');
});

function changeColor(btn, color) {
    document.getElementById(btn).addEventListener("click",() => {
        rgbled.setColor(color);
        document.getElementById("show").style.background = color;
    });
}

Demo：

---

利用拉霸調整 三色 LED 顏色

var rgbled;
var color = {"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);
});

function changeColor(e) {
    var id = e.target.id;
    color[id] = e.target.value * 1;
    color[id] = color[id] < 17 ? "0" + color[id].toString(16) : color[id].toString(16);
    var rgb = "#" + color.red + color.green + color.blue;
    rgbled.setColor(rgb);
    document.getElementById("show").style.background = rgb;
}

Demo：

---

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

var rgbled, timer, time = 300;
var light = 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);
        }
    });
});

function delay(time) {
    return new Promise(resolve => timer = setTimeout(resolve, time));
}

function repeat() {
    delay(1).then(() => { rgbled.setColor('#f00'); return delay(time);
    }).then(() => { rgbled.setColor('#f90'); return delay(time);
    }).then(() => { rgbled.setColor('#ff3'); return delay(time);
    }).then(() => { rgbled.setColor('#3f3'); return delay(time);
    }).then(() => { rgbled.setColor('#33f'); return delay(time);
    }).then(() => { rgbled.setColor('#c6c'); return delay(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 燈 顏色

var rgbled, ultrasonic, i = 0;
var color = ["#f00", "#f90", "#ff0", "#3f3", "#33f", "#c6c"];
var show = 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

實際接線照片

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

var button;
var show = 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

var button, count = 0;
var show = 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);
});

---

按按鈕 比賽跑

var button;
var NpcShow = 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);
});

function go() {
    Start.className = "go";
    GameA = 0, GameB = 0;
    button.on("pressed", userRun);
    Timer = setInterval(NPCRun, 120);
}

function userRun() {
    UserShow.innerHTML = GameA += 5;
    User.style.marginLeft = GameA + "px";
    if (GameA >= Distance) {
        alert("You Win !!!");
        stop();
    }
}

function NPCRun() {
    NpcShow.innerHTML = GameB += NpcSpeed;
    Npc.style.marginLeft = GameB + "px";
    if (GameB >= Distance) {
        alert("GAME OVER !!! You Lose !!!");
        stop();
    }
}

function stop() {
    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

var pir, led;
var light = 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

實際接線照片

顯示溫度、濕度

var dht;

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 繪製溫濕度圖表

var dht;
var chart_div = document.getElementById("chart_div");

boardReady({device: 'wa8w'}, board => {
    board.systemReset();
    board.samplingInterval = 20;
    dht = getDht(board, 11);

    var areachart = {
        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;
        var time = new Date();
        var ts = time.getSeconds();
        var tm = time.getMinutes();
        var th = time.getHours();
        var a = [];
        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);
});

function drawAreaChart(d) {
    if (!Array.isArray(d)) return;
    var titleTextStyle = {
        fontName: "微軟正黑體",
        bold: true,
        italic: false
    };
    var data = google.visualization.arrayToDataTable(d);
    var options = {
        title: "",
        hAxis: {title: "時間", titleTextStyle: titleTextStyle},
        vAxis: {title: "溫濕度", minValue: 0, titleTextStyle: titleTextStyle},
        chartArea: {top: 50, left: 50, width: "70%", height: "70%"},
        colors: ['#f00', '#00f']
    };
    var code = new google.visualization.AreaChart(chart_div);
    return code.draw(data, options);
}

Demo：

---

利用 Google Charts 繪製溫濕度指針

var dht;
var gauge;
var chart_div = document.getElementById("chart_div");
var chart_div1 = document.getElementById("chart_div1");
var chart_div2 = document.getElementById("chart_div2");
var temperature = document.getElementById("temperature");
var humidity = document.getElementById("humidity");

boardReady({device: 'wa8w'}, function (board) {
    board.systemReset();
    board.samplingInterval = 20;
    dht = getDht(board, 11);

    var gauge = {
        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;
        var time = new Date();
        var ts = time.getSeconds();
        var tm = time.getMinutes();
        var th = time.getHours();
        var a = [];
        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);
});

function drawGuage(d1,d2) {
    if (!Array.isArray(d1) || !Array.isArray(d2))
        return;
    var data1 = google.visualization.arrayToDataTable(d1);
    var data2 = google.visualization.arrayToDataTable(d2);
    var options1 = {
        width: 400, height: 200,
        redFrom: 90, redTo: 100,
        yellowFrom:75, yellowTo: 90,
        minorTicks: 5,
        redColor:"#00f", yellowColor:"#9cf",
        animation:{easing:"in"}
    };
    var options2 = {
        width: 400, height: 200,
        redFrom: 90, redTo: 100,
        yellowFrom:75, yellowTo: 90,
        minorTicks: 5,
        animation:{easing:"in"}
    };
    var chart1 = new google.visualization.Gauge(chart_div1);
    chart1.draw(data1, options1);
    var chart2 = new google.visualization.Gauge(chart_div2);
    chart2.draw(data2, options2);
}

Demo：

---

利用 Firebase 記錄溫濕度

詳細教學說明

var dht, myFirebase;
var temperature = document.getElementById("temperature");
var humidity = document.getElementById("humidity");

boardReady({device: 'kzpV'}, board => {
    board.systemReset();
    board.samplingInterval = 20;
    dht = getDht(board, 10);
    myFirebase = new Firebase("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);
});

function get_date() {
    var nowDay = new Date(),
        nowYear = nowDay.getFullYear(),
        nowMonth = nowDay.getMonth() + 1,
        nowDate = nowDay.getDate();
    return nowYear + "/" + nowMonth + "/" + nowDate;
}
  
function get_time() {
    var nowTime = new Date(),
        nowHours = nowTime.getHours(),
        nowMinutes = nowTime.getMinutes(),
        nowSeconds = nowTime.getSeconds();
    return nowHours + ":" + nowMinutes + ":" + nowSeconds;
}

Demo：

---

蜂鳴器 (Buzzer)

Webduino 官方教學範例 - 蜂鳴器

接線

• 正極：11
• 負極：GND

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

var buzzer;
// 獻給愛麗絲
var music = [
    {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);
});

function buzzer_music(m) {
    var musicNotes = { notes: [], tempos: [] };
    if (m[0].notes.length > 1) {
        for (var i = 0; i < m.length; i++) {
            if (Array.isArray(m[i].notes))
                musicNotes.notes = musicNotes.notes.concat(m[i].notes);
            else
                musicNotes.notes.push(m[i].notes);
            if (Array.isArray(m[i].tempos))
                musicNotes.tempos = musicNotes.tempos.concat(m[i].tempos);
            else
                musicNotes.tempos.push(m[i].tempos);
        }
    } else {
        musicNotes.notes = [m[0].notes];
        musicNotes.tempos = [m[0].tempos];
    }
    return musicNotes;
}

---

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

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

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

接線

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

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

var sound;
var demo = 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

控制 伺服馬達 轉動角度

var servo;
var bar = document.getElementById("bar");
var bar_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」

var matrix;

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 點矩陣 上

var matrix;
var timer = 20;
var isStartTimer = false;
// 0, 1, 2, 3, 4, 5, 6 ,7, 8, 9
var matrixStr = ["7e81817e", "8482ff80", "c6a1918e", "66819966", "1f10ff10", 
                 "4f898971", "7e898971", "07c1310f", "7689916e", "8e91917e"];
var demo = 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());
});

function timerFormat() {
    timer10 = timer < 10 ? 0 : Math.floor(timer / 10);
    timer1 = timer < 10 ? timer : timer - timer10 * 10;
    return matrixStr[timer10] + matrixStr[timer1];
}

function countSecond() {
    timer -= 1;
    demo.innerHTML = timer;
    matrix.on(timerFormat());
    if (timer <= 0) {
        matrix.on("316aaaa4a4aa6a31");  // XD
        setTimeout(() => timer = 30, 3000);
    } else
        setTimeout("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 點矩陣 上

var soil, matrix, value;
var demo = 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

實際接線照片

利用 繼電器 操控 水泵

var relay;
var btnON = document.getElementById("btnON");
var btnOFF = 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)