###### tags: `110北中筆記` # Web:bit物聯網程式設計 #### 30105周俞辰 ## 一、Webduino Blockly程式練習 - [x] 01抽籤並朗讀姓名 - [x] 02大樂透自動選號 - [x] 03隨機組合朗讀語句 - [x] 04小時鐘 - [x] 05語音報時 ### 01 抽籤並朗讀姓名 [01 抽籤並朗讀姓名](https://blocklypro.webduino.io/#Rzavg1qEpp) ![01 抽籤並朗讀姓名](https://i.imgur.com/LBADlFr.png) ```javascript= var name2; var result; function lists_random_item(list, remove) { let x = Math.floor(Math.random() * list.length); if (remove) { return list.splice(x, 1)[0]; } else { return list[x]; } } name2 = ['蔡英文', '馬英九', '宋楚瑜', '賴清德', '柯文哲']; result = (lists_random_item(name2, false)); document.getElementById('demo-area-01-show').innerHTML = result; speak((['恭喜',result,'確診'].join(''))); ``` ### 02 大樂透自動選號 [02 大樂透自動選號](https://blocklypro.webduino.io/#XQBdjLvbJD) ![02 大樂透自動選號](https://i.imgur.com/w3tUmmy.png) ```javascript= var arr; var result; var i; var j; var position; var num; function math_random_int(a, b) { if (a > b) { // Swap a and b to ensure a is smaller. var c = a; a = b; b = c; } return Math.floor(Math.random() * (b - a + 1) + a); } arr = []; for (i = 1; i <= 49; i++) { arr[i - 1] = i; } result = []; for (j = 1; j <= 6; j++) { position = math_random_int(1, (arr.length)); num = (arr.splice((position - 1), 1)[0]); result[j - 1] = num; } document.getElementById('demo-area-01-show').innerHTML = result; document.getElementById('demo-area-01-show').style.fontSize = 30 + 'px'; speak((['本期大樂透選號為:',result,',祝您中大獎'].join(''))); ``` ### 03 隨機組合朗讀語句 [03 隨機組合朗讀語句](https://blocklypro.webduino.io/#RolzAQ8xZ9) ![03.隨機組合朗讀語句](https://i.imgur.com/nLYvL8N.png) ```javascript= var arr1; var arr2; var arr3; var result; function lists_random_item(list, remove) { let x = Math.floor(Math.random() * list.length); if (remove) { return list.splice(x, 1)[0]; } else { return list[x]; } } arr1 = ['你好,', '哈囉,', '大家好,']; arr2 = ['我是露西', '我是掰咖峻', '我是️晉瑋台灣台東之子大麻煩要投油土伯歐薩斯']; arr3 = ['你要不要信教', '我只能從1數到18', '幹,麻煩大了']; result = [(lists_random_item(arr1, false)),(lists_random_item(arr2, false)),(lists_random_item(arr3, false))].join(''); document.getElementById('demo-area-01-show').innerHTML = result; document.getElementById('demo-area-01-show').style.fontSize = 20 + 'px'; speak(result); ``` ### 04 小時鐘 [04 小時鐘](https://blocklypro.webduino.io/#XQBdobxqJY) ![04 小時鐘](https://i.imgur.com/DVjnmp8.png) ```javascript= (async function () { var h; var m; var s; var time; function get_time(t) { var varTime = new Date(), varHours = varTime.getHours(), varMinutes = varTime.getMinutes(), varSeconds = varTime.getSeconds(); var varNow; if (t == "hms") { varNow = varHours + ":" + varMinutes + ":" + varSeconds; } else if (t == "h") { varNow = varHours; } else if (t == "m") { varNow = varMinutes; } else if (t == "s") { varNow = varSeconds; } return varNow; } while (!false) { h = get_time("h"); m = get_time("m"); s = get_time("s"); if (h < 10) { h = String(0) + String(h); } if (m < 10) { m = String(0) + String(m); } if (s < 10) { s = String(0) + String(s); } time = [h,':',m,':',s].join(''); document.getElementById('demo-area-01-show').innerHTML = time; await delay(1); } }()); ``` ### 05 語音報時 [05 語音報時](https://blocklypro.webduino.io/#RajYxAz2nL) ![05 語音報時](https://i.imgur.com/tbOE0o0.png) ```javascript= (async function () { var h; var m; var text; var s; var time; function getElement(dom) { var element = document.querySelector(dom); return element; } function controllerBtnEvent(c, e, callback) { if (e !== 'click') { var _u = navigator.userAgent; if (_u.indexOf('Android') > -1 || _u.indexOf('iPhone') > -1 || _u.indexOf('iPad') > -1) { c.addEventListener(e[1], async function () { callback(); }); } else { c.addEventListener(e[0], async function () { callback(); }); } } else { c.addEventListener('click', async function () { callback(); }); } } function get_time(t) { var varTime = new Date(), varHours = varTime.getHours(), varMinutes = varTime.getMinutes(), varSeconds = varTime.getSeconds(); var varNow; if (t == "hms") { varNow = varHours + ":" + varMinutes + ":" + varSeconds; } else if (t == "h") { varNow = varHours; } else if (t == "m") { varNow = varMinutes; } else if (t == "s") { varNow = varSeconds; } return varNow; } async function SHOW() { h = get_time("h"); m = get_time("m"); s = get_time("s"); if (h < 10) { h = String(0) + String(h); } if (m < 10) { m = String(0) + String(m); } if (s < 10) { s = String(0) + String(s); } time = [h,':',m,':',s].join(''); document.querySelector("#demo-area-09 .btn-show").innerHTML = time; await delay(1); SHOW(); } controllerBtnEvent(getElement('#demo-area-09 .btn-num1'),'click', async function () { speak((['現在時間是',h,'點',m,'分',s,'秒'].join(''))); }); SHOW(); controllerBtnEvent(getElement('#demo-area-09 .btn-num2'),'click', async function () { if (h > 0 && h < 5) { text = '凌晨'; } else if (h == 0) { text = '半夜'; } else if (h >= 5 && h < 12) { text = '上午'; } else if (h == 12) { text = '中午'; } else if (h > 12 && h < 18) { text = '下午'; } else if (h >= 18 && h <= 23) { text = '晚上'; } speak((['現在時間是',text,h,'點',m,'分',s,'秒'].join(''))); }); }()); ``` ## 二、WebBit開發版基本操作 - [x] 01 心跳撲通通(全彩LED矩陣) - [X] 02 看誰按得快(按鈕開關) - [X] 03 流動的沙子(九軸感應器) - [X] 04 隨機顯示數字 - [X] 05 溫度計 - [X] 06 搖骰子 - [X] 07 指北針 - [X] 08 計步器 - [X] 09 播放音樂(&音效語音) - [x] Line 作業1~回傳表情符號 - [x] Line 作業2~回傳氣象資訊 - [x] 作業1:怪獸亂跑亂轉 - [x] 作業2:鍵盤控制怪獸移動 - [x] 作業3:顯示倒數5秒 - [x] 作業4:語音客服 - [x] 作業5:抽籤選學生 - [x] 作業6:空氣品質即時資訊 - [x] 作業7:偵測亮度及溫度 - [x] 作業8:計步器 ### 1 心跳撲通通 [1 心跳撲通通](https://webbit.webduino.io/blockly/?demo=default#Jyg99vX4v8Bq4) ![1 心跳撲通通](https://i.imgur.com/OM2IEjW.png) ```javascript= Web:Bit 教育版 積木程式碼 (async function() { boardReady({ board: 'Bit', url: '127.0.0.1:8080', multi: true }, async function(board) { window._board_ = await boardInit_(board, 100, 0); let $lykrf500 = _startLoop_(); while (_loop_[$lykrf500]) { _board_._bit_matrix_.setColor("00000000010000000200000003000000040000000500000006ff00000700000008ff0000090000000a0000000bff00000cff00000dff00000e0000000f0000001000000011ff000012000000130000001400000015000000160000001700000018000000"); await delay(0.5, $lykrf500); _board_._bit_matrix_.setColor("0000000001ff00000200000003ff00000400000005ff000006ff000007ff000008ff000009ff00000aff00000bff00000cff00000dff00000eff00000f00000010ff000011ff000012ff000013000000140000001500000016ff00001700000018000000"); await delay(0.5, $lykrf500); await delay(0.005, true); } }); }()); ``` ### 2 看誰按得快(按鈕開關) [2 看誰按得快](https://webbit.webduino.io/blockly/?demo=default#kRvQQL0kQmDyQ) ![2 看誰按得快](https://i.imgur.com/ssHaeCc.png) ```javascript= (async function() { boardReady({ board: 'Bit', device: 'Webduino Bit', multi: true, transport: 'message', window: window.top.frames[0] }, async function(board) { window._board_ = await boardInit_(board, 100, 0); btnEvent_(_board_._bit_btnA_, 'pressed', async function() { _board_._bit_matrix_.setColor(matrixEmoji_('0010001000111110100000100', '#ff0000')); }, [_board_._bit_btnA_, _board_._bit_btnB_] ); btnEvent_(_board_._bit_btnB_, 'pressed', async function() { _board_._bit_matrix_.setColor(matrixEmoji_('0010000010111110001000100', '#ffff44')); }, [_board_._bit_btnA_, _board_._bit_btnB_] ); btnsEvent_('pressed', async function() { _board_._bit_matrix_.setColor(matrixEmoji_('0111010001100011000101110', '#66ff99')); }, [_board_._bit_btnA_, _board_._bit_btnB_] ); }); }()); ``` ### 3 流動的沙子(九軸感應器) [3 流動的沙子](https://webbit.webduino.io/blockly/?demo=default#nqnoo6aVNQJ3Z) ![3 流動的沙子](https://i.imgur.com/3erbEQ8.png) ```javascript= (async function() { boardReady({ board: 'Bit', device: 'bit5399b', transport: 'mqtt', multi: true }, async function(board) { window._board_ = await boardInit_(board, 250, 0); await detectInit_(_board_, { "acc": true, "ang": true }); mpu9250Fn_.faceBack(_board_, async function() { _board_._bit_matrix_.setColor(matrixEmoji_('0000001010000001000101110', '#ffffff')); }); mpu9250Fn_.rowForward(_board_, async function() { _board_._bit_matrix_.setColor("00ffffff01ffffff02ffffff03ffffff04ffffff05ffffff06ffffff07ffffff08ffffff09ffffff0a0000000b0000000c0000000d0000000e0000000f000000100000001100000012000000130000001400000015000000160000001700000018000000"); }); mpu9250Fn_.rowBack(_board_, async function() { _board_._bit_matrix_.setColor("000000000100000002000000030000000400000005000000060000000700000008000000090000000a0000000b0000000c0000000d0000000e0000000fffffff10ffffff11ffffff12ffffff13ffffff14ffffff15ffffff16ffffff17ffffff18ffffff"); }); mpu9250Fn_.pitchLeft(_board_, async function() { _board_._bit_matrix_.setColor("00ffffff01ffffff02000000030000000400000005ffffff06ffffff0700000008000000090000000affffff0bffffff0c0000000d0000000e0000000fffffff10ffffff11000000120000001300000014ffffff15ffffff160000001700000018000000"); }); mpu9250Fn_.pitchRight(_board_, async function() { _board_._bit_matrix_.setColor("00000000010000000200000003ffffff04ffffff05000000060000000700000008ffffff09ffffff0a0000000b0000000c0000000dffffff0effffff0f000000100000001100000012ffffff13ffffff14000000150000001600000017ffffff18ffffff"); }); }); }()); ``` ### 04 隨機顯示數字 [04 隨機顯示數字](https://webbit.webduino.io/blockly/?demo=default#jqwKKX4XJj1qO) ![04 隨機顯示數字](https://i.imgur.com/A1ZsKZH.png) ```javascript= (async function() { function math_random_int(a, b) { if (a > b) { // Swap a and b to ensure a is smaller. var c = a; a = b; b = c; } return Math.floor(Math.random() * (b - a + 1) + a); } boardReady({ board: 'Bit', device: 'Webduino Bit', multi: true, transport: 'message', window: window.top.frames[0] }, async function(board) { window._board_ = await boardInit_(board, 100, 0); btnEvent_(_board_._bit_btnA_, 'pressed', async function() { _board_._bit_matrix_.setCharacter(((math_random_int(1, 9))).toString(), '#ff0000'); }, [_board_._bit_btnA_, _board_._bit_btnB_] ); }); }()); ``` ### 05 溫度計 [05 溫度計](https://webbit.webduino.io/blockly/#V3Emm68XobO3l) ![05 溫度計](https://i.imgur.com/n1EnbpE.png) ```javascript= (async function() { boardReady({ board: 'Bit', device: 'Webduino Bit', multi: true, transport: 'message', window: window.top.frames[0] }, async function(board) { window._board_ = await boardInit_(board, 100, 0); await detectInit_(_board_, { "temp": true }); $demoMonster01.talk((_board_._bit_detected_val_.temp)); _board_._bit_matrix_.setString(((_board_._bit_detected_val_.temp)).toString(2), '#ff0000', 2); }); }()); ``` ### 06 搖骰子 [06 搖骰子](https://webbit.webduino.io/blockly/#6yYGG9paombqw) ![06 搖骰子](https://i.imgur.com/AirA5hs.png) ```javascript= (async function() { var _E8_AE_8A_E6_95_B8; function math_random_int(a, b) { if (a > b) { // Swap a and b to ensure a is smaller. var c = a; a = b; b = c; } return Math.floor(Math.random() * (b - a + 1) + a); } boardReady({ board: 'Bit', device: 'Webduino Bit', multi: true, transport: 'message', window: window.top.frames[0] }, async function(board) { window._board_ = await boardInit_(board, 100, 0); await detectInit_(_board_, { "gyr": true }); mpu9250Fn_.shake(_board_, async function() { _E8_AE_8A_E6_95_B8 = math_random_int(1, 6); if (_E8_AE_8A_E6_95_B8 == 1) { _board_._bit_matrix_.setColor(matrixEmoji_('0000000000001000000000000', '#ff0000')); } if (_E8_AE_8A_E6_95_B8 == 2) { _board_._bit_matrix_.setColor(matrixEmoji_('0000000100000000010000000', '#ff0000')); } if (_E8_AE_8A_E6_95_B8 == 3) { _board_._bit_matrix_.setColor(matrixEmoji_('0000000100000000101000000', '#ff0000')); } if (_E8_AE_8A_E6_95_B8 == 4) { _board_._bit_matrix_.setColor(matrixEmoji_('0000001010000000101000000', '#ff0000')); } if (_E8_AE_8A_E6_95_B8 == 5) { _board_._bit_matrix_.setColor(matrixEmoji_('0000001010001000101000000', '#ff0000')); } if (_E8_AE_8A_E6_95_B8 == 6) { _board_._bit_matrix_.setColor(matrixEmoji_('0101000000010100000001010', '#ff0000')); } }); }); }()); ``` ### 07 指北針 [07 指北針](https://webbit.webduino.io/blockly/?demo=default#Qq700jwmZQz3B) ![07 指北針](https://i.imgur.com/wZnXkWs.png) ```javascript= (async function() { boardReady({ board: 'Bit', device: 'bit5399b', transport: 'mqtt', multi: true }, async function(board) { window._board_ = await boardInit_(board, 250, 0); await detectInit_(_board_, { "azi": true }); mpu9250Fn_.faceEast(_board_, async function() { _board_._bit_matrix_.setColor(matrixEmoji_('0010001000111110100000100', '#ff0000')); }); mpu9250Fn_.faceWest(_board_, async function() { _board_._bit_matrix_.setColor(matrixEmoji_('0010000010111110001000100', '#ff0000')); }); mpu9250Fn_.faceSouth(_board_, async function() { _board_._bit_matrix_.setColor(matrixEmoji_('0010000100101010111000100', '#ff0000')); }); mpu9250Fn_.faceNorth(_board_, async function() { _board_._bit_matrix_.setColor(matrixEmoji_('0010001110101010010000100', '#ff0000')); }); let $dbcos418 = _startLoop_(); while (_loop_[$dbcos418]) { $demoMonster01.talk(_board_._bit_mpu9250_val_.azi); await delay(0.005, true); } }); }()); ``` ### 08 計步器 [08 計步器](https://webbit.webduino.io/blockly/?demo=default#N3266KWeJD939) ![08 計步器](https://i.imgur.com/8uNG38Y.png) ```javascript= (async function() { var _E8_A8_88_E6_95_B8; boardReady({ board: 'Bit', device: 'Webduino Bit', multi: true, transport: 'message', window: window.top.frames[0] }, async function(board) { window._board_ = await boardInit_(board, 100, 0); await detectInit_(_board_, { "gyr": true }); _E8_A8_88_E6_95_B8 = 0; $demoMonster01.talk(_E8_A8_88_E6_95_B8); _board_._bit_matrix_.setCharacter(_E8_A8_88_E6_95_B8, '#ff0000'); mpu9250Fn_.shake(_board_, async function() { _E8_A8_88_E6_95_B8 = _E8_A8_88_E6_95_B8 + 1; }); $demoMonster01.talk(_E8_A8_88_E6_95_B8); _board_._bit_matrix_.setCharacter((_E8_A8_88_E6_95_B8 % 10), '#ff0000'); btnEvent_(_board_._bit_btnA_, 'pressed', async function() { $demoMonster01.talk(_E8_A8_88_E6_95_B8); await _board_._bit_matrix_.setStringOnce(_E8_A8_88_E6_95_B8, '#ff0000', 2); }, [_board_._bit_btnA_, _board_._bit_btnB_] ); btnsEvent_('pressed', async function() { _E8_A8_88_E6_95_B8 = 0; $demoMonster01.talk(_E8_A8_88_E6_95_B8); await _board_._bit_matrix_.setStringOnce(_E8_A8_88_E6_95_B8, '#ff0000', 2); }, [_board_._bit_btnA_, _board_._bit_btnB_] ); }); }()); ``` ### 09 播放音樂(&音效語音) [09 播放音樂](https://webbit.webduino.io/blockly/?demo=default#NyWQQwjKwXOqb) ![09 播放音樂](https://i.imgur.com/lJLZ0e8.png) ```javascript= (async function() { boardReady({ board: 'Bit', device: 'Webduino Bit', multi: true, transport: 'message', window: window.top.frames[0] }, async function(board) { window._board_ = await boardInit_(board, 100, 0); btnEvent_(_board_._bit_btnA_, 'pressed', async function() { buzzerPlayEvent_(_board_, 'stop'); await delay(0.1, true); await buzzerPlay_(_board_, [('E5')], [(2)]); await buzzerPlay_(_board_, [('C5')], [(2)]); await buzzerPlay_(_board_, [('G4')], [(2)]); await buzzerPlay_(_board_, [('C5')], [(2)]); await buzzerPlay_(_board_, [('D5')], [(2)]); await buzzerPlay_(_board_, [('G5')], [(2)]); await buzzerPlay_(_board_, [('D5')], [(2)]); await buzzerPlay_(_board_, [('E5')], [(2)]); await buzzerPlay_(_board_, [('D5')], [(2)]); await buzzerPlay_(_board_, [('G4')], [(2)]); await buzzerPlay_(_board_, [('C5')], [(2)]); }, [_board_._bit_btnA_, _board_._bit_btnB_] ); btnEvent_(_board_._bit_btnB_, 'pressed', async function() { buzzerPlayEvent_(_board_, 'stop'); await delay(0.1, true); await buzzerPlay_(_board_, ["E5", "E5", "E5", "0", "E5", "E5", "E5", "0", "E5", "G5", "C5", "D5", "E5", "0", "F5", "F5", "F5", "F5", "F5", "E5", "E5", "0", "E5", "D5", "D5", "E5", "D5", "G5", "0", "G4", "E5", "D5", "C5", "G4", "0", "G4", "E5", "D5", "C5", "A4", "0", "A4", "F5", "E5", "D5", "B4", "0", "G5", "G5", "F5", "D5", "E5", "C5", "0", "G4", "E5", "D5", "C5", "G4", "0", "G4", "E5", "D5", "C5", "A4", "0", "A4", "F5", "E5", "D5", "G5", "G5", "G5", "G5", "A5", "G5", "F5", "D5", "C5"], ["8", "8", "8", "8", "8", "8", "8", "8", "8", "8", "6", "8", "8", "6", "8", "8", "8", "8", "8", "8", "8", "6", "8", "8", "8", "8", "4", "8", "6", "8", "8", "8", "8", "5", "5", "8", "8", "8", "8", "5", "5", "8", "8", "8", "8", "5", "5", "8", "8", "8", "8", "5", "5", "5", "8", "8", "8", "8", "5", "5", "8", "8", "8", "8", "5", "5", "8", "8", "8", "8", "8", "8", "8", "8", "8", "8", "8", "8", "8"]); }, [_board_._bit_btnA_, _board_._bit_btnB_] ); }); }()); ``` ### Line 作業1~回傳表情符號 [Line 作業1~回傳表情符號](https://webbit.webduino.io/blockly/#XROzOd4G7mbyn) ![Line 作業1~回傳表情符號](https://i.imgur.com/dvFlV5P.png) ```javascript= (async function() { let _chatChannel = line_channel('81908425'); _chatChannel.on("value", async function(_e) { let _msg = ""; if (_e.val()) { _msg = _e.val().msg; } if (_msg) { $demoMonster01.talk(_msg); await line_reply(_e.val().uid, { message: " ", stickerPackageId: 1, stickerId: 1, type: "sticker" }, _e.val().rt); } }); }()); ``` ### Line 作業2~回傳氣象資訊 [Line 作業2~回傳氣象資訊](https://webbit.webduino.io/blockly/#7RprMoQXgwB3r) ![Line 作業2~回傳氣象資訊](https://i.imgur.com/H3rVT6D.png) ```javascript= (async function() { let _chatChannel = line_channel('81908425'); _chatChannel.on("value", async function(_e) { let _msg = ""; if (_e.val()) { _msg = _e.val().msg; } if (_msg) { await getWeather('aqi'); if (_msg == '空氣品質') { $demoMonster01.talk(getWeatherAqi('臺南', 'all')); await line_reply(_e.val().uid, getWeatherAqi('臺南', 'all'), _e.val().rt); } } }); }()); ``` ### 作業1:怪獸亂跑亂轉 ![作業1:怪獸亂跑亂轉](https://i.imgur.com/kmjbaex.png) ```javascript= (async function() { let $harem796 = _startLoop_(); while (_loop_[$harem796]) { $demoMonster01.move('random', 30); $demoMonster02.move('random', 30); $demoMonster03.move('random', 30); $demoMonster04.move('random', 30); $demoMonster01.rotate('left', 30); $demoMonster02.rotate('left', 30); $demoMonster03.rotate('left', 30); $demoMonster04.rotate('left', 30); $demoMonster01.rebound(); $demoMonster02.rebound(); $demoMonster03.rebound(); $demoMonster04.rebound(); await delay(0.1, $harem796); await delay(0.005, true); } }()); ``` ### 作業2:鍵盤控制怪獸移動 ![作業2:鍵盤控制怪獸移動](https://i.imgur.com/T1ycvlS.png) ```javascript= (async function() { keyboardEvent(); keyDownCode['code38'] = async function() { $demoMonster01.move('top', 30); }; keyDownCode['code40'] = async function() { $demoMonster01.move('bottom', 30); }; keyDownCode['code37'] = async function() { $demoMonster01.move('left', 30); }; keyDownCode['code39'] = async function() { $demoMonster01.move('right', 30); }; let $vorrq679 = _startLoop_(); while (_loop_[$vorrq679]) { $demoMonster01.rebound(); await delay(0.005, true); } }()); ``` ### 作業3:顯示倒數5秒 ![作業3:顯示倒數5秒](https://i.imgur.com/DqAHWfc.png) ```javascript= (async function() { var i; boardReady({ board: 'Bit', url: '127.0.0.1:8080', multi: true }, async function(board) { window._board_ = await boardInit_(board, 100, 0); $demoMonster01.talk('請按按鈕A開始'); btnEvent_(_board_._bit_btnA_, 'pressed', async function() { let $ydwqp468 = _startLoop_(); for (var i = 5; i >= 1; i -= 1) { if (!_loop_[$ydwqp468]) { break; } _board_._bit_matrix_.setCharacter(i, '#ff0000'); await delay(1, $ydwqp468); await delay(0.001, true); } let $aewql559 = _startLoop_(); for (let count = 0; count < 10; count++) { if (!_loop_[$aewql559]) { break; } _board_._bit_matrix_.setColor(matrixEmoji_('0000000000001000000000000', '#ffff00')); await delay(0.1, $aewql559); _board_._bit_matrix_.setColor(matrixEmoji_('0000000000001000000000000', '#ffff00')); await delay(0.1, $aewql559); await delay(0.001, true); } }, [_board_._bit_btnA_, _board_._bit_btnB_] ); }); }()); ``` ### 作業4:語音客服 ![作業4:語音客服](https://i.imgur.com/1fsgpTV.png) ```javascript= (async function() { let $xwgne62 = _startLoop_(); while (_loop_[$xwgne62]) { $demoMonster01.talk('請問您幾歲?'); await speakAsync('請問您幾歲?', ["zh-TW", 1, 1]); await textInput(); if ((thisInputVal) < 7) { $demoMonster01.talk('您可以免費入場'); await speakAsync('您可以免費入場', ["zh-TW", 1, 1]); } else { $demoMonster01.talk('請購票入場'); await speakAsync('請購票入場', ["zh-TW", 1, 1]); } await delay(0.005, true); } }()); ``` ### 作業5:抽籤選學生 ![作業5:抽籤選學生](https://i.imgur.com/Aqbpnac.png) ```javascript= var _E5_90_8D_E5_96_AE; function lists_random_item(list, remove) { let x = Math.floor(Math.random() * list.length); if (remove) { return list.splice(x, 1)[0]; } else { return list[x]; } } _E5_90_8D_E5_96_AE = ['蔡英文', '韓國瑜', '連勝文', '陳其邁', '柯文哲', '馬英九']; $demoMonster01.click(function() { $demoMonster01.talk((lists_random_item(_E5_90_8D_E5_96_AE, false))); }); ``` ### 作業6:空氣品質即時資訊 ![作業6:空氣品質即時資訊](https://i.imgur.com/ztEv8CL.png) ```javascript= (async function() { var AQI; boardReady({ board: 'Bit', device: 'bit94358', transport: 'mqtt', multi: true }, async function(board) { window._board_ = await boardInit_(board, 250, 2); let $fbjsn809 = _startLoop_(); while (_loop_[$fbjsn809]) { await getWeather('aqi'); AQI = getWeatherAqi('臺南', 'all'); $demoMonster01.talk(AQI); if (AQI <= 50) { _board_._bit_matrix_.setColor('#44ff44'); $demoMonster02.talk('良好'); } else if (AQI <= 100) { _board_._bit_matrix_.setColor('#ffff00'); $demoMonster02.talk('普通'); } else if (AQI <= 150) { _board_._bit_matrix_.setColor('#ff9900'); $demoMonster02.talk('對敏感族群不健康'); } else { _board_._bit_matrix_.setColor('#ff0000'); $demoMonster02.talk('對所有族群不健康'); } await delay(300, $fbjsn809); await delay(0.005, true); } }); }()); ``` ### 作業7:偵測亮度及溫度 ![作業7:偵測亮度及溫度](https://i.imgur.com/9Smaa6C.png) ```javascript= (async function() { var _E4_BA_AE_E5_BA_A6; function math_mean(myList) { return myList.reduce(function(x, y) { return x + y; }) / myList.length; } boardReady({ board: 'Bit', device: 'bit94358', transport: 'mqtt', multi: true }, async function(board) { window._board_ = await boardInit_(board, 250, 2); await detectInit_(_board_, { "temp": true, "left": true, "right": true }); let $aspvd274 = _startLoop_(); while (_loop_[$aspvd274]) { _E4_BA_AE_E5_BA_A6 = math_mean([(_board_._bit_detected_val_.left), (_board_._bit_detected_val_.right)]); $demoMonster01.talk((['現在溫度', (_board_._bit_detected_val_.temp), '度'].join(''))); $demoMonster03.talk((['平均亮度', _E4_BA_AE_E5_BA_A6, '流明'].join(''))); if (_E4_BA_AE_E5_BA_A6 < 200) { _board_._bit_matrix_.setColor('#ffff44'); } else { _board_._bit_matrix_.off(); } await delay(0.005, true); } }); }()); ``` ### 作業8:計步器 ![作業8:計步器](https://i.imgur.com/8FxNbDo.png) ```javascript= (async function() { var _E8_A8_88_E6_95_B8; boardReady({ board: 'Bit', device: 'bit94358', transport: 'mqtt', multi: true }, async function(board) { window._board_ = await boardInit_(board, 250, 2); await detectInit_(_board_, { "gyr": true }); _E8_A8_88_E6_95_B8 = 0; $demoMonster01.talk(_E8_A8_88_E6_95_B8); _board_._bit_matrix_.setCharacter(_E8_A8_88_E6_95_B8, '#ff0000'); mpu9250Fn_.shake(_board_, async function() { _E8_A8_88_E6_95_B8 = _E8_A8_88_E6_95_B8 + 1; $demoMonster01.talk(_E8_A8_88_E6_95_B8); _board_._bit_matrix_.setCharacter((_E8_A8_88_E6_95_B8 % 10), '#ff0000'); }); btnEvent_(_board_._bit_btnA_, 'pressed', async function() { $demoMonster01.talk(_E8_A8_88_E6_95_B8); await _board_._bit_matrix_.setStringOnce(_E8_A8_88_E6_95_B8, '#ff0000', 2); }, [_board_._bit_btnA_, _board_._bit_btnB_] ); btnsEvent_('pressed', async function() { _E8_A8_88_E6_95_B8 = 0; $demoMonster01.talk(_E8_A8_88_E6_95_B8); _board_._bit_matrix_.setCharacter(_E8_A8_88_E6_95_B8, '#ff0000'); }, [_board_._bit_btnA_, _board_._bit_btnB_] ); }); }()); ``` ## 三、Web:Bit實作練習題 - [X] 01 線上控制測試Bit - [X] 02 跑馬燈(倒數321Go!) - [X] 03 燈號報數 - [X] 04 剪刀石頭布 - [X] 05 環能控光燈 - [X] 06 電子鬧鐘 - [X] 07 空氣品質AQI ### 01 線上控制測試Bit ![01 線上控制測試Bit](https://i.imgur.com/jV8IJoJ.png) ### 02 跑馬燈(倒數321Go!) [02 跑馬燈(倒數321Go!)](https://webbit.webduino.io/blockly/?demo=default#lRQYY9LY1EZRG) ![](https://i.imgur.com/8gR0omb.png) ```javascript= (async function() { boardReady({ board: 'Bit', device: 'bit5399b', transport: 'mqtt', multi: true }, async function(board) { window._board_ = await boardInit_(board, 250, 0); _board_._bit_matrix_.setCharacter('3', '#4444ff'); await delay(1, true); //delay _board_._bit_matrix_.setCharacter('2', '#4444ff'); await delay(1, true); //delay _board_._bit_matrix_.setCharacter('1', '#4444ff'); await delay(1, true); //delay await _board_._bit_matrix_.setStringOnce('Go!', '#ff0000', 2); }); }()); ``` ### 03 燈號報數 [03 燈號報數](https://webbit.webduino.io/blockly/?demo=default#YqKEEDY5WkLy4) ![03 燈號報數](https://i.imgur.com/W2Xn3Py.png) ```javascript= (async function() { var i; boardReady({ board: 'Bit', device: 'Webduino Bit', multi: true, transport: 'message', window: window.top.frames[0] }, async function(board) { window._board_ = await boardInit_(board, 100, 0); let $aedgv711 = _startLoop_(); for (var i = 1; i <= 25; i += 1) { if (!_loop_[$aedgv711]) { break; } _board_._bit_matrix_.setColor((i - 1), '#ff0000'); await delay(0.2, $aedgv711); await delay(0.001, true); } }); }()); ``` ### 04 剪刀石頭布 [04 剪刀石頭布](https://webbit.webduino.io/blockly/?demo=default#Mq011Qne2Bx30) ![04 剪刀石頭布](https://i.imgur.com/DSVaZn3.png) ```javascript= (async function() { boardReady({ board: 'Bit', device: 'Webduino Bit', multi: true, transport: 'message', window: window.top.frames[0] }, async function(board) { window._board_ = await boardInit_(board, 100, 0); btnEvent_(_board_._bit_btnA_, 'pressed', async function() { _board_._bit_matrix_.setColor(matrixEmoji_('1000101010001001101111011', '#4444ff')); }, [_board_._bit_btnA_, _board_._bit_btnB_] ); btnEvent_(_board_._bit_btnA_, 'released', async function() { _board_._bit_matrix_.off(); }, [_board_._bit_btnA_, _board_._bit_btnB_] ); btnEvent_(_board_._bit_btnB_, 'pressed', async function() { _board_._bit_matrix_.setColor(matrixEmoji_('0111011111111110111001110', '#ff0000')); }, [_board_._bit_btnA_, _board_._bit_btnB_] ); btnEvent_(_board_._bit_btnB_, 'released', async function() { _board_._bit_matrix_.off(); }, [_board_._bit_btnA_, _board_._bit_btnB_] ); btnsEvent_('pressed', async function() { _board_._bit_matrix_.setColor(matrixEmoji_('1010101110111110111010101', '#44ff44')); }, [_board_._bit_btnA_, _board_._bit_btnB_] ); btnsEvent_('released', async function() { _board_._bit_matrix_.off(); }, [_board_._bit_btnA_, _board_._bit_btnB_] ); }); }()); ``` ### 05 環能控光燈 [05 環能控光燈](https://webbit.webduino.io/blockly/?demo=default#7qZrrXOkBBgqO) ![05 環能控光燈](https://i.imgur.com/zQWi6mn.png) ```javascript= (async function() { boardReady({ board: 'Bit', device: 'Webduino Bit', multi: true, transport: 'message', window: window.top.frames[0] }, async function(board) { window._board_ = await boardInit_(board, 100, 0); await detectInit_(_board_, { "left": true }); let $tuton100 = _startLoop_(); while (_loop_[$tuton100]) { $demoMonster01.talk((_board_._bit_detected_val_.left)); if ((_board_._bit_detected_val_.left) < 150) { _board_._bit_matrix_.setColor('#ffffff'); _board_._bit_matrix_.brightness(5); } else if ((_board_._bit_detected_val_.left) < 150) { _board_._bit_matrix_.setColor('#ffffff'); _board_._bit_matrix_.brightness(5); } else { _board_._bit_matrix_.off(); } await delay(0.005, true); } }); }()); ``` ### 06 電子鬧鐘 [06 電子鬧鐘](https://webbit.webduino.io/blockly/?demo=default#GqNzzPDgzJAqg) ![06 電子鬧鐘](https://i.imgur.com/Ai3XWuJ.png) ```javascript= (async function() { function get_time(t) { var varTime = new Date(), varHours = varTime.getHours(), varMinutes = varTime.getMinutes(), varSeconds = varTime.getSeconds(); var varNow; if (varHours < 10) { varHours = '0' + varHours; } if (varMinutes < 10) { varMinutes = '0' + varMinutes; } if (varSeconds < 10) { varSeconds = '0' + varSeconds; } if (t == "hms") { varNow = varHours + ":" + varMinutes + ":" + varSeconds; } else if (t == "h") { varNow = varHours * 1; } else if (t == "m") { varNow = varMinutes * 1; } else if (t == "s") { varNow = varSeconds * 1; } return varNow; } function get_date(t) { var varDay = new Date(), varYear = varDay.getFullYear(), varMonth = varDay.getMonth() + 1, varDate = varDay.getDate(); var varNow; if (t == "ymd") { varNow = varYear + "/" + varMonth + "/" + varDate; } else if (t == "mdy") { varNow = varMonth + "/" + varDate + "/" + varYear; } else if (t == "dmy") { varNow = varDate + "/" + varMonth + "/" + varYear; } else if (t == "y") { varNow = varYear; } else if (t == "m") { varNow = varMonth; } else if (t == "d") { varNow = varDate; } return varNow; } boardReady({ board: 'Bit', device: 'Webduino Bit', multi: true, transport: 'message', window: window.top.frames[0] }, async function(board) { window._board_ = await boardInit_(board, 100, 0); $demoMonster01.reset(); $demoMonster02.reset(); $demoMonster03.reset(); $demoMonster04.reset(); let $aohcs426 = _startLoop_(); while (_loop_[$aohcs426]) { if (get_time("hms") == '06:30:00') { $demoMonster01.talk('起床囉!'); await buzzerPlay_(_board_, ["E7", "E7", "0", "E7", "0", "C7", "E7", "0", "G7", "0", "0", "0", "G6", "0", "0", "0", "C7", "0", "0", "G6", "0", "0", "E6", "0", "0", "A6", "0", "B6", "0", "AS6", "A6", "0", "G6", "E7", "0", "G7", "A7", "0", "F7", "G7", "0", "E7", "0", "C7", "D7", "B6", "0", "0", "C7", "0", "0", "G6", "0", "0", "E6", "0", "0", "A6", "0", "B6", "0", "AS6", "A6", "0", "G6", "E7", "0", "G7", "A7", "0", "F7", "G7", "0", "E7", "0", "C7", "D7", "B6", "0", "0"], ["8", "8", "8", "8", "8", "8", "8", "8", "8", "8", "8", "8", "8", "8", "8", "8", "8", "8", "8", "8", "8", "8", "8", "8", "8", "8", "8", "8", "8", "8", "8", "8", "8", "8", "8", "8", "8", "8", "8", "8", "8", "8", "8", "8", "8", "8", "8", "8", "8", "8", "8", "8", "8", "8", "8", "8", "8", "8", "8", "8", "8", "8", "8", "8", "8", "8", "8", "8", "8", "8", "8", "8", "8", "8", "8", "8", "8", "8", "8", "8"]); } else { $demoMonster01.talk(([get_date("ymd"), ("<br/>"), get_time("hms")].join(''))); } await delay(1, $aohcs426); await delay(0.005, true); } }); }()); ``` ### 07 空氣品質AQI [07 空氣品質AQI](https://webbit.webduino.io/blockly/?demo=default#myJ11AEz7gk3d) ![07 空氣品質AQI](https://i.imgur.com/uwUg34y.png) ```javascript= (async function() { boardReady({ board: 'Bit', device: 'Webduino Bit', multi: true, transport: 'message', window: window.top.frames[0] }, async function(board) { window._board_ = await boardInit_(board, 100, 0); await getWeather('aqi'); $demoMonster01.talk(getWeatherAqi('小港', 'all')); if (getWeatherAqi('小港', 'AQI') >= 0 && getWeatherAqi('小港', 'AQI') < 50) { _board_._bit_matrix_.setColor(matrixEmoji_('0101011111111110111000100', '#44ff44')); } else if (getWeatherAqi('小港', 'AQI') >= 51 && getWeatherAqi('小港', 'AQI') < 100) { _board_._bit_matrix_.setColor(matrixEmoji_('0101011111111110111000100', '#ffff44')); } else { _board_._bit_matrix_.setColor(matrixEmoji_('0101011111111110111000100', '#ff0000')); } }); }()); ``` ## 四、ebBit: MoonCar登月小車 - [X] 01 測試全彩LED燈(魔幻LED)的功能1 - [X] 02 測試全彩LED燈(魔幻LED)的功能2 - [X] 03 測試前進、後退、停止 - [X] 04 紅外線遙控 - [X] 05 利用另一塊板子遙控 - [X] 06 手機LINE控制 - [X] 07 顏色偵測 - [X] 08 避障功能 - [X] 09 循跡自走 ### 01 測試全彩LED燈(魔幻LED)的功能1 [01 測試全彩LED燈(魔幻LED)的功能1](https://webbit.webduino.io/blockly/?demo=default#EqdnnY1Me9zy6) ![01 測試全彩LED燈(魔幻LED)的功能1](https://i.imgur.com/t0ggviU.png) ```javascript= (async function() { var i; boardReady({ board: 'Bit', url: '127.0.0.1:8080', multi: true }, async function(board) { window._board_ = await boardInit_(board, 100, 0); let $wlhcx62 = _startLoop_(); for (var i = 1; i <= 8; i += 1) { if (!_loop_[$wlhcx62]) { break; } WS2812.init(board).setColor(i - 1, '#ff0000'); await delay(0.001, true); } }); }()); ``` ### 02 測試全彩LED燈(魔幻LED)的功能2 [02 測試全彩LED燈(魔幻LED)的功能2](https://webbit.webduino.io/blockly/?demo=default#03lYYe70zeayv) ![測試全彩LED燈](https://i.imgur.com/U9eHix1.png) ```javascript= (async function() { var i; var _E9_A1_8F_E8_89_B2; function colour_random() { var num = Math.floor(Math.random() * Math.pow(2, 24)); return '#' + ('00000' + num.toString(16)).substr(-6); } boardReady({ board: 'Bit', url: '127.0.0.1:8080', multi: true }, async function(board) { window._board_ = await boardInit_(board, 100, 0); let $rpqad537 = _startLoop_(); while (_loop_[$rpqad537]) { let $cyisy111 = _startLoop_(); for (var i = 1; i <= 8; i += 1) { if (!_loop_[$cyisy111]) { break; } _E9_A1_8F_E8_89_B2 = colour_random(); WS2812.init(board).setColor(i - 1, _E9_A1_8F_E8_89_B2); await delay(0.001, true); } await delay(0.2, $rpqad537); await delay(0.005, true); } }); }()); ``` ### 03 測試前進、後退、停止 [03 測試前進、後退、停止](https://webbit.webduino.io/blockly/?demo=default#Myodd5PP1nxRv) ![03 測試前進、後退、停止](https://i.imgur.com/Uzo0zEs.png) ```javascript= (async function() { boardReady({ board: 'Bit', url: '127.0.0.1:8080', multi: true }, async function(board) { window._board_ = await boardInit_(board, 100, 0); btnEvent_(_board_._bit_btnA_, 'pressed', async function() { CarTracker.init(board).action(1); }, [_board_._bit_btnA_, _board_._bit_btnB_] ); btnEvent_(_board_._bit_btnB_, 'pressed', async function() { CarTracker.init(board).action(4); }, [_board_._bit_btnA_, _board_._bit_btnB_] ); btnsEvent_('pressed', async function() { CarTracker.init(board).action(0); }, [_board_._bit_btnA_, _board_._bit_btnB_] ); }); }()); ``` ### 04 紅外線遙控 [04 紅外線遙控](https://webbit.webduino.io/blockly/?demo=default#6RLrr1xOOjv3V) ![04 紅外線遙控](https://i.imgur.com/ClY3AQk.png) ```javascript= Web:Bit Web:Bit 教育版 積木程式碼 (async function() { boardReady({ board: 'Bit', device: 'bit5399b', transport: 'mqtt', multi: true }, async function(board) { window._board_ = await boardInit_(board, 250, 2); IrRecv.init(board, 1).receive(async value => { if ((value || '') == 'ff18e7' || (value || '') == '3d9ae3f7') { CarTracker.init(board).action(1); } else if ((value || '') == 'ff4ab5' || (value || '') == '1bc0157b') { CarTracker.init(board).action(4); } else if ((value || '') == 'ff10ef' || (value || '') == '8c22657b') { CarTracker.init(board).action(2); } else if ((value || '') == 'ff5aa5' || (value || '') == '449e79f') { CarTracker.init(board).action(3); } else if ((value || '') == 'ff38c7' || (value || '') == '488fcbb') { CarTracker.init(board).action(0); } }, () => {}); }); CarTracker.init(board).action(1); }()); ``` ### 05 利用另一塊板子遙控 [05 利用另一塊板子遙控](https://webbit.webduino.io/blockly/?demo=default#nqnooWXNJD73Z) ![05 利用另一塊板子遙控](https://i.imgur.com/JgIhrCt.png) ```javascript= (async function() { var webduinoBroadcastor; boardReady({ board: 'Bit', device: 'Webduino Bit', multi: true, transport: 'message', window: window.top.frames[0] }, async function(board) { let _board_ = await boardInit_(board, 100, 0); btnEvent_(_board_._bit_btnA_, 'pressed', async function() { if (!webduinoBroadcastor) { webduinoBroadcastor = new webduino.module.mqttClient(); await webduinoBroadcastor.connect(); } webduinoBroadcastor.send({ topic: 'wenyu', message: ('a').toString() }); }, [_board_._bit_btnA_, _board_._bit_btnB_] ); btnEvent_(_board_._bit_btnB_, 'pressed', async function() { if (!webduinoBroadcastor) { webduinoBroadcastor = new webduino.module.mqttClient(); await webduinoBroadcastor.connect(); } webduinoBroadcastor.send({ topic: 'wenyu', message: ('b').toString() }); }, [_board_._bit_btnA_, _board_._bit_btnB_] ); btnsEvent_('pressed', async function() { if (!webduinoBroadcastor) { webduinoBroadcastor = new webduino.module.mqttClient(); await webduinoBroadcastor.connect(); } webduinoBroadcastor.send({ topic: 'wenyu', message: ('c').toString() }); }, [_board_._bit_btnA_, _board_._bit_btnB_] ); }); boardReady({ board: 'Bit', url: '127.0.0.1:8080', multi: true }, async function(board) { let _board_ = await boardInit_(board, 100, 0); if (!webduinoBroadcastor) { webduinoBroadcastor = new webduino.module.mqttClient(); await webduinoBroadcastor.connect(); } await webduinoBroadcastor.onMessage('wenyu', async (message) => { if (message == 'a') { CarTracker.init(board).action(1); } else if (message == 'b') { CarTracker.init(board).action(4); } else { CarTracker.init(board).action(0); } }); }); }()); ``` ### 06 利用手機的LINE控制小車 [06 利用手機的LINE控制小車](https://webbit.webduino.io/blockly/?demo=default#nqnooWXNJD73Z) ![06 利用手機的LINE控制小車](https://i.imgur.com/JgIhrCt.png) ```python= ``` ### 07 顏色偵測 [07 顏色偵測](https://webbit.webduino.io/blockly/?demo=default#byXZZEnMj2zqO) ![07 顏色偵測](https://i.imgur.com/peS4OUi.png) ```javascript= (async function() { boardReady({ board: 'Bit', url: '127.0.0.1:8080', multi: true }, async function(board) { let _board_ = await boardInit_(board, 100, 0); let $sqoeg155 = _startLoop_(); while (_loop_[$sqoeg155]) { if ((TCS34725.init(board)._id[0] == 1)) { _board_._bit_matrix_.setCharacter('B', '#4444ff'); } else if ((TCS34725.init(board)._id[0] == 2)) { _board_._bit_matrix_.setCharacter('G', '#009900'); } else if ((TCS34725.init(board)._id[0] == 3)) { _board_._bit_matrix_.setCharacter('g', '#00cccc'); } else if ((TCS34725.init(board)._id[0] == 4)) { _board_._bit_matrix_.setCharacter('R', '#ff0000'); } else if ((TCS34725.init(board)._id[0] == 5)) { _board_._bit_matrix_.setCharacter('P', '#cc44cc'); } else if ((TCS34725.init(board)._id[0] == 6)) { _board_._bit_matrix_.setCharacter('Y', '#ffff00'); } else { _board_._bit_matrix_.off(); } await delay(0.005, true); } }); boardReady({ board: 'Bit', url: '127.0.0.1:8080', multi: true }, async function(board) { let _board_ = await boardInit_(board, 100, 0); let $oqmbv342 = _startLoop_(); while (_loop_[$oqmbv342]) { if ((TCS34725.init(board)._id[0] == 2)) { $demoMonster01.talk('前進'); _board_._bit_matrix_.setColor('#44ff44'); CarTracker.init(board).action(1); } else if ((TCS34725.init(board)._id[0] == 4)) { $demoMonster01.talk('停止'); _board_._bit_matrix_.setColor('#ff0000'); CarTracker.init(board).action(1); } await delay(0.3, $oqmbv342); await delay(0.005, true); } }); }()); ``` ### 08 避障功能 [08 避障功能](https://webbit.webduino.io/blockly/?demo=default#XROzzY4eKwQyn) ![08 避障功能](https://i.imgur.com/U3toorF.png) ```javascript= (async function() { var _E5_B7_A6_E5_8F_B3_E8_BD_89; function math_random_int(a, b) { if (a > b) { // Swap a and b to ensure a is smaller. var c = a; a = b; b = c; } return Math.floor(Math.random() * (b - a + 1) + a); } boardReady({ board: 'Bit', device: 'Web:Bit', transport: 'mqtt', multi: true }, async function(board) { window._board_ = await boardInit_(board, 250, 0); let $jpbda220 = _startLoop_(); while (_loop_[$jpbda220]) { if (((await Ultrasonic.init(board)).distance || 0) >= 10) { CarTracker.init(board).action(1); } else { CarTracker.init(board).action(4); await delay(math_random_int(0.5, 1), $jpbda220); _E5_B7_A6_E5_8F_B3_E8_BD_89 = math_random_int(0, 1); if (_E5_B7_A6_E5_8F_B3_E8_BD_89) { CarTracker.init(board).action(2); } else { CarTracker.init(board).action(3); } await delay(math_random_int(0.5, 1), $jpbda220); } await delay(0.005, true); } }); }()); ``` ### 09 循跡自走 [09 循跡自走](https://webbit.webduino.io/blockly/?demo=default#Qq700kwnWYw3B) ![09 循跡自走](https://i.imgur.com/IfQmWPb.png) ```javascript= (async function() { boardReady({ board: 'Bit', device: 'Web:Bit', transport: 'mqtt', multi: true }, async function(board) { window._board_ = await boardInit_(board, 250, 0); CarTracker.init(board).setAllSpeed(70); CarTracker.init(board).track('000', 11, async function() { $demoMonster01.talk('跑出軌跡囉!'); }); CarTracker.init(board).track('001', 8, async function() { $demoMonster01.talk('右轉修正'); }); CarTracker.init(board).track('100', 7, async function() { $demoMonster01.talk('左轉修正'); }); CarTracker.init(board).track('101', 1, async function() { $demoMonster01.talk('向前行'); }); CarTracker.init(board).on(); }); }()); ``` ## 五、Web:Bit 智慧插座Plus - [x] 01 按鈕控制 - [x] 02 揮手控制 - [x] 03 搖晃控制 - [x] 04 語音控制 - [x] 05 翻蓋控制 - [x] 06 視訊偵測 - [x] 07 App Inventor - [x] 08 LINE 控制 - [x] 09 Google Sheet - [x] 10 插座回傳 Web:Bit ### 01 按鈕控制 [01 按鈕控制](https://webbit.webduino.io/blockly/?demo=default#03lYYDPra2ayv) ![1. 按鈕控制](https://i.imgur.com/LG9oqAX.png) ```javascript= (async function() { var webduinoBroadcastor; boardReady({ board: 'Bit', url: '127.0.0.1:8080', multi: true }, async function(board) { window._board_ = await boardInit_(board, 100, 0); btnEvent_(_board_._bit_btnA_, 'pressed', async function() { if (!webduinoBroadcastor) { webduinoBroadcastor = new webduino.module.mqttClient(); await webduinoBroadcastor.connect(); } webduinoBroadcastor.send({ topic: 'wg1010/set', message: ('ON').toString() }); }, [_board_._bit_btnA_, _board_._bit_btnB_] ); btnEvent_(_board_._bit_btnB_, 'pressed', async function() { if (!webduinoBroadcastor) { webduinoBroadcastor = new webduino.module.mqttClient(); await webduinoBroadcastor.connect(); } webduinoBroadcastor.send({ topic: 'wg1010/set', message: ('OFF').toString() }); }, [_board_._bit_btnA_, _board_._bit_btnB_] ); }); }()); ``` ### 02 揮手控制 [02 揮手控制](https://webbit.webduino.io/blockly/?demo=default#NyWQQgwYbaKqb) ![2. 揮手控制](https://i.imgur.com/jsWW7Mw.png) ```javascript= (async function() { var _E8_AE_8A_E6_95_B8; var webduinoBroadcastor; boardReady({ board: 'Bit', device: 'bit5399b', transport: 'mqtt', multi: true }, async function(board) { window._board_ = await boardInit_(board, 250, 0); await detectInit_(_board_, { "left": true, "right": true }); _E8_AE_8A_E6_95_B8 = false; if (!webduinoBroadcastor) { webduinoBroadcastor = new webduino.module.mqttClient(); await webduinoBroadcastor.connect(); } webduinoBroadcastor.send({ topic: 'wg1010/set', message: ('OFF').toString() }); let $faobc550 = _startLoop_(); while (_loop_[$faobc550]) { if ((_board_._bit_detected_val_.left) < 100) { _E8_AE_8A_E6_95_B8 = true; } else if (_E8_AE_8A_E6_95_B8 && (_board_._bit_detected_val_.right) < 100) { _E8_AE_8A_E6_95_B8 = false; if (!webduinoBroadcastor) { webduinoBroadcastor = new webduino.module.mqttClient(); await webduinoBroadcastor.connect(); } webduinoBroadcastor.send({ topic: 'wg1010/set', message: ('ON').toString() }); _board_._bit_matrix_.setColor('#ffffff'); } if ((_board_._bit_detected_val_.right) < 100) { _E8_AE_8A_E6_95_B8 = true; } else if (_E8_AE_8A_E6_95_B8 && (_board_._bit_detected_val_.left) < 100) { _E8_AE_8A_E6_95_B8 = false; if (!webduinoBroadcastor) { webduinoBroadcastor = new webduino.module.mqttClient(); await webduinoBroadcastor.connect(); } webduinoBroadcastor.send({ topic: 'wg1010/set', message: ('OFF').toString() }); _board_._bit_matrix_.setColor('#000000'); } await delay(0.005, true); } }); }()); ``` ### 03 搖晃控制 [03 搖晃控制](https://webbit.webduino.io/blockly/?demo=default#NyWQZleDDrWqb) ![3.搖晃控制](https://i.imgur.com/ZmsAA81.png) ```javascript= (async function() { var webduinoBroadcastor; var _E8_AE_8A_E6_95_B8; boardReady({ board: 'Bit', url: '127.0.0.1:8080', multi: true }, async function(board) { window._board_ = await boardInit_(board, 100, 0); await detectInit_(_board_, { "gyr": true }); if (!webduinoBroadcastor) { webduinoBroadcastor = new webduino.module.mqttClient(); await webduinoBroadcastor.connect(); } webduinoBroadcastor.send({ topic: '', message: ('').toString() }); _E8_AE_8A_E6_95_B8 = false; mpu9250Fn_.shake(_board_, async function() { if (_E8_AE_8A_E6_95_B8 == false) { _E8_AE_8A_E6_95_B8 = true; if (!webduinoBroadcastor) { webduinoBroadcastor = new webduino.module.mqttClient(); await webduinoBroadcastor.connect(); } webduinoBroadcastor.send({ topic: 'wg1010/set', message: ('ON').toString() }); _board_._bit_matrix_.setColor('#ff0000'); } else if (_E8_AE_8A_E6_95_B8 == true) { _E8_AE_8A_E6_95_B8 = false; if (!webduinoBroadcastor) { webduinoBroadcastor = new webduino.module.mqttClient(); await webduinoBroadcastor.connect(); } webduinoBroadcastor.send({ topic: 'wg1010/set', message: ('ON').toString() }); _board_._bit_matrix_.setColor('#000000'); } }); }); }()); ``` ### 04 語音控制 [04 語音控制](https://webbit.webduino.io/blockly/?demo=default#7qZrN9bNwnMqO) ![4. 語音控制](https://i.imgur.com/5jacdIN.png) ```javascript= (async function() { var webduinoBroadcastor; boardReady({ board: 'Bit', url: '127.0.0.1:8080', multi: true }, async function(board) { window._board_ = await boardInit_(board, 100, 0); if (!webduinoBroadcastor) { webduinoBroadcastor = new webduino.module.mqttClient(); await webduinoBroadcastor.connect(); } webduinoBroadcastor.send({ topic: 'wg1010/set', message: ('OFF').toString() }); let $ukhgk199 = _startLoop_(); while (_loop_[$ukhgk199]) { await speechRecognition('cmn-Hant-TW'); $demoMonster01.talk(); if ((speechValue_).indexOf('開燈') != -1) { _board_._bit_matrix_.setColor('#ffffff'); if (!webduinoBroadcastor) { webduinoBroadcastor = new webduino.module.mqttClient(); await webduinoBroadcastor.connect(); } webduinoBroadcastor.send({ topic: 'wg1010/set', message: ('ON').toString() }); } else if ((speechValue_).indexOf('關燈') != -1) { _board_._bit_matrix_.setColor('#000000'); if (!webduinoBroadcastor) { webduinoBroadcastor = new webduino.module.mqttClient(); await webduinoBroadcastor.connect(); } webduinoBroadcastor.send({ topic: 'wg1010/set', message: ('OFF').toString() }); } await delay(0.005, true); } }); }()); ``` ### 05 翻蓋控制 [05 翻蓋控制](https://webbit.webduino.io/blockly/?demo=default#Qq70BjmOPVx3B) ![5.翻蓋控制](https://i.imgur.com/ORG1UsJ.png) ```javascript= (async function() { var webduinoBroadcastor; boardReady({ board: 'Bit', url: '127.0.0.1:8080', multi: true }, async function(board) { window._board_ = await boardInit_(board, 100, 0); await detectInit_(_board_, { "gyr": true }); mpu9250Fn_.shake(_board_, async function() { if (!webduinoBroadcastor) { webduinoBroadcastor = new webduino.module.mqttClient(); await webduinoBroadcastor.connect(); } webduinoBroadcastor.send({ topic: 'wg1010/set', message: ('ON').toString() }); _board_._bit_matrix_.setColor('#ffffff'); }); mpu9250Fn_.shake(_board_, async function() { if (!webduinoBroadcastor) { webduinoBroadcastor = new webduino.module.mqttClient(); await webduinoBroadcastor.connect(); } webduinoBroadcastor.send({ topic: 'wg1010/set', message: ('OFF').toString() }); _board_._bit_matrix_.setColor('#000000'); }); }); }()); ``` ### 07 App Inventor ![07 App Inventor](https://i.imgur.com/lPng3gb.png) ```javascript= (async function() { var webduinoBroadcastor; $demoMonster01.reset(); $demoMonster02.reset(); $demoMonster03.reset(); $demoMonster04.reset(); $demoMonster01.talk('點擊開燈'); $demoMonster02.talk('點擊關燈'); $demoMonster01.click(async function() { if (!webduinoBroadcastor) { webduinoBroadcastor = new webduino.module.mqttClient(); await webduinoBroadcastor.connect(); } webduinoBroadcastor.send({ topic: 'wg1005/set', message: ('ON').toString() }); $demoMonster03.talk('亮晶晶'); await delay(1, true); //delay $demoMonster03.talk(''); }); $demoMonster02.click(async function() { if (!webduinoBroadcastor) { webduinoBroadcastor = new webduino.module.mqttClient(); await webduinoBroadcastor.connect(); } webduinoBroadcastor.send({ topic: 'wg1005/set', message: ('OFF').toString() }); $demoMonster04.talk('有夠暗'); await delay(1, true); //delay $demoMonster04.talk(''); }); }()); ``` ### 08 LINE 控制 ![08 LINE 控制](https://i.imgur.com/JOOzElj.png) ```javascript= (async function() { var webduinoBroadcastor; let _chatChannel = line_channel('81908425'); _chatChannel.on("value", async function(_e) { let _msg = ""; if (_e.val()) { _msg = _e.val().msg; } if (_msg) { if (_msg == '開燈') { await line_reply(_e.val().uid, '開燈', _e.val().rt); if (!webduinoBroadcastor) { webduinoBroadcastor = new webduino.module.mqttClient(); await webduinoBroadcastor.connect(); } webduinoBroadcastor.send({ topic: 'wg1005/set', message: ('ON').toString() }); } else if (_msg == '關燈') { await line_reply(_e.val().uid, '關燈', _e.val().rt); if (!webduinoBroadcastor) { webduinoBroadcastor = new webduino.module.mqttClient(); await webduinoBroadcastor.connect(); } webduinoBroadcastor.send({ topic: 'wg1005/set', message: ('OFF').toString() }); } } }); }()); ``` ### 09 Google Sheet ```javascript= (async function() { var webduinoBroadcastor; boardReady({ board: 'Bit', url: '127.0.0.1:8080', multi: true }, async function(board) { window._board_ = await boardInit_(board, 100, 0); _board_._bit_matrix_.setColor('#ff0000'); sheetInit('https://docs.google.com/spreadsheets/d/16_xHxf9WmKoMUnoHJjPn6k3nTeWxTf1-0e823QnwRvg/edit?usp=sharing', '智慧插座'); let $afmln74 = _startLoop_(); while (_loop_[$afmln74]) { await sheetReadData(); if (_mySheet_.data.cell['a1'] == '開燈') { if (!webduinoBroadcastor) { webduinoBroadcastor = new webduino.module.mqttClient(); await webduinoBroadcastor.connect(); } webduinoBroadcastor.send({ topic: 'wg1007/set', message: ('ON').toString() }); } else if (_mySheet_.data.cell['a1'] == '關燈') { if (!webduinoBroadcastor) { webduinoBroadcastor = new webduino.module.mqttClient(); await webduinoBroadcastor.connect(); } webduinoBroadcastor.send({ topic: 'wg1007/set', message: ('OFF').toString() }); } await delay(0.005, true); } }); }()); ``` [試算表連結](https://docs.google.com/spreadsheets/d/16_xHxf9WmKoMUnoHJjPn6k3nTeWxTf1-0e823QnwRvg/edit#gid=0) ![ 9 Google Sheet](https://i.imgur.com/Csm8CzJ.png) ### 10 插座回傳 Web:Bit ```javascript= (async function() { var webduinoBroadcastor; let _chatChannel = line_channel('81908425'); _chatChannel.on("value", async function(_e) { let _msg = ""; if (_e.val()) { _msg = _e.val().msg; } if (_msg) { if (_msg == '開燈') { await line_reply(_e.val().uid, _msg, _e.val().rt); if (!webduinoBroadcastor) { webduinoBroadcastor = new webduino.module.mqttClient(); await webduinoBroadcastor.connect(); } webduinoBroadcastor.send({ topic: 'wg1007/set', message: ('ON').toString() }); } else if (_msg == '關燈') { await line_reply(_e.val().uid, _msg, _e.val().rt); if (!webduinoBroadcastor) { webduinoBroadcastor = new webduino.module.mqttClient(); await webduinoBroadcastor.connect(); } webduinoBroadcastor.send({ topic: 'wg1007/set', message: ('OFF').toString() }); } } }); boardReady({ board: 'Bit', url: '127.0.0.1:8080', multi: true }, async function(board) { window._board_ = await boardInit_(board, 100, 0); _board_._bit_matrix_.setColor('#000000'); if (!webduinoBroadcastor) { webduinoBroadcastor = new webduino.module.mqttClient(); await webduinoBroadcastor.connect(); } await webduinoBroadcastor.onMessage('wg1007/set', async (message) => { if (message == 'ON') { _board_._bit_matrix_.setColor('#ff0000'); } else if (message == 'OFF') { _board_._bit_matrix_.setColor('#000000'); } }); }); }()); ``` ![插座回傳 Web:Bit](https://i.imgur.com/kyROIRt.png) ## 六、Web:Bit創意設計 - [x] 01 英日文朗讀機 - [x] 02 多功能語言學習機 [翻譯試算表連結](https://docs.google.com/spreadsheets/d/1tW6f1oIbiqxAJR3iiXGe7M-ot01hKZrOxnihxWwcx8o/edit?usp=sharing) ### 01 英日文朗讀機 [01 英日文朗讀機](https://webbit.webduino.io/blockly/#Mq011n5kYrv30) ![1.英日文朗讀機](https://i.imgur.com/anHx82J.png) ```javascript= (async function() { var _E8_8B_B1_E6_96_87; boardReady({ board: 'Bit', url: '127.0.0.1:8080', multi: true }, async function(board) { window._board_ = await boardInit_(board, 100, 0); sheetInit('https://docs.google.com/spreadsheets/d/1OQTeVJDCl5s_YQNdjckNSkS8kh5WRvEVcyPiZmXiXVM/edit#gid=0', '翻譯機'); $demoMonster01.talk('按A翻譯英文,按B翻譯日文'); btnEvent_(_board_._bit_btnA_, 'pressed', async function() { $demoMonster01.talk('請輸入英文字!'); await textInput(); $demoMonster01.talk((thisInputVal)); await speakAsync((thisInputVal), ["en-US", 1, 1]); await delay(1, true); //delay }, [_board_._bit_btnA_, _board_._bit_btnB_] ); btnEvent_(_board_._bit_btnB_, 'pressed', async function() { $demoMonster01.talk('請輸入中文字?'); await textInput(); await sheetWriteData('auto', (thisInputVal), 'a2'); await sheetReadData(); _E8_8B_B1_E6_96_87 = _mySheet_.data.cell['b2']; $demoMonster03.talk(_E8_8B_B1_E6_96_87); await speakAsync(_E8_8B_B1_E6_96_87, ["en-US", 1, 1]); }, [_board_._bit_btnA_, _board_._bit_btnB_] ); }); }()); ``` ### 02 多功能語言學習機 [02 多功能語言學習機](https://webbit.webduino.io/blockly/#XROzz4YVxQdyn) ![2.多功能語言學習機](https://i.imgur.com/Y5kuri7.png) ```javascript= (async function() { var _E5_88_97; var _E8_8B_B1_E6_96_87; var _E4_B8_AD_E6_96_87; function math_random_int(a, b) { if (a > b) { // Swap a and b to ensure a is smaller. var c = a; a = b; b = c; } return Math.floor(Math.random() * (b - a + 1) + a); } boardReady({ board: 'Bit', device: 'Webduino Bit', multi: true, transport: 'message', window: window.top.frames[0] }, async function(board) { window._board_ = await boardInit_(board, 100, 0); $demoMonster01.reset(); $demoMonster02.reset(); $demoMonster03.reset(); $demoMonster04.reset(); sheetInit('https://docs.google.com/spreadsheets/d/1OQTeVJDCl5s_YQNdjckNSkS8kh5WRvEVcyPiZmXiXVM/edit?usp=sharing', '中級1200'); await sheetReadData(); btnsEvent_('pressed', async function() { _E5_88_97 = math_random_int(1, _mySheet_.data.lastRow); _E8_8B_B1_E6_96_87 = _mySheet_.data.cell[(String('a') + String(_E5_88_97))]; _E4_B8_AD_E6_96_87 = _mySheet_.data.cell[(String('b') + String(_E5_88_97))]; $demoMonster01.talk(_E8_8B_B1_E6_96_87); $demoMonster02.talk(_E4_B8_AD_E6_96_87); await speakAsync(_E8_8B_B1_E6_96_87, ["en-US", 1, 1]); }, [_board_._bit_btnA_, _board_._bit_btnB_] ); btnEvent_(_board_._bit_btnA_, 'pressed', async function() { await speakAsync(_E8_8B_B1_E6_96_87, ["en-US", 1, 1]); }, [_board_._bit_btnA_, _board_._bit_btnB_] ); btnEvent_(_board_._bit_btnB_, 'pressed', async function() { $demoMonster04.talk('321,開始念!'); await speechRecognition('en-US'); $demoMonster03.talk((speechValue_)); if ((speechValue_) == _E8_8B_B1_E6_96_87) { $demoMonster04.talk('發音正確!'); $sound.play('sound-01'); } else { $demoMonster04.talk('再練一次!'); $sound.play('death-01'); } }, [_board_._bit_btnA_, _board_._bit_btnB_] ); }); }()); ``` ## 七、法蘭斯擴充積木 [法蘭斯積木新增教學](https://www.youtube.com/watch?v=rS2vS4RIcNM) ![](https://i.imgur.com/bdZcupr.png)