質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.78%

MILKCOCOAのデータストアからデータを取得後、ブラウザで表示

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,793

bobby2128

score 42

前提・実現したいこと

タイトル通りでございますが、MILKCOCOAのデータストアからデータを取得後、ブラウザで表示したいです。

arduinoとESP-WROOM-02を用いて、4つの光センサ(0.室内、1.青ランプ、2.黄色ランプ、3.赤ランプに設置)の順で、milkcocoaのデータストアへデータを蓄積しています。各センサデータが出力した値がmilkcocoaのデータストアへデータへ送信されていることは以下に示すように、事前に確認しています。

iymnss1b47eiJfV    2017-02-01 14:56:22 {"lightState":1,"lightState1":0,"lightState2":0,"lightState3":1}
iymnsmtc2hO2BBn    2017-02-01 14:56:16 {"lightState":1,"lightState1":0,"lightState2":1,"lightState3":0}
iymnshnvbksVslS    2017-02-01 14:56:09 {"lightState":1,"lightState1":1,"lightState2":0,"lightState3":0}
iymnschxqHAGVGR    2017-02-01 14:56:02 {"lightState":1,"lightState1":0,"lightState2":0,"lightState3":0}


lightStateは室内の明るさをセンサで読み取り、常に1を返しており、
lightState1, lightState2, lightState3はそれぞれ青ランプ、黄色ランプ、赤ランプが点灯しているときに1を返すようにしており、
これらの変化に応じてブラウザ上にそれぞれの色の画像を示したいです。

ところが、以下に示すコードで準備したブラウザ上には、赤ランプが付いている状態と、何もついていない状態のみの結果を反映した画像を示す状態となっており、黄色ランプと青色ランプがついている状態を反映してくれません。(lightState1とlightState2が1になってもブラウザ上には変化がない)

サンプルコードは以下に示します。お手数おかけいたしますが、どうかアドバイス等ございましたら、是非よろしくお願いいたします。

発生している問題・エラーメッセージ

milkcocoaのデータストアに格納されているデータをうまく取得し、
現状のコードではなぜか一部のセンサの値について、ブラウザ上にそのデータを反映できない。

該当のソースコード

// ライブラリの読み込み
#include "ESP8266.h"
#include "Milkcocoa.h"
#include "Client_ESP8266.h"

// 転送スピード
#define SERIAL_SPEED 115200

/************************* WiFi Access Point *********************************/

// Wi-Fi SSID
#define WLAN_SSID "Daimon5"
// Wi-Fi PASSWORD
#define WLAN_PASS "e9799b94b2f9"

/************************* Your Milkcocoa Setup *********************************/

// MilkcocoaのアプリID
#define MILKCOCOA_APP_ID "readiyl7mu5n"
// Data Store名
#define MILKCOCOA_DATASTORE "MachineCondition"

/************* Milkcocoa Setup (you don't need to change this!) ******************/

#define MILKCOCOA_SERVERPORT 1883

/************ Global State (you don't need to change this!) ******************/

// Create an ESP8266Client class to connect to the MQTT server.
ESP8266Client wifi;

const char MQTT_SERVER[] PROGMEM = MILKCOCOA_APP_ID ".mlkcca.com";
const char MQTT_CLIENTID[] PROGMEM = __TIME__ MILKCOCOA_APP_ID;

Milkcocoa milkcocoa = Milkcocoa(&wifi, MQTT_SERVER, MILKCOCOA_SERVERPORT, MILKCOCOA_APP_ID, MQTT_CLIENTID);

// センサーを接続するピン
const int sensorPin = A0;
const int sensorPin1 = A1;
const int sensorPin2 = A2;
const int sensorPin3 = A3;

// 光センサーの閾値
const int threshold = 500;
const int threshold1 = 800;
const int threshold2 = 800;
const int threshold3 = 800;

// 現在の明るさを保持
boolean nowSensorState = false;
boolean nowSensorState1 = false;
boolean nowSensorState2 = false;
boolean nowSensorState3 = false;

// 切り替え前の明るさを保持する
boolean sensorState = false;
boolean sensorState1 = false;
boolean sensorState2 = false;
boolean sensorState3 = false;

void setup() {
// パソコンとのシリアル通信のポートを開ける
Serial.begin(SERIAL_SPEED);
// Wi-Fiモジュールとのシリアル通信のポートを開ける
Serial1.begin(SERIAL_SPEED);

// Wi-Fi設定
setupWiFi();

// Milkcocoaへ光センサーの値がpushされた
milkcocoa.on(MILKCOCOA_DATASTORE, "push", milkcocoaPushDataHandler);
}

/*
Wi-Fiを設定します
*/
void setupWiFi() {
Serial.print("Connecting to ");
Serial.println(WLAN_SSID);

// シリアルポートの指定
wifi.begin(Serial1);

// Wi-Fiへ接続(成功するまで処理を繰り返す)
while (!wifi.joinAP(WLAN_SSID, WLAN_PASS)) {
delay(500);
Serial.print(".");
}

Serial.println("Wi-Fi connected");
Serial.println("IP address: ");
// Wi-FiのローカルIPアドレスをシリアルモニターへ表示
Serial.println(wifi.getLocalIP().c_str());
}

/**
* ループ処理
*/
void loop() {
// Milkcocoaのループ処理を実行
milkcocoa.loop();

// センサーの値
int sensorValue = analogRead(sensorPin);
int sensorValue1 = analogRead(sensorPin1);
int sensorValue2 = analogRead(sensorPin2);
int sensorValue3 = analogRead(sensorPin3);

Serial.print("Sensor Value : ");
Serial.println(sensorValue);
Serial.print("Sensor Value1 : ");
Serial.println(sensorValue1);
Serial.print("Sensor Value2 : ");
Serial.println(sensorValue2); 
Serial.print("Sensor Value3 : ");
Serial.println(sensorValue3);

// センサーの値と閾値を比較
// nowSensorState = sensorValue > threshold;


if (sensorValue > threshold){
nowSensorState = true;
}
else{
nowSensorState = false;
}


if (sensorValue1 > threshold1){
nowSensorState1 = true;
}
else{
nowSensorState1 = false;
}


if (sensorValue2 > threshold2){
nowSensorState2 = true;
}
else{
nowSensorState2 = false;
}


if (sensorValue3 > threshold3){
nowSensorState3 = true;
}
else{
nowSensorState3 = false;
}


// 明るさに変化がなければloop()関数の始めに戻る
// if (sensorState && nowSensorState || !sensorState && !nowSensorState) {
// return;
// }

// Milkcocoaへ送信するデータを作成
DataElement elem = DataElement();

// lightというデータ名で値を追加
elem.setValue("lightState", nowSensorState);
elem.setValue("lightState1", nowSensorState1);
elem.setValue("lightState2", nowSensorState2); 
elem.setValue("lightState3", nowSensorState3); 

// Milkcocoaへデータを送信
milkcocoa.push(MILKCOCOA_DATASTORE, &elem);

// 1秒処理を止める
delay(1000);
}

/*
* Milkcocoaへ光センサーの値がpushされた
*/
void milkcocoaPushDataHandler(DataElement *pelem) {
// 明るさの状態を更新
sensorState = nowSensorState;
sensorState1 = nowSensorState1;
sensorState2 = nowSensorState2;
sensorState3 = nowSensorState3; 
}


//void milkcocoaPushDataHandler(DataElement *pelem1) {
// // 明るさの状態を更新
// sensorState1 = nowSensorState1;
//}
//
//void milkcocoaPushDataHandler(DataElement *pelem2) {
// // 明るさの状態を更新
// sensorState2 = nowSensorState2;
//}
//
//void milkcocoaPushDataHandler(DataElement *pelem3) {
// // 明るさの状態を更新
// sensorState3 = nowSensorState3;
//}
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">

<meta name="robots" content="noindex">
<meta name="viewport" content="width=device-width, initial-scale=1">

<title>Arduino & ESP-WROOM-02 & Milkcocoa & IoT DEMO</title>

<link rel="stylesheet" href="css/normalize.css" />
<link rel="stylesheet" href="css/index.css" />

<script src="//cdn.mlkcca.com/v2.0.0/milkcocoa.js"></script>
<script defer src="js/index.js"></script>
</head>
<body>
<div id="wrapper">
<!-- 運転中に表示させる画面 -->
<div id="working">
<img src="images/working.png" width="320" height="380" alt="" />
</div>
<!-- 黄色停止中に表示させる画面 -->
<div id="yellowstop">
<img src="images/yellowstop.png" width="320" height="380" alt="" />
</div>
<!-- 赤色停止中に表示させる画面 -->
<div id="redstop">
<img src="images/redstop.png" width="320" height="380" alt="" />
</div>
<!-- その他の場合に表示させる画面 -->
<div id="others">
<img src="images/others.png" width="320" height="380" alt="" />
</div>

</div>
</body>
</html>
// Milkcocoa App ID
var MILKCOCOA_APP_ID = "readiyl7mu5n";

// Milkcocoa Data Store
var MILKCOCOA_DATASTORE = "MachineCondition";

// Milkcocoa
var milkcocoa = new MilkCocoa(MILKCOCOA_APP_ID + ".mlkcca.com");

// Milkcocoa Data Store
var dataStore = milkcocoa.dataStore(MILKCOCOA_DATASTORE);

// 運転中画面
var working = document.getElementById("working");

// 黄色停止画面
var yellowstop = document.getElementById("yellowstop");

// 赤色停止画面
var redstop = document.getElementById("redstop");

// その他画面
var others = document.getElementById("others");



// 過去1件のデータ取得
dataStore.stream().size(1).next(function (err, data) {
// 取得が成功したら
if (!err) {
var obj = data[0];
var obj1 = data[1];
var obj2 = data[2];
var obj3 = data[3];

// 明るさの状態を取得
var lightState = obj.value.lightState;
var lightState1 = obj1.value.lightState1;    
var lightState2 = obj2.value.lightState2;    
var lightState3 = obj3.value.lightState3;    

// 画面の切り替え
changeView(lightState, lightState1, lightState2, lightState3);
}
});

// ArduinoからMilkcocoaに値がpushされたら
dataStore.on("push", function (data) {
// 明るさの状態を取得
var lightState = data.value.lightState;
var lightState1 = data.value.lightState1; 
var lightState2 = data.value.lightState2; 
var lightState3 = data.value.lightState3; 

// 画面の切り替え
changeView(lightState, lightState1, lightState2, lightState3);
});

/**
* 画面を切り替えます。
*/
function changeView(lightState, lightState1, lightState2, lightState3) {
// 運転中
if (lightState == true && lightState1 == true && lightState2 == false && lightState3 == false) {
Working();
}
// 黄色停止中
if (lightState == true && lightState1 == false && lightState2 == true && lightState3 == false) {
Yellowstop();
} 
// 赤色停止中
if (lightState == true && lightState1 == false && lightState2 == false && lightState3 == true) {
Redstop();
} 
// その他
else {
Others();
}
}

/**
* 運転中画面に切り替えます。
*/
function Working() {
working.style.display = "block";
yellowstop.style.display = "none";
redstop.style.display = "none";
others.style.display = "none";
}

/**
* 黄色停止中画面に切り替えます。
*/
function Yellowstop() {
working.style.display = "none";
yellowstop.style.display = "block";
redstop.style.display = "none";
others.style.display = "none";
}

/**
* 赤色停止中画面に切り替えます。
*/
function Redstop() {
working.style.display = "none";
yellowstop.style.display = "none";
redstop.style.display = "block";
others.style.display = "none";
}

/**
* その他画面に切り替えます。
*/
function Others() {
working.style.display = "none";
yellowstop.style.display = "none";
redstop.style.display = "none";
others.style.display = "block";
}

試したこと

前回の質問で多くのアドバイスをいただき、
javaの文法のチェックとデータ取得方法の変更など試みました。
参考URL https://teratail.com/questions/64071

補足情報(言語/FW/ツール等のバージョンなど)

・Arduino M0 Pro
・Milkcocoa
・ESP-WROOM-02
・Arduino IDE 1.8.0
・4つの光センサをそれぞれ、(0.室内、1.青ランプ、2.黄色ランプ、3.赤ランプ)に設置。室内は常に閾値を超えている状態で、その他の光センサは点灯時に閾値を超えるようになっています。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

0

まず最初に、Javaと言っていますが、正しくはJavaScriptです。JavaとJavaScriptは全く違う言語ですので気を付けてください。(コードを記載するときの言語設定は"js"と省略)

改めて、確認のためHTMLに以下のように取得データという項目を追加し、

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">

        <meta name="robots" content="noindex">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Arduino & ESP-WROOM-02 & Milkcocoa & IoT DEMO</title>

        <link rel="stylesheet" href="css/normalize.css" />
        <link rel="stylesheet" href="css/index.css" />

        <script src="//cdn.mlkcca.com/v2.0.0/milkcocoa.js"></script>
        <script defer src="js/index.js"></script>
    </head>
    <body>
        <!-- この部分追加 -->
        <div>
            <div>取得データ</div>
            <pre><code id="receivedData"></code></pre>
        </div>


        <div id="wrapper">
            <!-- 運転中に表示させる画面 -->
            <div id="working">
                <img src="images/working.png" width="320" height="380" alt="" />
            </div>
            <!-- 黄色停止中に表示させる画面 -->
            <div id="yellowstop">
                <img src="images/yellowstop.png" width="320" height="380" alt="" />
            </div>
            <!-- 赤色停止中に表示させる画面 -->
            <div id="redstop">
                <img src="images/redstop.png" width="320" height="380" alt="" />
            </div>
            <!-- その他の場合に表示させる画面 -->
            <div id="others">
                <img src="images/others.png" width="320" height="380" alt="" />
            </div>

        </div>
</body>
</html>

dataStore.on("push")時のコードの頭に以下のように1行追加。

dataStore.on("push", function (data) {
    if(receivedData) receivedData.textContent = JSON.stringify(data); // この行追加
    // 明るさの状態を取得
    var lightState = data.value.lightState;
    var lightState1 = data.value.lightState1;
    var lightState2 = data.value.lightState2;
    var lightState3 = data.value.lightState3;

    // 画面の切り替え
    changeView(lightState, lightState1, lightState2, lightState3);
});

このように修正したら、実行してみてください。
取得データのところに表示される文字列を教えてください。
また、この文字列が示すデータがきちんとセンサーのデータが反映されているかも確認してください。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/02/02 17:35

    can110様
    親切にご説明いただき誠にありがとうございます。
    一度自分でチャレンジし、またわからなければお手数おかけいたしますがご質問させていただきます。

    キャンセル

  • 2017/02/02 17:42

    デバッグ(現象を再現→原因を特定→修正)は、ソフト/ハードに関係なく重要な技術(能力)です。
    頑張ってください。

    キャンセル

  • 2017/02/03 00:53

    turbgraphics200様
    can110様
    こんばんはおせわになります。
    あれからコードの書き換えとトライを繰り返し、
    else文のOthersの箇所をコメントにし、無効にしたところ、
    Others 以外(赤黄青)は点灯するようになりました。
    ただし、原因はよくわからないままです。

    アドバイスいただき誠にありがとうございました。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.78%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る