スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

WAVプレーヤーの製作(その9 短縮ファイルリスト表示と透過画像)

WAVプレーヤーの製作、変わってstm32マイコンの学習 になってしまっているが、引き続き短縮ファイルリスト表示と、画面に趣を与える透過画像の表示が今回のお勉強でした。

【作った画面】
stm32_proj_30.jpg

バックが黄色ですが、最終的には背景画像を作りたいと思ってます。今回の透過画像の勉強はそれの前段かな。
今回のテーマとやったことを記載します。

1.表示用ファイル名(全て2バイト文字で表示が収まらない長いファイル名は短縮する)
  一行目の「01_マディソン郡の恋(Pi….mp3 の…部分が短縮した部分になります。
  いつものことですが、「C言語でも文字列処理」がお勉強課題でした。

2.リストの先頭にある、♪と右上、右下にあるダブル矢印が透過画像です。
  まだ私には透過画像が作れないので、Motion Player Project からお借りしました。
  バイナリー形式のRGB565画像の組み込み方法、表示の方法を重点課題でした。

------------ 以下、備忘録です ------------

1) ファイルリストのように複数の文字列を2次元配列の文字列として扱う場合の処理の方法

  ・mojiretu[ ][ ] として扱う場合は、mijiretu[ファイル数][文字数] として配列を宣言し、文字列として指定
   するときはmojiretu[ファイル位置] で行う。([文字数]部分は[0]として表記しない)
  <例>
      // fnameを初期化
      memset(fname[i],'\0',strlen(fname[i]));

  ・mojiretu[ ][ ] に他の文字列(今回はFatFSから取得したファイル名 fn)からコピーするときは1文字
   ずつコピーする。
   <例>
       for(j = 0; fn[j] != '\0'; j++)       // FatFSから取得した文字列先頭から'\0'以前までを
         {
            fname[num_fname][j] = fn[j];  // 1文字ずつを2次元配列にコピーする
         }
       fname[num_fname][j] = '\0';    // この時点でj は'\0'位置に繰り上がっているので'\0'を入れる

2) 短縮文字の作り方

  ・全角半角が入り混じっていると文字の切れ目を探すのが煩雑のため、全て全角に変換しておく
   (前回のhan2zen関数を使用)
  ・処理コードを見易くするためと、元の文字列を壊さないように、処理をする2次元配列文字列を
   temp[ ] 文字列にコピーしておく
  ・元の文字列から任意の文字数を、挿入する文字列の任意の位置にコピーするにはmemcpy関数を
   使う。

  <例>
        //temp2の半角30文字以降へtempの右半角8文字(全角4文字)を代入
          memcpy(temp2+30, temp+strlen(temp)-8, 8);

3) 透過画像の扱い方

  ・バイナリ画像データ(*.bin)の画像表示方法

   フリー画像ソフト GIMP2 を使う方法を使いました。
   今回使用させて頂いた画像は*.binという拡張子が付いていますが、これを*.data に変更します。
   GIMP2(ver2.8)でインポートします。
   stm32_proj_31.jpg

   画像サイズを指定します。画像の種類をRGB565にします。
   stm32_proj_32.jpg

  ・プログラムコードへの埋め込み方

   この方法は、Motion Player Project に詳細が記述されていますが、このプロジェクトが参照している
   chaNさんの32ビットへの誘いページもとても参考になりました。ここのcソースへの埋め込み を使いました。

   私が行った具体的な方法

   main.c にバイナリーファイルを埋め込むための定義 IMPORT_BIN を記述する。

   /* Import a binary file */
   #define IMPORT_BIN(sect, file, sym) asm (\
           ".section " #sect "\n"             /* Change section */\
           ".balign 4\n"                           /* Word alignment */\
           ".global " #sym "\n"               /* Export the object address to other modules */\
           #sym ":\n"                              /* Define the object label */\
           ".incbin \"" file "\"\n"                /* Import the file */\
           ".global _sizeof_" #sym "\n"      /* Export the object size to oher modules */\
           ".set _sizeof_" #sym ", . - " #sym "\n"    /* Define the object size */\
           ".balign 4\n"                           /* Word alignment */\
           ".section \".text\"\n")               /* Restore section */

   main.c の main()に、binファイルの埋め込みを記述する

    IMPORT_BIN(".rodata", "next_left_32x17.bin", icon_nextLeft); 
     // section, binファイル名, 呼称名
    IMPORT_BIN(".rodata", "next_left_32x17_alpha.bin", icon_nextLeft_alpha);

   main.cの定義エリアに呼称名の宣言を記述する

   extern const char icon_nextLeft[], _sizeof_icon_nextLeft[];
   extern const char icon_nextLeft_alpha[], _sizeof_icon_nextLeft_alpha[];

  ・透過画像表示

   表示をさせるには、以下のコードで行う。

   /*
   int startPosX: 描画開始X座標位置
   int startPosY: 描画開始Y座標位置
   int width: 画像の幅
   int height: 画像の高さ
   const uint16_t *d: 描画する画像へのポインタ
   const uint8_t *a: 描画する画像のアルファチャンネルへのポインタ
   */
   void LCDPutIcon(int startPosX, int startPosY, int width, int height, const uint16_t *d, const uint8_t *a)
   {
     int i, j, x, y = startPosY;
     float alpha_ratio;
     pixel_fmt_typedef pixel_fg, pixel_bg;

    #define F_INV_255 (1.0f / 255.0f) // アルファ率を求める係数

    for(i = 0;i < height;i++){
         x = startPosX;
         for(j = 0;j < width;j++){
             //LCDSetGramAddr(x, y); // ピクセル描画位置指定
             Write_Command(0x004E,y);
             Write_Command(0x004F,320-1-x);
             //LCDPutCmd(0x0022); // 読み書きコマンド発行
             //LCD->RAM; // ダミーリード
             Write_Command(0x0022,LCD->Data);
             pixel_bg.color.d16 = LCD->Data; // バックグラウンドカラーを取得
             pixel_fg.color.d16 = *d++; // フォアグラウンドカラーを取得
             alpha_ratio = *a++ * F_INV_255; // アルファチャンネルからアルファ率を算出

            // フォアグラウンドカラーの各色成分にアルファ率掛ける
             pixel_fg.color.R *= alpha_ratio;
             pixel_fg.color.G *= alpha_ratio;
             pixel_fg.color.B *= alpha_ratio;

            // バックグラウンドカラーの各色成分に(1 - アルファ率)掛ける
             pixel_bg.color.R *= (1.0f - alpha_ratio);
             pixel_bg.color.G *= (1.0f - alpha_ratio);
             pixel_bg.color.B *= (1.0f - alpha_ratio);

            // フォアグラウンドとバックグラウンドを合成
             pixel_fg.color.R += pixel_bg.color.R;
             pixel_fg.color.G += pixel_bg.color.G;
             pixel_fg.color.B += pixel_bg.color.B;

             //LCDSetGramAddr(x, y); // ピクセル描画位置指定
             Write_Command(0x004E,y);
             Write_Command(0x004F,320-1-x);
             //LCDPutCmd(0x0022); // 読み書きコマンド発行
             //LCDPutData(pixel_fg.color.d16); // 合成した色を16bit出力
             Write_Command(0x0022,pixel_fg.color.d16);
             x++;
         }
         y++;
     }
   }
   


さて、次はファイル名を選択して音楽を演奏させることと、その画面作りになります



     

スポンサーサイト
プロフィール

haiga

Author:haiga
私のブログへようこそ!
電気オンチが始めた自作オーディオです
2010/3/17 電子工作をプラスしました。

自作オーディオの楽しみ共有のため、私が作ったパーツ提供をしてます。質問や要望を遠慮なくコメント欄に書き込んでください。

FC2カウンター
その日1回目にアクセスいただいた方の総カウントです
最新記事
最新コメント
最新トラックバック
カテゴリ
月別アーカイブ
検索フォーム
RSSリンクの表示
リンク
ブロとも申請フォーム

この人とブロともになる

QRコード
QRコード
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。