Q&A
###前提・実現したいこと
「センサーでなんでもできる おもしろまじめ電子工作」(著者：蔵下まさゆき)の「8-1 トイレの使用状況をリモートで確認する(Internat Of Toilet)」を参考に、光センサーにより、Wifiモジュール(ESP-WROOM-02)を設置したArduinoから測定したデータをMilkcocoa(クラウドサービス)のデータストアに送信し、パソコン(スマホ)でMilkcocoaにアクセスし、データを取得し、そのデータを元に、FC2で作成したホームページ内のファイルマネージャーにある画像をJavaScriptでWebブラウザ内の表示の切り替えをしたいと考えています。
###発生している問題・エラーメッセージ
Webブラウザで、表示の切り替えが出来ない。
(Arduinoで測定したデータがMilkcocoaのデータストアに送信されている。また、Webブラウザで「使用中」のみの画面表示は確認出来ている。)
エラーメッセージ
ありません。
###該当のソースコード
Arduino IDE
ここにご自身が実行したソースコードを書いてください
// ライブラリの読み込み
#include "ESP8266.h"
#include "Milkcocoa.h"
#include "Client_ESP8266.h"
// 転送スピード
#define SERIAL_SPEED 115200
/************************* WiFi Access Point *********************************/
// Wi-Fi SSID
#define WLAN_SSID "☆Wi-Fi SSIDの入力☆"
// Wi-Fi PASSWORD
#define WLAN_PASS "☆Wi-Fi PASSWORDの入力☆"
/************************* Your Milkcocoa Setup *********************************/
// MilkcocoaのアプリID
#define MILKCOCOA_APP_ID "☆MilkcocoaのアプリIDの入力☆"
// Data Store名
#define MILKCOCOA_DATASTORE "toilet"
/************* 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 threshold =100;
// 現在の明るさを保持
boolean nowSensorState = false;
// 切り替え前の明るさを保持する
boolean sensorState = false;
void setup() {
// パソコンとのシリアル通信のポートを開ける
Serial.begin(SERIAL_SPEED);
// Wi-Fiモジュールとのシリアル通信のポートを開ける
Serial5.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(Serial5);
// 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);
Serial.print("Sensor Value : ");
Serial.println(sensorValue);
// センサーの値と閾値を比較
nowSensorState = sensorValue > threshold;
// 明るさに変化がなければloop()関数の始めに戻る
if (sensorState && nowSensorState || !sensorState && !nowSensorState) {
return;
}
// Milkcocoaへ送信するデータを作成
DataElement elem = DataElement();
// lightというデータ名で値を追加
elem.setValue("lightState", nowSensorState);
// Milkcocoaへデータを送信
milkcocoa.push(MILKCOCOA_DATASTORE, &elem);
// 1秒処理を止める
delay(1000);
}
/*
- Milkcocoaへ光センサーの値がpushされた
*/
void milkcocoaPushDataHandler(DataElement *pelem) {
// 明るさの状態を更新
sensorState = nowSensorState;
}
###試したこと
光センサーの閾値を前後の数値に変更したり、センサーの値と閾値を比較処理で不等号の向きやイコールを入れてみたりしたが、変わらず。
###補足情報(言語/FW/ツール等のバージョンなど)
<FC2ホームページ内>
(構成)
html
・cssフォルダー/index.css+normalize.css
・imagesフォルダー/occupied.png(使用中)+vacant.png(空室)
・index.html
・jsフォルダー/index.js
(各コード)
-index.html-
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"></head> <body> <div id="wrapper"> <!-- 使用中に表示させる画面 --> <div id="occupied"> <img src="images/occupied.png" width="320" height="380" alt="" /> </div> <!-- 空室中に表示させる画面 --> <div id="vacant"> <img src="images/vacant.png" width="320" height="380" alt="" /> </div> </div> </body> </html><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="https://cdn.mlkcca.com/v0.6.0/milkcocoa.js"></script> <script defer src="js/index.js"></script>
-index.js-
// Milkcocoa App ID
var MILKCOCOA_APP_ID = ""☆MilkcocoaのアプリIDの入力☆";
// Milkcocoa Data Store
var MILKCOCOA_DATASTORE = "toilet";
// Milkcocoa
var milkcocoa = new MilkCocoa( MILKCOCOA_APP_ID+ ".mlkcca.com");
// Milkcocoa Data Store
var dataStore = milkcocoa.dataStore(MILKCOCOA_DATASTORE);
// 使用中画面
var occupied = document.getElementById("occupied");
// 空室画面
var vacant = document.getElementById("vacant");
// 過去1件のデータ取得
dataStore.stream().size(1).next(function (err, data) {
// 取得が成功したら
if (!err) {
var obj = data[0];
// 明るさの状態を取得 var lightState = obj.value.lightState; // 画面の切り替え changeView(lightState);
}
});
// ArduinoからMilkcocoaに値がpushされたら
dataStore.on("push", function (data) {
// 明るさの状態を取得
var lightState = data.value.lightState;
// 画面の切り替え
changeView(lightState);
});
/**
- 画面を切り替えます。
*/
function changeView(lightState) {
// 明るくなった
if (lightState) {
lightOn();
}
// 暗くなった
else {
lightOff();
}
}
/**
- 使用中画面に切り替えます。
*/
function lightOn() {
occupied.style.display = "block";
vacant.style.display = "none";
}
/**
- 空室画面に切り替えます。
*/
function lightOff() {
occupied.style.display = "none";
vacant.style.display = "block";
}
回答1件
0
index.js の読み込みが <head> 内にあるので、index.html が DOM を構築する前に動いてしまい、グローバル変数である
JavaScript
1// 使用中画面 2var occupied = document.getElementById("occupied"); 3// 空室画面 4var vacant = document.getElementById("vacant");
は、その時点では取れていない可能性が高いです。
function lightOn(), lightOff() の中で、この二つを取得して動くようにしたらどうなりますか？
投稿2017/03/03 06:37
総合スコア13703
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/03/09 06:30
2017/03/09 07:33
2017/03/13 08:13
2017/03/13 09:03