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-01-led.html
More file actions
265 lines (223 loc) · 16.8 KB
/
Copy pathtutorial-01-led.html
File metadata and controls
265 lines (223 loc) · 16.8 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
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
<!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>教學範例 1：控制單顆 LED 燈 :::: Webduino = Web × Arduino</title>
<meta name="description" content="在基本的 Arduino 傳感器控制範例裡頭，控制單顆 LED 燈通常都是作為第一個範例使用，為什麼呢？因為這個範例最容易上手，也最容易藉由 LED 的明暗來測試程式是否有寫錯，因此進入了 Webduino 的世界之後，同樣也使用 LED 來作為第一個範例，而撰寫的程式也更為簡單，就像控制一張網頁圖片切換一樣的容易。">
<meta itemprop="description" content="在基本的 Arduino 傳感器控制範例裡頭，控制單顆 LED 燈通常都是作為第一個範例使用，為什麼呢？因為這個範例最容易上手，也最容易藉由 LED 的明暗來測試程式是否有寫錯，因此進入了 Webduino 的世界之後，同樣也使用 LED 來作為第一個範例，而撰寫的程式也更為簡單，就像控制一張網頁圖片切換一樣的容易。">
<meta property="og:description" content="在基本的 Arduino 傳感器控制範例裡頭，控制單顆 LED 燈通常都是作為第一個範例使用，為什麼呢？因為這個範例最容易上手，也最容易藉由 LED 的明暗來測試程式是否有寫錯，因此進入了 Webduino 的世界之後，同樣也使用 LED 來作為第一個範例，而撰寫的程式也更為簡單，就像控制一張網頁圖片切換一樣的容易。">
<link rel="canonical" href="https://tutorials.webduino.io/zh-tw/docs/basic/component/led.html">
<meta property="og:title" content="教學範例 1：控制單顆 LED 燈" >
<meta property="og:url" content="https://webduino.io/tutorials/tutorial-01-led.html">
<meta property="og:image" content="https://webduino.io/img/tutorials/tutorial-01-01s.jpg">
<meta itemprop="image" content="https://webduino.io/img/tutorials/tutorial-01-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.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">
</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>教學範例 1：控制單顆 LED 燈</h1>
<p>在基本的 Arduino 傳感器控制範例裡頭，控制單顆 LED 燈通常都是作為第一個範例使用，為什麼呢？因為這個範例最容易上手，也最容易藉由 LED 的明暗來測試程式是否有寫錯，因此進入了 Webduino 的世界之後，同樣也使用 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-2">https://blockly.webduino.io/?&page=tutorials/led-2</a> </p>
<p><iframe class="youtube" src="https://www.youtube.com/embed/8k6Lqu-aqVM" frameborder="0" allowfullscreen></iframe></p>
<h2>接線與實作</h2>
<p>只有一顆 LED 燈的接線方式很簡單，首先，LED 燈有「長短腳」之分，長腳接「高電位」( 帶有數字的腳位 )，短腳接「低電位」( GND、接地 )，因此我們只要直接將 LED 插到腳位上即可，或使用麵包板與麵包線外接出來，在這裡<strong>長腳接 10，短腳接 GND</strong>。</p>
<p>馬克一號接線示意圖：</p>
<p><img src="../img/tutorials/tutorial-01-02.jpg" alt=""></p>
<p>Fly 接線示意圖：</p>
<p><img src="../img/tutorials/tutorial-01-02-fly.jpg" alt=""></p>
<p>實際接線照片：</p>
<p><img src="../img/tutorials/tutorial-01-03.jpg" alt=""></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> )，在第一個範例裡頭，我們將會點選網頁「燈泡圖案」來控制 LED 燈的切換，所以要先點選右上方「網頁互動測試」的按鈕，打開內嵌測試的網頁，用下拉選單選擇「點擊燈泡」，就會出現讓我們可以點選燈泡的網頁。</p>
<p><img src="../img/tutorials/tutorial-01-04.jpg" alt=""></p>
<p>從編輯工具左側的積木選單中選擇「開發板」，將開發板放到畫面當中，填入對應的 Webduino 開發板名稱 ( Device 名稱，不要勾選串連 )，接著選擇「LED 燈」的積木，將 LED 燈的積木放到開發板積木的缺口內，腳位設定為 10 ( 因為剛剛把長腳接在 10 號腳 )。</p>
<p><img src="../img/tutorials/tutorial-01-05.jpg" alt=""></p>
<p>因為要和網頁互動，所以我們要從積木選單的最下方「網頁互動」，點選「點擊燈泡」，就會看到很多點擊網頁燈泡圖片互動的選項。</p>
<p><img src="../img/tutorials/tutorial-01-06.jpg" alt=""></p>
<p>把「點擊燈泡執行」的積木放到編輯畫面裡，代表點擊燈泡時要做些什麼事情。</p>
<p><img src="../img/tutorials/tutorial-01-07.jpg" alt=""></p>
<p>在執行的內容放入「邏輯」的積木，判斷點擊燈泡時，依據當時的狀態做出相對的反應，而我們也可以利用邏輯積木上面「藍色小齒輪」，添增邏輯選項。</p>
<p><img src="../img/tutorials/tutorial-01-08.jpg" alt=""></p>
<p>根據邏輯，判斷「當燈泡是 on」的話，點擊燈泡就會變成「off」，反之就是「on」。</p>
<p><img src="../img/tutorials/tutorial-01-09.jpg" alt=""></p>
<p>完成後，確認開發板上線 ( 點選「<a href="https://webduino.io/device.html">檢查連線狀態</a>」查詢 )，點選紅色的執行按鈕，就可以開始。</p>
<p><img src="../img/tutorials/tutorial-01-10.jpg" alt=""></p>
<p>點擊內嵌網頁裡的燈泡圖片，就可以輕鬆地控制 LED 燈的明暗，然而我們也可以點選「JavaScript 頁籤」，就可以看到完整的程式碼邏輯，同時也可以複製這些代碼，貼到自己的網頁原始碼當中，就可以在自己的網頁裡實現一模一樣的行為囉！<br>( 解答：<a href="https://blockly.webduino.io/#-K4pR8RaEF6IkiWdAYk7">https://blockly.webduino.io/#-K4pR8RaEF6IkiWdAYk7</a> )</p>
<h2>程式碼解析 ( <a href="http://bin.webduino.io/tetig/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 部分，下面的範例程式開始先要確認開發板上線 ( 使用 <code>boardReady</code> ) 之後就可以開始進行動作，執行的方式也簡單，先設定一個名為 led 的變數，使用 <code>getLed</code> 設定腳位為 10，然後綁定圖片的點擊事件，再使用 LED 的 API 來操作。</p>
<pre><code>var led;
boardReady('', function (board) {
board.samplingInterval = 20;
led = getLed(board, 10);
document.getElementById("demo-area-02-light").addEventListener("click",function(){
if (document.getElementById("demo-area-02-light").className == "on") {
document.getElementById("demo-area-02-light").className = "off";
led.off();
} else {
document.getElementById("demo-area-02-light").className = "on";
led.on();
}
});
});
</code></pre><p>因為程式碼由 Blockly 自動生成，可能會有一些重複或累贅的程式碼，我們可以將上面這段程式碼簡化成下面這樣，目的只是把重複的 <code>document.getElementById("demo-area-02-light")</code> 變成一個變數 light 而已，就會乾淨許多。</p>
<pre><code>var led;
var light;
boardReady('', function (board) {
board.samplingInterval = 20;
led = getLed(board, 10);
light = document.getElementById("demo-area-02-light");
light.addEventListener("click",function(){
if (light.className == "on") {
light.className = "off";
led.off();
} else {
light.className = "on";
led.on();
}
});
});
</code></pre><p>以上就是點選圖片控制 LED 燈的基本範例。<br>完整程式碼：<a href="http://bin.webduino.io/tetig/edit?html,css,js,output">http://bin.webduino.io/tetig/edit?html,css,js,output</a><br>解答：<a href="https://blockly.webduino.io/#-K4pR8RaEF6IkiWdAYk7">https://blockly.webduino.io/#-K4pR8RaEF6IkiWdAYk7</a></p>
<h2>LED 的延伸教學：</h2>
<p><a href="https://blockly.webduino.io/?lang=zh-hant&page=tutorials/led-1#-Jvaz_tuEFYtNaVBi0i2">Webduino Blockly 課程 1-1：點亮 LED 燈</a><br><a href="https://blockly.webduino.io/?lang=zh-hant&page=tutorials/led-2#-Jvb-r0TiTHKsL-rMGw9">Webduino Blockly 課程 1-2：點選圖片控制 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://webduino.io/tutorials.html" data-name="noteLink">https://webduino.io/tutorials.html</a>
<br/> 2. Blockly 教學：<a href="https://goo.gl/Y8sRkl" data-name="noteLink">https://goo.gl/Y8sRkl</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" alt="">
<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="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 2017 | All Rights Reserved. Powered by Webduino</h4>
<h4>80661 高雄市前鎮區復興四路 12 號 2 樓之 6 / 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','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-62202920-1', 'auto');
ga('send', 'pageview');
</script>
<!-- Facebook Pixel Code -->
<script>
!function(f,b,e,v,n,t,s){if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};if(!f._fbq)f._fbq=n;
n.push=n;n.loaded=!0;n.version='2.0';n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];s.parentNode.insertBefore(t,s)}(window,
document,'script','https://connect.facebook.net/en_US/fbevents.js');
fbq('init', '463217813871245'); // Insert your pixel ID here.
fbq('init', '1817385685257238');
fbq('track', 'PageView');
</script>
</script>
<noscript><img height="1" width="1" style="display:none"
src="https://www.facebook.com/tr?id=1817385685257238&ev=PageView&noscript=1"
/></noscript>
<noscript><img height="1" width="1" style="display:none"
src="https://www.facebook.com/tr?id=463217813871245&ev=PageView&noscript=1"
/></noscript>
</body>
</html>