ちょっとついでに勉強　M5stack　おっと!危ない！画像が飛んでくるｗ！！

あともう一つM5stackネタで＾＾今回はこれで！

これは前回のなんちゃって動画ではなくて、パソコン画面の一部がwi-fiを介してM5stackに飛んできています。

もうここまで来ると魔法ですねｗ
これは、らびやんさんが作られたESP32_ScreenShotReceiverというプログラムを使わせてもらっています。
プログラムの名前部分をクリックしてもらうと公開されているGitHubに飛びます。
ここに使い方が書いてあるのですが、書いてある前の段階ですでに分からないｗ
どうやってM5stackに入れるのか？？てなことでその辺書いてみます＾＾
ただし、私がこの方法で出来たというだけで本当は正式な他の方法が有るのかもしれません＾＾；
ちなみにarduinoIDEが入っているWindowsが前提です。

①まずは先ほどのリンクを開いて

右上のcodeをクリックしてDownload Zipを選択してダウンローします。

②解凍すると

このようなファイル構成になっています。
ScreenShotReceiverフォルダの中にScreenShotReceiver.inoというファイルが有るのでこれをダブルクリックします。

arduinoIDEが立ち上がってプログラムが表示されます。

③arduinoIDEの上部の項目、ツール→ライブラリーの管理で「M5stack」と入力して次の3つのライブラリを入れてください。
M5Stack

LovyanGFX

M5Stack-SD-Updater

④ライブラリーは揃いましたが、このままコンパイルすると

こんな感じでエラーが出ますので

#include <M5Stack.h>を追加してあげてください。
これが分かるまで2日位かかりましたｗｗ

⑤コンパイルしてarduinoIDEでそのままM5stackに書き込みしてください
初回の場合はwi_fiを検索した後、このような画面になります

⑥次にスマホでSmartCofigアプリを使います。プログラム中にも使用アプリが書いてあるのですが、私は気づかずにこちらのアプリ、IoTSmartconfigを使いました。

⑦アプリを立ち上げて

ＳＳＩＤに家で使用しているwi_fiの名前を入力します。スマホのwi-fi接続の今選択されているwi-fiの名前を入力です。
Passwordにはその接続しているwi-fiの機器のケースの横等に書いてあるwi-fiのパスワードを入力します。

実はここでも色々とこのアプリの使い方を調べているときにＳＳＩＤとパスワードを入力してくださいと書いてあったのですが、なんの名前とパスワードか分からずに悩みましたｗｗ

入力後Submitをクリックします。

⑧なかなか繋がらない時も有りますが、スマホをM5stackの横に置いてしばらく待つと、スマホ画面にこのような表示が出て（たまにこの表示でないときありますが、M5stsckの方にＩＰアドレス出ていれば大丈夫です。）

M5stackの方にはこのような表示が出ます。

⑨次にＰＣの方の先ほどダウンロードして解凍したフォルダの中の

ScreenShotSender.exeをダブルクリックで起動します。

⑩するとこのような2つの枠が現れます

このウインドウの赤矢印部分にM5stackに表示されているＩＰアドレスを入力します。

黄色矢印部分のConnectを押すと、ＰＣの画面の一部がM5stackに飛んできて表示されます。

緑矢印で、M5stackに表示される画面の大きさが変更できます３２０ｘ２４０がm5stackの画面の大きさです。

⑪ＰＣ側の白枠はマウスで拡大縮小、移動が出来て表示範囲を変更することも出来ます。
HideBoxで白枠を消すことも出来ます。
youtubeもこんな感じで表示出来ます。なお音は出ませんｗ動画の音はＰＣの物ですｗ

凄いですよね～!殆ど遅れを感じません！

とりあえずこれでこのプログラムは使えるようになったのですが、せっかくのM5stackをこれ専用で使うのももったいないです。そんな時のために前回最初にLovyanLauncherを入れる方法紹介したの覚えておられるでしょうか？
このランチャーでソフトの切り替えを行います。

⑴先ほどコンパイルできる状態にしたScreenShotReceiver.inoを再度開きます

スケッチ→コンパイルしたバイナリを出力　とします。

⑵次にスケッチ→スケッチのフォルダを表示

するとファイルScreenShotReceiver.ino.m5stack_core_esp32.binというファイルが増えています。
このままだとファイル名が長いのでScreenShotReceiver.binという名前に変更

⑶このファイルをM5stackに差し込んであるＳＤカードをフォーマットしてコピペします。

⑷ついでに前回作成したマクロスのなんちゃって動画もLovyan Launcherで起動できるようにします。必要ない場⑹へ飛んでくださいｗ
まずプログラムはこのようになります。

#if defined(ARDUINO_M5Stack_Core_ESP32) || defined(ARDUINO_M5STACK_FIRE)
#include <M5StackUpdater.h>     // https://github.com/tobozo/M5Stack-SD-Updater/
#include <M5Stack.h>
#endif
#define LGFX_M5STACK          // M5Stack (Basic / Gray / Go / Fire)
#include <SD.h>    
#include <LovyanGFX.hpp>
#define TFCARD_CS_PIN 4
static LGFX lcd;                 

void setup(void)
{ Serial.begin(115200);
#if defined ( __M5STACKUPDATER_H )
 M5.begin();
 #ifdef __M5STACKUPDATER_H
 if(digitalRead(BUTTON_A_PIN) == 0) {
    Serial.println("Will Load menu binary");
    updateFromFS(SD);
    ESP.restart();
  }
   #endif
#endif
  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<359;i++){

    String fileName = "/macross_op_short/"+ String(i) +".jpg";
    char jpegs[fileName.length()+1];
    fileName.toCharArray(jpegs, sizeof(jpegs));
   
    lcd.drawJpgFile(SD,jpegs, 0, 20); 

    //delay(200);
  
  }
}

#if defined(ARDUINO_M5Stack_Core_ESP32) || defined(ARDUINO_M5STACK_FIRE)

#include <M5StackUpdater.h> // https://github.com/tobozo/M5Stack-SD-Updater/

#include <M5Stack.h>

#endif

#define LGFX_M5STACK // M5Stack (Basic / Gray / Go / Fire)

#include <SD.h>

#include <LovyanGFX.hpp>

#define TFCARD_CS_PIN 4

static LGFX lcd;

void setup(void)

{ Serial.begin(115200);

#if defined ( __M5STACKUPDATER_H )

M5.begin();

#ifdef __M5STACKUPDATER_H

if(digitalRead(BUTTON_A_PIN) == 0) {

Serial.println("Will Load menu binary");

updateFromFS(SD);

ESP.restart();

}

#endif

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<359;i++){

String fileName = "/macross_op_short/"+ String(i) +".jpg";

char jpegs[fileName.length()+1];

fileName.toCharArray(jpegs, sizeof(jpegs));

lcd.drawJpgFile(SD,jpegs, 0, 20);

//delay(200);

}

（コピペする場合は1行目を忘れずにコピーしてください＾＾）

少し変更点有ります。以前の物と比べてみてください。
再生ファイル数は358枚在って、画像はmacross_op_shortというフォルダをＳＤカード内に作ってそこに格納します。枚数は自分で作ったファイルの数に39行目を修正して、フォルダ名も必用なら41行目の部分を修正してください。

⑸このプログラムもScreenShotReceiver.inoの時と同じように「コンパイルしたバイナリを出力」
を選択後、フォルダを開いて、新しくできたファイルをmacross_op_short.binと名前を変更してＳＤカードにコピペしました。

⑹ＳＤカードをM5stackに差し込んで前回のM5Bunerを使ってLovyanLauncherをインストールして起動します。ちなみにcore2ではインストールしても上手く起動しませんでした＾＾；

⑺まずはwi-fiを選択して　wifi Clientを選択

⑻すると今つかめるwi-fiスポットがリストアップされますので選択後そのwi-fi機器のパスワードを入力してください。

⑼なんか面倒になってきたｗここからは動画でｗ

てな感じでソフトの切り替えが出来ます。エンタープライズの動画がＰＣからの物です。

ちなみに切り替えは、一番左のボタンを押しながら電源スイッチを一回押して画面が一回ピカッとなったら一番左のボタンを離します。

この機能使えば色々な物出来そうですね＾＾来年の展示会に持っていこうｗ

とりあえず液晶とESP32、M5stackを使ったお遊びはこの辺でそろそろ本題のバルキリー製作に戻りますか＾＾；
でもまた面白い事見つけたらいじりますｗｗ

8 comments

なおより:

2020年11月14日 4:06 PM

こんにちは
ブートローダーでプログラムを使い分ける感じですかね？
いやぁ、こんなちっちゃいのんでこんなことまでできるとか、ほんとすごいですね。
展示会でも結構使い道がありそうです。制作動画とか流しとくのも面白いかも。PC画面転送なら容量は気にしなくて済みますし。その場合はアクセスポイントが要るのか？PCがアクセスポイントになればいいのかな？いや、もう電子工作も飛び越えてシステムづくりになってきちゃってますね。毎度、追体験で楽しませてもらってます。
6jiro より:

2020年11月14日 4:17 PM

なおさん　こんにちは！
そうなんですよ～。ブートローダーでの使い分けてな感じです。
ホントESP32の持つ底時からおそるべしです！
そうそう！製作中の写真とかで動画作って置いておくとか、普段はネームみたいにして首からぶら下げて、お話するときにはその製作動画に変更して説明するとか。ＳＤカード１６ＧＢですので容量はいくらでもありますからねｗ
ＰＣ画像の転送はアクセスポイントが必要そうですから、外部に持ち出しはどうなんでしょうね＾＾；
今一歩よくわかっていませんｗ
M5stackスイッチサイエンスさんで3575円ですのでお一ついかがでしょうかｗ？
てつの より:

2020年11月14日 4:28 PM

これを使って小さい筐体でゲームする人がいるわけですけど、要するにモニターケーブル的な信号を飛ばすんでは無くて画像を切り取ったメディアプレイヤーっぽい枠でmpg圧縮みたいな感じなんでしょうかね？画面切り取りで僕もエックスウイングのスコープ内映像作ったんですよ。やっぱりやりたいことがつくづく馬が合うなあ〜。
6jiro より:

2020年11月14日 4:42 PM

てつのさん　こんにちは！
仰る通りの様です。
ESP32はmpegのエンコーダーを持っていないので、画像を飛ばしてパラパラ漫画形式で表示しているようなんですよ。その画像表示のプログラムが高性能なのとESP32がパワフルなので動画に見えてるらしいです。
なるほど～てつのさんも色々やっておられますからねｗ！
あのX-wingのスコープ画像はそうやって作られたんですね。
M5stack使うと色々出来ますよ＾＾おひとついかがですか＾＾
gyo より:

2020年11月14日 5:01 PM

これは面白い使い方できそう！
でもスマホ持ってないw

来年になったら絶対使い方忘れてこの前後のエントリ調べまくりそうですw
Vivid より:

2020年11月14日 5:39 PM

こんにちは
ESP32でアプリのバグ取りに手間取っている間に、6jiroさんはどんどん進んで、もう宇宙の彼方へ！
ここまでいろいろできると、もう夢がどんどん膨らんでいきますね。
コクピットの周りにちょっとしたLCDパネルで囲んで、風景を移せば、もうシミュレータもどきになって、展示会でも大好評間違いなしです！！
もう、操縦席の大きな模型が欲しいですね。
6jiro より:

2020年11月14日 6:45 PM

gyoさん　こんばんは！
色々と夢が広がりますよね～！
ちなみにソフトはwindows専用ですので＾＾
アクセスポイントが必要と思いますのでその辺は何とかやってくださいｗ
先ほどモバイルＷｉ-Ｆｉを使ってテストしたらうまくできました＾＾
荷物多くなりますが外に持ち出し可能なようです。
来年になったら当然私も忘れていますのでｗｗ
6jiro より:

2020年11月14日 6:49 PM

Vividさん　こんばんは！
ESP32の旅、ひとまず一段落ですｗキリがないですからねｗ
コクピットの周りに並べてガンダムの操縦席とか再現するのありかもですね！
このソフト複数のＭ５stackに同時に送信することも出来るようですから使えそうですね！
アイデアいただきですｗ
初代のガンダムなら3方向位囲めば良さそうですしねｗ
なんか考えてみよ＾＾

日	月	火	水	木	金	土
					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

ちょっとついでに勉強　M5stack　おっと!危ない！画像が飛んでくるｗ！！

関連すると思われる記事：

8 comments

Leave a Reply