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

目录

一、实物效果展示

二、丝滑菜单实现原理

三、代码开源

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 
#include "key.h"
#include 
#include 
#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,y

short 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);
    
    //shu
    sprintf(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);
}