編集履歴一覧に戻る
mametarou963のアイコン画像

mametarou963 が 2021年02月21日22時51分53秒 に編集

コメント無し

本文の変更

# 背景 コロナ禍になり、親族といえども、自粛の流れの中で会う頻度が減少していると思います。 しかし、お孫さんをもつおじいちゃん、おばあちゃんはできるだけ早くお孫さんに名前を覚えてもらいたいもの。 そこで、おじいちゃん、おばあちゃんがお孫さんに会うことなく存在や名前を覚えてもらうプロダクトを開発しようと考えました。 子どもが物を覚える手段の参考として、「音と絵で覚える子どもの本」のように絵と音を子どもの押す動作で紐づけるグッズを用いると、かなり早く子どもが覚えるということを聞きました。 そこで、親族の写真を子どもが押すと、親族の呼称が流れるプロダクトを開発しようと考えました。 # 部品 * M5Paper * Grove MP3モジュール v2.0 * スピーカー * microSDカード ![部品一覧](https://camo.elchika.com/63276cad929f538070b74a5f68dcc32e6470d55f/687474703a2f2f73746f726167652e676f6f676c65617069732e636f6d2f656c6368696b612f76312f757365722f66643265623836652d623336622d343438652d383961342d6164366436373031303335312f30343631323761632d323564652d346436612d393964652d343137396634656564636666/) # 作成手順 ## 画像の準備 画面上には6枚程度の親族画像を表示させたいと考えました。 M5Paperは540x960のため、250x250の正方形画像を6枚準備します。 * resourcesフォルダを作成します * 250x250の1~6.pngをresourcesフォルダに配置する * resoucesフォルダ下でimage2gray.pyを実行する→ImageResouce.h生成 folder<Program> ┣Program.ino ┗Program<resources> ┣1.png ┣2.png ┣3.png ┣4.png ┣5.png ┣6.png ┣image2gray.py ┗ageResource.h *image2gray.pyは以下の場所にあります https://github.com/m5stack/M5EPD/tree/main/tools/image2gray ## microSDカードの準備 1. 1~6.pngの呼称に対応した音声を作成する 1. SDカードに「1から順に」データを書き込んでいきます ※Grove MP3モジュール v2.0は音声を書き込んだ順にindex番号を指定できます ## プログラム M5Paperに以下のプログラムを書き込みます。 ```arduino:M5Paperのコード #include <SoftwareSerial.h> #include <MP3Player_KT403A.h> #include <M5EPD.h> #include "./resources/ImageResource.h" // edp #define PIC_SIZE 250 #define LEFT_INDEXX 10 #define RIGHT_INDEXX 280 #define UPPER_INDEXY 50 #define MIDDLE_INDEXY 320 #define LOWER_INDEXY 590 #define BUTTON_RESET_MSEC 1000 #define DELAY_MSEC 10 int preIndex = 0; // mp3 #define swtxPin 25 #define swrxPin 32 // Note: You must define a SoftwareSerial class object that the name must be mp3, // but you can change the pin number according to the actual situation. SoftwareSerial mp3(swrxPin, swtxPin); M5EPD_Canvas canvas(&M5.EPD); void setup() { M5.begin(); M5.EPD.SetRotation(90); M5.EPD.Clear(true); // 写真の表示 canvas.createCanvas(540, 960); canvas.setTextSize(3); canvas.pushImage(LEFT_INDEXX, UPPER_INDEXY ,PIC_SIZE,PIC_SIZE,ImageResource_1_250x250); canvas.pushImage(RIGHT_INDEXX, UPPER_INDEXY ,PIC_SIZE,PIC_SIZE,ImageResource_2_250x250); canvas.pushImage(LEFT_INDEXX, MIDDLE_INDEXY ,PIC_SIZE,PIC_SIZE,ImageResource_3_250x250); canvas.pushImage(RIGHT_INDEXX, MIDDLE_INDEXY ,PIC_SIZE,PIC_SIZE,ImageResource_4_250x250); canvas.pushImage(LEFT_INDEXX, LOWER_INDEXY ,PIC_SIZE,PIC_SIZE,ImageResource_5_250x250); canvas.pushImage(RIGHT_INDEXX, LOWER_INDEXY ,PIC_SIZE,PIC_SIZE,ImageResource_6_250x250); canvas.pushCanvas(0,0,UPDATE_MODE_GC16); // タッチパネルの準備 M5.TP.SetRotation(90); // mp3初期設定 pinMode(swrxPin, INPUT); pinMode(swtxPin, OUTPUT); mp3.begin(9600); delay(100); SelectPlayerDevice(0x02); // Select SD card as the player device. SetVolume(0x1E); // Set the volume, the range is 0x00 to 0x1E. } // 写真番号に応じた動作 void touchAction(int picNumber){ SpecifyMusicPlay(picNumber); Serial.printf("x:%d\r\n", picNumber); } // 領域内をタッチしたかどうか判定 bool InsideSquare(int squareIndexX, int squareIndexY, int picSize, int touchX , int touchY) { if(touchX < squareIndexX) return false; if((squareIndexX + picSize) < touchX) return false; if(touchY < squareIndexY) return false; if((squareIndexY + picSize) < touchY) return false; return true; } // どの写真を押したかチェック int CheckTouchPicture(int touchX , int touchY) { int index = 0; if(InsideSquare(LEFT_INDEXX, UPPER_INDEXY ,PIC_SIZE, touchX, touchY)) index = 1; else if(InsideSquare(RIGHT_INDEXX, UPPER_INDEXY ,PIC_SIZE, touchX, touchY)) index = 2; else if(InsideSquare(LEFT_INDEXX, MIDDLE_INDEXY ,PIC_SIZE, touchX, touchY)) index = 3; else if(InsideSquare(RIGHT_INDEXX, MIDDLE_INDEXY ,PIC_SIZE, touchX, touchY)) index = 4; else if(InsideSquare(LEFT_INDEXX, LOWER_INDEXY ,PIC_SIZE, touchX, touchY)) index = 5; else if(InsideSquare(RIGHT_INDEXX, LOWER_INDEXY ,PIC_SIZE, touchX, touchY)) index = 6; return index; } // 0:タッチなし // 1~6:写真をタッチ int checkTouch(void){ int index = 0; if(M5.TP.avaliable()){ if(!M5.TP.isFingerUp()){ M5.TP.update(); tp_finger_t FingerItem = M5.TP.readFinger(0); index = CheckTouchPicture(FingerItem.x,FingerItem.y); } if(index != 0 && preIndex != index){ preIndex = index; return index; }else{ // 更新なし return 0; } } return 0; } int totalMsec; void loop() { int picIndex = checkTouch(); if(picIndex != 0){ touchAction(picIndex); totalMsec = 0; } // 押したことを初期化 if(preIndex != 0){ if(totalMsec < BUTTON_RESET_MSEC){ totalMsec = totalMsec + DELAY_MSEC; }else{ preIndex = 0; totalMsec = 0; } }else{ preIndex = 0; totalMsec = 0; } delay(DELAY_MSEC); } ``` ## 接続 1. Grove MP3モジュール v2.0にmicroSDカードを差し込む 1. M5PaperのPort.AとGrove MP3モジュール v2.0をGroveで接続する 1. M5Paperにプログラム書き込み ![接続したようす](https://camo.elchika.com/4079071341332c551cd68a0f6ef34869b92f4313/687474703a2f2f73746f726167652e676f6f676c65617069732e636f6d2f656c6368696b612f76312f757365722f66643265623836652d623336622d343438652d383961342d6164366436373031303335312f37333866313463352d623136392d346264652d383436642d353131326130366463616137/) ## 動作のようす 親族の顔をタッチすると、呼称が音声で流れます。

-

[動作のようす](https://www.youtube.com/watch?v=HCt8nCjUJwE&feature=youtu.be)

+

@[youtube](https://www.youtube.com/watch?v=HCt8nCjUJwE&feature=youtu.be)