LCDモジュールを使ったレベルメータの製作(5)

このページをスマホなどでご覧になる場合は、画面を横長にする方が読みやすくなります。
目次へ  前のページへ (1) (2) (3) (4) (5) 次のページへ
2014年11月09日 公開。
2015年08月15日 MGLCDライブラリのバージョンによってBMP2Hフォルダの位置が変わる事に言及。

10.オリジナルの絵柄のレベルメータの作り方

はちゅねミクがネギを振るレベルメータは、MGLCDライブラリのビットマップ転送の機能を使って、アニメーションを実現しています。ここでは、ビットマップ画像を書き換えて、オリジナルの絵柄のレベルメータを作る方法を説明します。なお、この記事は、Windows環境でArduinoの開発をしている前提で書いています。

10-1.アニメーション表示の原理

はちゅねミクがネギを振るレベルメータは、音量に応じて、以下の9種類のビットマップ画像を切り替えて表示する仕組みになっています。(原寸のままでは、ウェブサイトで表示するには小さすぎるので、縦横各3倍に拡大して表示しています)

図11、miku0.bmp
図11、miku0.bmp
図12、miku1.bmp
図12、miku1.bmp
図13、miku2.bmp
図13、miku2.bmp
図14、miku3.bmp
図14、miku3.bmp
図15、miku4.bmp
図15、miku4.bmp
図16、miku5.bmp
図16、miku5.bmp
図17、miku6.bmp
図17、miku6.bmp
図18、miku7.bmp
図18、miku7.bmp
図19、miku8.bmp
図19、miku8.bmp

これらのビットマップファイルは、レベルメータのスケッチのフォルダの中の、bmpというフォルダにあります。(例えば、ユニバーサル基板版レベルメータの場合は、S12232ZA_LEVEL_METER5\bmpというフォルダにある)

図20、bmpフォルダ内のmiku0.bmp~miku8.bmp
図20、bmpフォルダ内のmiku0.bmp~miku8.bmp

これら9枚のビットマップ画像は全て横100×縦32ピクセルのサイズで、白と黒の2色のみを使って描かれています。ファイル名はmiku?.bmpという形式(?のところには0~8の数字が入る)となっていますが、数字が小さいほど小さな音量に、数字が大きいほど大きな音量に対応しています。

これらのビットマップ画像は、そのままではArduinoのスケッチが読み込む事ができませんので、C++のヘッダファイルに変換します。変換の方法は後で説明しますが、変換した結果が、スケッチのフォルダの中の、miku0.h~miku8.hというファイルです。

図21、miku0.bmpの内容
図21、miku0.bmpの内容

miku0.hの中身を見れば分かるように、ビットマップ画像は、PROGMEM unsigned char型の1次元配列で表現されています。

スケッチのメインファイル(.inoファイル)は、次の様に、各画像の配列の宣言を#include指令でインクルードしています。

図22、ビットマップ画像のインクルード
図22、ビットマップ画像のインクルード

以上の説明から分かるように、miku0.h~miku8.hを、オリジナルの画像を変換したものに差し替えれば、自分の好みの絵柄のレベルメータに作り変える事ができます。

広告

10-2.画像を用意する

オリジナルの絵柄のレベルメータを作るには、まず横100×縦32ピクセルの、白と黒のみを用いたビットマップ画像を用意する必要があります。Windowsに標準で付いてくるペイントなどで、画像を描いて下さい。Windows 7の場合は、スタート→すべてのプログラム→アクセサリ→ペイントと選べば、ペイントが起動します。

図23、ペイントの起動
図23、ペイントの起動

本来は、ここで皆さんに絵を描いていただきたいのですが、とりあえずビットマップ画像の差し替え方法を確認してみたい方のために、サンプルの画像を用意しました。

図24、差し替え用miku0.bmp
図24、差し替え用miku0.bmp
図25、差し替え用miku1.bmp
図25、差し替え用miku1.bmp
図26、差し替え用miku2.bmp
図26、差し替え用miku2.bmp
図27、差し替え用miku3.bmp
図27、差し替え用miku3.bmp
図28、差し替え用miku4.bmp
図28、差し替え用miku4.bmp
図29、差し替え用miku5.bmp
図29、差し替え用miku5.bmp
図30、差し替え用miku6.bmp
図30、差し替え用miku6.bmp
図31、差し替え用miku7.bmp
図31、差し替え用miku7.bmp
図32、差し替え用miku8.bmp
図32、差し替え用miku8.bmp

これらの画像は、下のリンクをクリックして、ファイルを適当な作業用フォルダにダウンロードしてください。

レベルメータ用サンプルビットマップ LMBmpSample.zip (5kB)

なお、ご自分でビットマップ画像を描かれた方は、画像のサイズが100X32ピクセルであることを確認して、ビットマップファイル(拡張子.bmp)として、適当な作業用フォルダに保存してください。モノクロビットマップでも、16色ビットマップでも、256色ビットマップでも、24ビットビットマップでもかまいません。ファイル名はmiku0.bmp~miku8.bmpとしてください。

図33、画像サイズの確認
図33、画像サイズの確認
図34、ビットマップ画像として保存
図34、ビットマップ画像として保存

10-3.画像をヘッダファイルに変換する

ビットマップ画像をヘッダファイルに変換するBMP2Hというソフトが、MGLCDライブラリに付属しています。MGLCDライブラリをインストールしたフォルダの中に、BMP2Hというフォルダがあるはずです。(MGLCDライブラリのバージョンによってはextrasというフォルダがあり、さらにその中にBMP2Hというフォルダがある) その中のBMP2H.exeがBMP2Hの実行ファイルです。このソフトはWindows XPおよびWindows 7の32ビット版で動作確認をしていますが、おそらくWindows VistaやWindows 8でも動作するでしょう。

図35、BMP2H.exeの起動
図35、BMP2H.exeの起動

BMP2H.exeを起動して、Load BMP file...と書いたボタンをクリックしてください。

図36、BMP2H.exeの起動時の画面
図36、BMP2H.exeの起動時の画面

次に、開いたダイアログボックスで、先ほどダウンロード(または作成)した、miku0.bmpを選択してください。

図37、miku0.bmpの選択
図37、miku0.bmpの選択

すると、miku0.bmpの画像が表示されますので、画像を確認した上で、Create header file...のボタンをクリックしてください。

図38、画像の確認とヘッダファイルへの変換
図38、画像の確認とヘッダファイルへの変換

miku0.bmpのヘッダファイルへの変換が行われ、Created a header file.のメッセージが表示されます。OKファイルをクリックしてください。

図39、変換終了時のメッセージ
図39、変換終了時のメッセージ

miku0.bmpと同じフォルダに、miku0.hというファイルができているはずです。

図40、変換後のファイル(miku0.h)
図40、変換後のファイル(miku0.h)

同様に、Load BMP file...ボタンでビットマップ画像を選び、Create header file...ボタンでヘッダファイルに変換して、miku1.h~miku8.hも作成してください。

10-4.画像を入れ替えたスケッチを書き込む

この様にして出来たヘッダファイルを、レベルメータのスケッチのフォルダのmiku0.h~miku8.hに上書き保存すれば、画像の差し替えは完了です。後は、各レベルメータの製作記事の説明参考に、レベルメータのマイコン(Arduino)にスケッチを書き込んでください。オリジナル画像のレベルメータが動作するはずです。

図41、スケッチの書き込み
図41、スケッチの書き込み
写真35、アニメーションを入れ替えたレベルメータ
写真35、アニメーションを入れ替えたレベルメータ

画面右側の「測音ミク」のスクロール表示については、書き換え方を詳しくは説明しません。各自研究してください。logo0.bmp~logo7.bmpを書き換えれば、この部分も書き換えることができます。

目次へ  前のページへ (1) (2) (3) (4) (5) 次のページへ

このページで使われている用語の解説

関連ページ

関連製品

LCDレベルメータ 商品名 LCDレベルメータ
税抜き小売価格 3500円
販売店 スイッチサイエンス
サポートページ
S12232ZA 商品名 S12232ZA
税抜き小売価格 400円
販売店 スイッチサイエンス
サポートページ
122X32モノクログラフィックLCDシールド 商品名 122X32モノクログラフィックLCDシールド
税抜き小売価格 3333円
販売店 スイッチサイエンス
サポートページ
Arduino Uno用ブートローダスケッチライタシールドキット 商品名 Arduino Uno用ブートローダスケッチライタシールドキット
税抜き小売価格 1440円
販売店 スイッチサイエンス
サポートページ
Arduino用ブートローダ/スケッチライタキット 商品名 Arduino用ブートローダ/スケッチライタキット
税抜き小売価格 3000円
販売店 スイッチサイエンス
サポートページ
Arduino 電子工作
このサイトの記事が本になりました。
書名:Arduino 電子工作
ISBN:978-4-7775-1941-5
工学社の書籍の内容の紹介ページ
本のカバーの写真か書名をクリックすると、Amazonの書籍購入ページに移動します。