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,27 +215,32 @@
215	215
216	216	==== Changing the Button properties ====
217	217
218		-Click the Button. Under the **Label** section, type "Click for details..." in the **Text** textbox.
	218	+Click the Button.
219	219
220		-Under the "Layout" you can
	220	+Under the "Layout" you can change the button's position and size.
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		-Third part: It is an area of style setting.
	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.
228	228
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.
	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.
230	230
231	231	[[image:1727485480434-713.png||height="395" width="290"]]
232	232
233		- image 8 add event for button
	238	+ Image 8: Add an event for the button
234	234
235	235
236	236	==== Changing the label properties ====
237	237
238		-Click the label. Under the **Label** section, type "Hello World!" in the **Text** textbox.
	243	+Click the label. Under the **Label** section, type "Click For Detail" in the **Text** textbox.
239	239
240	240
241	241	[[image:image-20240928090825-1.png||height="327" width="391"]]
...	...	@@ -255,30 +255,36 @@
255	255
256	256	image 11 use image widget in SquareLine Studio
257	257
258		-**5. The relationship between widgets**
259	259
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.
	264	+==== 5. The relationship between widgets ====
261	261
	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	+
262	262	[[image:1727486567182-334.png||height="318" width="278"]]
263	263
264		-image 12 move label1 to make label1 widget be a child of button1 widget(1)
265	265
	274	+Move **Label1** to make it a child of **Button1**. See Image 13.
	275	+
266	266	[[image:image-20240928112001-8.png||height="431" width="796"]]
267	267
268		- image 13 move label1 to make label1 widget be a child of button1 widget(2)
	278	+ Image 13: Move Label1 to make it a child of Button1.
269	269
270	270
271	271	**6. Preview the screen**
272	272
273		-You can test the result by clicking on the **PLAY** button. The screen will change into play mode.
	283	+You can test the result by clicking on the **PLAY** button. The screen will change into play mode. See Image 14.
274	274
275	275	[[image:1727487368023-281.png]]
276	276
277		- image 14 click on the triangle icon to start or end the simulation
	287	+ Image 14: Simulating the project
278	278
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/]].
280	280
	290	+For more information, please visit the official link: [[SquareLine Studio 1.4.2 Documentation ~| SquareLine Studio>>url:https://docs.squareline.io/docs/squareline/]].
281	281
	292	+
282	282	== 2.4 Integrate UI Code to ESP-IDF Project ==
283	283
284	284