当前位置：首页 > news >正文

u8g2图形库——丝滑菜单制作

news 来源：原创 2024/5/12 5:55:22

一、实物效果展示

二、丝滑菜单实现原理

三、代码开源

1.ui_bmp.h

2.ui.h

3.ui.c

一、实物效果展示

u8g2图形库——丝滑菜单制作

二、丝滑菜单实现原理

int ui_run(short *a,short *a_tag,uint8_t step,uint8_t slow_cnt)             //UI滑动效果
{uint8_t temp;temp = abs(*a_tag - *a) > slow_cnt ? step : 1;if(*a < *a_tag){*a += temp;}else if (*a > *a_tag){*a -= temp;}else{return 0;}return 1;
}

三、代码开源

1.ui_bmp.h

#ifndef _UI_BMP_H
#define _UI_BMP_H#include "main.h"
#include "u8g2.h"const uint8_t wifi[] U8X8_PROGMEM = {
0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 
0x00, 0x00, 0xfe, 0x0f, 0x00, 0x00, 0x00, 0xe0, 0xff, 0x7f, 0x00, 0x00, 0x00, 0xf8, 0xff, 0xff, 0x03, 0x00, 0x00, 0xff, 0xff, 0xff, 0x0f, 0x00, 
0xc0, 0xff, 0xff, 0xff, 0x3f, 0x00, 0xe0, 0xff, 0xff, 0xff, 0xff, 0x80, 0xf8, 0x7f, 0x00, 0xe0, 0xff, 0xc1, 0xfc, 0x1f, 0x00, 0x80, 0xff, 0xe3, 
0xfe, 0x07, 0x00, 0x00, 0xfc, 0xff, 0xff, 0x01, 0x00, 0x00, 0xf8, 0xff, 0x7f, 0x00, 0xff, 0x1f, 0xe0, 0xff, 0x3f, 0xe0, 0xff, 0xff, 0xc0, 0xff, 
0x0f, 0xf8, 0xff, 0xff, 0x81, 0x0f, 0x00, 0xfe, 0xff, 0xff, 0x07, 0x00, 0x00, 0xff, 0xff, 0xff, 0x0f, 0x00, 0x80, 0xff, 0x03, 0xfc, 0x1f, 0x00, 
0x80, 0x7f, 0x00, 0xe0, 0x1f, 0x00, 0x80, 0x1f, 0x00, 0xc0, 0x1f, 0x00, 0x80, 0x0f, 0x00, 0x00, 0x1f, 0x00, 0x00, 0x00, 0xfc, 0x07, 0x0c, 0x00, 
0x00, 0x00, 0xff, 0x0f, 0x00, 0x00, 0x00, 0xc0, 0xff, 0x1f, 0x00, 0x00, 0x00, 0xe0, 0xff, 0x7f, 0x00, 0x00, 0x00, 0xe0, 0xff, 0x7f, 0x00, 0x00, 
0x00, 0xe0, 0x1f, 0x7f, 0x00, 0x00, 0x00, 0xc0, 0x03, 0x3c, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 
0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0xf8, 0x01, 0x00, 0x00, 0x00, 0x00, 0xfc, 0x03, 0x00, 0x00, 0x00, 0x00, 0xfe, 0x07, 0x00, 0x00, 
0x00, 0x00, 0xfe, 0x07, 0x00, 0x00, 0x00, 0x00, 0xfe, 0x07, 0x00, 0x00, 0x00, 0x00, 0xfe, 0x07, 0x00, 0x00, 0x00, 0x00, 0xfc, 0x03, 0x00, 0x00, 
0x00, 0x00, 0xfc, 0x03, 0x00, 0x00, 0x00, 0x00, 0xf0, 0x01, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 
};const uint8_t clock[] U8X8_PROGMEM = {0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0xc0, 0x83, 0xff, 0x1f, 0x3c, 0x00, 
0xe0, 0x83, 0xff, 0x1f, 0x7c, 0x00, 0xf0, 0x83, 0xff, 0x1f, 0xfc, 0x80, 0xf8, 0x83, 0xff, 0x1f, 0xfc, 0x81, 0xf8, 0x83, 0xff, 0x1f, 0xfc, 0x81, 
0xf8, 0xff, 0xff, 0xff, 0xff, 0x81, 0xf8, 0xff, 0xff, 0xff, 0xff, 0x81, 0xf8, 0xff, 0xff, 0xff, 0xff, 0x81, 0xf8, 0xff, 0xff, 0xff, 0xff, 0x81, 
0xf8, 0xff, 0xff, 0xff, 0xff, 0x81, 0xf8, 0xff, 0xff, 0xff, 0xff, 0x81, 0xf8, 0xff, 0xff, 0xff, 0xff, 0x81, 0x18, 0x00, 0x00, 0x00, 0x80, 0x81, 
0x18, 0x00, 0x00, 0x00, 0x80, 0x81, 0x18, 0x00, 0x00, 0x00, 0x80, 0x81, 0x18, 0x00, 0x00, 0x00, 0x80, 0x81, 0x18, 0x00, 0x00, 0x00, 0x80, 0x81, 
0x18, 0x7c, 0xf8, 0xe1, 0x87, 0x81, 0x18, 0x7e, 0xf8, 0xe1, 0x87, 0x81, 0x18, 0x7e, 0xf8, 0xe1, 0x87, 0x81, 0x18, 0x7e, 0xf8, 0xe1, 0x87, 0x81, 
0x18, 0x7e, 0xf8, 0xe1, 0x87, 0x81, 0x18, 0x7c, 0xf8, 0xe1, 0x87, 0x81, 0x18, 0x00, 0x00, 0x00, 0x80, 0x81, 0x18, 0x00, 0x00, 0x00, 0x80, 0x81, 
0x18, 0x00, 0x00, 0x00, 0x80, 0x81, 0x18, 0x7e, 0xf8, 0xe1, 0x87, 0x81, 0x18, 0x7e, 0xf8, 0xe1, 0x87, 0x81, 0x18, 0x7e, 0xf8, 0xe1, 0x87, 0x81, 
0x18, 0x7e, 0xf8, 0xe1, 0x87, 0x81, 0x18, 0x7e, 0xf8, 0xe1, 0x87, 0x81, 0x18, 0x7c, 0xf8, 0xe0, 0x83, 0x81, 0x18, 0x00, 0x00, 0x00, 0x80, 0x81, 
0x18, 0x00, 0x00, 0x00, 0x80, 0x81, 0x38, 0x00, 0x00, 0x00, 0xc0, 0x01, 0x70, 0x00, 0x00, 0x00, 0xe0, 0x00, 0xe0, 0xff, 0xff, 0xff, 0x7f, 0x00, 
0xc0, 0xff, 0xff, 0xff, 0x3f, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 
};const uint8_t seting[] U8X8_PROGMEM = {0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x80, 0x01, 0x18, 0x00, 0x00, 0x00, 0xf0, 0x07, 0x7e, 0x00, 0x00, 0x00, 0xf8, 0xff, 0xff, 0x01, 0x00, 
0x00, 0xfe, 0xff, 0xff, 0x07, 0x00, 0x00, 0xff, 0xff, 0xff, 0x0f, 0x00, 0x80, 0x7f, 0xff, 0xe7, 0x1f, 0x00, 0x80, 0x1f, 0xf8, 0x81, 0x1f, 0x00, 
0x80, 0x0f, 0x00, 0x00, 0x1f, 0x00, 0x80, 0x0f, 0x00, 0x00, 0x1f, 0x00, 0x80, 0x0f, 0x00, 0x00, 0x1f, 0x00, 0x80, 0x0f, 0x00, 0x00, 0x1f, 0x00, 
0xc0, 0x07, 0x00, 0x00, 0x3f, 0x00, 0xc0, 0x07, 0xf0, 0x00, 0x3e, 0x00, 0xe0, 0x07, 0xfc, 0x03, 0x7e, 0x80, 0xf8, 0x03, 0xff, 0x0f, 0xfc, 0xe1, 
0xfe, 0x81, 0xff, 0x1f, 0xf8, 0xe3, 0xfe, 0xc0, 0xff, 0x1f, 0xf8, 0xe7, 0x7e, 0xc0, 0x0f, 0x3f, 0xe0, 0xe7, 0x3e, 0xc0, 0x07, 0x3e, 0xc0, 0xe7, 
0x1e, 0xe0, 0x03, 0x7c, 0xc0, 0xe7, 0x1e, 0xe0, 0x03, 0x7c, 0xc0, 0xe7, 0x1e, 0xe0, 0x03, 0x7c, 0xc0, 0xe7, 0x1e, 0xe0, 0x03, 0x7c, 0xc0, 0xe7, 
0x3e, 0xc0, 0x07, 0x3e, 0xc0, 0xe7, 0x7e, 0xc0, 0x8f, 0x3f, 0xe0, 0xe7, 0xfe, 0x80, 0xff, 0x1f, 0xf8, 0xe7, 0xfe, 0x81, 0xff, 0x0f, 0xf8, 0x83, 
0xf8, 0x03, 0xff, 0x07, 0xfc, 0x00, 0xe0, 0x03, 0xfc, 0x03, 0x7e, 0x00, 0xe0, 0x07, 0xf0, 0x00, 0x3e, 0x00, 0xc0, 0x07, 0x00, 0x00, 0x3f, 0x00, 
0x80, 0x0f, 0x00, 0x00, 0x1f, 0x00, 0x80, 0x0f, 0x00, 0x00, 0x1f, 0x00, 0x80, 0x0f, 0x00, 0x00, 0x1f, 0x00, 0x80, 0x0f, 0x00, 0x00, 0x1f, 0x00, 
0x80, 0x1f, 0xf8, 0x81, 0x1f, 0x00, 0x80, 0x7f, 0xff, 0xe7, 0x1f, 0x00, 0x00, 0xff, 0xff, 0xff, 0x0f, 0x00, 0x00, 0xfe, 0xff, 0xff, 0x03, 0x00, 
0x00, 0xf8, 0xff, 0xff, 0x01, 0x00, 0x00, 0xe0, 0x07, 0x7e, 0x00, 0x00, 0x00, 0x80, 0x01, 0x18, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 
};const uint8_t tianqi[] U8X8_PROGMEM = {
0x00, 0x00, 0x60, 0x00, 0x00, 0x00, 0x00, 0x00, 0xe0, 0x00, 0x00, 0x00, 0x00, 0x00, 0xf0, 0x00, 0x00, 0x00, 0x00, 0x00, 0xf0, 0x00, 0x00, 0x00, 
0x00, 0x00, 0xf0, 0x00, 0x00, 0x00, 0x00, 0x00, 0xe0, 0x00, 0x00, 0x00, 0x80, 0x00, 0x60, 0x00, 0x18, 0x00, 0xc0, 0x03, 0x60, 0x00, 0x3c, 0x00, 
0x80, 0x07, 0x00, 0x00, 0x1e, 0x00, 0x00, 0x0f, 0xf8, 0x01, 0x0f, 0x00, 0x00, 0x0f, 0xff, 0x0f, 0x07, 0x00, 0x00, 0xce, 0xff, 0x1f, 0x03, 0x00, 
0x00, 0xe0, 0xdf, 0x7f, 0x00, 0x00, 0x00, 0xf0, 0x03, 0xfc, 0x00, 0x00, 0x00, 0xf0, 0x00, 0xf0, 0x00, 0x00, 0x00, 0x78, 0x00, 0xe0, 0x01, 0x00, 
0x00, 0x3c, 0x00, 0xe0, 0x01, 0x00, 0x00, 0x3c, 0xe0, 0xdf, 0x03, 0x00, 0x00, 0x1c, 0xf8, 0xff, 0x03, 0x00, 0x00, 0x1c, 0xfe, 0xff, 0x03, 0xe0, 
0x7e, 0x1e, 0x3f, 0xf0, 0xe3, 0xf7, 0xff, 0x9e, 0x0f, 0xc0, 0xf7, 0xff, 0xff, 0x9e, 0x07, 0x80, 0xf7, 0x0f, 0x00, 0xff, 0x03, 0x00, 0x0f, 0x00, 
0x80, 0xff, 0x01, 0x00, 0x0e, 0x00, 0xc0, 0xff, 0x01, 0x00, 0x1e, 0x00, 0xc0, 0xc1, 0x00, 0x00, 0x1c, 0x00, 0xc0, 0x01, 0x00, 0x00, 0x1c, 0x00, 
0xe0, 0x01, 0x00, 0x00, 0x7c, 0x80, 0xf8, 0x01, 0x00, 0x00, 0xfc, 0xc1, 0xfc, 0x00, 0x00, 0x00, 0xf8, 0xe3, 0x3e, 0x00, 0x00, 0x00, 0xc0, 0xe7, 
0x1e, 0x00, 0x00, 0x00, 0x80, 0xf7, 0x0f, 0x00, 0x00, 0x00, 0x00, 0x7f, 0x07, 0x00, 0x00, 0x00, 0x00, 0x7f, 0x07, 0x00, 0x00, 0x00, 0x00, 0x7e, 
0x07, 0x00, 0x00, 0x00, 0x00, 0xfe, 0x0f, 0x00, 0x00, 0x00, 0x00, 0xff, 0x0f, 0x00, 0x00, 0x00, 0x00, 0xe7, 0x1e, 0x00, 0x00, 0x00, 0x80, 0xe7, 
0x3e, 0x00, 0x00, 0x00, 0xc0, 0xc3, 0xfc, 0xff, 0xff, 0xff, 0xff, 0x03, 0xf0, 0xff, 0xff, 0xff, 0xff, 0x00, 0xc0, 0xff, 0xff, 0xff, 0x7f, 0x00, 
};const uint8_t shi[] U8X8_PROGMEM = {
0x00, 0x00, 0x70, 0x00, 0x00, 0x00, 0x00, 0x00, 0xfc, 0x03, 0x00, 0x00, 0x00, 0x00, 0xff, 0x0f, 0x00, 0x00, 0x00, 0xe0, 0x07, 0x7f, 0x00, 0x00, 
0x00, 0xfc, 0x01, 0xf8, 0x01, 0x00, 0x80, 0x3f, 0x00, 0xc0, 0x0f, 0x00, 0xe0, 0x0f, 0x00, 0x00, 0x7f, 0x80, 0xf8, 0x01, 0x00, 0x00, 0xf8, 0xf1, 
0x7f, 0x00, 0x00, 0x00, 0xe0, 0xf7, 0x0f, 0x00, 0x00, 0x00, 0x00, 0x07, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 
0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x38, 0x00, 0x00, 0x00, 0x00, 0x00, 0x7e, 0x00, 0x00, 0x00, 0x00, 0x00, 0x7e, 0x00, 0x00, 0x00, 0x80, 
0x18, 0xe6, 0x00, 0x00, 0x80, 0x81, 0x18, 0xe6, 0x00, 0x00, 0x80, 0x81, 0x18, 0x7e, 0xf8, 0x03, 0x80, 0x81, 0x18, 0x7c, 0xfe, 0x07, 0x80, 0x81, 
0x18, 0x18, 0x0f, 0x0e, 0x80, 0x81, 0x18, 0x80, 0x07, 0x0c, 0x80, 0x81, 0x18, 0x80, 0x03, 0x00, 0x80, 0x81, 0x18, 0x80, 0x01, 0x00, 0x80, 0x81, 
0x18, 0xc0, 0x01, 0x00, 0x80, 0x81, 0x18, 0xc0, 0x00, 0x00, 0x80, 0x81, 0x18, 0xc0, 0x00, 0x00, 0x80, 0x81, 0x18, 0xc0, 0x01, 0x00, 0x80, 0x81, 
0x18, 0xc0, 0x01, 0x00, 0x80, 0x81, 0x18, 0x80, 0x01, 0x00, 0x80, 0x81, 0x18, 0x80, 0x03, 0x00, 0x80, 0x81, 0x18, 0x00, 0x07, 0x1c, 0x80, 0x81, 
0x18, 0x00, 0x0f, 0x0e, 0x80, 0x81, 0x18, 0x00, 0xfc, 0x0f, 0x80, 0x81, 0x18, 0x00, 0xf8, 0x03, 0x80, 0x81, 0x18, 0x00, 0x00, 0x00, 0x80, 0x81, 
0x18, 0x00, 0x00, 0x00, 0x80, 0x81, 0x18, 0x00, 0x00, 0x00, 0x80, 0x81, 0x18, 0x00, 0x00, 0x00, 0x80, 0x81, 0x18, 0x00, 0x00, 0x00, 0x80, 0x81, 
0x18, 0x00, 0x00, 0x00, 0x80, 0x81, 0xb8, 0xff, 0xff, 0xff, 0xff, 0x01, 0xf0, 0xff, 0xff, 0xff, 0xff, 0x00, 0xe0, 0xff, 0xff, 0xff, 0x7f, 0x00, 
};const uint8_t led[] U8X8_PROGMEM = {
0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0xf0, 0x00, 0x00, 0x00, 
0x00, 0x00, 0xf0, 0x00, 0x00, 0x00, 0x00, 0x00, 0xf0, 0x00, 0x00, 0x00, 0x00, 0x00, 0xf0, 0x00, 0x00, 0x00, 0x00, 0x0c, 0x60, 0x00, 0x01, 0x00, 
0x00, 0x1e, 0x00, 0x80, 0x03, 0x00, 0x00, 0x3c, 0x00, 0xc0, 0x03, 0x00, 0x00, 0x78, 0x00, 0xe0, 0x01, 0x00, 0x00, 0x30, 0xf0, 0xc1, 0x00, 0x00, 
0x00, 0x10, 0xfe, 0x07, 0x00, 0x00, 0x00, 0x00, 0xff, 0x0f, 0x00, 0x00, 0x00, 0x80, 0xff, 0x1f, 0x00, 0x00, 0x00, 0x80, 0x0f, 0x1e, 0x00, 0x00, 
0x00, 0xc0, 0x03, 0x3c, 0x00, 0x00, 0x00, 0xc0, 0x01, 0x38, 0x00, 0x00, 0xc0, 0xc3, 0x01, 0x38, 0x7c, 0x00, 0xe0, 0xc7, 0x01, 0x38, 0x7c, 0x00, 
0xe0, 0xc7, 0x01, 0x38, 0x7c, 0x00, 0x00, 0xc0, 0x01, 0x38, 0x00, 0x00, 0x00, 0xc0, 0x01, 0x38, 0x00, 0x00, 0x00, 0xc0, 0x01, 0x38, 0x00, 0x00, 
0x00, 0xc0, 0x01, 0x38, 0x00, 0x00, 0x00, 0xc0, 0x01, 0x38, 0x00, 0x00, 0x00, 0xc0, 0x01, 0x38, 0x00, 0x00, 0x00, 0xc0, 0x01, 0x38, 0x00, 0x00, 
0x00, 0xc0, 0x01, 0x38, 0x00, 0x00, 0x00, 0xc0, 0x01, 0x38, 0x00, 0x00, 0x00, 0xc0, 0x01, 0x38, 0x00, 0x00, 0x00, 0xc0, 0x01, 0x38, 0x00, 0x00, 
0x00, 0xfe, 0xff, 0xff, 0x07, 0x00, 0x00, 0xfe, 0xff, 0xff, 0x07, 0x00, 0x00, 0xfe, 0xff, 0xff, 0x07, 0x00, 0x00, 0x00, 0x07, 0x0e, 0x00, 0x00, 
0x00, 0x00, 0x07, 0x0e, 0x00, 0x00, 0x00, 0x00, 0x07, 0x0e, 0x00, 0x00, 0x00, 0x00, 0x07, 0x0e, 0x00, 0x00, 0x00, 0x00, 0x07, 0x0e, 0x00, 0x00, 
0x00, 0x00, 0x07, 0x0e, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 
};const uint8_t beep[] U8X8_PROGMEM = {
0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x80, 0x00, 0x00, 0x00, 
0x00, 0x00, 0xe0, 0x01, 0x00, 0x00, 0x00, 0x00, 0xf0, 0x01, 0x00, 0x00, 0x00, 0x00, 0xfc, 0x01, 0x00, 0x00, 0x00, 0x00, 0xfe, 0x01, 0x00, 0x00, 
0x00, 0x80, 0xdf, 0x01, 0x30, 0x00, 0x00, 0xc0, 0xc7, 0x01, 0x70, 0x00, 0x00, 0xe0, 0xc3, 0x01, 0xf0, 0x00, 0x00, 0xf8, 0xc0, 0x01, 0xe0, 0x01, 
0x00, 0x7c, 0xc0, 0x01, 0xc0, 0xf1, 0xff, 0x3f, 0xc0, 0x01, 0xc0, 0xf3, 0xff, 0x0f, 0xc0, 0x01, 0x80, 0xf3, 0xff, 0x07, 0xc0, 0x01, 0x00, 0x77, 
0x07, 0x00, 0xc0, 0x81, 0x00, 0x77, 0x07, 0x00, 0xc0, 0xc1, 0x01, 0x77, 0x07, 0x00, 0xc0, 0xc1, 0x03, 0x7f, 0x07, 0x00, 0xc0, 0x81, 0x03, 0x7e, 
0x07, 0x00, 0xc0, 0x81, 0x03, 0x7e, 0x07, 0x00, 0xc0, 0x81, 0x03, 0x7e, 0x07, 0x00, 0xc0, 0x01, 0x03, 0x7e, 0x07, 0x00, 0xc0, 0x81, 0x03, 0x7e, 
0x07, 0x00, 0xc0, 0x81, 0x03, 0x7e, 0x07, 0x00, 0xc0, 0xc1, 0x03, 0x7e, 0x07, 0x00, 0xc0, 0xc1, 0x01, 0x77, 0x07, 0x00, 0xc0, 0xc1, 0x01, 0xf7, 
0xff, 0x07, 0xc0, 0x01, 0x00, 0xf7, 0xff, 0x0f, 0xc0, 0x01, 0x80, 0xf3, 0xff, 0x1f, 0xc0, 0x01, 0xc0, 0x03, 0x00, 0x7e, 0xc0, 0x01, 0xc0, 0x01, 
0x00, 0xf8, 0xc0, 0x01, 0xe0, 0x01, 0x00, 0xe0, 0xc3, 0x01, 0xf0, 0x00, 0x00, 0xc0, 0xc7, 0x01, 0x70, 0x00, 0x00, 0x80, 0xdf, 0x01, 0x30, 0x00, 
0x00, 0x00, 0xfe, 0x01, 0x00, 0x00, 0x00, 0x00, 0xfc, 0x01, 0x00, 0x00, 0x00, 0x00, 0xf0, 0x01, 0x00, 0x00, 0x00, 0x00, 0xe0, 0x01, 0x00, 0x00, 
0x00, 0x00, 0x80, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 
};#endif

2.ui.h

#ifndef _UI_H
#define _UI_H#include "main.h"
#include "oled.h"
#include "u8g2.h"
#include <stdio.h>
#include "key.h"
#include <math.h>
#include <stdlib.h>
#include "beep.h"
// #include "ui_bmp.h"extern short time_x,time_x_tag;
extern short tianqi_x,tianqi_x_tag;
extern short shi_x,shi_x_tag;
extern short led_x,led_x_tag;
extern short beep_x,beep_x_tag;
extern short wangluo_x,wangluo_x_tag; 
extern short time_y,time_y_tag;
extern short tianqi_y,tianqi_y_tag;
extern short shi_y,shi_y_tag;
extern short led_y,led_y_tag;
extern short beep_y,beep_y_tag;
extern short wangluo_y,wangluo_y_tag;extern short wifi_frame_len,wifi_frame_len_tag;
extern short wifi_y_offset,wifi_y_offset_tag; 
extern short led_frame_len,led_frame_len_tag;
extern short led_y_offset,led_y_offset_tag; 
extern short beep_frame_len,beep_frame_len_tag;  
extern short beep_y_offset,beep_y_offset_tag;  extern int ui_select;
extern int ui_wifi_select;
extern int wifi_select;
extern int ui_led_select;                          
extern int led_select;  
extern int ui_beep_select;       
extern int beep_select;                 
extern int state;
extern u8g2_t u8g2;  extern short red_led,green_led,blue_led;typedef struct
{char* str;int len;
}SETTING_LIST;extern SETTING_LIST list_led[];
extern SETTING_LIST list_beep[];
extern SETTING_LIST list_wang[];
extern SETTING_LIST list_tianqi[];void ui_progress(int tag_y,int time);
int ui_run(short *a,short *a_tag,uint8_t step,uint8_t slow_cnt);
void ui_menu(void);
void key_proc(void);
void drawDial(float value,int x,int y);
void drawStyledHalfDial(float value,int centerX,int centerY);
void task_select(void);
void wifi_ui(void);
void time_ui(int x,int y,int year,int month,int day,int hour,int minute,int second);
void tianqi_ui(void);
void shiwen_ui(void);
void led_ui(void);
void beep_ui(void);#endif // !_UI_H

3.ui.c

#include "ui.h"
#include "ui_bmp.h"short menu_x,menu_x_tag,menu_y,menu_y_tag;          //菜单界面的x,y与菜单目标x,yshort beep_x,beep_x_tag;      //beep x:当前位置数值,x_tag:目标值
short led_x,led_x_tag;        //led x:当前位置数值,x_tag:目标值
short shi_x,shi_x_tag;        //shi x:当前位置数值,x_tag:目标值
short tianqi_x,tianqi_x_tag;        //tianqi x:当前位置数值,x_tag:目标值
short time_x,time_x_tag;        //time x:当前位置数值,x_tag:目标值
short wangluo_x,wangluo_x_tag;      //网络x:当前位置数值,x_tag:目标值short beep_y=80,beep_y_tag=80;
short led_y=80,led_y_tag=80;
short shi_y=80,shi_y_tag=80;
short tianqi_y=80,tianqi_y_tag=80;
short time_y=80,time_y_tag=80;
short wangluo_y=80,wangluo_y_tag=80;short wifi_frame_len,wifi_frame_len_tag;      //wifi框的宽度和框的宽度目标值
short wifi_y_offset,wifi_y_offset_tag;          //wifi框的y值与目标值
short led_frame_len,led_frame_len_tag;      //led框的宽度和框的宽度目标值
short led_y_offset,led_y_offset_tag;          //led框的y值与目标值
short beep_frame_len,beep_frame_len_tag;      //beep框的宽度和框的宽度目标值
short beep_y_offset,beep_y_offset_tag;          //beep框的y值与目标值int ui_select = 0;                     //列表的选定int ui_wifi_select = 0;                //wifi列表的选择状态
int wifi_select = 0;                   //wifi列表的选项
int ui_led_select = 0;                  //led列表的选择状态        
int led_select = 0;                     //led列表的选项
int ui_beep_select = 0;                  //beep列表的选择状态        
int beep_select = 0;                     //beep列表的选项int state;          //状态机int beep_list_len,wangluo_list_len,led_list_len,tianqi_list_len;u8g2_t u8g2;        //显示器初始化结构体//蜂鸣器菜单
SETTING_LIST list_beep[] =
{{"ON",2},{"OFF",3},
};
//led菜单
SETTING_LIST list_led[] =
{{"R",1},{"G",1},{"B",1},
};
//天气菜单
SETTING_LIST list_tianqi[] =
{{"today",5},{"next",4},{"after",5},
};
//网络菜单
SETTING_LIST list_wang[] =
{{"ON",2},{"OFF",3},{"RESET",5},
};void ui_progress(int tag_y,int time)                //进度条
{u8g2_FirstPage(&u8g2);                                            do{for(uint8_t i=0;i<=99;i=i+2){if(i==76)   HAL_Delay(500);u8g2_ClearBuffer(&u8g2); char buff[20];//u8g2_SetFont(&u8g2,u8g2_font_ncenB08_tf);//字体sprintf(buff,"%d%%",(int)(i/100.0*100));u8g2_DrawStr(&u8g2,105,tag_y+9,buff);//当前进度显示u8g2_DrawRBox(&u8g2,2,tag_y,i,10,5);//填充框实心矩形框u8g2_DrawRFrame(&u8g2,0,tag_y-2,103,14,5);//空心矩形框HAL_Delay(time);u8g2_SendBuffer(&u8g2);}}while (u8g2_NextPage(&u8g2));
}int ui_run(short *a,short *a_tag,uint8_t step,uint8_t slow_cnt)             //UI滑动效果
{uint8_t temp;temp = abs(*a_tag - *a) > slow_cnt ? step : 1;if(*a < *a_tag){*a += temp;}else if (*a > *a_tag){*a -= temp;}else{return 0;}return 1;
}void ui_menu(void)
{u8g2_ClearBuffer(&u8g2);task_select();wifi_ui();time_ui(time_x-70,time_y-18,2023,11,23,15,47,56);tianqi_ui();shiwen_ui();led_ui();beep_ui();ui_run(&menu_x,&menu_x_tag,10,8);ui_run(&menu_y,&menu_y_tag,10,8);ui_run(&time_y,&time_y_tag,10,8);ui_run(&time_x,&time_x_tag,10,8);ui_run(&tianqi_y,&tianqi_y_tag,10,8);ui_run(&tianqi_x,&tianqi_x_tag,10,8);ui_run(&shi_y,&shi_y_tag,10,8);ui_run(&shi_x,&shi_x_tag,10,8);ui_run(&led_y,&led_y_tag,10,8);ui_run(&led_x,&led_x_tag,10,8);ui_run(&beep_y,&beep_y_tag,10,8);ui_run(&beep_x,&beep_x_tag,10,8);ui_run(&wangluo_y,&wangluo_y_tag,10,8);ui_run(&wangluo_x,&wangluo_x_tag,10,8);ui_run(&wifi_y_offset,&wifi_y_offset_tag,3,4);ui_run(&wifi_frame_len,&wifi_frame_len_tag,4,4);ui_run(&led_y_offset,&led_y_offset_tag,3,4);ui_run(&led_frame_len,&led_frame_len_tag,4,4);ui_run(&beep_y_offset,&beep_y_offset_tag,3,4);ui_run(&beep_frame_len,&beep_frame_len_tag,4,4);HAL_Delay(10);u8g2_SendBuffer(&u8g2);
}void key_proc(void)                         
{menu_x_tag = beep_x = led_x = shi_x = tianqi_x = time_x = wangluo_x = ui_select*70;if(ui_wifi_select == 0 && ui_led_select == 0 && ui_beep_select == 0){if(key[3].single_flag == 1)         //右移动{key[3].single_flag = 0;ui_select--;beep_didi(20);if(ui_select <= 0){ui_select = 0;}}if(key[2].single_flag == 1)             //左移动{key[2].single_flag = 0;ui_select++;beep_didi(20);if(ui_select >= 5){ui_select = 5;}}}if(key[0].long_flag == 1)             //往上移动{key[0].long_flag = 0;ui_wifi_select = 0;ui_led_select = 0;ui_beep_select = 0;beep_didi(20);menu_y_tag = 0;if(ui_select ==5)   beep_y_tag = 80;if(ui_select ==4)   led_y_tag = 80;if(ui_select ==3)   shi_y_tag = 80;if(ui_select ==2)   tianqi_y_tag = 80;if(ui_select ==1)   time_y_tag = 80;if(ui_select ==0)   wangluo_y_tag = 80;}if(key[1].long_flag == 1)             //往下移动{key[1].long_flag = 0;beep_didi(20);menu_y_tag = -64;if(ui_select ==5){beep_y_tag = 20;ui_beep_select = 1;}   if(ui_select ==4){led_y_tag = 20;ui_led_select = 1;}   if(ui_select ==3)   shi_y_tag = 20;if(ui_select ==2)   tianqi_y_tag = 20;if(ui_select ==1)   time_y_tag = 20;if(ui_select ==0){wangluo_y_tag = 20;ui_wifi_select = 1;}        }if(ui_beep_select == 1 && ui_select == 5)           //beep二级菜单选择{if(key[0].single_flag == 1)                     //上移动{key[0].single_flag = 0;beep_didi(20);beep_y_offset_tag -= 20;beep_select -= 1;}if(key[1].single_flag == 1)                     //下移动{key[1].single_flag = 0;beep_didi(20);beep_y_offset_tag += 20;beep_select += 1;}}if(ui_led_select == 1 && ui_select == 4)           //led二级菜单选择{if(key[0].single_flag == 1)                     //上移动{key[0].single_flag = 0;beep_didi(20);led_y_offset_tag -= 20;led_select -= 1;}if(key[1].single_flag == 1)                     //下移动{key[1].single_flag = 0;beep_didi(20);led_y_offset_tag += 20;led_select += 1;}if(led_select == 1)                             //绿灯值{if(key[3].single_flag == 1)                 //右加    {key[3].single_flag = 0;beep_didi(20);green_led += 1;}if(key[2].single_flag == 1)                 //右减 {key[2].single_flag = 0;beep_didi(20);green_led -= 1;}}if(led_select == 0)                             //红灯值{if(key[3].single_flag == 1)                 //右加    {key[3].single_flag = 0;beep_didi(20);red_led += 1;}if(key[2].single_flag == 1)                 //右减 {key[2].single_flag = 0;beep_didi(20);red_led -= 1;}}if(led_select == 2)                             //蓝灯值{if(key[3].single_flag == 1)                 //右加    {key[3].single_flag = 0;beep_didi(20);blue_led += 1;}if(key[2].single_flag == 1)                 //右减 {key[2].single_flag = 0;beep_didi(20);blue_led -= 1;}}}if(ui_wifi_select == 1 && ui_select == 0)           //wifi二级菜单选择{if(key[0].single_flag == 1)                     //上移动{key[0].single_flag = 0;beep_didi(20);wifi_y_offset_tag -= 20;wifi_select -= 1;}if(key[1].single_flag == 1)                     //下移动{key[1].single_flag = 0;beep_didi(20);wifi_y_offset_tag += 20;wifi_select += 1;}}wifi_frame_len_tag = list_wang[wifi_select].len*13;led_frame_len_tag = list_led[led_select].len*13;beep_frame_len_tag = list_beep[beep_select].len*13;ui_menu();
}void task_select(void)                      //任务选择菜单显示
{u8g2_DrawXBMP(&u8g2,menu_x+40,menu_y+10,44,44,wifi);u8g2_DrawXBMP(&u8g2,menu_x-30,menu_y+10,44,44,clock);u8g2_DrawXBMP(&u8g2,menu_x-100,menu_y+10,44,44,tianqi);u8g2_DrawXBMP(&u8g2,menu_x-170,menu_y+10,44,44,shi);u8g2_DrawXBMP(&u8g2,menu_x-240,menu_y+10,44,44,led);u8g2_DrawXBMP(&u8g2,menu_x-310,menu_y+10,44,44,beep);
}void wifi_ui(void)                      //wifi任务功能
{wangluo_list_len = sizeof(list_wang) / sizeof(SETTING_LIST);for(int i = 0;i < wangluo_list_len;i++){u8g2_DrawStr(&u8g2,wangluo_x+2,wangluo_y+i*20,list_wang[i].str);}u8g2_SetDrawColor(&u8g2,2);u8g2_DrawRBox(&u8g2,wangluo_x,wangluo_y-16+wifi_y_offset,wifi_frame_len,22,3);u8g2_SetDrawColor(&u8g2,1);
}char str_time[20];void time_ui(int x,int y,int year,int month,int day,int hour,int minute,int second)                      //time任务功能
{u8g2_DrawRFrame(&u8g2,x+5,y+3,122,58,10);sprintf(str_time,"%d-%d-%d",year,month,day);u8g2_SetFont(&u8g2,u8g2_font_t0_16_mf);u8g2_DrawStr(&u8g2,x+25,y+20,str_time);sprintf(str_time,"%d:%d:%d",hour,minute,second);u8g2_SetFont(&u8g2,u8g2_font_t0_14_mf);u8g2_DrawStrX2(&u8g2,x+10,y+55,str_time);u8g2_SetFont(&u8g2,u8g2_font_t0_22_mf);
}void tianqi_ui(void)                    //天气任务功能
{tianqi_list_len = sizeof(list_tianqi) / sizeof(SETTING_LIST);for(int i = 0;i < tianqi_list_len;i++){u8g2_DrawStr(&u8g2,tianqi_x-146+6,tianqi_y+i*20,list_tianqi[i].str);}
}void shiwen_ui(void)                    //室温任务功能
{drawStyledHalfDial(45.0,shi_x-210+68,shi_y+40);
}char str_led[20];
short red_led,green_led,blue_led;
void led_ui(void)                    //led任务功能
{led_list_len = sizeof(list_led) / sizeof(SETTING_LIST);for(int i = 0;i < led_list_len;i++){u8g2_DrawStr(&u8g2,led_x-274+2,led_y+i*20,list_led[i].str);}sprintf(str_led,"%d",red_led);u8g2_DrawStr(&u8g2,led_x-274+2+98,led_y,str_led);          //当前进度显示              红u8g2_DrawRFrame(&u8g2,23,led_y-14,80,14,5);             //空心矩形框u8g2_DrawRBox(&u8g2,23,led_y-12,red_led,10,5);              //填充框实心矩形框sprintf(str_led,"%d",green_led);u8g2_DrawStr(&u8g2,led_x-274+2+98,led_y+20,str_led);          //当前进度显示              绿u8g2_DrawRFrame(&u8g2,23,led_y+20-14,80,14,5);             //空心矩形框u8g2_DrawRBox(&u8g2,23,led_y+20-12,green_led,10,5);              //填充框实心矩形框sprintf(str_led,"%d",blue_led);u8g2_DrawStr(&u8g2,led_x-274+2+98,led_y+40,str_led);          //当前进度显示              蓝u8g2_DrawRFrame(&u8g2,23,led_y+40-14,80,14,5);             //空心矩形框u8g2_DrawRBox(&u8g2,23,led_y+40-12,blue_led,10,5);              //填充框实心矩形框u8g2_SetDrawColor(&u8g2,2);u8g2_DrawRBox(&u8g2,led_x-274+2,led_y-16+led_y_offset,led_frame_len,22,3);u8g2_SetDrawColor(&u8g2,1);
}void beep_ui(void)                    //beep任务功能
{beep_list_len = sizeof(list_beep) / sizeof(SETTING_LIST);for(int i = 0;i < beep_list_len;i++){u8g2_DrawStr(&u8g2,beep_x-338+2,beep_y+i*20,list_beep[i].str);}u8g2_SetDrawColor(&u8g2,2);u8g2_DrawRBox(&u8g2,beep_x-338+2,beep_y-16+beep_y_offset,beep_frame_len,22,3);u8g2_SetDrawColor(&u8g2,1);
}void drawDial(float value,int x,int y) {// 仪表盘半径int radius = u8g2.height / 2.1;  // 半径// 仪表盘背景u8g2_SetFont(&u8g2, u8g2_font_ncenB14_tr);u8g2_DrawStr(&u8g2, 5, 20, "M");// 绘制仪表盘外框u8g2_DrawCircle(&u8g2, x, y, radius, U8G2_DRAW_ALL);// 绘制刻度for (int angle = 0; angle < 360; angle += 15) {float radian = angle * 3.14 / 180.0;int startX = x + (radius - 5) * cos(radian);int startY = y - (radius - 5) * sin(radian);int endX = x + radius * cos(radian);int endY = y - radius * sin(radian);u8g2_DrawLine(&u8g2, startX, startY, endX, endY);}// 计算指针的终点坐标float angle = value * 3.14 / 180.0;int endX = x + radius * cos(angle);int endY = y - radius * sin(angle);// 绘制指针u8g2_DrawLine(&u8g2, x, y, endX, endY);
}char str_shi[20];void drawStyledHalfDial(float value,int centerX,int centerY)        //64 57
{// 仪表盘半径int radius = u8g2.height / 1.2;// 清除屏幕// u8g2_ClearBuffer(&u8g2);//shusprintf(str_shi,"%.1f",value);u8g2_DrawStr(&u8g2,centerX-20,centerY-13,str_shi);// 绘制刻度for (int angle = 0; angle <= 180; angle += 15) {float radian = angle * 3 / 180.0;int startX = centerX + (radius - 5) * cos(radian);int startY = centerY - (radius - 5) * sin(radian);int endX = centerX + radius * cos(radian);int endY = centerY - radius * sin(radian);u8g2_DrawLine(&u8g2, startX, startY, endX, endY);u8g2_DrawLine(&u8g2, startX - 1, startY - 1, endX - 1, endY - 1);}// 计算指针的终点坐标float angle = value * 3 / 180.0;int endX = centerX + radius * cos(angle);int endY = centerY - radius * sin(angle);// 绘制指针u8g2_DrawLine(&u8g2, centerX, centerY, endX, endY);// 更新显示// u8g2_SendBuffer(&u8g2);
}