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-19-rfid.html
More file actions
26 lines (25 loc) · 16.5 KB
/
Copy pathtutorial-19-rfid.html
File metadata and controls
26 lines (25 loc) · 16.5 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
<!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>教學範例 19：RFID :::: Webduino = Web × Arduino</title> <meta name="description" content="RFID 是 Radio Frequency IDentification 的縮寫，中文翻譯為「無線射頻辨識」，是一種常見的無線通訊技術，透過 RFID 識別裝置 ( 讀卡器 ) 所產生的「電磁場」，能讓附著在物品上的「電子標籤」獲得能量進而發送無線電頻率的訊號，RFID 在今日相當的普及，常見於庫存、資產、人員等的追蹤與管理，甚至許多的防偽、畜產管理也都有 RFID 的身影存在。"> <meta itemprop="description" content="RFID 是 Radio Frequency IDentification 的縮寫，中文翻譯為「無線射頻辨識」，是一種常見的無線通訊技術，透過 RFID 識別裝置 ( 讀卡器 ) 所產生的「電磁場」，能讓附著在物品上的「電子標籤」獲得能量進而發送無線電頻率的訊號，RFID 在今日相當的普及，常見於庫存、資產、人員等的追蹤與管理，甚至許多的防偽、畜產管理也都有 RFID 的身影存在。"> <meta property="og:description" content="RFID 是 Radio Frequency IDentification 的縮寫，中文翻譯為「無線射頻辨識」，是一種常見的無線通訊技術，透過 RFID 識別裝置 ( 讀卡器 ) 所產生的「電磁場」，能讓附著在物品上的「電子標籤」獲得能量進而發送無線電頻率的訊號，RFID 在今日相當的普及，常見於庫存、資產、人員等的追蹤與管理，甚至許多的防偽、畜產管理也都有 RFID 的身影存在。"> <link rel="canonical" href="https://tutorials.webduino.io/zh-tw/docs/basic/sensor/rfid.html"> <meta property="og:title" content="教學範例 19：RFID"> <meta property="og:url" content="https://webduino.io/tutorials/tutorial-19-rfid.html"> <meta property="og:image" content="https://webduino.io/img/tutorials/tutorial-19-01s.jpg"> <meta itemprop="image" content="https://webduino.io/img/tutorials/tutorial-19-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>教學範例 19：RFID</h1> <p>RFID 是 Radio Frequency IDentification 的縮寫，中文翻譯為「無線射頻辨識」，是一種常見的無線通訊技術，透過 RFID 識別裝置 ( 讀卡器 ) 所產生的「電磁場」，能讓附著在物品上的「電子標籤」獲得能量進而發送無線電頻率的訊號，RFID 在今日相當的普及，常見於庫存、資產、人員等的追蹤與管理，甚至許多的防偽、畜產管理也都有 RFID 的身影存在。</p> <div class="buy-this"> <span>RFID 相關套件：<a href="https://webduino.io/buy/webduino-expansion-p.html" target="_blank">Webduino 擴充套件 P ( 支援 Fly )</a></span> <span>Webduino 開發板：<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/RrCAOgtPHdo" frameborder="0" allowfullscreen=""></iframe></p> <h2>接線與實作</h2> <p>這裏我們使用的 RFID 識別裝置的型號為 RC522，RC522 主要針對 13.56MHZ 的無線電頻率識別，工作電壓為 3.3V ，上頭共有八支接腳，分別是 SDA、SCK、MOSI、MISO、IRQ、GND、RST、VCC，其中 SDA、SCK、MOSI、MISO 負責訊號的輸入和輸出。</p> <p><img src="../img/tutorials/tutorial-19-02.jpg"></p> <p>由於 Arduino UNO 本身的數位腳各自有各自的功能，13 對應 Serial Clock ( SCK )，12 對應 Master-in slave-out ( MISO )，11 是 Master-out slave-in ( MOSI )，10 是 Slave select ( SS )，因此我們將 SDA 接 10，SCK 接 13，MOSI 接 11，MISO 接 12。</p> <p>IRQ 是中斷的腳位，RST 是重置的腳位，因為在本範例中不會用到，所以這裡就不需要接這兩個接腳，GND 接在 GND，VCC 接在 3.3V 的位置，此外因為腳位限制，所以在這個範例<strong>必須使用 Arudino UNO 和 Webduino UNO 雲端擴充板搭配進行</strong>。</p> <p><img src="../img/tutorials/tutorial-19-03.jpg"></p> <p>實際接線照片：</p> <p><img src="../img/tutorials/tutorial-19-04.jpg"></p> <p><img src="../img/tutorials/tutorial-19-05.jpg"></p> <p><img src="../img/tutorials/tutorial-19-06.jpg"></p> <div class="buy-this"> <span>RFID 相關套件：<a href="https://webduino.io/buy/webduino-expansion-p.html" target="_blank">Webduino 擴充套件 P ( 支援 Fly )</a></span> <span>Webduino 開發板：<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> )，因為這個範例會用網頁「顯示文字」來顯示 RFID 磁卡或磁扣的識別碼，所以要先點選右上方「網頁互動測試」的按鈕，打開內嵌測試的網頁，用下拉選單選擇「顯示文字」，此外，記得要先燒錄 RFID 的韌體檔喔！ ( 請參考：<a href="https://webduino.io/tutorials/info-07-arduino-ino.html">韌體檔案燒錄教學</a>，選擇有 MFRC522 檔名的韌體 )</p> <p><img src="../img/tutorials/tutorial-19-07.jpg"></p> <p>把開發板放到編輯畫面裡，填入對應的 Webduino 開發板名稱，開發板內放入 RFID 的積木，名稱設定為 rfid，腳位設定為 10、13、11、12，因為腳位限定，所以下拉選單也無法改變腳位。</p> <p><img src="../img/tutorials/tutorial-19-08.jpg"></p> <p>放入「偵測訊號」的積木，在我們拿 RFID 磁卡或磁扣去感應讀卡器的時候，右邊的網頁就會顯示對應的識別碼。</p> <p><img src="../img/tutorials/tutorial-19-09.jpg"></p> <p>完成後，確認開發板上線 ( 點選「<a href="https://webduino.io/device.html">檢查連線狀態</a>」查詢 )，點選紅色的執行按鈕，用不同的磁卡或磁扣去感應讀卡器，就會出現識別碼，如果你發現某些磁卡或磁扣無法出現識別碼，最大的可能性是頻率和 RFID-RC522 讀卡器不同所導致的。( 解答：<a href="https://blockly.webduino.io/#-K7zNrV4FojmGdLfbhmM">https://blockly.webduino.io/#-K7zNrV4FojmGdLfbhmM</a></p> <p><img src="../img/tutorials/tutorial-19-10.jpg"></p> <p>不過只有這樣有點太乏味，我們可以加入一些識別，再來我們會用不同的磁卡，讓文字的顏色變色，我們先加入「文字顏色」的積木，在感應的當下把文字變成黑色 ( 這樣其他卡片感應時才會呈現黑色 )，然後加入「判斷」的積木，當出現對應的識別碼，就把文字變成紅色。</p> <p><img src="../img/tutorials/tutorial-19-11.jpg"></p> <p>同樣的方式，我們可以偵測第二張磁卡或磁扣，感應到之後把文字變成藍色。</p> <p><img src="../img/tutorials/tutorial-19-12.jpg"></p> <p>完成後，確認開發板上線 ( 點選「<a href="https://webduino.io/device.html">檢查連線狀態</a>」查詢 )，點選紅色的執行按鈕，用不同的磁卡或磁扣去感應讀卡器，就會看到文字呈現對應的顏色了。( 解答：<a href="https://blockly.webduino.io/#-K7zPzNNag4ggJ_7qp96">https://blockly.webduino.io/#-K7zPzNNag4ggJ_7qp96</a></p> <p><img src="../img/tutorials/tutorial-19-13.jpg"></p> <h2>範例解析 ( <a href="https://bin.webduino.io/yevog/1/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 裏頭只有一個 span，用來顯示 RFID 磁卡或磁扣的識別碼。</p> <pre><code><span id="demo-area-01-show">123</span>
</code></pre><p>JavaScript 使用<code>on</code>的方法，回呼函式裡面會有一個變數，回傳值就是 RFID 的識別碼，在裡面可以寫上判斷式，判斷對應的字串就執行對應的動作，這裏的動作除了用<code>innerHTML</code>顯示識別碼之外，也用<code>style</code>來改變顏色。</p> <pre><code>var rfid;
boardReady('', function (board) {
board.samplingInterval = 500;
rfid = getRFID(board);
rfid.read();
rfid.on("enter",function(_uid){
rfid._uid = _uid;
document.getElementById("demo-area-01-show").style.color = '#000000';
document.getElementById("demo-area-01-show").innerHTML = rfid._uid;
if(rfid._uid == '679D4F55'){
document.getElementById("demo-area-01-show").style.color = '#ff0000';
}
if(rfid._uid == 'B4AE2E00'){
document.getElementById("demo-area-01-show").style.color = '#3333ff';
}
});
});
</code></pre><p>以上就是利用 RFID-RC522 來讀取 RFID 磁卡或磁扣，並將識別碼顯示在網頁裡，而且還會根據不同的磁卡或磁扣變色。<br>完整程式碼：<a href="https://bin.webduino.io/yevog/1/edit?html,css,js,output">https://bin.webduino.io/yevog/1/edit?html,css,js,output</a><br>解答：<a href="https://blockly.webduino.io/#-K7zPzNNag4ggJ_7qp96">https://blockly.webduino.io/#-K7zPzNNag4ggJ_7qp96</a></p> <h2>RFID 的延伸教學：</h2> <p><a href="https://blockly.webduino.io/?lang=zh-hant&page=tutorials/rfid-1#-K45oDB4TmzOFSNMPGGG">Webduino Blockly 課程 16-1：偵測 RFID</a><br><a href="https://blockly.webduino.io/?lang=zh-hant&page=tutorials/rfid-2#-K45qdjcmCYGz9YaNcUp">Webduino Blockly 課程 16-2：RFID 紅綠燈</a><br><a href="https://blockly.webduino.io/?lang=zh-hant&page=tutorials/rfid-3#-K462IpY3cfK91yLDK3M">Webduino Blockly 課程 16-3：RFID 控制 Youtube</a> </p> <div class="buy-this"> <span>RFID 相關套件：<a href="https://webduino.io/buy/webduino-expansion-p.html" target="_blank">Webduino 擴充套件 P ( 支援 Fly )</a></span> <span>Webduino 開發板：<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>