{"id":5210,"date":"2024-12-23T22:32:38","date_gmt":"2024-12-24T03:32:38","guid":{"rendered":"https:\/\/espacerm.com\/webgen\/?page_id=5210"},"modified":"2025-01-18T00:34:03","modified_gmt":"2025-01-18T05:34:03","slug":"squareline-studio-et-lecran-waveshare-esp32-s3-touch-lcd-7","status":"publish","type":"page","link":"https:\/\/espacerm.com\/webgen\/squareline-studio-et-lecran-waveshare-esp32-s3-touch-lcd-7\/","title":{"rendered":"SquareLine Studio et l’\u00e9cran WAVESHARE ESP32-S3 Touch LCD 7"},"content":{"rendered":"\n

Cette page fait suite \u00e0 l’introduction sur l’\u00e9cran WAVESHARE ESP32-S3 Touch LCD 7<\/a>. La compr\u00e9hension de cette introduction est un pr\u00e9requis pour ce qui suit.<\/p>\n\n\n\n

\n\n\n\n
<\/div>\n\n\n\n

SquareLine Studio<\/strong> est un outil de conception d’interface utilisateur (UI) multiplateforme, con\u00e7u pour aider les concepteurs et les d\u00e9veloppeurs \u00e0 travailler rapidement et efficacement. Il permet de cr\u00e9er des interfaces utilisateur attrayantes et fonctionnelles pour des appareils embarqu\u00e9s, en utilisant la biblioth\u00e8que graphique LVGL (Light and Versatile Graphics Library)<\/strong><\/p>\n\n\n\n

\n\n\n\n

TUTORIELS<\/h2>\n\n\n\n

Get started | Basics Tutorial #1 | SquareLine Studio<\/strong><\/a><\/p>\n\n\n\n

How to make a GUI for ESP32 7 inch Display from Waveshare with Squareline Studio and LVGL<\/strong><\/a> ( installez le board \u00ab waveshare 7inch Dev Board \u00bb )<\/p>\n\n\n\n

<\/div>\n\n\n\n
\n\n\n\n
<\/div>\n\n\n\n

PREMIER CROQUIS AVEC SQUARELINE STUDIO<\/h2>\n\n\n\n

R\u00e9pertoire et fichiers de travail<\/h2>\n\n\n\n

Cr\u00e9er un r\u00e9pertoire de travail<\/strong><\/p>\n\n\n\n

Copier \u00ab 09_lvgl_Porting \u00bb dans ce r\u00e9pertoire de travail<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n

Renommer le dossier \u00ab 09_lvgl_Porting \u00bb du r\u00e9pertoire \u00ab Travail \u00bb pour \u00ab Hello_World_00 \u00bb <\/p>\n\n\n\n

Renommer le fichier \u00ab 09_lvgl_Porting.ino \u00bb du r\u00e9pertoire \u00ab Hello_World_00 \u00bb pour \u00ab Hello_World_00.ino \u00bb <\/p>\n\n\n\n

<\/div>\n\n\n\n

Ajouter un nouveau dossier nomm\u00e9 \u00ab src \u00bb<\/strong><\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n
<\/div>\n\n\n\n

Cr\u00e9er un nouveau dossier \u00ab Hello_World_SLS<\/strong><\/strong> \u00bb dans le r\u00e9pertoire de travail<\/strong><\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n
<\/div>\n\n\n\n

Cr\u00e9ation d’une interface utilisateur avec SquareLine Studio<\/strong><\/h2>\n\n\n\n

Cr\u00e9ation UI Hello World (vid\u00e9o)<\/a><\/p>\n\n\n\n

Installer la version \u00ab lgvl 8.3.11 \u00ab dans la librairie<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Suite \u00e0 l’installation, aller dans le dossier \u00ab…\/librairies\/lgvl \u00bb<\/p>\n\n\n\n

Copier le fichier \u00ab lv_conf_template.h \u00bb dans le r\u00e9pertoire \u00ab librairies \u00bb<\/p>\n\n\n\n

Renommer la copie \u00ab lv_conf.h \u00bb<\/p>\n\n\n\n

Important : Modifier la ligne 15, changer le 0 pour 1<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n
<\/div>\n\n\n\n

Ajouter le fichier qui suit dans le r\u00e9pertoire \u00ab Hello_World_00 \u00bb et nommer le \u00ab ui.h \u00bb<\/p>\n\n\n\n

\/**\n * @file ui.h\n *\n *\/\n\n#ifndef UI_OUTER_H\n#define UI_OUTER_H\n\n#ifdef __cplusplus\nextern \"C\" {\n#endif\n\n\/*********************\n *      INCLUDES\n *********************\/\n#include \"src\/ui.h\"\n\n\/*********************\n *      DEFINES\n *********************\/\n\n\/**********************\n *      TYPEDEFS\n **********************\/\n\n\/**********************\n * GLOBAL PROTOTYPES\n **********************\/\n\n\/**********************\n *      MACROS\n **********************\/\n\n#ifdef __cplusplus\n} \/*extern \"C\"*\/\n#endif\n\n#endif \/*UI_OUTER_H*\/\n<\/pre>\n\n\n\n
Ouvrir le fichier \u00ab Hello_World_00.ino \u00bb avec l’IDE Arduino<\/p>\n\n\n\n
Modifier la ligne 20, ajouter <\/p>\n\n\n\n
Ajouter \u00ab #include \u00ab\u00a0ui.h\u00a0\u00bb . \u00e0 la ligne 8, mettre en commentaire la ligne 21<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
<\/div>\n\n\n\n
Mettre en commentaire la ligne 91 ( \/\/ lv_example_animing_1(); )<\/p>\n\n\n\n
Ajouter \u00e0 la ligne 92 ( ui_init(); ) <\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Enregistrer les modifications<\/p>\n\n\n\n
<\/div>\n\n\n\n
D\u00e9brancher et rebrancher le \u00ab Waveshare ESP32-S3-Touch-LCD-7 \u00bb du port USB de l\u2019ordinateur. Maintenir le bouton BOOT enfonc\u00e9 pendant la connexion du c\u00e2ble USB \u00e0 l\u2019ordinateur.<\/strong><\/p>\n\n\n\n
S\u00e9lectionner la carte \u00ab Waveshare ESP32-S3-Touch-LCD-7 \u00bb et le port COM ad\u00e9quat<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Faire les s\u00e9lections ci-dessous<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
T\u00e9l\u00e9verser le programme dans le \u00ab Waveshare ESP32-S3-Touch-LCD-7 \u00bb<\/p>\n\n\n\n
Retirer le c\u00e2ble USB de l\u2019ordinateur et le rebrancher. L\u2019application d\u00e9marre.<\/p>\n\n\n\n
Le \u00ab Waveshare ESP32-S3-Touch-LCD-7 \u00bb affiche \u00ab Hello World ! \u00bb<\/p>\n\n\n\n
<\/div>\n\n\n\n
\n\n\n\n
CHANGEMENT DE STYLE DE CARACT\u00c8RE<\/h2>\n\n\n\n
Dans le fichier lv_conf.h, mettre un 1 \u00e0 ligne qui correspond \u00e0 la grosseur de caract\u00e8re employ\u00e9 dans votre projet.<\/p>\n\n\n\n
IMPORTANT: Pour le m\u00eame fichier, s’assurer que la condition soit r\u00e9gl\u00e9e \u00e0 1 \u00e0 la ligne 15   \u00ab if 1 \/Set it to \u00ab\u00a01\u00a0\u00bb to enable content<\/em>\/ \u00bb<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Changement dans le fichier lv_conf.h (vid\u00e9o)<\/a><\/p>\n\n\n\n
<\/p>\n\n\n\n
Changement \u00e0 faire dans le projet avec Squareline Studio (vid\u00e9o)<\/a><\/p>\n\n\n\n
<\/div>\n\n\n\n
\n\n\n\n
D\u00c9MO : ACTIVATION D’UN LED \u00c0 PARTIR D’UN BOUTON SUR \u00c9CRAN<\/h2>\n\n\n\n
\"\"<\/figure>\n\n\n\n
L’objectif est d’allumer ou \u00e9teindre le led par l’entremise d’un bouton \u00e0 l’\u00e9cran. Pour ce faire, le circuit r\u00e9sistance-led est reli\u00e9 sur le port \u00ab Sensor AD \u00bb, broches 3V3-GND-AD. La broche \u00ab AD \u00bb est contr\u00f4l\u00e9e par le GPIO6. Une r\u00e9sistance de 240 ohms est employ\u00e9e.<\/p>\n\n\n\n
<\/div>\n\n\n\n
Cr\u00e9ation des fichiers de d\u00e9part<\/h3>\n\n\n\n
Copier \u00ab 09_lvgl_Porting \u00bb dans le r\u00e9pertoire de travail<\/p>\n\n\n\n
Renommer le dossier \u00ab 09_lvgl_Porting \u00bb du r\u00e9pertoire \u00ab Travail \u00bb pour \u00ab allum_led_LCD_7_buttonCtrl_01 \u00bb<\/p>\n\n\n\n
Renommer le fichier \u00ab 09_lvgl_Porting.ino \u00bb du r\u00e9pertoire \u00ab allum_led_LCD_7_buttonCtrl_01 \u00bb pour \u00ab allum_led_LCD_7_buttonCtrl_01.ino \u00bb<\/p>\n\n\n\n
Dans le r\u00e9pertoire \u00ab allum_led_LCD_7_buttonCtrl_01 \u00bb, ajouter un nouveau dossier nomm\u00e9 \u00ab src \u00bb<\/p>\n\n\n\n
Ajouter le fichier qui suit dans le r\u00e9pertoire \u00ab allum_led_LCD_7_buttonCtrl_01 \u00bb et nommer le \u00ab ui.h \u00bb<\/p>\n\n\n\n
\/**\n * @file ui.h\n *\n *\/\n\n#ifndef UI_OUTER_H\n#define UI_OUTER_H\n\n#ifdef __cplusplus\nextern \"C\" {\n#endif\n\n\/*********************\n *      INCLUDES\n *********************\/\n#include \"src\/ui.h\"\n\n\/*********************\n *      DEFINES\n *********************\/\n\n\/**********************\n *      TYPEDEFS\n **********************\/\n\n\/**********************\n * GLOBAL PROTOTYPES\n **********************\/\n\n\/**********************\n *      MACROS\n **********************\/\n\n#ifdef __cplusplus\n} \/*extern \"C\"*\/\n#endif\n\n#endif \/*UI_OUTER_H*\/<\/pre>\n\n\n\n
Cr\u00e9er un nouveau dossier \u00ab allumLed_LCD_7_1_spj \u00bb dans le r\u00e9pertoire de travail<\/p>\n\n\n\n
<\/div>\n\n\n\n
Cr\u00e9ation de l’interface utilisateur avec SquareLine Studio<\/strong><\/h3>\n\n\n\n
Configuration de l’\u00e9cran avec Squareline Studio (vid\u00e9o)<\/a><\/p>\n\n\n\n
Suite \u00e0 la configuration, la fonction d\u00e9sir\u00e9e doit \u00eatre ajout\u00e9e au fichier \u00ab ui_events.c \u00bb du r\u00e9pertoire \u00ab Travail\\allum_led_LCD_7_buttonCtrl_01\\src \u00bb<\/p>\n\n\n\n
\/\/ This file was generated by SquareLine Studio\n\/\/ SquareLine Studio version: SquareLine Studio 1.5.0\n\/\/ LVGL version: 8.3.11\n\/\/ Project name: allumLed_LCD_7_1\n\n#include \"ui.h\"\n\nvoid my_button_event_handler(lv_event_t * e)\n{\n\t\/\/ Your code here\n\tconst char * etat = lv_label_get_text(ui_lblStatusLed);\n\tif (strcmp(etat, \"LED OFF\") == 0){   \/\/ etat = \"LED OFF\"\n\t\tlv_label_set_text(ui_lblStatusLed, \"LED ON\");\t\n    }\n    else{\n\t    lv_label_set_text(ui_lblStatusLed, \"LED OFF\");\n\t}\n}<\/pre>\n\n\n\n
Ouvrir le fichier \u00ab allum_led_LCD_7_buttonCtrl_01.ino \u00bb avec l\u2019IDE Arduino<\/p>\n\n\n\n
    \n
  • Ajouter \u00ab #define GPIO_CRTL_LED 6 \u00bb \u00e0 la ligne 15<\/li>\n<\/ul>\n\n\n\n
      \n
    • Ajouter \u00ab pinMode(GPIO_CRTL_LED, OUTPUT); \u00bb \u00e0 la ligne 27, puis appuyer sur \u00ab ENTER \u00bb<\/li>\n<\/ul>\n\n\n\n
        \n
      • Ajouter \u00ab digitalWrite(GPIO_CRTL_LED, LOW); \u00bb \u00e0 la ligne 28<\/li>\n<\/ul>\n\n\n\n
          \n
        • Ajouter \u00ab #include \u00ab\u00a0ui.h\u00a0\u00bb \u00bb \u00e0 la ligne 8<\/li>\n<\/ul>\n\n\n\n
            \n
          • Mettre en commentaire la ligne 7 ( \/\/ #include <demos\/lv_demos.h> )<\/li>\n<\/ul>\n\n\n\n
              \n
            • Mettre en commentaire la ligne 97 (  \/\/ lv_demo_widgets(); )<\/li>\n<\/ul>\n\n\n\n
                \n
              • Ajouter \u00e0 la ligne 101 ( ui_init(); )<\/li>\n<\/ul>\n\n\n\n
                  \n
                • Remplacer la boucle LOOP par ce qui suit :<\/li>\n<\/ul>\n\n\n\n
                  void loop()\n{\n    const char * etatLabel = lv_label_get_text(ui_lblStatusLed);\n\n    if (strcmp(etatLabel, \"LED OFF\") == 0){\n      digitalWrite(GPIO_CRTL_LED, LOW);\n      lv_obj_set_style_text_color(ui_lblStatusLed, lv_color_hex(0x0000FF), LV_PART_MAIN | LV_STATE_DEFAULT); \/\/ Bleu\n    }\n    else{\n      digitalWrite(GPIO_CRTL_LED, HIGH);\n      lv_obj_set_style_text_color(ui_lblStatusLed, lv_color_hex(0xFF0000), LV_PART_MAIN | LV_STATE_DEFAULT); \/\/ Rouge\n    }\n\n}<\/pre>\n\n\n\n
                  <\/div>\n\n\n\n
                  D\u00e9brancher et rebrancher le \u00ab Waveshare ESP32-S3-Touch-LCD-7 \u00bb du port USB de l\u2019ordinateur. Maintenir le bouton BOOT enfonc\u00e9 pendant la connexion du c\u00e2ble USB \u00e0 l\u2019ordinateur.<\/strong><\/p>\n\n\n\n
                  S\u00e9lectionner la carte \u00ab Waveshare ESP32-S3-Touch-LCD-7 \u00bb et le port COM ad\u00e9quat<\/p>\n\n\n\n
                  \"\"<\/figure>\n\n\n\n
                  Faire les s\u00e9lections ci-dessous<\/p>\n\n\n\n
                  \"\"<\/figure>\n\n\n\n
                  T\u00e9l\u00e9verser le programme dans le \u00ab Waveshare ESP32-S3-Touch-LCD-7 \u00bb<\/p>\n\n\n\n
                  Retirer le c\u00e2ble USB de l\u2019ordinateur et le rebrancher. L\u2019application d\u00e9marre<\/strong>.<\/p>\n\n\n\n
                  Le \u00ab Waveshare ESP32-S3-Touch-LCD-7 \u00bb affiche en bleu \u00ab LED OFF\u00bb<\/p>\n\n\n\n
                  Appuyer sur le bouton \u00e0 l’\u00e9cran<\/p>\n\n\n\n
                    \n
                  • Le \u00ab Waveshare ESP32-S3-Touch-LCD-7 \u00bb affiche en rouge \u00ab LED ON\u00bb<\/li>\n\n\n\n
                  • Le LED s’allume<\/li>\n<\/ul>\n\n\n\n
                    <\/p>\n\n\n\n
                      \n
                    • <\/li>\n<\/ul>\n\n\n\n
                      Appuyer sur le bouton \u00e0 l’\u00e9cran<\/p>\n\n\n\n
                        \n
                      • Le \u00ab Waveshare ESP32-S3-Touch-LCD-7 \u00bb affiche \u00ab LED OFF\u00bb<\/li>\n\n\n\n
                      • Le LED s’\u00e9teint<\/li>\n<\/ul>\n\n\n\n
                        \n\n\n\n
                        <\/p>\n","protected":false},"excerpt":{"rendered":"
                        Cette page fait suite \u00e0 l’introduction sur l’\u00e9cran WAVESHARE ESP32-S3 Touch LCD 7. La compr\u00e9hension de cette introduction est un pr\u00e9requis pour ce qui suit. SquareLine Studio est un outil de conception d’interface utilisateur (UI) multiplateforme, con\u00e7u pour aider les concepteurs et les d\u00e9veloppeurs \u00e0 travailler rapidement et efficacement. Il permet de cr\u00e9er des interfaces […]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"_links":{"self":[{"href":"https:\/\/espacerm.com\/webgen\/wp-json\/wp\/v2\/pages\/5210"}],"collection":[{"href":"https:\/\/espacerm.com\/webgen\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/espacerm.com\/webgen\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/espacerm.com\/webgen\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/espacerm.com\/webgen\/wp-json\/wp\/v2\/comments?post=5210"}],"version-history":[{"count":75,"href":"https:\/\/espacerm.com\/webgen\/wp-json\/wp\/v2\/pages\/5210\/revisions"}],"predecessor-version":[{"id":5475,"href":"https:\/\/espacerm.com\/webgen\/wp-json\/wp\/v2\/pages\/5210\/revisions\/5475"}],"wp:attachment":[{"href":"https:\/\/espacerm.com\/webgen\/wp-json\/wp\/v2\/media?parent=5210"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}