U8g2菜单界面+按键操作在线模拟

Posted 2023-01-11 perseverance52

U8g2菜单界面+按键操作在线模拟控制

---

✨利用U8g2库在线模拟菜单功能，可以很方便的快速调试效果。

🌼Demo1代码

• 📌仿真地址：https://wokwi.com/projects/291572875238834696

/*
 * Very simple menu on an OLED display (with 8 lines of text).
 * Displays menu items from the array menu. Max. number of items is 7.
 * 
 * This sketch uses the library "U8g2", "Bounce2" and uses 3 buttons (up/down/select).
 * 
 */

#include <U8g2lib.h>
#include <Bounce2.h>

byte button_pins[] = 9, 5, 6; // button pins, 4,5 = up/down, 6 = select
#define NUMBUTTONS sizeof(button_pins)
Bounce * buttons = new Bounce[NUMBUTTONS];

U8X8_SSD1306_128X64_NONAME_HW_I2C display(U8X8_PIN_NONE);

#define MENU_SIZE 5
char *menu[MENU_SIZE] =  "Option 1", "Option 2", "Option 3", "Option 4", "Option 5" ;

int cursor=0;

void setup() 
  Serial.begin(9600);

  // Make input & enable pull-up resistors on switch pins
  for (int i=0; i<NUMBUTTONS; i++) 
    buttons[i].attach( button_pins[i], INPUT_PULLUP); // setup the bounce instance for the current button
    buttons[i].interval(25); // interval in ms
  
  
  display.begin();
  display.setPowerSave(0);
  display.setFont(u8x8_font_pxplusibmcgathin_f);

  showMenu();


void loop() 
  // process button press:
  for (int i = 0; i<NUMBUTTONS; i++) 
    buttons[i].update(); // Update the Bounce instance
    if ( buttons[i].fell() )  // If it fell
      if (i==2)  // select
         display.clearLine(7);
         display.setCursor(0,7);
         display.print(">>");
         display.print(menu[cursor]);
         executeChoice(cursor);
      
      else 
        // erase previous cursor:
        display.setCursor(0,cursor);
        display.print(' ');
        if (i==0)  // up
          cursor++;
          if (cursor>(MENU_SIZE-1)) cursor=0;
        
        else  // down
          cursor--;
          if (cursor<0) cursor=(MENU_SIZE-1);
        
        // show cursor at new line:
        display.setCursor(0,cursor);
        display.print('>');
      
     // end if button fell...
   // end for-loop of button check


/**
 * Clear display and show the menu.
 */
void showMenu() 
  cursor=0;
  display.clearDisplay();
  // show menu items:
  for (int i = 0; i<MENU_SIZE; i++) 
    display.drawString(2,i,menu[i]);
  
  display.setCursor(0,0);
  display.print('>');


/**
 * Execute the task which matches the chosen menu item.
 */
void executeChoice(int choice) 
  switch(choice) 
      case 0 :
                Serial.print("Execute choice "); Serial.print(choice); Serial.print(" - "); Serial.println(menu[choice]);
                break;
      case 1 :
                Serial.print("Execute choice "); Serial.print(choice); Serial.print(" - "); Serial.println(menu[choice]);
                break;
      case 2 :
                Serial.print("Execute choice "); Serial.print(choice); Serial.print(" - "); Serial.println(menu[choice]);
                break;
      case 3 :
                Serial.print("Execute choice "); Serial.print(choice); Serial.print(" - "); Serial.println(menu[choice]);
                break;
      case 4 :
                Serial.print("Execute choice "); Serial.print(choice); Serial.print(" - "); Serial.println(menu[choice]);
                break;
      default :
                Serial.print("Execute choice "); Serial.print(choice); Serial.print(" - "); Serial.println(menu[choice]);
                break;
  
  

🌻Demo2代码

• 📍滚动菜单
  
  

• 📌https://wokwi.com/projects/353353893815793665

#include <U8g2lib.h>
#include <Wire.h>
#include <math.h>

typedef struct

  byte val;
  byte last_val;
KEY_T;
typedef struct

  byte id;
  byte press;
  byte update_flag;
  byte res;
KEY_MSG;

typedef struct

  char* str;
  byte len;
SETTING_LIST;

SETTING_LIST list[] = 

  "hello",5,
  "menu",4,
  "flowers",7,
  "perseverance",12,
;
U8G2_SH1106_128X64_NONAME_F_HW_I2C u8g2(U8G2_R0, /* reset=*/ U8X8_PIN_NONE);//该驱动是1.3寸的OLED屏幕。---------U8G2_SSD1306_128X64_NONAME_F_HW_I2C u8g2(U8G2_R0, /* reset=*/ U8X8_PIN_NONE);这是比较常用的0.9寸的OLED显示器的驱动
short x,x_trg; //x当前位置数值,x_trg 目标坐标值
short y = 15,y_trg = 15;

short frame_len,frame_len_trg;//框框的宽度
short frame_y,frame_y_trg;//框框的y

char ui_select = 0;

int state;
KEY_T key[2] = 0;
KEY_MSG key_msg = 0;

byte get_io_val(byte ch)

  if(ch == 0)
  
    return digitalRead(2);
  
  else
  
    return digitalRead(3);
  


void key_init(void)

  for(int i = 0;i<2;i++)
  
    key[i].val = key[i].last_val = get_io_val(i);
  


void key_scan(void)

  for(int i = 0;i<2;i++)
  
    key[i].val =  get_io_val(i);
    if(key[i].val != key[i].last_val)
    
      key[i].last_val = key[i].val;
      if(key[i].val == 0)
      
        key_msg.id = i;
        key_msg.press = 1;
        key_msg.update_flag = 1;
      
    
  


int ui_run(short *a,short *a_trg,u8 step,u8 slow_cnt)
  
  u8 temp;

  temp = abs(*a_trg-*a) > slow_cnt ? step : 1;
  if(*a < *a_trg)
  
    *a += temp;
  
  else if( *a > *a_trg)
  
    *a -= temp;  
  
  else
  
    return 0;
  
  return 1;


void setup(void) 

 	pinMode(2, INPUT_PULLUP);
  pinMode(3, INPUT_PULLUP);
  key_init();
  u8g2.begin();
  u8g2.setFont(u8g2_font_t0_16_tf ); //设置字体
  frame_len = frame_len_trg = list[ui_select].len*10;


void ui_show(void)

  int list_len = sizeof(list) / sizeof(SETTING_LIST);
  u8g2.clearBuffer();         // 清除内部缓冲区
  for(int i = 0 ;i < list_len;i++)
  
    u8g2.drawStr(x+2,y+i*14,list[i].str);  // 第一段输出位置
  
  u8g2.drawRFrame(x,frame_y+2,frame_len,16,3);
  ui_run(&frame_y,&frame_y_trg,5,4);
  ui_run(&frame_len,&frame_len_trg,10,5);
  u8g2.sendBuffer();          // transfer internal memory to the displa


void ui_proc(void)

  int list_len = sizeof(list) / sizeof(SETTING_LIST);

  if(key_msg.update_flag && key_msg.press)
  
    key_msg.update_flag = 0;
    if(key_msg.id)
    
     ui_select++;
     if(ui_select >= list_len)
     
        ui_select = list_len - 1;  
     
    
    else
    
      ui_select--;
      if(ui_select < 0)
      
        ui_select = 0;  
      
    
    frame_y_trg = ui_select*14;
    frame_len_trg = list[ui_select].len*10;
  
  ui_show();


void loop(void) 

  key_scan();
  ui_proc();