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
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/ »