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,49 +191,67 @@
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.
	219	+
	220	+Under the "Layout" you can change the button's position and size.
	221	+
215	215	[[image:1727485251053-655.png]]
216	216
217		-image 7 the button widget's "BUTTON" tab
	224	+Image 7: The button widget's "BUTTON" tab
218	218
219		-Third part: It is an area of style setting.
220	220
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.
	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.
222	222
	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.
	235	+
223	223	[[image:1727485480434-713.png||height="395" width="290"]]
224	224
225		- image 8 add event for button
	238	+ Image 8: Add an event for the 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.
	241	+==== Changing the label properties ====
230	230
	243	+Click the label. Under the **Label** section, type "Click For Detail" in the **Text** textbox.
	244	+
	245	+
231	231	[[image:image-20240928090825-1.png||height="327" width="391"]]
232	232
233		- image 9 modify text content of label widget
	248	+ Image 9:  Modify text of label widget
234	234
235		-**4. Add image into project**
236	236
	251	+==== 4. Changing image properties ====
	252	+
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"]]
...	...	@@ -244,29 +244,36 @@
244	244
245	245	image 11 use image widget in SquareLine Studio
246	246
247		-**5. The relationship between widgets**
248	248
249		-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 ====
250	250
	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	+
251	251	[[image:1727486567182-334.png||height="318" width="278"]]
252	252
253		-image 12 move label1 to make label1 widget be a child of button1 widget(1)
254	254
	274	+Move **Label1** to make it a child of **Button1**. See Image 13.
	275	+
255	255	[[image:image-20240928112001-8.png||height="431" width="796"]]
256	256
257		- 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.
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.
	281	+**6. Preview the screen**
262	262
	283	+You can test the result by clicking on the **PLAY** button. The screen will change into play mode. See Image 14.
	284	+
263	263	[[image:1727487368023-281.png]]
264	264
265		- image 14 click on the triangle icon to start or end the simulation
	287	+ Image 14: Simulating the project
266	266
267		-For more detailed usage, please visit the official link: [[SquareLine Studio 1.4.2 Documentation ~| SquareLine Studio>>url:https://docs.squareline.io/docs/squareline/]].
268	268
	290	+For more information, please visit the official link: [[SquareLine Studio 1.4.2 Documentation ~| SquareLine Studio>>url:https://docs.squareline.io/docs/squareline/]].
269	269
	292	+
270	270	== 2.4 Integrate UI Code to ESP-IDF Project ==
271	271
272	272