「App:Library:Squareline:docs:dev env:widgets」の版間の差分

提供: robot-jp wiki
ナビゲーションに移動検索に移動
172行目: 172行目:
 
<blockquote>
 
<blockquote>
 
=== Calendar ===
 
=== Calendar ===
[[ファイル:SquareLineStudio Wigets Calendar.jpg|サムネイル]]
+
[[ファイル:SquareLineStudio Wigets Calendar.jpg]]
 
{| class="wikitable"
 
{| class="wikitable"
 
|
 
|
180行目: 180行目:
  
 
=== Checkbox ===
 
=== Checkbox ===
[[ファイル:SquareLineStudio Wigets Checkbox.jpg|サムネイル]]
+
[[ファイル:SquareLineStudio Wigets Checkbox.jpg]
 
{| class="wikitable"
 
{| class="wikitable"
 
|
 
|
188行目: 188行目:
  
 
=== Colorwheel ===
 
=== Colorwheel ===
[[ファイル:SquareLineStudio Wigets Colorwheel.jpg|サムネイル]]
+
[[ファイル:SquareLineStudio Wigets Colorwheel.jpg]]
 
{| class="wikitable"
 
{| class="wikitable"
 
|
 
|
196行目: 196行目:
  
 
=== Dropdown ===
 
=== Dropdown ===
[[ファイル:SquareLineStudio Wigets Dropdown.jpg|サムネイル]]
+
[[ファイル:SquareLineStudio Wigets Dropdown.jpg]]
 
{| class="wikitable"
 
{| class="wikitable"
 
|
 
|
204行目: 204行目:
  
 
=== Image button ===
 
=== Image button ===
[[ファイル:SquareLineStudio Wigets Imgbutton.jpg|サムネイル]]
+
[[ファイル:SquareLineStudio Wigets Imgbutton.jpg]]
 
{| class="wikitable"
 
{| class="wikitable"
 
|
 
|
212行目: 212行目:
  
 
=== Keyboard ===
 
=== Keyboard ===
[[ファイル:SquareLineStudio Wigets Keyboard.jpg|サムネイル]]
+
[[ファイル:SquareLineStudio Wigets Keyboard.jpg]]
 
{| class="wikitable"
 
{| class="wikitable"
 
|
 
|
220行目: 220行目:
  
 
=== Roller ===
 
=== Roller ===
[[ファイル:SquareLineStudio Wigets Roller.jpg|サムネイル]]
+
[[ファイル:SquareLineStudio Wigets Roller.jpg]]
 
{| class="wikitable"
 
{| class="wikitable"
 
|
 
|
228行目: 228行目:
  
 
=== Slider ===
 
=== Slider ===
[[ファイル:SquareLineStudio Wigets Slider.jpg|サムネイル]]
+
[[ファイル:SquareLineStudio Wigets Slider.jpg]]
 
{| class="wikitable"
 
{| class="wikitable"
 
|
 
|
236行目: 236行目:
  
 
=== Switch ===
 
=== Switch ===
[[ファイル:SquareLineStudio Wigets Switch.jpg|サムネイル]]
+
[[ファイル:SquareLineStudio Wigets Switch.jpg]]
 
{| class="wikitable"
 
{| class="wikitable"
 
|
 
|
242行目: 242行目:
 
|}
 
|}
 
</blockquote>
 
</blockquote>
 
  
 
== Visualiser widgets ==
 
== Visualiser widgets ==

2022年8月4日 (木) 07:04時点における版

SquareLineStudio Wigets.jpg

Widget panel

原文
You can find widgets, which are the basic elements of UI, on the Widget Panel.

Every widget has its own preference.

You can add custom styles to widget components and you are allowed to configure them in different states.

ウィジェット パネルには、UI の基本要素であるウィジェットがあります。

すべてのウィジェットには独自の設定があります。

カスタム スタイルをウィジェット コンポーネントに追加でき、それらをさまざまな状態で構成できます。


Screen

SquareLineStudio Wigets Screen.jpg


Screen is the main object.

It defines the resolution of the work space and widgets can be added here.

You can create several screens to your project.

To switch among screens, you should use Screen Change event.


Style part

  • Main


画面がメインです。

ワークスペースの解像度を定義し、ここにウィジェットを追加できます。

プロジェクトに複数の画面を作成できます。

画面を切り替えるには、Screen Change イベントを使用する必要があります。


Style part

  • Main


Basic widgets

Basic widgets category includes main components.

These are the most important elements of the screen.

基本的なウィジェット カテゴリには、主要なコンポーネントが含まれます。

これらは、画面の最も重要な要素です。

Arc

SquareLineStudio Wigets Arc.jpg LVGL docs example 044.png


You can draw an arc or create an interactive circle slider by using Arc widget. The arc consists of three elements:

  • Background - The background of the arc
  • Indicator - Using the arc as a curved bar, it indicates its value
  • Knob - Using the arc as a curved slider, it gives a knob to the slider

Parameters of Arc Widget

  • Range min, max - It defines the minimum and maximum values of the arc
  • Value - Starter value
  • Bg start, end angle - Start / End angle of the background in degrees
  • Start, end angle - Start / End angle of the indicator in degrees
  • Mode - You can choose from 3 different modes.
    • Normal - The indicator arc is drawn from the minimum value to the current.
    • Reverse - The indicator arc is drawn counter-clockwise from the maximum value to the current.
    • Symmetrical - The indicator arc is drawn from the middle point to the current value.
  • Rotation - An offset to the 0 degree position can be added

Style parts

  • Main
  • Indicator
  • Knob
アーク ウィジェットを使用して、アークを描画したり、インタラクティブなサークル スライダーを作成したりできます。 円弧は次の 3 つの要素で構成されます。

背景 - 円弧の背景

インジケーター - 円弧を曲線のバーとして使用し、その値を示します

ノブ - 円弧をカーブしたスライダーとして使用し、スライダーにノブを与えます

アークウィジェットのパラメータ

  • 範囲最小、最大 - 円弧の最小値と最大値を定義します
  • 値 - スターター値
  • Bg start, end angle - 背景の開始/終了角度 (度単位)
  • 開始、終了角度 - インジケーターの開始/終了角度 (度単位)
  • モード - 3 つの異なるモードから選択できます。
    • 通常 - インジケーター アークは、最小値から現在まで描画されます。
    • リバース - インジケーター アークは、最大値から現在まで反時計回りに描かれます。
    • 対称 - インディケータ アークは、中間点から現在の値まで描画されます。
  • 回転 - 0 度の位置へのオフセットを追加できます

スタイルパーツ

  • 主要
  • インジケータ
  • つまみ

Button

SquareLineStudio Wigets Button.jpgLVGL docs example 021.png


Image

SquareLineStudio Wigets Image.jpgLVGL docs example 077.png


Label

SquareLineStudio Wigets Label.jpgLVGL docs example 081.png


Panel

SquareLineStudio Wigets Panel.jpgLVGL docs example 042.png


Text Area

SquareLineStudio Wigets Textarea.jpgLVGL docs example 113.png

Controller widgets

Calendar

SquareLineStudio Wigets Calendar.jpg


Checkbox

[[ファイル:SquareLineStudio Wigets Checkbox.jpg]


Colorwheel

SquareLineStudio Wigets Colorwheel.jpg


Dropdown

SquareLineStudio Wigets Dropdown.jpg


Image button

SquareLineStudio Wigets Imgbutton.jpg


Keyboard

SquareLineStudio Wigets Keyboard.jpg


Roller

SquareLineStudio Wigets Roller.jpg


Slider

SquareLineStudio Wigets Slider.jpg


Switch

SquareLineStudio Wigets Switch.jpg

Visualiser widgets

Bar

SquareLineStudio Wigets Bar.jpg


Chart

SquareLineStudio Wigets Chart.jpg


Spinner

SquareLineStudio Wigets Spinner.jpg




戻る : Previous