This repository has been archived by the owner on Feb 12, 2023. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 4
/
tutorials.html
7 lines (7 loc) · 42.9 KB
/
tutorials.html
1
2
3
4
5
6
7
<!DOCTYPE html> <html lang="zh-TW"> <head> <meta charset="UTF-8"> <meta http-equiv="pragma" content="no-cache"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <meta name="author" content="webduino.io"> <meta name="copyright" content="webduino.io"> <meta itemprop="name" content="webduino.io"> <link rel="icon" href="../img/layout/favicon.ico" type="image/x-icon"> <link rel="icon" href="img/layout/favicon.ico" type="image/x-icon"> <title>Webduino 教學範例 ::: Webduino = Web × Arduino</title> <script>
window.location.replace('https://tutorials.webduino.io/zh-tw/docs/basic/index.html');
</script> <meta name="description" content="Webduino 的網站提供了非常豐富的教學範例，透過詳細的操作解說，這些範例將由淺入深的帶領開發者進入 Web 控制 Arduino 的領域，從電子電路的接線，一直到 Javascript 的撰寫都有非常完整詳盡的說明。"> <meta itemprop="description" content="Webduino 的網站提供了非常豐富的教學範例，透過詳細的操作解說，這些範例將由淺入深的帶領開發者進入 Web 控制 Arduino 的領域，從電子電路的接線，一直到 Javascript 的撰寫都有非常完整詳盡的說明。"> <meta property="og:description" content="Webduino 的網站提供了非常豐富的教學範例，透過詳細的操作解說，這些範例將由淺入深的帶領開發者進入 Web 控制 Arduino 的領域，從電子電路的接線，一直到 Javascript 的撰寫都有非常完整詳盡的說明。"> <meta property="og:title" content="Webduino = Web × Arduino"> <meta property="og:url" content="https://webduino.io/tutorials.html"> <meta property="og:image" content="https://webduino.io/img/tutorials/tutorials-s.jpg"> <meta itemprop="image" content="https://webduino.io/img/tutorials/tutorials-s.jpg"> <script src="js/lib/jquery.min.js"></script> <script src="js/lib/jquery.lazyload.min.js"></script> <script src="js/layout-20171211.js"></script> <link rel="stylesheet" href="style/css/layout.css"> <link rel="stylesheet" href="style/css/sub-header.css"> <script src="js/tutorials-filter.js"></script> <link rel="stylesheet" href="style/css/tutorials.css"> <link rel="stylesheet" href="style/css/lib/font-awesome.css"> <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-TT4TZ8L');</script> </head> <body> <header class="path-0"> <a class="logo" href="index.html" data-name="layout-header-logo"></a> <div class="mobile-menu"></div> <div class="menu"> <a href="index.html" class="index" data-name="layout-mobile-menu">首頁</a> <a href="https://tutorials.webduino.io/" class="tutorials" data-name="layout-mobile-menu" target="_blank">學習手冊</a> <a href="buy.html" class="buy" data-name="layout-mobile-menu">產品總覽</a> <a href="activity.html" class="activity" data-name="layout-mobile-menu">課程活動</a> <a href="training.html" class="about" data-name="layout-mobile-men">認證中心</a> <a href="https://cloud.webduino.io/" target="_blank" class="english" data-name="layout-mobile-men">雲端平台</a> </div> </header> <header class="path-1"> <a class="logo" href="../index.html"></a> <div class="mobile-menu"></div> <div class="menu"> <a href="../index.html" class="index" data-name="layout-menu">首頁</a> <a href="https://tutorials.webduino.io/" class="tutorials" data-name="layout-menu" target="_blank">學習手冊</a> <a href="../buy.html" class="buy" data-name="layout-menu">產品總覽</a> <a href="../activity.html" class="activity" data-name="layout-menu">課程活動</a> <a href="../about.html" class="about" data-name="layout-menu">關於我們</a> <a href="../en/index.html" target="_blank" class="english" data-name="layout-menu">English</a> </div> </header> <div class="filter"> <a class="btn-new click" href="#new">最新文章</a> <a class="btn-all" href="#all">所有文章</a> <a class="btn-info" href="#info">設定介紹</a> <a class="btn-component" href="#component">元件模組</a> <a class="btn-sensor" href="#sensor">傳感器</a> <a class="btn-example" href="#example">綜合應用</a> <a class="btn-cloud" href="#cloud">雲端平台</a> <a class="btn-bit" href="#bit">Bit</a> </div> <div class="content"> <div class="filter-info"> <a href="https://tutorials.webduino.io/zh-tw/docs/basic/index.html?utm_source=webduino_io&utm_medium=clickgo&utm_campaign=popup_information" target="_blank"> <div> <img class="lazy" data-original="img/tutorials/info-01-01s-new2.jpg"> </div> <h2>基本介紹</h2> <span>Webduino 讓使用者只需要撰寫簡單的網頁程式，就可以串接 Arduino，大幅降低開發的門檻。</span> </a> </div> <div class="filter-info"> <a href="https://tutorials.webduino.io/zh-tw/docs/basic/board/mark1-setup.html?utm_source=webduino_io&utm_medium=clickgo&utm_campaign=popup_information" target="_blank"> <div> <img class="lazy" data-original="img/tutorials/info-02-01s.jpg"> </div> <h2>初始化設定 ( 初次使用必讀 )</h2> <span>實作 Webduino 之前，最重要的就是進行初始化設定，初始化設定的目的在於讓 Webduino 開發板可以自動上網</span> </a> </div> <div class="filter-info"> <a href="https://tutorials.webduino.io/zh-tw/docs/faq/index.html?utm_source=webduino_io&utm_medium=clickgo&utm_campaign=popup_information" target="_blank"> <div> <img class="lazy" data-original="img/tutorials/info-03-01s.jpg"> </div> <h2>常見問題處理</h2> <span>常見問題處理頁面裡頭會列出許多常見的問題，以及各種問題對應的解決方法。</span> </a> </div> <div class="filter-info"> <a href="https://tutorials.webduino.io/zh-tw/docs/basic/board/fly-setup.html?utm_source=webduino_io&utm_medium=clickgo&utm_campaign=popup_information" target="_blank"> <div> <img class="lazy" data-original="img/tutorials/info-04-01s.jpg"> </div> <h2>Webduino Fly 初始化設定 ( 初次使用必讀 )</h2> <span>透過 Webduino Fly ( UNO 雲端擴充板 ) 的設定，讓您的 Arduino UNO 化身為 Webduino。</span> </a> </div> <div class="filter-info"> <a href="https://tutorials.webduino.io/zh-tw/docs/basic/setting/arduino-ino.html?utm_source=webduino_io&utm_medium=clickgo&utm_campaign=popup_information" target="_blank"> <div> <img class="lazy" data-original="img/tutorials/info-07-01s.jpg"> </div> <h2>Arduino 韌體下載與燒錄</h2> <span>下載與燒錄客製化的韌體，讓你的 Arduino 更具多樣性，讓你的 Arduino 長出翅膀，躍上雲端。</span> </a> </div> <div class="filter-info"> <a href="https://tutorials.webduino.io/zh-tw/docs/basic/setting/chrome-api-proxy.html?utm_source=webduino_io&utm_medium=clickgo&utm_campaign=popup_information" target="_blank"> <div> <img class="lazy" data-original="img/tutorials/info-05-01s.jpg"> </div> <h2>Chrome API Proxy 安裝設定</h2> <span>安裝 Chrome API Proxy，讓 Arduino UNO 可以透過藍芽或序列埠的方式，感受方便美好的 Webduino 開發體驗。</span> </a> </div> <div class="filter-info"> <a href="https://tutorials.webduino.io/zh-tw/docs/basic/blockly/blockly-information.html?utm_source=webduino_io&utm_medium=clickgo&utm_campaign=popup_information" target="_blank"> <div> <img class="lazy" data-original="img/tutorials/info-08-01s.jpg"> </div> <h2>Webduino Blockly 基礎教學</h2> <span>Webduino Blockly 線上編輯工具是 Webduino 所研發出來的圖像化編輯工具。</span> </a> </div> <div class="filter-info"> <a href="https://blockly.webduino.io/index-tutorials.html" target="_blank"> <div> <img class="lazy" data-original="img/tutorials/info-06-01s.jpg"> </div> <h2>Webduino Blockly 實作範例</h2> <span>體驗最方便的 Webduino Blockly 線上編輯工具，感受從來沒有過如此輕鬆的物聯網開發體驗。</span> </a> </div> <div class="filter-info"> <a href="https://tutorials.webduino.io/zh-tw/docs/basic/blockly/multi-board.html?utm_source=webduino_io&utm_medium=clickgo&utm_campaign=popup_information" target="_blank"> <div> <img class="lazy" data-original="img/tutorials/info-09-01s.jpg"> </div> <h2>連動多塊 Webduino 開發板</h2> <span>我們就可以透過很簡單的判斷與控制，進一步讓各個開發板與電子零組件彼此連動。</span> </a> </div> <div class="filter-info"> <a href="https://tutorials.webduino.io/zh-tw/docs/basic/blockly/board-pin.html?utm_source=webduino_io&utm_medium=clickgo&utm_campaign=popup_information" target="_blank"> <div> <img class="lazy" data-original="img/tutorials/info-10-01s.jpg"> </div> <h2>Webduino 腳位偵測與設定</h2> <span>我們就可以透過很簡單的判斷與控制，進一步讓各個開發板與電子零組件彼此連動。</span> </a> </div> <div class="filter-info"> <a href="https://tutorials.webduino.io/zh-tw/docs/basic/blockly/blockly-tutorial-02.html?utm_source=webduino_io&utm_medium=clickgo&utm_campaign=popup_information" target="_blank"> <div> <img class="lazy" data-original="img/tutorials/info-11-01s.jpg"> </div> <h2>Webduino Blockly 的十一個操作密技</h2> <span>我們就可以透過很簡單的判斷與控制，進一步讓各個開發板與電子零組件彼此連動。</span> </a> </div> <div class="filter-info"> <a href="https://tutorials.webduino.io/zh-tw/docs/basic/setting/bluetooth.html?utm_source=webduino_io&utm_medium=clickgo&utm_campaign=popup_information" target="_blank"> <div> <img class="lazy" data-original="img/tutorials/info-12-01s.jpg"> </div> <h2>Webduino 使用藍芽操控</h2> <span>這篇文章將會介紹如何連接藍芽模組 ( HC05、HC06 )，以及相對應的設定、操控方式。</span> </a> </div> <div class="filter-info filter-smart"> <a href="https://tutorials.webduino.io/zh-tw/docs/basic/board/smart-information.html?utm_source=webduino_io&utm_medium=clickgo&utm_campaign=popup_information" target="_blank"> <div> <img class="lazy" data-original="img/tutorials/smart-01-information-s.jpg"> </div> <h2>認識 Webduino Smart</h2> <span>Smart 是 2016 年推出的物聯網開發板，更能有效地應用在物聯網的開發和各種創意上。 </span> </a> </div> <div class="filter-info filter-smart"> <a href="https://tutorials.webduino.io/zh-tw/docs/basic/board/smart-setup.html?utm_source=webduino_io&utm_medium=clickgo&utm_campaign=popup_information" target="_blank"> <div> <img class="lazy" data-original="img/tutorials/smart-02-setup-s.jpg"> </div> <h2>Webduino Smart 初始化設定 ( 初次使用必讀 )</h2> <span>初始化設定的目的在於讓開發板可以自動上網，或是在區域網路透過 WebSocket 連線。 </span> </a> </div> <div class="filter-smart filter-component"> <a href="https://tutorials.webduino.io/zh-tw/docs/basic/smart/smart-rgbled.html?utm_source=webduino_io&utm_medium=clickgo&utm_campaign=popup_information" target="_blank"> <div> <img class="lazy" data-original="img/tutorials/smart-03-rgbled-s.jpg"> </div> <h2>Smart 三色燈初體驗</h2> <span>Smart 內建一個微型三色 LED 燈，這表示我們可以直接透過 Smart 發出各種顏色。</span> </a> </div> <div class="filter-smart filter-component"> <a href="https://tutorials.webduino.io/zh-tw/docs/smart/basic/rgbled-colorful.html?utm_source=webduino_io&utm_medium=clickgo&utm_campaign=popup_information" target="_blank"> <div> <img class="lazy" data-original="img/tutorials/smart-04-rgbled-s.jpg"> </div> <h2>躍動的 Smart 三色燈</h2> <span>上一篇已經了解基本的三色燈操控，這篇將透過「等待」與「迴圈」積木，實作出一個躍動的三色燈。</span> </a> </div> <div class="filter-smart filter-component"> <a href="https://tutorials.webduino.io/zh-tw/docs/basic/smart/smart-photocell.html?utm_source=webduino_io&utm_medium=clickgo&utm_campaign=popup_information" target="_blank"> <div> <img class="lazy" data-original="img/tutorials/smart-05-photocell-s.jpg"> </div> <h2>Smart 的光敏電阻</h2> <span>Webduino Smart 開發板的右上角內建了一顆光敏電阻，由這個光敏電阻我們就可以偵測環境的光線，做出許多簡單的光線偵測效果。</span> </a> </div> <div class="filter-smart filter-component"> <a href="https://tutorials.webduino.io/zh-tw/docs/basic/smart/smart-button.html?utm_source=webduino_io&utm_medium=clickgo&utm_campaign=popup_information" target="_blank"> <div> <img class="lazy" data-original="img/tutorials/smart-06-button-s.jpg"> </div> <h2>Smart 的按鈕開關</h2> <span>我們可以透過 Smart 內建的微型按鈕開關，執行「按下」、「放開」或「長按」等動作。</span> </a> </div> <div class="filter-smart filter-component"> <a href="https://tutorials.webduino.io/zh-tw/docs/smart/basic/button-youtube.html?utm_source=webduino_io&utm_medium=clickgo&utm_campaign=popup_information" target="_blank"> <div> <img class="lazy" data-original="img/tutorials/smart-07-button-youtube-s.jpg"> </div> <h2>Smart 按鈕開關控制 Youtube</h2> <span>透過 Smart 開關的行為，操控 Youtube 的影片播放，如此一來只要動動手指，就可以控制影片。</span> </a> </div> <div class="filter-info filter-cloud"> <a href="https://tutorials.webduino.io/zh-tw/docs/cloud/index.html?utm_source=webduino_io&utm_medium=clickgo&utm_campaign=popup_information" target="_blank"> <div> <img class="lazy" data-original="img/tutorials/cloud-01-01s.jpg"> </div> <h2>Webduino 雲端平台</h2> <span>「Webduino 雲端平台」是 Webduino 所研發的全方位的物聯網開發工具，實現「從硬體到軟體、從軟體到雲端、從雲端到行動裝置」的完整應用。</span> </a> </div> <div class="filter-info filter-cloud"> <a href="https://tutorials.webduino.io/zh-tw/docs/cloud/basic/cloud-register.html?utm_source=webduino_io&utm_medium=clickgo&utm_campaign=popup_information" target="_blank"> <div> <img class="lazy" data-original="img/tutorials/cloud-02-01s.jpg"> </div> <h2>雲端平台 - 註冊與登入</h2> <span>使用 Webduino 雲端平台的第一步就是註冊，註冊後便能儲存開發中的專案，並且進行物聯網裝置與個人帳號的綁定。</span> </a> </div> <div class="filter-info filter-cloud"> <a href="https://tutorials.webduino.io/zh-tw/docs/cloud/basic/webduino-blockly.html?utm_source=webduino_io&utm_medium=clickgo&utm_campaign=popup_information" target="_blank"> <div> <img class="lazy" data-original="img/tutorials/cloud-03-01s.jpg"> </div> <h2>Blockly 程式積木</h2> <span>雲端平台的 Webduino Blockly 具備存檔與共享檔案的功能，並提供豐富的電子元件與傳感器模組。</span> </a> </div> <div class="filter-info filter-cloud"> <a href="https://tutorials.webduino.io/zh-tw/docs/cloud/basic/webduino-device.html?utm_source=webduino_io&utm_medium=clickgo&utm_campaign=popup_information" target="_blank"> <div> <img class="lazy" data-original="img/tutorials/cloud-04-01s.jpg"> </div> <h2>Device 裝置管理 ( 裝置認證 )</h2> <span>不論手邊有多少物聯網的開發裝置，都可以在雲端平台上掌握裝置的上下線狀態、韌體版本以及安全性設定。</span> </a> </div> <div class="filter-info filter-cloud"> <a href="https://tutorials.webduino.io/zh-tw/docs/cloud/basic/webduino-device-update.html?utm_source=webduino_io&utm_medium=clickgo&utm_campaign=popup_information" target="_blank"> <div> <img class="lazy" data-original="img/tutorials/cloud-05-01s.jpg"> </div> <h2>Device 裝置管理 ( 雲端更新 )</h2> <span>只要裝置處於上線狀態，就能透過雲端更新的方式也可輕鬆進行遠端更新，甚至多台裝置可以同時更新、同時設定。</span> </a> </div> <div class="filter-cloud"> <i class="new"></i> <a href="https://tutorials.webduino.io/zh-tw/docs/cloud/component/lcd-module.html" target="_blank"> <div> <img class="lazy" data-original="img/tutorials/cloud-lcd.jpg"> </div> <h2>LCD 螢幕</h2> <span>各種 3C 用品中，如果需要使用螢幕顯示訊息，大多會採用 LCD 顯示器，這篇將會介紹如何透過 Webduino Blockly，簡單實現出在 LCD 上顯示文字。</span> </a> </div> <div class="filter-cloud"> <i class="new"></i> <a href="https://tutorials.webduino.io/zh-tw/docs/cloud/component/mp3-player.html" target="_blank"> <div> <img class="lazy" data-original="img/tutorials/cloud-mp3.jpg"> </div> <h2>MP3 播放器</h2> <span>MP3 是相當流行的數位音訊編碼格式，這篇將介紹如何透過 Webduino 來控制 DFPlayer Mini MP3 Player 模組，實作出 MP3 音樂播放器。</span> </a> </div> <div class="filter-cloud"> <i class="new"></i> <a href="https://tutorials.webduino.io/zh-tw/docs/cloud/sensor/pm25.html" target="_blank"> <div> <img class="lazy" data-original="img/tutorials/cloud-pm25.jpg"> </div> <h2>PM2.5 細懸浮微粒偵測</h2> <span>只需要幾個簡單的步驟，Webduino 就能透過 G3 粉塵感測器，偵測周遭的環境空氣品質，也更能為自己的身體和居家生活多些關心與重視。</span> </a> </div> <div class="filter-cloud"> <i class="new"></i> <a href="https://tutorials.webduino.io/zh-tw/docs/cloud/database/google-spreadsheet.html" target="_blank"> <div> <img class="lazy" data-original="img/tutorials/cloud-pm25-google-spreadsheet.jpg"> </div> <h2>記錄 PM2.5 ( Google 試算表 )</h2> <span>偵測空氣的 PM2.5 數值之後，接著要透過資料庫來儲存數據，這篇將介紹如何將 Google 試算表當作資料庫，輕鬆存取 PM2.5 的數值。</span> </a> </div> <div class="filter-cloud"> <a href="https://tutorials.webduino.io/zh-tw/docs/cloud/database/google-spreadsheet.html" target="_blank"> <div> <img class="lazy" data-original="img/tutorials/cloud-google-spreadsheet.jpg"> </div> <h2>Google 試算表 ( 設定 )</h2> <span>就算不會任何資料庫的技術，也能透過 Webduino 提供的 Google 試算表功能，將 Google 試算表當作資料庫，輕鬆儲存傳感器所接收到的訊號數值</span> </a> </div> <div class="filter-cloud"> <a href="https://tutorials.webduino.io/zh-tw/docs/cloud/database/google-spreadsheet.html" target="_blank"> <div> <img class="lazy" data-original="img/tutorials/cloud-google-spreadsheet-write.jpg"> </div> <h2>Google 試算表 ( 儲存 )</h2> <span>對於不會資料庫的使用者而言，若能將 Google 試算表當作簡單的資料庫，再搭配 Webduino 輕鬆串接傳感器的優勢，簡單幾個步驟，就能完成許多有趣的應用</span> </a> </div> <div class="filter-cloud"> <a href="https://tutorials.webduino.io/zh-tw/docs/cloud/database/google-spreadsheet.html" target="_blank"> <div> <img class="lazy" data-original="img/tutorials/cloud-google-spreadsheet-read.jpg"> </div> <h2>Google 試算表 ( 讀取 )</h2> <span>已經能透過 Webduino 寫入資料到 Google 試算表後，下一步就要來讀取資料，如此一來就能利用試算表，做出簡單的查詢功能，並延伸到 IoT 應用</span> </a> </div> <div class="filter-component"> <a href="https://tutorials.webduino.io/zh-tw/docs/basic/component/led.html?utm_source=webduino_io&utm_medium=clickgo&utm_campaign=popup_information" target="_blank"> <div> <img class="lazy" data-original="img/tutorials/tutorial-01-01s.jpg"> </div> <h2>單顆 LED 燈</h2> <span>進入了 Webduino 的世界之後，使用 LED 來作為第一個範例，而撰寫的程式也更為簡單，就像控制一張網頁圖片切換一樣的容易。</span> </a> </div> <div class="filter-component"> <a href="https://tutorials.webduino.io/zh-tw/docs/basic/component/rgbled.html?utm_source=webduino_io&utm_medium=clickgo&utm_campaign=popup_information" target="_blank"> <div> <img class="lazy" data-original="img/tutorials/tutorial-03-01s.jpg"> </div> <h2>三色 LED 燈</h2> <span>三色 LED 是由紅綠藍三種不同顏色的 LED 所組成，可以發出最少三種顏色的光，我們也可以分別控制顏色的強弱，達到混合顏色的效果。</span> </a> </div> <div class="filter-component"> <a href="https://tutorials.webduino.io/zh-tw/docs/useful/component/rgbled-palette.html?utm_source=webduino_io&utm_medium=clickgo&utm_campaign=popup_information" target="_blank"> <div> <img class="lazy" data-original="img/tutorials/tutorial-04-01s.jpg"> </div> <h2>三色 LED 燈調色盤</h2> <span>利用 Web 裡頭常見的 slider range，來控制三色 LED 燈的顏色強弱，同時在網頁裡頭對應相同的色彩。</span> </a> </div> <div class="filter-sensor"> <a href="https://tutorials.webduino.io/zh-tw/docs/basic/sensor/ultrasonic.html?utm_source=webduino_io&utm_medium=clickgo&utm_campaign=popup_information" target="_blank"> <div> <img class="lazy" data-original="img/tutorials/tutorial-05-01s.jpg"> </div> <h2>超音波傳感器</h2> <span>透過超音波碰撞到物體之後反射回來的時間差，就可以計算超音波傳感器與相對應物體之間的距離。</span> </a> </div> <div class="filter-sensor"> <a href="https://tutorials.webduino.io/zh-tw/docs/useful/sensor/ultrasonic-imagesize.html?utm_source=webduino_io&utm_medium=clickgo&utm_campaign=popup_information" target="_blank"> <div> <img class="lazy" data-original="img/tutorials/tutorial-06-01s.jpg"> </div> <h2>超音波傳感器改變圖片大小</h2> <span>藉由超音波傳感器回傳的公分數值，對應到網頁裡頭圖片的寬度，就輕鬆地利用超音波傳感器控制圖片大小。</span> </a> </div> <div class="filter-example"> <a href="https://tutorials.webduino.io/zh-tw/docs/useful/sensor/ultrasonic-led.html?utm_source=webduino_io&utm_medium=clickgo&utm_campaign=popup_information" target="_blank"> <div> <img class="lazy" data-original="img/tutorials/tutorial-07-01s.jpg"> </div> <h2>超音波傳感器 + LED 燈</h2> <span>透過 Web 的方式，用超音波傳感器控制 LED 燈，當行為觸發時，網頁端同時也可以收到動作的發生</span> </a> </div> <div class="filter-example"> <a href="https://tutorials.webduino.io/zh-tw/docs/useful/sensor/ultrasonic-rgbled.html?utm_source=webduino_io&utm_medium=clickgo&utm_campaign=popup_information" target="_blank"> <div> <img class="lazy" data-original="img/tutorials/tutorial-08-01s.jpg"> </div> <h2>超音波傳感器 + 三色 LED 燈</h2> <span>這個範例最主要是希望能藉由三色 LED 燈顏色上的變化，對應距離的改變，如此一來我們就可以藉由燈號來判斷距離。</span> </a> </div> <div class="filter-component"> <a href="https://tutorials.webduino.io/zh-tw/docs/basic/component/button.html?utm_source=webduino_io&utm_medium=clickgo&utm_campaign=popup_information" target="_blank"> <div> <img class="lazy" data-original="img/tutorials/tutorial-09-01s.jpg"> </div> <h2>按鈕開關</h2> <span>開關是日常生活中很常見的電子零件，藉由開和關的訊號，可以控制各種不同的家電，這個範例將會展示。</span> </a> </div> <div class="filter-sensor"> <a href="https://tutorials.webduino.io/zh-tw/docs/basic/sensor/dht.html?utm_source=webduino_io&utm_medium=clickgo&utm_campaign=popup_information" target="_blank"> <div> <img class="lazy" data-original="img/tutorials/tutorial-10-01s.jpg"> </div> <h2>溫濕度傳感器</h2> <span>透過溫濕度傳感器，可以準確的偵測溫度與溼度的即時變化，搭配一些圖表工具或後端資料庫，整合成為非常有用的數據收集應用。</span> </a> </div> <div class="filter-component"> <a href="https://tutorials.webduino.io/zh-tw/docs/basic/component/shake-button.html?utm_source=webduino_io&utm_medium=clickgo&utm_campaign=popup_information" target="_blank"> <div> <img class="lazy" data-original="img/tutorials/tutorial-11-01s.jpg"> </div> <h2>震動開關改變網頁數值</h2> <span>震動開關在晃動的時候，內部互相接觸進而短路導電，利用震動的方式，控制電路的開或關，將結果回傳到網頁上。</span> </a> </div> <div class="filter-sensor"> <a href="https://tutorials.webduino.io/zh-tw/docs/basic/sensor/sound.html?utm_source=webduino_io&utm_medium=clickgo&utm_campaign=popup_information" target="_blank"> <div> <img class="lazy" data-original="img/tutorials/tutorial-12-01s.jpg"> </div> <h2>聲音偵測點亮 LED 與網頁燈泡</h2> <span>這個範例將會利用聲音偵測傳感器，當偵測到有聲音，就自動點亮 LED 燈，同時也會點亮網頁裡頭的燈泡。</span> </a> </div> <div class="filter-component"> <a href="https://tutorials.webduino.io/zh-tw/docs/basic/component/buzzer.html?utm_source=webduino_io&utm_medium=clickgo&utm_campaign=popup_information" target="_blank"> <div> <img class="lazy" data-original="img/tutorials/tutorial-13-01s.jpg"> </div> <h2>蜂鳴器播放自製音樂</h2> <span>藉由 HTML5 Attribute 來填入音符代碼，編輯 HTML5 或 javascript 就可以編輯音樂，透過蜂鳴器發聲。</span> </a> </div> <div class="filter-component"> <a href="https://tutorials.webduino.io/zh-tw/docs/basic/component/relay.html?utm_source=webduino_io&utm_medium=clickgo&utm_campaign=popup_information" target="_blank"> <div> <img class="lazy" data-original="img/tutorials/tutorial-14-01s.jpg"> </div> <h2>繼電器控制風扇旋轉</h2> <span>繼電器通常應用於自動控制電路中，當我們開始用 Webduino 控制繼電器，就可以非常簡單的做出利用網頁控制的智慧插座或自動開關。</span> </a> </div> <div class="filter-sensor"> <a href="https://tutorials.webduino.io/zh-tw/docs/basic/sensor/pir.html?utm_source=webduino_io&utm_medium=clickgo&utm_campaign=popup_information" target="_blank"> <div> <img class="lazy" data-original="img/tutorials/tutorial-15-01s.jpg"> </div> <h2>人體紅外線偵測控制 LED</h2> <span>利用 Webduino，在人體紅外線傳感器接收到訊號時，觸發網頁的燈泡亮起，同時也讓 LED 燈發光。</span> </a> </div> <div class="filter-component"> <a href="https://tutorials.webduino.io/zh-tw/docs/basic/component/servo.html?utm_source=webduino_io&utm_medium=clickgo&utm_campaign=popup_information" target="_blank"> <div> <img class="lazy" data-original="img/tutorials/tutorial-16-01s.jpg"> </div> <h2>控制伺服馬達轉動角度</h2> <span>使用 HTML 的 range，透過 Webduino控制伺服馬達的旋轉角度，range 調整多少，馬達就會跟著旋轉多少角度。</span> </a> </div> <div class="filter-sensor"> <a href="https://tutorials.webduino.io/zh-tw/docs/basic/sensor/photocell.html?utm_source=webduino_io&utm_medium=clickgo&utm_campaign=popup_information" target="_blank"> <div> <img class="lazy" data-original="img/tutorials/tutorial-17-01s.jpg"> </div> <h2>光敏電阻獲取光源數值</h2> <span>光敏電阻主要是利用光電導效應的一種特殊的電阻，透過會變化的電阻值，進一步產生輸出強弱訊號。</span> </a> </div> <div class="filter-component"> <a href="https://tutorials.webduino.io/zh-tw/docs/basic/component/maxmatrix.html?utm_source=webduino_io&utm_medium=clickgo&utm_campaign=popup_information" target="_blank"> <div> <img class="lazy" data-original="img/tutorials/tutorial-18-01s.jpg"> </div> <h2>LED 點矩陣顯示圖形</h2> <span>LED 點矩陣顧名思義，就是用許多 LED 燈所組成的元件，最常見到的就是在火車、公車等大眾運輸裡常見的文字跑馬燈。</span> </a> </div> <div class="filter-sensor"> <a href="https://tutorials.webduino.io/zh-tw/docs/basic/sensor/rfid.html?utm_source=webduino_io&utm_medium=clickgo&utm_campaign=popup_information" target="_blank"> <div> <img class="lazy" data-original="img/tutorials/tutorial-19-01s.jpg"> </div> <h2>RFID</h2> <span>RFID 中文翻譯為「無線射頻辨識」，是一種常見的無線通訊技術，常見於庫存、資產、人員等的追蹤與管理。</span> </a> </div> <div class="filter-example"> <a href="https://tutorials.webduino.io/zh-tw/docs/useful/sensor/rfid-youtube.html?utm_source=webduino_io&utm_medium=clickgo&utm_campaign=popup_information" target="_blank"> <div> <img class="lazy" data-original="img/tutorials/tutorial-20-01s.jpg"> </div> <h2>RFID 控制 Youtube</h2> <span>這一篇範例要來實作更進階的 RFID：控制 Youtube，利用不同的磁卡或磁扣，來切換不同的 Youtube 影片。</span> </a> </div> <div class="filter-component filter-example"> <a href="https://tutorials.webduino.io/zh-tw/docs/useful/example/toycar-keyboard.html?utm_source=webduino_io&utm_medium=clickgo&utm_campaign=popup_information" target="_blank"> <div> <img class="lazy" data-original="img/tutorials/tutorial-21-01s.jpg"> </div> <h2>鍵盤操控自走車</h2> <span>Webduino 公仔自走車是 Webduino 自主研發的產品，使用 Webduino 馬克 1 號開發板控制。</span> </a> </div> <div class="filter-example"> <a href="https://tutorials.webduino.io/zh-tw/docs/useful/component/led-speech.html?utm_source=webduino_io&utm_medium=clickgo&utm_campaign=popup_information" target="_blank"> <div> <img class="lazy" data-original="img/tutorials/tutorial-22-01s.jpg"> </div> <h2>語音聲控 LED 燈 </h2> <span>在這個範例裡面我們將會透過 Google 的語音辨識功能，輕鬆實現語音聲控 LED 燈的效果。</span> </a> </div> <div class="filter-sensor"> <a href="https://tutorials.webduino.io/zh-tw/docs/basic/sensor/adxl345.html?utm_source=webduino_io&utm_medium=clickgo&utm_campaign=popup_information" target="_blank"> <div> <img class="lazy" data-original="img/tutorials/tutorial-23-01s.jpg"> </div> <h2>三軸加速度計 </h2> <span>在這個篇教學將使用 Webduino 來控制 ADXL345 這個型號的三軸加速度感應器。</span> </a> </div> <div class="filter-component"> <a href="https://tutorials.webduino.io/zh-tw/docs/basic/component/ir.html?utm_source=webduino_io&utm_medium=clickgo&utm_campaign=popup_information" target="_blank"> <div> <img class="lazy" data-original="img/tutorials/tutorial-24-01s.jpg"> </div> <h2>紅外線發射與接收 </h2> <span>紅外線發射與接收，常見於我們日常生活的電器用品，舉凡電視機、冷氣機、遙控電風扇、玩具...等</span> </a> </div> <div class="filter-component"> <a href="https://tutorials.webduino.io/zh-tw/docs/basic/component/joypad.html?utm_source=webduino_io&utm_medium=clickgo&utm_campaign=popup_information" target="_blank"> <div> <img class="lazy" data-original="img/tutorials/tutorial-25-01s.jpg"> </div> <h2>偵測搖桿行為 </h2> <span>透過 Webduino 來偵測搖桿的訊號，進一步就可以用搖桿控制車子、機器人或一些實體裝置。</span> </a> </div> <div class="filter-example"> <a href="https://tutorials.webduino.io/zh-tw/docs/useful/component/led-google-form.html?utm_source=webduino_io&utm_medium=clickgo&utm_campaign=popup_information" target="_blank"> <div> <img class="lazy" data-original="img/tutorials/tutorial-26-01s.jpg"> </div> <h2>使用 Google 試算表控制 LED </h2> <span>我們將會填寫 Google 問卷，接著把問卷的統計數字平均並四捨五入成整數，再讓平均的分數透過 LED 的數量顯示出來。</span> </a> </div> <div class="filter-example"> <a href="https://tutorials.webduino.io/zh-tw/docs/useful/component/led-tracking-face.html?utm_source=webduino_io&utm_medium=clickgo&utm_campaign=popup_information" target="_blank"> <div> <img class="lazy" data-original="img/tutorials/tutorial-27-01s.jpg"> </div> <h2>人臉追蹤點亮 LED 燈</h2> <span>在這個範例中，將會使用網路攝影機，進行人臉追蹤，根據人臉的位置，來點亮 LED 燈。</span> </a> </div> <div class="filter-example"> <a href="https://tutorials.webduino.io/zh-tw/docs/useful/component/led-dancing.html?utm_source=webduino_io&utm_medium=clickgo&utm_campaign=popup_information" target="_blank"> <div> <img class="lazy" data-original="img/tutorials/tutorial-28-01s.jpg"> </div> <h2>霹靂燈 ( 12 顆 LED + 迴圈 )</h2> <span>我們將會用迴圈的方式，讓 12 顆 LED 燈交互閃爍，同時也可以控制交互閃爍的速度，實際做出一個超酷的霹靂燈效果。</span> </a> </div> <div class="filter-example"> <a href="https://tutorials.webduino.io/zh-tw/docs/useful/sensor/dht-firebase.html?utm_source=webduino_io&utm_medium=clickgo&utm_campaign=popup_information" target="_blank"> <div> <img class="lazy" data-original="img/tutorials/tutorial-29-01s.jpg"> </div> <h2>使用 Firebase 資料庫記錄溫濕度</h2> <span>我們會使用溫濕度傳感器獲取環境溫濕度之後，下一步一定是想要把溫濕度的數值儲存起來。</span> </a> </div> <div class="filter-example"> <a href="https://tutorials.webduino.io/zh-tw/docs/useful/example/toycar-motor-ic.html?utm_source=webduino_io&utm_medium=clickgo&utm_campaign=popup_information" target="_blank"> <div> <img class="lazy" data-original="img/tutorials/tutorial-30-01s.jpg"> </div> <h2>雙馬達控制晶片改造玩具車</h2> <span>透過 Webduino 和「雙馬達驅動晶片」的輔助，我們可以讓一般家用玩具車使用 Wi-Fi 來操控。</span> </a> </div> <div class="filter-sensor"> <a href="https://tutorials.webduino.io/zh-tw/docs/basic/sensor/soil.html?utm_source=webduino_io&utm_medium=clickgo&utm_campaign=popup_information" target="_blank"> <div> <img class="lazy" data-original="img/tutorials/tutorial-31-01s.jpg"> </div> <h2>偵測土壤濕度並由 LED 點矩陣顯示</h2> <span>我們可以利用土壤濕度計插入土中偵測土壤濕度，同時用 LED 點矩陣來顯示偵測到的濕度數值。</span> </a> </div> <div class="filter-example"> <a href="https://tutorials.webduino.io/zh-tw/docs/useful/example/smart-socket.html?utm_source=webduino_io&utm_medium=clickgo&utm_campaign=popup_information" target="_blank"> <div> <img class="lazy" data-original="img/tutorials/tutorial-32-01s.jpg"> </div> <h2>智慧插座 DIY</h2> <span>透過 Webduino 和繼電器的應用，將平凡無奇的插座升級成為可以光感、聲控、遠端遙控的智慧插座！</span> </a> </div> <div class="filter-example"> <a href="https://tutorials.webduino.io/zh-tw/docs/useful/component/buzzer-clock.html?utm_source=webduino_io&utm_medium=clickgo&utm_campaign=popup_information" target="_blank"> <div> <img class="lazy" data-original="img/tutorials/tutorial-33-01s.jpg"> </div> <h2>會說話的鬧鐘 ( 貪睡、蜂鳴器 )</h2> <span>這個範例將利用按鈕開關和蜂鳴器做出一個鬧鐘，具備貪睡、蜂鳴器音樂以及語音報時的功能。</span> </a> </div> <div class="filter-example"> <a href="https://tutorials.webduino.io/zh-tw/docs/basic/sensor/pot.html?utm_source=webduino_io&utm_medium=clickgo&utm_campaign=popup_information" target="_blank"> <div> <img class="lazy" data-original="img/tutorials/tutorial-34-01s.jpg"> </div> <h2>可變電阻改變圖片位置</h2> <span>我們將使用可變電阻的旋鈕，透過旋轉旋鈕改變數值，就可以讓圖片的位置發生變化！ </span> </a> </div> <div class="filter-example"> <a href="https://tutorials.webduino.io/zh-tw/docs/useful/sensor/pot-youtube.html?utm_source=webduino_io&utm_medium=clickgo&utm_campaign=popup_information" target="_blank"> <div> <img class="lazy" data-original="img/tutorials/tutorial-35-01s.jpg"> </div> <h2>可變電阻改變 Youtube 音量大小</h2> <span>我們將使用可變電阻的旋鈕，透過旋轉旋鈕改變數值，就可以改變 Youtube 音量大小。 </span> </a> </div> <div class="filter-component"> <a href="https://tutorials.webduino.io/zh-tw/docs/useful/example/smart-plant-pump.html?utm_source=webduino_io&utm_medium=clickgo&utm_campaign=popup_information" target="_blank"> <div> <img class="lazy" data-original="img/tutorials/tutorial-36-01s.jpg"> </div> <h2>網頁操控水泵</h2> <span>水泵亦可稱之為「幫浦」，透過馬達的加壓，可以做到一個管子抽水，然後從另外一個管子放水的動作。 </span> </a> </div> <div class="filter-example"> <i class="new"></i> <a href="https://tutorials.webduino.io/zh-tw/docs/useful/example/toycar-line-following.html?utm_source=webduino_io&utm_medium=clickgo&utm_campaign=popup_information" target="_blank"> <div> <img class="lazy" data-original="img/tutorials/tutorial-37-01s.jpg"> </div> <h2>循跡自走車</h2> <span>透過「循跡控制板」，輕鬆跟隨地上的軌跡移動，最後甚至可藉由雲端資料庫的輔助，實現紀錄路徑軌跡並重複播放的功能。</span> </a> </div> <div class="filter-example filter-new"> <i class="new"></i> <a href="https://tutorials.webduino.io/zh-tw/docs/useful/example/smart-robot-car-assembly.html?utm_source=webduino_io&utm_medium=clickgo&utm_campaign=popup_information" target="_blank"> <div> <img class="lazy" data-original="img/tutorials/smart-robot-car-assembly-01s.jpg"> </div> <h2>Smart 自走車 - 組裝步驟</h2> <span>專為 Smart 開發板量身打造，輕巧、方便又環保！這裡有詳細步驟，帶領你組裝自己的 Smart 自走車。</span> </a> </div> <div class="filter-example filter-new"> <i class="new"></i> <a href="https://tutorials.webduino.io/zh-tw/docs/useful/example/smart-robot-car-remote-control.html?utm_source=webduino_io&utm_medium=clickgo&utm_campaign=popup_information" target="_blank"> <div> <img class="lazy" data-original="img/tutorials/smart-robot-car-remote-control-01s.jpg"> </div> <h2>Smart 自走車 - 網頁遙控器操控</h2> <span>組裝玩 Smart 自走車後，當然就是要控制他啦！這個範例我們會實作如何透過網頁遙控器，就能操控自走車。</span> </a> </div> <div class="filter-example filter-new"> <i class="new"></i> <a href="https://tutorials.webduino.io/zh-tw/docs/useful/example/smart-robot-car-dht.html?utm_source=webduino_io&utm_medium=clickgo&utm_campaign=popup_information" target="_blank"> <div> <img class="lazy" data-original="img/tutorials/smart-robot-car-dht-01s.jpg"> </div> <h2>Smart 自走車 - 溫濕度感測車</h2> <span>這篇範例將加入「溫濕度傳感器」及 Google 試算表，實現隨時隨地將環境溫濕度資料儲存在雲端。</span> </a> </div> <div class="filter-bit filter-new"> <i class="new"></i> <a href="https://tutorials.webduino.io/zh-tw/docs/bit/basic/blockly.html?utm_source=webduino_io&utm_medium=clickgo&utm_campaign=popup_information" target="_blank"> <div> <img class="lazy" data-original="img/tutorials/bit-detail-s.jpg"> </div> <h2>Webduino Bit 詳細規格</h2> <span>如果你對 Webduino Bit 有興趣，可以透過此篇文章，了解開發板的詳細規格，以及所具備的傳感器和電子元件。</span> </a> </div> <div class="filter-bit filter-new"> <i class="new"></i> <a href="https://tutorials.webduino.io/zh-tw/docs/bit/basic/setting.html?utm_source=webduino_io&utm_medium=clickgo&utm_campaign=popup_information" target="_blank"> <div> <img class="lazy" data-original="img/tutorials/bit-setting-s.jpg"> </div> <h2>Webduino Bit 初始化設定</h2> <span>初始化設定可以幫助你，將 Webduino Bit 連結所在場所的無線網路，進一步享受無線操控或遠端更新的服務。</span> </a> </div> <div class="filter-bit filter-new"> <i class="new"></i> <a href="https://tutorials.webduino.io/zh-tw/docs/bit/basic/blockly.html?utm_source=webduino_io&utm_medium=clickgo&utm_campaign=popup_information" target="_blank"> <div> <img class="lazy" data-original="img/tutorials/bit-blockly-s.jpg"> </div> <h2>認識 Webduino Blockly Bit</h2> <span>Webduino Blockly Bit 體驗版提供虛實整合、程式積木、遠端操控的環境，可盡情體驗物聯網的使用情境與操作感受。</span> </a> </div> <div class="filter-bit filter-new"> <i class="new"></i> <a href="https://tutorials.webduino.io/zh-tw/docs/bit/basic/rgbmatrix.html?utm_source=webduino_io&utm_medium=clickgo&utm_campaign=popup_information" target="_blank"> <div> <img class="lazy" data-original="img/tutorials/bit-rgbmatrix-s.jpg"> </div> <h2>5x5 全彩 LED 點矩陣</h2> <span>全彩 LED 點矩陣是由 25 顆紅綠藍三色 LED 組成，透過不同位置的燈號與顏色顯示，就能呈現各種不同的圖案造型。</span> </a> </div> <div class="filter-bit filter-new"> <i class="new"></i> <a href="https://tutorials.webduino.io/zh-tw/docs/bit/basic/button.html?utm_source=webduino_io&utm_medium=clickgo&utm_campaign=popup_information" target="_blank"> <div> <img class="lazy" data-original="img/tutorials/bit-button-s.jpg"> </div> <h2>按鈕開關</h2> <span>開關常見於日常生活中，Webduino Bit 開發板預設兩顆按鈕開關，透過開關的操控能夠實作物聯網的情境甚至遊戲遙控器。</span> </a> </div> <div class="filter-bit filter-new"> <i class="new"></i> <a href="https://tutorials.webduino.io/zh-tw/docs/bit/basic/buzzer.html?utm_source=webduino_io&utm_medium=clickgo&utm_campaign=popup_information" target="_blank"> <div> <img class="lazy" data-original="img/tutorials/bit-buzzer-s.jpg"> </div> <h2>蜂鳴器</h2> <span>Webduino Bit 預設的蜂鳴器，能夠播放七個八度音階的聲音，透過不同音調頻率的組合，人人都能成為偉大作曲家。</span> </a> </div> <div class="filter-bit filter-new"> <i class="new"></i> <a href="https://tutorials.webduino.io/zh-tw/docs/bit/basic/photocell.html?utm_source=webduino_io&utm_medium=clickgo&utm_campaign=popup_information" target="_blank"> <div> <img class="lazy" data-original="img/tutorials/bit-photocell-s.jpg"> </div> <h2>偵測光線</h2> <span>藉由 Webduino Bit 預設的兩個光敏電阻，能夠偵測光線的強弱，甚至互相搭配實作智慧家電或自動偵測的相關應用。</span> </a> </div> </div> <div class="tutorials-content"> <div class="banner"> </div> </div> <footer> <div class="w-20 screen-copyright"> <div class="logo"> <a href="index.html"><img src="https://webduino.io/img/layout/webduino-gray.png"></a> <h4>Copyright 2017 | All Rights Reserved. Powered by Webduino</h4> </div> </div> <div class="w-80"> <div class="w-100"> <div class="w-25">關於我們 <ul> <li><a href="https://webduino.io/" target="blank">首頁</a></li> <li><a href="https://webduino.io/about.html" target="blank">關於我們</a></li> <li><a href="https://webduino.io/partner.html" target="blank">合作夥伴</a></li> </ul> </div> <div class="w-25">教材 <ul> <li><a href="https://tutorials.webduino.io/" target="blank">學習手冊</a></li> <li><a href="https://webduino.io/activity.html" target="blank">課程活動</a></li> <li><a href="https://tutorials.webduino.io/zh-tw/docs/faq/index.html" target="blank">常見問題</a></li> </ul> </div> <div class="w-25">硬體產品 <ul> <li><a href="https://webduino.io/buy.html" target="blank">開發板與電子零件</a></li> <li><a href="http://class.ruten.com.tw/user/index00.php?s=webduino" target="blank">露天賣場</a></li> </ul> </div> <div class="w-25">軟體服務 <ul> <li><a href="https://cloud.webduino.io/" target="blank">雲端平台</a></li> <li><a href="https://blockly.webduino.io/" target="blank">Webduino Blockly 體驗版</a></li> </ul> </div> </div> <div class="w-100"> <hr> </div> <div class="w-100"> <div class="w-50">聯絡我們 <ul> <li>+886 7 3388511</li> <li>service@webduino.io</li> <li>806 高雄市前鎮區復興四路 12 號 2 樓之 6</li> </ul> </div> <div class="w-50">社群媒體 <div> <a href="https://www.facebook.com/webduino" target="blank"><i class="fa fa-facebook"></i></a> <a href="https://www.youtube.com/channel/UCUk3U7QZqijQfE-7rAh_INQ" target="blank"><i class="fa fa-youtube"></i></a> <a href="https://github.com/webduinoio" target="blank"><i class="fa fa-github"></i></a> <a href="https://webduino.io/en/" target="blank" style="float: right;"><img src="https://webduino.io/img/layout/icon-en.png"></a> </div> </div> </div> </div> </footer> <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-TT4TZ8L" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript> </body> </html>