その他のGUI
前回のボタンに続いてその他のGUIを加えて、Web Radioが聴ける簡単なMedia Playerを作成します。
GUIの説明
ジュークボックスに下記の様にボタン（０から７）を設定しました。各ボタンに以下の機能を持たせます。
- スタート／ストップ （０）
- ボタンを押してスタート。その後もう一度押すとストップ
- Playerの状態を表示する窓を設置（５）
- 状態や接続ラジオ局名等を表示
- 将来的にここをタッチするとラジオ局の選択が出来る様にする。
- ボリュームの設定 （３，４，７）
- スライドバー（７）で大まかの値を指定
- 両端のボタン（３，４）で微調整を行う。ボリュームの値が １つ変わる
- ボリューム値の表示とMute機能（６）
- ボリュームの値を表示。
- ここをタッチすることでMuteのオンオフが出来る。
- ボタン１，２はリザーブ
- 今後使用しますが、今は使いません。
各ボタンに付いてオン・オフ用の画像を下記の様に準備しています。ボタン７はスライドバーなので画像は有りません。その代わりに位置に合わせて塗り潰しの長方形を描写しています。
下記はスケッチの主要部です。ボタンのオンオフに合わせて処理を行っています。
主要部
void loop()
{
uint16_t t_x, t_y;
bool pressed, flg_temp, flg_pause, flg_play, flg_mute;
int a,b,c;
int _vol;
draw_png(skin_no);
for(a = 0; a < btn_max; a++)
for(b = 0; b < 2; b ++)
btn_satate[a][b] = false;
flg_play = flg_mute = false;
_vol = 30;
prt_volume(_vol, flg_mute);
while(1){
pressed = tft.getTouch(&t_x, &t_y);
for (a = 0; a < btn_max; a ++) {
flg_temp = false;
if(pressed && btn_contains(a, t_x, t_y)) // tell the button it is pressed
flg_temp = true;
btn_press(a, flg_temp);
}
for (a = 0; a < btn_max; a ++) {
if(btn_justReleased(a)){
flg_temp = false;
switch(a){
case 0: // Start
if(flg_play){ // Stop
audio.stopSong();
print_msg("ストップ", TFT_BLUE);
flg_temp = flg_play = false;
}
else{
print_msg("接続中", TFT_BLUE); // Play
//audio.connecttohost("http://mp3.ffh.de/radioffh/hqlivestream.aac");
audio.connecttohost("http://www.wdr.de/wdrlive/media/einslive.m3u");
print_msg("スタート", TFT_BLUE);
flg_temp = flg_play = true;
}
break;
case 1: // none
case 2: // none
break;
case 3: // vol --
b = -1;
case 4: // vol ++
if(a == 4) b = 1;
_vol += b;
b = 1;
if(_vol < 0)
b = _vol = 0;
if(_vol > 100){
_vol = 100;
b = 0;
}
if(b){
prt_volume(_vol, flg_mute);
audio.setVolume(_vol);
}
break;
case 5: // Radio Station select
break;
}
if(a < 6) flash_png(a, flg_temp);
}
if(btn_justPressed(a)){
switch(a){
case 6: // mute
flg_mute = !flg_mute;
flash_png(a, flg_mute);
tft.setTextColor(TFT_BLUE, TFT_BLUE);
tft.setTextDatum(MC_DATUM);
tft.drawString(String(_vol), vol_numx, vol_numy, GFXFF);
b = _vol;
if(flg_mute) b = 0;
audio.setVolume(b);
break;
case 7: // volume slide Bar
_vol = (t_x - vol_sld_x) * 100 / vol_sld_w;
prt_volume(_vol, flg_mute);
b = _vol;
if(flg_mute) b = 0;
audio.setVolume(b);
break;
default: // other
flash_png(a, true);
break;
}
}
}
if(flg_play)
audio.loop();
}
}
- 16~102行：
while(1){が処理用メインループです- 17~23行： ここでボタンにタッチしたかどうかスキャンします
- 25~98行： 各ボタン処理ループ
- 26~70行： ボタンを離した時（
btn_justReleased(a))に行う処理- ボタンの番号とSwitchの case が対応しています。
- ボタン０，３，４，５はボタンを離した時に処理されます。
- 72~98行： ボタンを押した時（
btn_justPressed(a)）に行う処置- ボタンの番号とSwitchの case が対応しています。
- ボタン６，７はボタンを押した時に処理されます。
- ボタン１から５までは
btn_justPressed(a)でオンの画像を、btn_justReleased(a)でオフが描写されます。 - ボタン０，６はトグルスイッチの様になっていてフラグによって描写する画像を選択しています
- 26~70行： ボタンを離した時（
- 100~101行：ここでラジオが再生されます。
スケッチ全体をここに保存します。
実行前にフォントデータをSDカードに保存します。フォントデータはgenshin-regular-20pt.vlwからダウンロードしてSDカードにルートの下に”font”フォルダーを作ってそこに保存します。今後は必要なデータをSDカードに項目毎にフォルダーを作って保存して行きます。
準備が出来たらコンパイル、実行して下さい。フォントの読み込みに若干時間がかかり、その間LCDにが真っ黒なのでちょっと不安になりますがしばらくするとLCDが下記左の様になります。ボリュームの値を３０（MAX１００）としているので６の窓に３０が表示され、スライドバーが３０に合わせてピンクに塗り潰されています。
- ラジオの開始
- ボタン０にタッチする
- ５の窓にPlayerの状態が表示され最後に”スタート”と表示してラジオが始まります。
- ラジオ再生中ボタン０は赤になっています。
- Muteの確認
- ラジオ再生中にボタン６にタッチするとMuteがオン（消音）になります
- もう一度タッチするとオフになります
- ボリュームの設定
- スライドバー７にタッチすると位置に合わせてボリュームがセットされ６の窓に値が表示されます
- 左右のボタン（３，４）にタッチするとボリュームの値が１変化します。
- ラジオの終了
- ボタン０が赤い時（再生中）にもう一度タッチするとボタンは灰色になりラジオが終了します。
次回は
今回はラジオ局は固定でしたが、次回は登録されたリストからラジオ局を選択して聴ける様にして行きます。