One Channel Hub対応LoRa/LoRaWAN HMIタッチスクリーン LTS5-JP - Squareline Studioの概要とUI開発環境

One Channel Hub対応LoRa/LoRaWANタッチスクリーン LTS5-JPを先週リリースしました。タッチスクリーンのカスタマイズには、開発ツールStudio Studioを使いますので下記にて概要を列記します。

*Squareline Studioサイト

SqurelineStudio_logo.png

SquareLine Studioとは何ですか?

SquareLine Studio は、デザイナーが最も効率的に計画を実行し、プログラマーの負担を最大限軽減できるように特別に開発されました。SquareLine Studio は完全にオープン ソースの LVGL UI ライブラリを使用しており、Lib ファイルで生成されたコード セットがないため、プロジェクト全体を制御できます。また、低パフォーマンスのデバイスでも優れたパフォーマンスを発揮します。

C++ および MicroPython のサポート

SquareLine Studio は、C および MicroPyton ソース コードのエクスポートをサポートしています。低レベルの C プログラミングが必要ない場合は、よく知られ、一般的に使用されている Python スクリプト言語の簡易版である MicroPython でプロジェクトを作成できます。C プログラミングと比較した MicroPython の利点は、コマンドをリアルタイムで処理できることです。たとえば、デバイスで実行されているプロジェクトの画面にボタンを追加する場合は、ボタンがデバイスにすぐに表示されるように、システムにボタンの追加コマンドを送信する必要があります。

典型的な開発ワークフロー

新しいプロジェクト

最初のステップは、新しいSquareLine Studioプロジェクトを作成することです。詳細については、「はじめに」 セクションを参照してください。現時点では、シミュレータプロジェクトのみを作成できます。シミュレータプロジェクトを使用すると、プラットフォームに依存しないアプリケーションを作成できます。(後のバージョンでは、さまざまな開発ボードがサポートされます。)

・プロジェクトに名前を付ける
・場所を選択する
・好みの解像度、色深度、テーマを選択してください

これを行うと、新しい空白の画面が自動的に作成されます。さらに、いくつかのプロジェクト ファイルとフォルダーを含むプロジェクトの新しいフォルダーが、選択した場所に追加されますAssets

画面コンテンツ

Photoshop またはその他のデザイナー ソフトウェアで作成された画像は、Assetsプロジェクトのフォルダーにコピーする必要があります。プロジェクトに必要なフォントは、フォルダーに配置する必要があります。これらの画像とフォントは、アセット パネル Asset/Fontに表示されます。

画面上にウィジェットとイベントを作成する

ウィジェット パネル には、ウィジェット (ボタン、ラベル、画像など) があります。これらのウィジェットを画面に追加するには、ウィジェットのアイコンをクリックするか、画面にドラッグするだけです。ウィジェットを選択した場合は、インスペクタ パネル の下部でウィジェットにイベントを追加して、インタラクションを作成したり、アニメーションを再生したりできます。

プロジェクトをシミュレートしてエクスポートする

ユニークなことに、SquareLine Studio で作業中のプロジェクトを瞬時に直接テストできます。画面領域ビュー Playの右上隅にあるボタンを使用して、プロジェクトのシミュレーションを開始できます。「再生モード」では、ウィジェットの設定、およびウィジェットに関連付けられているスタイルやアニメーションのパラメータを調整できます。

プロジェクトをエクスポートする

現在のバージョンでは、C/C++ および MicroPython 言語用のすぐに使用できるシミュレータ プロジェクトをエクスポートできます。ここでは、File/Projet Settingsターゲット言語と IDE/SDK を設定できます。MakeFile プロジェクトを使用した MicroPython または Eclipse プロジェクトを使用した C/C++ を選択できます。このウィンドウでは、ディスプレイの解像度と色深度を変更することもできます。

その後、Export/Export Projectメニューをクリックすると、プロジェクトをエクスポートする場所を参照できます。場所を選択すると、数秒以内にプロジェクトがそこに表示されます。

エクスポートされたプロジェクトには UI 自体は含まれません。通常、プロジェクトは 1 回 (または数回) だけエクスポートされ、その後は UI ファイルのみが更新されます。これにより、プロジェクトの他の部分で行った変更が上書きされないようになります。

UIファイル

実際の UI ファイルはメニューからエクスポートできますExport/Export Files。ファイルの場所も尋ねられます。この場所は保存され、後でファイルをエクスポートするときにこのパスが使用されます。(File/Project Setting/Export Pathフィールドで変更できます。)

エクスポートされたプロジェクトには、プロジェクト内の UI ファイルの優先場所を示す「README」ファイルが含まれています。

UI ファイルは、SquareLine Studio でプロジェクトをエクスポートしなくてもエクスポートできます。つまり、プロジェクト (組み込みシステム用など) を準備しておけば、そこに UI ファイルもエクスポートできます。この場合、ドライバーを記述して、ファイルのビルドを行う必要があります。

C/C++ の場合、次のフォルダーが作成されます。

screens各画面のCファイルを含むフォルダ
imagesCファイルに変換された画像を含むフォルダ
fontsCファイルに変換されたフォントを含むフォルダ
components各コンポーネントの C ファイルが含まれるフォルダー。

以下の特別なファイルも作成されます:

ui.c画面、コンポーネント、スタイル、アニメーションなどを初期化するUIのメインファイル
ui.hウィジェットと機能を表示するにはこれを含める必要があります
ui_helper.c内部ui_helper.c的に使用されるui.c
ui_events.c「関数呼び出し」イベントとして使用される関数のスケルトン。ここで関数の実装を追加できます。
components/ui_comp_hook.cコンポーネント作成の最後に呼び出されるカスタムコードを追加して、特定のコンポーネントをカスタマイズできます。
CMakeList.txtCMakeビルドシステムでuiフォルダを追加するために使用できます。add_subdirectory(ui)CMakeList.txtファイルに以下を追加するだけです
filelist.txtで区切られた C ファイルのリスト\n。必要に応じて、任意のビルド システムで使用できます。

C/C++ UIを設定するには

1…含むui.h
2.電話lv_init();

  1. ディスプレイと入力デバイスのドライバーを設定する
  2. 電話ui_init();

MicroPythonの場合、これらのファイルは作成される
5… ui.pyUI

コード自体

ui_helper.pyui.py内部的に使用される
ui_images.py変換されたすべての画像
ui_font_*.bin変換されたフォント
ui_events.py「関数呼び出し」イベントとして使用される関数のスケルトン。ここで関数の実装を追加できます。

MicroPython UIを設定するには

  1. import lvglそしてそれを初期化するlv.init()

ディスプレイと入力デバイスのドライバーを設定する
2. import ui

SquareLine Studio の新しいバージョン (最小 1.3.0) では、Arduino UI プロジェクトが Arduino ライブラリとしてエクスポートされます。

UI ファイルのみをカスタム Arduino プロジェクトにエクスポートする場合は、このフォルダーをライブラリ フォルダーに追加し、UI ファイルを src フォルダーにエクスポートする必要があります。

「このフォルダ」リンク:

board_arduino_tft_espi/__ui_project_name__/libraries/ui at v1.1.0 · SquareLineStudio/board_arduino_tft_espi · GitHub

ライセンス

SquareLine Studioは5つの異なるバージョン

試用ライセンス
個人ライセンス
中小企業ライセンス
営業許可証
生涯ライセンス
エンタープライズライセンス

オフラインライセンス

1 つのライセンスは、ユーザーとコンピューターに接続されます。別のコンピューターでプログラムを使用する場合は、別のライセンスを購入するか、ライセンスをそのコンピューターに移動する必要があります。その場合、以前接続していたコンピューターではライセンスを使用できなくなります。

ポータブルライセンス

バージョン 1.2 以降では、ポータブル ライセンスに切り替えることができます。これにより、ライセンスを複数のコンピューターで使用できるようになりますが、同時に使用できるのは 1 台のコンピューターのみです。ポータブル ライセンスが必要な場合は、お問い合わせください。ポータブル ライセンスを使用するには、アクティブなインターネット アクセスが必要です。

ライセンスの種類

試用ライセンス

このタイプのライセンスは、ビジネス ライセンスの SquareLine Studio の機能を 30 日間試用できるライセンスです。試用ライセンスは商用目的での使用は許可されておらず、ソフトウェアを評価するための個人使用のみに明示的に提供されています。試用ライセンスは無料です。

個人ライセンス

このタイプのライセンスは、ソフトウェアの商用目的での使用を許可するものではなく、ソフトウェアの非商用および個人使用のみを明示的に提供します。ソフトウェアの機能は、詳細なソフトウェア ドキュメントに従って制限されます。個人ライセンスは無料です。

事業許可証

このタイプのライセンスは、いかなる制限もなく、あらゆる商業目的でソフトウェアを使用することを許可します。このライセンスでは、ソフトウェアの機能は完全であり、ソフトウェアのドキュメントに記載されているすべての機能が提供されます。このライセンスに対して、お客様は当社の Web サイトに記載されている料金を支払うものとします。

中小企業ライセンス

このタイプのライセンスはビジネス ライセンスと同じですが、会社がこのライセンス タイプを選択するには、次の利用規約が満たされている必要があります。

  1. SquareLine Studio for Small Businessは、年間収益+資金が最大15万米ドルの企業に限定されています。
  2. 開始時に資格を満たしていれば、SquareLine Studio for Small Business ライセンスを全期間使用する権利を保持します。収益が上記の制限を超える場合は、期間の終了後に「ビジネス」ライセンスに変更する準備をする必要があります。
  3. 1社あたり最大3つの中小企業ライセンスを購入できます
  4. 顧客は上記の制限を満たしているかどうかを確認するための監査の対象となります。

生涯ライセンス

このタイプのライセンスでは、ソフトウェアをあらゆる商業目的で制限なく使用できます。このライセンスでは、ソフトウェアの機能は完全であり、ソフトウェアのドキュメントに記載されているすべての機能が提供されます。ライフタイム ライセンスでは、購入日から 1 年以内にリリースされる更新されたソフトウェア バージョンを使用して、SquareLine Studio を無制限に使用できます。オプションで、ライセンスのバージョン アップグレードをさらに数年間、毎年購入できます。このライセンスについては、当社の Web サイトに記載されている料金を支払う必要があります。

フローティングライセンス

このタイプのライセンスでは、生涯ライセンスの規定に従ってソフトウェアの使用が許可され、さらに最大 10 人のユーザーがライセンスを使用できる可能性が付与されますが、これらのユーザーは同時にソフトウェアを使用することはできません。

エンタープライズライセンス

エンタープライズ ライセンスは、ソフトウェアの機能、ライセンスの期限、ユーザー数などに関する特別な契約のオプションです。詳細については、ライセンス マネージャーの セクションをご覧ください。プログラムをダウンロードすると、ビジネス バージョンの 30 日間のデモがコンピューターに生成されます。

詳細については、30 日間試用ライセンスのセクションをご覧ください。

ライセンスを購入する

ビジネス ライセンスをカートに追加し、更新期間を選択します。複数のライセンスを一度に購入することもできます。たとえば、マネージャーの場合は、ライセンスを一括購入してチーム メンバーに譲渡できます。または、ポータブルでないライセンス タイプを使用している場合は、複数のコンピューターで SquareLine Studio を使用するために複数のライセンスが必要です。

カート内で「チェックアウトに進む 」ボタンをクリックし、必要なデータを入力します。

支払いが完了すると、ライセンス メニューのプロフィールにライセンスが表示されます。

ウェブサイト上のライセンスマネージャー

squareline.io にログインし、プロフィール アイコンをクリックして、[ライセンス] メニューを選択します。

![ライセンスメニュー|155x228](file:///C:/Users/copst/AppData/Local/Temp/lu75606l1p0b.tmp/lu75606l1p0g_tmp_246137f9.png)

購入したライセンスはリストに表示され、すべての詳細を確認したり、ライセンスを管理したりすることができます。

![ライセンス.webp|1444x622](file:///C:/Users/copst/AppData/Local/Temp/lu75606l1p0b.tmp/lu75606l1p0g_tmp_e96dba8b.png)

コンピュータからライセンスを取り消す

非ポータブル ライセンスは、コンピューターから 1 年に 3 回取り消すことができます。ライセンスの横にある [取り消し] ボタンをクリックすると取り消すことができます。これにより、ペアリングされたハードウェアがライセンスから削除され、残りの取り消し回数が減少します。

ライセンスの譲渡

ライセンスを別のアカウントに転送することもできます。登録ユーザーのメール アドレスを入力し、**[**ライセンスの転送 **]**ボタンをクリックするだけです。 **[**キャンセル **]**ボタンをクリックすると、ライセンスを取り戻すことができます。

Lifeime ライセンスのバージョン追跡

生涯ライセンスに含まれる 1 年間のバージョン追跡の有効期限が切れた場合は、「拡張バージョン追跡 」ボタンをクリックして延長できます。

SquareLine Studio

SquareLine Studio を起動すると、ログイン ウィンドウが表示され、試用モードでソフトウェアを起動したり、ログインして購入したライセンスの 1 つを選択したりすることができます。

![/img/トライアル.webp|314x464](file:///C:/Users/copst/AppData/Local/Temp/lu75606l1p0b.tmp/lu75606l1p0g_tmp_36a4f9de.png)

登録時に使用したメールアドレスとパスワードでログインしてください。

![/img/select_license.webp|311x457](file:///C:/Users/copst/AppData/Local/Temp/lu75606l1p0b.tmp/lu75606l1p0g_tmp_5afc38ae.png)

ログインすると、まだどのコンピューターにもバインドされていないライセンスが表示されます。 1 つ選択し、**[**ライセンスの選択 **]**ボタンをクリックします。 次回 SquaraLine Studio を起動すると、選択したライセンスが記憶されます。

注文履歴メニュー

![/img/orders.webp|1397x403](file:///C:/Users/copst/AppData/Local/Temp/lu75606l1p0b.tmp/lu75606l1p0g_tmp_c2490624.png)

注文履歴メニューでは、購入したライセンスの登録を解除したり、請求書をダウンロードしたりできます。

インストール

ウィンドウズ

SquareLine Studio

  1. Intel x64 PC 最小構成 :

  2. CPU: 64 ビット対応の Intel または AMD プロセッサ、1.5 GHz 以上のプロセッサ

  3. メモリ: 4GB

  4. HDD: 2 GBのストレージ容量

  5. GPU: DirectX 11 または OpenGL 3.2 のサポート

  6. オペレーティングシステム :

  7. オペレーティング システム: Windows 7 以降 (64 ビット)

  8. 画面解像度: 1280 x 800

  9. ソフトウェアをアクティベートするにはインターネット接続が必要です

SquareLine Studio

https://squareline.io/downloadsから SquareLine Studio をダウンロードする

SquareLine_Studio_Setup.exe ファイルをダウンロードして起動してください。指示に従ってインストール プロセスを完了してください。

プログラムをインストールしたら、SquareLine_Studio.exe ファイルを起動して作業を開始できます。

リナックス

SquareLine Studio

Intel x64 PC 最小構成 :

  1. CPU: 64 ビット対応の Intel または AMD プロセッサ、1.5 GHz 以上のプロセッサ
  2. メモリ: 4GB
  3. HDD: 2 GBのストレージ容量
  4. GPU: Vulcan または OpenGL 3.2 のサポート
  5. オペレーティングシステム :
  6. オペレーティング システム: Ubuntu 18.04 互換またはそれ以降
  7. 画面解像度: 1280 x 800
  8. ソフトウェアをアクティベートするにはインターネット接続が必要です

SquareLine Studio

https://squareline.io/downloadsから SquareLine Studio をダウンロードする

SquareLine Studioをインストールするには、ターミナルを開き、このフォルダに移動してchmod +x setup.sh ./setup.shを実行します。

その後、SquareLine_Studio.x86_64 またはアプリケーション メニュー (スタート メニュー) から SquareLine Studio を起動します。

macOS

SquareLine Studio

  1. Intel x64 PC 最小構成 :
  2. CPU: Intel 64 ビットまたは ARM 1.5 GHz 以上のプロセッサをサポートメモリ: 4GB
  3. HDD: 2 GBのストレージ容量
  4. GPU: Metal または OpenGL 3.2 のサポート
  5. オペレーティングシステム :
  6. オペレーティング システム: High Sierra 10.13 以降
  7. 画面解像度: 1280 x 800
  8. ソフトウェアをアクティベートするにはインターネット接続が必要です

SquareLine Studio

https://squareline.io/downloadsから SquareLine Studio をダウンロードする

SquareLineStudio を起動し、利用規約に同意すると、ソフトウェアを使用する準備が整います。ARM ベースの CPU (例: Apple M1) をお持ちの場合は、Rosetta を使用してください。詳細はこちらをご覧ください:

はじめる

作業を開始するには、プログラムをインストールする以外に何も必要ありません。シミュレーター プロジェクトを作成しない場合は、開発プロセス中に必要なソフトウェアもインストールする必要があります。

ランチャー

インストール後にプログラムを起動すると、ランチャー 画面が表示されます。ここで、既存のプロジェクトを読み込むか、新しいプロジェクトを作成するか、サンプルを読み込むかを選択できます。

ログイン

プログラムを試用するだけの場合は、登録やログインは必要ありません。コンピューターで SquareLine Studio を使用したことがない場合は、30 日間の試用版が自動的に提供されます。

ライセンスを購入した場合は、自分とコンピュータを識別するためにログインする必要があります。

その後、新しいプロジェクトを作成したり、保存したプロジェクトを読み込んだり、例を使用して作業したりできます。

開く

「開く」メニューでは、保存したプロジェクトを読み込むことができます。

1. プロジェクトのインポート - リストされている最近のプロジェクトに含まれていない古いファイルを読み込むことができます。
2. ボードの説明 - 選択した保存済みプロジェクトのボードの説明。
3. プロジェクトの説明 - 選択した保存済みプロジェクトの説明。
4. プロジェクト設定 - 選択した保存済みプロジェクトの設定。ここでは、プロジェクトの名前、パス、解像度を確認できます。
5. 選択したプロジェクトを開く - リストから最近保存したプロジェクトを読み込むことができます。

作成

「作成」メニューでは、新しいプロジェクトを作成できます。まず、リストから使用するプラットフォームを選択する必要があります。シミュレータを選択した場合は、プロジェクトの解像度を設定できます。

1. ボードの説明 - 選択したボードの説明。
2. プロジェクトの説明 - プロジェクトの説明。
3. プロジェクト設定 - プロジェクトの名前、パス、解像度を作成します。
4. プロジェクトの作成 - 必要なパラメータをすべて追加したら、プロジェクトを作成できます。

ライセンスマネージャー

コンピュータにライセンスが接続されていない場合、または 30 日間のデモ バージョンが使用されている場合は、ライセンス マネージャー ウィンドウが表示されます。

30日間お試し

プログラムを初めて起動する場合は、インターネット接続が必要です。アクティベーション後は、オフラインでも動作します。

30 日間の試用版を使用するために登録やログインを行う必要はありません。ライセンス マネージャー ウィンドウは起動するたびに表示され、残り日数が表示されます。

ライセンスのペアリング

ライセンスを取得するには、インターネット接続が必要です。アクティベーション後は、オフラインでも動作します。

ライセンスを購入したら、**「ログイン」**ボタンをクリックしてライセンス マネージャー ウィンドウを使用してログインする必要があります。

登録ユーザーではない、またはライセンスを持っていない場合は、**「サインアップ」**ボタンをクリックする必要があります。

ログインに成功すると、プログラムはユーザーに接続されたライセンスを自動的に検出します。ユーザーに複数のライセンスが接続されている場合、使用するコンピューターにペアリングするライセンスをリストから選択できます。アクティベーション プロセスが完了すると、ライセンスに問題が発生した場合のみ、ライセンス マネージャー ウィンドウが再度ポップアップ表示されます。