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
5 lines (5 loc) · 14.3 KB
/
Copy pathtutorial-33-clock.html
File metadata and controls
5 lines (5 loc) · 14.3 KB
1
2
3
4
5
<!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-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>教學範例 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"></p> <p>Fly 接線示意圖：</p> <p><img src="../img/tutorials/tutorial-33-02-fly.jpg"></p> <p>實際接線圖：</p> <p><img src="../img/tutorials/tutorial-33-03.jpg"></p> <p><img src="../img/tutorials/tutorial-33-04.jpg"></p> <p><img src="../img/tutorials/tutorial-33-05.jpg"></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"></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"></p> <p>來看一下 f 流程的內容，一開始我們先用三個變數 h、m 和 s 來裝載當前時間的時、分、秒，然後再透過字串組合成我們要比對的文字格式，然後將這串文字指定給另外一個變數 now，在下面的判斷式我們就會比對 now 和 clock 的內容是否相同，如果相同的話，就讓蜂鳴器播放超級瑪莉的音樂，同時也會把文字的顏色改成紅色。</p> <p>此外，我們利用「顯示」的積木，把當前的時間和鬧鐘時間秀在網頁互動區域裡頭 ( <code><br/></code>是換行的符號 )，然後再流程的最後使用了「等待」，就可以每隔一秒執行一次這段流程，就可以在網頁互動區裡看到時間一秒一秒的跳動了。</p> <p><img src="../img/tutorials/tutorial-33-08.jpg"></p> <p>接著我們在開發板的積木裡，放入按鈕開關的積木，這裏我們讓按鈕開關有兩種行為，「按下」的時候會把蜂鳴器停下來，並把文字顏色改成黑色，同時啟動「貪睡流程 alarm」，如果是「長按」，則把鬧鐘關閉。( 這裡 check 等於 1 就很重要了，<strong>因為 check 只有在鬧鐘啟動的時候才會等於 1</strong>，這也可以避免在鬧鐘還沒響的時候，按下按鈕開關會觸發貪睡的功能 )</p> <p><img src="../img/tutorials/tutorial-33-09.jpg"></p> <p>來看到貪睡的流程，這裏我們先用 h1、m1 和 s1 三個變數來紀錄按下按鈕開關的時、分、秒，然後我們就使用「語音朗讀」來唸出當前的時間，接著觸發一個新的鬧鐘 ( 這樣才是「貪睡」，也就是說按下按鈕開關的同時，產生一個新的鬧鐘時間，時間到就會叫 )</p> <p><img src="../img/tutorials/tutorial-33-10.jpg"></p> <p>新的鬧鐘流程裡頭放入三個判斷式，因為我們對時間加總的時候，不論是小時、分鐘或是秒，都會有「進位」的可能，所以要連續做三個判斷，又因為秒的進位會影響到分鐘的進位，分鐘的進位又會影響到小時的進位，所以順序必須是秒、分鐘、小時，最後就把新的時間指定給 clock 這個變數。</p> <p><img src="../img/tutorials/tutorial-33-11.jpg"></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://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>