1. 初めに

このツールは、オープンソースのゲームパッドファームウェアであるGP2040-CEが搭載する128x64解像度のOLED液晶ディスプレイに表示される、スプラッシュスクリーン（起動画面）をWebブラウザだけで簡単に作成できるアプリケーションです。

PCに特別なソフトをインストールすることなく、誰でも直感的な操作でお好みの画像を起動画面に変換できます。

本アプリケーションはあなたのブラウザー上で全ての処理を行います。あなたの作成したスプラッシュスクリーンがサーバー上にアップロードされることはありません。

2. 基本操作

画像を用意してから、GP2040-CEで読み込めるファイルとして書き出すまでの基本的な流れを説明します。

Step1 : 画像のアップロード

画面左上の [ Upload Image] ボタンをクリックし、起動画面にしたい画像（JPG, PNG等）を選択します。 元画像と、二値化されたスプラッシュスクリーンのプレビューが表示されます。

Step2 : 画像の調整

  • プレビューをドラッグすることで画像の位置を変更できます。（元画像、二値化画像のどちらでもドラッグできます）
  • 設定パネルにある [ Zoom] や [ Rotation] のスライダーを操作して、画像の位置を調整します。
  • 設定パネルにある [Algorithm] 、[ Brightness] 等を変更し、好みの結果になるよう調整します。

Step3 : 画像のダウンロード

デザインが完成したら、[ Download Image] ボタンをクリックします。 “splash_YYYYMMDD_HHMMSS.png” という名前の画像ファイルがダウンロードされます。このファイルをGP2040-CEのWebコンフィグレータからアップロードすることで、起動画面として設定できます。

Step4 : GP2040-CEに設定(v0.7.12)

  1. コントローラの[Start]ボタンを押しながらUSBケーブルを抜き差しします。

  2. ブラウザーでhttp://192.168.7.1/を開きます。

  3. メニュから [構成設定]->[ディスプレイ設定] をクリックします。

  4. [モード設定] タブをクリックします。

  5. [ファイルを選択] をクリックし、作成したスプラッシュスクリーン画像を指定します。

  6. [保存] をクリックします。

  7. コントローラーを再起動すると設定したスプラッシュスクリーンが起動時に表示されます。

3. 各機能説明

3.1. 画像調整パネル

プレビューエリアの画像を細かく調整するためのパネルです。各スライダーは数値入力でも値を変更できます。

  • Background: 画像に透明部分がある場合の背景色を調整します。
  • Zoom: 画像を拡大・縮小します。
  • Rotation: 画像を回転させます。
  • Brightness: 画像全体の明るさを調整します。
  • Contrast: 画像のコントラスト（明暗の差）を調整します。
  • Sharpen: 画像をシャープにし、輪郭を強調します。
  • Threshold: 二値化アルゴリズムに[Threshold(Manual)]を指定したときに調整します。
  • Invert: 画像の白と黒を反転させます。

3.2. 二値化アルゴリズム

このツールで最も重要な機能です。フルカラーの画像を、白と黒の2色だけで表現する「二値化」には様々な手法があり、それぞれに特徴があります。

  • 元画像
    [ Brightness] と [ Contrast] スライダーで明暗がはっきりするように調整してください。 (512x256px 等倍)

  • Dithering (Multi Pattern1):
    ピクセルの明るさに応じて異なるパターンを適用するディザリング手法です。明暗に応じて多様な質感を表現できます。
    (128x64px 4倍)

  • Dithering (Multi Pattern2):
    Dithering (Multi Pattern1)のパターンを反転させたディザリング手法です。
    (128x64px 4倍)

  • Dithering (Ordered):
    固定のパターン（Bayer行列）を用いてディザリングを行います。レトロなコンピュータグラフィックスのような、均一でグリッド状のパターンが特徴です。
    (128x64px 4倍)

  • Dithering (F-S):
    フロイド-スタインバーグ法と呼ばれる、誤差拡散ディザリングです。あるピクセルの変換誤差を周囲のピクセルに分配することで、より詳細でパターン性の少ない結果を生成します。
    (128x64px 4倍)

  • Threshold (Otsu):
    大津の二値化とも呼ばれる手法で、画像のヒストグラムを解析して最適な「しきい値」を自動で算出します。前景と背景がはっきり分かれているような画像に適しています。
    (128x64px 4倍)

  • Threshold (Manual):
    ユーザーが手動で「しきい値」を設定します。このしきい値より暗いピクセルは黒、明るいピクセルは白になります。直接的に境界値をコントロールしたい場合に有効です。
    (128x64px 4倍)