This repository was 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
Expand file tree
/
Copy pathtutorial-02-2led.html
More file actions
66 lines (64 loc) · 17.1 KB
/
Copy pathtutorial-02-2led.html
File metadata and controls
66 lines (64 loc) · 17.1 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<!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"> <title>教學範例 2：兩顆 LED 交互閃爍 :::: Webduino = Web × Arduino</title> <meta name="description" content="熟悉了第一個 webduino 的範例之後，接下來就要做點延伸的應用，在這個範例裡頭，將會利用點選燈泡圖片，操控兩顆 LED 燈，做出兩顆 LED 燈交互閃動的效果。"> <meta itemprop="description" content="熟悉了第一個 webduino 的範例之後，接下來就要做點延伸的應用，在這個範例裡頭，將會利用點選燈泡圖片，操控兩顆 LED 燈，做出兩顆 LED 燈交互閃動的效果。"> <meta property="og:description" content="熟悉了第一個 webduino 的範例之後，接下來就要做點延伸的應用，在這個範例裡頭，將會利用點選燈泡圖片，操控兩顆 LED 燈，做出兩顆 LED 燈交互閃動的效果。"> <link rel="canonical" href="https://tutorials.webduino.io/zh-tw/docs/useful/component/led-2.html"> <meta property="og:title" content="教學範例 2：兩顆 LED 交互閃爍"> <meta property="og:url" content="https://webduino.io/tutorials/tutorial-02-2led.html"> <meta property="og:image" content="https://webduino.io/img/tutorials/tutorial-02-01s.jpg"> <meta itemprop="image" content="https://webduino.io/img/tutorials/tutorial-02-01s.jpg"> <script src="../js/lib/jquery.min.js"></script> <script src="../js/lib/jquery.lazyload.min.js"></script> <script src="../js/lib/run_prettify.js"></script> <script src="../js/layout-20171211.js"></script> <script src="../js/tutorials.js"></script> <script src="../js/lib/disqus.js"></script> <link rel="stylesheet" href="../style/css/lib/tomorrow.css"> <link rel="stylesheet" href="../style/css/layout.css"> <link rel="stylesheet" href="../style/css/sub-header.css"> <link rel="stylesheet" href="../style/css/tutorials-content.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="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 href="about.html" class="about" data-name="layout-mobile-men">關於我們</a> <a href="en/index.html" class="english" data-name="layout-mobile-men">English</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 href="../about.html" class="about" data-name="layout-menu">關於我們</a> <a href="../en/index.html" class="english" data-name="layout-menu">English</a> </div> </header> <div class="tutorials-content"> <div class="banner"> </div> <h1>教學範例 2：兩顆 LED 交互閃爍</h1> <p>熟悉了 <a href="tutorial-01-led.html">第一個範例</a> 之後，接下來就要做點延伸的應用，在這個範例裡頭，將會利用點選燈泡圖片，操控兩顆 LED 燈，做出兩顆 LED 燈交互閃動的效果。</p> <div class="buy-this"> <span>LED 燈相關套件：<a href="https://webduino.io/buy/webduino-package-plus.html" target="_blank">Webduino 基本套件 Plus ( 支援馬克 1 號、Fly )</a></span> <span>Webduino 開發板：<a href="https://webduino.io/buy/component-webduino-v1.html" target="_blank">Webduino 馬克一號</a>、<a href="https://webduino.io/buy/component-webduino-fly.html" target="_blank">Webduino Fly</a>、<a href="https://webduino.io/buy/component-webduino-uno-fly.html" target="_blank">Webduino Fly + Arduino UNO</a></span> </div> <h2>教學影片</h2> <p>影片對應範例：<a href="https://blockly.webduino.io/?&page=tutorials/led-4">https://blockly.webduino.io/?&page=tutorials/led-4</a> </p> <p><iframe class="youtube" src="https://www.youtube.com/embed/X3s_WoOVyxk" frameborder="0" allowfullscreen=""></iframe></p> <h2>接線與實作</h2> <p>因為我們這次有使用到兩顆 LED 燈，所以必須要使用麵包板來進行，將一顆 LED 燈長腳接在 11，另外一顆 LED 燈長腳接在 10，兩顆 LED 燈共用一個 GND ( 地線 )。</p> <p>馬克一號接線示意圖：</p> <p><img src="../img/tutorials/tutorial-02-02.jpg" alt="教學範例 2：兩顆 LED 交互閃爍"></p> <p>Fly 接線示意圖：</p> <p><img src="../img/tutorials/tutorial-02-02-fly.jpg" alt="教學範例 2：兩顆 LED 交互閃爍"></p> <p>實際接線照片：</p> <p><img src="../img/tutorials/tutorial-02-03.jpg" alt="教學範例 2：兩顆 LED 交互閃爍"></p> <div class="buy-this"> <span>LED 燈相關套件：<a href="https://webduino.io/buy/webduino-package-plus.html" target="_blank">Webduino 基本套件 Plus ( 支援馬克 1 號、Fly )</a></span> <span>Webduino 開發板：<a href="https://webduino.io/buy/component-webduino-v1.html" target="_blank">Webduino 馬克一號</a>、<a href="https://webduino.io/buy/component-webduino-fly.html" target="_blank">Webduino Fly</a>、<a href="https://webduino.io/buy/component-webduino-uno-fly.html" target="_blank">Webduino Fly + Arduino UNO</a></span> </div> <h2>Webduino Blockly 操作解析</h2> <p>打開 Webduino Blockly 編輯工具 ( <a href="https://blockly.webduino.io">https://blockly.webduino.io</a> )，因為這個範例也會點選網頁「燈泡圖案」來控制，所以要先點選右上方「網頁互動測試」的按鈕，打開內嵌測試的網頁，用下拉選單選擇「點擊燈泡」，就會出現讓我們可以點選燈泡的網頁。</p> <p><img src="../img/tutorials/tutorial-02-04.jpg" alt="教學範例 2：兩顆 LED 交互閃爍"></p> <p>在編輯畫面放入開發板，填入對應的 Webduino 開發板名稱，在開發板內放入兩個 LED，分別設定 10 與 11 腳位，也分別設定名稱為 led1 和 led2，完成後接著擺上「點擊燈泡就執行」的積木。</p> <p><img src="../img/tutorials/tutorial-02-05.jpg" alt="教學範例 2：兩顆 LED 交互閃爍"></p> <p>和 <a href="tutorial-01-led.html">第一個範例</a> 的作法類似，點下燈泡圖片之後，就要進行邏輯的判斷，所以這裡我們就先把邏輯積木放進去，並且判斷「如果燈泡是 off」，就把燈泡 on，反之就把燈泡 off 起來。</p> <p><img src="../img/tutorials/tutorial-02-06.jpg" alt="教學範例 2：兩顆 LED 交互閃爍"></p> <p>再來先看到打開燈泡時要做什麼事情，這裏將用到「進階功能」裡的「重複」積木，重複的積木除了可以指定重複次數，更可以設定一個變數來做「不斷重複」，同時可以停止這個變數的不斷重複。</p> <p><img src="../img/tutorials/tutorial-02-07.jpg" alt="教學範例 2：兩顆 LED 交互閃爍"></p> <p>把不斷重複的積木放進畫面中，計時器的名稱就用預設的 timer，在第一個狀態內放入 led1 on 和 led2 off 的積木，第二個狀態內放入 led1 off 和 led2 on 的積木，時間都設定為 0.5 秒，如此一來當燈泡圖片亮起，兩顆 LED 燈就會交互閃爍。( 如果需要更多狀態，就可以點選藍色小齒輪新增，做法和邏輯的積木類似 )</p> <p><img src="../img/tutorials/tutorial-02-08.jpg" alt="教學範例 2：兩顆 LED 交互閃爍"></p> <p>既然有開始就一定會有停止，所以當燈泡圖片熄滅時，就把計時器 timer 停止，同時把 led1 和 led2 的狀態都設為 off。</p> <p><img src="../img/tutorials/tutorial-02-09.jpg" alt="教學範例 2：兩顆 LED 交互閃爍"></p> <p>完成後，確認開發板上線 ( 點選「<a href="https://webduino.io/device.html">檢查連線狀態</a>」查詢 )，點選紅色的執行按鈕，就可以開始。</p> <p><img src="../img/tutorials/tutorial-02-10.jpg" alt="教學範例 2：兩顆 LED 交互閃爍"></p> <p>點擊內嵌網頁裡的燈泡圖片，就可以讓兩顆 LED 交互閃爍或是停止，然而我們也可以點選「JavaScript 頁籤」，就可以看到完整的程式碼邏輯，同時也可以複製這些代碼，貼到自己的網頁原始碼當中，就可以在自己的網頁裡實現一模一樣的行為囉！ ( 解答：<a href="https://blockly.webduino.io/#-K4q6FT6L5mx8WZ5NuJW">https://blockly.webduino.io/#-K4q6FT6L5mx8WZ5NuJW</a> )</p> <h2>程式碼解析 ( <a href="http://bin.webduino.io/harol/edit?html,css,js,output">看完整程式碼</a>、<a href="https://webduino.io/device.html">檢查連線狀態</a> )</h2> <p>HTML 的 header 引入 <code>webduino-all.min.js</code>，目的在讓瀏覽器可以支援 WebComponents 以及 Webduino 所有的元件，如果是用 Blockly 編輯工具產生的程式碼，則要額外引入 <code>webduino-blockly.js</code>。</p> <pre><code><script src="https://webduino.io/components/webduino-js/dist/webduino-all.min.js"></script>
<script src="https://webduinoio.github.io/webduino-blockly/webduino-blockly.js"></script>
</code></pre><p>接著看到 HTML 的 body 裡頭，放入一個 id 為 demo-area-02-light 的圖片區域，裡面含有兩張分別是亮起的燈泡與不亮的燈泡圖片，目的在於點選的時候，圖片也會從不亮的燈泡轉變為亮起的燈泡。</p> <pre><code><div id="demo-area-02-light" class="off">
<img src="https://blockly.webduino.io/media/off.png" id="demo-area-02-off">
<img src="https://blockly.webduino.io/media/on.png" id="demo-area-02-on">
</div>
</code></pre><p>控制燈泡圖片亮暗的是使用 CSS 的方式，用圖片顯示的切換 <code>display:none;</code> 來達到相關效果，下面是 CSS 的程式碼。</p> <pre><code>#demo-area-02-light img{
height:200px;
display:none;
}
#demo-area-02-light.on #demo-area-02-on{
display:inline-block;
}
#demo-area-02-light.off #demo-area-02-off{
display:inline-block;
}
</code></pre><p>重點看到 javascript 的部分，因為有兩顆 LED 燈，所以分別用 led1 和 led2 兩個變數來表示，然後計時器的變數為 timer，燈泡是 light，比較特別的是這裡使用了 JS6 的 <code>Promise</code>來作為計時器使用，這可以幫助我們確認當該狀態確定完成後，才會繼續執行，此外裏頭又用了 <code>setTimeout</code> 這個延遲執行的方法，做成一個不斷循環重複的指令，而停止的時候，只需要用 <code>clearTimeout</code> 就可以停下來了。</p> <pre><code>var led1;
var led2;
var timer;
var light;
boardReady('', function (board) {
board.samplingInterval = 20;
led1 = getLed(board, 10);
led2 = getLed(board, 11);
light = document.getElementById("demo-area-02-light");
light.addEventListener("click",function(){
if (light.className == "off") {
light.className = "on";
var repeat = function(){
var time;
var repeatDelay = function(time){
return new Promise(function(resolve){
timer = setTimeout(resolve,time);
});
};
var repeatPromise = function(){
repeatDelay(1).then(function(){
led1.on();
led2.off();
return repeatDelay(500);
}).then(function(){
led1.off();
led2.on();
return repeatDelay(500);
}).then(function(){
repeatPromise();
});
};
repeatPromise();
};
repeat();
} else {
light.className = "off";
clearTimeout(timer);
led1.off();
led2.off();
}
});
});
</code></pre><p>以上就是點選圖片控制兩顆 LED 燈交互閃爍的範例。<br>完整程式碼：<a href="http://bin.webduino.io/harol/edit?html,css,js,output">http://bin.webduino.io/harol/edit?html,css,js,output</a><br>解答：<a href="https://blockly.webduino.io/#-K4q6FT6L5mx8WZ5NuJW">https://blockly.webduino.io/#-K4q6FT6L5mx8WZ5NuJW</a></p> <h2>兩顆 LED 的延伸教學：</h2> <p><a href="https://blockly.webduino.io/?lang=zh-hant&page=tutorials/led-3#-JvMuD8cPViCJFD4VRSr">Webduino Blockly 課程 1-3：控制兩顆 LED 燈</a><br><a href="https://blockly.webduino.io/?lang=zh-hant&page=tutorials/led-4#-JvMuhwaEGs7oMUz-bpm">Webduino Blockly 課程 1-4：兩顆 LED 燈交互閃爍</a></p> <div class="buy-this"> <span>LED 燈相關套件：<a href="https://webduino.io/buy/webduino-package-plus.html" target="_blank">Webduino 基本套件 Plus ( 支援馬克 1 號、Fly )</a></span> <span>Webduino 開發板：<a href="https://webduino.io/buy/component-webduino-v1.html" target="_blank">Webduino 馬克一號</a>、<a href="https://webduino.io/buy/component-webduino-fly.html" target="_blank">Webduino Fly</a>、<a href="https://webduino.io/buy/component-webduino-uno-fly.html" target="_blank">Webduino Fly + Arduino UNO</a></span> </div> <a class="arrow arrow-r pre-next-button" data-name="pre-next-arrow"></a> <a class="arrow arrow-l pre-next-button" data-name="pre-next-arrow"></a> <div class="pre-next"> <div> <div class="pre"></div> <div class="next"></div> </div> </div> <div class="note-chicken"></div> <div class="others"> <i class="fa fa-times note-close-btn"></i> <h5>如果您還想了解更多，可以參考：</h5> <div class="others-link otehrs-read"> 1. 完整教學範例：<a href="https://tutorials.webduino.io" data-name="noteLink">https://tutorials.webduino.io</a> <br> 2. Blockly 教學：<a href="https://goo.gl/h6s7GY" data-name="noteLink">https://goo.gl/h6s7GY</a> <br> 3. 產品總覽：<a href="https://webduino.io/buy.html" target="_blank" data-name="noteLink">https://webduino.io/buy.html <i class="fa fa-share-square-o"></i></a> <br> 4. 露天賣場：<a href="http://goo.gl/0Dj9ip" target="_blank" data-name="noteLink">http://goo.gl/0Dj9ip <i class="fa fa-share-square-o"></i></a> </div> </div> <div class="popup"> <div class="whitebox"> <span class="popup-close">X</span> <img src="https://webduinoio.github.io/tutorials/img/tutorials/boy.png"> <h3>Webduino 全新教學網站上線囉</h3> <p>本篇文章已經有更新的版本，趕快前往閱讀吧！</p> <a href="https://tutorials.webduino.io/" class="popup-new-article new-tutorials go" target="_blank">立即閱讀</a> </div> </div> </div> <div class="disqus"> <div id="disqus_thread"></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="about.html" target="blank">關於我們</a></li> <li><a href="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="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="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>[email protected]</li> <li>807 高雄市前鎮區復興四路 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></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>