List

The list widget is a container for any number of list note, horizontally or vertically. And each note, which is dynamic created for saving memory and CPU usage, can have other widgets added to it, such as text widgets, image widgets, etc. Users can swipe up, down, left, or right to access other widgets added to the list note.

Vertical Classic List

Usage

Create List Widget

The gui_list_create() function can be used to create a list widget, in which the scroll bar is optional, and the next level of the list widget can only be a note widget. In note_design, the corresponding child widget could be designed according to the index of the list widget to dynamically create the note widget. The total length of the list widget is determined by the number of note added, the length of the note, and the space between the tables; as more tables are added, the length increases.

Set List Widget Style

The gui_list_set_style() function can be used to set list moving style. The default is LIST_CLASSIC, and the available styles include the following:

typedef enum
{
    LIST_CLASSIC = 0x0000, ///< Classic list.
    LIST_CIRCLE,           ///< Circle list.
    LIST_ZOOM,             ///< Zoom center list.
    LIST_CARD,             ///< Stack like card.
    LIST_FAN,              ///< Rotate like fan.
    LIST_HELIX,            ///< Rotate like helix.
    LIST_CURL,             ///< Rotate curly.
} LIST_STYLE;

Example

#include "guidef.h"
#include "string.h"
#include "stdio.h"
#include "stdlib.h"
#include "gui_server.h"
#include "gui_components_init.h"
#include "gui_canvas_rect.h"
#include "gui_list.h"

/* Use the following macro to checkout the different style lists */
#define RUN_VERTICAL_CIRCLE_STYLE
// #define RUN_VERTICAL_CARD_STYLE
// #define RUN_HORIZONTAL_ZOOM_STYLE
// #define RUN_VERTICAL_FAN_STYLE
// #define RUN_VERTICAL_HELIX_STYLE
// #define RUN_VERTICAL_CURL_STYLE

#define NOTE_NUM 20

int length = 100;

static void note_design(gui_obj_t *obj, void *p)
{
    gui_color_t color[] =
    {
        APP_COLOR_WHITE_OPACITY,
        APP_COLOR_GRAY,
        APP_COLOR_SILVER_OPACITY(150),
        APP_COLOR_WHITE,
        APP_COLOR_GRAY_OPACITY(150),
        APP_COLOR_RED,
        APP_COLOR_GREEN,
        APP_COLOR_BLUE,
    };
    uint16_t index = ((gui_list_note_t *)obj)->index % (sizeof(color) / sizeof(gui_color_t));
#ifdef RUN_VERTICAL_CIRCLE_STYLE
    gui_canvas_rect_t *canvas = gui_canvas_rect_create(obj, "note", 0, 0, 480, 100, color[index]);
#endif

#ifdef RUN_HORIZONTAL_ZOOM_STYLE
    gui_canvas_rect_t *canvas = gui_canvas_rect_create(obj, "note", 0, 0, 100, 480, color[index]);
#endif

#ifdef RUN_VERTICAL_CARD_STYLE
    gui_canvas_rect_t *canvas = gui_canvas_rect_create(obj, "note", 50, 0, 380, 150, color[index]);
#endif

#ifdef RUN_VERTICAL_FAN_STYLE
    gui_color_t color2[] =
    {
        APP_COLOR_SILVER_OPACITY(150),
        APP_COLOR_WHITE_OPACITY,
    };
    gui_canvas_rect_t *canvas = gui_canvas_rect_create(obj, "note", 50, 0, 380, 100, color2[index % 2]);
#endif

#ifdef RUN_VERTICAL_HELIX_STYLE
    gui_color_t color2[] =
    {
        APP_COLOR_SILVER_OPACITY(150),
        APP_COLOR_WHITE_OPACITY,
    };
    gui_canvas_rect_t *canvas = gui_canvas_rect_create(obj, "note", 50, 0, 380, 100, color2[index % 2]);
#endif

#ifdef RUN_VERTICAL_CURL_STYLE
    gui_color_t color2[] =
    {
        APP_COLOR_SILVER_OPACITY(150),
        APP_COLOR_WHITE_OPACITY,
    };
    gui_canvas_rect_t *canvas = gui_canvas_rect_create(obj, "note", 0, 0, 0, 100, color2[index % 2]);
#endif
}

static int app_init(void)
{
    uint16_t space = 5;

    /* VERTICAL CIRCLE STYLE */
#ifdef RUN_VERTICAL_CIRCLE_STYLE

    gui_list_t *list = gui_list_create(gui_obj_get_root(), "list", 0, 0, 0, 0, length, space, VERTICAL,
                                       note_design, NULL, false);
    gui_list_set_note_num(list, NOTE_NUM);
    gui_list_set_style(list, LIST_CIRCLE);
    return 0;
#endif


    /* VERTICAL CARD STYLE */
#ifdef RUN_VERTICAL_CARD_STYLE
    int length = 150;
    gui_list_t *list = gui_list_create(gui_obj_get_root(), "list", 0, 0, 0, 0, length, space, VERTICAL,
                                       note_design, NULL,
                                       false);
    gui_list_set_style(list, LIST_CARD); //if LIST_CARD style, must set style before set note num
    gui_list_set_note_num(list, NOTE_NUM);
    return 0;
#endif

    /* HORIZONTAL ZOOM STYLE */
#ifdef RUN_HORIZONTAL_ZOOM_STYLE

    gui_list_t *list = gui_list_create(gui_obj_get_root(), "list", 0, 0, 0, 0, length, space,
                                       HORIZONTAL, note_design, NULL, false);
    gui_list_set_note_num(list, NOTE_NUM);
    gui_list_set_style(list, LIST_ZOOM);
    return 0;
#endif

    /* VERTICAL FAN STYLE */
#ifdef RUN_VERTICAL_FAN_STYLE

    gui_list_t *list = gui_list_create(gui_obj_get_root(), "list", 0, 0, 0, 0, length, space, VERTICAL,
                                       note_design, NULL, false);
    gui_list_set_note_num(list, NOTE_NUM);
    gui_list_set_style(list, LIST_FAN);
    return 0;
#endif

    /* VERTICAL HELIX STYLE */
#ifdef RUN_VERTICAL_HELIX_STYLE
    gui_list_t *list = gui_list_create(gui_obj_get_root(), "list", 0, 0, 0, 0, length, space, VERTICAL,
                                       note_design, NULL, true);
    gui_list_set_note_num(list, NOTE_NUM);
    gui_list_set_style(list, LIST_HELIX);
    return 0;
#endif

    /* VERTICAL CURL STYLE */
#ifdef RUN_VERTICAL_CURL_STYLE
    space = 0;

    gui_list_t *list = gui_list_create(gui_obj_get_root(), "list", 0, 0, 0, 0, length, space, VERTICAL,
                                       note_design, NULL, false);
    gui_list_set_note_num(list, NOTE_NUM);
    gui_list_set_style(list, LIST_CURL);
    return 0;
#endif
}

GUI_INIT_APP_EXPORT(app_init);

Vertical Circle Style

Vertical Card Style

Horizontal Zoom Style

Vertical Fan Style

Vertical Helix Style

Vertical Curl Style

API

Defines

OUT_SCOPE 0

GUI_MAX_SPEED 50

GUI_MIN_SPEED 7

LIST_TAB_ANIMATE_MAX 15

LIST_BAR_WIDTH 5

Enums

enum LIST_STYLE

Values:

enumerator LIST_CLASSIC: Classic list.

enumerator LIST_CIRCLE: Circle list.

enumerator LIST_ZOOM: Zoom center list.

enumerator LIST_CARD: Stack like card.

enumerator LIST_FAN: Rotate like fan.

enumerator LIST_HELIX: Rotate like helix.

enumerator LIST_CURL: Rotate curly.

enum LIST_DIR

Values:

enumerator VERTICAL

enumerator HORIZONTAL

Functions

gui_list_t *gui_list_create(void *parent, const char *name, int16_t x, int16_t y, int16_t w, int16_t h, uint16_t note_length, uint8_t space, LIST_DIR dir, void (*note_design)(gui_obj_t *obj, void *param), void *design_param, bool create_bar)

Create a list widget.

Parameters:

parent – The father widget it nested in.
name – The name of the widget.
x – The X-axis coordinate relative to parent widget.
y – The Y-axis coordinate relative to parent widget.
w – Width.
h – Height.
note_length – The length of each note.
space – The space of each note.
dir – The direction of the list.

Returns:

Return the widget object pointer.

void gui_list_set_style(gui_list_t *list, LIST_STYLE style)

Set list moving style.

Parameters:

list – Pointer to the list widget.
style – The moving style of the list.

void gui_list_set_factor(gui_list_t *list, float factor)

Set list deceleration factor, which defaults to 0.05.

Parameters:

list – Pointer to the list widget.
factor – The deceleration factor.

void gui_list_set_offset(gui_list_t *list, int16_t offset)

Set list offset, can be used to change list initial position.

Parameters:

list – Pointer to the list widget.
offset – The list offset.

void gui_list_set_bar_color(gui_list_t *list, gui_color_t color)

Set list bar color.

Parameters:

list – Pointer to the list widget.
color – The list bar color.

void gui_list_set_note_num(gui_list_t *list, uint16_t num)

Set note number of list.

Parameters:

list – Pointer to the list widget.
num – The spacific number, must be a nonnegative number.

void gui_list_set_card_stack_location(gui_list_t *list, int16_t location)

struct gui_list_t

List Structure.

Public Members

gui_obj_t base

LIST_STYLE style

LIST_DIR dir

uint8_t note_num

uint8_t space

uint16_t note_length

int16_t speed

int16_t record[5]

float factor

int offset

int hold

int total_length

int16_t card_stack_location

uint16_t created_note_index

uint8_t keep_note_num

void (*note_design)(gui_obj_t *obj, void *param)

void *design_param

gui_img_t *bar

void *bar_data

gui_color_t bar_color

bool need_update_bar

uint8_t checksum

struct gui_list_note_t

List Note Structure.

Public Members

gui_obj_t base

int start_x

int start_y

int t_x

int t_y

uint16_t animate_cnt

bool is_speed_positive

int16_t index

uint8_t checksum

List

Usage

Create List Widget

Set List Widget Style

Set List Widget Deceleration Factor

Set List Widget Offset

Set List Widget Scroll Bar Color

Set List Widget Note Number

Example

API