SquareLine Studio et l’écran WAVESHARE ESP32-S3 Touch LCD 7

SquareLine Studio est un outil de conception d’interface utilisateur (UI) multiplateforme, conçu pour aider les concepteurs et les développeurs à travailler rapidement et efficacement. Il permet de créer des interfaces utilisateur attrayantes et fonctionnelles pour des appareils embarqués, en utilisant la bibliothèque graphique LVGL (Light and Versatile Graphics Library)


TUTORIELS

Get started | Basics Tutorial #1 | SquareLine Studio

How to make a GUI for ESP32 7 inch Display from Waveshare with Squareline Studio and LVGL ( installez le board « waveshare 7inch Dev Board » )


PREMIER CROQUIS AVEC SQUARELINE STUDIO

Répertoire et fichiers de travail

Créer un répertoire de travail

Copier « 09_lvgl_Porting » dans ce répertoire de travail

Renommer le dossier « 09_lvgl_Porting » du répertoire « Travail » pour « Hello_World_00 »

Renommer le fichier « 09_lvgl_Porting.ino » du répertoire « Hello_World_00 » pour « Hello_World_00.ino »

Ajouter un nouveau dossier nommé « src »

Créer un nouveau dossier « Hello_World_SLS » dans le répertoire de travail

Création d’une interface utilisateur avec SquareLine Studio

Création UI Hello World

Installé la version « lgvl 8.3.11 « dans la librairie

Suite à l’installation, aller dans le dossier «…/librairies/lgvl »

Copier le fichier « lv_conf_template.h » dans le répertoire « librairies »

Renommer la copie « lv_conf.h »

Important : Modifier la ligne 15, changer le 0 pour 1

Ajouter le fichier qui suit dans le répertoire « Hello_World_00 » et nommer le « ui.h »

/**
 * @file ui.h
 *
 */

#ifndef UI_OUTER_H
#define UI_OUTER_H

#ifdef __cplusplus
extern "C" {
#endif

/*********************
 *      INCLUDES
 *********************/
#include "src/ui.h"

/*********************
 *      DEFINES
 *********************/

/**********************
 *      TYPEDEFS
 **********************/

/**********************
 * GLOBAL PROTOTYPES
 **********************/

/**********************
 *      MACROS
 **********************/

#ifdef __cplusplus
} /*extern "C"*/
#endif

#endif /*UI_OUTER_H*/

Ouvrir le fichier « Hello_World_00.ino » avec l’IDE Arduino

Modifier la ligne 20, ajouter

Ajouter « #include « ui.h » . à la ligne 8, mettre en commentaire la ligne 21

Mewttre en commentaire la ligne 91, ajouter « ui_init(); » à la ligne 92

Sélectionner la carte « Waveshare ESP32-S3-Touch-LCD-7 » et le port COM adéquat

Faire les sélections ci-dessous

Téléverser le programme dans le « Waveshare ESP32-S3-Touch-LCD-7 »

Retirer le câble USB de l’ordinateur et le rebrancher. L’application démarre

Le « Waveshare ESP32-S3-Touch-LCD-7 » affiche « Hello World ! »


CHANGEMENT DE STYLE DE CARACTÈRE

Dans le fichier lv_conf.h, mettre un 1 à ligne qui correspond à la grosseur de caractère employé dans votre projet.

IMPORTANT: Pour le même fichier, s’assurer que la condition soit réglée à 1 à la ligne 15 « if 1 /Set it to « 1 » to enable content/ »

Changement dans le fichier lv_conf.h

Changement à faire dans le projet avec Squareline Studio