[ESP8266] ESP8266はどれだけ頑張れるのか？ホームセキュリティで試す　その③

これまでのあらすじ

ANDROIPHONE

[ESP8266] ESP8266はどれだけ頑張れるのか？ホームセキュリティで試す　その①

https://androiphone.uvs.jp/?p=3237

ESP8266を使ったホームセキュリティESP8266を触って半年ぐらい経過するけど単機能での検証は結構やってきた。改めて言うのもなんだけど、このESP8266は価格の割にはやっぱりスゴイなと思う。ESP32シリーズが主流になっている今、ブルートゥースがないとか性能面では劣るけど、工夫次第では今でも現役なのは間違いないと思う。Arduino、RaspPiのマイコンを触れるにあたって、当初色々やりたいことがあった。 「ソーラーパネルの電力測定」から始まる「自宅の電力消費量のモニタリング」 「ウエラブルセンサー」をもちいた「バイタルサ...

ANDROIPHONE

[ESP8266] ESP8266はどれだけ頑張れるのか？ホームセキュリティで試す　その②

https://androiphone.uvs.jp/?p=3261

前回までのお話前回までは下の1～4のセンサー・LEDの接続について書いてきました。 人感センサーによる監視 温度・湿度センサーによる室内環境のモニター 照度センサーになる室内の明度モニター 赤外線リモコンによる室内機器(TV・照明・エアコン)の操作 圧電ブザーによる警報発報 アレクサとの連携 異常時ラインへの通知機能 ブラウザによる操作その②からは5～を書いていきたいと思います。警報用圧電ブザーの接続警報を鳴らしたい場合手軽にできるのは圧電ブザー。昔「学研の科学」で圧電ブザーがついていて発振回路なんて知...

最後の鬼門、「8.ブラウザによる操作」です。

ブラウザによる操作

ユーザーインターフェイスはどうするか？もう答えは2つしかないわけで

• 専用アプリを開発
• Webベースで開発

専用アプリのほうが色々実装で来て楽しいんだけど、iOS、android、windowsとプラットフォーム毎に分けて作らないとだしプライベートで使うにはどうも気が進まないんですね。かといって、Webベースで作ろうにも・・・

ぼくCSS大嫌いなんすよ・・・

なぜって？CSSに限らず、全般的にレイアウトとかもあんま好きじゃないんです。センスがないからなんですけど。だって、SpriteKitとかUnityとか2Dエンジンでスプライトポンポン配置したほうが楽じゃないですか？(オイ)

CSSが嫌いなんで、必然的にJavaScriptも避けてきたわけなんです(笑)。ブラウザ毎に表示も動作もちょくちょく違いますし…。けど結局、葛藤した結果

Webベースのほうがコード量すくないかな？

という理由でWebベースにしました。

頑張ってこのセンスww

僕の頭は2000年ぐらいでHTMLのことは止まってます。とのあえず、トップのindex.htmlとbutton.css。button.cssといってもボタン以外のcssも入ってます。名前変えるのめんどくさかったです。というか、急速にやる気がそがれました。最後にGistからのリンクとコードを貼っておきます。

見てもらうとわかるかと思うんですが・・・ESP8266へのリクエストも XMLHttpRequest()を使ってみたりajaxを使ってみたり

どっちかにしろや！！

そう思います。JQueryのajaxのほうが使いやすそうですので統一したほうがいいです。両方知っとくためにもめんどくさいのでこのままにしときますw。これをESP8266のSPIFFに書き込んでサーバーとして開放します。

リモコン操作時に連続タップすると、Safariでは拡大表示されてしまうのでCSSに

touch-action: manipulation;

を入れたんですけど、どうも効かないです。というか、効いてたり効かなかったりです。調べたんですが、解決できませんでした。どなたか知りませんか・・・？

別記事でスケッチもだしますがポート80はfauxmoESPでアレクサが使っているので81ポートとしています。ほかのリモコン画面も、これとほぼ一緒です。これをSPIFFSに転送しておきます。SPIFFSの転送方法については下の記事を参考にしてください。

ANDROIPHONE

[ESP8266][MAX30102] パルスオキシメーターをリアルタイムでモニターする

https://androiphone.uvs.jp/?p=3099

MAX30102で作ったパルスオキシメーター以前の記事でパルスオキシメーターまで製作したけど、せっかくESP8266にやらせているんだからグラフでモニタリングできたらなと思った。そんな中こんなサイトを見つけた。Highchartsっていうグラフ描画用のライブラリを使って、BME280からリアルタイムでセンシングした温度・気圧・湿度を表示している様子。とりあえず、手元にBME280があったのでチュートリアルに沿って動かしてみたら結構良さそうなので心拍数、SPO2のリアルタイム表示をしてみようと思った。Youtubeで検索すると似たようなこと...