智慧杯墊

現在，連簡單的杯墊都可以連上雲端了！為了健康著想，人一天需要補充兩千至三千c.c.的水分，但怎麼知道自己喝的夠不夠多？或是擔心家人和小孩水分補充的狀況？如今一個杯墊能連上網路，透過雲端運算出喝了多少水且顯示在手機App中，如果您是一位家長，不論是在辦公室、室外，都能了解小朋友水分的攝取量，不只如此，利用物聯網的技術，還可以用App遠端操作杯墊的設備，例如讓裝有蜂鳴器的杯墊播放音樂，以提醒小朋友該喝水囉！

智慧杯墊的功能為計算每一次喝水時所補充的水量，只要在喝完水後，將水杯放回智慧杯墊上，雲教授便會自動顯示此次的攝取量，同時記錄後上傳至雲端，若一段時間偵測到使用者沒有喝水，杯墊會播出依使用者喜好設定的音樂，提醒使用者該補充水分了。智慧杯墊的設計是把壓力感測器夾入杯墊之中，以測量出水杯的重力，並計算每次放上水杯時重力的差距，讓程式判斷出重力確實有減少，再顯示於雲教授APP中。非常簡單的邏輯，賦予了杯墊一個生命，接下來就讓我們實現他吧！

創作動機

在生活中，偶爾會產生今日喝了多少水的疑問，而經常以瓶數來計算，亦或者只是粗略估算，但重要的是，完成確實的水分攝取量才能達成每日的健康標準，於是欲了解自身是否達標，希望運用雲教授應用之作品，解決這項疑問，便開始研發智慧杯墊。

單純的測量水量是無法成為智慧化的，就如體重計一般，一個口令一個動作。希望杯墊不但有基本功能，也可以進行服務，隨時提醒我攝取的調節，這可以透過雲端物聯網技術，顯示在手機App中，完成智慧化。

設備需求

設備名稱 - 數量

宏碁雲教授 - 1個

Arduino 開發板 - 1個

Grove 擴充板 - 1個

Grove 壓力感測器 - 1個

Grove 蜂鳴器 - 1個

Grove LED - 1個

杯墊 - 2個

泡棉膠 - 2片

運作原理

放上水杯後，透過壓力感測器持續地檢測水杯重力，同時每五秒就暫存於變數中，當偵測到壓力值於0時，代表水杯被拿起，當水杯再次放回杯墊時，壓力值會大於0，此時判斷現在的壓力值若小於五秒前暫存的壓力值，代表水杯內的水被喝過，因此計算出之間的差距，得到已補充的水量。

透過時間的計算，每當壓力值等於0時，紀錄拿起水杯的時間，直到大於0後，不再紀錄(放回杯墊)，並開始計算距離上次水杯拿起的時間，如時間到達了預設的一小時後，蜂鳴器便開始播放音樂，完成提醒的效用。

流程圖：

雲端架構圖：

實作步驟

STEP 1

連接雲教授，開啟CPF Arduino，進入Lesson 8 插槽模式。

STEP2

先將雲教授與相對應感應器連接至Grove擴充板，壓力感應器連接上A2插槽，蜂鳴器接至D5插槽，LED指示燈接至D2插槽，如圖：

STEP3

點擊執行按鈕，可對目前感應器進行各別操作與顯示，插槽A2顯示壓力感測器的值，D2欄位可以開關LED燈，D5為蜂鳴器的欄位，開啟即可播放預設的音樂。

STEP4

現在，要開始撰寫智慧杯墊的程式碼，點擊修改按鈕進入程式碼編輯介面，將預設的程式碼全部刪除，並加入以下程式碼。

var a2;

a2 = cpf.get("socket a2");

程式解析：

宣告a2變數。
利用a2接收A2插槽的壓力值。

STEP5

現在可以接收到壓力值了，接下來要開始寫如何測量自己喝的水量，首先，判斷水杯是否有被拿起，若沒有被拿起，每過1秒自動暫存目前的壓力。

var a2;

var time = new Date();

time = time.getSeconds();

var temp = temp || 0;

a2 = cpf.get("socket a2");

if(a2 < 100 || a2 == 0) {

  //喝水中

}else {

  //沒喝水時

   if(time % 1 = 0 || time == 0) {

     temp = a2;

程式解析：

宣告time為時間變數。
將time變數設定為儲存現在的秒數。
宣告temp，如temp有存在則等於temp，不存在則等於0。
if判斷若a2小於100或等於0，表示正在喝水。
else表示沒喝水的時候，執行以下的程式。
else中，if判斷現在的秒數除以1的餘數是否為0，表示時間是否過了一秒。
在每一秒中，利用temp暫存一次a2壓力值。

STEP6

若a2=0或小於杯子重量，表示有被拿起，我們先撰寫喝水時必要進行的前置動作，以便之後作判斷與計算使用。

...

var temp = temp || 0;

var drinktime;

var newtemp;

a2 = cpf.get("socket a2");

if(a2 < 100 || a2 == 0) {

  //喝水中

   drinktime = Date.now();

   newtemp = temp;

}else {

...

程式解析：

宣告drinktime變數，用來儲存喝水時的時間。
宣告newtemp變數，用來儲存喝水前最新暫存的值。
在喝水時，讓drinktime儲存現在的時間，Date.now()的意思表示現在時間的毫秒數值。
在喝水時，用newtemp儲存拿起水杯前，最後一次暫存到的值(temp)，之後我們就方便計算出喝完水後與喝水前(newtemp)的差距。

STEP7

接下來要判斷當水杯再次放回杯墊時，重量是否比拿起前的還輕，如果比較輕代表有喝過水，計算完成後，儲存要顯示出來的資訊和時間，最後顯示在content區塊中。

...

var newtemp;

var result = result || 0;

var msg;

var date = new Date();

程式解析：

宣告result變數，儲存計算後的結果。
宣告msg當字串使用，儲存要顯示在App上的訊息。
宣告date時間，顯示出現在的時間。

水量計算方法：

裝滿水杯的重量減掉沒裝水的水杯重量，得到水杯容量(範例為400)，將喝水前的重量減掉喝水後的重量，得到已補充的重量，接下來把已補充的重量除以水杯容量後，在乘上100，答案就會是你喝掉了你的水杯中多少百分比的量，最後利用Math.round方法四捨五入，得出結果。

...

newtemp = temp;

}else {

  //沒喝水時

   if(newtemp - a2 > 20) {

     result = Math.round(  (  (newtemp - a2) / 400 ) * 100);

     msg = "You have already drank " + result + "% of the cup\n" + date;

     ui.set("content", msg);

...

程式解析：

if判斷newtemp減現在的a2大於20，表示喝過水，可以計算喝的水量，大於20目的為減少衡量的偏差。
result儲存計算喝的水量占了水杯多少百分比。
利用msg儲存要顯示的訊息。
之後執行ui.set()，在content區塊中顯示出結果。

STEP8

接著為了讓計算出來的結果更為精準，我們限制喝完水放下杯子後，必須讓壓力感測器讀取10秒穩定下來，再進行判斷與計算。

...

//沒喝水時

  if(Date.now() - drinktime > 10000) {

     if(newtemp - a2 > 20) {

       result = Math.round(  (  (newtemp - a2) / 400 ) * 100);

       msg = "You have already drank " + result + "% of the cup\n" + date;

       ui.set("content", msg);

     newtemp = a2;

程式解析：

if判斷若目前時間的毫秒數值減掉上次喝水的時間過了10秒，變執行STEP7的程式碼。
1000毫秒等於1秒，所以10000表示1000*10等於一分鐘。
結果顯示完後，將newtemp變數重置為現在的壓力。

STEP9

到這邊，已經完成了智慧杯墊的基本功能設置，接下來要使用到物聯網的技術，將顯示出來的結果上傳至雲端，才能在任何時段以及地點觀看小朋友喝水的狀況，新增至 ui.set("content", msg); 下方。

...

       ui.set("content", msg);

       index += 1;

       var json = {"result": result, "date": date};

       var str = JSON.stringify(json);

       var storeId = "store" + index;

       aop.setStore("storeId", str);

     newtemp = a2;

程式解析：

執行index+1，為新增雲端上船的目錄。
編寫json格式的文字，並利用json變數儲存。
建構為json格式，並宣告str變數儲存。
宣告storeId，儲存雲端上傳的目錄。
最後執行aop.setStore，將目錄與內容上傳至雲端。

STEP10

我們要繼續增加額外的功能，當杯墊沒有放置任何東西時，要開啟LED燈指示杯墊目前沒有放上水杯，若已放上水杯，則關閉LED燈。

if(a2 < 100 || a2 == 0) {

  //喝水中

   drinktime = Date.now();

   newtemp = temp;

   cpf.set("socket d2", 1);

}else {

  //沒喝水時

   cpf.set("socket d2", 0);

   if(Date.now() - drinktime > 10000) {

...

另外，若過一段時間沒有喝水，蜂鳴器就會開始播放音樂告知使用者，我們利用現在的時間減掉drinktime喝水的時間，當距離上次喝水超過一個小時(3600000毫秒)的話，執行程式碼。將下列程式碼寫在最後一行，範例程式為小星星的歌曲。

if(Date.now() - drinktime > 3600000) {

  cpf.set("socket d5", 261, 500);

  cpf.set("socket d5", 261, 500);

  cpf.set("socket d5", 392, 500);

  cpf.set("socket d5", 392, 500);

  cpf.set("socket d5", 440, 500);

  cpf.set("socket d5", 440, 500);

  cpf.set("socket d5", 392, 500);

  cpf.set("socket d5", 349, 500);

  cpf.set("socket d5", 349, 500);

  cpf.set("socket d5", 329, 500);

  cpf.set("socket d5", 329, 500);

  cpf.set("socket d5", 293, 500);

  cpf.set("socket d5", 293, 500);

  cpf.set("socket d5", 261, 500);

  drinktime = Date.now();

程式解析：

if判斷若現在時間距離上次喝水時間大於三百六十萬毫秒(一個小時)，執行接下來蜂鳴器設定的音樂。
設置蜂鳴器要播放的音樂，括號內的參數左到右依序為插槽、音頻、持續時間。
音頻與音階對照：
261 - Do
293 - Re
329 - Me
349 - Fa
392 - Sol
440 - La
493 - Si
523 - Do
最後在播放一次結束後將時間重置。

STEP11

以上已完成了程式碼的撰寫，最後在最後一行加上 cpf.repeat(); 開啟迴圈進行重複執行的動作。

杯墊製作步驟

1. 準備好兩個杯墊，會呈現出一個正面（凹面）一個背面（平面），分別朝上擺放。

2. 於壓力感測器背面的膜撕開，撕開後背面可黏貼。

3. 拿起背面（平面）朝上的杯墊，將撕掉後的感測器背面黏貼於杯墊平面處的正中央。

4. 剪下透明膠帶黏貼且覆蓋於壓力感測器上，接著將兩層的泡棉膠黏貼在感測器上方，注意範圍以不覆蓋黑色邊框為基準，如圖所示。

5. 接下來撕開最上層的泡棉膠，將另外一個杯墊的正面（凹面）朝上蓋下去。

智慧杯墊，完成！

實作效果

實驗開始前先將杯子放上杯墊。接下來啟動程式，content區塊暫無訊息，是正常的表現，當我拿起水杯時，壓力值處於0的狀態，此時喝了一口水並放回至杯墊，content區塊成功顯示了msg的資訊，且數值為百分比。

把現在的時間與drinktime時間距離縮短為60000毫秒，表示一分鐘，為方便進行測試，將水杯拿起之後放回杯墊不再拿起，實測一分鐘後蜂鳴器開始播放小星星的音樂，實測成功。

把水杯拿起後，LED顯示亮燈，另外放回杯墊上時，LED顯示關燈，實測成功。

完整程式碼

var a2;

var temp = temp || 0;

var newtemp;

var time = new Date();

time = time.getSeconds();

var result = result || 0;

var msg;

var date = new Date();

var index = index || 0;

var drinktime;

a2 = cpf.get("socket a2");

if(a2 < 100 || a2 == 0)  {

  //喝水中

  drinktime = Date.now();

  newtemp = temp;

  cpf.set("socket d2", 1);

}else  {

  //沒喝水時

  cpf.set("socket d2", 0);

  if(Date.now() - drinktime > 10000) {

    if(newtemp - a2 > 20) {

      result = Math.round(  (  (newtemp - a2) / 400 ) * 100);

      msg = "You have already drank " + result + "% of the cup\n" + date;

      ui.set("content", msg);

      //雲端上傳

      index += 1;

      var json = {"result": result,  "date": date};

      var str = JSON.stringify(json);

      var storeId = "store" + index;

      aop.setStore("storeId", str);

     newtemp = a2;

    if(time % 1 == 0 || time == 0) {

       temp = a2;

   if(Date.now() - drinktime > 3600000) {

     cpf.set("socket d5", 261, 500);

     cpf.set("socket d5", 261, 500);

     cpf.set("socket d5", 392, 500);

     cpf.set("socket d5", 392, 500);

     cpf.set("socket d5", 440, 500);

     cpf.set("socket d5", 440, 500);

     cpf.set("socket d5", 392, 500);

     cpf.set("socket d5", 349, 500);

     cpf.set("socket d5", 349, 500);

     cpf.set("socket d5", 329, 500);

     cpf.set("socket d5", 329, 500);

     cpf.set("socket d5", 293, 500);

     cpf.set("socket d5", 293, 500);

     cpf.set("socket d5", 261, 500);

     drinktime = Date.now();

cpf.repeat();

點我複製完整程式碼

實作延伸

到這邊，我們學習到杯墊運作的邏輯思考，其實就是運用了多次的if來判斷，和迴圈的進行，也了解到壓力感測器以及蜂鳴器的使用方式，而目前所學的還可以發揮在更多的用途上，有了這些概念後，我們可以讓杯墊的運用進行延伸，例如使用者可以針對自己的體重，計算出每日所需要喝的水量，調整在程式碼中，或者提醒時能更改成自己喜歡的音樂，甚至可以搭配溫度感測器，讓使用者不但能適量的攝取外，也能調整合適的水溫，喝得更健康！又或者是否有更特別的想法，讓它擦出不一樣的火花呢，嘗試實作上述延伸的例子，依照自己的想像力，創造出自己的作品吧！

Google Sites

Report abuse