Perspective

The perspective is a hexagonal prism-like widget that uses six tabs as column faces. Once the perspective widget is created, it automatically rotates to display different tabs. During the rotation, you can also click on different tabs to quickly jump to the desired tab.

Usage

Create Perspective Widget

gui_perspective_create() is used to create a perspective widget. The img_file is a structure that contains image resources for the six tabs. When creating the perspective widget, the image resources for the six tabs can be specified using either memory addresses or file paths. The src_mode field in gui_perspective_imgfile_t (refer to the following structure) indicates whether the image resource originates from a memory address or a file path. For instance, when src_mode is set to IMG_SRC_MEMADDR, it means the image resource comes from a memory address.

typedef struct
{
    IMG_SOURCE_MODE_TYPE src_mode[6];                    //!< Flag: indicate file src.
    union
    {
        char *img_path[6];               //!< Images file path.
        void *data_addr[6];              //!< Images memory address.
    };
} gui_perspective_imgfile_t;

Set Image for Perspective

The images of cube can be configured by calling gui_perspective_set_img().

Set Image Blending Mode

By default, the image blending mode is set to IMG_SRC_OVER_MODE, you can change the image blending mode by calling gui_perspective_set_mode(). The BLEND_MODE_TYPE enumeration for the blending modes is as follows:

typedef enum
{
    IMG_BYPASS_MODE = 0,
    IMG_FILTER_BLACK,
    IMG_SRC_OVER_MODE, //S * Sa + (1 - Sa) * D
    IMG_COVER_MODE,
    IMG_RECT,
} BLEND_MODE_TYPE;

Example

#include "root_image_hongkong/ui_resource.h"
#include "gui_perspective.h"
#include "gui_canvas.h"
#include "gui_win.h"
#include "gui_obj.h"
#include "gui_app.h"
#include <gui_tabview.h>
#include "app_hongkong.h"


extern gui_tabview_t *tv;
gui_perspective_t *img_test;


static void canvas_cb_black(gui_canvas_t *canvas)
{
    nvgRect(canvas->vg, 0, 0, 368, 448);
    nvgFillColor(canvas->vg, nvgRGBA(0, 0, 128, 255));
    nvgFill(canvas->vg);
}

static void callback_prism_touch_clicked()
{
    gui_app_t *app = get_app_hongkong();
    gui_obj_t *screen = &(app->screen);
    int angle = img_test->release_x;
    if (img_test->release_x < 0)
    {
        angle = img_test->release_x + 360;
    }
    angle = (angle % 360) / (360 / 6);
    if (angle < 0 || angle > 5)
    {
        angle = 0;
    }

    gui_obj_tree_free(screen);
    app->ui_design(get_app_hongkong());


    gui_tabview_jump_tab(tv, angle, 0);
}
void callback_prism(void *obj, gui_event_t e)
{
    gui_app_t *app = get_app_hongkong();
    gui_obj_t *screen = &(app->screen);

    gui_obj_tree_free(screen);

    gui_win_t *win = gui_win_create(screen, "win", 0, 0, 368, 448);
    gui_canvas_t *canvas = gui_canvas_create(win, "canvas", 0, 0, 0, 368, 448);
    gui_canvas_set_canvas_cb(canvas, canvas_cb_black);

    gui_perspective_imgfile_t imgfile =
    {
        .src_mode[0] = IMG_SRC_MEMADDR, .src_mode[1] = IMG_SRC_MEMADDR, .src_mode[2] = IMG_SRC_MEMADDR,
        .src_mode[3] = IMG_SRC_MEMADDR, .src_mode[4] = IMG_SRC_MEMADDR, .src_mode[5] = IMG_SRC_MEMADDR,
        .data_addr[0] = CLOCKN_BIN,
        .data_addr[1] = WEATHER_BIN,
        .data_addr[2] = MUSIC_BIN,
        .data_addr[3] = QUICKCARD_BIN,
        .data_addr[4] = HEARTRATE_BIN,
        .data_addr[5] = ACTIVITY_BIN
    };
    img_test = gui_perspective_create(canvas, "test", &imgfile, 0, 0);

    gui_obj_add_event_cb(win, (gui_event_cb_t)callback_prism_touch_clicked, GUI_EVENT_TOUCH_CLICKED,
                         NULL);
}

API

Defines

RAD(d) (d*3.1415926f/180.0f): Angle to rad.

Functions

void gui_perspective_set_mode(gui_perspective_t *perspective, uint8_t img_index, BLEND_MODE_TYPE mode)

Set the perspective image’s blend mode.

Parameters:

perspective – The perspective widget pointer.
img_index – The perspective image’s index.
mode – The enumeration value of the mode is BLEND_MODE_TYPE.

void gui_perspective_set_img(gui_perspective_t *perspective, gui_perspective_imgfile_t *img_file)

Set perspective image.

Parameters:

perspective – The perspective widget pointer.
img_file – The image file data, set flg_fs true when using filesystem.

gui_perspective_t *gui_perspective_create(void *parent, const char *name, gui_perspective_imgfile_t *img_file, int16_t x, int16_t y)

Create 3D perspective, images can be loaded from filesystem or memory address.

Example usage

void perspctive_example(void *parent)
{
    gui_perspective_imgfile_t imgfile =
    {
        .flg_fs = true,
        .img_path[0] = "Clockn.bin",
        .img_path[1] = "Weather.bin",
        .img_path[2] = "Music.bin",
        .img_path[3] = "QuickCard.bin",
        .img_path[4] = "HeartRate.bin",
        .img_path[5] = "Activity.bin"
    };
    img_test = gui_perspective_create(canvas, "test", &imgfile, 0, 0);
}

Parameters:

parent – Parent widget.
name – Widget name.
img_file – The image file data, set flg_fs true when using filesystem.
x – Left.
y – Top.

Returns:

gui_perspective_t* Widget pointer.

struct gui_perspective_imgfile_t

Public Members

IMG_SOURCE_MODE_TYPE src_mode[6]: Flag: indicate file src.

char *img_path[6]: Images file path.

void *data_addr[6]: Images memory address.

union gui_perspective_imgfile_t

struct gui_perspective_t

Public Members

gui_obj_t base: Base structure.

draw_img_t img[6]

int ry[6]

int temp[6]

void *file_path[6]

void *ftl[6]

union gui_perspective_t

void *data[6]

uint8_t src_mode[6]

int16_t release_x

uint8_t checksum