App:Library:Squareline:docs:introduction:tipycal dev

提供: robot-jp wiki
ナビゲーションに移動検索に移動

Typical development workflow

Create a New Project

原文 訳
The first step is to create a new SquareLine Studio project. For further information, please check Getting Started section. At this moment you can create only a simulator project.

Using the simulator project, you can create a platform independent application.

(In the later versions various development boards will be supported.)

You have nothing to do but

  • give a name to your project
  • select its location
  • choose the resolution, color depth and a theme you prefer

By doing this, a new blank screen will be created automatically.

Besides a new folder for the project will be added to the selected location containing some project files and an Assets folder.

最初のステップは、新しい SquareLine Studio プロジェクトを作成することです。 詳細については、「はじめに」セクションを参照してください。 現時点では、シミュレータ プロジェクトのみを作成できます。

シミュレータ プロジェクトを使用すると、プラットフォームに依存しないアプリケーションを作成できます。

(以降のバージョンでは、さまざまな開発ボードがサポートされる予定です。)

  • あなたは何もする必要はありませんが、
  • プロジェクトに名前を付けます
  • その場所を選択し、解像度、色深度、お好みのテーマを選択してください

これにより、新しい空白の画面が自動的に作成されます。

さらに、プロジェクト用の新しいフォルダーが、いくつかのプロジェクト ファイルと Assets フォルダーを含む選択した場所に追加されます。


Create and Organize Screen Content

原文 訳
Images, created in Photoshop or any other designer software, should be copied into the Assets folder of the project.

Fonts, needed by the project, should be placed into the Asset/Font folder.

These images and fonts will be appeared in the Assets Panel.

Photoshop またはその他のデザイナー ソフトウェアで作成された画像は、プロジェクトの Assets フォルダーにコピーする必要があります。

プロジェクトで必要なフォントは、Asset/Font フォルダーに配置する必要があります。

これらの画像とフォントは、アセット パネルに表示されます。


Create Widgets and Events on the Screen

原文 訳
You can find widgets (e.g. button, label, image, etc.) in the Widgets Panel.

To add these widgets to the screen you should click on the icon of the widget or simply drag it onto the screen.

If a widget is selected, you can add events to it at the bottom of the Inspector Panel to create interactions or play an animation.

ウィジェット パネルには、ウィジェット (ボタン、ラベル、画像など) があります。

これらのウィジェットを画面に追加するには、ウィジェットのアイコンをクリックするか、単に画面にドラッグします。

ウィジェットが選択されている場合は、インスペクター パネルの下部でウィジェットにイベントを追加して、インタラクションを作成したり、アニメーションを再生したりできます。


Simulate and Export Your Project

原文 訳
Uniquely, you can test your working project directly in the SquareLine Studio in a blink of an eye.

Using the Play button in the top-right hand corner of the Screen area view, you can start the simulation of your project.

In "Play mode", you have the opportunity to refine the settings of the widgets, including the parameters of styles and animations connected to them.

SquareLine Studioでは、作業中のプロジェクトをそのまま瞬時にテストすることができるのが特徴です。

画面右上のプレイボタンで、プロジェクトのシミュレーションを開始できます。

プレイモードでは、ウィジェットに接続されたスタイルやアニメーションのパラメータを含む、ウィジェットの設定を調整することができます。


Export a project

原文 訳
In the current version you can export ready to use simulator project for C/C++ and MicroPython languages. In File/Projet Settings you can set the target language and IDE/SDK.

You can select either MicroPython with MakeFile project or C/C++ with Eclipse project.

In this window you can also change the resolution and color depth of the display.


After that, by clicking the Export/Export Project menu you can browse where to export the project.

By selecting a location project will be there in a few seconds.


The exported project doesn't contain the UI itself.

Typically the project is exported only once (or a few times) and later only the UI files are updated in it.

It ensures that your modifications in other parts of the project are not overwritten.

現在のバージョンでは、C/C++ および MicroPython 言語のシミュレータ プロジェクトをすぐに使用できるようにエクスポートできます。 ファイル/プロジェクト設定では、ターゲット言語と IDE/SDK を設定できます。

MakeFile プロジェクトを使用する MicroPython または Eclipse プロジェクトを使用する C/C++ のいずれかを選択できます。

このウィンドウでは、ディスプレイの解像度と色深度も変更できます。


その後、[プロジェクトのエクスポート/エクスポート] メニューをクリックすると、プロジェクトのエクスポート先を参照できます。

場所を選択すると、数秒でプロジェクトが表示されます。


エクスポートされたプロジェクトには、UI 自体は含まれていません。

通常、プロジェクトは 1 回 (または数回) だけエクスポートされ、後で UI ファイルのみが更新されます。

プロジェクトの他の部分での変更が上書きされないようにします。


Export UI files

原文 訳
To actual UI files can be exported from the Export/Export Files menu.

It will also ask for a location for the files.

This location is saved and if you export files later this path will be used.

(It can be modified in the File/Project Setting/Export Path field.)


The exported projects contain a "README" file which tells which is preferred location for the UI files inside the project.


The UI files also can be exported without having a project exported by SquareLine Studio.

It means if you have prepared a project (e.g. for an embedded system) you can export the UI files there too.

In this case, you need to write the drivers and take care of building the files.


In case of C/C++ the following files will be created

  • ui.c the UI code itself
  • ui.h you need to include this the see the widgets and functions
  • ui_helper.c and ui_helper.c used by ui.c internally
  • ui_img_*.c the converted images
  • ui_fonts_*.c the converted fonts
  • ui_events.c skeletons for functions used as "Call function" event. You can add the implementation of the functions here.


To set up a C/C++ UI

  1. Include ui.h
  2. Call lv_init();
  3. Set up the display and input device drivers
  4. Call ui_init();

For MicroPython these files are created

  • ui.py the UI code itself
  • ui_helper.py used by ui.py internally
  • ui_images.py all the the converted images
  • ui_font_*.bin the converted fonts
  • ui_events.py skeletons for functions used as "Call function" event. You can add the implementation of the functions here.


To set up a MicroPython UI

  • import lvgl and initialize it by lv.init()
  • Set up the display and input device drivers
  • import ui
 実際の UI ファイルは、メニューの Export/Export Files からエクスポートすることができます。

また、ファイルを保存する場所を尋ねられます。

この場所は保存され、後でファイルをエクスポートすると、このパスが使われます。

(これはFile/Project Setting/Export Pathフィールドで変更することができます)。


エクスポートされたプロジェクトには "README "ファイルが含まれ、プロジェクト内のUIファイルの好ましい場所が示されます。


また、UIファイルは、SquareLine Studioでエクスポートしたプロジェクトがなくても、エクスポートすることができます。

つまり、組み込みシステム用のプロジェクトがあれば、そこにUIファイルを書き出すことができます。

この場合、ドライバを記述し、ファイルのビルドを行う必要があります。


C/C++の場合、以下のファイルが作成されます。

  • ui.c UI のコードです。
  • ui.h ウィジェットと関数を見るためにインクルードする必要があります。
  • ui_helper.c と ui_helper.c は、ui.c が内部で使っているものです。
  • ui_img_*.c 変換された画像です。
  • ui_fonts_*.c 変換されたフォント。
  • ui_events.c "Call function" イベントで使用される関数のスケルトンです。ここに関数の実装を追加することができます。


C/C++のUIをセットアップするには

  1. ui.hをインクルードする。
  2. lv_init()を呼び出す。
  3. ディスプレイと入力デバイスのドライバをセットアップする
  4. ui_init()をコールします。

MicroPythonの場合、以下のファイルが作成されます。

  • ui.py...UIコード
  • ui.pyが内部で使用するui_helper.py
  • ui_images.py 変換された全ての画像
  • ui_font_*.bin 変換されたフォントです。
  • ui_events.py "Call function "イベントとして使用される関数のスケルトン。関数の実装はここに追加できます。


MicroPython UIをセットアップするために

  • import lvgl と、lv.init()で初期化します。
  • ディスプレイと入力デバイスのドライバをセットアップする
  • import UI




戻る : Previous

「https://robot-jp.com/wiki/index.php?title=App:Library:Squareline:docs:introduction:tipycal_dev&oldid=4693」から取得