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

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

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

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

受付中

Webブラウザで表示する画像を条件によって、表示の切り替えをしたい。

dengensha
dengensha

総合スコア0

Arduino

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

1回答

0評価

0クリップ

3873閲覧

投稿2017/03/03 06:13

###前提・実現したいこと
「センサーでなんでもできる おもしろまじめ電子工作」(著者:蔵下まさゆき)の「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">
<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>
</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>

-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";
}

良い質問の評価を上げる

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

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

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

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

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

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

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

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

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

まだ回答がついていません

会員登録して回答してみよう

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

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

Arduino

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