前回は文字表示に成功しましたが、今回は**画像表示(BMPからRGB565への変換)**に挑戦しました。
結論から言うと、「色の反転」と「エンディアンの解釈」という2つの罠にハマり、かなりの時間を費やすことになりました。その試行錯誤の過程を記録します。
1. 最初の挫折:緑色が水色に化ける
まず、lcd-image-converter を使用してBMPをRGB565に変換し、画面に表示させてみました。 実験として「緑色(R:0, G:255, B:0)」の画像を読み込ませたところ、画面にはなぜか水色が……。
AIに相談すると「ビッグエンディアンとリトルエンディアンの違い」を指摘されますが、設定を変えても意図した色になりません。ここで「変換ツールが悪いのか、プログラムが悪いのか」を切り分けるため、自前でデータを作成することにしました。
2. 切り分け1:invert_diffpairs による色反転
まずは単純な白黒画像からスタートし、徐々に色を付けて検証した結果、PicoDVIの設定(dvi_serialiser_cfg)に原因があることを突き止めました。
const dvi_serialiser_cfg my_dvi_cfg = {
.pio = pio0,
.sm_tmds = {0, 1, 2},
.pins_tmds = {12, 16, 18},
.pins_clk = 14,
.invert_diffpairs = false // ← これが原因!
};
.invert_diffpairs が正しく設定されていないと、信号レベルで色が反転してしまいます。これを修正したことで、ようやく色の制御が土俵に乗りました。
3. 切り分け2:16bitデータの「並び順」の正体
次に、RGB565データのエンディアン問題を再検証しました。 自作のテストデータで display.drawRGBBitmap() の挙動を詳細に調べたところ、PicoDVIにおいては**16bitテーブルの値が下位バイト・上位バイトの順で格納されているときに正常に表示されることが判明しました。
最終調整:lcd-image-converterの設定
原因が特定できたので、最後は「赤・緑・青」それぞれの単色BMPを作成し、ツールの出力結果が先ほどの「成功データ」と一致するようにパラメーターを追い込みました。
- 色の反転問題: プログラム側の
.invert_diffpairsで解決 - バイト並び問題: ツールの
Byte Order設定を調整 - Matrixの並び問題:ツールのMatrix設定を調整
最終的に、狙い通りの色がディスプレイに再現されました。


ByteOrderをBig-Endianに変更。

MatrixのOperation1/2/3を変更





コメント