#include "hmi_coffee_main_page.h"
#include <src/core/lv_obj.h>
#include <src/core/lv_obj_pos.h>
#include <src/core/lv_obj_style_gen.h>
#include <src/display/lv_display.h>
#include <src/misc/lv_area.h>
#include <src/misc/lv_palette.h>
#include <src/widgets/image/lv_image.h>
#include <string.h>
#include "hmi_make_coffee_page.h"
#include "stdio.h"
#include "main/src/image/image.h"
#include "main/src/fonts/font.h"
HMI_REGISTER_PAGE(hmi_coffee_main_page,COFFE_MAIN_PAGE)
// 声明
DECLARE_PAGE(hmi_make_coffee_page);
extern hmi_coffee_main_page_t hmi_coffee_main_page;
extern const lv_img_dsc_t *hot_coffe_types_big_image[];
extern const char *hot_coffe_types_name[];
extern const lv_img_dsc_t *cold_coffe_types_big_image[];
extern const char *cold_coffe_types_name[];
int hot_drink_count(void);
int cold_drink_count(void);
static void hot_drink_selected_cb(lv_event_t *e);
#define LIST_ITEM_HEIGHT 303 // 定义列表项高度
#define LIST_ITEM_WIDTH 230 // 定义列表项宽度
#define LIST_NUM 14 // 定义列表项数量（与图片数组长度一致）
#define LIST_HEIGHT 303 // 定义列表高度
#define LIST_WIDTH 1280 // 定义列表宽度
typedef struct {
const lv_img_dsc_t* img;
const char* name;
} coffee_transfer_info_t;
/**************************************************/
// 页面独有的方法
/**************************************************/
// 用于跟踪当前是热饮还是冷饮列表
static bool hot_lable_event = true;
// 饮品点击事件处理函数
static void drink_item_click_handler(lv_event_t *e) {
coffee_transfer_info_t *data = lv_event_get_user_data(e);
// 跳转到制作咖啡页面并传递数据
page_manager_go_to(INSTANCE_PAGE(hmi_make_coffee_page), data);
}
static lv_obj_t *create_hot_list_item(lv_obj_t *list, const lv_img_dsc_t *img_src, const char *text, int index) {
// 创建列表项
lv_obj_t *item = lv_obj_create(list);
// 设置列表项的宽度和高度
lv_obj_set_size(item, LIST_ITEM_WIDTH, LIST_ITEM_HEIGHT);
// 设置列表项的样式
lv_obj_set_style_bg_opa(item, 0, 0);// 设置背景透明
lv_obj_set_style_bg_color(item, lv_color_hex(0xff0000), 0); // 设置背景颜色为红色
lv_obj_set_style_border_width(item, 0, 0); // 设置边框宽度为0
//lv_obj_align(item,LV_ALIGN_TOP_MID, 0, 0);
lv_obj_set_scroll_dir(item, LV_DIR_NONE);// 设置列表项的滚动方向为无
lv_obj_remove_style(item, NULL, LV_PART_SCROLLBAR);// 移除列表滚动条样式
if (img_src != NULL) {
// 创建图片对象
lv_obj_t *image = lv_image_create(item);
// 设置图片源
lv_image_set_src(image, img_src);
// 设置图片对齐方式为底部中间
lv_obj_align(image, LV_ALIGN_BOTTOM_MID, 0, -40);
// 创建按钮对象
lv_obj_t *button = lv_obj_create(item);
// 设置按钮的大小和位置
lv_obj_set_size(button, LIST_ITEM_WIDTH, LIST_ITEM_HEIGHT);
// 设置按钮背景透明
lv_obj_set_style_bg_opa(button, 0, 0);
// 设置按钮边框宽度为0
lv_obj_set_style_border_width(button, 0, 0);
// 设置按钮圆角为0
lv_obj_set_style_radius(button, 0, 0);
// 设置按钮对齐方式为底部中间
lv_obj_align(button, LV_ALIGN_BOTTOM_MID, 0, -40);
// 为按钮添加用户数据
/*coffee_transfer_info_t *data = lv_mem_alloc(sizeof(coffee_transfer_info_t));
data->img = img_src;
data->name = text;
lv_obj_add_event_cb(button, drink_item_click_handler, LV_EVENT_CLICKED, data);*/
// 创建标签文本
lv_obj_t *name = lv_label_create(item);
// 设置标签的字体
lv_obj_set_style_text_font(name, &SourceHan_Sans_SC_regular_26, 0);
// 设置标签的颜色
lv_obj_set_style_text_color(name, lv_color_hex(0xffffff), 0);
// 设置标签文本
lv_label_set_text(name, text);
// 设置标签对齐方式为底部中间
lv_obj_align(name, LV_ALIGN_BOTTOM_MID, 0, 0);
}
return item;
}
static void hot_drink_selected_cb(lv_event_t *e) {
// 获取用户传递的索引（通过user_data）
int *index_ptr = lv_event_get_user_data(e);
int index = *index_ptr;
/*/ 构造传递给制作页面的参数
coffee_transfer_info_t info = {
.coffee_image = hot_coffe_types_big_image[index], // 当前热饮的图片
.coffee_name = hot_coffe_types_name[index] // 当前热饮的名称
};
// 跳转到咖啡制作页面，并传递参数
page_manager_go_to(INSTANCE_PAGE(hmi_make_coffee_page), &info);*/
}
static lv_obj_t *create_cold_list_item(lv_obj_t *list, const lv_img_dsc_t *img_src, const char *text) {
// 创建列表项
lv_obj_t *item = lv_obj_create(list);
// 设置列表项的宽度和高度
lv_obj_set_size(item, LIST_ITEM_WIDTH, LIST_ITEM_HEIGHT);
// 设置列表项的样式
lv_obj_set_style_bg_opa(item, 0, 0);// 设置背景透明
lv_obj_set_style_bg_color(item, lv_color_hex(0xff0000), 0); // 设置背景颜色为红色
lv_obj_set_style_border_width(item, 0, 0); // 设置边框宽度为0
//lv_obj_align(item,LV_ALIGN_TOP_MID, 0, 0);
lv_obj_set_scroll_dir(item, LV_DIR_NONE);// 设置列表项的滚动方向为无
lv_obj_remove_style(item, NULL, LV_PART_SCROLLBAR);// 移除列表滚动条样式
if (img_src != NULL) {
// 创建图片对象
lv_obj_t *image = lv_image_create(item);
// 设置图片源
lv_image_set_src(image, img_src);
// 设置图片对齐方式为底部中间
lv_obj_align(image, LV_ALIGN_BOTTOM_MID, 0, -40);
// 创建按钮对象
lv_obj_t *button = lv_obj_create(item);
// 设置按钮的大小和位置
lv_obj_set_size(button, LIST_ITEM_WIDTH, LIST_ITEM_HEIGHT);
// 设置按钮背景透明
lv_obj_set_style_bg_opa(button, 0, 0);
// 设置按钮边框宽度为0
lv_obj_set_style_border_width(button, 0, 0);
// 设置按钮圆角为0
lv_obj_set_style_radius(button, 0, 0);
// 设置按钮对齐方式为底部中间
lv_obj_align(button, LV_ALIGN_BOTTOM_MID, 0, -40);
// 创建标签文本
lv_obj_t *name = lv_label_create(item);
// 设置标签的字体
lv_obj_set_style_text_font(name, &SourceHan_Sans_SC_regular_26, 0);
// 设置标签的颜色
lv_obj_set_style_text_color(name, lv_color_hex(0xffffff), 0);
// 设置标签文本
lv_label_set_text(name, text);
// 设置标签对齐方式为底部中间
lv_obj_align(name, LV_ALIGN_BOTTOM_MID, 0, 0);
}
return item;
}
static void create_hot_drinks()
{
// 添加列表项，显示图片
for (int i = 0; i < hot_drink_count(); i++) {
if (hot_coffe_types_big_image[i] != NULL) {
create_hot_list_item(hmi_coffee_main_page.coffee_main_list, hot_coffe_types_big_image[i], hot_coffe_types_name[i],i);
}
}
}
static void create_cold_drinks()
{
// 添加列表项，显示图片
for (int i = 0; i < cold_drink_count(); i++) {
if (cold_coffe_types_big_image[i] != NULL) {
create_cold_list_item(hmi_coffee_main_page.coffee_main_list, cold_coffe_types_big_image[i], cold_coffe_types_name[i]);
}
}
}
static void hmi_coffee_main_page_hot_or_cold_label_event(lv_event_t *e)
{
lv_obj_t *obj = lv_event_get_target(e);
// 重置文本颜色
lv_obj_set_style_text_color(hmi_coffee_main_page.coffee_main_hot_text, lv_color_hex(0xFFFFFF),
0);
lv_obj_set_style_text_color(hmi_coffee_main_page.coffee_main_cold_text, lv_color_hex(0xFFFFFF),
0);
if (obj == hmi_coffee_main_page.coffee_main_cold_text)
{
lv_obj_set_style_text_color(hmi_coffee_main_page.coffee_main_cold_text,
lv_color_hex(0xE9BD85), 0);
}
else if (obj == hmi_coffee_main_page.coffee_main_hot_text)
{
lv_obj_set_style_text_color(hmi_coffee_main_page.coffee_main_hot_text,
lv_color_hex(0xE9BD85), 0);
}
if (obj == hmi_coffee_main_page.coffee_main_hot_text) {
// 删除冷饮项并创建热饮项
if (!hot_lable_event) {
// 删除所有子对象
lv_obj_clean(hmi_coffee_main_page.coffee_main_list);
create_hot_drinks();
hot_lable_event = true;
}
} else if (obj == hmi_coffee_main_page.coffee_main_cold_text) {
// 删除热饮项并创建冷饮项
if (hot_lable_event) {
// 删除所有子对象
lv_obj_clean(hmi_coffee_main_page.coffee_main_list);
create_cold_drinks();
hot_lable_event = false;
}
}
}
// 滚动结束事件回调函数，实现吸附功能
static void list_scroll_end_event_cb(lv_event_t * e)
{
lv_obj_t * list = lv_event_get_target(e);
lv_coord_t scroll_x = lv_obj_get_scroll_x(list); // 水平滚动，获取 x 轴滚动位置
lv_obj_t * first_item = lv_obj_get_child(list, 0); // 获取第一个列表项
if (!first_item) return;
lv_coord_t item_width = lv_obj_get_width(first_item); // 获取列表项宽度
lv_coord_t pad_column = lv_obj_get_style_pad_column(list, 0); // 获取列间距
// 计算吸附位置
int new_scroll_x = ((scroll_x + item_width / 2 + pad_column / 2) / (item_width + pad_column)) * (item_width + pad_column);
// 设置新的滚动位置
lv_obj_scroll_to_x(list, new_scroll_x, LV_ANIM_ON);
}
/**************************************************/
// 下面是通用方法的实现
/**************************************************/
/* 页面初始化 通用*/
static void page_init() {
hmi_coffee_main_page_t *page = &hmi_coffee_main_page;
// 创建屏幕
page->base.screen = lv_obj_create(NULL);
// 移除列表滚动条样式
lv_obj_remove_style(page->base.screen, NULL, LV_PART_SCROLLBAR);
// 禁用列表滚动功能
lv_obj_clear_flag(page->base.screen, LV_OBJ_FLAG_SCROLLABLE);
// 设置背景图片
page->hmi_coffee_main_page_bg = lv_image_create(page->base.screen);
lv_image_set_src(page->hmi_coffee_main_page_bg, &hmi_coffee_main_page_bg);
lv_obj_align(page->hmi_coffee_main_page_bg, LV_ALIGN_CENTER, 0,0);
// 创建列表
page->coffee_main_list = lv_obj_create(page->base.screen);
// 设置列表的宽度和高度
lv_obj_set_size(page->coffee_main_list, LIST_WIDTH, LIST_HEIGHT);
// 设置列表背景透明
lv_obj_set_style_bg_opa(page->coffee_main_list, 0, 0);
// 设置列表边框宽度为 0
lv_obj_set_style_border_width(page->coffee_main_list, 0, 0);
// 设置列表对齐方式
lv_obj_align(page->coffee_main_list, LV_ALIGN_TOP_LEFT, 0, 54);
// 移除列表滚动条样式
lv_obj_remove_style(page->coffee_main_list, NULL, LV_PART_SCROLLBAR);
// 禁用列表弹性滚动
lv_obj_clear_flag(page->coffee_main_list, LV_OBJ_FLAG_SCROLL_ELASTIC);
// 设置列表滚动方向为水平
lv_obj_set_scroll_dir(page->coffee_main_list, LV_DIR_HOR);
// 设置列表的布局方式为水平布局
lv_obj_set_flex_flow(page->coffee_main_list, LV_FLEX_FLOW_ROW);
// 设置列表的间距
lv_obj_set_style_pad_column(page->coffee_main_list, 20, 0);
// 添加滚动结束事件回调
lv_obj_add_event_cb(page->coffee_main_list, list_scroll_end_event_cb, LV_EVENT_SCROLL_END, NULL);
page->coffee_main_hot_text = lv_label_create(page->base.screen);
lv_label_set_text(page->coffee_main_hot_text, "热饮");
lv_obj_add_flag(page->coffee_main_hot_text,
LV_OBJ_FLAG_CLICKABLE); // 确保能点击到，不然点不到文字
lv_obj_set_style_text_color(page->coffee_main_hot_text, lv_color_hex(0xE9BD85), 0);
lv_obj_set_style_text_font(page->coffee_main_hot_text, &SourceHan_Sans_SC_regular_26, 0);
lv_obj_set_size(page->coffee_main_hot_text, 52, 33); // 设置标签宽度和高度
lv_obj_set_style_text_align(page->coffee_main_hot_text, LV_TEXT_ALIGN_CENTER, 0); // 添加文字居中对齐
lv_obj_align(page->coffee_main_hot_text, LV_ALIGN_TOP_LEFT, 516, 34);
lv_obj_add_event_cb(page->coffee_main_hot_text, hmi_coffee_main_page_hot_or_cold_label_event,LV_EVENT_CLICKED, NULL);
create_hot_drinks();
page->coffee_main_cold_text = lv_label_create(page->base.screen);
lv_label_set_text(page->coffee_main_cold_text, "冷饮");
lv_obj_add_flag(page->coffee_main_cold_text,
LV_OBJ_FLAG_CLICKABLE); // 确保能点击到，不然点不到文字
lv_obj_set_style_text_color(page->coffee_main_cold_text, lv_color_hex(0xffffff), 0); //设置字体颜色
lv_obj_set_style_text_font(page->coffee_main_cold_text, &SourceHan_Sans_SC_regular_26, 0);//设置字体
lv_obj_set_size(page->coffee_main_cold_text, 52, 33); // 设置标签宽度和高度
lv_obj_set_style_text_align(page->coffee_main_cold_text, LV_TEXT_ALIGN_CENTER, 0); // 添加文字居中对齐
lv_obj_align(page->coffee_main_cold_text, LV_ALIGN_TOP_LEFT, 712, 34);
lv_obj_add_event_cb(page->coffee_main_cold_text, hmi_coffee_main_page_hot_or_cold_label_event,LV_EVENT_CLICKED, NULL);
//锁屏
page->hmi_coffee_main_page_lock_icon = lv_image_create(page->base.screen);
lv_image_set_src(page->hmi_coffee_main_page_lock_icon, &hmi_coffee_main_page_lock);
lv_obj_align(page->hmi_coffee_main_page_lock_icon, LV_ALIGN_TOP_LEFT, 78, 417);
page->hmi_coffee_main_page_lock_text = lv_label_create(page->base.screen);
lv_label_set_text(page->hmi_coffee_main_page_lock_text, "童锁");
lv_obj_add_flag(page->hmi_coffee_main_page_lock_text,
LV_OBJ_FLAG_CLICKABLE); // 确保能点击到，不然点不到文字
lv_obj_set_style_text_color(page->hmi_coffee_main_page_lock_text, lv_color_hex(0xffffff), 0); //设置字体颜色
lv_obj_set_style_text_font(page->hmi_coffee_main_page_lock_text, &SourceHan_Sans_SC_regular_26, 0);//设置字体
lv_obj_set_size(page->hmi_coffee_main_page_lock_text, 52, 33); // 设置标签宽度和高度
lv_obj_set_style_text_align(page->hmi_coffee_main_page_lock_text, LV_TEXT_ALIGN_CENTER, 0); // 添加文字居中对齐
lv_obj_align(page->hmi_coffee_main_page_lock_text, LV_ALIGN_TOP_LEFT, 126, 417);
//用户
page->hmi_coffee_main_page_user_icon = lv_image_create(page->base.screen);
lv_image_set_src(page->hmi_coffee_main_page_user_icon, &hmi_coffee_main_page_user);
lv_obj_align(page->hmi_coffee_main_page_user_icon, LV_ALIGN_TOP_LEFT, 330, 417);
page->hmi_coffee_main_page_user_text = lv_label_create(page->base.screen);
lv_label_set_text(page->hmi_coffee_main_page_user_text, "用户");
lv_obj_add_flag(page->hmi_coffee_main_page_user_text,
LV_OBJ_FLAG_CLICKABLE); // 确保能点击到，不然点不到文字
lv_obj_set_style_text_color(page->hmi_coffee_main_page_user_text, lv_color_hex(0xffffff), 0); //设置字体颜色
lv_obj_set_style_text_font(page->hmi_coffee_main_page_user_text, &SourceHan_Sans_SC_regular_26, 0);//设置字体
lv_obj_set_size(page->hmi_coffee_main_page_user_text, 52, 33); // 设置标签宽度和高度
lv_obj_set_style_text_align(page->hmi_coffee_main_page_user_text, LV_TEXT_ALIGN_CENTER, 0); // 添加文字居中对齐
lv_obj_align(page->hmi_coffee_main_page_user_text, LV_ALIGN_TOP_LEFT, 385, 417);
//设置
page->hmi_coffee_main_page_setting_icon = lv_image_create(page->base.screen);
lv_image_set_src(page->hmi_coffee_main_page_setting_icon, &hmi_coffee_main_page_setting);
lv_obj_align(page->hmi_coffee_main_page_setting_icon, LV_ALIGN_TOP_LEFT, 588, 417);
page->hmi_coffee_main_page_setting_text = lv_label_create(page->base.screen);
lv_label_set_text(page->hmi_coffee_main_page_setting_text, "设置");
lv_obj_add_flag(page->hmi_coffee_main_page_setting_text,
LV_OBJ_FLAG_CLICKABLE); // 确保能点击到，不然点不到文字
lv_obj_set_style_text_color(page->hmi_coffee_main_page_setting_text, lv_color_hex(0xffffff), 0); //设置字体颜色
lv_obj_set_style_text_font(page->hmi_coffee_main_page_setting_text, &SourceHan_Sans_SC_regular_26, 0);//设置字体
lv_obj_set_size(page->hmi_coffee_main_page_setting_text, 52, 33); // 设置标签宽度和高度
lv_obj_set_style_text_align(page->hmi_coffee_main_page_setting_text, LV_TEXT_ALIGN_CENTER, 0); // 添加文字居中对齐
lv_obj_align(page->hmi_coffee_main_page_setting_text, LV_ALIGN_TOP_LEFT, 640, 417);
//收藏
page->hmi_coffee_main_page_collection_icon = lv_image_create(page->base.screen);
lv_image_set_src(page->hmi_coffee_main_page_collection_icon, &hmi_coffee_main_page_collection);
lv_obj_align(page->hmi_coffee_main_page_collection_icon, LV_ALIGN_TOP_LEFT, 842, 417);
page->hmi_coffee_main_page_collection_text = lv_label_create(page->base.screen);
lv_label_set_text(page->hmi_coffee_main_page_collection_text, "收藏");
lv_obj_add_flag(page->hmi_coffee_main_page_collection_text,
LV_OBJ_FLAG_CLICKABLE); // 确保能点击到，不然点不到文字
lv_obj_set_style_text_color(page->hmi_coffee_main_page_collection_text, lv_color_hex(0xffffff), 0); //设置字体颜色
lv_obj_set_style_text_font(page->hmi_coffee_main_page_collection_text, &SourceHan_Sans_SC_regular_26, 0);//设置字体
lv_obj_set_size(page->hmi_coffee_main_page_collection_text, 52, 33); // 设置标签宽度和高度
lv_obj_set_style_text_align(page->hmi_coffee_main_page_collection_text, LV_TEXT_ALIGN_CENTER, 0); // 添加文字居中对齐
lv_obj_align(page->hmi_coffee_main_page_collection_text, LV_ALIGN_TOP_LEFT, 898, 417);
//快速冲洗
page->hmi_coffee_main_page_fast_rinse_icon = lv_image_create(page->base.screen);
lv_image_set_src(page->hmi_coffee_main_page_fast_rinse_icon, &hmi_coffee_main_page_fast_rinse);
lv_obj_align(page->hmi_coffee_main_page_fast_rinse_icon, LV_ALIGN_TOP_LEFT, 1072, 417);
page->hmi_coffee_main_page_fast_rinse_text = lv_label_create(page->base.screen);
lv_label_set_text(page->hmi_coffee_main_page_fast_rinse_text, "快速冲洗");
lv_obj_add_flag(page->hmi_coffee_main_page_fast_rinse_text,
LV_OBJ_FLAG_CLICKABLE); // 确保能点击到，不然点不到文字
lv_obj_set_style_text_color(page->hmi_coffee_main_page_fast_rinse_text, lv_color_hex(0xffffff), 0); //设置字体颜色
lv_obj_set_style_text_font(page->hmi_coffee_main_page_fast_rinse_text, &SourceHan_Sans_SC_regular_26, 0);//设置字体
lv_obj_set_size(page->hmi_coffee_main_page_fast_rinse_text, 104, 33); // 设置标签宽度和高度
lv_obj_set_style_text_align(page->hmi_coffee_main_page_fast_rinse_text, LV_TEXT_ALIGN_CENTER, 0); // 添加文字居中对齐
lv_obj_align(page->hmi_coffee_main_page_fast_rinse_text, LV_ALIGN_TOP_LEFT, 1127, 417);
}
/* 页面进入 通用*/
static void page_enter(void *args) {}
/* 页面退出 通用*/
static void page_exit() {}
/* 页面销毁 通用*/
static void page_destroy(void) {}
/* 主页面update实现 */
static void page_update(const hmi_global_data_t *data) {}
最新发布
本文详细介绍了Page-Enter和Page-Exit两种页面过渡特效的用法，并提供了多种动态滤镜选项，如blendTrans和RevealTrans，以及它们的工作原理和参数设置，帮助开发者在网页设计中实现平滑的页面切换效果。
扫一扫
1168
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
