M5Stack×Moddable入門その2.5~ディスプレイが色反転していた件について [20200901追記]解決した
そろそろPiuでUIで書くかー、とdocumentを見ながら動かしていたら、指定した色通りに表示されていないことがわかった。
UI書き始めようとして初めて色が反転していることに気がついた。。 pic.twitter.com/oXX3cCztw3
— STC (@stc1988) 2020年7月6日
今までLabelに1行の文字列だけ表示させていたので、白黒が判定したことさえ気づいていなかった。 意味分かんないな、とググっていたところ、M5StackのディスプレイはILI9341 から ILI9342Cに変わっていた。
と ILI9342C のデータシートを見てみると、色反転に関するレジスタコマンドは、 Display Inversion OFF ( 0x20 ) Display Inversion ON ( 0x21 ) です。
とあり、どうも0x21
に対してコマンドを送ってやる必要がありそう。
また、新旧のディスプレイに対してうまくやっているというコードもM5stack本家のドライバに見つかり、初期化処理でコマンドを叩くという解決策で合っていそう。
https://github.com/m5stack/M5Stack/blob/master/src/utility/In_eSPI.cpp
#ifdef M5STACK if (lcd_version) writecommand(TFT_INVON); // TFT_INVONが0x21 #endif
肝心のModdable対応については、$(MODULES)/drivers/ili9341/modIli9341.c
のドライバにて初期化処理っぽいところに色反転のコマンドを追加した。
void ili9341Init(spiDisplay sd) { // (省略...) ili9341Command(sd, 0x21, NULL, 0); // この行を追加 sd->firstFrame = true; }
解決策合ってるか分からんが解決はした。
ブログ用に撮り直した pic.twitter.com/AG1ZqEuVCr
— STC (@stc1988) 2020年7月6日
manifest.jsonに書くii9341のdefines当たりで切り替えるか、本家みたいに動的に切り替えれるとよさそうが、現状の力では及ばずhot-fixです。
Moddalbe始めてからC言語ばっかり読んでるな。。。
(2020/07/09 追記) PiuでUIを書き始めて気づいたのだが、どうもシミュレータで表示される色と実機ディスプレイで見える色がだいぶ違う。 下記はorange(#ffa500)で塗りつぶした結果。
バックライトが明るすぎるのかな、全然色ちゃうねんけど pic.twitter.com/1PZlnKlRhZ
— STC (@stc1988) 2020年7月8日
全般的に明るく表示されている気がする。
Mobbableのディスプレイドライバの問題が切り分けるためにArudionoIDEでM5stack公式のライブラリを使ってみたが結果は同じだった。
[20200901追記] ModdableのGithubでissuesを挙げたところ、m5stack用のディスプレイクラスのラッパーとディスプレイクラスにコマンドを送れるように拡張してもらったので、修正なしにうまく表示されるようになりました。
M5Stack×Moddable入門その2~I2Cでバッテリー情報を読み取る
センサー情報とかを取得する練習としてバッテリー残量をとってみることにした。起動していてイマイチ残量がわからないというのもあったので。
IP5306
M5stackにはIP5306という電源制御モジュールが搭載されており、schematicを読んでいるとI2C通信ができるようにカスタマイズされたものが搭載されているようだ。
Power Management IC (IP5306) is customized I2C edition,its I2C address is 0x75. Clickhere to check IP5306 datasheet
ということで、この0x75
アドレスに対してIC2通信をしてみる。
レジスタの情報とかはリンクされているデータシートを読んでみることにしたが中国語だった。
中国語混じりのデータシート意味分からん。
— STC (@stc1988) 2020年7月2日
テクノロジーで勝利している pic.twitter.com/QwFvg4SlKV
— STC (@stc1988) 2020年7月3日
どうもバッテリー残量を取得できるレジスタ情報の記載がなく困っていたが、色々と紆余曲折もありつつ最終的にはM5stack公式のリポジトリにIP5306にアクセスするコードがあったので、これを参考にすることにした。
M5Stack/Power.cpp at master · m5stack/M5Stack · GitHub
結局は自分でデータシートと格闘するよりも既存のCやC++のデバドラ探してきて移植したほうが楽そうである印象。
Moddableとしての実装
I2C通信するドライバを作成するにあたっては、他のModdableのリポジトリにあるドライバのコードを見てながら真似てみた結果、I2Cクラスを拡張して、IP5306と通信して情報取得するドライバを作ることができた。
I2C通信先のアドレスとレジスタのアドレスおよび読み取った値のビットマスク方法が分かっていれば、特に難しいことはなさそう。
ということで3つのボタンにそれぞれ、充電中か否か / フル充電か否か / バッテリー残量 を取得する処理を割り当てて表示するものができあがった。
フル充電状態が何故か取得できんけど、充電中かどうかと残量に関しては取れるようになった。 pic.twitter.com/tXnU7wZFO4
— STC (@stc1988) 2020年7月3日
フル充電状態はなぜか取れないけど、残量が分かればまぁいいでしょう。
おまけ:起動音を消す
起動時の音が結構うるさい。
%MODDABLE%/build/devices/esp32/targets/m5stack/setup-target.js
に機器固有の初期処理が書いてあるので、鳴動処理をコメントアウトすることで解消された
また、このファイル中で、ディスプレイ下に配置された3つのボタンをピン番号を指定してglobal.button
として登録されている
M5Stack×Moddable入門その1~M5stackにサンプルを焼いてみる
M5stack到着
my new gear... pic.twitter.com/xeKiLFlhrc
— STC (@stc1988) 2020年7月1日
今回買ったのは
M5StackGray。Amazonでスイッチサイエンスから購入。
環境構築
焼きこむための環境構築を進めていく。
やったことはざっくり以下通り
- ドライバをインストール
- ツールチェイン類をインストール
- ESP-IDFをリポジトリからクローン
- M5stackをホストPCに接続
- Pathを通す
- 環境変数
UPLOAD_PORT
とESP32_CMAKE
を設定 - サンプルを起動
cd %MODDABLE%\examples\piu\balls mcconfig -d -m -p esp32/m5stack
pythonのパッケージが古いとか言われて失敗したので、エラーメッセージに従い以下を実行してパッケージインストール よくよく見るとTroubleshootingにも書いてた。
python -m pip install --user -r %IDF_PATH%\requirements.txt
焼き込み成功!!
— STC (@stc1988) 2020年7月1日
ボールが動きました。 pic.twitter.com/kchuPlwvpQ
おまけ:manifest を追っかける
書き方自体はここ参照
Eamplesとかを見る限りは、$(MODDABLE)/examples/manifest_base.json
とかを使いまわすのがよさそう。
M5Stack向けにビルド(-p esp32/m5stack
)する構成を諸々端折って追っかけると、
$(MODDABLE)/examples/manifest_base.json ┗$(BUILD)/devices/esp32/manifest.json ┗$(BUILD)/devices/esp32/targets/m5stack/manifest.json // M5stack自体の設定 ┗$(MODDABLE)/modules/drivers/ili9341/manifest.json // ILI9341液晶の設定
となっているので、わざわざピン番号とか機器固有の設定を調べて書く必要はなさそう。
M5Stack×Moddable入門その0~環境構築・シミュレータ起動
マイコンでの電子工作には興味があったものの、C/C++を書くことに苦手意識がありなかなか手が出せていなかったのですが、JavaScriptでも書けることが分かってきたため、この度M5Stack×ModdableでJavasSriptを使った電子工作に挑戦してみたい。
Moddable 選定について
まず今回使用するModdable以外にもobnizやJohnny-Fiveといったプラットフォームを使うことでJavaScriptによるマイコン制御ができるのですが、
obniz
一意のobnizライセンスが付与されたマイコンをインターネット接続することにより、クラウド上よりプログラムの実行が可能。 クラウド経由の実行となるため、環境構築の手間は最も手軽に思われる一方、実行に当たってはマイコンがインターネット接続されていることが前提となってしまうため、マイコン単体で動いてくれないことに微妙さを感じる
Johnny-Five
npmインストールするだけのため、これも環境構築の手間は手軽そうであるが、プログラム実行に当たってはホストマシンと接続しないといけないため、これもまたマイコン単体で動いてくれないことに微妙さを感じる
Modabble
これまでの2つと違ってマイコン単体でも動きそうだし、シミュレータやデバッガもありそうなので、なんとかなりそう。 日本語の情報は少なさそうだが、前述2つも少ないので、頑張って公式のドキュメントやサンプル見るか、という機運
環境構築
公式のGetting Startedを見て進める。
moddable/Moddable SDK - Getting Started.md at public · Moddable-OpenSource/moddable · GitHub
今回はWinows10 HomeをホストPCとして進めました。 やったことは大まかに以下通り。特に嵌りどころも無かった。
- Visual Studio 2019 (Community Editionでよし)をインストール。その時C++のよるデスクトップ開発もインストール。
- Moddableのリポジトリをクローン
- 上記クローン先にパスを通す
- VSのコマンドラインツールでビルドする
- シミュレータが動くようになるので、サンプルのhelloworldを動かす(立ち上がるがコンソールのほうにheloworldと出るだけ。。あまりに面白みがないので"examples\piu\balls"を動かした
Moddableの環境構築でシミュレータ起動まで行ったので、あとはドキュメントでも見てM5Stackの到着を待つ pic.twitter.com/WQSvayxRpd
— STC (@stc1988) 2020年6月28日
次回はM5Stack到着後に。
(2020/06/28 23:00追記)
mcconfig
ビルドやプログラム実行時に打つmcconfig
コマンドについては以下に詳細が記載されているので、軽く読んでおくと何をしようとしてるか分かるので安心。
上記にも記載されているが、$MODDABLE/build
に生成物が格納される。
XSリンカー?がmakeファイルやCファイルを吐いて、コンパイルされていそう
$ ls makefile mc.exp mc.resources.c mc.xs.c modInstrumentation.c.o modTime.c.o modTimer.c.xsi Resource.c.o screen.c.o timer.c.o mc.config.js mc.format.h mc.resources.o mc.xs.h modInstrumentation.c.xsi modTime.c.xsi modTimer.h.xsi Resource.c.xsi screen.c.xsi timer.c.xsi mc.defines.h mc.lib mc.rotation.h mc.xs.o modInstrumentation.h.xsi modTimer.c.o modules/ resources/ screen.h.xsi
USBバーコードリーダーでバーコードを文字入力として受けれた
表題の通りの結果が得られたので簡単に記録に残します、
そもそもUSBバーコードリーダーを買った動機
会社でのパソコンやモニタといった資産には、資産番号と共に資産管理用のバーコードが付与されているのですが、日常の資産棚卸の際には、目視で資産番号を確認し、管理エクセルから探すといったことをしなればならなく、とても面倒に感じていました。
その時にUSBのバーコードリーダってあるけど、それで読み取った結果をシュッと扱いことができれば非常に楽になるのでは?と思い調べ始めたところ、「USBバーコードリーダーは外部キーボード扱いとして認識され、読み取り結果がキー入力として受け取れる」ということがわかりました。 つまり、USBとして接続すれば何も特別な設定も必要もなく認識され、また、読み取った結果も専用のソフトやSDKも必要がなくキー入力として受け取れるので、非常に扱いやすいデバイスとなりそうです。
早速買ってみた
Amazonで調べた見たろころ、1次元のバーコードを読み取れるものであれば2000円台で買うことができそうであることが分かった。 実際に接続したらキーボードとして認識されるかどうかが商品情報からはよくわからなかったが、レビューの記載からそれっぽく振舞いそうという不確かな情報を基に買ったのが以下。
届いたので使ってみた
外見はかなりオモチャ感がある印象ですが、さっそく繋いで、テキストエディタを開きバーコードを読み取らせてみました。
おー!バーコード+改行が挿入される。 pic.twitter.com/Y29IX0BBfC
— STC (@stc1988) 2019年12月12日
期待通りに読み取り結果をキー入力として受け取れました。 また、読み取り後に改行が付与されるので、連続して読み取った場合にも1行ずつ入力されることとになります。 冒頭の動機として書いたエクセルのようなスプレッドシートとの相性も良さそうです。
あと、これは試していないのですが、バーコードリーダ自体の設定は、付属する冊子に設定用のバーコードがあるので、それを読み取ることで設定を変えることができます。そのため、やはり専用のソフトとかは不要になります。
読み取ったバーコードから書籍情報を取得するやつを書いた
前述までの通り、当初の目標である管理エクセルでいい感じに使用できそうなことが分かった。 ここでは、自作のプログラムから扱う方法のサンプルを書いてみた。
結果が分かりやすいく、かつ、手軽に実装できそうなものとして、Javascript(+Vue.js)を使ってみることにした。 といってもキー入力を受け取るだけなので、テキストボックスで読み取り結果を文字として受け取り、それをトリガーにするだけである。
今回は以下openBDというAPIを使って、読み取ったバーコード番号(ISBN)から書籍情報を得るというものを書いた openbd.jp
<html> <head> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <input type="text" autofocus v-model="input" v-on:keyup.enter="onKeyupEnter"> <div>バーコード:{{barcode}}</div> <hr> <div>タイトル:{{title}}</div> <hr> <div>著者:{{author}}</div> <hr> <img v-bind:src="cover"> </div> </body> <script type="text/javascript"> new Vue({ el: "#app", data: { input: "", barcode: "", title: "", author: "", cover: "", }, methods: { onKeyupEnter: function() { fetch("https://api.openbd.jp/v1/get?isbn=" + this.input) .then((response) => { return response.json(); }) .then((data) => { if( data[0] === null ) { this.input = ""; this.barcode = "エラー"; return; } this.barcode = data[0].summary.isbn; this.title = data[0].summary.title; this.author = data[0].summary.author; this.cover = data[0].summary.cover; this.input = ""; }) } } }) </script> </html>
大まかにやっていることは以下通り、 1. テキストボックスにフォーカス時に、バーコードを読み取ると結果がテキストボックスに入力される 2. 上記入力の末尾に改行を受け取るので、EnterキーイベントをトリガーにopenBDのAPIを叩く 3. 叩いた結果から得られた書籍情報を画面に表示する
実際に動かしてみるとサクッと動きました。
ISBNから書籍情報取得できるAPIを叩いて表示するのが作れた。
— STC (@stc1988) 2019年12月12日
キーイベント処理するだけなので、vueを使って5分ぐらい。 pic.twitter.com/nVkqbhiZSd
終わりに
今時ならライブラリ等を駆使して、カメラから画像からバーコード認識させるところでしょうが、キー入力は非常に慣れ親しんだインターフェースで、容易に扱うことができました。
また、バーコード自体を生成するライブラリも巷には存在しますが、エクセルでも生成することができます(具体的な方法は「絵エクセル バーコード生成」とかで調べてください)ので、使用できるソフトウェア・ツール類が制限されている環境でもバーコードは扱いやすい入出力インターフェースという認識ができました。
Scrum Boot Camp OSAKA in June 2018に参加しました
イベントの大まかな流れ
- アイスブレイク・イントロダクション
- スクラム概要説明
- スクラムイベント(スプリント、プロダクトバックログ作成・見積もり、振り返り)それぞれを体験するワークショップ
- QAタイム・クロージング
- ビアバッシュ
という流れで朝9:30-夜20:00ぐらいまでの長丁場でした。 本記事では、後述しますが、体験および気づきが重要だと感じたので、個々のワークショップ詳細については、本記事では触れません。
良かったこと
- 講師陣が実際に現場でスクラムを実践している方々というのもあって、説明の仕方やワークショップのファシリテートも上手いなと感じた
- ランチやビアバッシュ代込みとは言え、コミュニティイベントとしては少々高額な参加費であったが、参加者も本当にスクラムを学びに来ている人が多く、熱量も大きかった
- ワークショップを通じて、実際にスクラムイベントを体験できたことが一番大きかった。座学や自分の少ない経験から理解しているつもりではあったが、実際に人を集めチームを組んでやってみると、思いの外上手くいかないこともあり、気付きや学びが多かった。
- カンバン形式のQAタイムがあり、ビアバッシュまでに全部のQAを解決させる取り組みは良かった。中々聞きたい人が捕まらなかったり、人は酒を飲むとテキトーなことを言いがちなので。
請負とスクラム
QAタイムを通じて、実際に自分がもやもやし感じていたところをぶつけさせてもらった。
明確な成果物を定義できないので、契約としてはふわふわな納品物でOKとする、というか自分の現場もそうしていた。 しかし、受託脳としては、そういった場合に顧客に提供するものとしては人月としての労働量になるのでは、という謎の力が働いていた。 結果として、稼働時間を加味したベロシティや見積もりの算出となっていき、顧客向けの数字イジりにパワーを割く羽目になったし、それなりの見通しの精度を実現できた一方で、開発現場も稼働の呪縛により疲弊もしていた。
人によっては雰囲気伝わっていたし、ピンときてない人もいるという反応であり、こんな悩みに時間を割いてスマンなという気持ちであった。
色々なアドバイスや意見を頂いた結果、POとなる顧客には、スクラムおよび現場の実情に対する理解を得てもらいつつ、現場がシンドくならないような進め方を模索しないといけないな、という納得に落ち着いた。 具体的な解決に落ちてないやん、というツッコミもあるが、現状はスクラムもしていないでの、共感を得てもらったこと、考え方を示してもらっただけでも十分かと思っています。
おわりに
自身が今後スクラム開発に関わる予定は未定だが、改めてスクラムに対する考えが整理でき、また、今の現場にも何かフィードバックができることがないか考えてみようという気持ちになれた。
参加者はソフトウェア開発関係者が多かったようですが、特に開発の知識は必要もなく、開発以外の現場にも十分に適用できることだと思うので、次回開催されていればオススメです。
ビアバッシュ後の懇親会まで楽しむことができ、充実した一日となり、スタッフの方々ありがとうございました。
今回のイベント後以降も困ったことがあれば隔週開催のスクラム道関西オープンジャムに来てくれ、だそうです。