日本語を使う


R4.4.30 日本語環境が良くなっています(^^)

 日本語表示に関しては、watako-labさんの「M5Stackで好きなフォントを使う」で紹介されている方法も使います。最近特に必要になって再度やってみました。
 というのも、スケッチがメモリを占めるサイズが大きくなってしまって(高機能なスケッチを使わせていただいてます:感謝 )、読み込むフォントファイルが大きいためか、書き込めても動かないので、限定版フォントを作ってみようと思ったわけです。

 Processing3を使います。FontExchangeというスケッチを使って、int fontNumber = 611; // Meiryo gothic を 30ptで指定します。使用する文字種は、0x0021, 0x007E, //Basic Latin, 128文字。0x30A0, 0x30FF, //Katakana, 96文字。specificUnicodes として、必要な漢字 0x7B2C,0x5CA1,0x5C71,0x653E,0x9001,0x5927,0x5B66,0x5E83,0x5CF6,0x6771,0x4EAC の11文字。変換してやると、99KBのvlwファイルになってくれました。これを読み込んでやると動作してくれました。読み込む文字に何が出てくるかわからない場合には、ある程度の大きいサイズのvlwファイルになるでしょうが、特定文字表示にはこれで十分です。


R4.4.30 日本語環境が良くなっています(^^)

 M5Stackシリーズで日本語を使う環境が整ってきましたね。最近では、tanakamasayukiさんの「efont」や Tamakichiさんの「sdfonts」の使用が多くなっています。フォント読み込みが速いです。

 機能豊富なlovyanGFXによる日本語表示もいいようなんですが、私のPC環境には重すぎて?コンパイルが中途で止まってしまうので、前2種の日本語表示方法を常用しています。


R3.3.1(R2.6.24) 日本語を使うには

 今のところ、M5Stackで日本語を使うには何通りかあるのですが、私は2種類の方法を使い分けています。「使い分けている」というと、聞こえはいいけれど試行錯誤&コピペで使っているということ(^^;)

 最新のM5Stackライブラリを使うと、特別な作業は必要なく

String filename ="/marugotic16";
M5.Lcd.loadFont(filename,SD);

とvlw形式のフォントをsetupの中で宣言しておいて、表示が必要なところで次のように記述してやればよいだけです。

  1. M5.Lcd.setCursor(x,y); で位置を指定
  2. M5.Lcd.print(z,4);   数値zを小数点4位まで表示
  3. M5.Lcd.println("こんにちは"); 文字列表示
 ただし、フォントファイルはフリーのものをダウンロードするか、自分で準備するかしないといけません。一度作っておくと今後も使いまわせるので作っておきましょう! 一応 2021.3.1 の段階で持っているフォントは下記の通り。10ポイントから28ポイントまで揃っています。大きなサイズのフォントは読み込みに一呼吸必要です。また2種類同時表示はできないようです。

 また、この表示をスクリーンキャプチャーしようとすると、おそらくエラーになります。スクリーンキャプチャーするには、今のところtobozoさんのESP32-Chimera-Coreに入っているM5Stack.hとM5Stack.cpp等を使わなければ実現できないと思います。そうすると今度は上の簡単な日本語使用ができません。

 日本語使用とスクリーンキャプチャーを同時使用しようと思うならば、tobozoさんのESP32-Chimera-Coreに入っているM5Stack.hとM5Stack.cpp等を使う環境で、mgo-tecさんのライブラリESP32_mgo_tecを使っての実現が可能です。これが、私の場合のもう1つの日本語使用環境です。

#define MGO_TEC_BV1_M5STACK_SD_SKETCH
#include
const char* utf8sjis_file = "/font/Utf8Sjis.tbl";
const char* shino_full_font_file = "/font/shnmk16.bdf";
const char* shino_half_font_file = "/font/shnm8x16.bdf";

とスケッチの最初の方で宣言しておいて、setupで

mM5.init( utf8sjis_file, shino_half_font_file, shino_full_font_file );

とイニシャライズして、

mM5.font[0].htmlColorCode( "white" );
mM5.font[0].Xsize = 1, mM5.font[0].Ysize = 1;
mM5.font[0].x0 = 0; mM5.font[0].y0 = i*16;
mM5.disp_fnt[0].dispText( mM5.font[0], "hello" );

と表示してやればいい。東雲フォントを使っており、フォントの読み込みは速い。スケッチは煩雑になりますが、一度スケッチを作っておけば、使い回しができて便利です。

 もう1つ、sdfonts(スケッチ例にあった)を使うこともできる。フォントの導入が面倒だけれど、そのままコピペすればOKかな。サイズ違いも簡単に同時表示できるので便利かもしれません。


R2.1.7 反転が解消したらしい

 mgo-tecさんのライブラリESP32_mgo_tecがバージョンアップして、画面の色反転が解消された模様です。

 これまで作ったスケッチを試してみると、きっとまた反転してしまうだろうから、それらはそのままにしておこう(^^;)

 とは思いましたが、折角なので試してみることに。左が以前のライブラリでコンパイルしたもの。バックを「white」で塗りつぶしてから、ということは反転しているので黒画面になります、「black」で文字を書きました、ということは白い文字になるわけですね。

 次に、同じスケッチを更新されたライブラリでコンパイルしてみると、中央の画像になりました。そこで、スケッチの手直し。再度コンパイルしてみると右の画像となりました。めでたしめでたし。

 redの反転色はcyanでしたね。スケッチの変更のときには、1行目はgreenを指定しています。他の訂正は、whiteとblackの変更と、画面を塗りつぶす行の削除で済みました。何より、色名と結果の一致が嬉しいですね。

 詳しくは、mgo-tecさんのページでご覧ください!


R2.1.5 東雲フォント

 ファイルサイズが小さく、M5Stackのメモリも消費しないだろう日本語フォント(?)を使うべく試してみました。

 いろんなことをやってくる間に、mgo-tecさんのブログ内容を少しづつ理解できるようになったので、東雲フォントを使うことにしてみました。結果は上々(^^;) 難点もあるのですが.....

 既に必要なファイルやライブラリーはPC内に収まっていました(^^)/ あとはmgo-tecさんのブログにあるスケッチサンプルを入力してコンパイルするだけ。
 最初は、2018年10月15日記事公開の「M5stack の LCD に日本語漢字フォントを表示したりスクロールしたり」

 ポイントは、「\Documents\Arduino\libraries\ESP32_mgo_tec-master\src\ESP32_mgo_tec_bV1\Sensor」のフォルダを削除することと、ArduinoIDEで書き込むときの指定ボードが、相手がM5Stackであっても、「M5Stack-Core-ESP32」ではなく「ESP32 Dev Module」を指定すること。

 で、こうなりました(^^;)

 画面全体の色が反転している!!

 液晶のドライバで反転させてやればどうにかなるんじゃないか?!とは思いましたが、何かのピンの出力を1を0にするとか?(^^;)、私には無理なので、画面を白で塗りつぶしてやれ!(反転してるので、黒になると思って)と挑戦しても、全体黒の中で文字のバックは白いままなのでした。

 LCD.drawRectangleFill( 0, 0, 319, 239, "white" );

 諦めかけたところで、2018年4月21日投稿の「自作ライブラリ ( M5Stack , ESP32 用 )を HTML カラーコード入力できるようにしてみた」の記事を実践。
 最初はすべてが反転していましたが、背景を白で塗りつぶしてやると、右側のようになりました。

 文字の背景色があるので、背景色を指定できるのならば、そこを白で塗りつぶせばいいじゃないか! ということでやってみると.....

完成!

 スクロールも実現。ただ、スクロール開始の時、文字列前に白い帯が左に動いていきますが(^^;)

 カラーは、文字色と背景色があります。名前で指定できるのは white・black・red・green・blue・yellow・cyan・magenta で、"#FFFFFF"などでも指定できます。ただ、補色が表示されるので、記号では理解困難。そんなに色数も要らないし。
 それでも名前で指定しても、理解は難しい。白指定は黒に、赤指定は緑になる。その逆もOK。ですが、他はピンときません。まあ、白黒が分かれば、あとは慣れてくれば使えるでしょう。

 なお、このライブラリ―群はM5Stack標準ライブラリーと同時使用できないということです。使ってみて、また記録します。


R1.12.23 日本語ではないけど

 英数字でもきれいなフォントが使えるのですが、
M5.Led.drawString( Strings , x , y , size );
フォントサイズは限られています。1・2・4・6が今のところ表示確認。3や5というサイズは使えません。さらに、サイズ6ではアルファベットが出てきません。アンダーバーも出ない。

 青いマス目は10ドットです。画面設計をする際に便利かな? と。


R1.12.21 日本語フォントのこと

 processingで日本語フォントを作成する際には、その用途を考えておきましょう。

 SDカードに入っている文書を表示する(ことは滅多にないとは思いますが)場合には、どんな漢字を使われるかわからないので、第2水準まで切り出しておいた方がいいかもしれません。けれど、私のBME280 の結果表示程度だと、使う漢字は「気圧」「気温」「湿度」であり、単位として「℃」「%」くらいです。「%」は半角でいいとすれば、hPaと同様に数字・アルファベットが入る「0021〜007E」を抽出し、それに「気」「圧」「温」「湿」「度」「℃」「%」(全角)を加えればいいだけです。

 大切なのは、そのフォントを読み込むときには時間がどのくらいかかるかです。下の画像は私の環境で時間を測定した結果。

 ほぼすべての日本語文字を網羅したときは、3.8秒ほど時間がかかるのに対して、必要最小限に切りだしたフォントファイルでは、91ミリ秒しかかかっていません。この辺は必要に応じてフォントファイルを作らねばいけませんね。

 日本語フォントを使うには、M5Stackが発売され始めたころには、皆さんが苦労したようです。それでも多くの方々の苦労で使えるようになってはいたのですが、いつしかM5Stack ライブラリでフォントファイルであるVLW ファイルを取り込めるようになったので、格段に楽になりました。
 ただ、読み込んだファイルは1書体の1サイズでしかないので、1画面の中でフォントサイズをいろいろ変えたい場合には、この方法は使えない(?)と思います。多種サイズを使いたいとか、違う書体を使いたい時にはこれまで開発してくださった方々の方法を踏襲するしかないようです。
 私のBME280の場合のように、数値表示は28ポイントを使い、画面を切り替えてグラフ表示には12ポイントにするという時は、読み込みの速い小さなサイズのフォントファイルをポイントサイズに応じて複数切りだしておいて使えば、画面切り替え時のもっさり感はなくなると思います。


R1.11.27 日本語フォントを調達する

 BME280のところでも述べましたが、日本語の導入に手間をかけました。

 Watakoさんの最終更新日 : 2019年5月1日「M5Stackで好きなフォントを使う」とMATSUSHITAさんの2019年06月04日に更新「M5Stack の LCD に TFT_eSPI を使って日本語フォント "源真ゴシック" で表示する」を参考にさせていただきました。ありがとうございます。

 M5StackのSDカードに入れて使う日本語ファイル形式はvlw形式のファイル。詳しくはWatakoさんのページを見ていただくにして、簡単には、processingというソフトをPCにインストールして、PCに入っているTTFフォントから日本語の必要な部分を変換する。最近は、フリーのTTFフォントがたくさん出ているので、そこから変換できたらいいですね。

 大変なのは、どのフォントを指定するのか分かりにくいことと、unicodeのどこの区画に必要な日本文字が入っているかを知ること。全角のスペースとか、「℃」とか最初は変換できませんでした。このへんは楽しいので(?)あれこれ工夫してね。

 それで、どうにか表示ができました。同じフォントでもサイズを違えると、その都度ファイルを作らなくてはなりません。表示のものは28ポイント(?)


 基本的には英数字表示なのですが、この時代いろんな種類の文字を表示できるようになっています。日本語も表示できます。ただ、日本語表示には煩雑な手順が必要です。
 そこで、あちこちをサーフィンして試してみて、もっとも楽そうな方法を採用しました。

 tarontさんが2018/10/20に投稿された「M5Stackで日本語表示」を利用させていただきました。いろんなフォントが使えるので、美しいフォントが必要となったら、複雑な設定にも頑張ろうと思います。

 ということで実現できたのがこれ。

 いいね〜。でも、指紋がひどいな。画面反射も甚だしいので、写真も撮りにくいのだ(^^;)。