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-26-google-sheet.html
More file actions
27 lines (25 loc) · 14 KB
/
Copy pathtutorial-26-google-sheet.html
File metadata and controls
27 lines (25 loc) · 14 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
<!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>教學範例 26：使用 Google 試算表控制 LED :::: Webduino = Web × Arduino</title> <meta name="description" content="Google 試算表 ( Google Spreadsheet ) 是目前最方便的線上試算表，除了試算表功能一應俱全，更可以和 Google 表單搭配，變成一個簡單的問卷統計資料庫，在這個範例中，我們會填寫 Google 問卷，接著把問卷的統計數字平均並四捨五入成整數，再讓平均的分數透過 LED 的數量顯示出來。"> <meta itemprop="description" content="Google 試算表 ( Google Spreadsheet ) 是目前最方便的線上試算表，除了試算表功能一應俱全，更可以和 Google 表單搭配，變成一個簡單的問卷統計資料庫，在這個範例中，我們會填寫 Google 問卷，接著把問卷的統計數字平均並四捨五入成整數，再讓平均的分數透過 LED 的數量顯示出來。"> <meta property="og:description" content="Google 試算表 ( Google Spreadsheet ) 是目前最方便的線上試算表，除了試算表功能一應俱全，更可以和 Google 表單搭配，變成一個簡單的問卷統計資料庫，在這個範例中，我們會填寫 Google 問卷，接著把問卷的統計數字平均並四捨五入成整數，再讓平均的分數透過 LED 的數量顯示出來。"> <link rel="canonical" href="https://tutorials.webduino.io/zh-tw/docs/useful/component/led-google-form.html"> <meta property="og:title" content="教學範例 26：使用 Google 試算表控制 LED"> <meta property="og:url" content="https://webduino.io/tutorials/tutorial-26-google-sheet.html"> <meta property="og:image" content="https://webduino.io/img/tutorials/tutorial-26-01s.jpg"> <meta itemprop="image" content="https://webduino.io/img/tutorials/tutorial-26-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>教學範例 26：使用 Google 試算表控制 LED</h1> <p>Google 試算表 ( Google Spreadsheet ) 是目前最方便的線上試算表，除了試算表功能一應俱全，更可以和 Google 表單搭配，變成一個簡單的問卷統計資料庫，在這個範例中，我們會填寫 Google 問卷，接著把問卷的統計數字平均並四捨五入成整數，再讓平均的分數透過 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-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/mpwSAFwlL_0" frameborder="0" allowfullscreen=""></iframe></p> <h2>接線與實作</h2> <p>這個範例只會用到 LED 燈，但因為評比分數有七分，所以會接到 7 顆 LED 燈，將 LED 燈利用麵包板與單心線，長腳分別接到 7、8、9、10、11、12、13，然後短腳和 GND 連接。</p> <p>接線示意圖：</p> <p><img src="../img/tutorials/tutorial-26-02.jpg"></p> <p>實際接線照片：</p> <p><img src="../img/tutorials/tutorial-26-03.jpg"></p> <p><img src="../img/tutorials/tutorial-26-04.jpg"></p> <p><img src="../img/tutorials/tutorial-26-05.jpg"></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-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>因為要使用 Google 表單，所以要先註冊 Google 的帳號，開啟雲端硬碟的功能，在裡面就可以開啟新資料夾，或者直接在根目錄新增「Google 表單」。( 範例中建立了一個名為 test 的資料夾 )</p> <p><img src="../img/tutorials/tutorial-26-06.jpg"></p> <p>打開表單，輸入表單名稱，這個名稱將會對應到同樣名稱的試算表，完成後選擇「回覆」標籤，點選「在 Google 試算表中查看回應」，就會自動幫我們建立一份對應的 Google 試算表。</p> <p><img src="../img/tutorials/tutorial-26-07.jpg"></p> <p>完成後切回「問題」標籤，在這邊可以新增一些問卷的問題，我們新增一個「線性刻度」的單選題，設定 1 到 7 分，在使用者填妥送出後，Google 試算表內就會記錄該使用者對應的分數。</p> <p><img src="../img/tutorials/tutorial-26-08.jpg"></p> <p>點選右上角眼睛形狀的圖示「預覽」，就可以打開這份表單，我們可以先嘗試填寫，先選擇七分，然後按下「提交」送出。</p> <p><img src="../img/tutorials/tutorial-26-09.jpg"></p> <p>送出之後，回到 Google 雲端硬碟，也就是剛剛建立表單的資料夾，把對應的 Google 試算表打開。</p> <p><img src="../img/tutorials/tutorial-26-10.jpg"></p> <p>打開後會看到第一列是「時間戳記」，表示使用者填寫表單的時間，第二列是分數。</p> <p><img src="../img/tutorials/tutorial-26-11.jpg"></p> <p>為了要計算平均，我們在第三列的第一欄 ( C1 ) 寫上「平均」，將平均數計算在第四列第一欄 ( D1 )。</p> <p><img src="../img/tutorials/tutorial-26-12.jpg"></p> <p>計算的公式如下：</p> <pre><code>=IF(TYPE(ROUND(AVERAGE(B:B)))=16,0,ROUND(AVERAGE(B:B)))
</code></pre><p>接著我們會把開發板對應的 Device 填寫在第五列第一欄 ( E1 ) 的地方，這樣就可以讓對應的開發板進行燈號顯示。</p> <p><img src="../img/tutorials/tutorial-26-13.jpg"></p> <p>前面這些步驟完成後，再來就是<strong>最重要</strong>的部分，選擇「工具」，選擇「指令碼編輯器」，就會打開一份屬於這個試算表的指令碼工具，我們在中間編輯區域，輸入以下這段程式碼，這段程式碼表示開發板會依據平均值數字，讓對應數量的 LED 燈亮起來。</p> <p><img src="../img/tutorials/tutorial-26-14.jpg"></p> <pre><code>function myFunction() {
var sheet = SpreadsheetApp.getActiveSheet();
var device = sheet.getRange('E1').getValue();
var a = sheet.getRange('D1').getValue();
led(device,a);
}
function led(d,r){
for(var i=7; i<=13; i++){
setPin(d,i,0);
if(i==13){
for(var j=0; j<r; j++){
setPin(d,13-j,1);
}
}
}
}
function setPin(id,pin,state){
var response = UrlFetchApp.fetch("http://webduino.tw/iot/"+id+"/set/"+pin+"/"+state);
}
</code></pre><p>輸入完成後，點選「資源」，選擇「您所有的觸發程序」，這邊會要求要先輸入新的專案名稱，就輸入並按下確定。(過程中如果遇到需要「授權」，按下確定授權就可以 ) 接著點選「尚未建立觸發程序，按一下這裡來新增觸發程序」。</p> <p><img src="../img/tutorials/tutorial-26-15.jpg"></p> <p>這邊可以選擇讓我們的程式，在試算表在「變更時」觸發，以及在「提交表單時」觸發，如此一來，當使用者填寫完表單送出後，就會觸發程式。</p> <p><img src="../img/tutorials/tutorial-26-16.jpg"></p> <p>進行到這一步，在第五列第一欄 ( E1 ) 的地方填入開發板的 device 名稱，確認開發板上線之後 ( 可透過 <a href="https://webduino.io/device.html">https://webduino.io/device.html</a> )，填寫表單並送出，就會看到對應數量的 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-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>