tutorials/tutorials.html at gh-pages · ChiangFamily/tutorials · GitHub

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html> <html lang="en"> <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> <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.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="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> </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="tutorials.html" class="tutorials" data-name="layout-mobile-menu">教學範例</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 data-name="layout-mobile-menu" href="https://www.facebook.com/webduino/info?tab=overview" target="_blank">連絡我們</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="../tutorials.html" class="tutorials" data-name="layout-menu">教學範例</a> <a href="../buy.html" class="buy" data-name="layout-menu">產品總覽</a> <a href="../activity.html" class="activity" data-name="layout-menu">課程活動</a> <a data-name="layout-mobile-menu" href="https://www.facebook.com/webduino/info?tab=overview" target="_blank">連絡我們</a> </div> </header> <div class="filter"> <div class="btn-all click">所有文章</div> <div class="btn-new">最新文章</div> <div class="btn-info">設定與介紹</div> <div class="btn-component">元件模組</div> <div class="btn-sensor">傳感器</div> <div class="btn-example">綜合應用</div> </div> <div class="content">  <div class="filter-info"> <a href="tutorials/info-01-introduction.html"> <div> <img class="lazy" data-original="img/tutorials/info-01-01s.jpg"> </div> <h2>基本介紹</h2> <span>Webduino 讓使用者只需要撰寫簡單的網頁程式，就可以串接 Arduino，大幅降低開發的門檻。</span> </a> </div> <div class="filter-info"> <a href="tutorials/info-02-setup.html"> <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="tutorials/info-03-faq.html"> <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="tutorials/info-04-uno-setup.html"> <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="tutorials/info-07-arduino-ino.html"> <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="tutorials/info-05-chrome-api-proxy.html"> <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="tutorials/info-08-blockly-tutorial.html"> <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 filter-new"> <i class="new"></i> <a href="tutorials/info-09-multi-webduino-board.html"> <div> <img class="lazy" data-original="img/tutorials/info-09-01s.jpg"> </div> <h2>連動多塊 Webduino 開發板</h2> <span>我們就可以透過很簡單的判斷與控制，進一步讓各個開發板與電子零組件彼此連動。</span> </a> </div> <div class="filter-component"> <a href="tutorials/tutorial-01-led.html"> <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="tutorials/tutorial-02-2led.html"> <div> <img class="lazy" data-original="img/tutorials/tutorial-02-01s.jpg"> </div> <h2>兩顆 LED 燈交互閃爍</h2> <span>在這個範例裡頭，將會利用按鈕的方式，同時操控兩顆 LED 燈，做出兩顆 LED 燈交互閃動的效果。</span> </a> </div> <div class="filter-component"> <a href="tutorials/tutorial-03-rgbled.html"> <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="tutorials/tutorial-04-rgbled-palette.html"> <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="tutorials/tutorial-05-ultrasonic.html"> <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="tutorials/tutorial-06-ultrasonic-imagesize.html"> <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="tutorials/tutorial-07-ultrasonic-led.html"> <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="tutorials/tutorial-08-ultrasonic-rgbled.html"> <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="tutorials/tutorial-09-button-led.html"> <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="tutorials/tutorial-10-temperature-humidity-sensor.html"> <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="tutorials/tutorial-11-shock-button.html"> <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="tutorials/tutorial-12-sound-sensor.html"> <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="tutorials/tutorial-13-buzzer.html"> <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="tutorials/tutorial-14-relay.html"> <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="tutorials/tutorial-15-pir-led.html"> <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="tutorials/tutorial-16-servo.html"> <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="tutorials/tutorial-17-photocell.html"> <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="tutorials/tutorial-18-max7219.html"> <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="tutorials/tutorial-19-rfid.html"> <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="tutorials/tutorial-20-rfid-youtube.html"> <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="tutorials/tutorial-21-toycar.html"> <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="tutorials/tutorial-22-speech-led.html"> <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 filter-new"> <i class="new"></i> <a href="tutorials/tutorial-23-adxl345.html"> <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 filter-new"> <i class="new"></i> <a href="tutorials/tutorial-24-ir.html"> <div> <img class="lazy" data-original="img/tutorials/tutorial-24-01s.jpg"> </div> <h2>紅外線發射與接收 </h2> <span>紅外線發射與接收，常見於我們日常生活的電器用品，舉凡電視機、冷氣機、遙控電風扇、玩具...等</span> </a> </div> <div class="filter-component filter-new"> <i class="new"></i> <a href="tutorials/tutorial-25-joypad.html"> <div> <img class="lazy" data-original="img/tutorials/tutorial-25-01s.jpg"> </div> <h2>偵測搖桿行為 </h2> <span>透過 Webduino 來偵測搖桿的訊號，進一步就可以用搖桿控制車子、機器人或一些實體裝置。</span> </a> </div> <div class="filter-example filter-new"> <i class="new"></i> <a href="tutorials/tutorial-26-google-sheet.html"> <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 filter-new"> <i class="new"></i> <a href="tutorials/tutorial-27-tracking-face.html"> <div> <img class="lazy" data-original="img/tutorials/tutorial-27-01s.jpg"> </div> <h2>人臉追蹤點亮 LED 燈</h2> <span>在這個範例中，將會使用網路攝影機，進行人臉追蹤，根據人臉的位置，來點亮 LED 燈。</span> </a> </div> </div> <div class="tutorials-content"> <div class="banner"> </div> </div> <div class="disqus"> <div id="disqus_thread"></div> </div> <footer> <div class="logo"> <a href="index.html" data-name="layout-footer-logo"><i></i></a> <a href="../index.html" data-name="layout-footer-logo"><i></i></a> </div> <h4>Copyright 2015 | All Rights Reserved. Power by Webduino.io</h4> <h4>80661 高雄市前鎮區復興四路 20 號 1 樓 / 886-7-3388511</h4> </footer> <script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-62202920-1', 'auto');
  ga('send', 'pageview');

</script> </body> </html>