公開日：2025/01/11

33rd Season

#33-2　SPI-TFTをBlocklyで使う

　Cmod A7ボード(FPGA)を使って、オリジナル16ビットCPUコアMoscoviumの開発を進めています。

　前回までに、SPI-TFT表示器をCmod A7ボードのPMODコネクタに接続するアダプタボードや、その状態でSPI-TFT表示器を制御するためのハードウェア(SPI-TFT制御STFT61ユニット)を設計完了しました(下図)。



　今回は、ソフトウェア視点👁️からSPI-TFTを使い易くするため、Blockly for Moscoviumにカスタムブロックを追加して行こうと思います。

SPI-TFT用カスタムブロック

　まず、SPI-TFT表示器を制御するのに最低限必要なブロックを考え、そこから、あると便利なブロックへと考えを巡らせながら、まとめてみました。

　　SPI-TFT制御用カスタムブロック目標仕様：

• 初期化、SPI-TFT制御：
• SPI-TFT制御STFT61ユニットを初期化して、
• PMODコネクタに接続したアダプタボード＋SPI-TFT表示器を初期設定する。
• バックライトLEDの明るさを制御する。
• ユーザがSPI-TFT表示器を直接制御できる様、SPI通信でコマンドの送受信ができる。
• グラフィックス描画：
• 任意の座標に、任意の色で点を描画する。
• ラスタグラフィックスの基本機能。
• これさえ実現しておけば、直線描画だろうが円描画だろうが、プログラム次第で何とでもなる。
• 矩形描画ブロックくらいは作っておく。
• 一般的なRGB888(RGB各0〜255の数値で24ビットフルカラーを表現)から、SPI-TFTのRGB565ピクセル値(65,536色)に変換する。
• SPI-TFTのビデオRAMからピクセル値を読み出す。
• 文字列描画：
• 文字列を描画する。
• 描画文字座標や色を指定する。
• 日本語フォントFONTJPユニットを使って、S-JIS符号化された日本語文字列を描画できる。
• FONTJPユニットのアフィン変換を指定可能。

　描画ルーチンは、最低限の点描画ブロックと、矩形描画ブロックだけ作っておきますので、その他の描画機能(円や直線など)は、各自作成！で、お願いいたしますｍ（１＾＿＾；）ｍ。

作成したカスタムブロック

　目標仕様に基づき、具体的イメージに落とし込んで作成したカスタムブロックは、以下図の様になりました。



　詳細は、こちらのリンクからご確認ください。

Blockly.XML→Moscovium.ASM変換環境更新

　Blockly.XML→Moscovium.ASM変換スクリプトおよび、ランタイムライブラリを更新すると共に、SPI-TFTを制御するライブラリファイルを追加しました。まとめて、こちらからダウンロードしてください。

　Blockly for Moscovium開発環境の構築については、こちらの記事をご参照ください。既に環境を立ち上げ済みの場合でも、今回の拡張に伴い、以下のファイルを更新する必要があります。

• blockly\mcvm\code\index.html
• blockly\mcvm\code\mcvm_blocks.js
• blockly\mcvm\code\mcvm_custom.js

　以下のバナーからGitHubにアクセスすることも可能です。

直線描画関数

　今回追加したSPI-TFT制御ライブラリでは、ラスタグラフィックスの基本である点描画機能と、矩形描画機能に対応しています。応用でSPI-TFTに図形を描画する時、斜めの直線くらいは引きたくなるだろうと想像し、Blocklyで直線描画関数を起こしておきました。

　直線描画アルゴリズムについて、以下に解説しておきます。

　　直線描画アルゴリズム：

• 直線(px1，py1)−(px2，py2)を、直線の方程式y＝a×x＋bにて描画するアルゴリズムを作成する。
• 最初に、px1≦px2となる様、始点(px1，py1)と終点(px2，py2)を交換する。
• 始点(px1，py1)を原点(0，0)と見なし、局所座標系変換して描画すると、
• 直線の方程式に於いて切片b＝0となる。
• この時、傾きa＝(py2−py1)÷(px2−px1)である。
• px1＝px2：
• 縦の直線なので、box fillサブルーチンをコールして終了。
• 幅1の矩形を描画する。
• 傾きaの分母が0となる場合なので、例外処理しておかないと、以下の演算が成立しない。
• px1≠px2：
• py1＝py2の場合、横の直線なので、例外処理しても良い。
• 傾きaの分子が0となる場合だが、演算としては成立する。
• そのまま放置しても正しい線が引ける。
• → 無理に例外処理しなくても良い。
• 例外処理した方が、水平線描画を高速化できる。
• けど、一点(水平線の場合)だけ高速化したところで旨味は無いため、今回は放置した。
• qy＝0に初期化。
• px＝0 → (px2−px1)のループを回す：
• py＝px×(py2−py1)÷(px2−px1)
• py＝qy：
• (px＋px1，py＋py1)に点描画。
• py≠qy：
• (px＋px1，qy’＋py1)〜(px＋px1，py＋py1)まで縦の直線を描画。
• ここで、qy’＝(py2−py1＜0)？qy−1：qy＋1
• 綺麗な線を描画する肝↑。
• qy＝pyとする。
• px＋＋してループ。

　上のアルゴリズムで、一応、それらしき線は描画できます。ただし、ほぼ水平だったり、ほぼ垂直の線を描画する場合等、均整の取れた綺麗な線とは、ならない場合があります。また、ドット毎に乗・除算を実行しているため、描画も、あまり速くありません。
　ラスタグラフィックスの直線描画アルゴリズムは、Bresenham直線描画が有名です。Bresenhamの方が速いし、線も綺麗なので、本格的に綺麗な線を引きたいなら、Bresenhamを学習する事を推奨いたします。筆者のアルゴリズムだと、まだ、4〜5歩足りてません（１＾＿＾；）。

動作検証用プログラム

　BlocklyでSPI-TFTを制御する参考プログラムを以下にリンクしておきます。

　　参考プログラム：blky_spi_tft.xml

※ブラウザによっては、XMLファイルをレンダリングして表示してしまうので、「右クリック ⇒ リンク先を保存」などしてください。

　Blockly for MoscoviumのXMLタブに貼り付けて、ご覧ください。
　Blockly.XML→Moscovium.ASM変換手順を参照して、Moscoviumマイコンに書き込んでください。
　プログラムが大きくなったせいで、アセンブル時間が増大しています。手元の環境では10分以上かかっていますので、気長にお待ちください。

　プログラムを書き込んだMoscoviumマイコンが起動すると、シリアルモニタから以下のコマンドを受け付ける様になっています。

　　シリアルモニタコマンド仕様：

• demo[,<demo#>]
• <demo#>＝0：　全てのデモを順次実行します。
• <demo#>を省略した場合のデフォルトです。
• <demo#>＝1：　文字列「こんにちは、世界」を、アフィン変換や色を変えながら描画します。
• <demo#>＝2：　中央に塗りつぶし矩形を描画し、ビデオRAMからピクセル値を読み出します。
• <demo#>＝3：　中央に枠線矩形を描画し、ビデオRAMからピクセル値を読み出します。
• <demo#>＝4：　ランダムに文字を描画します。
• <demo#>＝5：　ランダムに点を描画します。
• <demo#>＝6：　ランダムに矩形を描画します。
• <demo#>＝7：　ランダムに直線を描画します。
• <demo#>＝8：　バックライトLEDの輝度を変化させます。
• prn,<string>
• 文字列<string>を描画します。
• <string>には、"\x<HEX2>"形式のバイナリデータを埋め込むことができます。
• <HEX2>は、2桁の16進数です。
• こちらの制御コードを使って、描画文字座標や色、等を指定する事が可能です。
• who
• help

　SPI-TFT制御ブロックの動作確認用なので、特に何の機能も御座いません。各【demo】コマンドによって、今回実装したSPI-TFT制御ブロックを粗方使っています。これをCmod A7ボード(FPGA)へ書き込み、実際の動作で確認するのが目的です。

SPI-TFTブロックの実験

　こちらを参照して、SPI-TFT制御STFT61ユニットを搭載したマイコンMSOC115TF3208をCmod A7ボード(FPGA)に書き込んでください。
　Cmod A7ボード、アダプタボード、SPI-TFTを、こちらと同様に接続して実験します。Blocklyで作成したこちらのプログラムを書き込んだら準備完了です。

　以下図に、実験中の様子を示します。




　実験を進めて行きましょう。

　　実験サンプル：【 】内はシリアルモニタからの送信データ
　　【demo】
　　OK+ demo,1
　　OK+ pix(32,32)=0x041f (0x041f=orange)
　　OK+ demo,2
　　OK+ pix(64,64)=0x8410 (0x8410=gray)
　　OK+ demo,3
　　OK+ pix(0x89,0xab,0xcd)=0xcd51 (0xcd51)
　　OK+ chars N=10765
　　OK+ demo,4
　　OK+ pix(0x80,0x40,0x20)=0x2210 (0x2210)
　　OK+ dots N=0x8a2e
　　OK+ demo,5
　　OK+ pix(0x12,0x34,0x56)=0x51a2 (0x51a2)
　　OK+ boxes N=1332
　　OK+ demo,6
　　OK+ pix(0x3f,0xff,0x7f)=0x7fe7 (0x7fe7)
　　OK+ lines N=2238
　　OK+ demo,7
　　OK+ demo,8
　　OK+ demo,9
　　OK: demo

　SPI-TFTへの日本語文字列描画や図形描画に混じって、時折、SPI-TFTのビデオRAMからピクセル値を読み出したり、RGB888からBGR565ピクセルに変換したりした結果をシリアルモニタへ送信して来ます。……動作検証を兼ねたデモであるためです。
　丸括弧「()」の中が机上計算した期待値なので、期待通りの値が読み出せていることが判ります。

　ランダムに描画するデモでは、5s間に描画した図形の数(N＝？)を報告して来ます。それぞれ、乱数を使っており、描画サイズによって描画時間が異なるため参考データですが、以下にまとめておきます。

• 文字描画は、10,765文字÷5s≒2,150[文字/s]
• 点描画は、0x8a2e＝35,374点÷5s≒7,000[点/s]
• 塗りつぶし矩形描画は、1,332個÷5s≒250[個/s]
• 送信するピクセルデータ数が多いため、描画は遅い模様。
• 原理的には、8×8[ドット]程度の小さい塗りつぶし矩形なら、文字描画(8×8[ドット])と同等の処理時間だと考えられる。
• 直線描画は、2,238本÷5s≒450[本/s]
• Blocklyでプログラムした独自アルゴリズムの直線描画。
• Blockly for Moscoviumは、腐ってもコンパイラなので、十分実用的なスピードが出ている様だ。

　では、デモの様子を動画でご確認ください。



　実時間再生(早送り無し)の動画ですので、描画速度にもご注目ください。

ビデオRAMの読み出し

　SPI-TFT表示器(ドライバチップはST7735R)のビデオRAM(V-RAM)からデータを読み出すと、RGB666(約26万色)データとなります。ST7735Rデータシートによると、V-RAMから読み出したデータは1ドット当たり、8ビットデータ×3個(R，G，B)です。各データは8ビットの左詰めで上位ビットから6ビットが有効な値と記載されています。

　だがしかし、実際に読み出してみたところ、確かに8ビットデータ×3個が読み出せるのですが、データは中途半端に、ビット6〜1の6ビットが有効だと判明しました。かつ、範囲外のビットも0ではなく、と言って1でもなく、ごみ(？)が乗っている様に見えます。
　と、言う事で、データシートの言う通りに実装してしまうと正しいデータが読み出しできないため、実際の動作に合わせてSPI-TFT制御ライブラリを実装してあります。

　以下コード部分が、データシート記載内容と祖語のある部分です。

　　_stft_getpix_r1_r0:
　　：
　　：　(中略)
　　：
　　# ATTN! The ST7735R datasheet states that the pixel data
　　#　in the RAMRD command is left aligned RGB666 in RGB888 format,
　　#　but the actual response seems to not be.
　　lsli　r0,1
　　lsli　r1,1
　　lsli　r2,1
　　andi　r0,0xfc
　　andi　r1,0xfc
　　andi　r2,0xfc
　　#

　あんまり、V-RAMからのデータ読み出しなんて使わないかもしれませんね？ですが、V-RAMからの読み出しができると、背景の図形に重ねてアイコンや文字を描画するとか、半透明な図形を描画するとか、描画した図形データをSPI-TFTから読み出して保存するとか、使い道は有るので、実装しておきました。


　FPGAボードで開発中のオリジナル16ビットCPUコアMoscoviumで使いたいと思い、購入したSPI-TFTですが、アダプタボードや開発環境(Blockly)でのサポートによって、圧倒的に使い易くなりました。美味。