# C02. 上傳溫溼度到雲端

### 專案說明 <a href="#c02.mcs-shang-chuan-wen-shi-du-dao-yun-duan-zhuan-an-shui-ming" id="c02.mcs-shang-chuan-wen-shi-du-dao-yun-duan-zhuan-an-shui-ming"></a>

## **MediaTek Cloud Sandbox 團隊已於2021.4.16** 停止 MCS 服務 如要繼續使用請使用離線板[**MCS Lite**](https://cavedu.gitbook.io/cavedu/mcs-lite/mcs-lite-introduction-environment)

使用 **LinkIt 7697** + **溫溼度感測器**，收集**溫溼度資訊**並上傳到 [**MCS** ](https://mcs.mediatek.com/)**雲端顯示。**

![](https://3972650740-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FY4gduUSLWOCI23CXUWej%2Fuploads%2FHNzYTGuo4IpSW9VXzGa0%2Fimage-167.png?alt=media\&token=b5618b84-d5e6-4ee7-9342-f681d98c6f83)

此範例主要是演示 **顯示器通道** (Display Channel) 如何使用。請先詳讀 [範例 C01](https://docs.labs.mediatek.com/linkit-7697-blocklyduino/c01-led-12879996.html), 了解基本 MCS 的基本概念, 本範例不再重複介紹。

### 硬體連接 <a href="#c02.mcs-shang-chuan-wen-shi-du-dao-yun-duan-ying-ti-lian-jie" id="c02.mcs-shang-chuan-wen-shi-du-dao-yun-duan-ying-ti-lian-jie"></a>

可參考 [B03. Grove 溫溼度感測器](https://docs.labs.mediatek.com/linkit-7697-blocklyduino/b03-grove-12880218.html), 將**溫溼度感測器**連接到**Grove 擴充版**的連接埠 **D2**&#x20;

### 雲端設定 <a href="#c02.mcs-shang-chuan-wen-shi-du-dao-yun-duan-yun-duan-she-ding" id="c02.mcs-shang-chuan-wen-shi-du-dao-yun-duan-yun-duan-she-ding"></a>

在 **MCS** 建立一個**原型** (Prototype)，含有兩個 **浮點數顯示通道** 代表**溫度**和**相對濕度**，並使用這原型來創建一個使操作使用的**測試裝置** (Test Device)

▼ 點選 **創建** 原型

![](https://3972650740-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FY4gduUSLWOCI23CXUWej%2Fuploads%2Fdz6dNmiYJX23RdlpJaik%2Fimage-168.png?alt=media\&token=4cc5f9ca-b3b2-4931-b2df-d23fa97a04ce)

▼ 幫**原型**取個**名稱**和**版本**。 **硬體平台**選擇 **"LinkIt 7697"**， 產業和應用程式隨意選擇。 填完後按下 **儲存**

![](https://docs.labs.mediatek.com/linkit-7697-blocklyduino/files/12880045/12880557/1/1498724376012/2017-06-29_16-22-21.png)

▼ **原型**已創建成功， 點擊 **詳情** 進入

![](https://3972650740-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FY4gduUSLWOCI23CXUWej%2Fuploads%2FMnRjl5UHIdszMNQMH3BF%2Fimage-170.png?alt=media\&token=c81ff9bc-2276-4d3d-8f57-bb258927488f)

▼ 點擊 **新增** 來加入新的通道資料

![](https://3972650740-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FY4gduUSLWOCI23CXUWej%2Fuploads%2F7IlPsX4TAHNzIaiVDS6T%2Fimage-171.png?alt=media\&token=1db976a8-6658-4000-af2e-5fc2ef0a7138)

▼ **新增 "顯示器型態"** 的資料通道

![](https://3972650740-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FY4gduUSLWOCI23CXUWej%2Fuploads%2FzPDtjKFeThwFUk5QrI2e%2Fimage-172.png?alt=media\&token=2203276d-64d5-4641-8dcb-2722e0b1e398)

▼ 新增一個**溫度**的資料通道，幫此資料通道取個**名稱**(隨意)， 並取一個 **Id** (此 Id 會用於程式中來控制此通道)， 然後選擇 "**整數"** 的資料型態並選擇單位為 **"攝氏"。** 最後 **儲存** 此通道。

![](https://3972650740-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FY4gduUSLWOCI23CXUWej%2Fuploads%2FXxlO5XnwFsjNQGIqxnem%2Fimage-173.png?alt=media\&token=10c1d5a5-1d8d-4395-a9c3-c194280e9486)

▼ 再新增一個**相對溼度**的資料通道, 選擇 "**浮點數"** 的資料型態並選擇單位為 **"百分比"。** 最後 **儲存** 此通道。

![](https://3972650740-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FY4gduUSLWOCI23CXUWej%2Fuploads%2FN6uCe9Xc4xu8724M0kvL%2Fimage-174.png?alt=media\&token=28285f70-f35b-4fd6-a0f8-d3502d9f10b2)

▼紅色圈圈為新增的兩個浮點數的 **顯示通道，** 紅色箭頭為這 **資料通道 Id** (會用在程式內)。 接下來就要用這**原型**創建一個**測試裝置** (橘色箭頭)

![](https://3972650740-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FY4gduUSLWOCI23CXUWej%2Fuploads%2FRqheGWNHR4Nl7YRTpZms%2Fimage-175.png?alt=media\&token=790c2a17-ac99-4159-be38-f1366089b538)

▼幫這測試裝置取個**裝置名稱**， 並按下 **創建**&#x20;

![](https://3972650740-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FY4gduUSLWOCI23CXUWej%2Fuploads%2FdRl6g3EyBJS6arVHI5zf%2Fimage-176.png?alt=media\&token=faf4fce6-4517-4448-bf78-6450ef8e76ed)

▼**測試裝置**新增完成， 畫面上的四個紅色箭頭所指的 "**資料通道 Id**"， "**DeviceId**"， "**DeviceKey**" 為之後開發板上軟體開發時會用到的重要資料

![](https://3972650740-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FY4gduUSLWOCI23CXUWej%2Fuploads%2FxEtRK6gnr6ZILzg5nvfv%2Fimage-177.png?alt=media\&token=d14a7900-ff96-424b-a641-8f6da3e4bf9f)

### &#x20;積木畫布  <a href="#c02.mcs-shang-chuan-wen-shi-du-dao-yun-duan-ji-mu-hua-bu" id="c02.mcs-shang-chuan-wen-shi-du-dao-yun-duan-ji-mu-hua-bu"></a>

**初始化**&#x20;

* 建立 Wi-Fi 連線， 連到 AP (Wi-Fi SSID 和密碼請填寫要連接 AP 的資料)
* 建立 MCS 連線， 填入 DeviceID 和 DevieKey， 和上面步驟建立的雲端 **測試物件** 做連接
* 新增兩個 **"整數" "顯示控制通道"** (Float DisplayChannel) 物件， 填入正確的 **控制通道 Id**

**重複執行**&#x20;

* 第一步要加上 **和 MCS 同步**。 每次執行這一個積木， 程式會去和**雲端做資料同步**&#x20;
* 將溫溼度傳感器的數值更新到雲端對應的**顯示通道**
* 嘗試去握著傳感器改變溫度， 或是吹氣改變濕度，可以觀察 **MCS 控制台** 上的數值在改變

![](https://3972650740-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FY4gduUSLWOCI23CXUWej%2Fuploads%2Fppfg1fUTRlwB4RWDyqYj%2Fimage-178.png?alt=media\&token=a9081ab0-268e-4b90-825b-5ca327502f96)

\
產生出的 Arduino 程式如下

```
#include <LWiFi.h>
#include "MCS.h"
#include "DHT.h"

int t;
int h;

char _lwifi_ssid[] = "MediaTek_Labs";
char _lwifi_pass[] = "84149961";

MCSDevice mcs("Drsls7CQ", "kKUGahHDR5Hnp5Nn");
MCSDisplayInteger temp("temp");
MCSDisplayInteger humid("humid");

DHT __dht2(2, DHT22);

void setup()
{
  Serial.begin(9600);

  mcs.addChannel(temp);
  mcs.addChannel(humid);
  Serial.println("Wi-Fi 開始連線");
  while (WiFi.begin(_lwifi_ssid, _lwifi_pass) != WL_CONNECTED) { delay(1000); }
  Serial.println("Wi-Fi 連線成功");
  while(!mcs.connected()) { mcs.connect(); }
  Serial.println("MCS 連線成功");
  Serial.begin(9600);
  __dht2.begin();
}

void loop()
{
  while (!mcs.connected()) {
  	mcs.connect();
  	if (mcs.connected()) { Serial.println("MCS 已重新連線"); }
  }
  mcs.process(100);

  t = __dht2.readTemperature();
  h = __dht2.readHumidity();
  temp.set(t);
  humid.set(h);

  Serial.print("攝氏溫度 : ");
  Serial.println(t);
  Serial.print("相對溼度 :");
  Serial.println(h);

  delay(1000);
}
```
