View

The view widget is a kind of container that makes switching more convenient. Any new view widget can be created in real time in response to an event(clicking and sliding in all four directions…) and multiple switching effects can be selected. During the switching process, there will be two views in the memory, and after the switching is completed, the undisplayed view will be automatically cleaned up, which can effectively reduce the memory consumption.

Usage

Register Descriptor of View

The gui_view_descriptor_register() function can be used to register descriptor of view in the descriptor list for other view to read and use as a parameter to create the view, via passing in the descriptor’s address. The gui_view_descriptor structure is defined as follows:

typedef struct gui_view_descriptor
{
    const char *name;
    gui_view_t **pView;
    void (* design_cb)(gui_view_t *view);
} gui_view_descriptor_t;

Get Descriptor of View by Name

The gui_view_descriptor_get() function can be used to get the view descriptor with the corresponding name by passing in the string.

Set Switch View Event

The gui_view_switch_on_event() function can be used to set switch view event. Repeatable settings for a particular event will use the latest descriptor. Specific events include GUI_EVENT_TOUCH_CLICKED 、 GUI_EVENT_KB_SHORT_CLICKED 、 GUI_EVENT_TOUCH_MOVE_LEFT、 GUI_EVENT_TOUCH_MOVE_RIGHT and so on. The available switching styles include the following:

typedef enum
{
    VIEW_STILL            = 0x0000, ///< Overlay effect with new view transplate in
    VIEW_TRANSPLATION     = 0x0001, ///< Transplate from the slide direction
    VIEW_REDUCTION        = 0x0002, ///< Zoom in from the slide direction
    VIEW_ROTATE           = 0x0003, ///< Rotate in from the slide direction
    VIEW_CUBE             = 0x0004, ///< Rotate in from the slide direction like cube
    VIEW_ANIMATION_NULL   = 0x0005,
    VIEW_ANIMATION_1,               ///< Recommended for startup
    VIEW_ANIMATION_2,               ///< Recommended for startup
    VIEW_ANIMATION_3,               ///< Recommended for startup
    VIEW_ANIMATION_4,               ///< Recommended for startup
    VIEW_ANIMATION_5,               ///< Recommended for startup
    VIEW_ANIMATION_6,               ///< Recommended for shutdown
    VIEW_ANIMATION_7,               ///< Recommended for shutdown
    VIEW_ANIMATION_8,               ///< Recommended for shutdown
} VIEW_SWITCH_STYLE;

Switch View Directly

The gui_view_switch_direct() function can be used to switch view directly, which can be used in conjunction with events or animations of the child widgets based on view. Note that the switching style is limited to the animation style and cannot be set to the sliding style.

Get Current View Pointer

The gui_view_get_current_view() function can be used to get current view pointer, and can be used with gui_view_switch_direct() to switch the current view.

Example

View

Below are three separate C files, each containing a descriptor for the view and the design function.

#include "guidef.h"
#include "gui_img.h"
#include "gui_obj.h"
#include "string.h"
#include "stdio.h"
#include "stdlib.h"
#include <gui_app.h>
#include "tiger_blue.txt"
#include "tiger_white.txt"
#include "tiger_yellow.txt"
#include "gui_server.h"
#include "gui_components_init.h"
#include "gui_win.h"
#include "gui_view.h"
#include "gui_fps.h"

#define CURRENT_VIEW_NAME "blue_view"


static gui_view_t *current_view = NULL;
const static gui_view_descriptor_t *yellow_view = NULL;
const static gui_view_descriptor_t *white_view = NULL;
static void app_ui_view_blue_design(gui_view_t *view);


static gui_view_descriptor_t const descriptor =
{
    /* change Here for current view */
    .name = (const char *)CURRENT_VIEW_NAME,
    .pView = &current_view,
    .design_cb = app_ui_view_blue_design,
};

static int gui_view_descriptor_register_init(void)
{
    gui_view_descriptor_register(&descriptor);
    gui_log("File: %s, Function: %s\n", __FILE__, __func__);
    return 0;
}
static GUI_INIT_VIEW_DESCRIPTOR_REGISTER(gui_view_descriptor_register_init);


static int gui_view_get_other_view_descriptor_init(void)
{
    /* you can get other view descriptor point here */
    yellow_view = gui_view_descriptor_get("yellow_view");
    white_view = gui_view_descriptor_get("white_view");
    gui_log("File: %s, Function: %s\n", __FILE__, __func__);
    return 0;
}
static GUI_INIT_VIEW_DESCRIPTOR_GET(gui_view_get_other_view_descriptor_init);


static void app_ui_design(gui_app_t *app)
{
    gui_win_t *win_view = gui_win_create(app->window, "win_view", 0, 0, 0, 0);
    current_view = gui_view_create(win_view, &descriptor, 0, 0, 0, 0);
    gui_fps_create(app->window);
}
/* view demo end*/

static gui_app_t rtk_gui_demo =
{
    .screen =
    {
        .name = "rtk_gui_demo",
        .x    = 0,
        .y    = 0,
    },
    .ui_design = app_ui_design,
    .active_ms = 1000 * 60 * 60,
};


static int app_init(void)
{
    gui_app_startup(&rtk_gui_demo);
    return 0;
}

GUI_INIT_APP_EXPORT(app_init);

static void app_ui_view_blue_design(gui_view_t *view)
{
    gui_img_t *img = gui_img_create_from_mem(view, "img", (void *)_actiger_blue, 0, 0, 0,
                                             0);
    gui_img_scale(img, 1.875f, 2.034f);
    gui_img_set_mode(img, IMG_BYPASS_MODE);

    gui_view_switch_on_event(view, yellow_view, VIEW_CUBE, VIEW_CUBE,
                             GUI_EVENT_TOUCH_MOVE_RIGHT);

    gui_view_switch_on_event(view, white_view, VIEW_CUBE, VIEW_CUBE, GUI_EVENT_TOUCH_MOVE_LEFT);

    gui_view_switch_on_event(view, white_view, VIEW_CUBE, VIEW_CUBE,
                             GUI_EVENT_TOUCH_MOVE_UP);

    gui_view_switch_on_event(view, yellow_view, VIEW_CUBE, VIEW_CUBE,
                             GUI_EVENT_TOUCH_MOVE_DOWN);

    gui_view_switch_on_event(view, white_view, VIEW_ANIMATION_7, VIEW_ANIMATION_3,
                             GUI_EVENT_TOUCH_CLICKED);
    gui_view_switch_on_event(view, yellow_view, VIEW_ANIMATION_7, VIEW_ANIMATION_3,
                             GUI_EVENT_KB_SHORT_CLICKED);
}

#include "guidef.h"
#include "gui_img.h"
#include "gui_obj.h"
#include "string.h"
#include "stdio.h"
#include "stdlib.h"
#include <gui_app.h>
#include "tiger_blue.txt"
#include "tiger_grey.txt"
#include "tiger_laven.txt"
#include "tiger_lime.txt"
#include "tiger_turk.txt"
#include "tiger_white.txt"
#include "tiger_yellow.txt"
#include "gui_server.h"
#include "gui_components_init.h"
#include "gui_cube.h"
#include "gui_view.h"

#define CURRENT_VIEW_NAME "white_view"


static gui_view_t *current_view = NULL;
const static gui_view_descriptor_t *blue_view = NULL;
const static gui_view_descriptor_t *yellow_view = NULL;
static void app_ui_view_white_design(gui_view_t *view);

static gui_view_descriptor_t const descriptor =
{
    /* change Here for current view */
    .name = (const char *)CURRENT_VIEW_NAME,
    .pView = &current_view,
    .design_cb = app_ui_view_white_design,
};

static int gui_view_descriptor_register_init(void)
{
    gui_view_descriptor_register(&descriptor);
    gui_log("File: %s, Function: %s\n", __FILE__, __func__);

    return 0;
}
static GUI_INIT_VIEW_DESCRIPTOR_REGISTER(gui_view_descriptor_register_init);

static int gui_view_get_other_view_descriptor_init(void)
{
    /* you can get other view descriptor point here */
    blue_view = gui_view_descriptor_get("blue_view");
    yellow_view = gui_view_descriptor_get("yellow_view");
    gui_log("File: %s, Function: %s\n", __FILE__, __func__);
    return 0;
}
static GUI_INIT_VIEW_DESCRIPTOR_GET(gui_view_get_other_view_descriptor_init);

void img_cb()
{
    gui_view_switch_direct(current_view, yellow_view, VIEW_ANIMATION_6, VIEW_ANIMATION_2);
}

static void app_ui_view_white_design(gui_view_t *view)
{
    gui_img_t *img = gui_img_create_from_mem(view, "img", (void *)_actiger_white, 0, 0, 0,
                                             0);
    gui_img_scale(img, 1.875f, 2.034f);
    gui_img_set_mode(img, IMG_BYPASS_MODE);
    gui_obj_add_event_cb(img, (gui_event_cb_t)img_cb, GUI_EVENT_1, NULL);

    gui_view_switch_on_event(view, blue_view, VIEW_REDUCTION, VIEW_REDUCTION,
                             GUI_EVENT_TOUCH_MOVE_RIGHT);

    gui_view_switch_on_event(view, yellow_view, VIEW_CUBE, VIEW_CUBE, GUI_EVENT_TOUCH_MOVE_LEFT);

    gui_view_switch_on_event(view, yellow_view, VIEW_STILL, VIEW_TRANSPLATION,
                             GUI_EVENT_TOUCH_MOVE_UP);

    gui_view_switch_on_event(view, blue_view, VIEW_CUBE, VIEW_CUBE,
                             GUI_EVENT_TOUCH_MOVE_DOWN);

    gui_view_switch_on_event(view, blue_view, VIEW_ANIMATION_6, VIEW_ANIMATION_2,
                             GUI_EVENT_KB_SHORT_CLICKED);
    // gui_view_switch_on_event(view, yellow_view, VIEW_ANIMATION_6, VIEW_ANIMATION_2,
    //                          GUI_EVENT_TOUCH_CLICKED);
}

#include "guidef.h"
#include "gui_img.h"
#include "gui_obj.h"
#include "string.h"
#include "stdio.h"
#include "stdlib.h"
#include <gui_app.h>
#include "tiger_blue.txt"
#include "tiger_grey.txt"
#include "tiger_laven.txt"
#include "tiger_lime.txt"
#include "tiger_turk.txt"
#include "tiger_white.txt"
#include "tiger_yellow.txt"
#include "gui_server.h"
#include "gui_components_init.h"
#include "gui_view.h"

#define CURRENT_VIEW_NAME "yellow_view"


static gui_view_t *current_view = NULL;
const static gui_view_descriptor_t *blue_view = NULL;
const static gui_view_descriptor_t *white_view = NULL;
static void app_ui_view_yellow_design(gui_view_t *view);

static const gui_view_descriptor_t descriptor =
{
    /* change Here for current view */
    .name = (const char *)CURRENT_VIEW_NAME,
    .pView = &current_view,
    .design_cb = app_ui_view_yellow_design,
};


static int gui_view_descriptor_register_init(void)
{
    gui_view_descriptor_register(&descriptor);
    gui_log("File: %s, Function: %s\n", __FILE__, __func__);
    return 0;
}
static GUI_INIT_VIEW_DESCRIPTOR_REGISTER(gui_view_descriptor_register_init);


static int gui_view_get_other_view_descriptor_init(void)
{
    /* you can get other view descriptor point here */
    blue_view = gui_view_descriptor_get("blue_view");
    white_view = gui_view_descriptor_get("white_view");
    gui_log("File: %s, Function: %s\n", __FILE__, __func__);
    return 0;
}
static GUI_INIT_VIEW_DESCRIPTOR_GET(gui_view_get_other_view_descriptor_init);

static void app_ui_view_yellow_design(gui_view_t *view)
{
    gui_img_t *img = gui_img_create_from_mem(view, "img", (void *)_actiger_yellow, 0, 0, 0,
                                             0);
    gui_img_scale(img, 1.875f, 2.034f);
    gui_img_set_mode(img, IMG_BYPASS_MODE);

    gui_view_switch_on_event(view, blue_view, VIEW_REDUCTION, VIEW_REDUCTION,
                             GUI_EVENT_TOUCH_MOVE_RIGHT);

    gui_view_switch_on_event(view, white_view, VIEW_ROTATE, VIEW_ROTATE, GUI_EVENT_TOUCH_MOVE_LEFT);

    gui_view_switch_on_event(view, white_view, VIEW_STILL, VIEW_TRANSPLATION,
                             GUI_EVENT_TOUCH_MOVE_UP);

    gui_view_switch_on_event(view, blue_view, VIEW_ROTATE, VIEW_ROTATE,
                             GUI_EVENT_TOUCH_MOVE_DOWN);

    gui_view_switch_on_event(view, blue_view, VIEW_ANIMATION_8, VIEW_ANIMATION_1,
                             GUI_EVENT_TOUCH_CLICKED);
    gui_view_switch_on_event(view, white_view, VIEW_ANIMATION_8, VIEW_ANIMATION_1,
                             GUI_EVENT_KB_SHORT_CLICKED);
}

API

Defines

EVENT_NUM_MAX 10

Enums

enum VIEW_SWITCH_STYLE

Values:

enumerator VIEW_STILL: Overlay effect with new view transplate in.

enumerator VIEW_TRANSPLATION: Transplate from the slide direction.

enumerator VIEW_REDUCTION: Zoom in from the slide direction.

enumerator VIEW_ROTATE: Rotate in from the slide direction.

enumerator VIEW_CUBE: Rotate in from the slide direction like cube.

enumerator VIEW_ANIMATION_NULL

enumerator VIEW_ANIMATION_1: Recommended for startup.

enumerator VIEW_ANIMATION_2: Recommended for startup.

enumerator VIEW_ANIMATION_3: Recommended for startup.

enumerator VIEW_ANIMATION_4: Recommended for startup.

enumerator VIEW_ANIMATION_5: Recommended for startup.

enumerator VIEW_ANIMATION_6: Recommended for shutdown.

enumerator VIEW_ANIMATION_7: Recommended for shutdown.

enumerator VIEW_ANIMATION_8: Recommended for shutdown.

Functions

gui_view_t *gui_view_create(void *parent, const gui_view_descriptor_t *descriptor, int16_t x, int16_t y, int16_t w, int16_t h)

Creates a view widget.

Parameters:

parent – The parent widget it is nested in.
descriptor – Pointer to a descriptor that defines the new view to switch to.
x – The X-axis coordinate relative to the parent widget.
y – The Y-axis coordinate relative to the parent widget.
w – Width.
h – Height.

Returns:

The widget object pointer.

void gui_view_descriptor_register(const gui_view_descriptor_t *descriptor)

Registers a view’s descriptor.

Parameters:: descriptor – Pointer to a descriptor that defines the new view to switch to.

const gui_view_descriptor_t *gui_view_descriptor_get(const char *name)

Gets the target view’s descriptor by name.

Parameters:: name – View descriptor’s name used to find the target view.

void gui_view_switch_on_event(gui_view_t *_this, const gui_view_descriptor_t *descriptor, VIEW_SWITCH_STYLE switch_out_style, VIEW_SWITCH_STYLE switch_in_style, gui_event_t event)

Switches the current GUI view to a new view based on the specified event.

Parameters:

_this – Pointer to the current GUI view context.
descriptor – Pointer to a descriptor that defines the new view to switch to.
switch_out_style – Style applied to the outgoing view during the switch.
switch_in_style – Style applied to the incoming view during the switch.
event – The event that triggers the view switch.

void gui_view_switch_direct(gui_view_t *_this, const gui_view_descriptor_t *descriptor, VIEW_SWITCH_STYLE switch_out_style, VIEW_SWITCH_STYLE switch_in_style)

Switches the current GUI view directly to a new view through animation.

Parameters:

_this – Pointer to the current GUI view context.
descriptor – Pointer to a descriptor that defines the new view to switch to.
switch_out_style – Style applied to the outgoing view during the switch.
switch_in_style – Style applied to the incoming view during the switch.

gui_view_t *gui_view_get_current_view(void)

Gets the current view pointer.

Returns:: The current view pointer.

struct gui_view_id_t

Public Members

int8_t x

int8_t y

struct gui_view_t

Public Members

gui_obj_t base

int16_t release_x

int16_t release_y

int16_t release_his

gui_animate_t *animate

gui_view_id_t cur_id

VIEW_SWITCH_STYLE style

uint32_t view_switch_ready

uint32_t event

uint32_t moveback

uint32_t view_tp

uint32_t view_left

uint32_t view_right

uint32_t view_up

uint32_t view_down

uint32_t view_click

uint32_t view_touch_long

uint32_t view_button

uint32_t view_button_long

struct gui_view_on_event *on_event[EVENT_NUM_MAX]

uint8_t on_event_num

uint8_t checksum

struct gui_view_descriptor_t

Public Members

const char *name

gui_view_t **pView

void (*design_cb)(gui_view_t *view)

struct gui_view_on_event_t

Public Members

const gui_view_descriptor_t *descriptor

VIEW_SWITCH_STYLE switch_out_style

VIEW_SWITCH_STYLE switch_in_style

gui_event_t event

View

Usage

Register Descriptor of View

Get Descriptor of View by Name

Create View Widget

Set Switch View Event

Switch View Directly

Get Current View Pointer

Example

View

API