スマホ側 ( Android , iOS )の HTML プログラム作成
テキストエディタで、以下の様に入力して、html形式で保存しください。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='content-type' content='text/html; charset=UTF-8'>
<meta name='viewport' content='width=210, initial-scale=1.3, user-scalable=yes'>
<title>Firebase Server-Sent Events Test</title>
<!-- by Firebase Project Overview (Use Web) -->
<script src="https://www.gstatic.com/firebasejs/5.5.0/firebase.js"></script>
<script>
// Initialize Firebase
var config = {
apiKey: "xxxxxxxxxxxxxxxxxxxx",
authDomain: "xxxxxx.firebaseapp.com",
databaseURL: "https://xxxxxx.firebaseio.com",
projectId: "xxxxxx",
storageBucket: "xxxxxx.appspot.com",
messagingSenderId: "xxxxxxxxxx"
};
firebase.initializeApp(config);
</script>
<!-- -------------------------------- -->
<script type="text/javascript">
var user_path = "test_user1";
function signIn() {
let mail_str = document.getElementById("mail_txt_id").value;
let pass_str = document.getElementById("pass_txt_id").value;
document.getElementById("firebase_status_id").textContent = "Sign In wait...";
firebase.auth().signInWithEmailAndPassword(mail_str, pass_str).then(function() {
document.getElementById("firebase_status_id").textContent = "Sign In Success!";
//2秒待ってからページを再ロードすることによって、ストリーミング受信するようになる。
setTimeout("location.reload()",2000);
}).catch(function(error) {
let errorCode = error.code;
let errorMessage = error.message;
document.getElementById("firebase_status_id").textContent = errorMessage;
setTimeout("location.reload()",5000);
});
}
//text データの読み込み
firebase.database().ref( user_path + "/text" ).on('value', function(snapshot) {
document.getElementById("firebase_text_id").textContent = snapshot.val();
document.getElementById("firebase_status_id").textContent = "data received";
});
//color データの読み込み
firebase.database().ref( user_path + "/color" ).on('value', function(snapshot) {
let elements = document.getElementById("firebase_color_id");
elements.style.backgroundColor = snapshot.val();
elements.textContent = "color: " + snapshot.val();
});
//textデータの書き込み
function writeUserTextData( t_id ) {
let value_str = document.getElementById(t_id).value;
firebase.database().ref( user_path ).update({ //.on の場合は子ノードも全て上書き
text : value_str
});
}
//colorデータの書き込み
function writeUserColorData( color_str ) {
firebase.database().ref( user_path ).update({
color : color_str
});
}
//speedデータの書き込み
function writeUserSpeedData( speed_value ) {
firebase.database().ref( user_path ).update({
speed : speed_value
});
}
function signOut() {
firebase.auth().signOut().then(function() {
// Sign-out successful.
document.getElementById("firebase_text_id").textContent = "Sign OUT";
setTimeout("location.reload()",2000);
}).catch(function(error) {
document.getElementById("firebase_text_id").textContent = "Sign OUT error";
});
}
</script>
</head>
<body style="width:210px; background-color:#000; color:#FFF">
<FONT size='1'>
Firebase Realtime Database Test
<br>
Connection Status:
<div id="firebase_status_id" style="border-style:solid; border-width:1px; padding:2px ">
Cannot Connection.
</div>
</FONT>
<p>
<div id="firebase_text_id" style="background-color:#225; border-style:inset; padding:5px ">
text:???
</div>
text:
<input type="text" id="text_write_id" value="Enter text"><br>
<input type="button" value="Firebase Write" onclick="writeUserTextData('text_write_id');">
</p>
<p>
<div id="firebase_color_id" style="border-style:outset; padding:5px;">
color:???
</div>
<input type="color" value="#FFFFFF" id="color_picker_id" onchange="writeUserColorData(this.value);">
<input type="button" id="black_id" value="black" onclick="writeUserColorData('#000000');"><br>
<input type="button" id="red_id" value="red" onclick="writeUserColorData('#FF0000');">
<input type="button" id="green_id" value="green" onclick="writeUserColorData('#00FF00');">
<input type="button" id="blue_id" value="blue" onclick="writeUserColorData('#0000FF');">
</p>
<p>
<input type="button" id="speed0_id" value="STOP" onclick="writeUserSpeedData('100ms');"><br>
<input type="button" id="speed1_id" value="SLOW" onclick="writeUserSpeedData('050ms');">
<input type="button" id="speed2_id" value="MIDIUM" onclick="writeUserSpeedData('010ms');">
<input type="button" id="speed3_id" value="FAST" onclick="writeUserSpeedData('000ms');">
</p>
<p style="text-align:start; border-style:double; border-color:#FFF; padding:5px;">
mail:<br>
<input type="textbox" id="mail_txt_id" value=''><br>
password:<br>
<input type="password" id="pass_txt_id" value=''><br>
<input type="button" value="sign in" onClick="signIn()">
<input type="button" value="sign out" onclick="signOut();" style="background-color:#000; color:#FFF;">
</p>
</body>
</html>
【ザッと解説】
●9-21行：
前回のこちらの記事を参照して、apiKey 関連のJavaScript スニペット(断片)を貼り付けてください。
●111行：
ブラウザで Color Picker を表示させるのは、このタグです。
最初に紹介した動画をみていただければ分かると思うのですが、iOS の場合だけは数値テキスト入力となってしまいます。
これに関しては、Android や Windows のブラウザが一枚上手ですね。
また、この HTMLファイルをスマホに転送して動かす方法は、前回のこちらの記事を参照してください。
M5Stack コンパイル書き込み実行
では、M5Stack をコンパイル書き込み実行させてみてください。
最初に紹介した動画の様に動作すれば良いです。
※私の自作ライブラリでコンパイルエラー
display_bme280_i2c.h: fatal error: bme280.h: No such file or directory
が出る場合、インストールした私の自作ライブラリのSensorフォルダの中のファイルを削除してください。
Windows 10 の場合、以下のパスになります。
display_bme280_i2c.h: fatal error: bme280.h: No such file or directory
が出る場合、インストールした私の自作ライブラリのSensorフォルダの中のファイルを削除してください。
Windows 10 の場合、以下のパスになります。
C:\Users\__user_name__\Documents\Arduino\libraries\ESP32_mgo_tec-master\src\ESP32_mgo_tec_bV1\Sensor
BME280ライブラリを使っている場合は、Sensorフォルダ内の以下の２つのファイルのみの削除でＯＫです。
display_bme680_i2c.h
display_bme680_i2c.cpp
また、BME680ライブラリを使っている場合は、以下の２つのファイル削除だけでＯＫです。
display_bme280_i2c.h
display_bme280_i2c.cpp
両方使わない場合は Sensor フォルダごと削除してからコンパイルしてください。
(2018/09/24)
ボタンの瞬時押しは Text 切替えで、長押しは色変更です。
ボタンを押すと下図の様なメッセージが出ます。
このメッセージが消えないと次の操作が行えません。
因みに、M5Stack側では速度変更できませんが、スマホ側でスクロールをストップさせて、文字列を変更すると、再起動してしまう場合があります。
その辺のエラー処理はあまり詰めていません。
また、Arduino IDE の「ツール」の「Core Debug level」を verbose にすると、詳細なログが見られます。
スマホ側の操作
Android 8.0 で動作確認しています。
Android および Windows の場合、ブラウザは必ず Google Chrome を使ってください。
基本的な操作は前回の記事と変わりありません。
ただ、Color Picker ボタンと、スクロール速度変更ボタンが追加になっています。
登録したユーザーのメールアドレスとパスワードを入力してから操作してください。
Color Picker ボタンは、 Android の場合は下図のようになります。
Windows PCの場合は下図のようにもっと細かく設定できます。
iOS の場合は先にも紹介したように HTML カラーコードをテキスト入力するという、ちょっと面倒なものです。
では、次の項では、ESP32-DevKitC ( ESP32-WROOM-32 開発ボード ) と LCD ILI9341 モジュールを使った場合を説明します。
コメント
mgo-tec 様
待望の新作発表、早速試させていただきました。
コンパイル書き込みをすると、
未使用 : C:\Users*********\ESP32_mgo_tec-master\src/ESP32_mgo_tec_bV1/Sensor/display_bme680_i2c.h:44:64:fatal error: bme280.h: No such file or directry
となります。
このプログラムでは ESP32_mgo_tec_bV1/Sensor は不要と思い削除し、再コンパイル書き込みをすると、書き込みは可能となりますが、「 WiFi conenecting…」「 SSE Connecting 」の表示のままです。
A ボタンを押すと、「 Patch Connecting 」「 SSE Connecting 」という表示に変わり、その後「 Patch Failed 」「 SSE Connectinng 」となります。
他の方のコメントを参考にと出るのを待っていたのですが、待ちきれず投稿した次第です。
アドバイスの程よろしくお願い致します。
juchangさん
いつも検証いただき、ありがとうございます。
私は、全く気付きませんでした。
BOSCH bme680.h, bme280.h をインストールしていたので、そういうエラーが出なかったのです。
display_bme280_i2c.h ファイル等で、extern していたことが原因です。
応急処置として、juchangさんのやったように、Sensorフォルダごと削除してください。
コンパイルする時に、不要なヘッダファイルまでインクルードされてしまうとは、全然知らずにいました。
とっても勉強になりました。
只今修正中ですので、しばらくそのままご利用ください。
また、「 WiFi conenecting…」「 SSE Connecting 」の表示のままというのは、Firebase Console で事前にデータを入力していないとそういう状態になるかも知れません。
今調査中ですので、分かりましたらお知らせしたいと思います。
度々の不手際、申し訳ございません。
やっぱり、まだまだ素人だなぁと実感しています。
m(_ _)m
juchangさん
お待たせしました。
こちらでいろいろ検証したところ、コンパイルエラーが出た対象ファイルを削除していただくことが最善と思います。
display_bme280_i2c.h エラーが出た場合、
display_bme280_i2c.h
display_bme280_i2c.cpp
の２つのファイルを削除する。
display_bme680_i2c.h エラーが出た場合、
display_bme680_i2c.h
display_bme680_i2c.cpp
を削除していただく。
あるいは、Sensorフォルダごと削除していただくことです。
記事も修正しました。
これは、ホントに気付かなかったです。
当方ではすべてのファイルがインストールされているので、ファイルが無い場合にエラーが出るとは考えも及びませんでした。
コンパイラについて、もっと勉強しなきゃと思いました。
ところで、WiFi conenecting…」「 SSE Connecting 」の表示のままという現象は当方では確認できませんでした。
原因は分からず、申し訳ございません。
m(_ _)m
mgo-tec 様
M5stack で動作確認致しました。
プログラム21行目のデータベースシークレットキーの入力ミスが原因でした。
まだ細かい動作確認はできていませんが取り急ぎご報告まで。
ありがとうございました。
juchangさん
動いて良かったですね。
(^^)
それにしても今回は私自身もとっても勉強になりました。
これからのライブラリ作成に良い教材となりました。
こちらこそ、いつもありがとうございました。
m(_ _)m
mgo-tec 様
LCD ILI9341 モジュールを試してみました。
手持ちの HiLetgo 2.8″TFT LCD では、SD カードスロットが使えず、micro SD カードスロットを別置きとし、A、B、C ボタンも設置しました。
プログラムを実行すると、M5stack と同じ動作をすることを確認致しました。
今回、M5stack と同じPin ナンバーが使えるのが大変ありがたいです。
この、「M5stack もどき」でこれまでの M5stack のプログラムを動かすのが楽しみです。
これからの新作を期待しております。
juchangさん
いつもコメントありがとうございます。
無事動いて良かったです。
2.8″ TFT は画面大きそうで、良さそうですね。
私も、他にESP32開発ボードが数枚あり、わりと重宝しております。
ところで、Yahoo記事を長時間取得し続けていると、取得失敗する新たな原因を本日追記しました。
ESP32 および M5Stack で数時間後に Web 記事取得失敗する問題について
client.connect 関数の使い方を変えれば、殆ど失敗は無くなりました。
自分のライブラリも修正して次回の記事ではバージョンアップします。
ということで、しばらくお待ちくださいませ。
お世話になります。
超初心者的質問なのですが、mgo_tec_esp32_m5stack_firebase.hの
リンク先を教えてください。
隅から隅まで見たつもりでありますが見当たりません。
マッキーさん
お久しぶりです。
記事をご覧いただき、ありがとうございます。
この記事中の以下の項目
自作ライブラリのインストール
に GitHub のリンク先が出ていますが、これではないのでしょうか？
この中に mgo_tec_esp32_m5stack_firebase.h があります。
おはようございます。
githubのリンク先には、ESP32_mgo_tec-masterはあるのですが、mgo_tec_esp32_m5stack_firebase.hがどうしても見つかりません。
ためしに、ESP32_mgo_tec-masterをインクルードしてコンパイルしても
エラーがでます。途方に暮れています。
Firebaseの実験がしたくてうずうずしています。
私も６９歳になってぼけてきたのかと自虐しています。
あれ？
おかしいですね。
私の環境では問題無く動いています。
GitHub から ZIPファイルをダウンロードして、ZIP形式のまま Arduino IDE にインストールされていますか？
GitHubにある ZIP形式ライブラリ のインストール方法 ( Arduino IDE )
私の環境は、Windows 10
Arduino IDE 1.8.6
Arduino core for the ESP32 stable 1.0.0
つい先ほど試しても問題ありませんでした。
これでもダメなら、GitHubのページから辿っていくと、srcの中に mgo_tec_esp32_m5stack_firebase.h があります。
そのテキストをコピペして、テキストエディタで保存してみてください。
また、ESP32_mgo_tec beta ver 1.0.40 では、他にもいくつかアップデートしたファイルがありますので、GitHubのページにあるのと同じ構成でテキストエディタでコピペしてファイルを作ってください。
ZIP形式インストールが上手くいっていないのでしょうか？
それとも、ダウンロードした際にウィルスソフトで弾かれている可能性もありますね。
謎ですね。
他のライブラリは問題無くインストールできますか？
お騒がせしました。
見つかりました。ｗ
歳のせいですね。
お！
見つかって良かったですね。
私もホッとしました。(^^)