Node-Red UI インターフェイスの基本設計
1. UIインターフェースの紹介
UI のレイアウトは、ノードのタブ属性とグループ属性によって異なります。タブはページ、グループはグループとして理解できます。タブにはグループを含めることができます。
ダッシュボード コントロールを使用する場合、ノードのタブ名とグループ名を設定でき、設定後に UI インターフェイス上で確認できます。
2.ダッシュボードラベル
ダッシュボード ノードを使用すると、画面右側の「デバッグ ウィンドウ」の横にダッシュボードという小さなラベルが表示され、その下にレイアウト、テーマ、サイトの 3 つのオプションがあります。
レイアウトとはレイアウトという意味で、タブやグループ、コントロールなどを並べ替えたり、プロパティを編集したりできます。他の Web ページをタブに追加することもできます。
サイトとはアドレスを意味し、タイトルのUIを設定したり、タイトルバーを選択したりできます。グリッド レイアウトの基本的なグラフィックスをピクセル単位で設定することもできます (先ほど説明したデフォルトの「単位」は 48 ピクセルです)。またはコントロールを個別に設定することもできます。テーマ グループのサイズはテーマを意味します
。明るい、暗い、またはカスタムを選択できます。
（1）レイアウト
「レイアウト」タブでは、すべてのプログラムのタブとグループを表示し、対応するタブに含まれるノードを表示できます。もちろん、最も重要な機能はレイアウトの改訂です。ここには 2 つの修正方法があり、好みに応じて調整できます。
- レイアウト変更-1
移動したいノードを左ボタンで押したまま、適当な位置までドラッグすると、点線が表示されます。
メリット:この方法の方がドラッグが速く、操作が簡単です;
デメリット:タブまたはグループを設定するときにノードのサイズを設定する必要があり、ノードのサイズに応じて空いた位置が自動的に埋められます。ノードは均一ではなく、インターフェイスも美しくありません。
- レイアウト変更-2
タブ名の後ろにある「レイアウト」をクリックして、インターフェース全体のノードのレイアウトを調整します。ノードがロックされていない場合はautoを意味し、サイズは調整できません。ノードがロックされている場合は、ノードを自由にドラッグ アンド ドロップし、ノードの長さと幅を変更できます。
利点:この方法を使用してレイアウトを変更する場合、インターフェイスのレイアウトと UI インターフェイスで表示されるレイアウトを変更するため、レイアウトの全体的な把握度が高くなります; 欠点: このタブ
内のノードのみを変更できます。 UI インターフェイスには複数のタブが表示されます。タブの順序は調整できません。
（2）サイト
サイトデザインインターフェイスには変更可能なコンテンツが多数あります
- タイトル: UI インターフェースの名前は変更できます。ここで言及されている名前は、ブラウザーのタブの名前を指します。
- オプション：
-
オプション メニューでは、ラベル フレームの表示/非表示を変更できます。ラベル フレームは、UI インターフェイス上でタブ名を表示する水平部分です。デフォルトの色は青です。以下は 2 つのオプションの比較効果図です。 ;
-
メニュー名を表示するか非表示にするかを選択します。メニュー名は、表示されるタブ名の垂直部分です。
- Date Format は日付形式です。詳細については、入力ボックスの左上隅にある詳細を確認し、詳細インターフェイスに入って表示できます。
- サイズでは、1x1 ウィンドウのサイズ、ウィンドウの間隔などを調整できます。
（3）テーマ
Node-red は、昼、夜、カスタマイズなど、UI インターフェイスのさまざまなテーマを設定することもできます。昼または夜のテーマでは、バーの色、タブのフォントの色、ノードのデフォルトの背景の色などをカスタマイズすることもできます。 UI インターフェイスの数字や文字のフォントをすべて変更することもできます。