Summary

• Page properties (1 modified, 0 added, 0 removed)

Details

Page properties

Content

...	...	@@ -102,7 +102,7 @@
102	102	* Smart Cities
103	103	* Smart Factory
104	104
105		-= 2.  Getting Started with Hello World =
	105	+= 2.  Getting Started with 'Hello World' =
106	106
107	107	== 2.1  About this demo ==
108	108
...	...	@@ -153,7 +153,6 @@
153	153	* Max. 2 themes
154	154	* Max. 1 component
155	155
156		-
157	157	== 2.3 Simple usage of SquareLine Studio and exporting UI code ==
158	158
159	159
...	...	@@ -165,7 +165,6 @@
165	165	* In the **PROJECT SETTINGS**, select **LVGL version** **8.3.11**
166	166	* Select the **CREATE **button.
167	167
168		-
169	169	[[image:image-20240928103357-2.png||height="680" width="708"]]
170	170
171	171	Image 2: Creating a new SquareLine project
...	...	@@ -173,7 +173,7 @@
173	173
174	174	Next, you need to configure some settings for this project. By clicking in the specified order shown in Image 3, you will be directed to the page displayed in Image 4.
175	175
176		-* Select File  -> Project Settings
	174	+* Select** File  -> Project Settings**
177	177
178	178	[[image:1727229582471-566.png]]
179	179
...	...	@@ -191,31 +191,41 @@
191	191	Image 4 Configure/modify project settings
192	192
193	193
194		-Now you can start building the UI. Follow the steps below:
	192	+Now you can start building the sample UI. Follow the steps below:
195	195
196	196
197		-**~1. add widget**
	195	+=== Add widgets ===
198	198
199		-To add a widget, you should click a widget you want to add at the area entitled “Widgets”. In image , demonstrate a add process of label, button, and image 5.
	197	+To add widgets navigate to the **Widgets** area, then click on the widgets you want to add. The selected widgets will be added to the screen. You can reposition the widgets in the screen area by clicking and dragging them.
200	200
	199	+Add a Label, Button, and Image to the screen as shown in **Image 5**.
	200	+
201	201	[[image:image-20240928111412-6.png||height="526" width="864"]]
202	202
203		- image 5 add widgets
	203	+ Image 5: Add widgets
204	204
205		-**2. modify widget**
	205	+=== Modify widget properties ===
206	206
207		-The area for modifying widgets is called "Inspector". There are four parts in the "Inspector" tab. We use three of them more frequently, excluding "COMPONENT". The second part is aimed at adjusting the layout, size, position, alignment, flags, and states, etc. of widgets. The name of the second part indicates the type of widget it is representing, and in image 6, it is "BUTTON".
	207	+The area for modifying widgets is called the **Inspector** tab. The Inspector tab consists of four sections: **COMPONENT**, **<WIDGET>**, **STYLE SETTINGS**, and **EVENTS**, as shown in Image 6.
208	208
	209	+The second section allows you to adjust a widget's layout, size, position, alignment, flags, states, and more. When you select a widget on the screen, the name of this section changes to match the name of the selected widget.
	210	+
209	209	[[image:1727485118799-984.png]]
210	210
211		- image 6 the button widget's "Inspector" tab
	213	+ Image 6: The button widget's "Inspector" tab
212	212
213		-Second part: "Layout" means a auto position-management for widgets contained in the parent widget. "Transform" includes size, position and align modification.
214	214
	216	+==== Changing the Button properties ====
	217	+
	218	+Click the Button. Under the **Label** section, type "Click for details..." in the **Text** textbox.
	219	+
	220	+Under the "Layout" you can
	221	+
215	215	[[image:1727485251053-655.png]]
216	216
217	217	image 7 the button widget's "BUTTON" tab
218	218
	226	+
219	219	Third part: It is an area of style setting.
220	220
221	221	Fourth part: It is an area for adding events. In image 8, it is adding a click event to a button. If the button is clicked after the click event is added as shown in image 8, the current screen will fade into another specified screen, and the switching process will last 500ms.
...	...	@@ -224,16 +224,19 @@
224	224
225	225	image 8 add event for button
226	226
227		-**3. change label widget content**
228	228
229		-Modify the content in text as shown in image 9, the text content of label widget will be changed accordingly.
	236	+==== Changing the label properties ====
230	230
	238	+Click the label. Under the **Label** section, type "Hello World!" in the **Text** textbox.
	239	+
	240	+
231	231	[[image:image-20240928090825-1.png||height="327" width="391"]]
232	232
233		- image 9 modify text content of label widget
	243	+ Image 9:  Modify text of label widget
234	234
235		-**4. Add image into project**
236	236
	246	+==== 4. Changing image properties ====
	247	+
237	237	To use the image widget, you should first add an image to your project. The image format must be PNG, and its resolution should not exceed 800x480 pixels. There are two ways to add an image file. One way is to move your image into the folder "…/squareline project/assets/", as shown in image 10. The other way is to click the "ADD FILE INTO ASSETS" button, then select an image from your computer to import. After adding, you can see the image in the "assets" area in SquareLine Studio, as demonstrated in image 11.
238	238
239	239	[[image:image-20240928113424-9.png||height="355" width="505"]]
...	...	@@ -256,10 +256,11 @@
256	256
257	257	image 13 move label1 to make label1 widget be a child of button1 widget(2)
258	258
259		-**6. Preview the final effect**
260	260
261		-An advantage of this kind of software is that you can edit the UI with quick previews. In other words, it provides a way of combining graphical programming with simulation immediately.
	271	+**6. Preview the screen**
262	262
	273	+You can test the result by clicking on the **PLAY** button. The screen will change into play mode.
	274	+
263	263	[[image:1727487368023-281.png]]
264	264
265	265	image 14 click on the triangle icon to start or end the simulation