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

CRIJapan · 2025 年 3 月 24 日午前 1:15

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

＊Squareline Studioサイト

↓

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();

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

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

コード自体

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

MicroPython UIを設定するには

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 サイトに記載されている料金を支払うものとします。

中小企業ライセンス

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

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

生涯ライセンス

このタイプのライセンスでは、ソフトウェアをあらゆる商業目的で制限なく使用できます。このライセンスでは、ソフトウェアの機能は完全であり、ソフトウェアのドキュメントに記載されているすべての機能が提供されます。ライフタイムライセンスでは、購入日から 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

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

SquareLine Studio

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

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

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

リナックス

SquareLine Studio

Intel x64 PC 最小構成 :

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

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

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

SquareLine Studio

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

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

はじめる

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

ランチャー

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

開く

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

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

作成

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

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

ライセンスマネージャー

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

30日間お試し版

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

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

ライセンスのペアリング

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

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

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

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