Summary

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

Details

Page properties

Content

...	...	@@ -171,7 +171,7 @@
171	171
172	172	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.
173	173
174		-* Select** File  -> Project Settings**
	174	+* Select** File  -> Project Settings**
175	175
176	176	[[image:1727229582471-566.png]]
177	177
...	...	@@ -215,32 +215,27 @@
215	215
216	216	==== Changing the Button properties ====
217	217
218		-Click the Button.
	218	+Click the Button. Under the **Label** section, type "Click for details..." in the **Text** textbox.
219	219
220		-Under the "Layout" you can change the button's position and size.
	220	+Under the "Layout" you can
221	221
222	222	[[image:1727485251053-655.png]]
223	223
224		-Image 7: The button widget's "BUTTON" tab
	224	+image 7 the button widget's "BUTTON" tab
225	225
226	226
227		-Next, add a click event to the button. When the button is clicked, an event should trigger to change the current screen (Screen1) to a new screen (Screen2) with a fade effect and the transition from Screen1 to Screen2 should take 500ms.
	227	+Third part: It is an area of style setting.
228	228
229		-* Click **ADD EVENT** button.
230		-* Select **CLICKED** under the Trigger.
231		-* Select **Screen2** from **Screen to**.
232		-* Select **FADE ON** from **Fade mode**.
233		-* Enter **500** in the **Speed** text box.
234		-* Finally, click **ADD** button.
	229	+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.
235	235
236	236	[[image:1727485480434-713.png||height="395" width="290"]]
237	237
238		- Image 8: Add an event for the button
	233	+ image 8 add event for button
239	239
240	240
241	241	==== Changing the label properties ====
242	242
243		-Click the label. Under the **Label** section, type "Click For Detail" in the **Text** textbox.
	238	+Click the label. Under the **Label** section, type "Hello World!" in the **Text** textbox.
244	244
245	245
246	246	[[image:image-20240928090825-1.png||height="327" width="391"]]
...	...	@@ -260,36 +260,30 @@
260	260
261	261	image 11 use image widget in SquareLine Studio
262	262
	258	+**5. The relationship between widgets**
263	263
264		-==== 5. The relationship between widgets ====
	260	+There are two common relationships between widgets: one is parallel, the other is parent-child. The parallel relationship means that widgets' relative position is based on a collective object of reference. In parent-child relationship, the parts of the child object that are outside the boundaries of the parent object are not visible by default. Therefore, we need to adjust the position of the child object so that it falls within the range of the parent object, allowing it to be seen as illustrated in image 13.
265	265
266		-Widgets commonly have two types of relationships: **parallel** and **parent-child**.
267		-
268		-* In a **parallel relationship**, widgets' positions are determined relative to a shared reference object.
269		-* In a **parent-child relationship**, any part of the child object outside the parent's boundaries is hidden by default. To make the child object fully visible, you must adjust its position to fit within the parent's range, as shown in Image 13.
270		-
271	271	[[image:1727486567182-334.png||height="318" width="278"]]
272	272
	264	+image 12 move label1 to make label1 widget be a child of button1 widget(1)
273	273
274		-Move **Label1** to make it a child of **Button1**. See Image 13.
275		-
276	276	[[image:image-20240928112001-8.png||height="431" width="796"]]
277	277
278		- Image 13: Move Label1 to make it a child of Button1.
	268	+ image 13 move label1 to make label1 widget be a child of button1 widget(2)
279	279
280	280
281	281	**6. Preview the screen**
282	282
283		-You can test the result by clicking on the **PLAY** button. The screen will change into play mode. See Image 14.
	273	+You can test the result by clicking on the **PLAY** button. The screen will change into play mode.
284	284
285	285	[[image:1727487368023-281.png]]
286	286
287		- Image 14: Simulating the project
	277	+ image 14 click on the triangle icon to start or end the simulation
288	288
	279	+For more detailed usage, please visit the official link: [[SquareLine Studio 1.4.2 Documentation ~| SquareLine Studio>>url:https://docs.squareline.io/docs/squareline/]].
289	289
290		-For more information, please visit the official link: [[SquareLine Studio 1.4.2 Documentation ~| SquareLine Studio>>url:https://docs.squareline.io/docs/squareline/]].
291	291
292		-
293	293	== 2.4 Integrate UI Code to ESP-IDF Project ==
294	294
295	295