Summary

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

Details

Page properties

Author

...	...	@@ -1,1 +1,1 @@
1		-XWiki.Xiaoling
	1	+XWiki.pradeeka

Content

...	...	@@ -192,9 +192,8 @@
192	192	Now you can start building the sample UI. Follow the steps below:
193	193
194	194
195		-=== **Add widgets** ===
	195	+=== Add widgets ===
196	196
197		-
198	198	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.
199	199
200	200	Add a Label, Button, and Image to the screen as shown in **Image 5**.
...	...	@@ -203,10 +203,8 @@
203	203
204	204	Image 5: Add widgets
205	205
	205	+=== Modify widget properties ===
206	206
207		-=== **Modify widget properties** ===
208		-
209		-
210	210	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.
211	211
212	212	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.
...	...	@@ -216,9 +216,8 @@
216	216	Image 6: The button widget's "Inspector" tab
217	217
218	218
219		-==== **Changing the Button properties** ====
	216	+==== Changing the Button properties ====
220	220
221		-
222	222	Click the Button.
223	223
224	224	Under the "Layout" you can change the button's position and size.
...	...	@@ -239,22 +239,21 @@
239	239
240	240	[[image:1727485480434-713.png||height="395" width="290"]]
241	241
242		- Image 8: Add an event for the button
	238	+ Image 8: Add an event for the button
243	243
244	244
245		-==== **Changing the label properties** ====
	241	+==== Changing the label properties ====
246	246
247		-
248	248	Click the label. Under the **Label** section, type "Click For Detail" in the **Text** textbox.
249	249
	245	+
250	250	[[image:image-20240928090825-1.png||height="327" width="391"]]
251	251
252	252	Image 9:  Modify text of label widget
253	253
254	254
255		-==== **Changing image properties** ====
	251	+==== 4. Changing image properties ====
256	256
257		-
258	258	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.
259	259
260	260	[[image:image-20240928113424-9.png||height="355" width="505"]]
...	...	@@ -266,9 +266,8 @@
266	266	image 11 use image widget in SquareLine Studio
267	267
268	268
269		-==== **The relationship between widgets** ====
	264	+==== 5. The relationship between widgets ====
270	270
271		-
272	272	Widgets commonly have two types of relationships: **parallel** and **parent-child**.
273	273
274	274	* In a **parallel relationship**, widgets' positions are determined relative to a shared reference object.
...	...	@@ -284,9 +284,8 @@
284	284	Image 13: Move Label1 to make it a child of Button1.
285	285
286	286
287		-==== **Preview the screen** ====
	281	+**6. Preview the screen**
288	288
289		-
290	290	You can test the result by clicking on the **PLAY** button. The screen will change into play mode. See Image 14.
291	291
292	292	[[image:1727487368023-281.png]]
...	...	@@ -358,9 +358,8 @@
358	358
359	359	= 4. Example Project 2: LoRaWAN RS485 Alarm =
360	360
361		-= 5. The way to add a new panel to project =
	354	+= 5.  The way to add a new panel to project =
362	362
363		-
364	364	**~1. Design a panel in SquareLine Studio, using image 5.1 below as a reference.**
365	365
366	366	[[image:image-20241121113445-1.png||height="584" width="934"]]
...	...	@@ -367,7 +367,6 @@
367	367
368	368	image 5.1 a panel about water_leak
369	369
370		-
371	371	**2. Export the ui file.** You need  to adjust the export path first, then click "Export->Export UI Files". This step had been introduced before. Then you can get the ui files as shown in image 5.2.
372	372
373	373	[[image:image-20241121141120-4.png||height="383" width="795"]]
...	...	@@ -374,7 +374,6 @@
374	374
375	375	image 5.2 ui files exported
376	376
377		-
378	378	**3. Delete or rename some file.** Here are the steps:
379	379
380	380	Step1 Delete the 'components' directory.
...	...	@@ -509,7 +509,6 @@
509	509
510	510	image 5.26 ui_water_leak_events_.c after modification
511	511
512		-
513	513	**12. Modify ui_water_leak_style.c file.**
514	514
515	515	Step1. '#include "../ui.h"'~-~->#include '"../ui_water_leak.h"'
...	...	@@ -526,7 +526,6 @@
526	526
527	527	image 5.28 ui_water_leak_style.c (1) after modification
528	528
529		-
530	530	Step2. modify 'void ui_ScreenMain_screen_init(void)'~-~->'panel_with_type create_water_leak(uint8_t index)'
531	531
532	532	delete code as shown in image 5.29
...	...	@@ -535,7 +535,6 @@
535	535
536	536	image 5.29 ui_water_leak_style.c (2)
537	537
538		-
539	539	Step3. The image 5.30, 5.31 show the change.
540	540
541	541	[[image:image-20241122152026-45.png||height="277" width="828"]]
...	...	@@ -546,7 +546,6 @@
546	546
547	547	image 5.31 ui_water_leak_style.c (3) after modification
548	548
549		-
550	550	Step4. Copy partly the code in ui_water_leak.c, paste at extra_lib/sort.h(The process is shown in image 5.32, 5.33).
551	551
552	552	[[image:image-20241122153958-47.png]]
...	...	@@ -557,7 +557,6 @@
557	557
558	558	image 5.33 ui_water_leak_style.c (4)
559	559
560		-
561	561	Step5. Delete event function in code which was just pasted in extra_lib/sort.h(The process is shown in image 5.34).
562	562
563	563	[[image:image-20241122155650-50.png||height="922" width="513"]]
...	...	@@ -564,7 +564,6 @@
564	564
565	565	image 5.34 ui_water_leak_style.c (5)
566	566
567		-
568	568	Step6. Add some lines of code in extra_lib/sort.h as shown in image 5.35.
569	569
570	570	[[image:image-20241122161934-51.png]]
...	...	@@ -571,7 +571,6 @@
571	571
572	572	image 5.35
573	573
574		-
575	575	Step7. Add a line of code in extra_lib/sort.h as shown in image 5.36.
576	576
577	577	[[image:image-20241122162852-53.png||height="330" width="529"]]
...	...	@@ -578,7 +578,6 @@
578	578
579	579	image 5.37
580	580
581		-
582	582	Step8. Add some code in ui_water_leak_style.c as shown in image 5.38 from line534 to line 576 in detail.
583	583
584	584	panel_with_type union_sensor;
...	...	@@ -597,7 +597,6 @@
597	597
598	598	image 5.38
599	599
600		-
601	601	**13. Modify sort.c file.**
602	602
603	603	Add a line of code ~-~-'#include "ui_water_leak.h"' as shown in image 5.39 line 16.