Perspective

The perspective is a hexagonal prism-like widget that uses six tabs as column faces. The prism will automatically rotate to show all tabs. A single click allows the user to quick jump to the current tab.

Usage

Create perspective widget

gui_perspective_t *gui_perspective_create(void *parent, const char *name, gui_perspective_imgfile_t *img_file, int16_t x, int16_t y) is used to create a perspective widget. The img_file is an struct including image sources for the six pages. Both memory address and file path are supported, 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

The images of cube can be configured by calling void gui_perspective_set_img(gui_perspective_t *perspective, gui_perspective_imgfile_t *img_file).

Set image mode

By default, the cube’s image blend mode is IMG_SRC_OVER_MODE, you can change the blend mode of image by calling void gui_perspective_set_mode(gui_perspective_t *perspective, uint8_t img_index, BLEND_MODE_TYPE mode).

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)

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

#include <gui_perspective.h>

…

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.[anonymous] [anonymous]

struct gui_perspective_t

#include <gui_perspective.h>

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.[anonymous] [anonymous]

void *data[6]

uint8_t src_mode[6]

int16_t release_x

uint8_t checksum