Part.2: Creating Tesla's Website in SquareLine Studio (ESP32+LVGL)

ESP32_LVGL/LVGL8_SquareLine/02_Tesla_Multi_Pages/02_Tesla_Multi_Pages.ino

@@ -0,0 +1,160 @@
+/////////////////////////////////////////////////////////////////
+/*
+  Part.2: Creating Tesla's Website in SquareLine Studio (ESP32+LVGL)
+  Video Tutorial: https://youtu.be/7PXBPRm_8_Y
+  Created by Eric N. (ThatProject)
+*/
+/////////////////////////////////////////////////////////////////
+
+#include <lvgl.h>
+#include "ui.h"
+#define LGFX_USE_V1
+#include <LovyanGFX.hpp>
+#include <FT6236.h>
+#define SDA_FT6236 21
+#define SCL_FT6236 22
+FT6236 ts = FT6236();
+
+class LGFX : public lgfx::LGFX_Device
+{
+lgfx::Panel_ST7796     _panel_instance;
+lgfx::Bus_SPI       _bus_instance;   // SPIバスのインスタンス
+lgfx::Light_PWM     _light_instance;
+
+public:
+  LGFX(void)
+  {
+    { // バス制御の設定を行います。
+      auto cfg = _bus_instance.config();    // バス設定用の構造体を取得します。
+      cfg.spi_host = VSPI_HOST;     // 使用するSPIを選択  (VSPI_HOST or HSPI_HOST)
+      cfg.spi_mode = 0;             // SPI通信モードを設定 (0 ~ 3)
+      cfg.freq_write = 40000000;    // 送信時のSPIクロック (最大80MHz, 80MHzを整数で割った値に丸められます)
+      cfg.freq_read  = 16000000;    // 受信時のSPIクロック
+      cfg.spi_3wire  = false;        // 受信をMOSIピンで行う場合はtrueを設定
+      cfg.use_lock   = true;        // トランザクションロックを使用する場合はtrueを設定
+      cfg.dma_channel = 1;          // Set the DMA channel (1 or 2. 0=disable)   使用するDMAチャンネルを設定 (0=DMA不使用)
+      cfg.pin_sclk = 18;            // SPIのSCLKピン番号を設定
+      cfg.pin_mosi = 19;            // SPIのMOSIピン番号を設定
+      cfg.pin_miso = 23;            // SPIのMISOピン番号を設定 (-1 = disable)
+      cfg.pin_dc   = 27;            // SPIのD/Cピン番号を設定  (-1 = disable)
+      _bus_instance.config(cfg);    // 設定値をバスに反映します。
+      _panel_instance.setBus(&_bus_instance);      // バスをパネルにセットします。
+    }
+
+    { // 表示パネル制御の設定を行います。
+      auto cfg = _panel_instance.config();    // 表示パネル設定用の構造体を取得します。
+      cfg.pin_cs           =    5;  // CSが接続されているピン番号   (-1 = disable)
+      cfg.pin_rst          =    -1;  // RSTが接続されているピン番号  (-1 = disable)
+      cfg.pin_busy         =    -1;  // BUSYが接続されているピン番号 (-1 = disable)
+      cfg.memory_width     =   320;  // ドライバICがサポートしている最大の幅
+      cfg.memory_height    =   480;  // ドライバICがサポートしている最大の高さ
+      cfg.panel_width      =   320;  // 実際に表示可能な幅
+      cfg.panel_height     =   480;  // 実際に表示可能な高さ
+      cfg.offset_x         =     0;  // パネルのX方向オフセット量
+      cfg.offset_y         =     0;  // パネルのY方向オフセット量
+      cfg.offset_rotation  =     0;  // 回転方向の値のオフセット 0~7 (4~7は上下反転)
+      cfg.dummy_read_pixel =     8;  // ピクセル読出し前のダミーリードのビット数
+      cfg.dummy_read_bits  =     1;  // ピクセル以外のデータ読出し前のダミーリードのビット数
+      cfg.readable         =  true;  // データ読出しが可能な場合 trueに設定
+      cfg.invert           = false;  // パネルの明暗が反転してしまう場合 trueに設定
+      cfg.rgb_order        = false;  // パネルの赤と青が入れ替わってしまう場合 trueに設定
+      cfg.dlen_16bit       = false;  // データ長を16bit単位で送信するパネルの場合 trueに設定
+      cfg.bus_shared       =  true;  // SDカードとバスを共有している場合 trueに設定(drawJpgFile等でバス制御を行います)
+
+      _panel_instance.config(cfg);
+    }
+    
+    { // バックライト制御の設定を行います。（必要なければ削除）
+      auto cfg = _light_instance.config();    // バックライト設定用の構造体を取得します。
+
+      cfg.pin_bl = 12;              // バックライトが接続されているピン番号
+      cfg.invert = false;           // バックライトの輝度を反転させる場合 true
+      cfg.freq   = 44100;           // バックライトのPWM周波数
+      cfg.pwm_channel = 7;          // 使用するPWMのチャンネル番号
+
+      _light_instance.config(cfg);
+      _panel_instance.setLight(&_light_instance);  // バックライトをパネルにセットします。
+    }
+
+    setPanel(&_panel_instance); // 使用するパネルをセットします。
+  }
+};
+
+LGFX tft;
+
+/*Change to your screen resolution*/
+static const uint32_t screenWidth  = 480;
+static const uint32_t screenHeight = 320;
+static lv_disp_draw_buf_t draw_buf;
+static lv_color_t buf[ screenWidth * 10 ];
+
+/* Display flushing */
+void my_disp_flush( lv_disp_drv_t *disp, const lv_area_t *area, lv_color_t *color_p )
+{
+   uint32_t w = ( area->x2 - area->x1 + 1 );
+   uint32_t h = ( area->y2 - area->y1 + 1 );
+
+   tft.startWrite();
+   tft.setAddrWindow( area->x1, area->y1, w, h );
+   //tft.pushColors( ( uint16_t * )&color_p->full, w * h, true );
+   tft.writePixels((lgfx::rgb565_t *)&color_p->full, w * h);
+   tft.endWrite();
+
+   lv_disp_flush_ready( disp );
+}
+
+/*Read the touchpad*/
+void my_touchpad_read( lv_indev_drv_t * indev_driver, lv_indev_data_t * data )
+{
+   if(ts.touched()){
+     data->state = LV_INDEV_STATE_PR;
+     TS_Point p = ts.getPoint();
+     data->point.x = p.y;
+     data->point.y = tft.height() - p.x;
+   }else{
+     data->state = LV_INDEV_STATE_REL;
+   }
+}
+
+void setup()
+{
+   Serial.begin(115200);
+
+   tft.begin();        
+   tft.setRotation(1);
+   tft.setBrightness(255);
+
+   if(!ts.begin(40, SDA_FT6236, SCL_FT6236)){
+     Serial.println("Unable to start the capacitive touch Screen.");
+   }
+  
+
+   lv_init();
+   lv_disp_draw_buf_init( &draw_buf, buf, NULL, screenWidth * 10 );
+
+   /*Initialize the display*/
+   static lv_disp_drv_t disp_drv;
+   lv_disp_drv_init(&disp_drv);
+
+   /*Change the following line to your display resolution*/
+   disp_drv.hor_res = screenWidth;
+   disp_drv.ver_res = screenHeight;
+   disp_drv.flush_cb = my_disp_flush;
+   disp_drv.draw_buf = &draw_buf;
+   lv_disp_drv_register(&disp_drv);
+
+   /*Initialize the (dummy) input device driver*/
+   static lv_indev_drv_t indev_drv;
+   lv_indev_drv_init(&indev_drv);
+   indev_drv.type = LV_INDEV_TYPE_POINTER;
+   indev_drv.read_cb = my_touchpad_read;
+   lv_indev_drv_register(&indev_drv);
+
+   ui_init();
+}
+
+void loop()
+{
+   lv_timer_handler(); /* let the GUI do its work */
+   delay( 5 );
+}

ESP32_LVGL/LVGL8_SquareLine/02_Tesla_Multi_Pages/ui.c

@@ -0,0 +1,725 @@
+// SquareLine LVGL GENERATED FILE
+// EDITOR VERSION: SquareLine Studio 1.0.2
+// LVGL VERSION: 8.2
+// PROJECT: Tesla_Multi_Pages
+
+#include "ui.h"
+#include "ui_helpers.h"
+
+///////////////////// VARIABLES ////////////////////
+lv_obj_t * ui_Screen1;
+lv_obj_t * ui_BackgroundImageBTN;
+lv_obj_t * ui_BOTTOM_PANEL;
+lv_obj_t * ui_BTN_CUSTOM_ORDER;
+lv_obj_t * ui_LABEL_CUSTOM_ORDER;
+lv_obj_t * ui_BTN_EXISTING_INVENTORY;
+lv_obj_t * ui_LABEL_EXISTING_INVENTORY;
+lv_obj_t * ui_TITLE_HEADER;
+lv_obj_t * ui_TITLE_SUB;
+lv_obj_t * ui_Screen2;
+lv_obj_t * ui_BackgroundImageBTN1;
+lv_obj_t * ui_BOTTOM_PANEL1;
+lv_obj_t * ui_BTN_CUSTOM_ORDER1;
+lv_obj_t * ui_LABEL_CUSTOM_ORDER1;
+lv_obj_t * ui_BTN_EXISTING_INVENTORY1;
+lv_obj_t * ui_LABEL_EXISTING_INVENTORY1;
+lv_obj_t * ui_TITLE_HEADER1;
+lv_obj_t * ui_TITLE_SUB1;
+lv_obj_t * ui_Screen3;
+lv_obj_t * ui_BackgroundImageBTN2;
+lv_obj_t * ui_BOTTOM_PANEL2;
+lv_obj_t * ui_BTN_CUSTOM_ORDER2;
+lv_obj_t * ui_LABEL_CUSTOM_ORDER2;
+lv_obj_t * ui_BTN_EXISTING_INVENTORY2;
+lv_obj_t * ui_LABEL_EXISTING_INVENTORY2;
+lv_obj_t * ui_TITLE_HEADER2;
+lv_obj_t * ui_TITLE_SUB2;
+lv_obj_t * ui_Screen4;
+lv_obj_t * ui_BackgroundImageBTN3;
+lv_obj_t * ui_BOTTOM_PANEL3;
+lv_obj_t * ui_BTN_CUSTOM_ORDER3;
+lv_obj_t * ui_LABEL_CUSTOM_ORDER3;
+lv_obj_t * ui_BTN_EXISTING_INVENTORY3;
+lv_obj_t * ui_LABEL_EXISTING_INVENTORY3;
+lv_obj_t * ui_TITLE_HEADER3;
+lv_obj_t * ui_TITLE_SUB3;
+
+///////////////////// ANIMATIONS ////////////////////
+
+///////////////////// FUNCTIONS ////////////////////
+static void ui_event_BackgroundImageBTN(lv_event_t * e)
+{
+    lv_event_code_t event = lv_event_get_code(e);
+    lv_obj_t * ta = lv_event_get_target(e);
+    if(event == LV_EVENT_CLICKED) {
+        _ui_screen_change(ui_Screen2, LV_SCR_LOAD_ANIM_MOVE_TOP, 500, 0);
+    }
+}
+static void ui_event_BTN_CUSTOM_ORDER(lv_event_t * e)
+{
+    lv_event_code_t event = lv_event_get_code(e);
+    lv_obj_t * ta = lv_event_get_target(e);
+}
+static void ui_event_BackgroundImageBTN1(lv_event_t * e)
+{
+    lv_event_code_t event = lv_event_get_code(e);
+    lv_obj_t * ta = lv_event_get_target(e);
+    if(event == LV_EVENT_CLICKED) {
+        _ui_screen_change(ui_Screen3, LV_SCR_LOAD_ANIM_MOVE_TOP, 500, 0);
+    }
+}
+static void ui_event_BTN_CUSTOM_ORDER1(lv_event_t * e)
+{
+    lv_event_code_t event = lv_event_get_code(e);
+    lv_obj_t * ta = lv_event_get_target(e);
+}
+static void ui_event_BackgroundImageBTN2(lv_event_t * e)
+{
+    lv_event_code_t event = lv_event_get_code(e);
+    lv_obj_t * ta = lv_event_get_target(e);
+    if(event == LV_EVENT_CLICKED) {
+        _ui_screen_change(ui_Screen4, LV_SCR_LOAD_ANIM_MOVE_TOP, 500, 0);
+    }
+}
+static void ui_event_BTN_CUSTOM_ORDER2(lv_event_t * e)
+{
+    lv_event_code_t event = lv_event_get_code(e);
+    lv_obj_t * ta = lv_event_get_target(e);
+}
+static void ui_event_BackgroundImageBTN3(lv_event_t * e)
+{
+    lv_event_code_t event = lv_event_get_code(e);
+    lv_obj_t * ta = lv_event_get_target(e);
+    if(event == LV_EVENT_CLICKED) {
+        _ui_screen_change(ui_Screen1, LV_SCR_LOAD_ANIM_MOVE_TOP, 500, 0);
+    }
+}
+static void ui_event_BTN_CUSTOM_ORDER3(lv_event_t * e)
+{
+    lv_event_code_t event = lv_event_get_code(e);
+    lv_obj_t * ta = lv_event_get_target(e);
+}
+
+///////////////////// SCREENS ////////////////////
+void ui_Screen1_screen_init(void)
+{
+
+    // Screen1
+
+    ui_Screen1 = lv_obj_create(NULL);
+
+    lv_obj_clear_flag(ui_Screen1, LV_OBJ_FLAG_SCROLLABLE);
+
+    // BackgroundImageBTN
+
+    ui_BackgroundImageBTN = lv_imgbtn_create(ui_Screen1);
+    lv_imgbtn_set_src(ui_BackgroundImageBTN, LV_IMGBTN_STATE_RELEASED, NULL, &ui_img_tesla_model_3_png, NULL);
+    lv_imgbtn_set_src(ui_BackgroundImageBTN, LV_IMGBTN_STATE_PRESSED, NULL, &ui_img_tesla_model_3_png, NULL);
+    lv_imgbtn_set_src(ui_BackgroundImageBTN, LV_IMGBTN_STATE_DISABLED, NULL, &ui_img_tesla_model_3_png, NULL);
+
+    lv_obj_set_width(ui_BackgroundImageBTN, lv_pct(100));
+    lv_obj_set_height(ui_BackgroundImageBTN, lv_pct(100));
+
+    lv_obj_set_x(ui_BackgroundImageBTN, 0);
+    lv_obj_set_y(ui_BackgroundImageBTN, 0);
+
+    lv_obj_set_align(ui_BackgroundImageBTN, LV_ALIGN_CENTER);
+
+    lv_obj_add_event_cb(ui_BackgroundImageBTN, ui_event_BackgroundImageBTN, LV_EVENT_ALL, NULL);
+
+    // BOTTOM_PANEL
+
+    ui_BOTTOM_PANEL = lv_obj_create(ui_Screen1);
+
+    lv_obj_set_width(ui_BOTTOM_PANEL, 400);
+    lv_obj_set_height(ui_BOTTOM_PANEL, 50);
+
+    lv_obj_set_x(ui_BOTTOM_PANEL, 0);
+    lv_obj_set_y(ui_BOTTOM_PANEL, -20);
+
+    lv_obj_set_align(ui_BOTTOM_PANEL, LV_ALIGN_BOTTOM_MID);
+
+    lv_obj_clear_flag(ui_BOTTOM_PANEL, LV_OBJ_FLAG_SCROLLABLE);
+
+    lv_obj_set_style_bg_color(ui_BOTTOM_PANEL, lv_color_hex(0xFFFFFF), LV_PART_MAIN | LV_STATE_DEFAULT);
+    lv_obj_set_style_bg_opa(ui_BOTTOM_PANEL, 0, LV_PART_MAIN | LV_STATE_DEFAULT);
+    lv_obj_set_style_border_color(ui_BOTTOM_PANEL, lv_color_hex(0x000000), LV_PART_MAIN | LV_STATE_DEFAULT);
+    lv_obj_set_style_border_opa(ui_BOTTOM_PANEL, 0, LV_PART_MAIN | LV_STATE_DEFAULT);
+
+    // BTN_CUSTOM_ORDER
+
+    ui_BTN_CUSTOM_ORDER = lv_btn_create(ui_BOTTOM_PANEL);
+
+    lv_obj_set_width(ui_BTN_CUSTOM_ORDER, 160);
+    lv_obj_set_height(ui_BTN_CUSTOM_ORDER, 24);
+
+    lv_obj_set_x(ui_BTN_CUSTOM_ORDER, 0);
+    lv_obj_set_y(ui_BTN_CUSTOM_ORDER, 0);
+
+    lv_obj_set_align(ui_BTN_CUSTOM_ORDER, LV_ALIGN_LEFT_MID);
+
+    lv_obj_add_flag(ui_BTN_CUSTOM_ORDER, LV_OBJ_FLAG_SCROLL_ON_FOCUS);
+    lv_obj_clear_flag(ui_BTN_CUSTOM_ORDER, LV_OBJ_FLAG_SCROLLABLE);
+
+    lv_obj_add_event_cb(ui_BTN_CUSTOM_ORDER, ui_event_BTN_CUSTOM_ORDER, LV_EVENT_ALL, NULL);
+    lv_obj_set_style_bg_color(ui_BTN_CUSTOM_ORDER, lv_color_hex(0x373C3F), LV_PART_MAIN | LV_STATE_DEFAULT);
+    lv_obj_set_style_bg_opa(ui_BTN_CUSTOM_ORDER, 255, LV_PART_MAIN | LV_STATE_DEFAULT);
+
+    // LABEL_CUSTOM_ORDER
+
+    ui_LABEL_CUSTOM_ORDER = lv_label_create(ui_BTN_CUSTOM_ORDER);
+
+    lv_obj_set_width(ui_LABEL_CUSTOM_ORDER, LV_SIZE_CONTENT);
+    lv_obj_set_height(ui_LABEL_CUSTOM_ORDER, LV_SIZE_CONTENT);
+
+    lv_obj_set_x(ui_LABEL_CUSTOM_ORDER, 0);
+    lv_obj_set_y(ui_LABEL_CUSTOM_ORDER, 0);
+
+    lv_obj_set_align(ui_LABEL_CUSTOM_ORDER, LV_ALIGN_CENTER);
+
+    lv_label_set_text(ui_LABEL_CUSTOM_ORDER, "CUSTOM ORDER");
+
+    lv_obj_set_style_text_font(ui_LABEL_CUSTOM_ORDER, &lv_font_montserrat_10, LV_PART_MAIN | LV_STATE_DEFAULT);
+
+    // BTN_EXISTING_INVENTORY
+
+    ui_BTN_EXISTING_INVENTORY = lv_btn_create(ui_BOTTOM_PANEL);
+
+    lv_obj_set_width(ui_BTN_EXISTING_INVENTORY, 160);
+    lv_obj_set_height(ui_BTN_EXISTING_INVENTORY, 24);
+
+    lv_obj_set_x(ui_BTN_EXISTING_INVENTORY, 0);
+    lv_obj_set_y(ui_BTN_EXISTING_INVENTORY, 0);
+
+    lv_obj_set_align(ui_BTN_EXISTING_INVENTORY, LV_ALIGN_RIGHT_MID);
+
+    lv_obj_add_flag(ui_BTN_EXISTING_INVENTORY, LV_OBJ_FLAG_SCROLL_ON_FOCUS);
+    lv_obj_clear_flag(ui_BTN_EXISTING_INVENTORY, LV_OBJ_FLAG_SCROLLABLE);
+
+    lv_obj_set_style_bg_color(ui_BTN_EXISTING_INVENTORY, lv_color_hex(0xFFFFFF), LV_PART_MAIN | LV_STATE_DEFAULT);
+    lv_obj_set_style_bg_opa(ui_BTN_EXISTING_INVENTORY, 255, LV_PART_MAIN | LV_STATE_DEFAULT);
+
+    // LABEL_EXISTING_INVENTORY
+
+    ui_LABEL_EXISTING_INVENTORY = lv_label_create(ui_BTN_EXISTING_INVENTORY);
+
+    lv_obj_set_width(ui_LABEL_EXISTING_INVENTORY, LV_SIZE_CONTENT);
+    lv_obj_set_height(ui_LABEL_EXISTING_INVENTORY, LV_SIZE_CONTENT);
+
+    lv_obj_set_x(ui_LABEL_EXISTING_INVENTORY, 0);
+    lv_obj_set_y(ui_LABEL_EXISTING_INVENTORY, 0);
+
+    lv_obj_set_align(ui_LABEL_EXISTING_INVENTORY, LV_ALIGN_CENTER);
+
+    lv_label_set_text(ui_LABEL_EXISTING_INVENTORY, "EXISTING INVENTORY");
+
+    lv_obj_set_style_text_color(ui_LABEL_EXISTING_INVENTORY, lv_color_hex(0x000000), LV_PART_MAIN | LV_STATE_DEFAULT);
+    lv_obj_set_style_text_opa(ui_LABEL_EXISTING_INVENTORY, 255, LV_PART_MAIN | LV_STATE_DEFAULT);
+    lv_obj_set_style_text_font(ui_LABEL_EXISTING_INVENTORY, &lv_font_montserrat_10, LV_PART_MAIN | LV_STATE_DEFAULT);
+
+    // TITLE_HEADER
+
+    ui_TITLE_HEADER = lv_label_create(ui_Screen1);
+
+    lv_obj_set_width(ui_TITLE_HEADER, LV_SIZE_CONTENT);
+    lv_obj_set_height(ui_TITLE_HEADER, LV_SIZE_CONTENT);
+
+    lv_obj_set_x(ui_TITLE_HEADER, 0);
+    lv_obj_set_y(ui_TITLE_HEADER, 35);
+
+    lv_obj_set_align(ui_TITLE_HEADER, LV_ALIGN_TOP_MID);
+
+    lv_label_set_text(ui_TITLE_HEADER, "MODEL 3");
+
+    lv_obj_set_style_text_color(ui_TITLE_HEADER, lv_color_hex(0x000000), LV_PART_MAIN | LV_STATE_DEFAULT);
+    lv_obj_set_style_text_opa(ui_TITLE_HEADER, 255, LV_PART_MAIN | LV_STATE_DEFAULT);
+    lv_obj_set_style_text_font(ui_TITLE_HEADER, &lv_font_montserrat_20, LV_PART_MAIN | LV_STATE_DEFAULT);
+
+    // TITLE_SUB
+
+    ui_TITLE_SUB = lv_label_create(ui_Screen1);
+
+    lv_obj_set_width(ui_TITLE_SUB, LV_SIZE_CONTENT);
+    lv_obj_set_height(ui_TITLE_SUB, LV_SIZE_CONTENT);
+
+    lv_obj_set_x(ui_TITLE_SUB, 0);
+    lv_obj_set_y(ui_TITLE_SUB, 60);
+
+    lv_obj_set_align(ui_TITLE_SUB, LV_ALIGN_TOP_MID);
+
+    lv_label_set_text(ui_TITLE_SUB, "Order Online for Touchless Delivery");
+
+    lv_obj_set_style_text_color(ui_TITLE_SUB, lv_color_hex(0x000000), LV_PART_MAIN | LV_STATE_DEFAULT);
+    lv_obj_set_style_text_opa(ui_TITLE_SUB, 255, LV_PART_MAIN | LV_STATE_DEFAULT);
+    lv_obj_set_style_text_font(ui_TITLE_SUB, &lv_font_montserrat_10, LV_PART_MAIN | LV_STATE_DEFAULT);
+
+}
+void ui_Screen2_screen_init(void)
+{
+
+    // Screen2
+
+    ui_Screen2 = lv_obj_create(NULL);
+
+    lv_obj_clear_flag(ui_Screen2, LV_OBJ_FLAG_SCROLLABLE);
+
+    // BackgroundImageBTN1
+
+    ui_BackgroundImageBTN1 = lv_imgbtn_create(ui_Screen2);
+    lv_imgbtn_set_src(ui_BackgroundImageBTN1, LV_IMGBTN_STATE_RELEASED, NULL, &ui_img_tesla_model_y_png, NULL);
+    lv_imgbtn_set_src(ui_BackgroundImageBTN1, LV_IMGBTN_STATE_PRESSED, NULL, &ui_img_tesla_model_y_png, NULL);
+    lv_imgbtn_set_src(ui_BackgroundImageBTN1, LV_IMGBTN_STATE_DISABLED, NULL, &ui_img_tesla_model_y_png, NULL);
+
+    lv_obj_set_width(ui_BackgroundImageBTN1, lv_pct(100));
+    lv_obj_set_height(ui_BackgroundImageBTN1, lv_pct(100));
+
+    lv_obj_set_x(ui_BackgroundImageBTN1, 0);
+    lv_obj_set_y(ui_BackgroundImageBTN1, 0);
+
+    lv_obj_set_align(ui_BackgroundImageBTN1, LV_ALIGN_CENTER);
+
+    lv_obj_add_event_cb(ui_BackgroundImageBTN1, ui_event_BackgroundImageBTN1, LV_EVENT_ALL, NULL);
+
+    // BOTTOM_PANEL1
+
+    ui_BOTTOM_PANEL1 = lv_obj_create(ui_Screen2);
+
+    lv_obj_set_width(ui_BOTTOM_PANEL1, 400);
+    lv_obj_set_height(ui_BOTTOM_PANEL1, 50);
+
+    lv_obj_set_x(ui_BOTTOM_PANEL1, 0);
+    lv_obj_set_y(ui_BOTTOM_PANEL1, -20);
+
+    lv_obj_set_align(ui_BOTTOM_PANEL1, LV_ALIGN_BOTTOM_MID);
+
+    lv_obj_clear_flag(ui_BOTTOM_PANEL1, LV_OBJ_FLAG_SCROLLABLE);
+
+    lv_obj_set_style_bg_color(ui_BOTTOM_PANEL1, lv_color_hex(0xFFFFFF), LV_PART_MAIN | LV_STATE_DEFAULT);
+    lv_obj_set_style_bg_opa(ui_BOTTOM_PANEL1, 0, LV_PART_MAIN | LV_STATE_DEFAULT);
+    lv_obj_set_style_border_color(ui_BOTTOM_PANEL1, lv_color_hex(0x000000), LV_PART_MAIN | LV_STATE_DEFAULT);
+    lv_obj_set_style_border_opa(ui_BOTTOM_PANEL1, 0, LV_PART_MAIN | LV_STATE_DEFAULT);
+
+    // BTN_CUSTOM_ORDER1
+
+    ui_BTN_CUSTOM_ORDER1 = lv_btn_create(ui_BOTTOM_PANEL1);
+
+    lv_obj_set_width(ui_BTN_CUSTOM_ORDER1, 160);
+    lv_obj_set_height(ui_BTN_CUSTOM_ORDER1, 24);
+
+    lv_obj_set_x(ui_BTN_CUSTOM_ORDER1, 0);
+    lv_obj_set_y(ui_BTN_CUSTOM_ORDER1, 0);
+
+    lv_obj_set_align(ui_BTN_CUSTOM_ORDER1, LV_ALIGN_LEFT_MID);
+
+    lv_obj_add_flag(ui_BTN_CUSTOM_ORDER1, LV_OBJ_FLAG_SCROLL_ON_FOCUS);
+    lv_obj_clear_flag(ui_BTN_CUSTOM_ORDER1, LV_OBJ_FLAG_SCROLLABLE);
+
+    lv_obj_add_event_cb(ui_BTN_CUSTOM_ORDER1, ui_event_BTN_CUSTOM_ORDER1, LV_EVENT_ALL, NULL);
+    lv_obj_set_style_bg_color(ui_BTN_CUSTOM_ORDER1, lv_color_hex(0x373C3F), LV_PART_MAIN | LV_STATE_DEFAULT);
+    lv_obj_set_style_bg_opa(ui_BTN_CUSTOM_ORDER1, 255, LV_PART_MAIN | LV_STATE_DEFAULT);
+
+    // LABEL_CUSTOM_ORDER1
+
+    ui_LABEL_CUSTOM_ORDER1 = lv_label_create(ui_BTN_CUSTOM_ORDER1);
+
+    lv_obj_set_width(ui_LABEL_CUSTOM_ORDER1, LV_SIZE_CONTENT);
+    lv_obj_set_height(ui_LABEL_CUSTOM_ORDER1, LV_SIZE_CONTENT);
+
+    lv_obj_set_x(ui_LABEL_CUSTOM_ORDER1, 0);
+    lv_obj_set_y(ui_LABEL_CUSTOM_ORDER1, 0);
+
+    lv_obj_set_align(ui_LABEL_CUSTOM_ORDER1, LV_ALIGN_CENTER);
+
+    lv_label_set_text(ui_LABEL_CUSTOM_ORDER1, "CUSTOM ORDER");
+
+    lv_obj_set_style_text_font(ui_LABEL_CUSTOM_ORDER1, &lv_font_montserrat_10, LV_PART_MAIN | LV_STATE_DEFAULT);
+
+    // BTN_EXISTING_INVENTORY1
+
+    ui_BTN_EXISTING_INVENTORY1 = lv_btn_create(ui_BOTTOM_PANEL1);
+
+    lv_obj_set_width(ui_BTN_EXISTING_INVENTORY1, 160);
+    lv_obj_set_height(ui_BTN_EXISTING_INVENTORY1, 24);
+
+    lv_obj_set_x(ui_BTN_EXISTING_INVENTORY1, 0);
+    lv_obj_set_y(ui_BTN_EXISTING_INVENTORY1, 0);
+
+    lv_obj_set_align(ui_BTN_EXISTING_INVENTORY1, LV_ALIGN_RIGHT_MID);
+
+    lv_obj_add_flag(ui_BTN_EXISTING_INVENTORY1, LV_OBJ_FLAG_SCROLL_ON_FOCUS);
+    lv_obj_clear_flag(ui_BTN_EXISTING_INVENTORY1, LV_OBJ_FLAG_SCROLLABLE);
+
+    lv_obj_set_style_bg_color(ui_BTN_EXISTING_INVENTORY1, lv_color_hex(0xFFFFFF), LV_PART_MAIN | LV_STATE_DEFAULT);
+    lv_obj_set_style_bg_opa(ui_BTN_EXISTING_INVENTORY1, 255, LV_PART_MAIN | LV_STATE_DEFAULT);
+
+    // LABEL_EXISTING_INVENTORY1
+
+    ui_LABEL_EXISTING_INVENTORY1 = lv_label_create(ui_BTN_EXISTING_INVENTORY1);
+
+    lv_obj_set_width(ui_LABEL_EXISTING_INVENTORY1, LV_SIZE_CONTENT);
+    lv_obj_set_height(ui_LABEL_EXISTING_INVENTORY1, LV_SIZE_CONTENT);
+
+    lv_obj_set_x(ui_LABEL_EXISTING_INVENTORY1, 0);
+    lv_obj_set_y(ui_LABEL_EXISTING_INVENTORY1, 0);
+
+    lv_obj_set_align(ui_LABEL_EXISTING_INVENTORY1, LV_ALIGN_CENTER);
+
+    lv_label_set_text(ui_LABEL_EXISTING_INVENTORY1, "EXISTING INVENTORY");
+
+    lv_obj_set_style_text_color(ui_LABEL_EXISTING_INVENTORY1, lv_color_hex(0x000000), LV_PART_MAIN | LV_STATE_DEFAULT);
+    lv_obj_set_style_text_opa(ui_LABEL_EXISTING_INVENTORY1, 255, LV_PART_MAIN | LV_STATE_DEFAULT);
+    lv_obj_set_style_text_font(ui_LABEL_EXISTING_INVENTORY1, &lv_font_montserrat_10, LV_PART_MAIN | LV_STATE_DEFAULT);
+
+    // TITLE_HEADER1
+
+    ui_TITLE_HEADER1 = lv_label_create(ui_Screen2);
+
+    lv_obj_set_width(ui_TITLE_HEADER1, LV_SIZE_CONTENT);
+    lv_obj_set_height(ui_TITLE_HEADER1, LV_SIZE_CONTENT);
+
+    lv_obj_set_x(ui_TITLE_HEADER1, 0);
+    lv_obj_set_y(ui_TITLE_HEADER1, 35);
+
+    lv_obj_set_align(ui_TITLE_HEADER1, LV_ALIGN_TOP_MID);
+
+    lv_label_set_text(ui_TITLE_HEADER1, "MODEL Y");
+
+    lv_obj_set_style_text_color(ui_TITLE_HEADER1, lv_color_hex(0x000000), LV_PART_MAIN | LV_STATE_DEFAULT);
+    lv_obj_set_style_text_opa(ui_TITLE_HEADER1, 255, LV_PART_MAIN | LV_STATE_DEFAULT);
+    lv_obj_set_style_text_font(ui_TITLE_HEADER1, &lv_font_montserrat_20, LV_PART_MAIN | LV_STATE_DEFAULT);
+
+    // TITLE_SUB1
+
+    ui_TITLE_SUB1 = lv_label_create(ui_Screen2);
+
+    lv_obj_set_width(ui_TITLE_SUB1, LV_SIZE_CONTENT);
+    lv_obj_set_height(ui_TITLE_SUB1, LV_SIZE_CONTENT);
+
+    lv_obj_set_x(ui_TITLE_SUB1, 0);
+    lv_obj_set_y(ui_TITLE_SUB1, 60);
+
+    lv_obj_set_align(ui_TITLE_SUB1, LV_ALIGN_TOP_MID);
+
+    lv_label_set_text(ui_TITLE_SUB1, "Order Online for Touchless Delivery");
+
+    lv_obj_set_style_text_color(ui_TITLE_SUB1, lv_color_hex(0x000000), LV_PART_MAIN | LV_STATE_DEFAULT);
+    lv_obj_set_style_text_opa(ui_TITLE_SUB1, 255, LV_PART_MAIN | LV_STATE_DEFAULT);
+    lv_obj_set_style_text_font(ui_TITLE_SUB1, &lv_font_montserrat_10, LV_PART_MAIN | LV_STATE_DEFAULT);
+
+}
+void ui_Screen3_screen_init(void)
+{
+
+    // Screen3
+
+    ui_Screen3 = lv_obj_create(NULL);
+
+    lv_obj_clear_flag(ui_Screen3, LV_OBJ_FLAG_SCROLLABLE);
+
+    // BackgroundImageBTN2
+
+    ui_BackgroundImageBTN2 = lv_imgbtn_create(ui_Screen3);
+    lv_imgbtn_set_src(ui_BackgroundImageBTN2, LV_IMGBTN_STATE_RELEASED, NULL, &ui_img_tesla_model_s_png, NULL);
+    lv_imgbtn_set_src(ui_BackgroundImageBTN2, LV_IMGBTN_STATE_PRESSED, NULL, &ui_img_tesla_model_s_png, NULL);
+    lv_imgbtn_set_src(ui_BackgroundImageBTN2, LV_IMGBTN_STATE_DISABLED, NULL, &ui_img_tesla_model_s_png, NULL);
+
+    lv_obj_set_width(ui_BackgroundImageBTN2, lv_pct(100));
+    lv_obj_set_height(ui_BackgroundImageBTN2, lv_pct(100));
+
+    lv_obj_set_x(ui_BackgroundImageBTN2, 0);
+    lv_obj_set_y(ui_BackgroundImageBTN2, 0);
+
+    lv_obj_set_align(ui_BackgroundImageBTN2, LV_ALIGN_CENTER);
+
+    lv_obj_add_event_cb(ui_BackgroundImageBTN2, ui_event_BackgroundImageBTN2, LV_EVENT_ALL, NULL);
+
+    // BOTTOM_PANEL2
+
+    ui_BOTTOM_PANEL2 = lv_obj_create(ui_Screen3);
+
+    lv_obj_set_width(ui_BOTTOM_PANEL2, 400);
+    lv_obj_set_height(ui_BOTTOM_PANEL2, 50);
+
+    lv_obj_set_x(ui_BOTTOM_PANEL2, 0);
+    lv_obj_set_y(ui_BOTTOM_PANEL2, -20);
+
+    lv_obj_set_align(ui_BOTTOM_PANEL2, LV_ALIGN_BOTTOM_MID);
+
+    lv_obj_clear_flag(ui_BOTTOM_PANEL2, LV_OBJ_FLAG_SCROLLABLE);
+
+    lv_obj_set_style_bg_color(ui_BOTTOM_PANEL2, lv_color_hex(0xFFFFFF), LV_PART_MAIN | LV_STATE_DEFAULT);
+    lv_obj_set_style_bg_opa(ui_BOTTOM_PANEL2, 0, LV_PART_MAIN | LV_STATE_DEFAULT);
+    lv_obj_set_style_border_color(ui_BOTTOM_PANEL2, lv_color_hex(0x000000), LV_PART_MAIN | LV_STATE_DEFAULT);
+    lv_obj_set_style_border_opa(ui_BOTTOM_PANEL2, 0, LV_PART_MAIN | LV_STATE_DEFAULT);
+
+    // BTN_CUSTOM_ORDER2
+
+    ui_BTN_CUSTOM_ORDER2 = lv_btn_create(ui_BOTTOM_PANEL2);
+
+    lv_obj_set_width(ui_BTN_CUSTOM_ORDER2, 160);
+    lv_obj_set_height(ui_BTN_CUSTOM_ORDER2, 24);
+
+    lv_obj_set_x(ui_BTN_CUSTOM_ORDER2, 0);
+    lv_obj_set_y(ui_BTN_CUSTOM_ORDER2, 0);
+
+    lv_obj_set_align(ui_BTN_CUSTOM_ORDER2, LV_ALIGN_LEFT_MID);
+
+    lv_obj_add_flag(ui_BTN_CUSTOM_ORDER2, LV_OBJ_FLAG_SCROLL_ON_FOCUS);
+    lv_obj_clear_flag(ui_BTN_CUSTOM_ORDER2, LV_OBJ_FLAG_SCROLLABLE);
+
+    lv_obj_add_event_cb(ui_BTN_CUSTOM_ORDER2, ui_event_BTN_CUSTOM_ORDER2, LV_EVENT_ALL, NULL);
+    lv_obj_set_style_bg_color(ui_BTN_CUSTOM_ORDER2, lv_color_hex(0x373C3F), LV_PART_MAIN | LV_STATE_DEFAULT);
+    lv_obj_set_style_bg_opa(ui_BTN_CUSTOM_ORDER2, 255, LV_PART_MAIN | LV_STATE_DEFAULT);
+
+    // LABEL_CUSTOM_ORDER2
+
+    ui_LABEL_CUSTOM_ORDER2 = lv_label_create(ui_BTN_CUSTOM_ORDER2);
+
+    lv_obj_set_width(ui_LABEL_CUSTOM_ORDER2, LV_SIZE_CONTENT);
+    lv_obj_set_height(ui_LABEL_CUSTOM_ORDER2, LV_SIZE_CONTENT);
+
+    lv_obj_set_x(ui_LABEL_CUSTOM_ORDER2, 0);
+    lv_obj_set_y(ui_LABEL_CUSTOM_ORDER2, 0);
+
+    lv_obj_set_align(ui_LABEL_CUSTOM_ORDER2, LV_ALIGN_CENTER);
+
+    lv_label_set_text(ui_LABEL_CUSTOM_ORDER2, "CUSTOM ORDER");
+
+    lv_obj_set_style_text_font(ui_LABEL_CUSTOM_ORDER2, &lv_font_montserrat_10, LV_PART_MAIN | LV_STATE_DEFAULT);
+
+    // BTN_EXISTING_INVENTORY2
+
+    ui_BTN_EXISTING_INVENTORY2 = lv_btn_create(ui_BOTTOM_PANEL2);
+
+    lv_obj_set_width(ui_BTN_EXISTING_INVENTORY2, 160);
+    lv_obj_set_height(ui_BTN_EXISTING_INVENTORY2, 24);
+
+    lv_obj_set_x(ui_BTN_EXISTING_INVENTORY2, 0);
+    lv_obj_set_y(ui_BTN_EXISTING_INVENTORY2, 0);
+
+    lv_obj_set_align(ui_BTN_EXISTING_INVENTORY2, LV_ALIGN_RIGHT_MID);
+
+    lv_obj_add_flag(ui_BTN_EXISTING_INVENTORY2, LV_OBJ_FLAG_SCROLL_ON_FOCUS);
+    lv_obj_clear_flag(ui_BTN_EXISTING_INVENTORY2, LV_OBJ_FLAG_SCROLLABLE);
+
+    lv_obj_set_style_bg_color(ui_BTN_EXISTING_INVENTORY2, lv_color_hex(0xFFFFFF), LV_PART_MAIN | LV_STATE_DEFAULT);
+    lv_obj_set_style_bg_opa(ui_BTN_EXISTING_INVENTORY2, 255, LV_PART_MAIN | LV_STATE_DEFAULT);
+
+    // LABEL_EXISTING_INVENTORY2
+
+    ui_LABEL_EXISTING_INVENTORY2 = lv_label_create(ui_BTN_EXISTING_INVENTORY2);
+
+    lv_obj_set_width(ui_LABEL_EXISTING_INVENTORY2, LV_SIZE_CONTENT);
+    lv_obj_set_height(ui_LABEL_EXISTING_INVENTORY2, LV_SIZE_CONTENT);
+
+    lv_obj_set_x(ui_LABEL_EXISTING_INVENTORY2, 0);
+    lv_obj_set_y(ui_LABEL_EXISTING_INVENTORY2, 0);
+
+    lv_obj_set_align(ui_LABEL_EXISTING_INVENTORY2, LV_ALIGN_CENTER);
+
+    lv_label_set_text(ui_LABEL_EXISTING_INVENTORY2, "EXISTING INVENTORY");
+
+    lv_obj_set_style_text_color(ui_LABEL_EXISTING_INVENTORY2, lv_color_hex(0x000000), LV_PART_MAIN | LV_STATE_DEFAULT);
+    lv_obj_set_style_text_opa(ui_LABEL_EXISTING_INVENTORY2, 255, LV_PART_MAIN | LV_STATE_DEFAULT);
+    lv_obj_set_style_text_font(ui_LABEL_EXISTING_INVENTORY2, &lv_font_montserrat_10, LV_PART_MAIN | LV_STATE_DEFAULT);
+
+    // TITLE_HEADER2
+
+    ui_TITLE_HEADER2 = lv_label_create(ui_Screen3);
+
+    lv_obj_set_width(ui_TITLE_HEADER2, LV_SIZE_CONTENT);
+    lv_obj_set_height(ui_TITLE_HEADER2, LV_SIZE_CONTENT);
+
+    lv_obj_set_x(ui_TITLE_HEADER2, 0);
+    lv_obj_set_y(ui_TITLE_HEADER2, 35);
+
+    lv_obj_set_align(ui_TITLE_HEADER2, LV_ALIGN_TOP_MID);
+
+    lv_label_set_text(ui_TITLE_HEADER2, "MODEL S");
+
+    lv_obj_set_style_text_color(ui_TITLE_HEADER2, lv_color_hex(0x000000), LV_PART_MAIN | LV_STATE_DEFAULT);
+    lv_obj_set_style_text_opa(ui_TITLE_HEADER2, 255, LV_PART_MAIN | LV_STATE_DEFAULT);
+    lv_obj_set_style_text_font(ui_TITLE_HEADER2, &lv_font_montserrat_20, LV_PART_MAIN | LV_STATE_DEFAULT);
+
+    // TITLE_SUB2
+
+    ui_TITLE_SUB2 = lv_label_create(ui_Screen3);
+
+    lv_obj_set_width(ui_TITLE_SUB2, LV_SIZE_CONTENT);
+    lv_obj_set_height(ui_TITLE_SUB2, LV_SIZE_CONTENT);
+
+    lv_obj_set_x(ui_TITLE_SUB2, 0);
+    lv_obj_set_y(ui_TITLE_SUB2, 60);
+
+    lv_obj_set_align(ui_TITLE_SUB2, LV_ALIGN_TOP_MID);
+
+    lv_label_set_text(ui_TITLE_SUB2, "Order Online for Touchless Delivery");
+
+    lv_obj_set_style_text_color(ui_TITLE_SUB2, lv_color_hex(0x000000), LV_PART_MAIN | LV_STATE_DEFAULT);
+    lv_obj_set_style_text_opa(ui_TITLE_SUB2, 255, LV_PART_MAIN | LV_STATE_DEFAULT);
+    lv_obj_set_style_text_font(ui_TITLE_SUB2, &lv_font_montserrat_10, LV_PART_MAIN | LV_STATE_DEFAULT);
+
+}
+void ui_Screen4_screen_init(void)
+{
+
+    // Screen4
+
+    ui_Screen4 = lv_obj_create(NULL);
+
+    lv_obj_clear_flag(ui_Screen4, LV_OBJ_FLAG_SCROLLABLE);
+
+    // BackgroundImageBTN3
+
+    ui_BackgroundImageBTN3 = lv_imgbtn_create(ui_Screen4);
+    lv_imgbtn_set_src(ui_BackgroundImageBTN3, LV_IMGBTN_STATE_RELEASED, NULL, &ui_img_tesla_model_x_png, NULL);
+    lv_imgbtn_set_src(ui_BackgroundImageBTN3, LV_IMGBTN_STATE_PRESSED, NULL, &ui_img_tesla_model_x_png, NULL);
+    lv_imgbtn_set_src(ui_BackgroundImageBTN3, LV_IMGBTN_STATE_DISABLED, NULL, &ui_img_tesla_model_x_png, NULL);
+
+    lv_obj_set_width(ui_BackgroundImageBTN3, lv_pct(100));
+    lv_obj_set_height(ui_BackgroundImageBTN3, lv_pct(100));
+
+    lv_obj_set_x(ui_BackgroundImageBTN3, 0);
+    lv_obj_set_y(ui_BackgroundImageBTN3, 0);
+
+    lv_obj_set_align(ui_BackgroundImageBTN3, LV_ALIGN_CENTER);
+
+    lv_obj_add_event_cb(ui_BackgroundImageBTN3, ui_event_BackgroundImageBTN3, LV_EVENT_ALL, NULL);
+
+    // BOTTOM_PANEL3
+
+    ui_BOTTOM_PANEL3 = lv_obj_create(ui_Screen4);
+
+    lv_obj_set_width(ui_BOTTOM_PANEL3, 400);
+    lv_obj_set_height(ui_BOTTOM_PANEL3, 50);
+
+    lv_obj_set_x(ui_BOTTOM_PANEL3, 0);
+    lv_obj_set_y(ui_BOTTOM_PANEL3, -20);
+
+    lv_obj_set_align(ui_BOTTOM_PANEL3, LV_ALIGN_BOTTOM_MID);
+
+    lv_obj_clear_flag(ui_BOTTOM_PANEL3, LV_OBJ_FLAG_SCROLLABLE);
+
+    lv_obj_set_style_bg_color(ui_BOTTOM_PANEL3, lv_color_hex(0xFFFFFF), LV_PART_MAIN | LV_STATE_DEFAULT);
+    lv_obj_set_style_bg_opa(ui_BOTTOM_PANEL3, 0, LV_PART_MAIN | LV_STATE_DEFAULT);
+    lv_obj_set_style_border_color(ui_BOTTOM_PANEL3, lv_color_hex(0x000000), LV_PART_MAIN | LV_STATE_DEFAULT);
+    lv_obj_set_style_border_opa(ui_BOTTOM_PANEL3, 0, LV_PART_MAIN | LV_STATE_DEFAULT);
+
+    // BTN_CUSTOM_ORDER3
+
+    ui_BTN_CUSTOM_ORDER3 = lv_btn_create(ui_BOTTOM_PANEL3);
+
+    lv_obj_set_width(ui_BTN_CUSTOM_ORDER3, 160);
+    lv_obj_set_height(ui_BTN_CUSTOM_ORDER3, 24);
+
+    lv_obj_set_x(ui_BTN_CUSTOM_ORDER3, 0);
+    lv_obj_set_y(ui_BTN_CUSTOM_ORDER3, 0);
+
+    lv_obj_set_align(ui_BTN_CUSTOM_ORDER3, LV_ALIGN_LEFT_MID);
+
+    lv_obj_add_flag(ui_BTN_CUSTOM_ORDER3, LV_OBJ_FLAG_SCROLL_ON_FOCUS);
+    lv_obj_clear_flag(ui_BTN_CUSTOM_ORDER3, LV_OBJ_FLAG_SCROLLABLE);
+
+    lv_obj_add_event_cb(ui_BTN_CUSTOM_ORDER3, ui_event_BTN_CUSTOM_ORDER3, LV_EVENT_ALL, NULL);
+    lv_obj_set_style_bg_color(ui_BTN_CUSTOM_ORDER3, lv_color_hex(0x373C3F), LV_PART_MAIN | LV_STATE_DEFAULT);
+    lv_obj_set_style_bg_opa(ui_BTN_CUSTOM_ORDER3, 255, LV_PART_MAIN | LV_STATE_DEFAULT);
+
+    // LABEL_CUSTOM_ORDER3
+
+    ui_LABEL_CUSTOM_ORDER3 = lv_label_create(ui_BTN_CUSTOM_ORDER3);
+
+    lv_obj_set_width(ui_LABEL_CUSTOM_ORDER3, LV_SIZE_CONTENT);
+    lv_obj_set_height(ui_LABEL_CUSTOM_ORDER3, LV_SIZE_CONTENT);
+
+    lv_obj_set_x(ui_LABEL_CUSTOM_ORDER3, 0);
+    lv_obj_set_y(ui_LABEL_CUSTOM_ORDER3, 0);
+
+    lv_obj_set_align(ui_LABEL_CUSTOM_ORDER3, LV_ALIGN_CENTER);
+
+    lv_label_set_text(ui_LABEL_CUSTOM_ORDER3, "CUSTOM ORDER");
+
+    lv_obj_set_style_text_font(ui_LABEL_CUSTOM_ORDER3, &lv_font_montserrat_10, LV_PART_MAIN | LV_STATE_DEFAULT);
+
+    // BTN_EXISTING_INVENTORY3
+
+    ui_BTN_EXISTING_INVENTORY3 = lv_btn_create(ui_BOTTOM_PANEL3);
+
+    lv_obj_set_width(ui_BTN_EXISTING_INVENTORY3, 160);
+    lv_obj_set_height(ui_BTN_EXISTING_INVENTORY3, 24);
+
+    lv_obj_set_x(ui_BTN_EXISTING_INVENTORY3, 0);
+    lv_obj_set_y(ui_BTN_EXISTING_INVENTORY3, 0);
+
+    lv_obj_set_align(ui_BTN_EXISTING_INVENTORY3, LV_ALIGN_RIGHT_MID);
+
+    lv_obj_add_flag(ui_BTN_EXISTING_INVENTORY3, LV_OBJ_FLAG_SCROLL_ON_FOCUS);
+    lv_obj_clear_flag(ui_BTN_EXISTING_INVENTORY3, LV_OBJ_FLAG_SCROLLABLE);
+
+    lv_obj_set_style_bg_color(ui_BTN_EXISTING_INVENTORY3, lv_color_hex(0xFFFFFF), LV_PART_MAIN | LV_STATE_DEFAULT);
+    lv_obj_set_style_bg_opa(ui_BTN_EXISTING_INVENTORY3, 255, LV_PART_MAIN | LV_STATE_DEFAULT);
+
+    // LABEL_EXISTING_INVENTORY3
+
+    ui_LABEL_EXISTING_INVENTORY3 = lv_label_create(ui_BTN_EXISTING_INVENTORY3);
+
+    lv_obj_set_width(ui_LABEL_EXISTING_INVENTORY3, LV_SIZE_CONTENT);
+    lv_obj_set_height(ui_LABEL_EXISTING_INVENTORY3, LV_SIZE_CONTENT);
+
+    lv_obj_set_x(ui_LABEL_EXISTING_INVENTORY3, 0);
+    lv_obj_set_y(ui_LABEL_EXISTING_INVENTORY3, 0);
+
+    lv_obj_set_align(ui_LABEL_EXISTING_INVENTORY3, LV_ALIGN_CENTER);
+
+    lv_label_set_text(ui_LABEL_EXISTING_INVENTORY3, "EXISTING INVENTORY");
+
+    lv_obj_set_style_text_color(ui_LABEL_EXISTING_INVENTORY3, lv_color_hex(0x000000), LV_PART_MAIN | LV_STATE_DEFAULT);
+    lv_obj_set_style_text_opa(ui_LABEL_EXISTING_INVENTORY3, 255, LV_PART_MAIN | LV_STATE_DEFAULT);
+    lv_obj_set_style_text_font(ui_LABEL_EXISTING_INVENTORY3, &lv_font_montserrat_10, LV_PART_MAIN | LV_STATE_DEFAULT);
+
+    // TITLE_HEADER3
+
+    ui_TITLE_HEADER3 = lv_label_create(ui_Screen4);
+
+    lv_obj_set_width(ui_TITLE_HEADER3, LV_SIZE_CONTENT);
+    lv_obj_set_height(ui_TITLE_HEADER3, LV_SIZE_CONTENT);
+
+    lv_obj_set_x(ui_TITLE_HEADER3, 0);
+    lv_obj_set_y(ui_TITLE_HEADER3, 35);
+
+    lv_obj_set_align(ui_TITLE_HEADER3, LV_ALIGN_TOP_MID);
+
+    lv_label_set_text(ui_TITLE_HEADER3, "MODEL X");
+
+    lv_obj_set_style_text_color(ui_TITLE_HEADER3, lv_color_hex(0x000000), LV_PART_MAIN | LV_STATE_DEFAULT);
+    lv_obj_set_style_text_opa(ui_TITLE_HEADER3, 255, LV_PART_MAIN | LV_STATE_DEFAULT);
+    lv_obj_set_style_text_font(ui_TITLE_HEADER3, &lv_font_montserrat_20, LV_PART_MAIN | LV_STATE_DEFAULT);
+
+    // TITLE_SUB3
+
+    ui_TITLE_SUB3 = lv_label_create(ui_Screen4);
+
+    lv_obj_set_width(ui_TITLE_SUB3, LV_SIZE_CONTENT);
+    lv_obj_set_height(ui_TITLE_SUB3, LV_SIZE_CONTENT);
+
+    lv_obj_set_x(ui_TITLE_SUB3, 0);
+    lv_obj_set_y(ui_TITLE_SUB3, 60);
+
+    lv_obj_set_align(ui_TITLE_SUB3, LV_ALIGN_TOP_MID);
+
+    lv_label_set_text(ui_TITLE_SUB3, "Order Online for Touchless Delivery");
+
+    lv_obj_set_style_text_color(ui_TITLE_SUB3, lv_color_hex(0x000000), LV_PART_MAIN | LV_STATE_DEFAULT);
+    lv_obj_set_style_text_opa(ui_TITLE_SUB3, 255, LV_PART_MAIN | LV_STATE_DEFAULT);
+    lv_obj_set_style_text_font(ui_TITLE_SUB3, &lv_font_montserrat_10, LV_PART_MAIN | LV_STATE_DEFAULT);
+
+}
+
+void ui_init(void)
+{
+    ui_Screen1_screen_init();
+    ui_Screen2_screen_init();
+    ui_Screen3_screen_init();
+    ui_Screen4_screen_init();
+    lv_disp_load_scr(ui_Screen1);
+}
+

ESP32_LVGL/LVGL8_SquareLine/02_Tesla_Multi_Pages/ui.h

@@ -0,0 +1,67 @@
+// SquareLine LVGL GENERATED FILE
+// EDITOR VERSION: SquareLine Studio 1.0.2
+// LVGL VERSION: 8.2
+// PROJECT: Tesla_Multi_Pages
+
+#ifndef _TESLA_MULTI_PAGES_UI_H
+#define _TESLA_MULTI_PAGES_UI_H
+
+#ifdef __cplusplus
+extern "C" {
+#endif
+
+#include "lvgl.h"
+
+extern lv_obj_t * ui_Screen1;
+extern lv_obj_t * ui_BackgroundImageBTN;
+extern lv_obj_t * ui_BOTTOM_PANEL;
+extern lv_obj_t * ui_BTN_CUSTOM_ORDER;
+extern lv_obj_t * ui_LABEL_CUSTOM_ORDER;
+extern lv_obj_t * ui_BTN_EXISTING_INVENTORY;
+extern lv_obj_t * ui_LABEL_EXISTING_INVENTORY;
+extern lv_obj_t * ui_TITLE_HEADER;
+extern lv_obj_t * ui_TITLE_SUB;
+extern lv_obj_t * ui_Screen2;
+extern lv_obj_t * ui_BackgroundImageBTN1;
+extern lv_obj_t * ui_BOTTOM_PANEL1;
+extern lv_obj_t * ui_BTN_CUSTOM_ORDER1;
+extern lv_obj_t * ui_LABEL_CUSTOM_ORDER1;
+extern lv_obj_t * ui_BTN_EXISTING_INVENTORY1;
+extern lv_obj_t * ui_LABEL_EXISTING_INVENTORY1;
+extern lv_obj_t * ui_TITLE_HEADER1;
+extern lv_obj_t * ui_TITLE_SUB1;
+extern lv_obj_t * ui_Screen3;
+extern lv_obj_t * ui_BackgroundImageBTN2;
+extern lv_obj_t * ui_BOTTOM_PANEL2;
+extern lv_obj_t * ui_BTN_CUSTOM_ORDER2;
+extern lv_obj_t * ui_LABEL_CUSTOM_ORDER2;
+extern lv_obj_t * ui_BTN_EXISTING_INVENTORY2;
+extern lv_obj_t * ui_LABEL_EXISTING_INVENTORY2;
+extern lv_obj_t * ui_TITLE_HEADER2;
+extern lv_obj_t * ui_TITLE_SUB2;
+extern lv_obj_t * ui_Screen4;
+extern lv_obj_t * ui_BackgroundImageBTN3;
+extern lv_obj_t * ui_BOTTOM_PANEL3;
+extern lv_obj_t * ui_BTN_CUSTOM_ORDER3;
+extern lv_obj_t * ui_LABEL_CUSTOM_ORDER3;
+extern lv_obj_t * ui_BTN_EXISTING_INVENTORY3;
+extern lv_obj_t * ui_LABEL_EXISTING_INVENTORY3;
+extern lv_obj_t * ui_TITLE_HEADER3;
+extern lv_obj_t * ui_TITLE_SUB3;
+
+
+LV_IMG_DECLARE(ui_img_tesla_model_3_png);    // assets\tesla_model_3.png
+LV_IMG_DECLARE(ui_img_tesla_model_y_png);    // assets\tesla_model_y.png
+LV_IMG_DECLARE(ui_img_tesla_model_s_png);    // assets\tesla_model_s.png
+LV_IMG_DECLARE(ui_img_tesla_model_x_png);    // assets\tesla_model_x.png
+
+
+
+
+void ui_init(void);
+
+#ifdef __cplusplus
+} /*extern "C"*/
+#endif
+
+#endif

ESP32_LVGL/LVGL8_SquareLine/02_Tesla_Multi_Pages/ui_helpers.c

@@ -0,0 +1,186 @@
+// SquareLine LVGL GENERATED FILE
+// EDITOR VERSION: SquareLine Studio 1.0.2
+// LVGL VERSION: 8.2
+// PROJECT: Tesla_Multi_Pages
+
+#include "ui_helpers.h"
+
+void _ui_bar_set_property(lv_obj_t * target, int id, int val)
+{
+    if(id == _UI_BAR_PROPERTY_VALUE_WITH_ANIM) lv_bar_set_value(target, val, LV_ANIM_ON);
+    if(id == _UI_BAR_PROPERTY_VALUE) lv_bar_set_value(target, val, LV_ANIM_OFF);
+}
+
+void _ui_basic_set_property(lv_obj_t * target, int id, int val)
+{
+    if(id == _UI_BASIC_PROPERTY_POSITION_X) lv_obj_set_x(target, val);
+    if(id == _UI_BASIC_PROPERTY_POSITION_Y) lv_obj_set_y(target, val);
+    if(id == _UI_BASIC_PROPERTY_WIDTH) lv_obj_set_width(target, val);
+    if(id == _UI_BASIC_PROPERTY_HEIGHT) lv_obj_set_height(target, val);
+}
+
+
+void _ui_dropdown_set_property(lv_obj_t * target, int id, int val)
+{
+    if(id == _UI_DROPDOWN_PROPERTY_SELECTED) lv_dropdown_set_selected(target, val);
+}
+
+void _ui_image_set_property(lv_obj_t * target, int id, uint8_t * val)
+{
+    if(id == _UI_IMAGE_PROPERTY_IMAGE) lv_img_set_src(target, val);
+}
+
+void _ui_label_set_property(lv_obj_t * target, int id, char * val)
+{
+    if(id == _UI_LABEL_PROPERTY_TEXT) lv_label_set_text(target, val);
+}
+
+
+void _ui_roller_set_property(lv_obj_t * target, int id, int val)
+{
+    if(id == _UI_ROLLER_PROPERTY_SELECTED_WITH_ANIM) lv_roller_set_selected(target, val, LV_ANIM_ON);
+    if(id == _UI_ROLLER_PROPERTY_SELECTED) lv_roller_set_selected(target, val, LV_ANIM_OFF);
+}
+
+void _ui_slider_set_property(lv_obj_t * target, int id, int val)
+{
+    if(id == _UI_SLIDER_PROPERTY_VALUE_WITH_ANIM) lv_slider_set_value(target, val, LV_ANIM_ON);
+    if(id == _UI_SLIDER_PROPERTY_VALUE) lv_slider_set_value(target, val, LV_ANIM_OFF);
+}
+
+
+void _ui_screen_change(lv_obj_t * target, lv_scr_load_anim_t fademode, int spd, int delay)
+{
+    lv_scr_load_anim(target, fademode, spd, delay, false);
+}
+
+void _ui_arc_increment(lv_obj_t * target, lv_scr_load_anim_t fademode, int spd, int delay)
+{
+    lv_scr_load_anim(target, fademode, spd, delay, false);
+}
+
+void _ui_bar_increment(lv_obj_t * target, lv_scr_load_anim_t fademode, int spd, int delay)
+{
+    lv_scr_load_anim(target, fademode, spd, delay, false);
+}
+
+void _ui_slider_increment(lv_obj_t * target, lv_scr_load_anim_t fademode, int spd, int delay)
+{
+    lv_scr_load_anim(target, fademode, spd, delay, false);
+}
+
+void _ui_flag_modify(lv_obj_t * target, int32_t flag, int value)
+{
+    if(value == _UI_MODIFY_FLAG_TOGGLE) {
+        if(lv_obj_has_flag(target, flag)) lv_obj_clear_flag(target, flag);
+        else lv_obj_add_flag(target, flag);
+    }
+    else if(value == _UI_MODIFY_FLAG_ADD) lv_obj_add_flag(target, flag);
+    else lv_obj_clear_flag(target, flag);
+}
+void _ui_state_modify(lv_obj_t * target, int32_t state, int value)
+{
+    if(value == _UI_MODIFY_STATE_TOGGLE) {
+        if(lv_obj_has_state(target, state)) lv_obj_clear_state(target, state);
+        else lv_obj_add_state(target, state);
+    }
+    else if(value == _UI_MODIFY_STATE_ADD) lv_obj_add_state(target, state);
+    else lv_obj_clear_state(target, state);
+}
+
+void _ui_opacity_set(lv_obj_t * target, int val)
+{
+    lv_obj_set_style_opa(target, val, 0);
+}
+
+void _ui_anim_callback_set_x(lv_anim_t * a, int32_t v)
+{
+    lv_obj_set_x((lv_obj_t *)a->user_data, v);
+}
+
+void _ui_anim_callback_set_y(lv_anim_t * a, int32_t v)
+{
+    lv_obj_set_y((lv_obj_t *)a->user_data, v);
+}
+
+void _ui_anim_callback_set_width(lv_anim_t * a, int32_t v)
+{
+    lv_obj_set_width((lv_obj_t *)a->user_data, v);
+}
+
+void _ui_anim_callback_set_height(lv_anim_t * a, int32_t v)
+{
+    lv_obj_set_height((lv_obj_t *)a->user_data, v);
+}
+
+void _ui_anim_callback_set_opacity(lv_anim_t * a, int32_t v)
+{
+    lv_obj_set_style_opa((lv_obj_t *)a->user_data, v, 0);
+}
+
+void _ui_anim_callback_set_image_zoom(lv_anim_t * a, int32_t v)
+{
+    lv_img_set_zoom((lv_obj_t *)a->user_data, v);
+}
+
+void _ui_anim_callback_set_image_angle(lv_anim_t * a, int32_t v)
+{
+    lv_img_set_angle((lv_obj_t *)a->user_data, v);
+}
+
+
+int32_t _ui_anim_callback_get_x(lv_anim_t * a)
+{
+    return lv_obj_get_x_aligned((lv_obj_t *)a->user_data);
+}
+
+int32_t _ui_anim_callback_get_y(lv_anim_t * a)
+{
+    return lv_obj_get_y_aligned((lv_obj_t *)a->user_data);
+}
+
+int32_t _ui_anim_callback_get_width(lv_anim_t * a)
+{
+    return lv_obj_get_width((lv_obj_t *)a->user_data);
+}
+
+int32_t _ui_anim_callback_get_height(lv_anim_t * a)
+{
+    return lv_obj_get_height((lv_obj_t *)a->user_data);
+}
+
+int32_t _ui_anim_callback_get_opacity(lv_anim_t * a)
+{
+    return lv_obj_get_style_opa((lv_obj_t *)a->user_data, 0);
+}
+
+int32_t _ui_anim_callback_get_image_zoom(lv_anim_t * a)
+{
+    return lv_img_get_zoom((lv_obj_t *)a->user_data);
+}
+
+int32_t _ui_anim_callback_get_image_angle(lv_anim_t * a)
+{
+    return lv_img_get_angle((lv_obj_t *)a->user_data);
+}
+
+void _ui_arc_set_text_value(lv_obj_t * trg, lv_obj_t * src, char * prefix, char * postfix)
+{
+    char buf[_UI_TEMPORARY_STRING_BUFFER_SIZE];
+    lv_snprintf(buf, sizeof(buf), "%s%d%s", prefix, (int)lv_arc_get_value(src), postfix);
+    lv_label_set_text(trg, buf);
+}
+
+void _ui_slider_set_text_value(lv_obj_t * trg, lv_obj_t * src, char * prefix, char * postfix)
+{
+    char buf[_UI_TEMPORARY_STRING_BUFFER_SIZE];
+    lv_snprintf(buf, sizeof(buf), "%s%d%s", prefix, (int)lv_slider_get_value(src), postfix);
+    lv_label_set_text(trg, buf);
+}
+void _ui_checked_set_text_value(lv_obj_t * trg, lv_obj_t * src, char * txt_on, char * txt_off)
+{
+    if(lv_obj_has_state(src, LV_STATE_CHECKED)) lv_label_set_text(trg, txt_on);
+    else lv_label_set_text(trg, txt_off);
+}
+
+

ESP32_LVGL/LVGL8_SquareLine/02_Tesla_Multi_Pages/ui_helpers.h

@@ -0,0 +1,94 @@
+// SquareLine LVGL GENERATED FILE
+// EDITOR VERSION: SquareLine Studio 1.0.2
+// LVGL VERSION: 8.2
+// PROJECT: Tesla_Multi_Pages
+
+#ifndef _TESLA_MULTI_PAGES_UI_HELPERS_H
+#define _TESLA_MULTI_PAGES_UI_HELPERS_H
+
+#include "lvgl.h"
+
+#define _UI_TEMPORARY_STRING_BUFFER_SIZE 32
+#define _UI_BAR_PROPERTY_VALUE 0
+#define _UI_BAR_PROPERTY_VALUE_WITH_ANIM 1
+void _ui_bar_set_property(lv_obj_t * target, int id, int val);
+
+#define _UI_BASIC_PROPERTY_POSITION_X 0
+#define _UI_BASIC_PROPERTY_POSITION_Y 1
+#define _UI_BASIC_PROPERTY_WIDTH 2
+#define _UI_BASIC_PROPERTY_HEIGHT 3
+void _ui_basic_set_property(lv_obj_t * target, int id, int val);
+
+#define _UI_DROPDOWN_PROPERTY_SELECTED 0
+void _ui_dropdown_set_property(lv_obj_t * target, int id, int val);
+
+#define _UI_IMAGE_PROPERTY_IMAGE 0
+void _ui_image_set_property(lv_obj_t * target, int id, uint8_t * val);
+
+#define _UI_LABEL_PROPERTY_TEXT 0
+void _ui_label_set_property(lv_obj_t * target, int id, char * val);
+
+#define _UI_ROLLER_PROPERTY_SELECTED 0
+#define _UI_ROLLER_PROPERTY_SELECTED_WITH_ANIM 1
+void _ui_roller_set_property(lv_obj_t * target, int id, int val);
+
+#define _UI_SLIDER_PROPERTY_VALUE 0
+#define _UI_SLIDER_PROPERTY_VALUE_WITH_ANIM 1
+void _ui_slider_set_property(lv_obj_t * target, int id, int val);
+
+void _ui_screen_change(lv_obj_t * target, lv_scr_load_anim_t fademode, int spd, int delay);
+
+void _ui_arc_increment(lv_obj_t * target, lv_scr_load_anim_t fademode, int spd, int delay);
+
+void _ui_bar_increment(lv_obj_t * target, lv_scr_load_anim_t fademode, int spd, int delay);
+
+void _ui_slider_increment(lv_obj_t * target, lv_scr_load_anim_t fademode, int spd, int delay);
+
+#define _UI_MODIFY_FLAG_ADD 0
+#define _UI_MODIFY_FLAG_REMOVE 1
+#define _UI_MODIFY_FLAG_TOGGLE 2
+void _ui_flag_modify(lv_obj_t * target, int32_t flag, int value);
+
+#define _UI_MODIFY_STATE_ADD 0
+#define _UI_MODIFY_STATE_REMOVE 1
+#define _UI_MODIFY_STATE_TOGGLE 2
+void _ui_state_modify(lv_obj_t * target, int32_t state, int value);
+
+void _ui_opacity_set(lv_obj_t * target, int val);
+
+void _ui_anim_callback_set_x(lv_anim_t * a, int32_t v);
+
+void _ui_anim_callback_set_y(lv_anim_t * a, int32_t v);
+
+void _ui_anim_callback_set_width(lv_anim_t * a, int32_t v);
+
+void _ui_anim_callback_set_height(lv_anim_t * a, int32_t v);
+
+void _ui_anim_callback_set_opacity(lv_anim_t * a, int32_t v);
+
+void _ui_anim_callback_set_image_zoom(lv_anim_t * a, int32_t v);
+
+void _ui_anim_callback_set_image_angle(lv_anim_t * a, int32_t v);
+
+int32_t _ui_anim_callback_get_x(lv_anim_t * a);
+
+int32_t _ui_anim_callback_get_y(lv_anim_t * a);
+
+int32_t _ui_anim_callback_get_width(lv_anim_t * a);
+
+int32_t _ui_anim_callback_get_height(lv_anim_t * a);
+
+int32_t _ui_anim_callback_get_opacity(lv_anim_t * a);
+
+int32_t _ui_anim_callback_get_image_zoom(lv_anim_t * a);
+
+int32_t _ui_anim_callback_get_image_angle(lv_anim_t * a);
+
+void _ui_arc_set_text_value(lv_obj_t * trg, lv_obj_t * src, char * prefix, char * postfix);
+
+void _ui_slider_set_text_value(lv_obj_t * trg, lv_obj_t * src, char * prefix, char * postfix);
+
+void _ui_checked_set_text_value(lv_obj_t * trg, lv_obj_t * src, char * txt_on, char * txt_off);
+
+
+#endif