Scrolling Text Field

[kevinasia82]

I am quite new to ESP32 and not an engineer but understood (with help of AI). I am trying to build a news ticker but I can just not get the text scrolling in my text box. Below is what tired (I will integrate the relevant code into bigger project later on). I just want my text to scroll in my text box. Any help would be fantastic....

#include <Arduino.h>
#include <lvgl.h>
#include <Wire.h>
#include "esp_lcd_panel_io.h"
#include "esp_lcd_panel_vendor.h"
#include "esp_lcd_panel_ops.h"
#include "esp_lcd_panel_rgb.h"

// Wrap SquareLine C headers so the C++ compiler links them correctly
extern "C" {
#include "ui.h"
}

// --- SCREEN SETTINGS ---
#define LCD_WIDTH 800
#define LCD_HEIGHT 480

#define I2C_SDA 15
#define I2C_SCL 16
#define LCD_HSYNC 40
#define LCD_VSYNC 41
#define LCD_DE 42
#define LCD_PCLK 39

static lv_disp_draw_buf_t draw_buf;
static lv_color_t *buf1;
static lv_color_t *buf2;
esp_lcd_panel_handle_t panel_handle = NULL;

String global_headline = " *** The company, called Infoassa, had advertised at least six events at its premises over the last four months. Checks by CNA found that the most recent event on Aug 7 never took place. *** ";
int scroll_index = 0;
unsigned long last_scroll_tick = 0;

void initCrowPanelBacklight() {
Wire.begin(I2C_SDA, I2C_SCL);
delay(50);
Wire.beginTransmission(0x30);
Wire.write(0x10);
Wire.endTransmission();
delay(50);
Wire.beginTransmission(0x30);
Wire.write(0x00);
Wire.endTransmission();
}

void my_disp_flush(lv_disp_drv_t *disp_drv, const lv_area_t *area, lv_color_t *color_p) {
if (panel_handle != NULL) {
esp_lcd_panel_draw_bitmap(panel_handle, area->x1, area->y1, area->x2 + 1, area->y2 + 1, color_p);
}
lv_disp_flush_ready(disp_drv);
}

void updateTickerText() {
if (global_headline.length() > 0) {
// Shift characters circularly for a smooth scrolling effect
String shifted = global_headline.substring(scroll_index) + global_headline.substring(0, scroll_index);

    if (ui_NewsLabel != NULL) {
        lv_label_set_text(ui_NewsLabel, shifted.c_str());
        
        // CRITICAL: Force LVGL and its parent container to redraw immediately 
        // so SquareLine's layout engine doesn't cache or ignore the string shift.
        lv_obj_invalidate(ui_NewsLabel);
        lv_obj_mark_layout_as_dirty(ui_NewsLabel);
        if (lv_obj_get_parent(ui_NewsLabel) != NULL) {
            lv_obj_invalidate(lv_obj_get_parent(ui_NewsLabel));
        }
    }
    
    scroll_index = (scroll_index + 1) % global_headline.length();
}

}

void setup() {
Serial.begin(115200);
delay(2000);
Serial.println("\n--- SYSTEM BOOT (FINAL FULLY-REVIEWED MARQUEE) ---");

initCrowPanelBacklight();
Serial.println("[OK] Backlight Initialized");

esp_lcd_rgb_panel_config_t panel_config = {};
panel_config.clk_src = LCD_CLK_SRC_DEFAULT;
panel_config.timings.pclk_hz = 14 * 1000 * 1000;
panel_config.timings.h_res = LCD_WIDTH;
panel_config.timings.v_res = LCD_HEIGHT;
panel_config.timings.hsync_pulse_width = 4;
panel_config.timings.hsync_back_porch = 8;
panel_config.timings.hsync_front_porch = 8;
panel_config.timings.vsync_pulse_width = 4;
panel_config.timings.vsync_back_porch = 8;
panel_config.timings.vsync_front_porch = 8;
panel_config.timings.flags.pclk_active_neg = 1;

panel_config.data_width = 16;
panel_config.bits_per_pixel = 16;
panel_config.num_fbs = 1;
panel_config.bounce_buffer_size_px = LCD_WIDTH * 10;
panel_config.flags.fb_in_psram = 1;

panel_config.hsync_gpio_num = LCD_HSYNC;
panel_config.vsync_gpio_num = LCD_VSYNC;
panel_config.de_gpio_num = LCD_DE;
panel_config.pclk_gpio_num = LCD_PCLK;
panel_config.disp_gpio_num = -1;

const int crowpanel_rgb_pins[] = {
    21, 47, 48, 45, 38,       
    9,  10, 11, 12, 13, 14,   
    7,  17, 18, 3,  46        
};
for (int i = 0; i < 16; i++) {
    panel_config.data_gpio_nums[i] = crowpanel_rgb_pins[i];
}

if (esp_lcd_new_rgb_panel(&panel_config, &panel_handle) != ESP_OK) {
    Serial.println("[ERROR] Failed to allocate RGB panel frame buffer!");
    return;
}
esp_lcd_panel_reset(panel_handle);
esp_lcd_panel_init(panel_handle);
Serial.println("[OK] RGB Panel Initialized");

buf1 = (lv_color_t *)heap_caps_malloc(LCD_WIDTH * 40 * sizeof(lv_color_t), MALLOC_CAP_SPIRAM);
buf2 = (lv_color_t *)heap_caps_malloc(LCD_WIDTH * 40 * sizeof(lv_color_t), MALLOC_CAP_SPIRAM);

lv_init();
lv_disp_draw_buf_init(&draw_buf, buf1, buf2, LCD_WIDTH * 40);

static lv_disp_drv_t disp_drv;
lv_disp_drv_init(&disp_drv);
disp_drv.hor_res = LCD_WIDTH;
disp_drv.ver_res = LCD_HEIGHT;
disp_drv.flush_cb = my_disp_flush;
disp_drv.draw_buf = &draw_buf;
lv_disp_drv_register(&disp_drv);
Serial.println("[OK] LVGL Initialized");

ui_init();
lv_timer_handler();
Serial.println("[OK] UI Initialized");

if (ui_NewsLabel != NULL) {
    Serial.println("[DIAG SUCCESS] Configuring ui_NewsLabel safely within design bounds...");
    lv_label_set_long_mode(ui_NewsLabel, LV_LABEL_LONG_CLIP);
    lv_label_set_text(ui_NewsLabel, global_headline.c_str());
    lv_obj_invalidate(ui_NewsLabel);
} else {
    Serial.println("[DIAG ERROR] ui_NewsLabel pointer is NULL!");
}

lv_refr_now(NULL);
Serial.println("[OK] Entering Main Loop...");

}

void loop() {
lv_timer_handler();
delay(5);

// Smooth ticker step speed (adjust milliseconds to speed up or slow down)
if (millis() - last_scroll_tick > 120) {
    last_scroll_tick = millis();
    updateTickerText();
}

}

[RichardGladson]

The marquee is created wrongly

Your ESP32/LVGL setup is perfect. The problem is the way you're trying to create the marquee.
Your current code does this:

"Hello world" → "ello worldH" → "llo worldHe" → "lo worldHel"

That is a circular character rotation, not a normal news-ticker scroll. Also, LV_LABEL_LONG_CLIP doesn't make LVGL automatically scroll the label.

The much simpler solution is to let LVGL do the scrolling itself. LVGL has a built-in label mode specifically for this:

LV_LABEL_LONG_SCROLL_CIRCULAR.

Though code is actually doing several things correctly, two different concepts are being mixed together: changing the text and scrolling the text.

[yvrcodex]

Hello @kevinasia82

You don't actually need to build the scrolling logic yourself. LVGL has this built in as a feature of the label widget, so instead of tracking scroll_index and moving the text manually, you just tell the label to scroll and it handles the animation for you automatically.

Two things make it work:

lv_label_set_long_mode(your_label, LV_LABEL_LONG_SCROLL_CIRCULAR); // turn on scrolling
lv_obj_set_width(your_label, 300); // set a FIXED width, after the line above

Replace your_label with whichever label object holds your ticker text, and pick a width that's smaller than the text would need (so there's something to scroll).

The one thing that trips almost everyone up here: by default, a label's width auto-expands to fit its text (LV_SIZE_CONTENT). If you don't manually set a fixed width, the label just grows to hold the whole sentence — nothing ever needs to scroll, so it looks like scrolling "isn't working" even though the mode is set correctly. Also make sure set_width comes after set_long_mode — LVGL expects that order.

Since your project uses SquareLine Studio (I can see ui.h in your includes), the easiest path is actually in the editor itself — no code needed:

1. Select your text label in SquareLine
2. In the properties panel, find "Long mode"
3. Change it to "Scroll circular"
4. Set the label's width to a fixed value (not "content")
5. Re-export the UI files

Once that's set, you can delete your scroll_index / last_scroll_tick logic entirely — LVGL takes care of the animation on its own.

---

Sources

• Official LVGL label examples (long mode + scrolling): https://github.com/lvgl/lvgl/blob/master/examples/widgets/label/lv_example_label_1.c
• Same technique, with animation customization: https://github.com/lvgl/lvgl/blob/master/examples/widgets/label/lv_example_label_5.c
• LVGL label docs (long mode behavior): https://github.com/lvgl/lvgl/blob/master/docs/widgets/core/label.md
• Confirmation of the fixed-width gotcha from the official LVGL forum: https://forum.lvgl.io/t/lv-label-set-long-mode-doesnt-work/10313