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-33-clock.html
More file actions
208 lines (169 loc) · 13.8 KB
/
Copy pathtutorial-33-clock.html
File metadata and controls
208 lines (169 loc) · 13.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
<!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>教學範例 33：會說話的鬧鐘 ( 貪睡、蜂鳴器 ) :::: Webduino = Web × Arduino</title>
<meta name="description" content="過去的範例分別有介紹過按鈕開關和蜂鳴器的用法，在這個範例裡面，我們會把按鈕開關和蜂鳴器結合，實際做出一個具備貪睡功能的鬧鐘，也就是按下按鈕開關之後，會過個幾分鐘再叫，同時，按下開關的時候電腦還會發音報時喔！">
<meta itemprop="description" content="過去的範例分別有介紹過按鈕開關和蜂鳴器的用法，在這個範例裡面，我們會把按鈕開關和蜂鳴器結合，實際做出一個具備貪睡功能的鬧鐘，也就是按下按鈕開關之後，會過個幾分鐘再叫，同時，按下開關的時候電腦還會發音報時喔！">
<meta property="og:description" content="過去的範例分別有介紹過按鈕開關和蜂鳴器的用法，在這個範例裡面，我們會把按鈕開關和蜂鳴器結合，實際做出一個具備貪睡功能的鬧鐘，也就是按下按鈕開關之後，會過個幾分鐘再叫，同時，按下開關的時候電腦還會發音報時喔！">
<link rel="canonical" href="https://tutorials.webduino.io/zh-tw/docs/useful/component/buzzer-clock.html">
<meta property="og:title" content="教學範例 33：會說話的鬧鐘 ( 貪睡、蜂鳴器 )" >
<meta property="og:url" content="https://webduino.io/tutorials/tutorial-33-clock.html">
<meta property="og:image" content="https://webduino.io/img/tutorials/tutorial-33-01s.jpg">
<meta itemprop="image" content="https://webduino.io/img/tutorials/tutorial-33-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>教學範例 33：會說話的鬧鐘 ( 貪睡、蜂鳴器 )</h1>
<p>過去的範例「<a href="https://webduino.io/tutorials/tutorial-09-button-led.html">教學範例 9：按鈕開關</a>」和「<a href="https://webduino.io/tutorials/tutorial-13-buzzer.html">教學範例 13：蜂鳴器播放自製音樂</a>」分別有介紹過按鈕開關和蜂鳴器的用法，在這個範例裡面，我們會把按鈕開關和蜂鳴器結合，實際做出一個具備貪睡功能的鬧鐘 也就是按下按鈕開關之後，會過個幾分鐘再叫，同時，按下開關的時候電腦還會發音報時喔！ </p>
<div class="buy-this">
<span>蜂鳴器、按鈕：<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><iframe class="youtube" src="https://www.youtube.com/embed/BEDgC5iAnCo" frameborder="0" allowfullscreen></iframe></p>
<h2>接線與實作</h2>
<p>如果使用馬克一號，因為只有一個 GND，所以我們用麵包板共地，如果是用 Fly 就可以接不同的 GND 即可，這裏按鈕開關的訊號腳接 10，蜂鳴器則是接 11。</p>
<p>馬克一號接線示意圖：</p>
<p><img src="../img/tutorials/tutorial-33-02.jpg" alt=""></p>
<p>Fly 接線示意圖：</p>
<p><img src="../img/tutorials/tutorial-33-02-fly.jpg" alt=""></p>
<p>實際接線圖：</p>
<p><img src="../img/tutorials/tutorial-33-03.jpg" alt=""></p>
<p><img src="../img/tutorials/tutorial-33-04.jpg" alt=""></p>
<p><img src="../img/tutorials/tutorial-33-05.jpg" alt=""></p>
<div class="buy-this">
<span>蜂鳴器、按鈕：<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> )，把開發板放到編輯畫面裡，填入對應的 Webduino 開發板名稱，然後放入按鈕開關和蜂鳴器的積木，按鈕開關設定 10 號腳，蜂鳴器為 11 號腳。</p>
<p><img src="../img/tutorials/tutorial-33-06.jpg" alt=""></p>
<p>設定四個變數，<strong>clock 表示鬧鐘的時間，check 用來判斷按鈕開關是否壓下，type 如果設定為 m，延遲的就是分鐘，如果是 s 就是秒，sleep 則是要延遲多久</strong>，然後我們要讓時間顯示在網頁裡，因為字體比較大，所以我們透過設定字體大小和行高的積木來進行設定，完成後就執行鬧鐘的流程，這裏流程名稱設定為 f。( 注意，如果是時間個位數，前面不要補 0，例如 01 就寫 1，00 就寫 0 )</p>
<p><img src="../img/tutorials/tutorial-33-07.jpg" alt=""></p>
<p>來看一下 f 流程的內容，一開始我們先用三個變數 h、m 和 s 來裝載當前時間的時、分、秒，然後再透過字串組合成我們要比對的文字格式，然後將這串文字指定給另外一個變數 now，在下面的判斷式我們就會比對 now 和 clock 的內容是否相同，如果相同的話，就讓蜂鳴器播放超級瑪莉的音樂，同時也會把文字的顏色改成紅色。</p>
<p>此外，我們利用「顯示」的積木，把當前的時間和鬧鐘時間秀在網頁互動區域裡頭 ( <code><br/></code>是換行的符號 )，然後再流程的最後使用了「等待」，就可以每隔一秒執行一次這段流程，就可以在網頁互動區裡看到時間一秒一秒的跳動了。</p>
<p><img src="../img/tutorials/tutorial-33-08.jpg" alt=""></p>
<p>接著我們在開發板的積木裡，放入按鈕開關的積木，這裏我們讓按鈕開關有兩種行為，「按下」的時候會把蜂鳴器停下來，並把文字顏色改成黑色，同時啟動「貪睡流程 alarm」，如果是「長按」，則把鬧鐘關閉。( 這裡 check 等於 1 就很重要了，<strong>因為 check 只有在鬧鐘啟動的時候才會等於 1</strong>，這也可以避免在鬧鐘還沒響的時候，按下按鈕開關會觸發貪睡的功能 )</p>
<p><img src="../img/tutorials/tutorial-33-09.jpg" alt=""></p>
<p>來看到貪睡的流程，這裏我們先用 h1、m1 和 s1 三個變數來紀錄按下按鈕開關的時、分、秒，然後我們就使用「語音朗讀」來唸出當前的時間，接著觸發一個新的鬧鐘 ( 這樣才是「貪睡」，也就是說按下按鈕開關的同時，產生一個新的鬧鐘時間，時間到就會叫 )</p>
<p><img src="../img/tutorials/tutorial-33-10.jpg" alt=""></p>
<p>新的鬧鐘流程裡頭放入三個判斷式，因為我們對時間加總的時候，不論是小時、分鐘或是秒，都會有「進位」的可能，所以要連續做三個判斷，又因為秒的進位會影響到分鐘的進位，分鐘的進位又會影響到小時的進位，所以順序必須是秒、分鐘、小時，最後就把新的時間指定給 clock 這個變數。</p>
<p><img src="../img/tutorials/tutorial-33-11.jpg" alt=""></p>
<p>確認開發板上線 ( 點選「<a href="https://webduino.io/device.html">檢查連線狀態</a>」查詢 )，點選右上方紅色按鈕執行，時間到了的時候蜂鳴器就會播放超級瑪莉的音樂，同時喇叭也會有人聲報時，文字也會變成紅色，這時候按下按鈕開關，就會產生一個新的鬧鐘時間，如果長按按鈕開關，就會把鬧鐘關起來。</p>
<p>( 解答：<a href="https://blockly.webduino.io/#-KLMkPWH4stuxpbr7sEs">https://blockly.webduino.io/#-KLMkPWH4stuxpbr7sEs</a> )</p>
<div class="buy-this">
<span>蜂鳴器、按鈕：<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>