Summary

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

Details

Page properties

Author

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

Content

...	...	@@ -192,8 +192,9 @@
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	+
197	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.
198	198
199	199	Add a Label, Button, and Image to the screen as shown in **Image 5**.
...	...	@@ -202,8 +202,10 @@
202	202
203	203	Image 5: Add widgets
204	204
205		-=== Modify widget properties ===
206	206
	207	+=== **Modify widget properties** ===
	208	+
	209	+
207	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	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.
...	...	@@ -213,8 +213,9 @@
213	213	Image 6: The button widget's "Inspector" tab
214	214
215	215
216		-==== Changing the Button properties ====
	219	+==== **Changing the Button properties** ====
217	217
	221	+
218	218	Click the Button.
219	219
220	220	Under the "Layout" you can change the button's position and size.
...	...	@@ -235,21 +235,22 @@
235	235
236	236	[[image:1727485480434-713.png||height="395" width="290"]]
237	237
238		- Image 8: Add an event for the button
	242	+ Image 8: Add an event for the button
239	239
240	240
241		-==== Changing the label properties ====
	245	+==== **Changing the label properties** ====
242	242
	247	+
243	243	Click the label. Under the **Label** section, type "Click For Detail" in the **Text** textbox.
244	244
245		-
246	246	[[image:image-20240928090825-1.png||height="327" width="391"]]
247	247
248	248	Image 9:  Modify text of label widget
249	249
250	250
251		-==== 4. Changing image properties ====
	255	+==== **Changing image properties** ====
252	252
	257	+
253	253	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.
254	254
255	255	[[image:image-20240928113424-9.png||height="355" width="505"]]
...	...	@@ -261,8 +261,9 @@
261	261	image 11 use image widget in SquareLine Studio
262	262
263	263
264		-==== 5. The relationship between widgets ====
	269	+==== **The relationship between widgets** ====
265	265
	271	+
266	266	Widgets commonly have two types of relationships: **parallel** and **parent-child**.
267	267
268	268	* In a **parallel relationship**, widgets' positions are determined relative to a shared reference object.
...	...	@@ -278,8 +278,9 @@
278	278	Image 13: Move Label1 to make it a child of Button1.
279	279
280	280
281		-**6. Preview the screen**
	287	+==== **Preview the screen** ====
282	282
	289	+
283	283	You can test the result by clicking on the **PLAY** button. The screen will change into play mode. See Image 14.
284	284
285	285	[[image:1727487368023-281.png]]
...	...	@@ -351,8 +351,9 @@
351	351
352	352	= 4. Example Project 2: LoRaWAN RS485 Alarm =
353	353
354		-= 5.  The way to add a new panel to project =
	361	+= 5. The way to add a new panel to project =
355	355
	363	+
356	356	**~1. Design a panel in SquareLine Studio, using image 5.1 below as a reference.**
357	357
358	358	[[image:image-20241121113445-1.png||height="584" width="934"]]
...	...	@@ -359,6 +359,7 @@
359	359
360	360	image 5.1 a panel about water_leak
361	361
	370	+
362	362	**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.
363	363
364	364	[[image:image-20241121141120-4.png||height="383" width="795"]]
...	...	@@ -365,6 +365,7 @@
365	365
366	366	image 5.2 ui files exported
367	367
	377	+
368	368	**3. Delete or rename some file.** Here are the steps:
369	369
370	370	Step1 Delete the 'components' directory.
...	...	@@ -499,6 +499,7 @@
499	499
500	500	image 5.26 ui_water_leak_events_.c after modification
501	501
	512	+
502	502	**12. Modify ui_water_leak_style.c file.**
503	503
504	504	Step1. '#include "../ui.h"'~-~->#include '"../ui_water_leak.h"'
...	...	@@ -515,6 +515,7 @@
515	515
516	516	image 5.28 ui_water_leak_style.c (1) after modification
517	517
	529	+
518	518	Step2. modify 'void ui_ScreenMain_screen_init(void)'~-~->'panel_with_type create_water_leak(uint8_t index)'
519	519
520	520	delete code as shown in image 5.29
...	...	@@ -523,6 +523,7 @@
523	523
524	524	image 5.29 ui_water_leak_style.c (2)
525	525
	538	+
526	526	Step3. The image 5.30, 5.31 show the change.
527	527
528	528	[[image:image-20241122152026-45.png||height="277" width="828"]]
...	...	@@ -533,6 +533,7 @@
533	533
534	534	image 5.31 ui_water_leak_style.c (3) after modification
535	535
	549	+
536	536	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).
537	537
538	538	[[image:image-20241122153958-47.png]]
...	...	@@ -543,6 +543,7 @@
543	543
544	544	image 5.33 ui_water_leak_style.c (4)
545	545
	560	+
546	546	Step5. Delete event function in code which was just pasted in extra_lib/sort.h(The process is shown in image 5.34).
547	547
548	548	[[image:image-20241122155650-50.png||height="922" width="513"]]
...	...	@@ -549,6 +549,7 @@
549	549
550	550	image 5.34 ui_water_leak_style.c (5)
551	551
	567	+
552	552	Step6. Add some lines of code in extra_lib/sort.h as shown in image 5.35.
553	553
554	554	[[image:image-20241122161934-51.png]]
...	...	@@ -555,6 +555,7 @@
555	555
556	556	image 5.35
557	557
	574	+
558	558	Step7. Add a line of code in extra_lib/sort.h as shown in image 5.36.
559	559
560	560	[[image:image-20241122162852-53.png||height="330" width="529"]]
...	...	@@ -561,6 +561,7 @@
561	561
562	562	image 5.37
563	563
	581	+
564	564	Step8. Add some code in ui_water_leak_style.c as shown in image 5.38 from line534 to line 576 in detail.
565	565
566	566	panel_with_type union_sensor;
...	...	@@ -579,6 +579,7 @@
579	579
580	580	image 5.38
581	581
	600	+
582	582	**13. Modify sort.c file.**
583	583
584	584	Add a line of code ~-~-'#include "ui_water_leak.h"' as shown in image 5.39 line 16.