Last modified by Dilisi S on 2025/02/26 19:24
<
From version < 115.1 >
edited by Xiaoling
on 2024/12/17 17:47
To version < 121.1 >
edited by Dilisi S
on 2024/12/22 21:12
>
Change comment: Dec 22 edits - part 2

Summary

Details

Page properties
Author
... ... @@ -1,1 +1,1 @@
1 -XWiki.Xiaoling
1 +XWiki.pradeeka
Content
... ... @@ -21,18 +21,17 @@
21 21  
22 22  = 1.  Introduction =
23 23  
24 -== 1.1  What is LTS5 LoRa HMI touch screen ==
24 +== 1.1  What is the LTS5 LoRa HMI Touch Screen? ==
25 25  
26 26  
27 -LTS5 is a (% style="color:blue" %)**LoRa / LoRaWAN HMI Touch Screen**(%%) designed for display purpose of IoT project. It have a **5.0" HMI touch screen**, and **support WiFi, Bluetooch, LoRa wireless protocol**.
27 +The LTS5 is a (% style="color:blue" %)**LoRa / LoRaWAN HMI Touch Screen**(%%) designed for displaying information in IoT projects. It features a **5.0-inch HMI touch screen** and supports **Wi-Fi**, **Bluetooth**, and **LoRa** wireless protocols.
28 28  
29 -LTS5 is an Open Source software project. The MCU is ESP32 and Dragino LA66 LoRa module. There are lots of development source for ESP32 which can greatly reduce the development time.
29 +The LTS5 is an open-source software project powered by an **ESP32 MCU** and a **Dragino LA66 LoRa** module. The extensive development resources available for ESP32 can significantly reduce development time.
30 30  
31 -The HMI touch screen of LTS5 **supports drap & drop design**. Developer can use SquareLine to easily customize the display UI for different application.
31 +The LTS5's HMI touch screen supports **drag-and-drop** design, allowing developers to use SquareLine to easily customize the display UI for various applications.
32 32  
33 -LTS5 use LA66 LoRa module, this module can be program to support private LoRa protocol or LoRaWAN protocol.
33 +The LA66 LoRa module can be programmed to support either private LoRa protocols or the LoRaWAN protocol.
34 34  
35 -
36 36  == 1.2  Features ==
37 37  
38 38  
... ... @@ -48,7 +48,7 @@
48 48  * 5V DC power
49 49  * IP Rating: IP52
50 50  
51 -== 1.3  Specification ==
50 +== 1.3  Specifications ==
52 52  
53 53  
54 54  **LoRa**:
... ... @@ -87,7 +87,6 @@
87 87  
88 88  * External 5V DC power adapter
89 89  
90 -
91 91  == 1.5  Storage & Operation Temperature ==
92 92  
93 93  
... ... @@ -94,7 +94,6 @@
94 94  * Operation Temperature: -20 ~~ 70°C  (No Dew)
95 95  * Storage Temperature: -30 ~~ 70°C  (No Dew)
96 96  
97 -
98 98  == 1.6  Applications ==
99 99  
100 100  
... ... @@ -105,31 +105,37 @@
105 105  * Smart Cities
106 106  * Smart Factory
107 107  
108 -
109 109  = 2.  Getting Started with Hello World =
110 110  
111 111  == 2.1  About this demo ==
112 112  
113 113  
114 -In this Getting Started Example, we will show how to design a simple Display UI and upload it to LTS5. This UI has  a button , when user click the button. The Web UI will jump to a new page.
110 +This getting started example demonstrates how to design and deploy a simple display UI for the LTS5 device. The example includes:
115 115  
112 +* Creating a basic UI with a single button.
113 +* Implementing functionality to navigate the Web UI to a new page when the button is clicked.
114 +* Uploading the UI to the LTS5 device.
116 116  
116 +By completing this demo, you will gain foundational knowledge for customizing the LTS5 interface and building more advanced IoT applications.
117 +
118 +
117 117  == 2.2  Install Software Running Environment ==
118 118  
119 119  
120 -The ESP MCU can be developed using ESP-IDF, Arduino, or MicroPython. For this project, we utilize ESP-IDF for compilation and Visual Studio Code (VSCode) for editing.
122 +The **ESP MCU** supports development with **ESP-IDF**, **Arduino**, or **MicroPython**. We use **ESP-IDF** for compilation and **Visual Studio Code (VS Code)** as the development environment for this project.
121 121  
122 122  
123 -=== 2.2.1 Install VSCode and ESP-IDF extension ===
125 +=== 2.2.1 Install VS Code and ESP-IDF extension ===
124 124  
125 125  
126 -Firstly, download and install VSCode for your computer's operating system from the official website: [[Download Visual Studio Code - Mac, Linux, Windows>>url:https://code.visualstudio.com/download]].
128 +First, download and install **VS Code** for your operating system from the Visual Studio Code website: [[Visual Studio Code - Mac, Linux, Windows>>https://code.visualstudio.com/download]].
127 127  
128 -Next, you need to install the ESP-IDF extension within VSCode. The detailed operation steps are illustrated in image 1.
130 +Next, install the **ESP-IDF** extension within **VS Code**. Detailed steps for this process are shown in Image 1.
129 129  
132 +
130 130  [[image:image-20240928110211-5.png||height="508" width="866"]]
131 131  
132 - image 1 ESP-IDF extension install
135 + Image 1: ESP-IDF extension install
133 133  
134 134  Links for reference: [[Install ESP32 ESP-IDF on Windows and Integrate with VS code (esp32tutorials.com)>>url:https://esp32tutorials.com/install-esp32-esp-idf-windows-integrate-vs-code/#:~~:text=In%20this%20tutorial,%20we%20will%20show%20you%20how%20to%20install]]
135 135  
... ... @@ -137,32 +137,60 @@
137 137  === 2.2.2 Install SquareLine Studio ===
138 138  
139 139  
140 -The version we are utilizing for this software is 1.4.2. You can download it from the official link: [[SquareLine Studio - Download the current version of SquareLine Studio>>url:https://squareline.io/downloads#lastRelease]].
143 +Download and install the latest version of [[SquareLine Studio>>https://squareline.io/downloads#lastRelease]] on your computer. It supports Windows, Linux, and Mac OS. The software version we are using here is 1.4.2.
141 141  
142 -Please note that this software necessitates the registration of a license prior to usage, and various licenses come with distinct limitations. For instance, the free version imposes restrictions such as a limit of 1 component, 150 widgets, and 10 screens. However, for first-time downloads, you are granted unrestricted access for a period of 30 days without the need for immediate registration.
145 +[[image:squareline.io_downloads.png]]
143 143  
144 144  
145 -== 2.3 Simple usage of SquareLine Studio and export UI code ==
148 +After installation, you can use SquareLine Studio with a **PERSONAL license plan**. Click **LOG IN** and create a free account using your email address. Then activate your PERSONAL license plan for free. You don’t need to provide any credit card information. However, the PERSONAL license plan has the following limitations:
146 146  
150 +* Max. 10 screens
151 +* Max. 150 widgets
152 +* Max. 5 global colors
153 +* Max. 2 themes
154 +* Max. 1 component
147 147  
148 -After launching and logging in to this software, create a project as shown in the following image 2. The version of LVGL is 8.3.11.
149 149  
157 +== 2.3 Simple usage of SquareLine Studio and exporting UI code ==
158 +
159 +
160 +After launching and logging into the software, create a new project as shown in Image 2.
161 +
162 +* Select the major **LVGL** version as **8.3**.
163 +* Select the **Desktop** tab.
164 +* Select  **Eclipse with  SDL for  development on PC**:
165 +* In the **PROJECT SETTINGS**, select **LVGL version** **8.3.11**
166 +* Select the **CREATE **button.
167 +
168 +
150 150  [[image:image-20240928103357-2.png||height="680" width="708"]]
151 151  
152 - image 2 create a SquareLine project
171 + Image 2: Creating a new SquareLine project
153 153  
154 -Next, we need to make some settings for this project. By clicking in the specified order on image 3, we can see the page as shown in image 4.
155 155  
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 +
176 +* Select File  -> Project Settings
177 +
156 156  [[image:1727229582471-566.png]]
157 157  
158 - image 3 project settings
180 + Image 3 accessing project settings
159 159  
182 +
183 +In the PROJECT SETTINGS dialog box, configure/modify the project settings:
184 +
185 +* **UI Files Export Root**: Select a folder on your computer to store the UI files.
186 +* **LVGL Include Path**: Set this to **lvgl.h**
187 +* **Click on the APPLY CHANGES button.**
188 +
160 160  [[image:image-20240928105309-4.png||height="526" width="556"]]
161 161  
162 - image 4 modify project settings
191 + Image 4 Configure/modify project settings
163 163  
164 -Now we can start to use this software. Here are some usage information for this software.
165 165  
194 +Now you can start building the UI. Follow the steps below:
195 +
196 +
166 166  **~1. add widget**
167 167  
168 168  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.
squalreline-trial.png
Author
... ... @@ -1,0 +1,1 @@
1 +XWiki.pradeeka
Size
... ... @@ -1,0 +1,1 @@
1 +60.4 KB
Content
squareline.io_downloads.png
Author
... ... @@ -1,0 +1,1 @@
1 +XWiki.pradeeka
Size
... ... @@ -1,0 +1,1 @@
1 +1.5 MB
Content

Applications

Navigation

Copyright ©2010-2024 Dragino Technology Co., LTD. All rights reserved
Dragino Wiki v2.0