LovyanGFXについて調べているとM5stackというものがしょっちゅう出てくるんですよね~。さらにVividさんからもセールスが来たので買っちゃいましたw!
簡単に言えばESP32にSDカードやモニター、スピーカー、電源が付いたものです。
ちょっと今回の記事は長いですよ^^;
何に使いたいかというと、小さいので展示会などで胸にぶら下げ自分の作品動画を映しながらネームとして機能させるとか、作品説明で作品横に置いておくと面白いかなと思い買ってみました^^。
ちなみにこのM5stackはcore2という新製品も出たらしいとの事で、まず最初はそちらをAmazonで購入したのですが、よく調べもせずに購入したのでぼったくり価格にやられてしまいましたw
直ぐキャンセルを申し出たのですがキャンセル不可になっていました(T T)
ホントAmazonて危険w
で、まずはこちらのサイトの指示に従ってドライバーとM5Burnerというソフトをインストールしてみました。
SD-Apps-Folder.zipは指定のサイトを覗いてみたのですがよくわからないのでパスw
とりあえずM5Burnerでの書き込み迄進んで、ちょっと画面表示の構成がバージョンアップで変更されたのか変わっていましたが、なんとなくわかると思いますw
まずはCOMを自分の環境の設定に合わせます。プルダウンで項目出てきますのでそれで選択すれば大丈夫です。
次に赤矢印のバージョンを選択16MBで。
緑矢印をクリックでダウンロードします。
するとこのような表示になりますので、
Burnで書き込みを行います。
以上の手順でLovyan_Launcherをダウンロード後インストールしてみました。
うむwいっこうに起動してこない・・・・・・
なに?これ壊れているの??そもそも説明書もないから電源の入れ方さえもはっきりしないw
調べると左横スイッチを一回押すと起動。5秒くらい長押しするとオフらしいです。
もしかしてcore2だからこのプログラムでは起動しないの??と思いcore2と書いてあるプログラムをインストールしてみました。
あっw動いた~!なるほど~。
それによく考えるとLovyan_Launcherを入れたとして、これボタン無くてタッチスクリーンだから使えないのかな・・・・この辺よく分からないww多分、Vividさんが色々と解決してくれるはず!
てなことでcore2でない物も欲しいなとスイッチサイエンスで購入^^
core2でない方はあっさりLovyan_Launcher動いちゃいましたw
さてととりあえず動いたので次のステップ^^
まずやりたいことは動画を表示してみる事!
ただ、M5stackに入っているESP32はそのような能力はないのですが・・・・・
ちょっと!この方のM5stackは動画動いてるじゃないですか!!
この方のブログを覗いてみると、なるほど!静止画を沢山表示してパラパラ漫画のように動かしているわけですね。
ナイスwこれなら敷居が低い!画像の連続表示のプログラムなら私にも作れそう^^
問題はその画像の製作方法だな・・・・と思っていたらその制作方法も書かれていました!
この方法をもう少し詳しく紹介してみます^^ある意味今回の肝ですからね~。
①次のフリーソフトをPCにダウンロードしインストールしてください
Free Video to JPG Converter
XnConvert
それと画像のフレームレートを変換することのできる画像編集ソフト
私はFilmora9を使っていますので、それで説明させてもらいます。
②まずは使いたい動画をFilmora9に読み込みます。
エクスポートをクリック
③保存方法が開きますので、
mp4もしくはaviを選択して、設定をクリック
④
フレームレイトは最低の12まで落としてokをクリックした後エクスポートします。
⑤Free Video to JPG Converterを立ち上げて、先ほどエクスポートした動画ファイルを開きます。
フォルダの追加をクリックして先ほどの動画を選択します。
⑥抽出は7フレーム毎に設定
この抽出で全体の画像の枚数が決定されます。
多すぎると容量の関係で保存場所に困りますし表示が追い付かないかもしれません、少なすぎると動画がカクカクします。この辺は何回かやって丁度いいところを探さないといけないかもしれません。
設定がすんだら変換ボタンをポチッと。
するとこのような沢山の画像が出来上がってきます。
ただ、このままだと
5Mstackに表示するには大きすぎます。
⑦XnConvertを立ち上げます。
先ほどの画像を保存したフォルダを選択します。
⑧フォルダを選択するとこのような画面になります。
⑨上方のタブの動作をクリックするとこのような画面になりますので
緑矢印の動作を追加をクリック 画像→リサイズを選択
⑩プリセットをM5stackのモニターの大きさの320x240を選択
⑪再度上のタブで出力を選択
出力先のフォルダを指定して、緑矢印の設定をクリック
⑫jpegで画質は今回私は15程度
サブサンプリングファクタは2x2,1x1,1x1で。
その他のチェックは外します。
圧縮は数字が多いほうが画像は綺麗なのですが、ここの数字が多いと画像自体のサイズが大きくなり、画面表示への読み込みに時間がかかることになります。
OKをクリック後画面右下の変換をクリックして実行させます。
⑬このような感じでファイルができて
先ほどより画像が小さくなっているのがわかります。画質も荒くなっていますw
てな感じで動画のコマドリ画像の作成が完成です。M5stackに使用しなくてもこのコマドリ画像は何かしら使い道有るかもですね^^
次はプログラムの方ですが、まずはSDカードを使ってみました~!
先ほどの画像群をSDカードにフォルダを作らずにコピペします。
このSDカードをM5stackに差し込んで、USBをパソコンに接続
プログラムはこちら
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 |
//#define LGFX_M5STACK // M5Stack (Basic / Gray / Go / Fire) #define LGFX_M5STACKCORE2 #include <SD.h> #include <LovyanGFX.hpp> #define TFCARD_CS_PIN 4 static LGFX lcd; //static LGFX_Sprite sprite(&lcd); void setup(void) { Serial.begin(115200); lcd.init(); lcd.setRotation(1); lcd.setBrightness(255); lcd.setColorDepth(24); lcd.fillScreen(0); // 黒で塗り潰し SD.begin(TFCARD_CS_PIN, SPI, 20000000); } void loop(void) { File root = SD.open("/"); // open SD card main root while (true) { File entry = root.openNextFile(); // open file if (! entry) { // no more files root.close(); return; } uint8_t nameSize = String(entry.name()).length(); // get file name size String str1 = String(entry.name()).substring( nameSize - 4 ); // save the last 4 characters (file extension) if ( str1.equalsIgnoreCase(".jpg") ) // if the file has '.bmp' extension lcd.drawJpgFile(SD,entry.name(), 0, 20); entry.close(); //delay(200); } } |
書き込み設定はこちら
よし動くかな~!おっ!映った!!
(その時の動画撮影してなかったので後から再現w)
うはw超遅いww紙芝居かw!
プログラムの要らない部分を削除したり、画像を入れ替えたり色々と試すのですが改善しない・・・・・・・・・・SDカードってこんなに遅いの??
使えないwポイだなw(実は私のうっかりですw SDカード使えます!またあとで説明)
うむ・・・SDカードでは速度遅いな・・・・となるとやはりSPIFFSだな!
これらの画像をM5stack内のフラッシュメモリ(SPIFFS)に上げていくのですが、SPIFFSの使い方はこちらのサイトを読んで使えるようにしてください。
で、ここで色々と問題がw初期状態ではM5stackは1.5MB程度しか容量が有りませ。
上記の画像圧縮とフレーム数の削減でとにかく容量を小さく。この際画質にはこだわっていられないw
で、色々調べてみると、書き込み設定のこの部分
No OTAにするとSPIFFSの容量が2MBになるとか!
微妙な増加ですがそれでもうれしい~。
てなことで書き込み設定を変更。画像群をSPIFFSに上げていくのですが、エクスプローラーで見ると画像群は1.7MBなんですがアップロードでエラーが出てしまいます・・・・
仕方ないので何度もフレーム数や画質の調整をして画像群の容量を1.3MB程度にしたらようやくアップロードできました^^;
で、プログラムはSPIFFS用に変更して、こちらのように。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 |
//#define LGFX_M5STACK // M5Stack (Basic / Gray / Go / Fire) #include "FS.h" #include <SPIFFS.h> #define LGFX_M5STACKCORE2 #include <SD.h> #include <LovyanGFX.hpp> #define TFCARD_CS_PIN 4 static LGFX lcd; // LGFXのインスタンスを作成。 void setup(void) { Serial.begin(115200); lcd.init(); lcd.setRotation(1); lcd.setBrightness(255); // の範囲で設定 lcd.setColorDepth(24); // RGB888の24ビットに設定(表示される色数はパネル性能によりRGB666の18ビットになります) // clearまたはfillScreenで画面全体を塗り潰します。 // どちらも同じ動作をしますが、clearは引数を省略でき、その場合は黒で塗り潰します。 lcd.fillScreen(0); // 黒で塗り潰し //SD.begin(TFCARD_CS_PIN, SPI, 80000000); SPIFFS.begin(); } void loop(void) { File root = SPIFFS.open("/"); // open SD card main root while (true) { File entry = root.openNextFile(); // open file if (! entry) { // no more files root.close(); return; } uint8_t nameSize = String(entry.name()).length(); // get file name size String str1 = String(entry.name()).substring( nameSize - 4 ); // save the last 4 characters (file extension) if ( str1.equalsIgnoreCase(".jpg") ) // if the file has '.bmp' extension // bmpDraw(entry.name(), 0, 0); // draw it lcd.drawJpgFile(SPIFFS,entry.name(), 0, 20); entry.close(); // close the file delay(100); } } |
よしこれなら行けるだろうと起動させてみると・・・・・・
右の物が起動させた状態。左は本来のあるべき動画再生。
あれww
画像の順番が無茶苦茶wなんだこれ^^;
で、ファイルを減らしたりして色々と調べているとファイルネームが200番台以上になるとグチャグチャに。
それならとファイルネームの番号を例えば123から0123てな感じで整理してみたのですが全く改善せず^^;そもそもSDカードの時は行けてたのにな・・・・・・
てなことでプログラム中のopenNextFile();での指定ではなく、ファイル名を直接しているプログラムに変更することに。このプログラムも相当ネットさまよって探しましたw
変更後のプログラムがこちら
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
//#define LGFX_M5STACK // M5Stack (Basic / Gray / Go / Fire) #include "FS.h" #include <SPIFFS.h> #define LGFX_M5STACKCORE2 //#include <SD.h> #include <LovyanGFX.hpp> #define TFCARD_CS_PIN 4 static LGFX lcd; // LGFXのインスタンスを作成。 void setup(void) { Serial.begin(115200); lcd.init(); lcd.setRotation(1); lcd.setBrightness(255); lcd.setColorDepth(24); lcd.fillScreen(0); // 黒で塗り潰し //SD.begin(TFCARD_CS_PIN, SPI, 80000000); SPIFFS.begin(); File root = SPIFFS.open("/"); // open SD card main root } void loop(void) { for(int i=0;i<308;i++){ String fileName = "/"+ String(i) +".jpg"; char jpegs[fileName.length()+1]; fileName.toCharArray(jpegs, sizeof(jpegs)); lcd.drawJpgFile(SPIFFS,jpegs, 0, 20); delay(200); } delay(5000); } |
このプログラムを使うにはSDカード内のファイルを連番にしないといけません。そこでFileRenというフリーソフトをダウンロード
左の赤い四角の部分で画像が有るフォルダを指定しファイルを表示するをクリックしてファイルネームを確認
次に上のタブで リネーム処理 を選択。連番は桁なしを選択。
リネームを実行すると
桁なしの連番ファイルが出来ています。
これを再度スケッチのdataフォルダにコピーしてSPIFFSにアップロード。
起動させると超早いww早すぎるのでdelay(200);を入れるほどですw
で、速度調整したものがこちら。
なんとか動画ぽく見えますよね(強要)!
とりあえずこれで動画ぽい再生ができました~。
でも容量の関係で再生時間は限られているし、画質も悪いし・・・・・・・
やはりSDカードに画像とか入れて何とかしたいですよね・・・・。
で、再度SDカードでの再生を試していると・・・・・
あれっw最初は超紙芝居ですがなんか途中から高速で再生されるようになってる!!!
なんだこれ?
途中からでも高速で再生されるということはSDカードでもこの速度は出せるということですよね・・・・
色々と弄ってみるのですが、あの紙芝居部分が一向に改善されません。
そんな時、いつものように色々やっているうちにうっかりこのSDカード無くしちゃいましたww
そこで新たな16MBのSDカードを出してきてこれに画像をコピーして起動すると
あれwwさっきまでの紙芝居治ってる!!
SDカードのせいか??困った時の神頼み!Vividさんに相談しているとSDカードのフォーマットについてのヒントをもらいました。
そこで、SD Card Formatterというソフトをダウンロードして、これで無くしていたSDカードを発見しフォーマットして、再度画像をコピーしてみるとなんと新品のSDカードと同様に紙芝居は改善され高速に表示されるようになりました!
どうやら、SDカードのフォーマットの不良だったようです。
今回もたったそれだけのうっかりのせいで長い道を歩みましたww
てなことで、最終的には容量の豊富なSDカードの使用で行くことにしましたので、動画のフレームも7枚ごとだった物を4枚ごとと多くして、圧縮も40程度にすることができました。
ちなみに最終的なSDカードを用いてのプログラムはこちら
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
//#define LGFX_M5STACK // M5Stack (Basic / Gray / Go / Fire) #define LGFX_M5STACKCORE2 #include <SD.h> #include <LovyanGFX.hpp> #define TFCARD_CS_PIN 4 static LGFX lcd; //static LGFX_Sprite sprite(&lcd); void setup(void) { Serial.begin(115200); lcd.init(); lcd.setRotation(1); lcd.setBrightness(255); // の範囲で設定 lcd.setColorDepth(24); // RGB888の24 lcd.fillScreen(0); // 黒で塗り潰し SD.begin(TFCARD_CS_PIN, SPI, 20000000); } void loop(void) { for(int i=1;i<1519;i++){ String fileName = "/"+ String(i) +".jpg"; char jpegs[fileName.length()+1]; fileName.toCharArray(jpegs, sizeof(jpegs)); lcd.drawJpgFile(SD,jpegs, 0, 20); //delay(200); } } |
SDカードで容量の心配がなくなって長い動画を入れましたのでフレーム数が1518枚となっています。
そのため29行目のfor(int i=1;i<1519;i++)がかなり大きな数字になってしまいました。
ついでに言うとi=1となっていますがここを100にすると連番ファイルの100枚目から描画を開始します。
途中再生みたいなもんですねw
さらにちなみに、これESP32なら出来るので、私のバルキリーのコクピットでも画質はともかく再生できるはずwSDカードモジュール追加しちゃおうかなw
ムチャ長くなってしまいましたwこれ最後まで読む人居るのだろうかw?まっ、備忘録としてw
関連すると思われる記事:
- None Found
こんばんは!!
いやはや、長編ドキュメンタリー風に拝読しました!
M5Stackに関しては、お誘いした当方のブツは、まだかの国を出国したばかりで、当分着ません。(笑)
それにしても、6jiroさんが、いつも先行で問題解決をしていただいて、こちらは後からその通りに進んでいけばよいだけなので、感謝感謝です!
SDは、フォーマットが原因でしたね。私が以前にWinとRasPiでSDをやり取りしていた時に結構問題が生じて、SDフォーマッターを利用しました。
当方のM5が来たら、ご指導よろしくお願いしますね!
Vividさん こんばんは!
今回もあいかわらず大ハンマー振り回していますw
M5stackはアリで頼んだものが私は今日届きました!3個目ですw一体何個買うつもりなんでしょうwwだってアマゾンで高く買ってしまって悔しかったので安いアリでも購入しましたww
問題解決と言いますか・・・・勝手に問題を作っているといいますか^^;
とりあえず、また色々な知識はつきましたw
SDのフォーマットがここまで重要とは思っていませんでした^^;読み込んでいるけど時間かかるとか全く想像外でした。
とりあえず、3分半の動画もどうにか見れますのでSDを基本としてプログラムしていく予定にしています^^
これがまた最後までみちゃうんだなあ~。実は同じようなことを同じように通ってきた経緯がありまして、最初にミニ筐体ゲーム作った時にかろうじて液晶パネルはめこんでみたはいいんですが、静止画しかできないのが悔しくて。がんばってパラパラ動画でギャラクシアン作って見せたらまあまあみんな驚いてくれたんですがDOROOFF仲間のカムロちゃんがテツ兄ならゲームほんとに出来るように
作れんじゃね?って発破かけられてラズパイまで至りました。苦難の道のりでしたが一個覚えると
二個忘れちゃうんですよね!(笑)ドロオフまで一年さらなる変化に期待が高まります!!!!
てつのさん こんばんは!
最後までお疲れ様ですw
なるほど~!もうすでにパラパラ動画経験済みだったんですね!
御見それしました(*- -)(*_ _)ペコリ
パラパラ動画なかなかバランスが難しいですよね~。
動画再生にはやっぱらラズパイまで行かないといけないかな・・・・・
まだまだ勉強たりませんね^^;がんばってみます!
でもいい加減バルキリー組み立てないとwwホント完成するきがしませんw
ははあなるほど。
大馬力大ハンマーww
ちょっと将来の用途と違うかなー。
私的には、室内をモデリングして背景としてセット、
キャラクターをスプライトで描き、ランダムちょいインタラクティブに
室内で動かせたら楽しいかなと。
って、あと少しでゲームじゃんそれ。
こんにちは
これ、現物が手元にあってトレースしながらいじると面白い記事ですね、きっと。いや、でもその前段階がもう何周か周回遅れだから楽しめないか(^^; FGO熱ももう少し静めないと。。。
もちろん6jiroさんのスキルと馬力あってこそですがいろんなことができるもんですね。近頃の6jiroさんやVividさんのブログを拝見してると電子工作のフィールドがグンと広がってきてるように思います。
gyoさん こんにちは!
大ハンマー相変わらず振っていますよww
なるほど~むしろゲーム的な動きですね~。
それならLovyanGFXの出番ですね。
窓を除いて内部で人が動いてたらみんなびっくりするでしょうね~!
とりあえずはESP32購入しましょうww
なおさん こんにちは!
とにかく初心者なので色々なサイトをめぐっては情報あつめるのですが、とにかく超初心者なので「そこからかよ!」という突っ込みが来るくらいの前の段階で分からないww
てなことでこんな超初心者用記事かいてみましたw
とにかくね、ESP32が凄いんですよw!こいつデュアルコアでマルチタスクも出来るとかw
少し調べましたがそこまでは良いか^^;と放置中ですw
Vividさんをarduinoに引きずり込むことは出来ませんでしたが、arduinoIDEを使う事には引きずり込めましたので今後良いアプリを開発してくれるかもしれませんw期待ですねw!
esp32買ったからネットでググったら結局センセのところに行きついちゃったわいな!!
いまから動画はじめていこうかなあ~ってかんじです。
てつのっち ごめんw
こっち見ていなかった・・・・
パラパラ動画再生のプログラムはここのでは動かないからね~!
まずはこっちので画像表示して
https://smile-dental-clinic.info/wordpress/?p=10902
ここのloop内の関数をそっちに書き足してみて^^
分かんなかったら連絡頂戴~!