LTS5 LoRa HMI Touch Screen

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

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

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

33

The LA66 LoRa module can be programmed to support either private LoRa protocols or the LoRaWAN protocol.

== 1.2 Features ==

* ESP32-WROOM MCU: 8MB RAM & 16MB ROM

39

* Dragino LA66 LoRa Module

40

* Support Private LoRa protocol or LoRaWAN protocol

41

* Support WiFi & BLE wireless protocol

42

* 5.0" HMI touch screen

43

* Support LVGL case. SquareLine program.

44

* Support RS485 Interface

45

* Open Source Project

* Wall Attachable.

* 5V DC power

* IP Rating: IP52

== 1.3 Specifications ==

**LoRa**:

* Frequency Range: 870 MHz ~~ 960 MHz

56

* TCXO crystal to ensure RF performance on low temperature

57

* Maximum Power +22 dBm constant RF output

58

* High sensitivity: -148 dBm

59

* LoRa Tx Current: <90 mA at +17 dBm, 108 mA at +22 dBm

60

* LoRa Rx current: <9 mA

**WiFi:**

* 802.11b/g/n

* Up to 150 Mbps data rate in 802.11n mode

66

* Support A-MPDU and A-MSDU aggregation

67

* zero point four μ S protection interval

68

* Working channel center frequency range: 2412~~2484 MHz

**Bluetooth:**

* Bluetooth V4.2 BR/EDR and Bluetooth LE standard

73

* Class-1, Class-2, and Class-3 transmitters.

* AFH

* CVSD and SBC

**Display:**

* 5.0 Inch , 800 x 480

80

* IPS Capacitive Touch SCreen

81

* RGB color.

82

* Display Area: 120.7*75.80 mm

83

84

== 1.4 Power Consumption ==

85

86

87

* External 5V DC power adapter

88

89

== 1.5 Storage & Operation Temperature ==

90

91

92

* Operation Temperature: -20 ~~ 70°C (No Dew)

93

* Storage Temperature: -30 ~~ 70°C (No Dew)

94

95

== 1.6 Applications ==

96

97

98

* Smart Buildings & Home Automation

99

* Logistics and Supply Chain Management

* Smart Metering

* Smart Agriculture

* Smart Cities

* Smart Factory

= 2. Getting Started with Hello World =

106

107

== 2.1 About this demo ==

108

109

110

This getting started example demonstrates how to design and deploy a simple display UI for the LTS5 device. The example includes:

111

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.

115

116

By completing this demo, you will gain foundational knowledge for customizing the LTS5 interface and building more advanced IoT applications.

117

118

119

== 2.2 Install Software Running Environment ==

120

121

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.

123

124

125

=== 2.2.1 Install VS Code and ESP-IDF extension ===

126

127

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]].

129

130

Next, install the **ESP-IDF** extension within **VS Code**. Detailed steps for this process are shown in Image 1.

131

132

133

[[image:image-20240928110211-5.png||height="508" width="866"]]

134

135

Image 1: ESP-IDF extension install

136

137

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]]

138

139

140

=== 2.2.2 Install SquareLine Studio ===

141

142

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.

144

145

[[image:squareline.io_downloads.png]]

146

147

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:

* Max. 10 screens

* Max. 150 widgets

* Max. 5 global colors

* Max. 2 themes

* Max. 1 component

== 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

169

[[image:image-20240928103357-2.png||height="680" width="708"]]

170

171

Image 2: Creating a new SquareLine project

172

173

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

178

[[image:1727229582471-566.png]]

179

180

Image 3 accessing project settings

181

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

189

[[image:image-20240928105309-4.png||height="526" width="556"]]

190

191

Image 4 Configure/modify project settings

192

193

194

Now you can start building the UI. Follow the steps below:

**~1. add widget**

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.

200

201

[[image:image-20240928111412-6.png||height="526" width="864"]]

image 5 add widgets

**2. modify widget**

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".

208

209

[[image:1727485118799-984.png]]

210

211

image 6 the button widget's "Inspector" tab

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

215

[[image:1727485251053-655.png]]

216

217

image 7 the button widget's "BUTTON" tab

218

219

Third part: It is an area of style setting.

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.

222

223

[[image:1727485480434-713.png||height="395" width="290"]]

224

225

image 8 add event for button

226

227

**3. change label widget content**

228

229

Modify the content in text as shown in image 9, the text content of label widget will be changed accordingly.

230

231

[[image:image-20240928090825-1.png||height="327" width="391"]]

232

233

image 9 modify text content of label widget

234

235

**4. Add image into project**

236

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

239

[[image:image-20240928113424-9.png||height="355" width="505"]]

240

241

image 10 add image file into SquareLine Studio project

242

243

[[image:image-20240928114139-10.png||height="559" width="810"]]

244

245

image 11 use image widget in SquareLine Studio

246

247

**5. The relationship between widgets**

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.

250

251

[[image:1727486567182-334.png||height="318" width="278"]]

252

253

image 12 move label1 to make label1 widget be a child of button1 widget(1)

254

255

[[image:image-20240928112001-8.png||height="431" width="796"]]

256

257

image 13 move label1 to make label1 widget be a child of button1 widget(2)

258

259

**6. Preview the final effect**

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.

262

263

[[image:1727487368023-281.png]]

264

265

image 14 click on the triangle icon to start or end the simulation

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

269

270

== 2.4 Integrate UI Code to ESP-IDF Project ==

271

272

273

To achieve the integrating, we first need to export the UI code, then make some modifications, and finally relocate the UI code to a specific position within the project.

274

275

[[image:1727229798126-306.png]]

276

277

image 15 export UI file

278

279

[[image:1727229821582-258.png||height="333" width="662"]]

280

281

image 16 exported UI file

282

283

Create a empty directory entitled "ui" in path "basic_prj/app_components/ui/", and then copy all UI code exported to this directory.

284

285

[[image:image-20240928144830-11.png]]

286

287

image 17 open CMakeLists.txt

288

289

[[image:1727229892636-154.png||height="521" width="407"]]

290

291

image 18 modify CMakeLists.txt

292

293

The last step of integrating is adding two lines of code in main.c file.

294

295

[[image:1727229926561-300.png]]

image 19 add "ui.h"

[[image:1727229955611-607.png]]

300

301

image 20 add "ui_init()"

302

303

304

== 2.5 Brief introduction of hello world project ==

305

306

307

The project consists of two screens. The first screen displays the company's logo, the project name, and a button to navigate to the next screen. The second screen presents some information about this HMI screen product through an image and includes a button to return to the previous screen.

308

309

310

== 2.6 Test Result ==

311

312

313

By pressing the button lying bottom right, the screen can switch to another as expected. This indicates that the UI file has been successfully integrated into the project and is now effective.

314

315

[[image:1727488067077-684.png||height="402" width="574"]]

image 21 screen1

[[image:1727488157579-949.png||height="397" width="572"]]

image 22 screen2

= 3. Example Project 1: LoRa Central Display =

325

326

[[image:image-20240916101737-1.png||height="468" width="683"]]

327

328

329

= 4. Example Project 2: LoRaWAN RS485 Alarm =

330

331

= 5. The way to add a new panel to project =

332

333

**~1. Design a panel in SquareLine Studio, using image 5.1 below as a reference.**

334

335

[[image:image-20241121113445-1.png||height="584" width="934"]]

336

337

image 5.1 a panel about water_leak

338

339

**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.

340

341

[[image:image-20241121141120-4.png||height="383" width="795"]]

342

343

image 5.2 ui files exported

344

345

**3. Delete or rename some file.** Here are the steps:

346

347

Step1 Delete the 'components' directory.

348

Step2 Delete 'filelist.txt'.

349

Step3 Delete 'ui_helpers.c' and 'ui_helpers.h'.

350

Step4 Rename 'ui_ScreenMain.c' in the 'screens' directory to 'ui_water_leak_style.c'.

351

Step5 Rename the 'screens' directory to 'styles'.

352

353

[[image:image-20241121151934-10.png||height="303" width="792"]]

354

355

image 5.3 rest file (1)

356

357

[[image:image-20241121142925-7.png||height="141" width="793"]]

358

359

image 5.4 rest file (2)

360

361

**4. Open this project in vscode.**

362

363

5. Add file include path about water_leak in extra_lib/CMakeLists.txt as shown in image 5.5, 5.6, and its format is similar to the tem_hum or door.

364

365

[[image:image-20241121181957-17.png||height="438" width="516"]]

366

367

image 5.5 extra_lib/CMakeLists.txt before add

368

369

[[image:image-20241121182239-18.png||height="520" width="518"]]

370

371

image 5.6 extra_lib/CMakeLists.txt after add

372

373

**6. Modify header file include in fonts and images directory.** Open the fonts/ui_font_Font12.c file, as shown in image 5.7, then modify the '#include "../ui.h"' to '#include "../ui_water_leak.h"', the image 5.8 is the modified image. Other font file need to be modified in same way.

374

375

[[image:image-20241121171629-11.png]]

376

377

image 5.7 before-modified font file

378

379

[[image:image-20241121171901-12.png]]

380

381

image 5.8 modified font file

382

383

Open the images/ui_img_battery_empty_png.c file, as shown in image 5.9, then modify the '#include "../ui.h"' to '#include "../ui_water_leak.h"', the image 5.10 is the modified image. Other image file need to be modified in same way.

384

385

[[image:image-20241121172714-13.png]]

386

387

image 5.9 before-modified image file

388

389

[[image:image-20241121172908-14.png]]

390

391

image 5.10 modified image file

392

393

**7. Modify the ui_water_leak/CMakeLists.txt.** Open this file, and modify it from image 5.11 to image 5.12.

394

395

[[image:image-20241121180030-15.png]]

396

397

image 5.11 ui_water_leak/CMakeLists.txt before modification

398

399

[[image:image-20241121180517-16.png]]

400

401

image 5.12 ui_water_leak/CMakeLists.txt after modification

402

403

**8. Modify ui_water_leak.h file.** The image 5.13, 5.14 show the code before modification, and the image 5.15, 5.16 show the code after modification.

404

405

[[image:image-20241122094200-23.png]]

406

407

image 5.13 ui_water_leak.h (1) before modification

408

409

[[image:image-20241122094320-24.png||height="852" width="554"]]

410

411

image 5.14 ui_water_leak.h (2) before modification

412

413

[[image:image-20241122094600-25.png||height="1078" width="554"]]

414

415

image 5.15 ui_water_leak.h (1) after modification

416

417

[[image:image-20241122094719-26.png||height="941" width="583"]]

418

419

image 5.16 ui_water_leak.h (2) before modification

420

421

**9. Modify ui_water_leak.c file.** The image 5.17, 5.18, 5.19 show the code before modification, and the image 5.20, 5.21, 5.22 show the code after modification.

422

423

_ui_flag_modify( ((lv_obj_t *)(e->user_data)), LV_OBJ_FLAG_HIDDEN, _UI_MODIFY_FLAG_TOGGLE); This code replaces 4 lines of code in ui_water_leak.c, so it is pasted here for convenience.

424

425

[[image:image-20241122102929-27.png||height="619" width="426"]]

426

427

image 5.17 ui_water_leak.c (1) before modification

428

429

[[image:image-20241122112838-30.png||height="551" width="628"]]

430

431

image 5.18 ui_water_leak.c (2) before modification

432

433

[[image:image-20241122110815-29.png||height="725" width="712"]]

434

435

image 5.19 ui_water_leak.c (3) before modification

436

437

[[image:image-20241122113158-31.png||height="872" width="677"]]

438

439

image 5.20 ui_water_leak.c (1) after modification

440

441

[[image:image-20241122113259-33.png||height="874" width="724"]]

442

443

image 5.21 ui_water_leak.c (2) after modification

444

445

[[image:image-20241122113359-34.png||height="804" width="746"]]

446

447

image 5.22 ui_water_leak.c (3) after modification

448

449

**10. Modify ui_water_leak_events.h file.** The image 5.23 show the code before modification, and the image 5.24 show the code after modification.

450

451

[[image:image-20241122134113-35.png||height="380" width="421"]]

452

453

image 5.23 ui_water_leak_events_.h before modification

454

455

[[image:image-20241122134420-37.png||height="201" width="283"]]

456

457

image 5.24 ui_water_leak_events_.h after modification

458

459

**11. Modify ui_water_leak_events.c file.** The image 5.25 show the code before modification, and the image 5.26 show the code after modification.

460

461

Step1. '#include "ui.h"'~-~->'#include "ui_water_leak.h"'

462

463

Step2. add code below in delete_object() function definition.

464

465

panel_all * panel = find_upper_by_SensorPanel(&arr,((lv_obj_t *)(e->user_data~)~)~);

466

467

size_t index = panel->panel_obj_index;

468

469

deleteElement(&arr, index);

470

471

[[image:image-20241122135023-38.png||height="358" width="372"]]

472

473

image 5.25 ui_water_leak_events_.c before modification

474

475

[[image:image-20241122135258-39.png||height="403" width="559"]]

476

477

image 5.26 ui_water_leak_events_.c after modification

478

479

**12. Modify ui_water_leak_style.c file.**

480

481

Step1. '#include "../ui.h"'~-~->#include '"../ui_water_leak.h"'

482

483

add '#include "../../sort.h"'

484

485

add '#include "ui.h"'

486

487

[[image:image-20241122141536-41.png||height="361" width="612"]]

488

489

image 5.27 ui_water_leak_style.c (1) before modification

490

491

[[image:image-20241122142129-42.png||height="386" width="613"]]

492

493

image 5.28 ui_water_leak_style.c (1) after modification

494

495

Step2. modify 'void ui_ScreenMain_screen_init(void)'~-~->'panel_with_type create_water_leak(uint8_t index)'

496

497

delete code as shown in image 5.29

498

499

[[image:image-20241122145620-44.png||height="757" width="671"]]

500

501

image 5.29 ui_water_leak_style.c (2)

502

503

Step3. The image 5.30, 5.31 show the change.

504

505

[[image:image-20241122152026-45.png||height="277" width="828"]]

506

507

image 5.30 ui_water_leak_style.c (3) before modification

508

509

[[image:image-20241122152542-46.png||height="293" width="830"]]

510

511

image 5.31 ui_water_leak_style.c (3) after modification

512

513

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).

514

515

[[image:image-20241122153958-47.png]]

516

517

image 5.32 ui_water_leak_style.c (4)

518

519

[[image:image-20241122154755-49.png||height="864" width="513"]]

520

521

image 5.33 ui_water_leak_style.c (4)

522

523

Step5. Delete event function in code which was just pasted in extra_lib/sort.h(The process is shown in image 5.34).

524

525

[[image:image-20241122155650-50.png||height="922" width="513"]]

526

527

image 5.34 ui_water_leak_style.c (5)

528

529

Step6. Add some lines of code in extra_lib/sort.h as shown in image 5.35.

530

531

[[image:image-20241122161934-51.png]]

image 5.35

Step7. Add a line of code in extra_lib/sort.h as shown in image 5.36.

536

537

[[image:image-20241122162852-53.png||height="330" width="529"]]

image 5.37

Step8. Add some code in ui_water_leak_style.c as shown in image 5.38 from line534 to line 576 in detail.

542

543

panel_with_type union_sensor;

544

545

union_sensor.panel_type = WATER_LEAK_TYPE;

......

lv_obj_set_x(union_sensor.panel_union.door.ui_PanelSensorDoor, x_by_index(index));

550

551

lv_obj_set_y(union_sensor.panel_union.door.ui_PanelSensorDoor, y_by_index(index));

return union_sensor;

[[image:image-20241122171211-54.png||height="635" width="792"]]

image 5.38

**13. Modify sort.c file.**

560

561

Add a line of code ~-~-'#include "ui_water_leak.h"' as shown in image 5.39 line 16.

562

563

[[image:image-20241122173718-56.png||height="378" width="579"]]

564

565

image 5.39 sort.c (1)

566

567

There are still some changes need to be done in sort.c, and omit here for the moment.

= 6. FAQ =

== 6.1 ==

= 7. Order Info =

== 7.1 Part Number ==

578

579

580

Part Number: (% style="color:#4472c4" %)LTS5

581

582

583

== 7.2 Packing Info ==

584

585

586

**Package Includes**:

587

588

* LTS5 HMI Touch Screen

589

* 5V,2A DC Power Adapter.

590

* USB Type C Program Cable

= 8. Support =

* Support is provided Monday to Friday, from 09:00 to 18:00 GMT+8. Due to different timezones we cannot offer live support. However, your questions will be answered as soon as possible in the before-mentioned schedule.

596

* Provide as much information as possible regarding your enquiry (product models, accurately describe your problem and steps to replicate it etc) and send a mail to [[support@dragino.com>>url:file:///D:/市场资料/说明书/LoRa/LT系列/support@dragino.com]].

597

598

= 9. Reference material =

* Datasheet

* Source Code

* Mechinical