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

M5STACK(その5)

意外と遊んでます。だんだんと情報が多くなってきて楽しい。
しかし国内で取り扱ってるお店は軒並み在庫がなくなってるので残念。今持ってるBASICで勉強しておくことにする。

 

画像を出すのは簡単だったんだけど、多少不満があったオーディオ関連もサンプルプログラムが登場したのでさっそくダウンロード。
 https://github.com/m5stack/M5Stack/tree/master/examples/Advanced/Audio
サンプルのmp3ファイルをSDカードに入れておき、サンプルのスケッチを開いてコンパイル。
しかしエラーになる。しかもexit status 1と出るだけの、理由がよくわからないエラー。
一瞬悩んだが、必要なライブラリが入ってないだけだった。

 

スケッチ内の3行目以降にちゃんと
 cd ~/Arduino/libraries 
 git clone https://github.com/earlephilhower/ESP8266Audio 
 git clone https://github.com/Gianbacchio/ESP8266_Spiram 

と、記載があった。落ち着け自分。

 

ライブラリを入れたらスケッチのコンパイルは問題なく通った。(しかし時間がかかるなあ)
画面上に「Sample MP3 playback begins...」と表示されるようになったが、肝心の音が出ない。
良く見たら、SDカードからデータを引っ張り出すスケッチを使ってなかった。
SDカードに入れた音声ファイルを鳴らすなら、PlayMP3FromSDToDAC.inoのスケッチを使う。
自分が間違ってコンパイルしてたのはPlayMP3FromSPIFFSToDAC.inoで、SPIFFSファイルシステムを使う方法だった。

 

ちなみにSPIFFSファイルシステムについては以下がわかりやすいです。
 https://www.mgo-tec.com/spiffs-filesystem-uploader01-html
(いつも参照させてもらってます)


冷静に手順通りやってたら、なんてことなく音が出せます。サンプルはピアノの音。
しかし毎回なんでこう無駄なことやっちゃうんだろうなあ。

Sponsered Link

M5STACK(その4)

みんながM5STACKにArduinoのスケッチを移植してるのが楽しそうで、自分もやってみたくなった。

でも自分じゃ簡単なのじゃないととても無理なので、画面に何か表示させるだけのスケッチを探す。

で、懐かしのFlying Toasterがあったので、これでやってみた。

元ネタは以下。

 https://learn.adafruit.com/animated-flying-toaster-oled-jewelry/

以前これ作ろうとして3Dプリンタでケースだけ作ってたことがあったので、せっかくだから勉強がてらM5STACKで完成させてやることにした。

 

元ネタだと振動スイッチでオンしたり、15秒経過でスリープしたりという機能が付いてるみたいだけど、そういうのはめんどくさいので一切抜きにしました。

(というかエラーが出たらサクサク該当箇所を削除してった感じ)

あくまでもハードは本体のM5STACKのみ。

M5STACKだけでもスイッチはあるし、バッテリーも考えなくていいのでとても楽。

あとは画面のサイズが違うので、該当する箇所の数字を変更。

使用する画像はそのまま、bitmaps.hを使用した。ただ、最初の文を変更。

 #include <Arduino.h>

を、

 #include <pgmspace.h>

にする。

 

そしてビットマップ表示のコマンドも、ほぼそのまま…と思いきや、これで引っかかった。

元ネタが

 display.drawBitmap(x, y, (const uint8_t *)pgm_read_word(&mask[f]), 32, 32, BLACK);
 display.drawBitmap(x, y, (const uint8_t *)pgm_read_word(&img[ f]), 32, 32, WHITE);

だったので、「display.drawBitmap」を「M5.Lcd.drawBitmap」にした。

しかしコンパイルしたら画面が白黒の点滅を繰り返すだけで、画像が出てこなくて悩みに悩んだ。

で、問題だったのは「pgm_read_word」と「&」の存在だけで、結局

 M5.Lcd.drawBitmap(x, y,  (const uint8_t*)mask[f], 32, 32, BLACK);
 M5.Lcd.drawBitmap(x, y,  (const uint8_t*)img[f], 32, 32, WHITE);

にしたら通った。悩んだけど、最終的にシンプルになったのは良いと思う。

 

無事にスケッチが転送されると、トーストとトースターが飛びます。

これであのBGMが鳴ったら完璧だけど、それはそれでめんどくさい。(何より曲忘れた)

しかしちょっと画面がチカチカしすぎかな。そこは調整が必要。

しかもあんまりランダムじゃなくて、なんか隅っこに行きがち。

 

ビットマップの「img」組と「mask」組の意味がよくわからなかったので、imgの方だけ表示させてます。それでもあんまり変わらないように見える。

黒いビットマップでマスクして動きを滑らかにしたかったのかも。でも自分がそれを活かしきれてない気がする。

 

以下に自分がカスタムしたスケッチを置いておくので、興味ある方はいじって使ってみてください。

(で、さらに良い感じにカスタムしてくれたら嬉しい)

bitmaps.hは最初の一行を変えるだけなので、そっちは載せません。

 

#include <M5Stack.h>
#include "bitmaps.h" // Toaster graphics data is in this header file

#define N_FLYERS   10 // Number of flying things

struct Flyer {       // Array of flying things
  int16_t x, y;      // Top-left position * 16 (for subpixel pos updates)
  int8_t  depth;     // Stacking order is also speed, 12-24 subpixels/frame
  uint8_t frame;     // Animation frame; Toasters cycle 0-3, Toast=255
} flyer[N_FLYERS];

uint32_t startTime;

void setup()
{
  M5.begin();

  randomSeed(analogRead(2));
  M5.Lcd.clearDisplay();

  for(uint8_t i=0; i<N_FLYERS; i++) {  // Randomize initial flyer states
    flyer[i].x     = (-32 + random(160)) * 16;
    flyer[i].y     = (-32 + random(96)) * 16;
    flyer[i].frame = random(3) ? random(4) : 255; // 66% toaster, else toast
    flyer[i].depth = 10 + random(16);             // Speed / stacking order
  }
  qsort(flyer, N_FLYERS, sizeof(struct Flyer), compare); // Sort depths
}
void loop()
{
  uint8_t i, f;
  int16_t x, y;
  boolean resort = false;     // By default, don't re-sort depths

  M5.Lcd.display();          // Update screen to show current positions
  M5.Lcd.clearDisplay();     // Start drawing next frame
  
  for(i=0; i<N_FLYERS; i++) { // For each flyer...

    // First draw each item...
    f = (flyer[i].frame == 255) ? 4 : (flyer[i].frame++ & 3); // Frame #
    x = flyer[i].x / 16;
    y = flyer[i].y / 16;
//M5.Lcd.drawBitmap(x, y,  (const uint8_t*)mask[f], 32, 32, BLACK);
  M5.Lcd.drawBitmap(x, y,  (const uint8_t*)img[f], 32, 32, WHITE);

    // Then update position, checking if item moved off screen...
    flyer[i].x -= flyer[i].depth * 2; // Update position based on depth,
    flyer[i].y += flyer[i].depth;     // for a sort of pseudo-parallax effect.
    if((flyer[i].y >= (240*16)) || (flyer[i].x <= (-32*16))) { // Off screen?
      if(random(7) < 5) {         // Pick random edge; 0-4 = top
        flyer[i].x = random(160) * 16;
        flyer[i].y = -32         * 16;
      } else {                    // 5-6 = right
        flyer[i].x = 320         * 16;
        flyer[i].y = random(240)  * 16;
      }
      flyer[i].frame = random(3) ? random(4) : 255; // 66% toaster, else toast
      flyer[i].depth = 10 + random(16);
      resort = true;
    } 
  }
}
// Flyer depth comparison function for qsort()
static int compare(const void *a, const void *b) {
  return ((struct Flyer *)a)->depth - ((struct Flyer *)b)->depth;

}

Sponsered Link

M5STACK(その3)

M5STACKのカテゴリも結局作った。日本でも発売された記念。

(そんなにメモることが増えるかどうかはわからない)

スイッチサイエンスで売り切れてたけど、楽天のツクモロボット王国というところでも取り扱ってるらしい。

[商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。]

スイッチサイエンス M5Stack Basic
価格:4490円(税込、送料別) (2018/3/5時点)

 

それはともかく、前に動作確認でHello Worldやった後、あんまりいじってなかったので引っ張り出してきた。

改めてサンプルのプログラムを見ると、結構いろんなものが揃ってて便利。

 https://github.com/m5stack/M5Stack

個人的に、画像の表示が簡単なのが嬉しい。

JPGファイルを特に変換する必要もなく、画面サイズにしてSDカードに入れておけば普通に表示できる。

例えば使ったのはJpegDrawというスケッチ、数行しかない。

以前モジュールのドライバで悩みまくったから、シンプルで助かる。

スケッチは短いけど、コンパイルはあいかわらずArduinoより時間はかかってる。

 

試しにデジタル時計のスケッチに背景の画像表示を追加、簡単なカスタム。

この程度だったらすぐに反映できる。

ちなみにこれ猫の写真なんだけど、液晶を撮影したせいかやたら目だけ目立ってしまった。(これはM5STACKのせいじゃない)

数字のところを背景色無しにしたら、数字が上書きされるようになっちゃったのでこれは改善の余地あり。

 

モジュールとかの勉強用というより、作りたいものがあったらこれで作れる、という感じ。

画像表示もさることながら、こういうものを作るといつも悩むバッテリーの問題が特にないところもいい。

あとは音がイマイチなんだけど、それは期待しないほうがいいかな。

(この値段で全部期待するのは無理っぽい)

でもスケッチを書き込みする際にも、プチプチノイズが出てるのはちょっと気になる。ハードもバージョンが上がればいずれ改善するのかな。

Sponsered Link