Arduino M0 Pro, ESP-WROOM-02, MILKCOCOAの接続後→ブラウザでデータ表示

###前提・実現したいこと
前回質問させていただいた、「Arduino M0 Pro, ESP-WROOM-02, MILKCOCOAの接続完了→ データのブラウザ表示」
（https://teratail.com/questions/63890）に関連した質問です。

前回はセンサが一つでしたが、今回はハード側のセンサを4つに増加させました。milkcocoa上には、以下に示すように各センサからの出力が出てきていることを確認しました。

iyla1030KWCL5kW	2017-01-31 15:43:05 {"lightState3":1}
iyla0zyitLxxDgK	2017-01-31 15:43:05 {"lightState2":1}
iyla0zu2tJnebdZ	2017-01-31 15:43:05 {"lightState1":1}
iyla0zpowBAYjlU	2017-01-31 15:43:05 {"lightState":1}

従って、この結果を反映し、ブラウザ上に４つの画像の結果を出力できるようプログラムを書き換えたつもりでしたが、ブラウザに画像が表示されることはありませんでした。きっとhtmlやjavaに何か不具合があるのだと思います。お手数おかけいたしますが、何かアイデア等ございましたら、どうかよろしくお願いいたします。

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

ブラウザにプログラム通りにフォルダ内の画像が表示されない。

###該当のソースコード

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             "・・・・・・"
13// Wi-Fi PASSWORD
14#define WLAN_PASS             "e979・・・・"
15
16/************************* Your Milkcocoa Setup *********************************/
17
18// MilkcocoaのアプリID
19#define MILKCOCOA_APP_ID      "rea・・・・・"
20// Data Store名
21#define MILKCOCOA_DATASTORE   "Mach・・・・・"
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 = 300;
46const int threshold2 = 300;
47const int threshold3 = 300;
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  // パソコンとのシリアル通信のポートを開ける
63  Serial.begin(SERIAL_SPEED);
64  // Wi-Fiモジュールとのシリアル通信のポートを開ける
65  Serial1.begin(SERIAL_SPEED);
66
67  // Wi-Fi設定
68  setupWiFi();
69
70  // Milkcocoaへ光センサーの値がpushされた
71  milkcocoa.on(MILKCOCOA_DATASTORE, "push", milkcocoaPushDataHandler);
72}
73
74/*
75 Wi-Fiを設定します
76*/
77void setupWiFi() {
78  Serial.print("Connecting to ");
79  Serial.println(WLAN_SSID);
80
81  // シリアルポートの指定
82  wifi.begin(Serial1);
83
84  // Wi-Fiへ接続(成功するまで処理を繰り返す)
85  while (!wifi.joinAP(WLAN_SSID, WLAN_PASS)) {
86    delay(500);
87    Serial.print(".");
88  }
89
90  Serial.println("Wi-Fi connected");
91  Serial.println("IP address: ");
92  // Wi-FiのローカルIPアドレスをシリアルモニターへ表示
93  Serial.println(wifi.getLocalIP().c_str());
94}
95
96/**
97 * ループ処理
98 */
99void loop() {
100  // Milkcocoaのループ処理を実行
101  milkcocoa.loop();
102
103  // センサーの値
104  int sensorValue = analogRead(sensorPin);
105  int sensorValue1 = analogRead(sensorPin1);
106  int sensorValue2 = analogRead(sensorPin2);
107  int sensorValue3 = analogRead(sensorPin3);
108  
109  Serial.print("Sensor Value : ");
110  Serial.println(sensorValue);
111  Serial.print("Sensor Value1 : ");
112  Serial.println(sensorValue1);
113  Serial.print("Sensor Value2 : ");
114  Serial.println(sensorValue2); 
115  Serial.print("Sensor Value3 : ");
116  Serial.println(sensorValue3);
117
118  // センサーの値と閾値を比較
119//   nowSensorState = sensorValue > threshold;
120
121
122if (sensorValue > threshold){
123  nowSensorState = true;
124}
125else{
126nowSensorState = false;
127}
128
129
130if (sensorValue1 > threshold1){
131  nowSensorState1 = true;
132}
133else{
134nowSensorState1 = false;
135}
136
137
138if (sensorValue2 > threshold2){
139  nowSensorState2 = true;
140}
141else{
142nowSensorState2 = false;
143}
144
145
146if (sensorValue3 > threshold3){
147  nowSensorState3 = true;
148}
149else{
150nowSensorState3 = false;
151}
152
153
154  // 明るさに変化がなければloop()関数の始めに戻る
155//  if (sensorState && nowSensorState || !sensorState && !nowSensorState) {
156//    return;
157//  }
158
159  // Milkcocoaへ送信するデータを作成
160  DataElement elem = DataElement();
161  DataElement elem1 = DataElement();
162  DataElement elem2 = DataElement();
163  DataElement elem3 = DataElement();
164   
165  // lightというデータ名で値を追加
166  elem.setValue("lightState", nowSensorState);
167  elem1.setValue("lightState1", nowSensorState1);
168  elem2.setValue("lightState2", nowSensorState2);  
169  elem3.setValue("lightState3", nowSensorState3);  
170  
171  // Milkcocoaへデータを送信
172  milkcocoa.push(MILKCOCOA_DATASTORE, &elem);
173  milkcocoa.push(MILKCOCOA_DATASTORE, &elem1);
174  milkcocoa.push(MILKCOCOA_DATASTORE, &elem2);
175  milkcocoa.push(MILKCOCOA_DATASTORE, &elem3);
176
177  // 1秒処理を止める
178  delay(1000);
179}
180
181/*
182 * Milkcocoaへ光センサーの値がpushされた
183 */
184void milkcocoaPushDataHandler(DataElement *pelem) {
185  // 明るさの状態を更新
186  sensorState = nowSensorState;
187  sensorState1 = nowSensorState1;
188  sensorState2 = nowSensorState2;
189  sensorState3 = nowSensorState3;  
190}
191
192
193//void milkcocoaPushDataHandler(DataElement *pelem1) {
194//  // 明るさの状態を更新
195//  sensorState1 = nowSensorState1;
196//}
197//
198//void milkcocoaPushDataHandler(DataElement *pelem2) {
199//  // 明るさの状態を更新
200//  sensorState2 = nowSensorState2;
201//}
202//
203//void milkcocoaPushDataHandler(DataElement *pelem3) {
204//  // 明るさの状態を更新
205//  sensorState3 = nowSensorState3;
206//}
207
208

Java
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
23// 過去4?件のデータ取得
24dataStore.stream().size(4).next(function (err, data) {
25  // 取得が成功したら
26  if (!err) {
27    var obj = data[0];
28    var obj1 = data[1];
29	var obj2 = data[2];
30	var obj3 = data[3];
31	
32    // 明るさの状態を取得
33    var lightState = obj.value.lightState;
34    var lightState1 = obj1.value.lightState1;	
35    var lightState2 = obj2.value.lightState2;	
36    var lightState3 = obj3.value.lightState3;	
37	
38    // 画面の切り替え
39    changeView(lightState, lightState1, lightState2, lightState3);
40  }
41});
42
43// ArduinoからMilkcocoaに値がpushされたら
44dataStore.on("push", function (data) {
45  // 明るさの状態を取得
46  var lightState = data.value.lightState;
47  var lightState1 = data.value.lightState1;  
48  var lightState2 = data.value.lightState2;  
49  var lightState3 = data.value.lightState3;  
50  
51  // 画面の切り替え
52  changeView(lightState, lightState1, lightState2, lightState3);
53});
54
55/**
56 * 画面を切り替えます。
57 */
58function changeView(lightState, lightState1, lightState2, lightState3) {
59  // 運転中
60  if (lightState = true || lightState1 = true) {
61    Working();
62  }
63  // 黄色停止中
64  if (lightState = true || lightState2 = true) {
65    YellowStop();
66  }  
67   // 赤色停止中
68  if (lightState = true || lightState3 = true) {
69    RedStop();
70  }   
71  // その他
72  else {
73    Others();
74  }
75}
76
77/**
78 * 運転中画面に切り替えます。
79 */
80function Working() {
81  working.style.display = "block";
82  yellowstop.style.display = "none";
83  redstop.style.display = "none";
84  others.style.display = "none";
85}
86
87/**
88 * 黄色停止中画面に切り替えます。
89 */
90function YellowStop() {
91  working.style.display = "none";
92  yellowstop.style.display = "block";
93  redstop.style.display = "none";
94  others.style.display = "none";
95}
96
97/**
98 * 赤色停止中画面に切り替えます。
99 */
100function YellowStop() {
101  working.style.display = "none";
102  yellowstop.style.display = "none";
103  redstop.style.display = "block";
104  others.style.display = "none";
105}
106
107/**
108 * その他画面に切り替えます。
109 */
110function YellowStop() {
111  working.style.display = "none";
112  yellowstop.style.display = "none";
113  redstop.style.display = "none";
114  others.style.display = "block";
115}
116

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/woriking.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>

###試したこと
有効な手段が特に浮かばず。

###補足情報(言語/FW/ツール等のバージョンなど)
Arduino M0 Pro
ESP-WROOM-02
MILKCOCOA
Arduino IDE 1.8.0

行動規範の内容に同意します

回答2件

ベストアンサー

うーん、HTMLには"運転中"、"赤"、"黄"、"その他" というのがあるのですが、JavaScriptのコードで、
lightState, lightState1, lightState2, lightState3がこの"運転中"、"赤"、"黄"、"その他"のどれに当たるか、もしくはどのような関係なのかを聞きたかったのですが。

JavaScirptコードでは修正し忘れでしょうが、changeView関数で呼ぶ関数がすべてYellowstopという関数名となっているためわからなかったです。

青がその他なのかどうかはわかりませんが、とりあえず青をその他(others)として、
JavaScriptのchangeView関数を以下のように書き換えてください

js
1function changeView(lightState, lightState1, lightState2, lightState3) {
2    // 室内照明
3    roomLight.style.display = lightState ? '' : 'none';
4
5    // 青ランプ
6    blueStop.style.display = lightState1 ? 'none' : '';
7
8    // 黄ランプ
9    yellowStop.style.display = lightState2 ? 'none' : '';
10
11    // 赤ランプ
12    redStop.style.display = lightState3 ? 'none' : '';
13}

そして、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<div id="wrapper">
19    <!-- 室内照明に表示させる画面 -->
20    <div id="roomLight">
21        <img src="images/woriking.png" width="320" height="380" alt="" />
22    </div>
23    <!-- 青色停止中に表示させる画面 -->
24    <div id="blueStop">
25        <img src="images/others.png" width="320" height="380" alt="" />
26    </div>
27    <!-- 黄色停止中に表示させる画面 -->
28    <div id="yellowStop">
29        <img src="images/yellowstop.png" width="320" height="380" alt="" />
30    </div>
31    <!-- 赤色停止中に表示させる画面 -->
32    <div id="redStop">
33        <img src="images/redstop.png" width="320" height="380" alt="" />
34    </div>
35</div>
36</body>
37</html>

投稿2017/02/01 08:14

turbgraphics200

総合スコア4267

bobby2128

2017/02/01 09:47

（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 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> （javaの文章） // 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"; }

bobby2128

2017/02/01 09:51

turbgraphics200 様こんにちはお世話になります。コードの提供をいただきまして誠にありがとうございました。ご提案いただきました通り、書き換えさせていただき、実行しました。私の編集の仕方が悪かったのか、ブラウザには何も表示されませんでした。ご参考までに、上記にこれまでの自分のコードを記載させていただきます。 arduinoのｃコードにつきましてはこのコメントの後投稿させていただきます。

bobby2128

2017/02/01 09:51

// ライブラリの読み込み #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; //}

bobby2128

2017/02/01 16:02

多くの貴重なアドバイスをいただき誠にありがとうございました。何度も質問を繰り返すのも失礼だと判断し、改めて以下のURLにて質問させていただきました。お手数おかけし大変恐縮ではございますが、お時間ございましたらご一読とご助言をいただけますと幸いです。ありがとうございます。https://teratail.com/questions/64228?modal=q-comp

行動規範の内容に同意します

DataElementは一つでいいのでは？

投稿2017/01/31 10:19

turbgraphics200

総合スコア4267

bobby2128

2017/01/31 11:54

turbgraphics200 様こんにちはお世話になります。早々のコメント・ご助言をいただきまして誠にありがとうございます。アドバイスをいただいたのにも関わらず、また質問してしまい大変恐縮でございますが、DataElementを一つにした際、それぞれのセンサーのデータ（値）をどのように送信すればいいのか少しわからない状態です。現状は以下のように、elem1という様にしてますが（本来そうしてもいいのかわからないまま書いてます）、より良い方法などございましたら、お教えいただけますと幸甚に存じます。 ''' // Milkcocoaへ送信するデータを作成 DataElement elem = DataElement(); DataElement elem1 = DataElement(); DataElement elem2 = DataElement(); DataElement elem3 = DataElement(); '''

turbgraphics200

2017/01/31 11:56

elem.setValue("lightState", nowSensorState); elem.setValue("lightState1", nowSensorState1); elem.setValue("lightState2", nowSensorState2); elem.setValue("lightState3", nowSensorState3); とすればいいかと

bobby2128

2017/02/01 00:20

turbgraphics200様ご親切にアドバイスをいただき誠にありがとうございました。実行したところ、以下のようにひとつにまとまって表示されました。 iym7cu033Eh17z1 2017-02-01 07:16:05 {"lightState":0,"lightState1":1,"lightState2":1,"lightState3":0} ところが、いまだにブラウザ上に指定の画像が表示されないのですが、 html,javaの文にも何か不具合があるかと予測されますが、どこが悪さをしているのかわからない状態です。何かアドバイス等ございましたら、ご助言賜れれば幸甚に存じます。

turbgraphics200

2017/02/01 00:32

JavaScriptのchangeView()において、ifで判定してますけど、判定式で比較演算子 == ではなく代入演算子 =が使用されているからでは？

bobby2128

2017/02/01 07:27

コメントとアドバイスをいただき誠にありがとうございます。 javaScriptのif文の中の判別式の修正を終え、再度トライしてみましたがうまくいきません。現状、OthersとSTOPのみ表示可能となっております。以下に示すjavaScriptのコードの一部中で、上から順に以下の箇所が特に怪しいと思っています。 ①size(4)　※size(1)にしても同様の結果でした。 ②obj1,obj2,obj3の使用　※　全てobjにしても変化ありませんでした。 ③data[0],data[1],data[2],data[3]の使用　※[]の中の数字はデータの順番を示すものと理解しております。 ④ 「var lightState2 = obj2.value.lightState2; 」文法的に適切か ⑤ changeView(lightState, lightState1, lightState2, lightState3);は関数の引数として４つの変数を送ったつもりですが文法的に適切か。自信でちょこちょこ変更し試していますがどれもうまくいきません。お手数おかけいたしますが、上記につきまして、どうかご助言をお願いいたします。 // 過去4?件のデータ取得 dataStore.stream().size(4).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); });

turbgraphics200

2017/02/01 07:37

lightState, lightState1, lightState2, lightState3がそれぞれどのようなセンサーの値なのですか？(運転中とか黄とか赤とかその他とか)

bobby2128

2017/02/01 07:48 編集

turbgraphics200　様コメントいただきありがとうございます。 lightState, lightState1, lightState2, lightState3すべて同一の光センサです。 lightState1,2,3はそれぞれ青、黄、赤ランプ、lightStateは室内照明（常に点灯中なので常にtrueの状態です。）各色のランプが点灯時、センサからの値が800を超えるので、センサの閾値は800としております。（不点灯時は１００付近）現状の条件分けは以下の文となっております。大きく変更したのは、 if文の中の条件を　||ではなく　&&にしたことです。 /** * 画面を切り替えます。 */ 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(); } }

bobby2128

2017/02/01 07:59

turbgraphics200　様たびたび申し訳ございません。以下はmilkocoa上に表示される各ランプを点灯させ閾値を超えた際に送られたデータを示したものです。これから、arduinoから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}

行動規範の内容に同意します

あなたの回答