ニコモジで表示してみる

emWinを使うことの利点のひとつが、日本語を比較的簡単に表示できることです。本記事では、その手順について説明していきます。






まずはフォントの準備です。emWinではFont Converterというツールが用意されており、Windowsにインストールするされているフォントをビットマップフォントに変換して使用することができるようになっています。MS明朝のような書体も利用可能なわけですが、ライセンスの問題もありますので、ここではフリーのフォントを使うことにしましょう。今回、ピックアップしたのはニコモジ・プラスとRounded M+のふたつのフォントです。これらのサイトから使用したいフォントのデータをダウンロードしておきます。



ダウンロードしたフォントファイルをエクスプローラから開いてみると、上図のように文字サンプルが表示されるとともにインストールボタンが表示されますので、このインストールをクリック。すると、フォントがシステムにインストールされます。

続いて、Font Convererを起動。生成するフォントのタイプを聞かれるので、深さ4ビットのアンチエイリアスを選んでみます。



次に開くフォントを聞かれますので、先ほどインストールしたばかりのニコモジ・プラスを選んで、出力するビットマップのサイズを指定しておきます。





フォントを開いて、全てのグリフ情報を読み込むと上図のように表示されます。特に編集の必要もないので、Fileメニューから"Save as"を選択して保存作業を開始します。



ファイル形式として .sif を選択して保存。変換しながらの保存作業となるので、完了までにしばらく時間がかかります。同様にしてRounded M+も変換します。結果として、ニコモジでおよそ3.2Mバイト、Rounded M+でおよそ1Mバイト弱の .sif ファイルができました。.sif (System Independent Font)は SEGGER独自のファイル形式のようです。


フォントデータができたので、これをSPIフラッシュに dfu-util を使って書き込みます。(DFUの準備についてはこちらの記事を参照してください)。ニコモジはフラッシュ領域の先頭である0x90000000から書き込み、Rounded M+は４MB離れた0x90400000から書き込むことにします。DFUの構成上ではフラッシュの領域は論理的にひとつの空間として扱っているのですが、アドレス指定という手段で領域の途中からアクセスできるというのは、こういう時には便利ですね。もちろん、アドレス境界はフラッシュへの書き込み/消去単位であるページなりセクターサイズに合わせておきます。



これで、ふたつのフォントデータがSPIフラッシュ上に書き込めましたので、あとはSPIフラッシュをメモリ空間にマップしてやれば、そのままフォントデータが参照可能となります。

emWinにはUTF8でエンコードされた文字列を表示する機能が備わっているので、SPIフラッシュ上のフォントを開いて、そのフォントを使って表示してやれば、冒頭の写真の表示を出すことができます。詳細説明は省略しますが、こんな感じになります。



これまでは日本語フォントを使って表示をするためには、

1. FreeTypeを使って自分でビットマップへのコンバータを作成
2. そのコンバータを使ってTTFを変換して、ビットマップ形式のフォントファイルを作成
3. 出来上がったファイルをSDカードなり、Flashメモリに書き込み
4. FatFsを使ってフォントファイルを開く。
5. FatFsを使って、必要なグリフのビットマップを取り出し、描画

というように、ツールの準備から描画ルーチンまで全て自分で用意していました。それがemWinとQuad SPIを使えば、上述のように提供されるツールとAPIを使うことで短時間で描画できてしまいます。これでFont ConverterがMac OSで動いてくれたら文句ないんですが。。

emWin(STemWin)を動かす -- その2

前回の記事にも書きましたが、emWinはSTM32 Cubeパッケージの中にMiddlewareとして含まれてはいるものの、次の画面に示すようにCubeMXの構成画面からはアクセスできないというのが、ちょっと取っつきにくい要素のひとつになっているのではないでしょうか。そして、どうしても調査のためには1,000ページを超える分量のあるemWinのマニュアルに目を通さねばならないのが、敷居を高くしている要因でしょうか。



CubeMXはSTemWinに関する情報は何も提供してくれないので、自分で必要なファイルやライブラリパスをプロジェクトに登録してやる必要があります。それらのファイルは、CubeMXからライブラリパッケージをダウンロードしてインストールした場合には、 STM32　Cubeのレポジトリディレクトリの配下にインストールされています。わたしは Mac OSを使用していますので、~/STM32Cube/Repositryの配下に入っており、CubeL4のVersion 1.10.0 の場合は次のようになっています。Windowsの場合には、C:¥STM32 とかC:¥STM32Cubeとかを探してみてください。



STemWinのディレクトリの下にemWinが一式入っていますので、これらのファイルを必要に応じて参照のためのPATHを切ったり、ファイルをプロジェクト内にコピーして使うことになります。簡単に主要ディレクトリに含まれている内容を説明しておきます。

• Config -- ターゲットで使用するために、設定やコードを追加する必要のあるファイルが入っています。自分のプロジェクトにコピーして使います。
  
• Lib -- emWinのライブラリが入っています。リンク時にパスとライブラリ名を指定してやります。ビルド環境に合わせて、Keil, IAR, GCCの３種類のコンパイラでコンパイルされたライブラリが用意されており、それぞれのライブラリはさらにOSの有無、ARGB対応の有無によって個別のファイルが用意されています。ファイル名にotのサフィックスが付いているファイルはコンパイル時に実行時間重視の最適化を施してあるファイルのようです。
  
• OS -- ターゲットのOS環境に適合させるためのサンプルファイルが入っています。サンプルとして、OS 無しの場合(GUI_X.c)と FreeRTOSを使用する場合 (GUI_X_OS.c)の２種類が用意されています。これらの環境でemWinを使用するのであれば、そのまま利用可能です。
  
• Software -- emWinアプリケーションを作成する際に使用できるツールが入っています。Windows環境用のバイナリです。
  
• inc -- emWinアプリが参照するヘッダーファイルが入っています。ビルド時にパスを指定してやります。
  

結局のところ、Config のディレクトリにあるファイルさえ、適切に変更、コードを追加してやればemWinを動かすことができます。ただし、上記のディレクトリにはemWinの本体がらみのファイルがあるだけで、サンプルのアプリは含まれていません。それらのサンプルは、パッケージのProjectサンプルとして提供されています。



前回の記事で示した画像はこれらのデモの一部になります。デモは何種類か用意されていますが、内容によって使用する資源(RAM, Flashのサイズ）が異なるので、外付けRAMの無いNucleo環境では実行可能なデモの種類や数は限られるようです。

emWin(STemWin)を動かす -- その1

STM32L452REにSPIでつなげたLCDですが、今回は表示のためにSTemWinを使ってみることにしました。STemWinはSEGGERが提供しているemWinをSTM32専用にあらかじめコンパイルしたライブラリとして提供されるGUIソフトウェアになります。CubeF1, CubeF3, CubeF4, CubeF7, CubeL4とかをダウンロードすると、そのパッケージの中に含まれているミドルウェアなのですが、CubeMXの画面からコンフィグすることはできないので、意外と知らずにいる人も多いのではないかと思われます。そこで、この後、何度かに渡ってSTemWinを動かすまでの手順について、記事を書いていこうかと思います。かく言うわたしも、ようやくとサンプルのデモ表示を動かすところまでこぎつけた段階で、タッチパネルとのインタフェース部分はまだできていないような状態です。

emWinは元々はSEGGERがソースコードの形態でライセンスするソフトウェアなのですが、このページの説明によれば、STだけでなく、Microchip, NXP, Silabs Cypressといった主要マイコンベンダに、そのベンダのマイコンで使用することを条件としてライブラリ形式で提供しているようです。

STM32Cubeの場合、LCDを持った評価ボード用のサンプルプロジェクトがパッケージの中に含まれていますので、そのコードを参考にしてemWinを動かすことができます。これらの評価ボードではいずれもLTDC/DSIを使ったRGB接続もしくは、FMCを使った16ビットパラレル接続でLCDをつなげており、そのためのサンプルコードが示されています。しかしながら、インタフェースの仕様を調べてみると、SPI接続でもemWinを動かすことができることがわかったので、今回はこれを試してみることにしました。

メモリの制約もあり、すべてのデモサンプルを動かすことはできませんが、いくつかのデモを動かすことができたので、その画像を以下に示しておきます。







実際にSPI LCDに表示するまでのステップの説明については、次回の記事で書くことにします。

３階建て

購入した3.2インチLCDをB基板を使ってNucleoに重ね載せ。下の基板にはBM20基板と、SPIフラッシュ、ミニUSBコネクタしか載っていないので、全てまとめれば１枚の基板にまとめられるのですが、作り直すのも面倒なので３階建てで実験を進めることにします。実はこの3.2インチのLCDよりも3.5インチのLCDの方が値段も安くて解像度も高かったのですが、こちらだとB基板のサイズにより近いのが気に入りました。

3.2" LCD

注文しておいた3.2インチのLCDが先週末に到着。現在、Nucleo-L452とつなぐための準備中です。



今回、購入したのはBuyDisplay.com のこちらのディスプレイです。タッチパネル(抵抗皮膜方式 or 静電容量方式)、 電源電圧 (5V or 3.3V)、インタフェース(8bit, 16bit, SPI)を選択できるのですが、Nucleoとつなぐために3.3V, SPI 4wireを選択しています。そしてタッチパネルは静電容量方式です。いやー、静電容量方式のタッチパネルを使ってみたかったんですよねー。



裏側はSDカードやSPIフラッシュが搭載できるというよくある構成です。フォントについては、自分で用意したQuad SPI Flashを使う予定ですので、このスペースを使うつもりはありません。

フレキケーブルの右上部分に載っているのは、タッチパネルコントローラのFT6236のようです。こちらはI2Cでマイコンとつなげます。

日本語フォントで表示する

LPCcappuccinoのSDカードの使い道として計画していた日本語フォントの格納と、それを用いた表示作業を時おり進めてきましたが、ようやくと表示できるようになりました。まだまだやっつけ作業なので、これから改善要。



フォントデータはもともとSAM4LでのLCD表示に使っていたものを流用しています。元となっているのはやさしさゴシックフォントです。マイコンにはttfの展開処理は重すぎるので、freetype2を使ってビットマップ展開した独自フォーマットのファイルを作成し、これをSDカードに保存しておきます。上の例では文字の大きさに応じて2種類のビットマップフォントファイルを用意しています。

描画時には、実際に使用しされる文字のビットマップとメトリックデータだけをSDカードから読み込んで、これをEVEにダウンロード、そしてCMD_SETFONTによりユーザ定義フォントとして登録します。現時点ではEVEで使うユーザ定義フォント用のビットマップとするためには、データ読み込み後にさらに加工が必要になってしまっています。また、元データが深さ8ビットであることもあり、EVE上でも深さ8ビットのフォーマット(L8)でダウンロードしています。そのため、RAM_Gの空間をいたずらに消費してしまっています。この例では25kB程度を使用。深さ4ビットに変えれば半分近くに減るはずです。ttfファイルからビットマップデータへの変換ツールを作りなおした方がいいので、そのうちにやろうかとは思っています。

ユーザフォントデータは, RAM_Gの空間にダウンロードするので、画面キャプチャはこの領域を破壊しないようにします。そうすると、全画面をCMD_SNAPSHOTでキャプチャすることはできなくなるので、今回は画面の上半分(480×135)画素分だけをキャプチャしています。

画面キャプチャを取る

ブログ記事を書くのは夜になってしまうことが多いので、なかなか丁寧に写真を撮影する時間がとれません。とくにEVEのようにLCD画面を撮影した場合には室内照明の反射が入ってしまううえに、自分やカメラが映り込んでしまったりします。そこで、LPCcappucinnoでSDカードが使えるようになったのを機会に画面キャプチャを取得することにしました。

普通のLCDコントローラーであれば、フレームバッファのメモリ内容を読み出して適当なフォーマットでダンプしてやれば画面キャプチャを取得できます。ところがFT800にはフレームバッファが無いので、この方法は使えません。しかし、画面への出力内容をRAM_G空間に取り込むスナップショット機能がコマンドとして備わっています(CMD_SNAPSHOT)。このコマンドでいったんRAM_G空間に画面データを取得してから、RAM_Gの内容を読み出してSDカードに書き出すという2段階の手続きを経ることで画面キャプチャを取得することが可能です。RAM_G空間の大きさは256kBなので、ちょうどWQVGAの画面データを収用することができます。

そこで、実際にやってみました。

CMD_SNAMSHOTが取得するフォーマットはARGBが各4ビットというフォーマットになっています。色数が減ってしまうのがちょっと残念。AがあるのでPNGファイルに変換しておけばいいかと思い、libpngを使って簡単な変換プログラムを作成。その結果がコレです。



写真と違って、画像が鮮明になって気持ちいいですねぇ。実際の画面よりも綺麗だし。文字や図形を見てもアンチ・エイリアス処理が施されている効果が良く表れています。元データはARGB4444ですが、PNGファイル上ではcolor_typeとしてPNG_COLOR_TYPE_RGB_ALPHA を使う場合には、ビットの深さは8または16でなければならないようなので、RGBA8888に変換しています。

いい感じだったので、「EVE姐さんを回転しててみる」で生成した画面のキャプチャを取得してみようと思いました。が、これには大きな問題があることに気付きました。"EVE姐さん"の元画像はJPEGなのですが、これを展開した結果もまたRAM_G空間に保存されるのです。そして、残念なことにRAM_G空間はWQVGAの全画面をキャプチャすると、全て消費されてしまいます。CMD_SNAPSHOTではレジスタ設定により、キャプチャする画面サイズを指定することも可能ですので、メモリをやりくりすれば例えば画面の左上部分だけをキャプチャするといった妥協案は考えられます。でも、まぁ、ここはそんなことはせずに、わざとメモリ空間衝突させてみることにしました。



おぉ、どうやらメモリ内容が壊れていく途中の様子がキャプチャされているようです。ちなみにキャプチャが完了すると、もとももとEVE画像の入っていたメモリ領域はすべてキャプチャされたデータに置き換わってしまうので, 再度キャプチャを取り直すとこうなりました。

純正デモを走らせてみる

FTDIはEVE用にデモをいくつか用意しているのですが、これらの多くはというかほとんどは、Visual Cで書かれておりPC上で動作させることを想定しています。Example 1からExample 14のプログラムについては、ソースで提供されているものの、これといった説明すらありません。タイトルからまぁなんとなく察しはつきますし、コードを読めばある程度はとんな動きをするのかも想像できなくはありません。でも、やはり実際に走らせて目で見てみたいこところ。そこでFTDIのMPSSEケーブルを買って<href="http://www.ftdichip.com/Support/Documents/AppNotes/AN_245%20VM800CB%20SampleApp%20PC%20Introduction.pdf">AN_245に従って接続、走らせてみました。




写真のように、純正ボードはPCとUSBケーブルでつなぐだけ。でも、残念ながらMSPSSEケーブル経由で供給できる3.3Vでは電流不足のようでLCDが動いてくれないようです。そこでもう１本のUSBケーブルを電源供給の目的だけで使用。わたしはMBAを使っていますが、コードはVisual CなのでPallalesを使って MacOS上でWindows 7を立ち上げて、その上で走らせます。



FTclockデモの時計はちょっとオシャレです。FT800が持っているCMD_CLOCKコマンドは使わずに、アプリが文字盤から針まで全部自分で描画しています。頑張ればばこんなのもできますということでしょうか。日付表示が dd/mm/yy形式になっているのが、欧州を感じさせてくれます。このデモはタッチすることで、表示される時計の種類も換えることができ、風景JPEG画像の上に時計を重ね書きしたものも見せてくれます。





なんか風景の中に溶け込んじゃっているんで、時計見つけるのに時間かかりそうですが。。



そしてもうひとつ気にいったのが、Playerのデモ。音楽を再生しながら、その波形を表示してくれます。曲はこちらのデモ動画でも使われていた曲なんですが、DARKSIDE.ULWというulaw圧縮したファイルが入っていました。DARKSIDEというは曲名？　Brightsideにしなくていいのかな？

さて、この波形表示ですが、どうやっているのかと思ったら、uLawの音楽データをちょっとだけ加工してメモリ上にダウンロードしておき、それをビットマップとみなして表示させているだけでした。FT800のビットマップ表示機能にはバーグラフ表示機能が備わっており、この機能をうまいこと利用しています。uLawでは１バイトで１サンプルを表し、その値は振幅になります。そこで、振幅をそのままバーグラフの高さみなして、表示させているのです。それだけでは山陰のような図形になってしまうので、波形表示とするために、バーグラフの位置をY方向にずらして、色を変えることで境界線を残すという技を使っていました。なあるほど!!

針の進み方

今回は時計ウィジェットについて。FT800では、CMD_CLOCKを使うことで簡単にアナログ時計を描画することができます。使い方は、

Ft_Gpu_CoCmd_Clock(phost, x, y, r, option, hour, min, sec, msec);

という感じ。中心位置と半径で時計の位置と大きさを指定して、時刻データを引数として渡すだけでアナログ時計のできあがりです。もちろん、FT800は描画するだけですので、針を動かすためにはホスト側から時刻データを更新して、繰り返して呼び出す必要があります。



アナログ時計を模していますので、秒針の進み方もアナログ的。ちゃんと、途中の位置も表示可能。msを０として１秒毎に値を更新してやれば、秒針はチクタクと１秒毎に進んでいきますが、50ms毎に更新してやれば秒針も連続的にスゥーっと動いているかのように見えます。

このように簡単に時計が秒ができますが、例によって形状を変化させることはできません。描いてくれるのは丸形の時計だけであり、文字盤に数字もふってくれません。必要であれば、自分で装飾を追加する必要有り。その代わり、文字盤無しで針だけとか、秒針しか描かないといったことをoptionで指定可能です。したがって、４角を最初に別途描画しておき、その上に針だけを描画すれば、角の四角い時計も作れるということにあります。

EVE姐さんを回転してみる

前回はJPEG画像を展開、表示してみました。今回は、その画像を縮小表示。そしてさらに回転してみました。




CMD_TRANSLATEを使って縮小した後に、さらにCMD_TRANSLATEによる移動とCMD_ROTATEによる回転を施しています。実際の処理の流れは次のようになっています。

• まずCMD_SCALEで縦横の大きさを1/3に縮小。表示画素数も1/3になるので、BITMAP_SIZEの値も1/3に変更しておきます。
• 次にCMD_ROTATEを使って３０度回転してみます。ビットマップの左上を中心として回転がおこなわれるので、図の上段中央のように表示されます。BITMAP_SIZEによってクリッピングされていることがわかります。
• 次にCMD_TRANSLATEを使ってX方向にビットマップ幅の1/2, Y方向にビットマップ高の1/2だけ平行移動して表示すると、下段左側のようにクリッピングにより画像の左上部分だけが表示されます。
• 続いて、３０度回転してから平行移動して元の位置に戻すと、下段右側の表示となります。
• まだクリップングが働いて画像に見えない部分があるので、BITMAP_SIZEをひとまわり大きくしてやって、平行移動することで回転した画像がちゃんと見えるようになりました。(上段右側)