M5PaperでVolumioリモコンを作るよ！③

IT、それはインフォメーション・テクノロジー（意味なし）

↑のつづきでーす☆

さあて、みりみり進化させていきますよー☆

ステイタス表示

まず、前回空欄だった中央の四角いとこに情報を表示させていきたいわけです。

Volumioの曲のステイタス情報は、

"《VolumioURL》/api/v1/getState"

をたたくと（http-getで呼び出すと）お返事してくれます。

なので、さくっと

void MusicInfo(){
	string CmdStr = VolumioURL;
	String res_str;
 
	HTTPClient http;
	CmdStr += "/api/v1/getState";
	http.begin(CmdStr.c_str());
	//http.begin("http://192.168.1.86/api/v1/getState");

	int httpCode = http.GET();
	if (httpCode > 0) {
	  res_str = http.getString();
	  //以降、データに応じた処理
	  Serial.println(res_str);
	} else {
	  Serial.println("Error on HTTP request");
	}
	http.end();

}

こんな関数をつくって呼び出してみます。

お返事はシリアル通信で教えてもらうことにしました。

メモ：VS Code+PlatformIOのシリアルモニタ

CTRL＋Shift＋P または、「表示」ー＞「コマンドパレット」で、

PlatformIO: Serial Monitor でシリアル通信のモニタができます。

モニタ結果

こんなかんじでVSCodeのターミナル部分にでてきます。

内容は

{"status":"pause","position":1,"title":"Peace of Mind","artist":"Boston","album":"Boston","albumart":"/albumart?cacheid=223&web=Boston/Boston/extralarge&path=%2FNAS%2Fpub2%2FBoston%2FBoston&metadata=false","uri":"mnt/NAS/pub2/Boston/Boston/02 Peace of Mind.mp3","trackType":"mp3","seek":9248,"duration":302,"samplerate":"44.1 kHz","bitdepth":"24 bit","channels":2,"random":null,"repeat":true,"repeatSingle":false,"consume":false,"volume":14,"disableVolumeControl":false,"mute":false,"stream":"mp3","updatedb":false,"volatile":false,"service":"mpd"}

こう、これを見やすく成形すると

{
"status":"pause",
"position":1,
"title":"Peace of  Mind",
"artist":"Boston",
"album":"Boston",
"albumart":"/albumart?cacheid=223&web=Boston/Boston/extralarge&path=%2FNAS%2Fpub2%2FBoston%2FBoston&metadata=false",
"uri":"mnt/NAS/pub2/Boston/Boston/02 Peace of Mind.mp3",
"trackType":"mp3",
"seek":9248,
"duration":302,
"samplerate":"44.1 kHz",
"bitdepth":"24 bit",
"channels":2,
"random":null,
"repeat":true,
"repeatSingle":false,
"consume":false,
"volume":14,
"disableVolumeControl":false,
"mute":false,
"stream":"mp3",
"updatedb":false,
"volatile":false,
"service":"mpd"
}

てななかんじになってます。

BostonってアーティストのBostonってアルバムの"position":1 ＝一曲目、曲タイトルは"Peace of  Mind"、などなど、美味しい（知りたい）情報がたんまりと帰ってきます。これを利用させてもらいましょー☆

まず表示

表示枠情報用の構造体

rect_t infoRect={
 100, 220, 350, 350
};

を用意して、先ほどの関数に

 // 既存 canvas の削除
canvas.deleteCanvas();
// 新規 canvas の生成 （幅 350 x 高さ 25 [pixel]）
canvas.createCanvas( infoRect.w, infoRect.h);

//canvas.drawString(res_str, 0, 0);
canvas.println(res_str);

// canvas.drawRoundRect(0, 0, 350, 350, 5, 15);
canvas.drawRoundRect(0,0, infoRect.w, infoRect.h, 5, 15); //枠書き直し

canvas.pushCanvas(infoRect.x, infoRect.y, UPDATE_MODE_DU4);

をいれこみます。

※ちなみに、drawString ではCanvasをはみ出しても（表示はされませんが）長い文字列は改行されずにそのままです。が、println では表示枠いっぱいまで来たら改行（LF動作）して次行に自動ですすんでくれます。便利！（スクロールまではしないもよう）
なので、今回はprintlnを使用します。

するってぇと（江戸っ子）

どん

いえーい☆　情報表示されてますねー♪

では、ここからホシイ情報をとりだしていきます。

必要情報の取り出し

長いinfo文字列から情報を取り出す関数をつくります

// in_str中から S_strを探し、その,次の””でくくられたStringを返す
String InfoGet(String in_str, String S_str){
       String ret_str = "";
       int l = in_str.indexOf(S_str);
         //Serial.println(l);
       if(l>0){
         int l2 = in_str.indexOf("\"",l+S_str.length()+3); // +3は、検索対象の後ろの ",:" の分。
         //Serial.println(l2);
         ret_str = String( in_str.substring(l+S_str.length()+3,l2));
         //Serial.println(l2);
         // canvas.println(in_str.substring(l+S_str.length()+3,l2));
         
       }      
       return(ret_str);
}

↑こんなん。

これを、

        String title_str = InfoGet(res_str,"title");
       canvas.println("TITLE:");
       canvas.println();
       canvas.println(title_str);
       canvas.println();

       String album_str = InfoGet(res_str,"album");
       canvas.print("ALBUM:");
       canvas.println(album_str);
       canvas.println();

       String artist_str = InfoGet(res_str,"artist");
       canvas.print("artist:");
       canvas.println(artist_str);
       canvas.println();

こういうふうに呼び出せば……

いえーい！　いいかんじ！（まだちょっと見た目しょぼいけど）

しかぁし！、ここで問題発生！

日本語はダメ！？

うきうきしながら別の曲を聞いてみると……

こんなかんじにバケラッタ＞＜

ちなみに

"title":"一万二千年の恋","artist":"AKINO","album":"創聖のアクエリオン"

が表示されるのが正しいわけなのですが……

ここで日本語表示について検索ッ！　をして、ほうほう、こうやるのね。と勉強しながらいろいろと試してみたのですが…

なんでかSDカードに保存したフォントが読めず苦戦中＞＜

[E][vfs_api.cpp:27] open(): GenSenRounded-R.ttf does not start with /
FT_Stream_Open: opened `GenSenRounded-R.ttf' but zero-sized
[E][font_render.c:87] font_face_init_fs(): New face failed: 0x2
[E][In_eSPI.cpp:5987] loadFont(): Font load faild.

↑SD読めてるのにフォントないって・・・なぜー？？

なんでかなー。というところで今日はここまで！

次回、日本語が読めるようになると良いですねえー＞＜

#M5Paper #スマートリモコン #Volumio #リモコン自作 #M5 #らせん工房