Nextion Editorの使い方を基本から解説｜NX4024T032×Raspberry Pi Pico×BH1750で照度計タッチパネルを自作

Nextion Editor × Raspberry Pi Pico

はじめに｜Nextion 3.2インチ(NX4024T032)×Raspberry Pi Pico×BH1750で照度計を作る

こんにちは。ニンジンです🥕

今回は、Nextion社の抵抗式タッチパネル「NX4024T032」(3.2インチ・400×240)を使って、Raspberry Pi PicoとBH1750照度センサーで測った明るさ(lux値)をタッチパネルに表示するミニ工作を作りました。

画面には lux数値・帯ラベル(NIGHT / DIM / HALLWAY / LIVING / DESK / OUTDOOR)・明るさに応じたイメージ画像 の3点セットをリアルタイム表示し、画面をタッチするとダーク/ライトモードも切り替えられます。

Nextionのタッチパネル自体は電子工作界隈で定番の部品ですが、専用ソフト「Nextion Editor」の使い方を日本語でまとめた資料はほとんど見当たりませんでした(検索して確認済みです)。この記事では、実際に手を動かして分かった操作・つまずいたポイントをできる限り漏らさず記録しています。Nextion Editorを初めて触る方の助けになれば嬉しいです。

なお、このNextionディスプレイは、将来作る予定のケーブル切断機のUIとしても使う想定です。今回はその先行検証も兼ねています。

この記事で使う部品(Nextion NX4024T032・Raspberry Pi Pico・BH1750 ほか)

今回の工作で使った部品です。ディスプレイ以外は、これまでのPico記事で使ってきたものと同じ、電子工作の定番パーツです。

必須

UART1本+電源2本をPicoにつなぐだけで、抵抗式タッチ画面が動かせる

Nextion 3.2” TFT 400X240 抵抗式タッチパネル(NX4024T032)

この記事の主役ディスプレイ。専用のNextion EditorでGUI画面を作り、microSDカード経由で本体に書き込みます。Picoとの通信はUART(シリアル)1本で完結し、画像・フォントの管理は本体側で行うため、Pico側のコードはシンプルなままです。

UART通信抵抗式タッチ400×240

Amazonで見る

必須

I2Cでlux値がそのまま読める。ADCの換算も校正も不要

WINGONEER GY-302(BH1750FVI)光強度照明モジュール

前回記事でも使った照度センサー。ロームのBH1750FVIチップを搭載し、3〜5V動作。GY-30モジュールでもチップは同じでコードは変わりません。

I2C接続BH1750FVI3〜5V駆動

Amazonで見る 楽天市場で見る

必須

ピンヘッダー実装済みで、届いたその日からブレッドボードに挿せる

ヘッダー ハンダ付け済み Raspberry Pi Pico 2WH

今回のマイコン。無線付き(W)・ピンヘッダー実装済み(H)モデル。MicroPythonが動けば初代Pico/Pico Wでも同じ配線・同じコードで動きます。

無線+ヘッダー実装済みMicroPython

Amazonで見る 楽天市場で見る

応用

全ピンがネジ端子+GPIO番号のシルク印字で、配線ミスがぐっと減る

Freenove Pico 1/2 W・H・WH用ブレイクアウトボード

Picoを載せると、全GPIOが番号入りのネジ/ソケット端子で出てくる拡張ボード。UART・I2Cの配線先を追いかけるのが楽になります。無くても配線はできます。

配線ミス防止ネジ端子

Amazonで見る 楽天市場で見る

必須

はんだ付けなしで回路を組み替えられる基本の作業台

ブレッドボード 400穴

BH1750を挿し、電源レールを共有するのに使用。400穴サイズで今回の回路は十分収まります。

はんだ付け不要

Amazonで見る 楽天市場で見る

必須

オス-オス/オス-メス/メス-メスが一通り入って使い回しが利く

ELEGOO 120pcs 多色デュポンワイヤー

Pico・ブレッドボード・BH1750・Nextionをつなぐジャンパー線。色数が多いとUART(RX/TX)やI2C(SDA/SCL)の配線を追いかけるのが楽になります。

3種コネクタ入り

Amazonで見る 楽天市場で見る

画面サイズ違いのNextionディスプレイもある

今回使ったNX4024T032(3.2インチ)以外にも、Nextionには2.4〜7.0インチまでラインナップがあります。もっと大きい画面で作りたい場合は、下記も候補になります(操作方法は今回紹介するNextion Editorの手順と共通です)。

※リンクはアフィリエイトを含みます。価格・在庫・同梱内容は変わることがあるので、購入前に各商品ページをご確認ください。

配線図｜NextionのUART1とBH1750のI2C0をRaspberry Pi Picoに接続する

BH1750の配線は前回記事とまったく同じです(SDA=GP0・SCL=GP1・VCC=3V3(OUT)・GND)。まだ配線したことがない場合は、先にこちらをご覧ください。

今回追加するのはNextion側の配線だけです。NextionはPicoのUART1(GP4/GP5)とシリアル通信でつながります。信号は3.3V TTLなので、レベルシフタは不要です。

MicroPython側の初期化はこの1行だけです。

from machine import Pin, UART
uart = UART(1, baudrate=9600, tx=Pin(4), rx=Pin(5))

Nextionのデフォルトボーレートは9600です。

Nextion Editorの使い方｜ダウンロードから新規プロジェクト作成(Display direction・Character Encoding)まで

まずは公式ダウンロードページからNextion Editorを入手します。

▲ 公式ダウンロードページ

公式サイトのダウンロードページにアクセスします。

• 「Nextion Editor」のダウンロードボタンからZIP形式で入手します
• 会員登録などは不要です

▲ ダウンロードが始まったところ

ダウンロードボタンを押すと、ブラウザの画面下部(または通知エリア)にダウンロード進捗が表示されます。

▲ ダウンロードしたZIPファイル

ダウンロードフォルダにZIPファイルが保存されます。これを解凍します。

▲ 解凍後のフォルダの中身

解凍すると、実行ファイル(exe)を含むフォルダが展開されます。インストーラー形式ではなく、このexeをそのまま実行するタイプです。

▲ exe実行直後、Nextion Editor起動画面

exeを実行すると、Nextion Editorが起動します。

新規プロジェクトの作成

▲ 新規プロジェクト作成ダイアログ

左上のNEWをクリックして新規プロジェクトを作成します。

▲ ファイル名(.hmi)を入力して保存

プロジェクトのファイル名(拡張子.hmi)と保存先フォルダを指定します。

▲ デバイス選択画面。型番一覧から使用機種を選ぶ

使用するNextionディスプレイの型番を一覧から選びます。型番は本体の箱やシールに記載されています。

▲ NX4024T032を選択しハイライトされた状態

今回使うNX4024T032(3.2インチ・400×240)を選択します。

ここで重要な設定が2つあります。

▲ 90_HorizontalとUTF8を選択した状態

Display directionは0_Vertical / 90_Horizontal / 180_Vertical / 270_Horizontalの4択から選びます。今回は90_Horizontalを選択します。使用用途に合わせて向きの設定をしてください。

Character Encodingは必ずUTF8を選びます。

▲ 作成完了後、空のキャンバスが表示された状態

設定が終わると、画面中央にNX4024T032サイズの白いキャンバスが表示されます。ここから部品を配置していきます。

画面構成(4ペイン)

Nextion Editorの画面は大きく4つのペインに分かれています。

▲ 左上Toolboxペイン

左上 Toolbox: 部品パレットです。

• 使える部品: Text / Scrolling text / Number / Xfloat / Button / Progress bar / Picture / Crop / Hotspot / TouchCap / Gauge / Waveform / Slider / Timer / Variable / Dual-state button / Checkbox / Radio / QRcodeなど
• グレーアウトで使用不可: Switch / ComboBox / TextSelect / SLtext / DataRecord / FileBrowser / FileStream / Gmov / Video / Audio / ExPicture

▲ 右上Pageペイン

右上 Page: ページの追加・削除・並び替えを行います。

• Add / Delete / Insert / MoveUp / MoveDown / Copy / Import・ExportPage

▲ 右下Attributeペイン(何も選択していない状態)

右下 Attribute: 選択中の部品のプロパティ一覧です。

• .txt .pic .font .xcen .ycen .w .h .bco .pco .sta .style など

▲ 左下リソースパネル

左下: Picture / Fonts / Gmov / Video / Audioのタブ切り替え式リソースパネルです。

部品の配置・命名

▲ Toolbox「Text」をクリックし、キャンバスにt0が追加された状態

Toolboxの部品アイコンはクリックするだけでキャンバスに追加されます(ドラッグ不要)。

▲ Attributeでobjnameが「t0」の状態

追加した部品には、デフォルトでt0,p0のように追加順の連番が振られます。

▲ objnameを「lux_text」に変更後

.objnameをAttributeから分かりやすい名前にリネームできます(スペース・記号は不可)。

Nextionのフォント作成(Font Creator)｜「Invalid Font ID」エラーとSpecified Characterの指定方法

Nextion Editorで最初につまずきやすいのがフォント作成です。新規プロジェクトはフォントが1つも登録されていない状態が初期値で、Text部品を使う場合、最低1つフォントを作らないと以下のエラーでコンパイルが失敗します。

Error:Page:page0 Fail:lux_text.font InputVal Invalid:Invalid Font ID
Error:Compile failed! 1 Errors, 0 Warnings,

「コマンドを送ったのに反応がない」系のトラブルとは違い、これはコンパイル自体が止まるので分かりやすいエラーですが、原因(フォント未作成)に初見でたどり着くのは難しいポイントです。手順は以下の通りです。

▲ Tools→Font Creatorメニューを開いた状態

Tools → Font Creatorを開きます。外部アプリが起動します。

▲ Font Creator起動直後。Font source・Height・Anti-aliasingの設定画面

Font Creator起動直後に、以下を設定します。

• Font source(PC内の任意フォント。今回はArial)
• Height(px、今回32)
• Anti-aliasing(お好みでON)
• Encoding(UTF8)

▲ Range選択肢(ASCII Character / All Character / Specified Character)

Rangeは「ASCII Character」「All Character」「Specified Character」の3択です。

参考情報・実際には行いません

▲ 「All Character」選択時、ファイルサイズが約10.2MB(10,839,495バイト)と表示された場面

どれくらいファイルサイズが変わるのか確認するため、試しに「All Character」を選んでみたところです。ファイルサイズが約10.2MBと表示されています。

▲ Specified Characterの文字列欄に文字を入力し、Font Nameを設定してGenerate直前の状態

• Rangeで「Specified Character」を選ぶ
• 文字列欄に実際に使う文字を入力する

  0123456789 lxADEGHIKLMNORSTUVWY

• Font Nameを入力(半角英数字)する
• Generateボタンで.ziファイルを書き出す

▲ Generate後の完了メッセージ

Generateすると完了メッセージが表示されます。ファイルサイズが激減しているのが確認できます。

▲ 左下Fontsタブをクリック

Nextion Editorに戻り、左下のFontsタブをクリックします。

▲ Fontsタブ「Add」

Addボタンを押します。

▲ .zi選択ダイアログ

先ほど生成した.ziファイルを選択します。

▲ 追加後、Fontsリストにリソース番号が表示された状態

追加すると、リソース番号(先頭なら0)が振られます。

▲ lux_textを選択し、Attributeの.fontを設定している場面

対象のText部品を選択し、Attributeの.fontにその番号を設定します。ここでフォントが有効になります。

Text部品の.txt編集方法

▲ Attributeのtxt行(シングルクリックでは編集不可)とダブルクリックで開いた入力ダイアログ

Attribute上のtxt行はシングルクリックでは編集不可です。値の部分をダブルクリックするとテキスト入力ダイアログが開きます。

▲ lux_textに「184 lx」と入力後、フォント設定済みなので実際に文字が表示された状態

lux_textに「184 lx」と入力すると、フォント設定済みなので実際に文字が表示されます。

Picture・Text・Button部品の配置｜画像Importのサイズ制限「ERROR 1 pieces」とTouch Release Event

Picture部品と画像Import

Picture(.picで画像を丸ごと切り替える)とCrop(1枚の大きな画像から一部を切り出す)は別物です。「lux帯に応じて複数の画像を切り替える」用途はPictureを使います(lux_pic.pic=2のように番号指定で丸ごと差し替え)。

▲ 左下Pictureタブをクリック

左下Pictureタブをクリックします。

▲ 「Add」→画像選択ダイアログ

Addボタンを押し、jpg/png/gif/bmpを選択します。自動的にNextion内部の565 16bitカラー形式に変換されます。

▲ 画像選択の続き

画像ファイルを選んで開きます。

ここで注意が必要なのが画像サイズです。画像サイズが画面解像度(400×240)を超えるとImportが失敗します。エラーメッセージは以下の通りです。

import successfully 0 pieces, ERROR 1 pieces

今回は6段階分(0〜5、NIGHT〜OUTDOORのイメージ画像)をImportします。複数枚Importすると、Add順に0,1,2…とリソース番号が振られます。今回使用した6段階のイメージ画像(200×200・24bit無圧縮BMP形式)は以下からダウンロードできます。

▲ 6枚Import後のPictureタブ全体(番号0〜5)

6枚Import後、Pictureタブに番号0〜5が並びます。

Picture部品側では.objnameを分かりやすい名前(lux_pic)にリネームし、.picにリソース番号、.w/.hを画像サイズに合わせて設定します。

▲ Toolbox「Picture」をクリックしてキャンバスに追加

Toolbox「Picture」をクリックしてキャンバスに追加します。

▲ objnameを「lux_pic」に変更

.objnameを「lux_pic」に変更します。

▲ .pic欄にリソース番号を設定

.pic欄にリソース番号を設定します。

ここで設定する番号は、ディスプレイ通電時のデフォルト表示に使われる番号なので、1つだけ選択すればOKです。実際に0〜5番の画像を状況に応じて切り替える処理は、後述のPythonプログラム側で指示します。

▲ .w/.hを200/200に設定

.w/.hを画像サイズに合わせて200/200に設定します。

lux_labelの追加・位置調整・配色

帯ラベル(NIGHT / DIM / HALLWAYなど)を表示するText部品をもう1つ追加します。フォントはlux_textと共通のものを使い回せます。

▲ 2つ目のText部品を追加し、objnameを「lux_label」に変更

2つ目のText部品を追加し、.objnameを「lux_label」に変更します。

▲ txtに帯ラベル文字列「LIVING」を入力して表示された状態

.txtに帯ラベル文字列「LIVING」を入力すると表示されます。

3つの部品(lux_pic / lux_text / lux_label)の位置・サイズは以下の通り確定させました。画面(400×240)を左右分割し、左に画像、右側にテキスト2段という構成です。

▲ lux_picの.x/.y/.w/.hを設定している場面

lux_picの.x/.y/.w/.hを上表の値に設定します。

▲ lux_textの.x/.y/.w/.hを設定している場面

lux_textも同様に設定します。

▲ lux_labelの.x/.y/.w/.hを設定している場面

lux_labelも同様に設定します。

ページ全体の背景色は、キャンバスの何もない場所をクリックして部品の選択を外すと、Attributeにページ自体の.bcoが表示され、そこから変更できます。

▲ 何もない場所をクリックしてページ自体を選択、.bcoを濃紺に設定した後のキャンバス

今回は初期状態としてダークな配色(濃紺 R18/G22/B30)にしました。

Text部品には.sta(背景の塗り方: Solid color / Crop Image / Imageの3択)、.bco(背景色)、.pco(文字色)、.style(枠の立体表現)があります。

▲ lux_textの.bcoをページ背景と同色、.pcoを白に設定している場面

lux_textの.bcoをページ背景と同色、.pcoを白に設定します。

▲ lux_labelの.bcoをページ背景と同色、.pcoをアンバー系(R255/G180/B60)に設定している場面

lux_labelの.bcoをページ背景と同色、.pcoをアンバー系(R255/G180/B60)に設定します。

Button部品とVariable部品の配置(ダーク/ライトモード切り替えの下準備)

NX4024T032はタッチスクリーン対応ですが、lux表示だけでは無タッチ操作になってしまうため、タッチ操作の実例としてダーク/ライトモードの切り替えボタンを追加しました。Nextion側のみで完結する実装で、Pico側のUART通信・コードは無改変です。

▲ Toolbox「Button」をクリックしてキャンバスに追加

Toolbox「Button」をクリックしてキャンバスに追加します。

▲ objnameを「mode_btn」に変更

.objnameを「mode_btn」に変更します。

▲ .txtを「MODE」に設定

.txtは既存フォントの文字セット内に収まる文字列(今回は「MODE」)にします。

▲ .x/.y/.w/.hを設定(220, 15, 170, 50)

.x/.y/.w/.hを(220, 15, 170, 50)に設定します。

次に、状態管理用のVariable部品(mode_flag)を1つ追加します。画面には表示されません。

▲ Toolbox「Variable」を追加

Toolbox「Variable」を追加します。

▲ objnameを「mode_flag」に変更、.vscopeをglobalに設定

.objnameを「mode_flag」に変更し、.vscopeをglobalに設定します。

最終的な画面レイアウトは以下の通りです(縦方向は上余白15px→Button50px→隙間15px→lux_text 80px→隙間15px→lux_label 50px→下余白15pxで合計240pxちょうど)。

ダーク/ライトモード切り替えを実装しSimulatorで動作確認する

mode_btnを選択し、上部のEventタブをクリックすると、タッチ操作に対応するイベントスクリプトを書けます。

▲ mode_btn選択→上部「Event」タブをクリック

mode_btnを選択します。

▲ Touch Release Eventのスクリプト入力画面(空の状態)

Touch Release Eventタブを開くと、スクリプト入力欄が表示されます(最初は空です)。

ここに以下のスクリプトを記述します(実機で動作確認済み)。

if(mode_flag.val==0)
{
  page0.bco=65469
  lux_text.bco=65469
  lux_label.bco=65469
  lux_text.pco=6338
  mode_flag.val=1
}
else
{
  page0.bco=4259
  lux_text.bco=4259
  lux_label.bco=4259
  lux_text.pco=65535
  mode_flag.val=0
}

Nextionの色指定は8bit RGBではなくRGB565という16bit形式です。カラーピッカー自体は8bit RGB感覚で選べますが、スクリプトで直接指定する場合は以下の変換式で求めます。

RGB565 = ((R>>3)<<11) | ((G>>2)<<5) | (B>>3)

Simulator(Debug)での動作確認

▲ ツールバーのCompile→Debugボタン位置

Compile → DebugボタンでSimulatorが起動します。

▲ Debugボタンの位置

Debugボタンの位置です。

▲ Simulator起動直後の画面

Simulatorが起動し、作った画面が表示されます。

▲ Instruction Input Areaのクローズアップと、String/Hex切り替えボタン

画面下部のInstruction Input Areaに、Nextionのコマンドを直接打って実行できます。

• 「Run all commands」ボタンで実行
• 入力形式はString / Hexの切り替えあり
• 文字列コマンドを打つ場合は必ず「String」を選ぶ

▲ コマンド入力→「Run all commands」→実行後、Simulatorに反映された状態

コマンドを入力して実行すると、Simulatorに反映されます。

実際に使ったコマンド例です。

lux_text.txt="999 lx"
lux_label.txt="NIGHT"
lux_pic.pic=0
lux_pic.pic=1
...
lux_pic.pic=5

lux_pic.pic=0〜5を順に送り、6段階の画像が切り替わる様子です。

▲ pic=0(NIGHT)

lux_pic.pic=0 → NIGHT

▲ pic=1(DIM)

lux_pic.pic=1 → DIM

▲ pic=2(HALLWAY)

lux_pic.pic=2 → HALLWAY

▲ pic=3(LIVING)

lux_pic.pic=3 → LIVING

▲ pic=4(DESK)

lux_pic.pic=4 → DESK

▲ pic=5(OUTDOOR)

lux_pic.pic=5 → OUTDOOR

mode_btnをクリックすると、ダーク⇔ライトが切り替わることも確認できます。

▲ ダークモードのSimulator画面

ダークモードの状態です。

▲ ライトモードのSimulator画面

mode_btnタップ後、ライトモードに切り替わりました。

コンパイルからmicroSDカード書き込みまで｜.tftファイルを実機に転送する

Compile成功時のログ例です。

Available Memory:3584
Global Memory:16
Total size of picture:28,824
Total size of font:1,066
Page:page0 Memory Occupied:16+44=60
File Check Finish
Compile Successful! 0 Errors, 0 Warnings,File Size:331,452

▲ Compile実行直後のログウィンドウと成功ログのクローズアップ

Compile実行直後のログウィンドウです。

.tftファイルの書き出し

▲ File→「TFT file output」メニュー

Compileで生成される.tftファイルの保存場所は、File → 「TFT file output」メニューから確認できます。

▲ TFT file outputダイアログ(保存パス表示)と「Output」ボタン押下

現在の保存パスが表示されます。「Output」ボタンでその場で再コンパイルしつつフォルダを開いてくれます。

▲ .tftが入ったフォルダがエクスプローラーで開かれた状態

.tftが入っているフォルダがエクスプローラーで開かれます。

microSDカードでの書き込み手順

▲ SDカードのFAT32フォーマット画面

1. microSDカードをFAT32でフォーマット(8GB〜32GB、Class10目安)

▲ SDカードルート直下に.tftを1つだけコピーした状態

2. カードのルート直下に.tftファイルを1つだけコピー(複数あると誤動作)

3. Nextion本体の電源をOFF(未給電の状態)
4. microSDカードを本体のスロットに挿入
5. 電源ON(配線図どおりPico経由でVBUSから5Vを供給、またはUSB経由)→ 自動でアップロード進捗バーが表示され、内蔵フラッシュに書き込まれる

6. 完了したら電源OFF → SDカードを抜く(挿したままだと起動のたびに再書き込みしようとすることがある)
7. SDカードを抜いた状態で電源ON → 作った画面が表示されれば成功

MicroPythonでBH1750のlux値をNextionにUART送信する(コード解説)

Pico側のコードです。BH1750からlux値を読む部分は前回記事と同じ実装(0x10連続高分解能モード)なので、詳しい仕組みはそちらをご覧ください。

# nextion-tft001 / nextion-lux.py
from machine import Pin, I2C, UART
import time

# --- BH1750(照度センサー、既存記事 bh1750-lux-meter001 から流用) ---
I2C_ID = 0
SCL_PIN = 1
SDA_PIN = 0
BH1750_ADDR = 0x23          # ADDRピンをGNDに落とした場合。VCCなら0x5C
CONT_H_RES_MODE = 0x10      # 連続・高分解能モード(分解能1lx)

i2c = I2C(I2C_ID, scl=Pin(SCL_PIN), sda=Pin(SDA_PIN), freq=400000)

# --- Nextion(NX4024T032、UART1経由) ---
uart = UART(1, baudrate=9600, tx=Pin(4), rx=Pin(5))
NEXTION_TERM = b"\xff\xff\xff"  # Nextionへの文字列コマンドは末尾にこの3バイトが必須

# lux帯のしきい値(上限lux, ラベル)。JIS Z9110の住宅内推奨照度がベース。
LUX_BANDS = (
    (2, "NIGHT"),
    (30, "DIM"),
    (100, "HALLWAY"),
    (500, "LIVING"),
    (1000, "DESK"),
    (65536, "OUTDOOR"),
)


def read_lux():
    i2c.writeto(BH1750_ADDR, bytes([CONT_H_RES_MODE]))
    time.sleep_ms(180)                     # 測定完了まで待つ(データシートの最大測定時間180ms)
    hi, lo = i2c.readfrom(BH1750_ADDR, 2)
    raw = (hi << 8) | lo
    return raw / 1.2                       # データシートの変換係数でluxに直す


def band_of(lux):
    for pic_id, (upper, label) in enumerate(LUX_BANDS):
        if lux <= upper:
            return pic_id, label
    return len(LUX_BANDS) - 1, LUX_BANDS[-1][1]


def nextion_send(cmd):
    uart.write(cmd)
    uart.write(NEXTION_TERM)


last_pic_id = None

while True:
    lux = read_lux()
    pic_id, label = band_of(lux)

    nextion_send('lux_text.txt="{:.0f} lx"'.format(lux))
    if pic_id != last_pic_id:              # 帯が変わったときだけラベル・画像を送信(無駄な通信を減らす)
        nextion_send('lux_label.txt="{}"'.format(label))
        nextion_send('lux_pic.pic={}'.format(pic_id))
        last_pic_id = pic_id

    time.sleep(1)

ポイントは3つです。

1. NEXTION_TERM = b"\xff\xff\xff": Nextionへの文字列コマンドは、末尾に0xFF 0xFF 0xFFの終端3バイトを付けないと実行されません。nextion_send()関数で毎回自動的に付与しています。
2. band_of(): しきい値のタプルLUX_BANDSを上から順に見て、lux値が収まる帯のインデックス(=Picture部品の.pic番号)とラベル文字列を返します。Nextion Editor側のlux_picは帯が低い順に0〜5番の画像を登録してあるので、インデックスがそのまま.pic番号として使えます。
3. 差分送信: lux_text(数値)は毎秒送りますが、lux_label(ラベル)とlux_pic(画像)は帯が変わったときだけ送信しています。UART通信の回数を減らし、画面のちらつきも防げます。

完成デモ｜lux値・ラベル・イメージ画像が連動して切り替わる様子

実機でBH1750に手をかざしたり離したりしてlux値を変化させると、数値・ラベル・イメージ画像が連動して切り替わります。

mode_btnをタッチすると、ダーク⇔ライトモードも切り替わります。

よくある質問(FAQ)

まとめ

Nextion Editorを使って、Raspberry Pi Pico + BH1750の照度計をタッチパネルディスプレイに表示する工作を作りました。

• フォント作成(Font Creator)は「Specified Character」で必要な文字だけ登録するのが鉄則
• 画像(Picture部品)は画面解像度以下にリサイズしてからImportする
• ボタンのTouch Release Eventだけで、Pico側のコードを変えずにダーク/ライトモード切り替えが実装できる
• Pico側は差分送信の工夫で、UART通信量を減らしつつ滑らかな表示更新ができる

日本語資料が少ない領域だったので、今回の記事がNextion Editorで何かを作りたい方の助けになれば幸いです。このNextionディスプレイは、次に作る予定のケーブル切断機のUIとしても使っていく予定なので、進捗はまた記事にしていきます。