フルカラー有機EL ( OLED ) に倍角日本語フォントを縦横でスクロールさせてみた ( ESP32 , SSD1331 使用)

記事公開日:2018年1月3日
最終修正日:2018年3月7日
※GitHub の Arduino core for ESP32 のインストールは、
2018/03/05以降の最新版を使用してください。
ESP32_SSD1331ライブラリをv1.7 にアップデートしました。
横長文字の縦スクロールができるようになり、白黒反転文字スクロールができるようになりました。
詳細はこの記事の最後の方を参照してください。

縦方向スクロールの場合、全角のみ対応です。
どうしても半角を表示させたい場合、半角1文字の場合は半角スペースを挿入して半角2文字にするなどしてみてください。
(2018/1/9)

新年
明けまして、おめでとうございます。
本年もどうぞ、よろしくお願いいたします。

ついに、新年を迎えてしまいました。

ところで、Twitter で新年ツイートをしたら、その画像に思いのほか多くの「リツイート」や「いいね」を頂戴しました。
それはこんな画像です。

ESP32_Spiffs_SSD1331_SizeUp01

これは、8×8 pixel の美咲フォントと、16×16 pixelの東雲フォントで表示させたものです。
「賀正」を2倍角に表示させました。

大したことはやっていないのに、こんなに多く「いいね」を頂けるとは思っていなかったので、なんか嬉しくなっちゃいますね。
みなさん、ありがとうございました。
m(_ _)m

さて、本題に戻りまして、新年一発面の記事は、16×16 pixel のフリーの日本語フォント、東雲フォントを2~4倍角でフルカラー有機EL ( OLED )に表示させて、スクロールさせてみました。

前回の記事では、I2C OLED SSD1306 で表示させてみましたが、モノクロ表示ということと、スクロールスピードは遅く、文字表示の自由度はイマイチでした。

そこで、OLED SSD1331 でプログラムを組んでみたら、かなり自由度が高いことに気付いたんです。
いろいろ試行錯誤しているうちに、縦長文字や横長文字も比較的簡単にできて、縦方向スクロールも比較的簡単でした。
そして、今回は高速のSPI通信で、しかもフルカラーです。

ということで、早速、以下の動画をご覧ください。

そして、2018/1/4 に ESP32_SSD1331ライブラリを beta ver 1.7 にアップデートし、以下の動画のように横長文字の縦スクロールができるようになり、白黒反転文字スクロールができるようになりました。
この動画のソースコードはこの記事の最後の方に追加しました。
(2018/1/4)

いかがでしょうか?

使い方によっては、フリーマーケットやコミケ、展示会などのデスクに置いておけば、値札表示に使えるし、意外とインパクトあるかもしれませんね。

スクロール速度はかなり落としています。
前回の記事くらいに速度を落とすとスムースに見えます。
疑似的にキャッシュっぽいことをやっていますが、それでもまだスクロールがぎこちないです。
SPIFFSファイルシステムだと、読み取り速度が遅いので、なかなか難しいです。
今の自分の頭ではここまでが限界です。
microSDカードにすればもっとスムースになりますので、いつか作ってみようと思っています。

OLED SSD1331 はハードウェアのグラフィックアクセラレーションコマンドが充実しているので、動画にあるような、文字の縦長表示や縦方向スクロールが比較的簡単に構築できます。
そして、SSD1306と違って pixel毎に位置を決められるので、文字配置や表示範囲の自由度が高く、ディスプレイとしてはとても良いデバイスですね。

ということで、これの作り方を説明します。

なお、以下のソースコードやライブラリは素人の自作ですので、動作保証はしません。

スポンサーリンク

準備するもの

OLED SSD1331 SPI モジュール

SPI通信の物を使用してください。
Amazon.co.jp では以下の販売店にあります。
中国販売店ですので、到着に10~2週間くらいかかります。

あとは、ちょっと割高になりますが、Pmod というモジュールで秋月電子通商さんで手に入ります。

Pmod OLEDrgb Pmod96×64有機ELディスプレイ

ESP-WROOM-32 ( ESP32 )開発ボード

今回はスイッチサイエンスさんの ESPr Developer 32 を使用しました。
ESP-WROOM-32 ( ESP32 )の電源周りの保護機能が充実していて、USBシリアルデバイスは FTDI製を使用している、おすすめボードです。
以前は Amazon で販売していましたが、今はスイッチサイエンスウェブショップだけの販売のようです。
Amazon.co.jp で販売再開したようです。

ピンヘッダは別売りでハンダ付けが必要なのでご注意ください。

もちろん、スイッチサイエンスウェブショップでも販売しています。

ESPr® Developer 32

その他、Espressif System純正の ESP32-DevKitC でもOKです。
Amazon では現在は販売されていないようなので、秋月電子通商さんか、マルツパーツさんで入手できます。

その他、ピンヘッダ、ブレッドボード、ジャンパーワイヤー等

ESPr Developer 32、SSD1331ボードの組み立て

スイッチサイエンスさんの ESPr Developer 32 を使う場合は、以下の記事を参照してピンヘッダなどをハンダ付けして組み立ててください。

ESPr Developer 32 ( スイッチサイエンス製 ) を使ってみました

そして、ESPr Developer 32 に SSD1331 モジュールをマウントする工作方法は以下の記事を参照してください。

ESP-WROOM-32 ( ESP32 )の SPIFFS を使って、日本語漢字 美咲フォント を読み込む

モジュールをマウントしなくても、以下に紹介するようにブレッドボード上で接続してもOKです。

接続する

ESPr Developer 32 とブレッドボード上でジャンパーワイヤーで接続する場合はこんな感じです。

ESP32_Spiffs_SSD1331_SizeUp02

Pmod OLEDrgb と接続する場合はこんな感じになります。

ESP32_Spiffs_SSD1331_SizeUp03

ESP32-DevKitC の場合もピン番号は以下の様な感じです。

ESP32_Spiffs_SSD1331_SizeUp04

Arduino core for ESP32、SPIFFSファイルアップローダー、SPIFFS領域拡大、フォントダウンロードを予め済ませておく

※2018/01/18頃更新された、GitHub の Arduino core for ESP32 のインストールはしない方が賢明です。
SPIFFSファイルシステムが上手く動作してくれません。
2017/12/19 バージョンは正常動作しています。

事前に以下の記事を参照して、設定を済ませておいてください。

●Arduino core for the ESP32 の設定
Arduino core for the ESP32 のインストール方法

●ESP-WROOM-32 ( ESP32 ) SPIFFSアップローダープラグインのインストール
ESP-WROOM-32 ( ESP32 ) SPIFFS アップローダープラグインの使い方

●ESP-WROOM-32 の SPIFFSメモリサイズ拡大
ESP-WROOM-32 ( ESP32 ) SPIFFS メモリサイズを大きくする方法

●全角東雲フォント、半角東雲フォント、 UTFtoSJISテーブルファイルのダウンロード
Arduino – ESP32 で、3つの SPI 通信 OLED ディスプレイ に Twitter Trend データを 表示させてみた

自作ライブラリのダウンロード

私の自作したライブラリを Arduino IDE にインストールしておいてください。
因みに、素人コードなので、無保証です。

バージョンアップしたものもあるので、古いライブラリはフォルダごと削除してからインストールしてください

GitHub からZIPファイルをダウンロードして、Arduino IDE にインストールしてください。
インストール方法は以下の記事を参照してください。

GitHubにある ZIP形式ライブラリ のインストール方法

ESP32_SSD1331 Beta ver 1.7

新年になって新たにBeta ver 1.6 にバージョンアップしました。
更に 1.7 にバージョンアップしました。(2018/1/4)
16×16 pixel フォントをサイズアップして表示する関数を追加しています。
横長文字の縦スクロールができるようになりました。
そして、白黒反転文字スクロールができるようになりました。

リンクは以下です。

https://github.com/mgo-tec/ESP32_SSD1331

ESP32_SPIFFS_ShinonomeFNT Beta ver 1.2

新年になって新たに Beta ver 1.2 にバージョンアップしました。
文字列を6列まで表示できるように最大サイズを変更しました。
リンクは以下です。

https://github.com/mgo-tec/ESP32_SPIFFS_ShinonomeFNT

ESP32_SPIFFS_UTF8toSJIS Beta ver 1.1

Beta ver 1.1 を使用してください。
リンクは以下です。

https://github.com/mgo-tec/ESP32_SPIFFS_UTF8toSJIS

次のページでは、サンプルスケッチを説明します。

スポンサーリンク

mgo-tec電子工作 関連コンテンツ ( 広告含む )

投稿者:

mgo-tec

Arduino , ESP32 ( ESP-WROOM-32 ) , ESP8266 ( ESP-WROOM-02 )等を使って、主にスマホと連携した電子工作やプログラミング記事を書いてます。ライブラリも作ったりしてます。趣味、独学でやってますので、動作保証はしません。 電子回路やプログラミングの専門家ではありません。 畑違いの仕事をしていて、介護にドップリ浸かりそうな年配者です。 少しだけ電気の知識が必要な仕事なので、電気工事士や工事担任者等の資格は持っています。

「フルカラー有機EL ( OLED ) に倍角日本語フォントを縦横でスクロールさせてみた ( ESP32 , SSD1331 使用)」への12件のフィードバック

  1. はじめまして!&あけましておめでとうございます。
    おととしくらい(の頃)から、mgo-tecさんのページをいつも参考にさせてもらっています。

    KiCADを使ってオリジナルのESP32のマイコン基板を設計し、注文した回路基板が昨年の大晦日の日に届いたので、ESP32などの部品を付けて、動作確認のためにこのページのプログラムを動かしてみました。すんなりYouTubeの動画の通りに動いたので、ほっとしています。

    ちなみに、カラーOLEDはたぶん同じ仕様のものだと思いますがamazonで1050円で売っていたものを使いました。そのOLEDは現在売れ切れ中で、最初に買ったものは半田不良でちゃんと表示ができないものでしたが、今回は2回目に購入したものでちゃんと表示できてよかったです。

    と言うことで、今年もよろしくお願いいたします。

    1. あいむさん

      ブログをご覧頂き、ありがとうございます。
      ESP32とOLED SSD1331 基板ですか・・。
      それはイイですね!
      SSD1306とのボードはあっても、フルカラー小型OLEDとのボードはまだありませんからね。
      このSSD1331は自由度が高いホントに良いディスプレイですよね。

      もし、WEB公開されているのでしたら、このコメント投稿で、http://のhを外したアドレスを掲載していただければ、拝見させていただきたいです。
      無理にとは申しません。

      ということで、嬉しい投稿ありがとうございました。
      今後とも当ブログをよろしくお願い致します。
      m(_ _)m

  2. mgo-tec様

    あいむです。お返事ありがとうございます。

    >拝見させていただきたいです。
    と言うとでしたので、動作した証拠のビデオとったのでYouTubeにあげておきました。
    https://www.youtube.com/watch?v=pJUf4fPeySI
    (もう何年も自分のホームページを更新していないので、久々に更新して、このビデオも載せようと思っています。http://im-aim.com/)

    今回のこのボードは、ESP32の汎用のボードとして作りました。SPIのピンの順番は、このカラーOLEDとSDカードモジュールにして、I2Cは1色のOLED(http://akizukidenshi.com/catalog/g/gP-12031/)のピンの順番にしました。まだやってませんが、SSD1306も動くと思います。

    今後、専用のESP32のプリント基板を作ろうと思っているので、mgo-tecさんがハーフピッチ のESP32の半田付けに挑戦する気があるなら、mgo-tec用の基板もできますよ。今は、海外のプリント基板屋(https://fusionpcb.jp/login.html など)に注文したら1000円もしないでできる時代なったことだし。

    1. あいむさん

      ご無理とお手間をとらせしまって申し訳ございません。
      動画リンクを紹介していただき、誠にありがとうございます。
      会社の方だったのですね。
      アマチュアの私としては恐縮してしまいます。

      自分の作ったプログラムが他の方のボードで動作する動画は、なんか嬉しいですね。
      ちゃんと動いてくれるか心配なところもあったので・・・。

      SSD1306 に乗せ換えられる基板はスバラシイ!!
      あれだけの基板を設計できるのは羨ましいです。
      私は一旦挫折しました。
      設計する時間が無いのと、知識が乏しく、既製品ボード以上のことはとてもできないと悟ったためです。

      それと、私用の基板を作って頂くなんて、とてもとても恐れ多いです。
      そういうお声を頂戴しただけで、感謝感謝です。
      m(_ _)m
      でも、いつか、自分自身で基板設計に挑戦しようと思っておりますので、良い刺激をもらいました。
      いろいろありがとうございます。
      ESP32専用基板ができると面白そうなものになりそうですね。
      期待しております。
      がんばってください。

  3. あけましておめでとうございます。

    プログラムは全て動作しております。
    JJYの信号発生プログラムにこれを合体させ
    SHT21で温度を表示させるように改造しました。
    しかし全角半角混在では半角がうまく表示できません。
    美咲フォントバージョンを組み込んだ場合はうまく表示できました。
    MFR.StrDirect_MisakiFNT_readALL (“20″ + String(Year) + ” 年” + String(Month) + ” 月” + String(T_day) + ” 日” , font_buf);
    しかし字が小さく、この東雲バージョンで表示したく
    数値だけ変換テーブルでやったのですが、いまいちです。
    厚かましいお願いですがスマートに表示できるようなライブラリーをお願い申し上げます。

    1. マッキーさん

      以前コメント頂いた方とは違う方ですか?
      だとしたら、初めまして。
      そしてあけましておめでとうございます。
      当ブログをご覧いただき、ありがとうございます。

      今、2018/1/9 朝6:00に動かしたところ、ESP32_SSD1331ライブラリをver1.6→1.7 にバージョンアップしたのに、サンプルスケッチが誤動作していました。
      見直していますので
      、しばらくお待ちください。

    2. マッキーさん

      ESP32_SSD1331 の最新ライブラリはbeta ver 1.7 です。
      ブログ記事もそれ用のサンプルスケッチを1月7日に追記しています。

      ver1.7 では、縦方向の倍角文字スクロールが可能になりましたが、ver1.6時の解説でも記載しているとおり、縦方向スクロールは全角文字のみ対応です。
      半角文字混在は横方向スクロールのみです。
      縦方向の半角文字スクロールは、半角が2回連続で来る場合と、1回のみで終わる場合で表示が難しくなり、今は実装していません。
      全て全角に変換するか、または、半角1文字の場合は前に半角スペースを挿入して、半角文字をダブルにしてください。

      因みに、当方で以下のコードで実験してみました。
      (※抜粋です)

      uint8_t Year=18, Month=1, T_day=9;
      sj_length[0] = SFR.UTF8toSJIS_convert("20" + String(Year) + " 年" + String(Month) + " 月" + String(T_day) + " 日" + "     ", sj_txt[0]);
      -----以下省略-----
      

      こうすると、横方向スクロールは全く問題無く表示されますが、縦方向は対応していないのでうまくできません。
      そこで、半角1文字にスペースを挿入して、強制的に2文字にします。
      例えば、Arduino IDE の sprintf 関数を使います。
      これは、char型しか対応していませんので要注意です。

      uint8_t Year=18, Month=1, T_day=9;
        char Month_c[3], T_day_c[3];
        sprintf(Month_c, "%2d", Month);
        sprintf(T_day_c, "%2d", T_day);
        sj_length[0] = SFR.UTF8toSJIS_convert("20" + String(Year) + "年" + String(Month_c) + "月" + String(T_day_c) + "日" + "     ", sj_txt[0]);
      

      こうすれば、とりあえずは縦方向スクロールでもOKです。
      ただ、半角1文字は中央に配置したいと私は思っていますが、今後の課題です。

      以上、これで試してみて下さい。
      因みに、私は素人アマチュアで独学ですので、スマートなライブラリを作るには技術やスキルが足りません。
      今の私の頭ではこれが限界です。
      ご不便をおかけしますが、ご容赦くださいませ。
      m(_ _)m

    3. あと、このブログ記事では、キャッシュバイトを設定していて、マルチタスクで動作させていますが、シングルタスクで、メインループ内で動作させればかなりシンプルなスケッチになります。
      ただ、その場合、スクロールがかなりカクカクします。

  4. 早速のご返答ありがとうございました。
    コメント送信がすぐに反映されなかったので、うまく送信できなかったのかなと思い、何度もコメントしてすみませんでした。
    全て表示はできました。
    ありがとうございました。
    JJY+時刻と気温、湿度を表示させようと実験中です。
    BME280は手持ちがなかったので、代わりにSHT21を繋いでテストしましたが、コンパイルエラーは出ないのですがセンサー値を読み込むルーチンで停止します。
    やはりESP32用のライブラリーがいるようです。
    BME280は届き次第テストしてみます。
    今年もご活躍を期待しております。

    1. マッキーさん

      重複したと思われるコメントはこちらで削除させていただきましたので、何も問題ありません。
      コメント送信が直ぐ反映されず、逆にお手数おかけしました。
      このブログはちょっと動作が重く、申し訳ございません。

      SPIFFS の読み取りに関しては、私の方の課題がたくさんありますが、表示できて良かったです。
      今後改善していきたいと思っています。

      BME280 の私の自作ライブラリは殆どメンテナンスしてないので、不具合ありましたらまたコメントいただけると幸いです。
      こちらこそ、今後も当ブログをよろしくお願いいたします。
      m(_ _)m

  5. さっそくBME280のI2Cで動作させました。
    なにも問題ありません。SPIは未確認です。
    今のところ問題なく動作しています。
    SHT21のライブラリー作者のフォーラムをみるとやはりESP8266では動作するけどESP32は応答がないとか言ってます。
    この人はライセンス条項で「License: This code is public domain but you buy me a beer if you use this and we meet someday (Beerware license)」とか洒落たこと言ってます。
    わたしもmgo-tecさんにビールぐらいで良かったらおごりたい気分です。

    1. マッキーさん

      動いてくれてホッとしました。
      何分、独学ですので、他の方の環境で動くかどうか自信が無いもので・・・。

      ビールライセンスは洒落てますね。
      そんな洒落たことを書ける余裕は今の私にはとてもありませんが・・・。

      私もおごられたい気分ですが、アマチュアコードですのでチョコチョコ不具合があると思います。
      今はブログをご覧いただけるだけで十分です。
      お気持ちだけ、有難く、ありがた~く頂戴いたします。
      m(_ _)m

コメントを残す

メールアドレスが公開されることはありません。

*画像の文字を入力してください。(スパム防止の為)

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください