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

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

ただいまの
回答率

90.35%

  • Arduino

    571questions

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

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

受付中

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 1,130

dengensha

score 2

前提・実現したいこと

「センサーでなんでもできる おもしろまじめ電子工作」(著者:蔵下まさゆき)の「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ページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

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

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

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

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

0

index.js の読み込みが <head> 内にあるので、index.html が DOM を構築するに動いてしまい、グローバル変数である

// 使用中画面
var occupied = document.getElementById("occupied");
// 空室画面
var vacant = document.getElementById("vacant");


は、その時点では取れていない可能性が高いです。

function lightOn(), lightOff() の中で、この二つを取得して動くようにしたらどうなりますか?

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/03/09 15:30

    返答が遅くなり、大変申し訳ございません。

    tacsheavenさんのおっしゃる通り、JavaScript内「function lightOn(), lightOff()」の中に上記、グローバル変数を挿入し、動作させてみましたが、特に変化がありませんでした。
    宜しければ、他に訂正した方が良いとされる箇所があれば、アドバイスお願いします。

    -JavaScript-
    /**
    * 使用中画面に切り替えます。
    */
    function lightOn() {
    // 使用中画面
    var occupied = document.getElementById("occupied");
    // 空室画面
    var vacant = document.getElementById("vacant");
    occupied.style.display = "block";
    vacant.style.display = "none";
    }

    /**
    * 空室画面に切り替えます。
    */
    function lightOff() {
    // 使用中画面
    var occupied = document.getElementById("occupied");
    // 空室画面
    var vacant = document.getElementById("vacant");
    occupied.style.display = "none";
    vacant.style.display = "block";
    }

    キャンセル

  • 2017/03/09 16:33

    <script src="js/index.js"></script>
    を、<head> 内ではなく <body> 内(の一番下。</body> の直前)に持ってきた場合はどうなりますか?

    キャンセル

  • 2017/03/13 17:13

    index.html内の「<script src="js/index.js"></script>」を</body> の前に入力し、動作確認を行ってみましたが、変化は見られず、「使用中」の画面のみ表示されています。
    お手数でありますが、他に訂正した方が良いと思われる箇所があれば、アドバイスお願い致します。

    -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>
    </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>
    <script defer src="js/index.js"></script>
    </body>
    </html>

    キャンセル

  • 2017/03/13 18:03

    だとするとそもそも js/index.js が読み込めてないか、index.js 内にエラーがあって実行が途中で終了しているか、を疑うところです。普通のブラウザであれば F12 で開発用ツールを起動すれば、index.js が読み込まれたか、エラーが起きてないか、をデバッグできます。

    キャンセル

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

  • ただいまの回答率 90.35%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

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

  • Arduino

    571questions

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