【無料でできる！】OLEDディスプレイ128×64に好きな絵を表示する方法【PhotoFiltre7×Image2cpp活用術】

初心者向け解説

はじめに

ArduinoでOLEDディスプレイに画像を表示したいと思ったことはありませんか？
画像が表示されれば電子工作の幅が広がりますよね！

でも、いざやってみようと思うと、
「128×64サイズの画像なんてどこで見つければいい？」
「画像変換サイトは有料だし…」
悩みますよね…。

そんなあなたのために、この記事では完全無料で手軽に画像を変換する方法をご紹介します！
難しい操作は一切なく、
誰でも簡単に好きな画像をOLEDディスプレイに表示出来るようになります。



用意するもの（無料）

今回使うツールは、どれも無料で使えるものばかり!

  1. PhotoFiltre7 – 画像を編集するためのソフト
  2. Image2cpp – 画像をプログラムで使えるコードに変換してくれるサイト
  3. お気に入りの画像 – フリー素材や自作の絵をご準備ください。

ステップ1: PhotoFiltre7を準備しよう

PhotoFiltre7は、無料なのに高機能な画像編集ソフトです。操作も分かりやすく、初心者の方でも安心して使えます。

公式サイトからダウンロードして、普通にインストールするだけでOK。
PhotoFiltre Studio ←ダウンロードサイト

ダウンロードしたフォルダ内の　PhotoFiltre7.exe　でアプリケーションが開きます↓

英語版になっていますので（画像は日本語版）
日本語版にする場合は
ダウンロードサイトの左タブから「Downloads」をクリック
ページを下にスクロールしていくと「Japanese/japonais」と有るので
クリックしてダウンロード　→　StudioJP.plg
ダウンロードした　StudioJP.plg　を　PhotoFiltre7のフォルダ内に入れて
代わりに　StudioEN.plg　を消す
PhotoFiltre7.exe　を開くと日本語版になります。

ステップ2: 画像を128×64サイズに変換しよう

OLEDディスプレイに画像を表示するためには、使用する画像も128×64に合わせる必要が有ります。

好きな画像を選んでみよう

まずは、OLEDディスプレイに表示したい画像を選びましょう。
128×64で縦1：横2の割合なので、やはり正方形よりも横長の画像の方が良いです。

画像のサイズを調整してみよう

PhotoFiltre7で画像を開いたら、次の手順で進めていきます

  1. メニューの「イメージ」から「指定リサイズ」を選択
  2. 「縦横比を無視する」のチェックを外します
  3. 幅に128、高さに64を入力
  4. 「OK」をクリック

この時点では縦横比を崩さない割合で、縦横どちらかが近い形になっています。
（画像では　横113×縦64　）
次のトリミング作業が出来るように、縦　64　を　縦　75　まで上げて
リサイズします。

トリミングで仕上げよう

リサイズした画像が　128×72　になりました。
ここからトリミングしていきます。

  1. 選択ツールで表示したい部分を囲みます
  2. 下バーの中の数値（W＝128、H＝64）になるように選択ツールをマウスで調整します。
  3. 右クリックで「イメージのトリミング」を選択
  4. ファイルから名前を付けて保存

ステップ3: Image2cppでコード変換しよう

Image2cppサイトにアクセス

サイトにアクセスしましょう。このサイトは画像を、プログラムで使えるコードに変換してくれる便利なツールです。
サイトはこちらimage2cpp

画像をアップロード

  1. Select image のファイル選択をクリック
  2. 先ほど保存した画像を選択
  3. アップロードされるのを待ちます

設定を調整しよう

Preview　を確認しながら、以下の設定をお好みで調整してください

  • Canvas size: 128×64になっているか確認
  • Invert image colors: 画像の見え方に応じてチェック
  • Brightness/Contrast: お好みで調整

コードを生成しよう

設定ができたら「Generate code」ボタンをクリック。すると、こんな感じのコードが生成されます：

// 'your_image', 128x64px
const unsigned char your_image [] PROGMEM = {
    0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 
    // ... 数字がたくさん続きます
};

このコードをコピーして、テキストファイルなどに保存しておきましょう。

ステップ4: Arduinoで表示してみよう

必要なライブラリ

Arduinoで以下のライブラリをインストールしておきます。

#include <Wire.h>
#include <Adafruit_GFX.h>
#include <Adafruit_SSD1306.h>

基本的なプログラム

こんな感じのプログラムで画像を表示できます。

#define SCREEN_WIDTH 128
#define SCREEN_HEIGHT 64
#define OLED_RESET -1

Adafruit_SSD1306 display(SCREEN_WIDTH, SCREEN_HEIGHT, &Wire, OLED_RESET);

void setup() {
    // ディスプレイの初期化
    if(!display.begin(SSD1306_SWITCHCAPVCC, 0x3C)) {
        Serial.println(F("ディスプレイの初期化に失敗しました"));
        for(;;);
    }
    
    // 画像を表示
    display.clearDisplay();
    display.drawBitmap(0, 0, your_image, 128, 64, WHITE);
    display.display();
}

void loop() {
    // 特に何もしません
}

うまくいかない時の対処法

画像が表示されない場合

I2Cアドレスが合っていない可能性があります。プログラムの0x3Cの部分を0x3Dに変えてみてください。

画像が反転している場合

Image2cppの「Invert image colors」のチェックを切り替えてみてください。

画像がぼやけている場合

元の画像のコントラストが低い可能性があります。PhotoFiltre7でコントラストを上げてから変換し直してみてください。

まとめ

この方法なら、お金をかけることなく、お気に入りの画像をOLEDディスプレイに表示できます。PhotoFiltre7での画像編集も、Image2cppでのコード変換も、慣れてしまえば数分で完了します。

最初は少し戸惑うかもしれませんが、何度かやってみると「こんなに簡単だったのか！」と思えるはず。ぜひいろいろな画像で試してみて、あなただけの素敵なOLEDディスプレイプロジェクトを作ってみてくださいね。

参考情報

  • PhotoFiltre7: 無料で使える画像編集ソフト
  • Image2cpp: オンラインで画像をコードに変換
  • Adafruit SSD1306ライブラリ: Arduino用OLEDライブラリ

タイトルとURLをコピーしました