GR-COTTON 特設：Milkcocoaでクラウドアクセス！

概要

準備

以下のようにESP8266モジュールをGR-COTTON接続します。ESP8266をATコマンドモードで使用するため、IO15ピンはLow、ENピンはHighにしてください。電子回路を組んだ後に、USBケーブル(マイクロBタイプ)でPCにつなげます。ESP8266モジュールの購入についてはこちら(秋月電子通商Web)を参照してください。

cotton-sp-mlkcca-prepare

GR-COTTONの裏面にある白いジャンパーが3V3、USB側にします。BATT側にある場合は引き抜いて、USB側に差し込んでください。

Milkcocoaでアプリ作成

Milkcocoaは、リアルタイムなデータのやりとりができるクラウドプラットフォームで、Uhuru Technical Rockstarsが提供するサービスです。GR-COTTONとWiFiモジュールのESP8266を組み合わせて、Milkcocoaで遊んでみましょう！

Milkcocoaのサービスを利用するためログインしてアプリを作成します。Milkcocoaの概要を知るため、チュートリアルに沿って作成いただいてもOKです。

1. ログイン

Milkcocoaのページにアクセスしてログインします。ログインするためにはアカウントを作成する必要があります。

Milkcocoaログイン

2. アプリを作成

アプリを作るボタンを押して、適当な名前でアプリを作ります。下図の画面では「GR」という名前のアプリが作られています。

Milkcocoaアプリ

3. app_idのコピー

作られたアプリをクリックすると以下のようにアプリの概要が表示されます。この画面の情報をもとにクラウドアクセスをしますが、「app_id」はこの後に使用しますのでコピーしておきましょう。

GR Milkcocoa app_id

GR-COTTONでMilkcocoaアクセス

プロジェクトの作成

MilkcocoaにアクセスするためのライブラリがWebコンパイラのテンプレートにありますので、それを利用してプロジェクトを作成します。

GR Milkcocoaプロジェクトを作成

スケッチ編集

gr_sketch.cppを開き、以下に示す4箇所を編集します。その後ビルドしてcotton_sketch.binをGR-COTTONに書き込みましょう。書き込み方を忘れた方は「Webコンパイラでスケッチ」を参照してください。

WLAN_SSID: アクセスポイントのSSID
WLAN_PASS: アクセスポイントのパスワード
MILKCOCOA_APP_ID: Milkcocoaで作成したアプリのapp_id
MILKCOCOA_DATASTORE: 適当な要素名(ここではMILK_COTTONにします)

cotton-sp-mlkcca-sketch

動作確認

GR-COTTONにスケッチを書き込んだ後、KurumiWriterのシリアルモニターで確認してみましょう。以下はMilkcocoaへのアクセスが成功している画面ですが、モニターの最後に「onpush」と「30(温度)」が表示されています。

サンプルでは7秒毎にGR-COTTONからMilkcocoaに温度データをプッシュしており、その後Milkcocoaからプッシュ通知が来たらモニターに表示しています。もし複数のGR-COTTONがMilkcocoaにつながっていたらこのプッシュ通知を同時に受け取ることができるということです。

cotton-sp-mlkcca-monitor

Milkcocoaのデータストアを見てみましょう。以下に示すように7秒毎に{"v":**(温度)}がアップされていることが分かります。

Cotton Milkcocoaログインデータストア

WebブラウザでGR-COTTONを操作してみる

WebブラウザからGR-COTTONのLEDを光らせたり、ボタンスイッチが押されたかを表示する例を紹介します。

cotton-sp-mlkcca-browser

GR-COTTONのサンプル

WebブラウザからGR-COTTONのLEDを光らせたり、ボタンスイッチが押されたかを表示する例を紹介します。


boolean g_sw_push = 0; 
void sw_push(){
    g_sw_push = 1;
    delayMicroseconds(1000); // for cutting chattering
}
void setup() {
    Serial.begin(9600);
    pinMode(2, INPUT_PULLUP);
    attachInterrupt(0, sw_push, FALLING);
    pinMode(22, OUTPUT);
    pinMode(23, OUTPUT);
    pinMode(24, OUTPUT);
    digitalWrite(22, HIGH);
    digitalWrite(23, HIGH);
    digitalWrite(24, HIGH);
    
    Serial.println("wait 3sec...");
    delay(3*1000);
    // Connect to WiFi access point.
    Serial.print("Connecting to ");
    Serial.println(WLAN_SSID);
    wifi.begin(ESP_Serial, 115200);
    if (wifi.setOprToStation()) {
        Serial.print("to station ok\r\n");
    } else {
        Serial.print("to station err\r\n");
    }
    if (wifi.joinAP(WLAN_SSID, WLAN_PASS)) {
        Serial.print("Join AP success\r\n");
        Serial.print("IP: ");
        Serial.println(wifi.getLocalIP().c_str());    
    } else {
        Serial.print("Join AP failure\r\n");
    }
    if (wifi.disableMUX()) {
        Serial.print("single ok\r\n");
    } else {
        Serial.print("single err\r\n");
    }
    
    if(milkcocoa.on(MILKCOCOA_DATASTORE, "push", onpush)){
        Serial.println("milkcocoa on sucesss");   
    }
    else {
        Serial.println("milkcocoa on failure");   
    }
    
}
    
void loop() {
    milkcocoa.loop();
    
    if(g_sw_push == 1){
    DataElement elem = DataElement();
    elem.setValue("v", 3);
    milkcocoa.push(MILKCOCOA_DATASTORE, &elem);
    delay(500);
    elem.setValue("v", 4);
    milkcocoa.push(MILKCOCOA_DATASTORE, &elem);
    g_sw_push = 0;
    }  
}
    
void onpush(DataElement *pelem) {
    int data = pelem->getInt("v");
    Serial.print("onpush:");
    Serial.println(data);
    if(data == 0){
    digitalWrite(22, !digitalRead(22));
    };
    if(data == 1){
    digitalWrite(23, !digitalRead(23));
    };
    if(data == 2){
    digitalWrite(24, !digitalRead(24));
    };
}

Webブラウザのサンプル

次にWebブラウザのサンプルを示します。以下のHTMLソースコードを「sample.html」などのファイル名を付けてを保存してください。

なお、「var milkcocoa = new MilkCocoa('hotirprfik2.mlkcca.com');」の部分は、Milkcocoa概要ページに記載されているConnectコードに置き換えてください。

cotton-sp-mlkcca-connectcode


<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <p>GR-COTTON LED Control</p>
    <script src="https://cdn.mlkcca.com/v0.6.0/milkcocoa.js"></script>
    <button id="r">R</button>
    <button id="g">G</button>
    <button id="b">B</button>
    <p>GR-COTTON SW Monitor</p>
    <p id="sw">(_ _)ZZZ</p>
    <script>
        var milkcocoa = new MilkCocoa('hotirprfik2.mlkcca.com');
        var dataStore = milkcocoa.dataStore("MILK_COTTON");
        document.getElementById("r").onclick = function(e){ 
            dataStore.push({v:0});
        }
        document.getElementById("g").onclick = function(e){ 
            dataStore.push({v:1});
        }
        document.getElementById("b").onclick = function(e){ 
            dataStore.push({v:2});
        }
        dataStore.on("push",function(d){
            if(d.value.v == 3) {
            document.getElementById("sw").innerHTML="(o o)/";
            } else if(d.value.v == 4) {
            document.getElementById("sw").innerHTML="(o o)";
            }
        });
    </script>
</body>
</html>