表示デバイス（ オプション ）で画像を表示するとき画像データの作り方です。
◀ この記事の前に： 複数のMCUをつなぐ
▶ この記事の次に：
画像の種類
PCなどでよく使用する画像は、JPEGや PNGですがそのまま表示することはできません。以下のピクセルフォーマットの画像データが必要です。
| フォーマット | ビット数 | ピクセルデータ構成 |
|---|---|---|
| RGB565 | 16bit | 5ビット(R) + 6ビット(G) + 5ビット(B) |
| RGB332 | 8bit | 3ビット(R) + 3ビット(G) + 2ビット(B) |
画像データの作成方法
作成方法は以下のとおりです。
1．画像の作成
画像作成ソフトウエアで画像を作成します。作成する画像の仕様は以下のとおりです。
- サイズ： 96 pixel（ 幅 ）× 64 pixel（ 高さ ）
- 色： RGB
- 保存形式： JEPG形式
2．変換ツールの準備
JPEGの画像データを RGB565（ 16ビット ）に変換します。変換は以下のツールを使用しました。（ 他のツールでもフォーマットが RGB565であれば使用できます。 ）
- lcd-image-converter： 画像データの変換を行うツール
ツールは上記サイトの DOWNLOAD で取得できます。ダウンロード後は ZIP内の実行ファイルを起動すれば使用できます。（ インストール作業はありません。 ）
3．RGB565に変換
起動画面
メニュー [ File ] – [ Open ] で前項1で作成した画像ファイルを読み込みます。
ファイルを読み込み表示
メニュー [ Options ] – [ Conversion ]を選択します。
オプション画面
[ Preset ] プルダウンで Color R5G6B5 を選択
[ Scanning ] タブ
[ Main Scan Direction ] で Top to Bottom を選択
[ Preprocessing ] タブ
[ Type ] で Color を選択
[ Image ] タブ
[ Block size ] で 16bit を選択
< OK > をクリック
メニュー [ File ] – [ Convert … ] を選択
拡張子は .hで変換・保存します。
4．画像データファイルの作成
前項で変換した画像データファイルを変更します。
// RGB565 画像ファイル
const uint16_t Img_LeafonyLogo [] PROGMEM = {
// 以下、画像データ
0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, ...
（ 省略 ）
0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, ...
// 以上、画像データ
};
line 2： 名称は適宜付けます。
プログラムの記述
作成した画像データファイルを include で記載します。
画像を表示したいところに drawRGBBitma() を置きます。引数でデータ名を指定します。
//------------------------------------------------------------------------------
// OLED
//------------------------------------------------------------------------------
// Resolution
#define OLED_HEIGHT 64 // pixel
#define OLED_WIDTH 96 // pixel
#include <img_LeafonyLogo.h> // RGB564 Image data
...
//==============================================================================
// object
//==============================================================================
//---- OLED ----
Adafruit_SSD1331 display = Adafruit_SSD1331( OLED_CS, OLED_DC, OLED_SDA, OLED_SLK, OLED_RES );
...
display.drawRGBBitmap( 0, 0, LeafonyLogo, OLED_WIDTH, OLED_HEIGHT );
...参考情報
他のサイトで参考になる情報は以下のとおりです。
このホームページ内
- 複数のMCUをつなぐ： このロボットには複数の MCUが搭載されています。その MCU間の接続の概要です。
他のWebサイト
- lcd-image-converter： 画像データの変換を行うツール
- ArduinoだけでOLED SSD1331に画像を表示する方法： Qiita / @osobono
- 小型カラー液晶SSD1331とAdafruit GFX ライブラリを使用してbitmapを表示する： Qiita / @ELIXIR
