###前提・実現したいこと
タイトル通りでございますが、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のデータストアに格納されているデータをうまく取得し、
現状のコードではなぜか一部のセンサの値について、ブラウザ上にそのデータを反映できない。
###該当のソースコード
C
1// ライブラリの読み込み 2#include "ESP8266.h" 3#include "Milkcocoa.h" 4#include "Client_ESP8266.h" 5 6// 転送スピード 7#define SERIAL_SPEED 115200 8 9/************************* WiFi Access Point *********************************/ 10 11// Wi-Fi SSID 12#define WLAN_SSID "Daimon5" 13// Wi-Fi PASSWORD 14#define WLAN_PASS "e9799b94b2f9" 15 16/************************* Your Milkcocoa Setup *********************************/ 17 18// MilkcocoaのアプリID 19#define MILKCOCOA_APP_ID "readiyl7mu5n" 20// Data Store名 21#define MILKCOCOA_DATASTORE "MachineCondition" 22 23/************* Milkcocoa Setup (you don't need to change this!) ******************/ 24 25#define MILKCOCOA_SERVERPORT 1883 26 27/************ Global State (you don't need to change this!) ******************/ 28 29// Create an ESP8266Client class to connect to the MQTT server. 30ESP8266Client wifi; 31 32const char MQTT_SERVER[] PROGMEM = MILKCOCOA_APP_ID ".mlkcca.com"; 33const char MQTT_CLIENTID[] PROGMEM = __TIME__ MILKCOCOA_APP_ID; 34 35Milkcocoa milkcocoa = Milkcocoa(&wifi, MQTT_SERVER, MILKCOCOA_SERVERPORT, MILKCOCOA_APP_ID, MQTT_CLIENTID); 36 37// センサーを接続するピン 38const int sensorPin = A0; 39const int sensorPin1 = A1; 40const int sensorPin2 = A2; 41const int sensorPin3 = A3; 42 43// 光センサーの閾値 44const int threshold = 500; 45const int threshold1 = 800; 46const int threshold2 = 800; 47const int threshold3 = 800; 48 49// 現在の明るさを保持 50boolean nowSensorState = false; 51boolean nowSensorState1 = false; 52boolean nowSensorState2 = false; 53boolean nowSensorState3 = false; 54 55// 切り替え前の明るさを保持する 56boolean sensorState = false; 57boolean sensorState1 = false; 58boolean sensorState2 = false; 59boolean sensorState3 = false; 60 61void setup() { 62// パソコンとのシリアル通信のポートを開ける 63Serial.begin(SERIAL_SPEED); 64// Wi-Fiモジュールとのシリアル通信のポートを開ける 65Serial1.begin(SERIAL_SPEED); 66 67// Wi-Fi設定 68setupWiFi(); 69 70// Milkcocoaへ光センサーの値がpushされた 71milkcocoa.on(MILKCOCOA_DATASTORE, "push", milkcocoaPushDataHandler); 72} 73 74/* 75Wi-Fiを設定します 76*/ 77void setupWiFi() { 78Serial.print("Connecting to "); 79Serial.println(WLAN_SSID); 80 81// シリアルポートの指定 82wifi.begin(Serial1); 83 84// Wi-Fiへ接続(成功するまで処理を繰り返す) 85while (!wifi.joinAP(WLAN_SSID, WLAN_PASS)) { 86delay(500); 87Serial.print("."); 88} 89 90Serial.println("Wi-Fi connected"); 91Serial.println("IP address: "); 92// Wi-FiのローカルIPアドレスをシリアルモニターへ表示 93Serial.println(wifi.getLocalIP().c_str()); 94} 95 96/** 97* ループ処理 98*/ 99void loop() { 100// Milkcocoaのループ処理を実行 101milkcocoa.loop(); 102 103// センサーの値 104int sensorValue = analogRead(sensorPin); 105int sensorValue1 = analogRead(sensorPin1); 106int sensorValue2 = analogRead(sensorPin2); 107int sensorValue3 = analogRead(sensorPin3); 108 109Serial.print("Sensor Value : "); 110Serial.println(sensorValue); 111Serial.print("Sensor Value1 : "); 112Serial.println(sensorValue1); 113Serial.print("Sensor Value2 : "); 114Serial.println(sensorValue2); 115Serial.print("Sensor Value3 : "); 116Serial.println(sensorValue3); 117 118// センサーの値と閾値を比較 119// nowSensorState = sensorValue > threshold; 120 121 122if (sensorValue > threshold){ 123nowSensorState = true; 124} 125else{ 126nowSensorState = false; 127} 128 129 130if (sensorValue1 > threshold1){ 131nowSensorState1 = true; 132} 133else{ 134nowSensorState1 = false; 135} 136 137 138if (sensorValue2 > threshold2){ 139nowSensorState2 = true; 140} 141else{ 142nowSensorState2 = false; 143} 144 145 146if (sensorValue3 > threshold3){ 147nowSensorState3 = true; 148} 149else{ 150nowSensorState3 = false; 151} 152 153 154// 明るさに変化がなければloop()関数の始めに戻る 155// if (sensorState && nowSensorState || !sensorState && !nowSensorState) { 156// return; 157// } 158 159// Milkcocoaへ送信するデータを作成 160DataElement elem = DataElement(); 161 162// lightというデータ名で値を追加 163elem.setValue("lightState", nowSensorState); 164elem.setValue("lightState1", nowSensorState1); 165elem.setValue("lightState2", nowSensorState2); 166elem.setValue("lightState3", nowSensorState3); 167 168// Milkcocoaへデータを送信 169milkcocoa.push(MILKCOCOA_DATASTORE, &elem); 170 171// 1秒処理を止める 172delay(1000); 173} 174 175/* 176* Milkcocoaへ光センサーの値がpushされた 177*/ 178void milkcocoaPushDataHandler(DataElement *pelem) { 179// 明るさの状態を更新 180sensorState = nowSensorState; 181sensorState1 = nowSensorState1; 182sensorState2 = nowSensorState2; 183sensorState3 = nowSensorState3; 184} 185 186 187//void milkcocoaPushDataHandler(DataElement *pelem1) { 188// // 明るさの状態を更新 189// sensorState1 = nowSensorState1; 190//} 191// 192//void milkcocoaPushDataHandler(DataElement *pelem2) { 193// // 明るさの状態を更新 194// sensorState2 = nowSensorState2; 195//} 196// 197//void milkcocoaPushDataHandler(DataElement *pelem3) { 198// // 明るさの状態を更新 199// sensorState3 = nowSensorState3; 200//}
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4<meta charset="UTF-8"> 5 6<meta name="robots" content="noindex"> 7<meta name="viewport" content="width=device-width, initial-scale=1"> 8 9<title>Arduino & ESP-WROOM-02 & Milkcocoa & IoT DEMO</title> 10 11<link rel="stylesheet" href="css/normalize.css" /> 12<link rel="stylesheet" href="css/index.css" /> 13 14<script src="//cdn.mlkcca.com/v2.0.0/milkcocoa.js"></script> 15<script defer src="js/index.js"></script> 16</head> 17<body> 18<div id="wrapper"> 19<!-- 運転中に表示させる画面 --> 20<div id="working"> 21<img src="images/working.png" width="320" height="380" alt="" /> 22</div> 23<!-- 黄色停止中に表示させる画面 --> 24<div id="yellowstop"> 25<img src="images/yellowstop.png" width="320" height="380" alt="" /> 26</div> 27<!-- 赤色停止中に表示させる画面 --> 28<div id="redstop"> 29<img src="images/redstop.png" width="320" height="380" alt="" /> 30</div> 31<!-- その他の場合に表示させる画面 --> 32<div id="others"> 33<img src="images/others.png" width="320" height="380" alt="" /> 34</div> 35 36</div> 37</body> 38</html>
js
1// Milkcocoa App ID 2var MILKCOCOA_APP_ID = "readiyl7mu5n"; 3 4// Milkcocoa Data Store 5var MILKCOCOA_DATASTORE = "MachineCondition"; 6 7// Milkcocoa 8var milkcocoa = new MilkCocoa(MILKCOCOA_APP_ID + ".mlkcca.com"); 9 10// Milkcocoa Data Store 11var dataStore = milkcocoa.dataStore(MILKCOCOA_DATASTORE); 12 13// 運転中画面 14var working = document.getElementById("working"); 15 16// 黄色停止画面 17var yellowstop = document.getElementById("yellowstop"); 18 19// 赤色停止画面 20var redstop = document.getElementById("redstop"); 21 22// その他画面 23var others = document.getElementById("others"); 24 25 26 27// 過去1件のデータ取得 28dataStore.stream().size(1).next(function (err, data) { 29// 取得が成功したら 30if (!err) { 31var obj = data[0]; 32var obj1 = data[1]; 33var obj2 = data[2]; 34var obj3 = data[3]; 35 36// 明るさの状態を取得 37var lightState = obj.value.lightState; 38var lightState1 = obj1.value.lightState1; 39var lightState2 = obj2.value.lightState2; 40var lightState3 = obj3.value.lightState3; 41 42// 画面の切り替え 43changeView(lightState, lightState1, lightState2, lightState3); 44} 45}); 46 47// ArduinoからMilkcocoaに値がpushされたら 48dataStore.on("push", function (data) { 49// 明るさの状態を取得 50var lightState = data.value.lightState; 51var lightState1 = data.value.lightState1; 52var lightState2 = data.value.lightState2; 53var lightState3 = data.value.lightState3; 54 55// 画面の切り替え 56changeView(lightState, lightState1, lightState2, lightState3); 57}); 58 59/** 60* 画面を切り替えます。 61*/ 62function changeView(lightState, lightState1, lightState2, lightState3) { 63// 運転中 64if (lightState == true && lightState1 == true && lightState2 == false && lightState3 == false) { 65Working(); 66} 67// 黄色停止中 68if (lightState == true && lightState1 == false && lightState2 == true && lightState3 == false) { 69Yellowstop(); 70} 71// 赤色停止中 72if (lightState == true && lightState1 == false && lightState2 == false && lightState3 == true) { 73Redstop(); 74} 75// その他 76else { 77Others(); 78} 79} 80 81/** 82* 運転中画面に切り替えます。 83*/ 84function Working() { 85working.style.display = "block"; 86yellowstop.style.display = "none"; 87redstop.style.display = "none"; 88others.style.display = "none"; 89} 90 91/** 92* 黄色停止中画面に切り替えます。 93*/ 94function Yellowstop() { 95working.style.display = "none"; 96yellowstop.style.display = "block"; 97redstop.style.display = "none"; 98others.style.display = "none"; 99} 100 101/** 102* 赤色停止中画面に切り替えます。 103*/ 104function Redstop() { 105working.style.display = "none"; 106yellowstop.style.display = "none"; 107redstop.style.display = "block"; 108others.style.display = "none"; 109} 110 111/** 112* その他画面に切り替えます。 113*/ 114function Others() { 115working.style.display = "none"; 116yellowstop.style.display = "none"; 117redstop.style.display = "none"; 118others.style.display = "block"; 119}
###試したこと
前回の質問で多くのアドバイスをいただき、
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.赤ランプ)に設置。室内は常に閾値を超えている状態で、その他の光センサは点灯時に閾値を超えるようになっています。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/02/02 01:03
2017/02/02 05:22
2017/02/02 05:37
2017/02/02 05:58
2017/02/02 06:10
2017/02/02 08:35
2017/02/02 08:42
2017/02/02 15:53