M5STACK(その9)

ちょっとだけM5Stackにねこあつめの猫っぽいイラストを表示させようと思ったら、えらい時間がかかってしまった。

わざわざBMPにコンバートしたもんだから、しなくていい苦労をした。

(あいかわらず懲りてない)

 

イラストを準備し、以前OELDに表示させた時に使ったコンバータ(の、ホームページ)でやってみたんだけど、やっぱりうまく行かなかった。

なんかそんな気がしてたので、M5StackでBMPを表示させるための方法を検索。

知りたいのは画像をコンバートするためのツール。

 

しかし調べたらフォーラムにそのまんまの問い合わせが載っていて、すぐに判明。

 https://github.com/m5stack/M5Stack/issues/28

さっそくLCD image converterをダウンロード。でもWindows用だったので、わざわざ仮想環境からコンバートした。

その前に設定には注意、

Optionから、Imageのタブのとこ。書き込み通りにカスタム。

できたcファイルをテキストエディタで開いて編集。これがまた何度か引っかかった。

 

  • #include <stdint.h>は残しておく
  • 「Static」という単語は削除
  • コード内の画像の名前が「image_data_(画像の名前)」になっているので、必要なら修正
  • 一番下の方にある「const tImage」で始まる行は削除

 

自分はコメント部分は邪魔なので削除してました。

これでArduino IDEで画像表示させるプログラムと同じフォルダに入れておけばOK。

(もちろん画像を呼び出さないといけない)

ちょっと違う画像をもう一枚作って、左端のボタンを押したらちょっとこっちを向く(ような感じがする)ようにしました。

カスタムして、もっとねこあつめらしくできる…かも。

#include  <m5stack.h>

extern const unsigned char neko1[];
extern const unsigned char neko2[];

void setup() {
  M5.begin();
  M5.Lcd.drawBitmap(0, 0, 320, 240, (uint16_t *)neko1);
}

void mikaeri_neko() {
  if(M5.BtnA.wasPressed()) {
  M5.Lcd.drawBitmap(0, 0, 320, 240, (uint16_t *)neko2);
  delay(1000);
  M5.Lcd.drawBitmap(0, 0, 320, 240, (uint16_t *)neko1);
  }
}

void loop(){
  mikaeri_neko();
  M5.update();
}
Sponsered Link

M5STACK(赤外線受信の余談)

またM5Stackの話になるけど、ついでなんでやったことメモ。

 

先日の赤外線が出てるかどうかのチェックをArduino Nanoでやったけど、M5Stackでやれば持ち運びがちょっと便利。

受光素子をそのまま接続して、IRrecvDemo.inoのスケッチはちょっとカスタムして転送すれば、LCDにシリアルモニタの表示を出して使える。

接続はGNDとVCC(3.3V)、データの入力は今回は5pinにした。

見ての通り、フォントのサイズはいじってないので文字が小さい。老眼にはキツイ…。

でもわざわざ別の部屋にあるリモコンを取りに行かなくても、これ持って行けばいいのは便利だったぞ。

 

シリアルモニタの表示をLCDに出力するのは結構簡単で、スケッチのSerial.printlnのところをM5.Lcd.printlnにすればいいだけ。

もちろんM5Stack用のスケッチにするためには「#include <M5Stack.h>」と「M5.begin();」の追加は必要だけど、プログラムのことを良く知らない自分でもこのぐらいの移植はできる。

でも当初M5.Lcd.printlnとM5.Lcd.printの違いを知らなくて改行されなくて悩んだのは内緒。

(Serial.printlnとかM5.Lcd.printlnって改行コード含んでたんだな)

 

Arduinoにわざわざ外付けのLCDを接続してということをしなくても、そのまま使えるのはとても楽。

コマンドの意味とかライブラリの中身とか気にせず、実用的なものをさくさく作って使えるってこういうことなのか〜と納得。

勉強用に使うのもいいけど、これだと便利すぎるだろうか。

ファームウェア書き換えて、MicroPythonの勉強で使うならいいかもしれない。(個人的感想)

 

Sponsered Link

M5STACK(その8)

結局我慢できずM5Stackの事ばっかになっているが、まだ気になる事があるのでそれもメモっておく。

MP3ファイルの話をもうちょっと。

 

ツイッターで投稿されていたM5StackのMP3プレイヤー。

面白そうだったので、元の投稿先からスケッチを落としてきた。

 http://forum.m5stack.com/topic/143/lesson-6-1-speaker-mp3-player

上記の下の方にgithubへのリンクがあるけど、この投稿内容は勉強になる。

 

ちなみにここの公式フォーラムにレッスンとして投稿されてるネタの一つ。

 http://forum.m5stack.com/category/1/news-lessons

他にも興味深いのがいっぱいあるので、またやってみようと思ってる。

というか、最初のLesson1から見直した方が良いのかな。

 

とりあえずMP3プレイヤーのスケッチをコンパイルして転送、手持ちのMP3ファイルをSDカードに入れてみた。

…が、ノイズが出てくるだけで音楽が出てこない。

アイコンも一応作ったんだけど(75x75のjpg、MP3ファイルと同名にしておく)、その画面も出てこないし。

しかし試しに元のサンプルファイルを使うと、ちゃんと再生できてる。

ただ、次の曲に行った後、音が出なくなったりする。

この辺の不具合は周知みたいで、これは今のところしかたないと思う。

 

もしかして自分のMP3ファイルが悪いのか?と思い、前回使ったシンプルなサンプルスケッチでMP3ファイルを再生してみたところ、やっぱり同じようなノイズが出てくるだけだった。

これだったらたぶん、ファイルのサイズを減らせば良さそう。

 

というわけで、MP3のビットレートを96まで落とした。ここまで落とすと音質が悪いのが解りやすい。

でもファイルサイズは3分の2ぐらいまで減らせた。

これでMP3ファイルを再生すると成功。なので再びMP3プレイヤーのスケッチをコンパイル。

SDカードのファイルが無事再生されて、画面も表示された。

…音が悪いのはファイルのせいだけじゃなくて、やっぱりハードの問題もあるよね。

それと2曲目が再生されなかった。タイトルが日本語なのもまずかったのかな。そのぐらいはカスタムできそう。

スケッチ自体はSDカードが入ってないと注意画面が出てきたりして、良く出来てます。

Sponsered Link

M5STACK(その7)

どんどん作成例が出てくるので試してみるのが面白くて、うっかりするとM5Stackについてばかり書きそうになる。
(でも今年はここの更新を控えようとしているので我慢)
GitHubを検索してるといろんな人がいろんな工夫で使ってるのがわかる。
自分はプログラムとか素人なので、理解できた範囲でこつこつ実験していきます。

 

先日はMP3ファイルをSDカードに入れて音楽の再生をしたけど、それとはまた別にSPIFFSを使ってMP3ファイルをフラッシュメモリに書き込んでおく方法を試してみた。
M5StackもESP32だから、以下を参照させてもらって同じようにすればOK。
 https://www.mgo-tec.com/blog-entry-spiffs-uploader-plugin-arduino-esp32.html

とても丁寧に解説されてるので、解りやすいです。

でも自分の環境はMacなんで、ユーザー名/書類/Arduino/の下にtoolsフォルダを作成してファイルを格納。

 

SPIFFSを使った公式のサンプルスケッチは以下。
 https://github.com/m5stack/M5Stack/tree/master/examples/Advanced/Audio/PlayMP3FromSPIFFSToDAC
ちゃんとスケッチ内の注釈に、

 Use the "Tools->ESP32 Sketch Data Upload" menu to write the MP3 to SPIFFS 
 Then upload the sketch normally.   
 https://github.com/me-no-dev/arduino-esp32fs-plugin 

と記載されてる。

 

Arduino IDEのESP32 Sketch Data Uploadが設定できたら、後はサンプルスケッチを使ってお試しできます。

大元のライブラリを全てインクルードしてあれば、

 スケッチ例→M5Stack→Advanced→Audio→PlayMP3FromSPIFFSToDAC

を開いて、ESP32 Sketch Data Uploadを選択。

dataフォルダ内にあるMP3データが転送されます。

その後、サンプルスケッチをコンパイルして転送するだけで完了。

 

さらに試しに、参照したページにあったアップロードしたファイル確認用のスケッチをコンパイルしてみたところ、

という感じでシリアルモニタに表示された。意外と簡単。

設定自体は難しくないけど、自力でSPIFFSを使ったスケッチを書くには道のりは長いです…。

でもSDカードを使う必要もなくなるし、面白いからいつか使ってみたいところ。

Sponsered Link

M5STACK(その6)

ちょっと気になったところをメモ。

ESP32を使ったスケッチなら結構簡単にM5Stackに移植できるので、今回は以下のブログを参照させてもらいました。

 https://www.mgo-tec.com/blog-entry-twitter-api-arduino-esp32-trend-get.html

参照というか、TwitterのトレンドをArduino IDEのシリアルモニタに出すだけで実際のモニタに出力するわけではないので、改造せずほぼそのまま使える。

解説も丁寧なので、わかりやすくて勉強になります。

いずれ画面に表示させるのもM5Stackを使ってやってみたいところ。

 

が、いざコンパイルしてみたら、以下のようなエラーが。

 /Users/neko/Documents/Arduino/hardware/espressif/esp32/tools/xtensa-esp32-elf/xtensa-esp32-elf/include/c++/5.2.0/codecvt: In constructor 'std::codecvt_utf8<char16_t, _Maxcode, _Mode>::codecvt_utf8(std::size_t)':
 /Users/neko/Documents/Arduino/libraries/M5Stack/src/utility/Display.h:664:19: error: expected unqualified-id before '(' token
 #define min(a, b) (((a) < (b)) ? (a) : (b))
                    ^

Display.hの一文が引っかかってるっぽい。

でも実際には別のところが引っかかってる気がする。先頭に「#include <M5Stack.h>」を付けたせいだと思うんだけど。

 

ただこのエラーメッセージで調べても、これといった原因が解りづらい。

(スペルミスとか、括弧やセミコロンが足りないとか)

めんどくさくなってきたので、試しに該当する箇所を

 //#ifndef min
 //#define min(a, b) (((a) < (b)) ? (a) : (b))
 //#endif

と、コメントアウトしてみた。無理矢理すぎるけど。

でもこれでコンパイルが通ってしまった。

シリアルモニタを確認してみると、ちゃんとトレンドが取得できてる。

…これはこれでいいか。

(でもやっぱりDisplay.hは元に戻しておいた)

今回たまたまうまくいったように見えるけど、原因がわからないのは不安なんでちゃんとプログラムを勉強しないと…。

Sponsered Link