Creating Tesla's Website in SquareLine Studio (ESP32+LVGL)

ESP32_LVGL/LVGL8_SquareLine/01_Tesla_Single_Page/01_Tesla_Single_Page.ino

@@ -0,0 +1,160 @@
+/////////////////////////////////////////////////////////////////
+/*
+  Creating Tesla's Website in SquareLine Studio (ESP32+LVGL)
+  Video Tutorial: https://youtu.be/LrvqSjLzo44
+  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/01_Tesla_Single_Page/ui.c

@@ -0,0 +1,196 @@
+// SquareLine LVGL GENERATED FILE
+// EDITOR VERSION: SquareLine Studio 1.0.0
+// LVGL VERSION: 8.2
+// PROJECT: 0_Tesla_Page
+
+#include "ui.h"
+#include "ui_helpers.h"
+
+///////////////////// VARIABLES ////////////////////
+lv_obj_t * ui_Screen1;
+lv_obj_t * ui_Image_Background;
+lv_obj_t * ui_BottomPanel;
+lv_obj_t * ui_BTN_Custom_Order;
+lv_obj_t * ui_BTN_LABEL;
+lv_obj_t * ui_BTN_Custom_Order_copy;
+lv_obj_t * ui_BTN_LABEL1;
+lv_obj_t * ui_Label_Title;
+lv_obj_t * ui_Label_Subtile;
+
+///////////////////// ANIMATIONS ////////////////////
+
+///////////////////// FUNCTIONS ////////////////////
+
+///////////////////// SCREENS ////////////////////
+void ui_Screen1_screen_init(void)
+{
+
+    // Screen1
+
+    ui_Screen1 = lv_obj_create(NULL);
+
+    lv_obj_clear_flag(ui_Screen1, LV_OBJ_FLAG_SCROLLABLE);
+
+    // Image_Background
+
+    ui_Image_Background = lv_img_create(ui_Screen1);
+    lv_img_set_src(ui_Image_Background, &ui_img_tesla_model_3_png);
+
+    lv_obj_set_width(ui_Image_Background, LV_SIZE_CONTENT);
+    lv_obj_set_height(ui_Image_Background, LV_SIZE_CONTENT);
+
+    lv_obj_set_x(ui_Image_Background, 0);
+    lv_obj_set_y(ui_Image_Background, 0);
+
+    lv_obj_set_align(ui_Image_Background, LV_ALIGN_CENTER);
+
+    lv_obj_add_flag(ui_Image_Background, LV_OBJ_FLAG_ADV_HITTEST);
+    lv_obj_clear_flag(ui_Image_Background, LV_OBJ_FLAG_SCROLLABLE);
+
+    // BottomPanel
+
+    ui_BottomPanel = lv_obj_create(ui_Screen1);
+
+    lv_obj_set_width(ui_BottomPanel, 400);
+    lv_obj_set_height(ui_BottomPanel, 50);
+
+    lv_obj_set_x(ui_BottomPanel, 0);
+    lv_obj_set_y(ui_BottomPanel, -20);
+
+    lv_obj_set_align(ui_BottomPanel, LV_ALIGN_BOTTOM_MID);
+
+    lv_obj_clear_flag(ui_BottomPanel, LV_OBJ_FLAG_SCROLLABLE);
+
+    lv_obj_set_scrollbar_mode(ui_BottomPanel, LV_SCROLLBAR_MODE_OFF);
+
+    lv_obj_set_style_bg_color(ui_BottomPanel, lv_color_hex(0xFFFFFF), LV_PART_MAIN | LV_STATE_DEFAULT);
+    lv_obj_set_style_bg_opa(ui_BottomPanel, 0, LV_PART_MAIN | LV_STATE_DEFAULT);
+    lv_obj_set_style_border_color(ui_BottomPanel, lv_color_hex(0x000000), LV_PART_MAIN | LV_STATE_DEFAULT);
+    lv_obj_set_style_border_opa(ui_BottomPanel, 0, LV_PART_MAIN | LV_STATE_DEFAULT);
+
+    // BTN_Custom_Order
+
+    ui_BTN_Custom_Order = lv_btn_create(ui_BottomPanel);
+
+    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, 5);
+
+    lv_obj_set_align(ui_BTN_Custom_Order, LV_ALIGN_BOTTOM_LEFT);
+
+    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_set_style_radius(ui_BTN_Custom_Order, 48, LV_PART_MAIN | LV_STATE_DEFAULT);
+    lv_obj_set_style_bg_color(ui_BTN_Custom_Order, lv_color_hex(0x383C3F), LV_PART_MAIN | LV_STATE_DEFAULT);
+    lv_obj_set_style_bg_opa(ui_BTN_Custom_Order, 255, LV_PART_MAIN | LV_STATE_DEFAULT);
+
+    // BTN_LABEL
+
+    ui_BTN_LABEL = lv_label_create(ui_BTN_Custom_Order);
+
+    lv_obj_set_width(ui_BTN_LABEL, LV_SIZE_CONTENT);
+    lv_obj_set_height(ui_BTN_LABEL, LV_SIZE_CONTENT);
+
+    lv_obj_set_x(ui_BTN_LABEL, 0);
+    lv_obj_set_y(ui_BTN_LABEL, 0);
+
+    lv_obj_set_align(ui_BTN_LABEL, LV_ALIGN_CENTER);
+
+    lv_label_set_text(ui_BTN_LABEL, "CUSTOM ORDER");
+
+    lv_obj_clear_flag(ui_BTN_LABEL, LV_OBJ_FLAG_CLICKABLE);
+
+    lv_obj_set_style_text_align(ui_BTN_LABEL, LV_TEXT_ALIGN_CENTER, LV_PART_MAIN | LV_STATE_DEFAULT);
+    lv_obj_set_style_text_font(ui_BTN_LABEL, &lv_font_montserrat_10, LV_PART_MAIN | LV_STATE_DEFAULT);
+
+    // BTN_Custom_Order_copy
+
+    ui_BTN_Custom_Order_copy = lv_btn_create(ui_BottomPanel);
+
+    lv_obj_set_width(ui_BTN_Custom_Order_copy, 160);
+    lv_obj_set_height(ui_BTN_Custom_Order_copy, 24);
+
+    lv_obj_set_x(ui_BTN_Custom_Order_copy, 0);
+    lv_obj_set_y(ui_BTN_Custom_Order_copy, 5);
+
+    lv_obj_set_align(ui_BTN_Custom_Order_copy, LV_ALIGN_BOTTOM_RIGHT);
+
+    lv_obj_add_flag(ui_BTN_Custom_Order_copy, LV_OBJ_FLAG_SCROLL_ON_FOCUS);
+    lv_obj_clear_flag(ui_BTN_Custom_Order_copy, LV_OBJ_FLAG_SCROLLABLE);
+
+    lv_obj_set_style_radius(ui_BTN_Custom_Order_copy, 48, LV_PART_MAIN | LV_STATE_DEFAULT);
+    lv_obj_set_style_bg_color(ui_BTN_Custom_Order_copy, lv_color_hex(0xFFFFFF), LV_PART_MAIN | LV_STATE_DEFAULT);
+    lv_obj_set_style_bg_opa(ui_BTN_Custom_Order_copy, 255, LV_PART_MAIN | LV_STATE_DEFAULT);
+
+    // BTN_LABEL1
+
+    ui_BTN_LABEL1 = lv_label_create(ui_BTN_Custom_Order_copy);
+
+    lv_obj_set_width(ui_BTN_LABEL1, LV_SIZE_CONTENT);
+    lv_obj_set_height(ui_BTN_LABEL1, LV_SIZE_CONTENT);
+
+    lv_obj_set_x(ui_BTN_LABEL1, 0);
+    lv_obj_set_y(ui_BTN_LABEL1, 0);
+
+    lv_obj_set_align(ui_BTN_LABEL1, LV_ALIGN_CENTER);
+
+    lv_label_set_text(ui_BTN_LABEL1, "EXISTING INVENTORY");
+
+    lv_obj_clear_flag(ui_BTN_LABEL1, LV_OBJ_FLAG_CLICKABLE);
+
+    lv_obj_set_style_text_color(ui_BTN_LABEL1, lv_color_hex(0x000000), LV_PART_MAIN | LV_STATE_DEFAULT);
+    lv_obj_set_style_text_opa(ui_BTN_LABEL1, 255, LV_PART_MAIN | LV_STATE_DEFAULT);
+    lv_obj_set_style_text_align(ui_BTN_LABEL1, LV_TEXT_ALIGN_CENTER, LV_PART_MAIN | LV_STATE_DEFAULT);
+    lv_obj_set_style_text_font(ui_BTN_LABEL1, &lv_font_montserrat_10, LV_PART_MAIN | LV_STATE_DEFAULT);
+
+    // Label_Title
+
+    ui_Label_Title = lv_label_create(ui_Screen1);
+
+    lv_obj_set_width(ui_Label_Title, LV_SIZE_CONTENT);
+    lv_obj_set_height(ui_Label_Title, LV_SIZE_CONTENT);
+
+    lv_obj_set_x(ui_Label_Title, 0);
+    lv_obj_set_y(ui_Label_Title, 40);
+
+    lv_obj_set_align(ui_Label_Title, LV_ALIGN_TOP_MID);
+
+    lv_label_set_text(ui_Label_Title, "Model 3");
+
+    lv_obj_clear_flag(ui_Label_Title, LV_OBJ_FLAG_CLICKABLE);
+
+    lv_obj_set_style_text_color(ui_Label_Title, lv_color_hex(0x000000), LV_PART_MAIN | LV_STATE_DEFAULT);
+    lv_obj_set_style_text_opa(ui_Label_Title, 255, LV_PART_MAIN | LV_STATE_DEFAULT);
+    lv_obj_set_style_text_font(ui_Label_Title, &lv_font_montserrat_20, LV_PART_MAIN | LV_STATE_DEFAULT);
+
+    // Label_Subtile
+
+    ui_Label_Subtile = lv_label_create(ui_Screen1);
+
+    lv_obj_set_width(ui_Label_Subtile, LV_SIZE_CONTENT);
+    lv_obj_set_height(ui_Label_Subtile, LV_SIZE_CONTENT);
+
+    lv_obj_set_x(ui_Label_Subtile, 0);
+    lv_obj_set_y(ui_Label_Subtile, 64);
+
+    lv_obj_set_align(ui_Label_Subtile, LV_ALIGN_TOP_MID);
+
+    lv_label_set_text(ui_Label_Subtile, "Order Online for Touchless Delivery");
+
+    lv_obj_clear_flag(ui_Label_Subtile, LV_OBJ_FLAG_CLICKABLE);
+
+    lv_obj_set_style_text_color(ui_Label_Subtile, lv_color_hex(0x000000), LV_PART_MAIN | LV_STATE_DEFAULT);
+    lv_obj_set_style_text_opa(ui_Label_Subtile, 255, LV_PART_MAIN | LV_STATE_DEFAULT);
+    lv_obj_set_style_text_font(ui_Label_Subtile, &lv_font_montserrat_10, LV_PART_MAIN | LV_STATE_DEFAULT);
+
+}
+
+void ui_init(void)
+{
+    ui_Screen1_screen_init();
+    lv_disp_load_scr(ui_Screen1);
+}
+

ESP32_LVGL/LVGL8_SquareLine/01_Tesla_Single_Page/ui.h

@@ -0,0 +1,37 @@
+// SquareLine LVGL GENERATED FILE
+// EDITOR VERSION: SquareLine Studio 1.0.0
+// LVGL VERSION: 8.2
+// PROJECT: 0_Tesla_Page
+
+#ifndef _0_TESLA_PAGE_UI_H
+#define _0_TESLA_PAGE_UI_H
+
+#ifdef __cplusplus
+extern "C" {
+#endif
+
+#include "lvgl.h"
+
+extern lv_obj_t * ui_Screen1;
+extern lv_obj_t * ui_Image_Background;
+extern lv_obj_t * ui_BottomPanel;
+extern lv_obj_t * ui_BTN_Custom_Order;
+extern lv_obj_t * ui_BTN_LABEL;
+extern lv_obj_t * ui_BTN_Custom_Order_copy;
+extern lv_obj_t * ui_BTN_LABEL1;
+extern lv_obj_t * ui_Label_Title;
+extern lv_obj_t * ui_Label_Subtile;
+
+
+LV_IMG_DECLARE(ui_img_tesla_model_3_png);    // assets\tesla_model_3.png
+
+
+
+
+void ui_init(void);
+
+#ifdef __cplusplus
+} /*extern "C"*/
+#endif
+
+#endif

ESP32_LVGL/LVGL8_SquareLine/01_Tesla_Single_Page/ui_helpers.c

@@ -0,0 +1,186 @@
+// SquareLine LVGL GENERATED FILE
+// EDITOR VERSION: SquareLine Studio 1.0.0
+// LVGL VERSION: 8.2
+// PROJECT: 0_Tesla_Page
+
+#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/01_Tesla_Single_Page/ui_helpers.h

@@ -0,0 +1,94 @@
+// SquareLine LVGL GENERATED FILE
+// EDITOR VERSION: SquareLine Studio 1.0.0
+// LVGL VERSION: 8.2
+// PROJECT: 0_Tesla_Page
+
+#ifndef _0_TESLA_PAGE_UI_HELPERS_H
+#define _0_TESLA_PAGE_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