当前位置：首页 > news >正文

LVGL Chart和Spinner详解

news 来源：原创 2025/5/19 14:52:14

LVGL Chart和Spinner详解

一、Chart
- 1. 创建图表
- 2. 配置图表的外观
- - 修改坐标轴的范围
  - 设置是否显示网格线
  - 启用缩放和滚动功能
- 3. 数据系列操作
- - 创建数据系列
  - 设置数据系列的数据
  - - 直接设置整个系列的数据
    - 自定义设置所有点数据
  - 更新模式
- 4. 设置图表类型
- - 1) 折线图（Line Chart）
  - 2) 条形图（Bar Chart）
  - 3) 点图（Point Chart）
  - 4) 堆叠条形图（Stacked Bar Chart）
- 5. 样式与交互
- - 修改网格线颜色/宽度
  - 设置鼠标点击事件
- 6. 实时更新图表
- 总结
二、Spinner
- 功能概述
- 1. 创建 Spinner
- - 参数说明：
- 2. Spinner 属性
- - 设置动画时间
  - 设置动态旋转角度
- 3. 样式设置
- - 设置 Spinner 的颜色
  - 设置 Spinner 的线宽
  - 圆角效果
- 4. 动画与交互
- - 事件机制
- 5. 场景使用
- - **(1) 等待加载场景**
  - (2) 多 Spinner 配置
- 6. 实现自定义 Spinner
- - 使用自定义动画
- 7. 优化 Spinner 使用
- 总结
三、效果展示
四、源码分享

一、Chart

LVGL (LittlevGL) 是一个轻量级的嵌入式 GUI 库。lv_chart 是 LVGL 中的一个控件，用于绘制图表并显示二维数据，比如折线图、柱状图、散点图等。lv_chart 是一个非常灵活的控件，尤其适合用于实时数据显示等场景。

下面将详细介绍 LVGL 的 lv_chart 控件，包括图表的基本创建、属性设置、数据系列操作等。

1. 创建图表

在 LVGL 中，创建图表需要使用 lv_chart_create()：

lv_obj_t * chart = lv_chart_create(lv_scr_act()); // 在当前屏幕上创建图表
lv_obj_set_size(chart, 300, 200);                 // 设置图表的大小
lv_obj_center(chart);                             // 将图表居中

2. 配置图表的外观

修改坐标轴的范围

通过设置坐标轴的范围来定义图表数据的上下界：

// 设置 Y 轴（主坐标轴）的范围为 [0, 100]
lv_chart_set_range(chart, LV_CHART_AXIS_PRIMARY_Y, 0, 100);

// 设置 X 轴（次坐标轴）的范围为 [0, 10]
lv_chart_set_range(chart, LV_CHART_AXIS_PRIMARY_X, 0, 10);

设置是否显示网格线

网格线可以帮助用户更好地读取图表数据。可以通过以下函数设置网格线在 X 和 Y 方向的分隔：

lv_chart_set_div_line_count(chart, 5, 7); // Y 轴分为 5 格，X 轴分为 7 格

启用缩放和滚动功能

为了让图表在 UI 上更加灵活，可以启用图表的滚动和缩放功能：

lv_chart_set_zoom_x(chart, 256);                 // 设置 X 轴缩放比例（256 表示 100% 缩放）
lv_obj_add_flag(chart, LV_OBJ_FLAG_SCROLLABLE);  // 启用拖动功能

3. 数据系列操作

图表的绘制依赖于数据系列，每一个数据系列（lv_chart_series_t）表示一组数据，用不同的颜色区分不同系列。

创建数据系列

以下代码演示如何为图表添加一个数据系列：

lv_chart_series_t * series = lv_chart_add_series(
    chart,                        // 需要添加数据系列的图表
    lv_palette_main(LV_PALETTE_RED), // 数据系列的颜色
    LV_CHART_AXIS_PRIMARY_Y        // 数据绑定的轴（主 Y 轴或次 Y 轴）
);

设置数据系列的数据

可以通过以下方式设置数据的值：

直接设置整个系列的数据

// 为系列赋值（假设系列的点数为 10）
lv_chart_set_point_count(chart, 10);   // 设置图表显示的总点数为 10（影响所有系列）
lv_chart_set_next_value(chart, series, 20); // 设置一个新值，旧值会自动左移

自定义设置所有点数据

// 自定义数据（例如，每个点数值依次为 10, 20, 30, 40...）
int32_t data[] = {10, 20, 30, 40, 50, 60, 70, 80, 90, 100};
memcpy(series->y_points, data, sizeof(data));

// 通知图表进行刷新绘制
lv_chart_refresh(chart);

更新模式

lv_chart 提供了以下两种更新模式，用于控制数据的更新逻辑：

移位模式（默认模式）：新数据会依次插入到最后，同时将最早的一组数据移出。
替换模式：新数据替换当前索引位置的数据。

可以通过以下函数切换更新模式：

lv_chart_set_update_mode(chart, LV_CHART_UPDATE_MODE_SHIFT); // 移位模式
lv_chart_set_update_mode(chart, LV_CHART_UPDATE_MODE_CIRCULAR); // 替换模式

4. 设置图表类型

lv_chart 提供了多种类型的图表展示模式，可以通过 lv_chart_set_type() 来设置。支持以下几种类型：

1) 折线图（Line Chart）

折线图是最常用的图表类型，用线条连接数据点。

lv_chart_set_type(chart, LV_CHART_TYPE_LINE); // 设置为折线图

2) 条形图（Bar Chart）

展示柱状条形的数据：

lv_chart_set_type(chart, LV_CHART_TYPE_BAR); // 设置为条形图

3) 点图（Point Chart）

只显示数据点，不连接线条：

lv_chart_set_type(chart, LV_CHART_TYPE_SCATTER); // 设置为散点图

4) 堆叠条形图（Stacked Bar Chart）

多组条形数据叠加显示：

lv_chart_set_type(chart, LV_CHART_TYPE_BAR | LV_CHART_TYPE_STACKED);

多个类型可以组合设置。例如：

lv_chart_set_type(chart, LV_CHART_TYPE_LINE | LV_CHART_TYPE_SCATTER); // 折线图 + 点图

5. 样式与交互

LVGL 提供了丰富的样式接口，可以自定义图表的外观（边框、背景、线条宽度等）以及交互功能。

修改网格线颜色/宽度

lv_obj_set_style_grid_color(chart, lv_palette_main(LV_PALETTE_BLUE), LV_PART_MAIN);
lv_obj_set_style_grid_width(chart, 1, LV_PART_MAIN); // 设置网格线宽度

设置鼠标点击事件

可以添加回调函数，用于交互时捕获图表事件：

lv_obj_add_event_cb(chart, my_event_handler, LV_EVENT_CLICKED, NULL);

// 回调函数
void my_event_handler(lv_event_t * e) {
    lv_obj_t * obj = lv_event_get_target(e);
    printf("Chart was clicked!\n");
}

6. 实时更新图表

在嵌入式应用中，lv_chart 经常用于显示实时更新的数据。

以下是一个简单的示例，每隔 500ms 更新一次图表数据：

// 初始化图表和系列
lv_obj_t * chart = lv_chart_create(lv_scr_act());
lv_obj_set_size(chart, 300, 200);
lv_chart_series_t * series = lv_chart_add_series(chart, lv_palette_main(LV_PALETTE_RED), LV_CHART_AXIS_PRIMARY_Y);
lv_chart_set_point_count(chart, 10); // 设置数据点数量为 10

// 定时器进行实时更新
static int32_t next_val = 0;
void timer_cb(lv_timer_t * timer) {
    lv_chart_set_next_value(chart, series, next_val);
    next_val = (next_val + 10) % 100; // 生成下一个值
    lv_chart_refresh(chart);
}

// 创建定时器，每隔 500 毫秒调用一次
lv_timer_create(timer_cb, 500, NULL);

总结

lv_chart 是 LVGL 的一个强大控件，能够满足嵌入式系统中大多数图表显示的需求。通过熟练掌握 lv_chart 的类型设置、数据更新和样式修改等技巧，可以轻松实现各种图表应用。

二、Spinner

在 LVGL（Light and Versatile Graphics Library）中，lv_spinner 是一个常用的控件，主要用于显示动画加载效果。它类似于在手机应用中常见的等待加载时的转圈动画。Spinner 是一种简单但功能强大的组件，可以提升用户界面的交互体验。

功能概述

lv_spinner 控件是 LVGL 中为实现加载动画而设计的，它通过旋转效果向用户传递“正在加载”或“等待”的状态。

1. 创建 Spinner

在 LVGL 中，你可以通过 lv_spinner_create() 创建一个 Spinner。

lv_obj_t * spinner = lv_spinner_create(lv_scr_act(), 1000, 90); // 创建 Spinner 控件
lv_obj_set_size(spinner, 100, 100);                            // 设置 Spinner 的大小
lv_obj_center(spinner);                                        // 将 Spinner 居中显示

参数说明：

父对象（lv_scr_act()）：控件的父对象，比如屏幕或容器。
时间（1000）：动画循环时间，单位是毫秒。动画完成一周旋转所需的时间。
角度（90）：动画的旋转角度跨度。值越大，效果越明显，建议范围在 10~360。

2. Spinner 属性

设置动画时间

可以通过 lv_spinner_set_spin_time() 修改动画旋转完成的周期：

lv_spinner_set_spin_time(spinner, 2000);  // 设置 Spinner 的动画循环周期为 2000ms

设置动态旋转角度

可以通过 lv_spinner_set_arc_length() 控制 Spinner 的旋转弧度：

lv_spinner_set_arc_length(spinner, 120);  // 设置 Spinner 的旋转弧度为 120°

3. 样式设置

设置 Spinner 的颜色

Spinner 默认情况下有两个绘制部分：弧线的主部分和背景部分。可以分别设置它们的颜色：

lv_obj_set_style_line_color(spinner, lv_palette_main(LV_PALETTE_BLUE), LV_PART_INDICATOR); // 设置前景线（主部分）的颜色
lv_obj_set_style_line_color(spinner, lv_palette_main(LV_PALETTE_GREY), LV_PART_MAIN);      // 设置背景线的颜色

设置 Spinner 的线宽

可以通过以下代码调整 Spinner 的前景和背景的线条宽度：

lv_obj_set_style_line_width(spinner, 8, LV_PART_INDICATOR); // 前景线宽度
lv_obj_set_style_line_width(spinner, 4, LV_PART_MAIN);      // 背景线宽度

圆角效果

默认情况下，Spinner 的绘制是一个弧线，可以通过以下代码让弧线的两端变得圆滑：

lv_obj_set_style_line_rounded(spinner, true, LV_PART_INDICATOR); // 设置前景线圆角
lv_obj_set_style_line_rounded(spinner, true, LV_PART_MAIN);      // 设置背景线圆角

4. 动画与交互

lv_spinner 本质上是通过动画实现的旋转效果，因此不需要额外的处理。它支持 LVGL 的事件机制，可以用来接受用户的交互。

事件机制

lv_spinner 支持 LVGL 的事件回调，你可以监听并定制行为。例如：

lv_obj_add_event_cb(spinner, my_event_handler, LV_EVENT_CLICKED, NULL);

// 回调函数 - 侦听点击事件
void my_event_handler(lv_event_t * e) {
    lv_obj_t * obj = lv_event_get_target(e);
    printf("Spinner was clicked!\n");
}

5. 场景使用

(1) 等待加载场景

在 UI 中，当某些功能需要时间完成操作（比如文件下载或数据库加载），可以使用 Spinner 提示用户等待。

// 创建 Spinner 来表示加载状态
lv_obj_t * spinner = lv_spinner_create(lv_scr_act(), 1500, 90);
lv_obj_center(spinner);

(2) 多 Spinner 配置

你可以创建多个 Spinner，并为不同的任务定义不同的旋转参数：

// Spinner A（快速旋转）
lv_obj_t * spinner_a = lv_spinner_create(lv_scr_act(), 500, 180);
lv_obj_set_style_line_color(spinner_a, lv_palette_main(LV_PALETTE_GREEN), LV_PART_INDICATOR);

// Spinner B（慢速旋转）
lv_obj_t * spinner_b = lv_spinner_create(lv_scr_act(), 3000, 90);
lv_obj_set_style_line_color(spinner_b, lv_palette_main(LV_PALETTE_RED), LV_PART_INDICATOR);

// 位置设置
lv_obj_align(spinner_a, LV_ALIGN_TOP_MID, 0, 50);
lv_obj_align(spinner_b, LV_ALIGN_BOTTOM_MID, 0, -50);

6. 实现自定义 Spinner

LVGL 核心机制使用对象和样式的组合，因此你可以基于其他 LVGL 控件实现类似 Spinner 的效果。

使用自定义动画

假如你想创建一个类似 Spinner，但显示进度位置变化的控件，可以结合 LVGL 的动画 API：

lv_obj_t * arc = lv_arc_create(lv_scr_act());      // 使用进度条控件（Arc）
lv_obj_set_size(arc, 120, 120);                   // 设置大小
lv_arc_set_rotation(arc, 180);                    // 设置旋转角度起始点
lv_obj_set_style_arc_width(arc, 10, LV_PART_INDICATOR);

// 定义动画
lv_anim_t a;
lv_anim_init(&a);
lv_anim_set_var(&a, arc);                          // 绑定 Arc 控件
lv_anim_set_values(&a, 0, 100);                    // 从进度0变化到100
lv_anim_set_time(&a, 1000);                        // 动画持续时间
lv_anim_set_repeat_count(&a, LV_ANIM_REPEAT_INFINITE); // 无限循环
lv_anim_start(&a);

7. 优化 Spinner 使用

为了更好的嵌入式性能，应注意以下几点：

合理设定动画时间：较短的动画周期可能导致 CPU 过度负载，尤其是图形渲染复杂时。
样式优化：尽量简化线条宽度、弧线颜色，避免过多的圆角等高开销操作。
定时机制：当加载完成后，可以动态删除 Spinner，释放资源。

// 删除 Spinner（完成任务后）
lv_obj_del(spinner);

总结

lv_spinner 是 LVGL 中一个小巧实用的加载动画控件，它的灵活、轻量设计使其非常适合嵌入式设备中的等待场景。通过操作属性和样式控制，你可以创建不同样式、大小和颜色的 Spinner 来美化用户界面。如果需要进一步定制，可以结合 LVGL 的动画功能，制作专属于你的加载动画组件。

三、效果展示

在这里插入图片描述

四、源码分享

#include "lvgl.h"
#include <stdio.h>
#include "gui_guider.h"
#include "events_init.h"
#include "widgets_init.h"
#include "custom.h"



void setup_scr_screen(lv_ui *ui)
{
	//Write codes screen
	ui->screen = lv_obj_create(NULL);
	lv_obj_set_size(ui->screen, 800, 480);
	lv_obj_set_scrollbar_mode(ui->screen, LV_SCROLLBAR_MODE_OFF);

	//Write style for screen, Part: LV_PART_MAIN, State: LV_STATE_DEFAULT.
	lv_obj_set_style_bg_opa(ui->screen, 255, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_bg_color(ui->screen, lv_color_hex(0xc61818), LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_bg_grad_dir(ui->screen, LV_GRAD_DIR_NONE, LV_PART_MAIN|LV_STATE_DEFAULT);

	//Write codes screen_chart_1
	ui->screen_chart_1 = lv_chart_create(ui->screen);
	lv_chart_set_type(ui->screen_chart_1, LV_CHART_TYPE_LINE);
	lv_chart_set_div_line_count(ui->screen_chart_1, 3, 5);
	lv_chart_set_point_count(ui->screen_chart_1, 5);
	lv_chart_set_range(ui->screen_chart_1, LV_CHART_AXIS_PRIMARY_Y, 0, 100);
	lv_chart_set_range(ui->screen_chart_1, LV_CHART_AXIS_SECONDARY_Y, 0, 100);
	lv_chart_set_zoom_x(ui->screen_chart_1, 256);
	lv_chart_set_zoom_y(ui->screen_chart_1, 256);
	ui->screen_chart_1_0 = lv_chart_add_series(ui->screen_chart_1, lv_color_hex(0x000000), LV_CHART_AXIS_PRIMARY_Y);
#if LV_USE_FREEMASTER == 0
	lv_chart_set_next_value(ui->screen_chart_1, ui->screen_chart_1_0, 1);
	lv_chart_set_next_value(ui->screen_chart_1, ui->screen_chart_1_0, 20);
	lv_chart_set_next_value(ui->screen_chart_1, ui->screen_chart_1_0, 30);
	lv_chart_set_next_value(ui->screen_chart_1, ui->screen_chart_1_0, 40);
	lv_chart_set_next_value(ui->screen_chart_1, ui->screen_chart_1_0, 5);
#endif
	lv_obj_set_pos(ui->screen_chart_1, 21, 43);
	lv_obj_set_size(ui->screen_chart_1, 337, 217);
	lv_obj_set_scrollbar_mode(ui->screen_chart_1, LV_SCROLLBAR_MODE_OFF);

	//Write style for screen_chart_1, Part: LV_PART_MAIN, State: LV_STATE_DEFAULT.
	lv_obj_set_style_bg_opa(ui->screen_chart_1, 255, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_bg_color(ui->screen_chart_1, lv_color_hex(0xffffff), LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_bg_grad_dir(ui->screen_chart_1, LV_GRAD_DIR_NONE, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_border_width(ui->screen_chart_1, 1, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_border_opa(ui->screen_chart_1, 255, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_border_color(ui->screen_chart_1, lv_color_hex(0xe8e8e8), LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_border_side(ui->screen_chart_1, LV_BORDER_SIDE_FULL, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_radius(ui->screen_chart_1, 0, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_line_width(ui->screen_chart_1, 2, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_line_color(ui->screen_chart_1, lv_color_hex(0xe8e8e8), LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_line_opa(ui->screen_chart_1, 255, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_shadow_width(ui->screen_chart_1, 0, LV_PART_MAIN|LV_STATE_DEFAULT);

	//Write style for screen_chart_1, Part: LV_PART_TICKS, State: LV_STATE_DEFAULT.
	lv_obj_set_style_text_color(ui->screen_chart_1, lv_color_hex(0x151212), LV_PART_TICKS|LV_STATE_DEFAULT);
	lv_obj_set_style_text_font(ui->screen_chart_1, &lv_font_montserratMedium_12, LV_PART_TICKS|LV_STATE_DEFAULT);
	lv_obj_set_style_text_opa(ui->screen_chart_1, 255, LV_PART_TICKS|LV_STATE_DEFAULT);
	lv_obj_set_style_line_width(ui->screen_chart_1, 2, LV_PART_TICKS|LV_STATE_DEFAULT);
	lv_obj_set_style_line_color(ui->screen_chart_1, lv_color_hex(0xe8e8e8), LV_PART_TICKS|LV_STATE_DEFAULT);
	lv_obj_set_style_line_opa(ui->screen_chart_1, 255, LV_PART_TICKS|LV_STATE_DEFAULT);

	//Write codes screen_chart_2
	ui->screen_chart_2 = lv_chart_create(ui->screen);
	lv_chart_set_type(ui->screen_chart_2, LV_CHART_TYPE_BAR);
	lv_chart_set_div_line_count(ui->screen_chart_2, 3, 5);
	lv_chart_set_point_count(ui->screen_chart_2, 5);
	lv_chart_set_range(ui->screen_chart_2, LV_CHART_AXIS_PRIMARY_Y, 0, 100);
	lv_chart_set_range(ui->screen_chart_2, LV_CHART_AXIS_SECONDARY_Y, 0, 100);
	lv_chart_set_zoom_x(ui->screen_chart_2, 256);
	lv_chart_set_zoom_y(ui->screen_chart_2, 256);
	ui->screen_chart_2_0 = lv_chart_add_series(ui->screen_chart_2, lv_color_hex(0x000000), LV_CHART_AXIS_PRIMARY_Y);
#if LV_USE_FREEMASTER == 0
	lv_chart_set_next_value(ui->screen_chart_2, ui->screen_chart_2_0, 1);
	lv_chart_set_next_value(ui->screen_chart_2, ui->screen_chart_2_0, 20);
	lv_chart_set_next_value(ui->screen_chart_2, ui->screen_chart_2_0, 30);
	lv_chart_set_next_value(ui->screen_chart_2, ui->screen_chart_2_0, 40);
	lv_chart_set_next_value(ui->screen_chart_2, ui->screen_chart_2_0, 5);
#endif
	lv_obj_set_pos(ui->screen_chart_2, 416, 40);
	lv_obj_set_size(ui->screen_chart_2, 352, 220);
	lv_obj_set_scrollbar_mode(ui->screen_chart_2, LV_SCROLLBAR_MODE_OFF);

	//Write style for screen_chart_2, Part: LV_PART_MAIN, State: LV_STATE_DEFAULT.
	lv_obj_set_style_bg_opa(ui->screen_chart_2, 255, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_bg_color(ui->screen_chart_2, lv_color_hex(0xffffff), LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_bg_grad_dir(ui->screen_chart_2, LV_GRAD_DIR_NONE, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_border_width(ui->screen_chart_2, 1, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_border_opa(ui->screen_chart_2, 255, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_border_color(ui->screen_chart_2, lv_color_hex(0xe8e8e8), LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_border_side(ui->screen_chart_2, LV_BORDER_SIDE_FULL, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_radius(ui->screen_chart_2, 0, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_line_width(ui->screen_chart_2, 2, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_line_color(ui->screen_chart_2, lv_color_hex(0xe8e8e8), LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_line_opa(ui->screen_chart_2, 255, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_shadow_width(ui->screen_chart_2, 0, LV_PART_MAIN|LV_STATE_DEFAULT);

	//Write style for screen_chart_2, Part: LV_PART_TICKS, State: LV_STATE_DEFAULT.
	lv_obj_set_style_text_color(ui->screen_chart_2, lv_color_hex(0x151212), LV_PART_TICKS|LV_STATE_DEFAULT);
	lv_obj_set_style_text_font(ui->screen_chart_2, &lv_font_montserratMedium_12, LV_PART_TICKS|LV_STATE_DEFAULT);
	lv_obj_set_style_text_opa(ui->screen_chart_2, 255, LV_PART_TICKS|LV_STATE_DEFAULT);
	lv_obj_set_style_line_width(ui->screen_chart_2, 2, LV_PART_TICKS|LV_STATE_DEFAULT);
	lv_obj_set_style_line_color(ui->screen_chart_2, lv_color_hex(0xe8e8e8), LV_PART_TICKS|LV_STATE_DEFAULT);
	lv_obj_set_style_line_opa(ui->screen_chart_2, 255, LV_PART_TICKS|LV_STATE_DEFAULT);

	//Write codes screen_spinner_1
	ui->screen_spinner_1 = lv_spinner_create(ui->screen, 1000, 60);
	lv_obj_set_pos(ui->screen_spinner_1, 339, 301);
	lv_obj_set_size(ui->screen_spinner_1, 100, 100);

	//Write style for screen_spinner_1, Part: LV_PART_MAIN, State: LV_STATE_DEFAULT.
	lv_obj_set_style_pad_top(ui->screen_spinner_1, 5, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_pad_bottom(ui->screen_spinner_1, 5, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_pad_left(ui->screen_spinner_1, 5, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_pad_right(ui->screen_spinner_1, 5, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_bg_opa(ui->screen_spinner_1, 255, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_bg_color(ui->screen_spinner_1, lv_color_hex(0xeeeef6), LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_bg_grad_dir(ui->screen_spinner_1, LV_GRAD_DIR_NONE, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_arc_width(ui->screen_spinner_1, 12, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_arc_opa(ui->screen_spinner_1, 255, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_arc_color(ui->screen_spinner_1, lv_color_hex(0xd5d6de), LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_shadow_width(ui->screen_spinner_1, 0, LV_PART_MAIN|LV_STATE_DEFAULT);

	//Write style for screen_spinner_1, Part: LV_PART_INDICATOR, State: LV_STATE_DEFAULT.
	lv_obj_set_style_arc_width(ui->screen_spinner_1, 12, LV_PART_INDICATOR|LV_STATE_DEFAULT);
	lv_obj_set_style_arc_opa(ui->screen_spinner_1, 255, LV_PART_INDICATOR|LV_STATE_DEFAULT);
	lv_obj_set_style_arc_color(ui->screen_spinner_1, lv_color_hex(0x2195f6), LV_PART_INDICATOR|LV_STATE_DEFAULT);

	//The custom code of screen.
	

	//Update current screen layout.
	lv_obj_update_layout(ui->screen);

}