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

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

ただいまの
回答率

90.53%

  • Java

    13742questions

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

  • HTML

    8913questions

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

  • C

    3657questions

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

  • Arduino

    535questions

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

  • Milkcocoa

    101questions

    Milkcocoaとは、バックエンド機能を提供するBaaSサービスの一つです。サーバを準備することなく、フロントエンドのコーディングだけでデータの保存・更新・取得、またPub/Sub通信行うことが可能です。

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

解決済

回答 2

投稿

  • 評価
  • クリップ 0
  • VIEW 667

bobby2128

score 33

前提・実現したいこと

前回質問させていただいた、「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}

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

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

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

該当のソースコード

// ライブラリの読み込み
#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 PASSWORD
#define WLAN_PASS             "e979・・・・"

/************************* Your Milkcocoa Setup *********************************/

// MilkcocoaのアプリID
#define MILKCOCOA_APP_ID      "rea・・・・・"
// Data Store名
#define MILKCOCOA_DATASTORE   "Mach・・・・・"

/************* 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 = 300;
const int threshold2 = 300;
const int threshold3 = 300;

// 現在の明るさを保持
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();
  DataElement elem1 = DataElement();
  DataElement elem2 = DataElement();
  DataElement elem3 = DataElement();

  // lightというデータ名で値を追加
  elem.setValue("lightState", nowSensorState);
  elem1.setValue("lightState1", nowSensorState1);
  elem2.setValue("lightState2", nowSensorState2);  
  elem3.setValue("lightState3", nowSensorState3);  

  // Milkcocoaへデータを送信
  milkcocoa.push(MILKCOCOA_DATASTORE, &elem);
  milkcocoa.push(MILKCOCOA_DATASTORE, &elem1);
  milkcocoa.push(MILKCOCOA_DATASTORE, &elem2);
  milkcocoa.push(MILKCOCOA_DATASTORE, &elem3);

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


// 過去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);
});

/**
 * 画面を切り替えます。
 */
function changeView(lightState, lightState1, lightState2, lightState3) {
  // 運転中
  if (lightState = true || lightState1 = true) {
    Working();
  }
  // 黄色停止中
  if (lightState = true || lightState2 = true) {
    YellowStop();
  }  
   // 赤色停止中
  if (lightState = true || 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 YellowStop() {
  working.style.display = "none";
  yellowstop.style.display = "none";
  redstop.style.display = "block";
  others.style.display = "none";
}

/**
 * その他画面に切り替えます。
 */
function YellowStop() {
  working.style.display = "none";
  yellowstop.style.display = "none";
  redstop.style.display = "none";
  others.style.display = "block";
}
<!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/woriking.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>

試したこと

有効な手段が特に浮かばず。

補足情報(言語/FW/ツール等のバージョンなど)

Arduino M0 Pro
ESP-WROOM-02
MILKCOCOA
Arduino IDE 1.8.0

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 2

checkベストアンサー

+1

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

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

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

function changeView(lightState, lightState1, lightState2, lightState3) {
    // 室内照明
    roomLight.style.display = lightState ? '' : 'none';

    // 青ランプ
    blueStop.style.display = lightState1 ? 'none' : '';

    // 黄ランプ
    yellowStop.style.display = lightState2 ? 'none' : '';

    // 赤ランプ
    redStop.style.display = lightState3 ? 'none' : '';
}

そして、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="roomLight">
        <img src="images/woriking.png" width="320" height="380" alt="" />
    </div>
    <!-- 青色停止中に表示させる画面 -->
    <div id="blueStop">
        <img src="images/others.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>
</body>
</html>

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2017/02/01 18: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";
    }

    キャンセル

  • 2017/02/01 18:51

    turbgraphics200 様

    こんにちはお世話になります。
    コードの提供をいただきまして誠にありがとうございました。
    ご提案いただきました通り、書き換えさせていただき、実行しました。
    私の編集の仕方が悪かったのか、ブラウザには何も表示されませんでした。

    ご参考までに、上記にこれまでの自分のコードを記載させていただきます。
    arduinoのcコードにつきましてはこのコメントの後投稿させていただきます。

    キャンセル

  • 2017/02/01 18: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;
    //}

    キャンセル

  • 2017/02/02 01:02

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

    キャンセル

+1

DataElementは一つでいいのでは?

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2017/01/31 20:54

    turbgraphics200 様

    こんにちはお世話になります。早々のコメント・ご助言をいただきまして誠にありがとうございます。

    アドバイスをいただいたのにも関わらず、また質問してしまい大変恐縮でございますが、DataElementを一つにした際、それぞれのセンサーのデータ(値)をどのように送信すればいいのか少しわからない状態です。
    現状は以下のように、elem1という様にしてますが(本来そうしてもいいのかわからないまま書いてます)、より良い方法などございましたら、お教えいただけますと幸甚に存じます。

    '''
    // Milkcocoaへ送信するデータを作成
    DataElement elem = DataElement();
    DataElement elem1 = DataElement();
    DataElement elem2 = DataElement();
    DataElement elem3 = DataElement();
    '''

    キャンセル

  • 2017/01/31 20:56

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

    キャンセル

  • 2017/02/01 09:20

    turbgraphics200様
    ご親切にアドバイスをいただき誠にありがとうございました。
    実行したところ、以下のようにひとつにまとまって表示されました。

    iym7cu033Eh17z1 2017-02-01 07:16:05 {"lightState":0,"lightState1":1,"lightState2":1,"lightState3":0}

    ところが、いまだにブラウザ上に指定の画像が表示されないのですが、
    html,javaの文にも何か不具合があるかと予測されますが、どこが悪さをしているのかわからない状態です。
    何かアドバイス等ございましたら、ご助言賜れれば幸甚に存じます。

    キャンセル

  • 2017/02/01 09:32

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

    キャンセル

  • 2017/02/01 16: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つの変数を送ったつもりですが文法的に適切か。

    自信でちょこちょこ変更し試していますがどれもうまくいきません。
    お手数おかけいたしますが、上記につきまして、どうかご助言をお願いいたします。

    // 過去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);
    });

    キャンセル

  • 2017/02/01 16:37

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

    キャンセル

  • 2017/02/01 16:43 編集

    turbgraphics200 様
    コメントいただきありがとうございます。
    lightState, lightState1, lightState2, lightState3すべて同一の光センサです。
    lightState1,2,3はそれぞれ青、黄、赤ランプ、lightStateは室内照明(常に点灯中なので常にtrueの状態です。)
    各色のランプが点灯時、センサからの値が800を超えるので、センサの閾値は800としております。(不点灯時は100付近)


    現状の条件分けは以下の文となっております。大きく変更したのは、
    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();
    }
    }

    キャンセル

  • 2017/02/01 16: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}

    キャンセル

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

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

関連した質問

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

  • Java

    13742questions

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

  • HTML

    8913questions

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

  • C

    3657questions

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

  • Arduino

    535questions

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

  • Milkcocoa

    101questions

    Milkcocoaとは、バックエンド機能を提供するBaaSサービスの一つです。サーバを準備することなく、フロントエンドのコーディングだけでデータの保存・更新・取得、またPub/Sub通信行うことが可能です。