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

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

新規登録して質問してみよう
ただいま回答率
85.50%
C

C言語は、1972年にAT&Tベル研究所の、デニス・リッチーが主体となって作成したプログラミング言語です。 B言語の後継言語として開発されたことからC言語と命名。そのため、表記法などはB言語やALGOLに近いとされています。 Cの拡張版であるC++言語とともに、現在世界中でもっとも普及されているプログラミング言語です。

Java

Javaは、1995年にサン・マイクロシステムズが開発したプログラミング言語です。表記法はC言語に似ていますが、既存のプログラミング言語の短所を踏まえていちから設計されており、最初からオブジェクト指向性を備えてデザインされています。セキュリティ面が強力であることや、ネットワーク環境での利用に向いていることが特徴です。Javaで作られたソフトウェアは基本的にいかなるプラットフォームでも作動します。

Arduino

Arduinoは、AVRマイコン、単純なI/O(入出力)ポートを備えた基板、C言語を元としたArduinoのプログラム言語と、それを実装した統合開発環境から構成されたシステムです。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

1回答

2731閲覧

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

bobby2128

総合スコア42

C

C言語は、1972年にAT&Tベル研究所の、デニス・リッチーが主体となって作成したプログラミング言語です。 B言語の後継言語として開発されたことからC言語と命名。そのため、表記法などはB言語やALGOLに近いとされています。 Cの拡張版であるC++言語とともに、現在世界中でもっとも普及されているプログラミング言語です。

Java

Javaは、1995年にサン・マイクロシステムズが開発したプログラミング言語です。表記法はC言語に似ていますが、既存のプログラミング言語の短所を踏まえていちから設計されており、最初からオブジェクト指向性を備えてデザインされています。セキュリティ面が強力であることや、ネットワーク環境での利用に向いていることが特徴です。Javaで作られたソフトウェアは基本的にいかなるプラットフォームでも作動します。

Arduino

Arduinoは、AVRマイコン、単純なI/O(入出力)ポートを備えた基板、C言語を元としたArduinoのプログラム言語と、それを実装した統合開発環境から構成されたシステムです。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2017/02/01 15:59

編集2017/02/02 01:01

###前提・実現したいこと
タイトル通りでございますが、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.赤ランプ)に設置。室内は常に閾値を超えている状態で、その他の光センサは点灯時に閾値を超えるようになっています。

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

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

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

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 <!-- この部分追加 --> 19 <div> 20 <div>取得データ</div> 21 <pre><code id="receivedData"></code></pre> 22 </div> 23 24 25 <div id="wrapper"> 26 <!-- 運転中に表示させる画面 --> 27 <div id="working"> 28 <img src="images/working.png" width="320" height="380" alt="" /> 29 </div> 30 <!-- 黄色停止中に表示させる画面 --> 31 <div id="yellowstop"> 32 <img src="images/yellowstop.png" width="320" height="380" alt="" /> 33 </div> 34 <!-- 赤色停止中に表示させる画面 --> 35 <div id="redstop"> 36 <img src="images/redstop.png" width="320" height="380" alt="" /> 37 </div> 38 <!-- その他の場合に表示させる画面 --> 39 <div id="others"> 40 <img src="images/others.png" width="320" height="380" alt="" /> 41 </div> 42 43 </div> 44</body> 45</html>

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

js

1dataStore.on("push", function (data) { 2 if(receivedData) receivedData.textContent = JSON.stringify(data); // この行追加 3 // 明るさの状態を取得 4 var lightState = data.value.lightState; 5 var lightState1 = data.value.lightState1; 6 var lightState2 = data.value.lightState2; 7 var lightState3 = data.value.lightState3; 8 9 // 画面の切り替え 10 changeView(lightState, lightState1, lightState2, lightState3); 11});

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

投稿2017/02/02 00:45

turbgraphics200

総合スコア4267

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

bobby2128

2017/02/02 01:03

turbgraphics200様 いつもお世話になります。早々のコメントをいただき誠にありがとうございます。質問文の本文についてJava→jsへ修正させていただきました。 プログラムについても、ご提案をいただき誠にありがとうございます。 追って実行結果をお知らせいたします。
bobby2128

2017/02/02 05:22

turbgraphics200様 お世話になります。 以下にブラウザ上に表示された、取得データと、表示された画像をまとめます。 [case: Others(ランプ点灯なし)→ブラウザ表示画像Ohters] 取得データ {"id":"iynx5umjad08hze","path":"MachineCondition","value":{"lightState":1,"lightState1":0,"lightState2":0,"lightState3":0},"timestamp":1486011975499} [case: working(青色ランプ点灯)→ブラウザ表示画像Others] 取得データ {"id":"iynx7l3ds52TtSX","path":"MachineCondition","value":{"lightState":1,"lightState1":1,"lightState2":0,"lightState3":0},"timestamp":1486012056457} [case: yellowstop(黄色ランプ点灯)→ブラウザ表示画像Others] 取得データ {"id":"iynx8lov0KkiQtd","path":"MachineCondition","value":{"lightState":1,"lightState1":0,"lightState2":1,"lightState3":0},"timestamp":1486012103887} [case: redstop(赤色ランプ点灯)→ブラウザ表示画像Redstop] 取得データ {"id":"iynx96fs0BWoyBN","path":"MachineCondition","value":{"lightState":1,"lightState1":0,"lightState2":0,"lightState3":1},"timestamp":1486012130776} 上記の通り、各ランプを点灯させた際の画像について、othersとstopのみとなっております。 お手数おかけいたしますが、ご確認をよろしくお願いいたします。
can110

2017/02/02 05:37

横から失礼します。 changeView関数の動き(if/elseの対応関係)をよく見直すと原因が見つかるかと思います。
bobby2128

2017/02/02 05:58

can110様 親切なコメントをいただき、誠にありがとうございます。 turbgraphics200様のご助言とコードにより、現状、データを取得していることが確認できました。 changeView関数の動きについて、自身で読み返して精査してみますが、何故初心者なので、 確認方法として何かまた良いアイデアなどございましたらお知らせくださいますようよろしくお願いいたいします。
can110

2017/02/02 06:10

基本的にはブラウザ付属の開発者向けツールを使います。(chromeならF12キー押して起動) コード内に「console.log( lightState);」など記述し、目的の場所まで到達しているかログで確認できます。 詳細は「javascript ブラウザ デバッグ」などで検索してみてください。 Javascriptコードのデバッグには必須の知識です。
bobby2128

2017/02/02 08:35

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

2017/02/02 08:42

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

2017/02/02 15:53

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問