ワークスペースインターフェースとテンプレート

はじめに

SenseCraft HMI へようこそ！このチュートリアルは、プラットフォームの中枢神経系であるメインツールバーのガイドになります。これらの機能をマスターすることは、プロジェクトを効率的に管理し、デバイスのステータスを理解し、デザインを実現するための鍵です。

3つの主要領域をカバーします：

デバイスステータスバー：すべてのデバイス関連情報の一目でわかる情報源。
ページとページリスト管理：表示コンテンツを整理および作成するシステム。
メインツールバー：作業の設計、保存、デプロイのための基本的なコントロールセット。

このガイドの終わりまでに、プロのように SenseCraft HMI ワークスペースをナビゲートおよび制御する方法を深く理解できるようになります。

デバイスステータスバー

ワークスペースの最上部にあるデバイスステータスバーは、接続されたデバイスに関するリアルタイム情報を提供します。

各情報の意味を分解してみましょう：

Device / e1001：現在選択されているデバイスの名前とモデルを表示します。
Sleep：デバイスの現在のステータスを示します。「Sleep」または「Awake」になります。
Last Online: 15:27：このタイムスタンプは、デバイスが SenseCraft HMI クラウドプラットフォームと正常に通信した最後の時刻を示します。
Interval(min): 30：これは重要な設定です。デバイスがディスプレイを更新して新しいデータまたはデザインを取得するために何分ごとに起動するかを定義します。
Next Online: 15:57：「Last Online」時刻と「Interval」に基づいて、デバイスが次に起動して接続する時刻を予測します。
800x480：これは接続されたデバイスの画面解像度です。キャンバス内のすべてのデザインは、この寸法に基づいて行われます。
デバイスセンサーデータ：reTerminal E シリーズなどの互換性のあるデバイスの場合、このエリアには内蔵センサーからのライブ読み取り値が表示されます：
- 🌡️ 26.7：温度。
- 💧 55.9%：湿度。
- 🔋 100%：現在のバッテリーレベル。

ページとページリストの管理

このセクションは、デバイスに表示したいすべてのコンテンツを整理する場所です。詳しく見る前に、2つの重要な概念を理解することが重要です：ページ と ページリスト。

ページ：単一の画面デザイン。これは、Canvas からの UI デザイン、Gallery からの画像、RSS フィード、または Web ページにできます。プレゼンテーションの単一の「スライド」と考えてください。
ページリスト：ページのコレクションまたは「プレイリスト」。ページリストには、1つ以上のページを含めることができます。デバイスは常に1つのアクティブなページリストを表示するように設定されています。ページリストに複数のページが含まれている場合、デバイスは定義された間隔でそれらを循環表示します。

新しいページの作成

+ New ボタンは、新しいコンテンツを追加するための出発点です。

ステップ1. + New ボタンをクリックします。

ステップ2. ダイアログが表示され、新しいページを作成するためのいくつかのオプションが提供されます：

UI デザイン（Canvas）：さまざまなコンポーネントを使用してカスタムレイアウトを最初から作成します。
ギャラリー：画像を表示するページを作成します。
RSS：RSS フィードを表示するページを作成します。
Web：Web ページを表示するページを作成します。
テンプレート：さまざまな事前設計されたテンプレートから選択して、良いスタートを切ることもできます。

テンプレート

テンプレートは、複数のコンポーネントをまとまりのある、すぐに使用できるディスプレイに組み合わせた事前設計されたレイアウトを提供します。時間を節約し、レイアウトを最初から設計する必要なく、プロフェッショナルな結果を保証します。

天気表示テンプレート

天気表示テンプレートは、任意の都市の現在の状況と7日間の予報を表示する完全な天気ダッシュボードを提供します。

ステップ1. テンプレートセクションで「天気表示」テンプレートをクリック

ステップ2. 表示される「テンプレートの構成：天気表示」ダイアログで：

「都市名」フィールドに都市名を入力
「検索」をクリックして、その都市が天気データベースに存在することを確認

ステップ3. 検索が成功したら、「OK」をクリックして続行

ステップ4. 「テンプレートプレビュー」ウィンドウが表示され、以下が表示されます：

現在の日付、天気状況、温度、最高/最低、湿度を含む左パネル
都市名と天気状況アイコンと温度範囲を含む7日間の予報を含む右パネル

ステップ5. プレビューを確認し、次のことに注意してください：

すべてのテンプレート要素には、競合を避けるために一意の ID が付与されます
キャンバスにテンプレートを適用した後、変更できます

ステップ6. 「キャンバスに適用」をクリックして、テンプレートをワークスペースに追加

ステップ7. 天気表示テンプレートがキャンバス上にあり、デプロイまたはさらにカスタマイズする準備ができています

GitHub プロフィールテンプレート

GitHub プロフィールテンプレートは、GitHub ユーザーのプロフィール情報と選択したリポジトリおよびその統計情報を表示する包括的なダッシュボードを作成します。

ステップ1. テンプレートセクションで「GitHub プロフィール」テンプレートをクリック

ステップ2. 表示される「テンプレートの構成：GitHub プロフィール」ダイアログで：

GitHub 個人アクセストークンを入力します。SenseCraft HMI バックエンドがオープンソースリポジトリからデータを読み取る権限を確保するために、すべてのユーザー権限を有効にする必要がある場合があります。

必須フィールドに GitHub ユーザー名を入力（例：「seeed-studio」）
オプションで、リポジトリ検索フィールドにキーワードを入力してリポジトリをフィルタリング
検索フィールドを空のままにして、そのユーザーのすべてのリポジトリを表示

ステップ3. 「すべての ‘[ユーザー名]’ リポジトリを検索」ボタンをクリックして、ユーザーのリポジトリを取得

ステップ4. 表示されたリポジトリリストから、紹介したい最大3つのリポジトリを選択

各リポジトリには、名前、説明、主要なプログラミング言語、スター数が表示されます
フィルターフィールドを使用してリポジトリリストを絞り込むことができます

ステップ5. 「OK」をクリックして選択を確認

ステップ6. 「テンプレートプレビュー」ウィンドウが表示され、以下が表示されます：

上部の GitHub ユーザー表示名
「Github」ラベルとフォロワー数
水平分割線
選択したリポジトリとその名前とスター数

ステップ7. プレビューを確認し、次のことに注意してください：

テンプレートは、キャンバス上のすべての現在の要素を置き換えます
すべてのテンプレート要素には、競合を避けるために一意の ID が付与されます
キャンバスにテンプレートを適用した後、変更できます

ステップ8. 「キャンバスに適用」をクリックして、テンプレートをワークスペースに追加

株式ダッシュボードテンプレート

株式ダッシュボードテンプレートは、価格とパーセンテージ変化を含むリアルタイム株式市場データのクリーンでプロフェッショナルな表示を提供します。

ステップ1. テンプレートセクションで「株式ダッシュボード」テンプレートをクリック

ステップ2. 表示される「テンプレートの構成：株式ダッシュボード」ダイアログで：

提供されたフィールドに Twelve Data API キーを入力（セキュリティ上の理由でマスクされています）

ステップ3. テンプレートは4つのデフォルトの会社株を提供します。表示に他の会社の株を使用したい場合は、テンプレートを適用した後に自分で変更できます。

ステップ4. 「プレビュー」をクリックして確認

ステップ5. 「テンプレートプレビュー」ウィンドウが表示され、以下が表示されます：

大きなテキストで株式シンボルを表示する左パネル
現在の株価とパーセンテージ変化を表示する右パネル

ステップ6. プレビューを確認し、次のことに注意してください：

すべてのテンプレート要素には、競合を避けるために一意の ID が付与されます
キャンバスにテンプレートを適用した後、変更できます

ステップ7. 「キャンバスに適用」をクリックして、テンプレートをワークスペースに追加

YouTube チャンネル統計テンプレート

YouTube チャンネル統計テンプレートは、YouTube チャンネルのブランディング、スローガン、購読者数をクリーンでモダンなデザインで紹介します。

ステップ1. テンプレートセクションで「YouTube チャンネル統計」テンプレートをクリック

ステップ2. 表示される「テンプレートの構成：YouTube チャンネル統計」ダイアログで：

YouTube Data API キーを入力（セキュリティ上の理由でマスクされています）
サポートされている形式の1つで YouTube チャンネル識別子を入力：
- チャンネル ID：「UC」で始まる24文字の文字列（例：UC_x5XG1OV2P6uZZ5FSM9Ttw）
- @ハンドル：@で始まるチャンネルハンドル（例：@seeedstudiosz）
- チャンネル URL：完全な YouTube URL（例：youtube.com/@seeedstudiosz）

ステップ3. 「チャンネルの検証」をクリックして、チャンネルが存在することを確認し、そのデータを取得

ステップ4. 検証が成功すると、確認メッセージが表示されます（例：「チャンネルが見つかりました：Seeed Studio • 20.4K」）

ステップ5. 「OK」をクリックして続行

ステップ6. 「テンプレートプレビュー」ウィンドウが表示され、以下が表示されます：

スタイリッシュな黒い背景でチャンネル名とスローガン/説明を表示する左パネル
「YouTube」ラベル、購読者数、「購読者」テキストを表示する右パネル

ステップ7. プレビューを確認し、次のことに注意してください：

テンプレートは、キャンバス上のすべての現在の要素を置き換えます
すべてのテンプレート要素には、競合を避けるために一意の ID が付与されます
キャンバスにテンプレートを適用した後、変更できます

ステップ8. 「キャンバスに適用」をクリックして、テンプレートをワークスペースに追加

ページリストの管理

ページリスト ボタンは、コンテンツの整理を完全に制御できる強力な管理インターフェースを開きます。

ステップ1. + New ボタンの横にある ページリスト ボタンをクリックします。

ステップ2. 「ページリストとページの管理」モーダルが表示され、3つのセクションに分かれています：

ページリスト（左パネル）：このエリアには、作成したすべてのページリストがリストされます。
- スター付きのリスト（画像の デフォルトページリスト）は、現在アクティブで、デバイスに表示されるリストです。
- ここで + New をクリックして、新しい空のページリストを作成できます。
現在のページリスト（中央パネル）：選択したページリスト内の現在のすべてのページを表示します。
- 赤いマイナスアイコン（-）をクリックして、ページリストからページを削除します（これによりページ自体は削除されません）。
すべてのページ（右パネル）：これは、これまでに作成したすべてのページのライブラリです。保存ボタンをクリックしたページのみがここに表示されます。
- 現在選択されているページリストにページを追加するには、目的のページサムネイルのプラスアイコン（+）をクリックするだけです。すると、「現在のページリスト」パネルに表示されます。

ステップ3. ページリストを希望どおりに整理したら、確認をクリックして変更を保存します。

メインツールバー：コントロールセンター

このツールバーには、設計とデプロイプロセスのための基本的なアクションボタンが含まれています。

画面の向き：これらの2つのアイコンを使用すると、デザインキャンバスを横向き（水平）モードと縦向き（垂直）モードで切り替えることができます。
デバッグ（バグアイコン）：これは上級ユーザー向けの強力な機能です。
- クリックすると、「デバッグ：現在のレイアウトデータ」モーダルが開きます。
- このモーダルは、レイアウト全体の構成を JSON（JavaScript Object Notation）形式で表示し、すべての要素、その位置、サイズ、色、その他のプロパティを詳細に示します。
- これを使用して、デバッグ目的でデザインの構造を理解できます。
- コードに精通しているユーザーは、JSON を手動で編集 をクリックして、レイアウトのプロパティを直接変更することもでき、信じられないほどの制御度を提供します。
インポート/エクスポート：これらのボタンを使用すると、ページデザインをローカルファイルに保存（エクスポート）したり、ローカルファイルからデザインを読み込んだり（インポート）したりできます。これは、作業をバックアップしたり、デザインを共有したりするのに役立ちます。

エクスポート機能を使用すると、現在の UI デザインをファイルとして保存できます：

ステップ1. インターフェースデザインを完了したら、上部ツールバーの エクスポート ボタン（外向き矢印アイコン）をクリックします。

ステップ2. 表示されるファイル保存ダイアログで、保存場所を選択し、ファイルに名前を付けます。

ステップ3. 「保存」をクリックして、エクスポートプロセスを完了します。

デザインは、すべてのインターフェース情報を含む JSON ファイルとして保存され、バックアップや共有に使用できます。

インポート機能を使用すると、以前にエクスポートしたデザインまたはテンプレートを読み込むことができます：

ステップ1. 上部ツールバーの インポート ボタン（内向き矢印アイコン）をクリックします。

ステップ2. ファイル選択ダイアログで、以前にエクスポートしたデザインファイルを見つけて選択します。

ステップ3. 「開く」をクリックすると、選択したデザインが現在のワークスペースに読み込まれます。

これらの機能は、次の場合に特に役立ちます：

大きな変更を加える前にデザインをバックアップする
チームメンバーとインターフェースデザインを共有する
異なるデバイス間でプロジェクトを転送する
事前作成されたテンプレートを使用して新しいプロジェクトをすばやく開始する

保存：これは最も重要なボタンの1つです。現在のページデザインを SenseCraft HMI クラウド に保存します。デバイスには保存 されません。

進行状況を失わないように、頻繁に保存をクリックする習慣を身につけましょう。
プレビュー：このボタンは、デバイスの画面に現在のデザインがどのように表示されるかの仮想プレビューを表示します。実際のハードウェアにデプロイすることなく、レイアウト、フォント、色をチェックする迅速で簡単な方法です。
デプロイ：これは最後のステップです。デプロイ ボタンは、保存されたアクティブなページリストを接続されたデバイスに送信します。その後、デバイスは新しいコンテンツをダウンロードして表示します。

デプロイをすぐに有効にするには、デバイスが起動状態である必要があります。デバイスがスリープモードの場合、間隔スケジュールに基づいて次回起動したときに新しいデザインを取得します。デバイスを手動で起動（例：デバイスのボタンを押す）して、デプロイされたデザインの即時更新とダウンロードをトリガーできます。

まとめ

SenseCraft HMI の基本的なコントロールについて、しっかりとした理解ができました。デバイスステータスバーを効果的に使用し、ページとページリストを管理し、保存 -> プレビュー -> デプロイのワークフローに従うことで、画面ベースのデバイスで想像できるあらゆるコンテンツを作成、管理、表示する準備が整っています。