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 as a trial version for 30 days without activation. Click **CONTINUE WITH TRIAL** to use the trial version, or click **LOG IN** to activate the software with your license key.

149

150

[[image:squalreline-trial.png||height="602" width="400"]]

151

152

The free version restricts usage to 1 component, 150 widgets, and 10 screens.

153

154

== 2.3 Simple usage of SquareLine Studio and export UI code ==

155

156

157

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.

158

159

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

160

161

image 2 create a SquareLine project

162

163

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.

164

165

[[image:1727229582471-566.png]]

166

167

image 3 project settings

168

169

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

170

171

image 4 modify project settings

172

173

Now we can start to use this software. Here are some usage information for this software.

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

178

179

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

186

187

[[image:1727485118799-984.png]]

188

189

image 6 the button widget's "Inspector" tab

190

191

Second part: "Layout" means a auto position-management for widgets contained in the parent widget. "Transform" includes size, position and align modification.

192

193

[[image:1727485251053-655.png]]

194

195

image 7 the button widget's "BUTTON" tab

196

197

Third part: It is an area of style setting.

198

199

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.

200

201

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

202

203

image 8 add event for button

204

205

**3. change label widget content**

206

207

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

208

209

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

210

211

image 9 modify text content of label widget

212

213

**4. Add image into project**

214

215

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.

216

217

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

218

219

image 10 add image file into SquareLine Studio project

220

221

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

222

223

image 11 use image widget in SquareLine Studio

224

225

**5. The relationship between widgets**

226

227

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.

228

229

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

230

231

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

232

233

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

234

235

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

236

237

**6. Preview the final effect**

238

239

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.

240

241

[[image:1727487368023-281.png]]

242

243

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

244

245

For more detailed usage, please visit the official link: [[SquareLine Studio 1.4.2 Documentation ~| SquareLine Studio>>url:https://docs.squareline.io/docs/squareline/]].

246

247

248

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

249

250

251

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.

252

253

[[image:1727229798126-306.png]]

254

255

image 15 export UI file

256

257

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

258

259

image 16 exported UI file

260

261

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

262

263

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

264

265

image 17 open CMakeLists.txt

266

267

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

268

269

image 18 modify CMakeLists.txt

270

271

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

272

273

[[image:1727229926561-300.png]]

image 19 add "ui.h"

[[image:1727229955611-607.png]]

278

279

image 20 add "ui_init()"

280

281

282

== 2.5 Brief introduction of hello world project ==

283

284

285

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.

286

287

288

== 2.6 Test Result ==

289

290

291

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.

292

293

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

303

304

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

305

306

307

= 4. Example Project 2: LoRaWAN RS485 Alarm =

308

309

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

310

311

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

312

313

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

314

315

image 5.1 a panel about water_leak

316

317

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

318

319

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

320

321

image 5.2 ui files exported

322

323

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

324

325

Step1 Delete the 'components' directory.

326

Step2 Delete 'filelist.txt'.

327

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

328

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

329

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

330

331

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

332

333

image 5.3 rest file (1)

334

335

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

336

337

image 5.4 rest file (2)

338

339

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

340

341

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.

342

343

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

344

345

image 5.5 extra_lib/CMakeLists.txt before add

346

347

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

348

349

image 5.6 extra_lib/CMakeLists.txt after add

350

351

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

352

353

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

354

355

image 5.7 before-modified font file

356

357

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

358

359

image 5.8 modified font file

360

361

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.

362

363

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

364

365

image 5.9 before-modified image file

366

367

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

368

369

image 5.10 modified image file

370

371

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

372

373

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

374

375

image 5.11 ui_water_leak/CMakeLists.txt before modification

376

377

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

378

379

image 5.12 ui_water_leak/CMakeLists.txt after modification

380

381

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

382

383

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

384

385

image 5.13 ui_water_leak.h (1) before modification

386

387

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

388

389

image 5.14 ui_water_leak.h (2) before modification

390

391

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

392

393

image 5.15 ui_water_leak.h (1) after modification

394

395

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

396

397

image 5.16 ui_water_leak.h (2) before modification

398

399

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

400

401

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

402

403

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

404

405

image 5.17 ui_water_leak.c (1) before modification

406

407

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

408

409

image 5.18 ui_water_leak.c (2) before modification

410

411

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

412

413

image 5.19 ui_water_leak.c (3) before modification

414

415

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

416

417

image 5.20 ui_water_leak.c (1) after modification

418

419

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

420

421

image 5.21 ui_water_leak.c (2) after modification

422

423

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

424

425

image 5.22 ui_water_leak.c (3) after modification

426

427

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

428

429

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

430

431

image 5.23 ui_water_leak_events_.h before modification

432

433

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

434

435

image 5.24 ui_water_leak_events_.h after modification

436

437

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

438

439

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

440

441

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

442

443

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

444

445

size_t index = panel->panel_obj_index;

446

447

deleteElement(&arr, index);

448

449

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

450

451

image 5.25 ui_water_leak_events_.c before modification

452

453

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

454

455

image 5.26 ui_water_leak_events_.c after modification

456

457

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

458

459

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

460

461

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

462

463

add '#include "ui.h"'

464

465

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

466

467

image 5.27 ui_water_leak_style.c (1) before modification

468

469

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

470

471

image 5.28 ui_water_leak_style.c (1) after modification

472

473

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

474

475

delete code as shown in image 5.29

476

477

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

478

479

image 5.29 ui_water_leak_style.c (2)

480

481

Step3. The image 5.30, 5.31 show the change.

482

483

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

484

485

image 5.30 ui_water_leak_style.c (3) before modification

486

487

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

488

489

image 5.31 ui_water_leak_style.c (3) after modification

490

491

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

492

493

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

494

495

image 5.32 ui_water_leak_style.c (4)

496

497

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

498

499

image 5.33 ui_water_leak_style.c (4)

500

501

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

502

503

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

504

505

image 5.34 ui_water_leak_style.c (5)

506

507

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

508

509

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

514

515

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

520

521

panel_with_type union_sensor;

522

523

union_sensor.panel_type = WATER_LEAK_TYPE;

......

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

528

529

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

538

539

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

540

541

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

542

543

image 5.39 sort.c (1)

544

545

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

556

557

558

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

559

560

561

== 7.2 Packing Info ==

562

563

564

**Package Includes**:

565

566

* LTS5 HMI Touch Screen

567

* 5V,2A DC Power Adapter.

568

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

574

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

575

576

= 9. Reference material =

* Datasheet

* Source Code

* Mechinical