STM32CubeMX FreeRTOS u8g2图片菜单制作

一、制作图片数组

找显示的图标，下面的网站里面是只有黑白的图 

Svg Vector Icons & PNG / PSD / EPS / PNM / Free Downloads - OnlineWebFonts.COM

先添加白板背景，在设置图片尺寸 在线添加图片背景

oled显示分辨率为128*64 图片尺寸不能大于这个

制作好的图片 

 

然后就是取模了Arduino中文社区

 修改下数组名字，数组放在用户头文件下面自定义代码区间

// width: 48, height: 48
const unsigned char startp[]= { 0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,
0x00,0x00,0x00,0xe0,0x07,0x00,0x00,0x00,0x00,0xfc,0x3f,0x00,0x00,0x00,0x00,0x0f,0xf0,
0x00,0x00,0x00,0x80,0x03,0xc0,0x01,0x00,0x00,0xc0,0x00,0x00,0x03,0x00,0x00,0x60,0xf8,
0x0f,0x06,0x00,0x00,0x30,0x3c,0x3c,0x0c,0x00,0x00,0x30,0x07,0xe0,0x0c,0x00,0x00,0x98,
0x0f,0xc0,0x19,0x00,0x00,0x98,0x3f,0xfc,0x19,0x00,0x00,0xd8,0x66,0x6e,0x1b,0x00,0x00,
0xd8,0x7c,0x36,0x1b,0x00,0x00,0x30,0x78,0x1e,0x0c,0x00,0x00,0x60,0x00,0x00,0x06,0x00,
0x00,0xc0,0x03,0xc0,0x03,0x00,0x00,0xe0,0xff,0xff,0x07,0x00,0x00,0xe0,0xff,0xff,0x07,
0x00,0x00,0x30,0xff,0xff,0x0c,0x00,0x00,0x38,0xf8,0x1f,0x1c,0x00,0x00,0x38,0x00,0x00,
0x1c,0x00,0x00,0x38,0x00,0x00,0x1c,0x00,0x00,0x38,0x00,0x00,0x1c,0x00,0x00,0x3c,0x00,
0x00,0x3c,0x00,0x00,0x3c,0x00,0x00,0x3c,0x00,0x00,0x3c,0x00,0x00,0x34,0x00,0x00,0x2c,
0x00,0x00,0x34,0x00,0x00,0x2c,0x00,0x00,0x34,0x00,0x00,0x6c,0x00,0x00,0x36,0x00,0x00,
0x6c,0x00,0x00,0x36,0x00,0x00,0x6c,0x00,0x00,0x36,0x00,0x00,0x4c,0x00,0x00,0x32,0x00,
0x00,0xcc,0x00,0x00,0x33,0x00,0x00,0xcc,0x00,0x00,0x33,0x00,0x00,0x8c,0x00,0x00,0x31,
0x00,0x00,0x8c,0x01,0x80,0x31,0x00,0x00,0xc8,0x01,0x80,0x13,0x00,0x00,0xd8,0x03,0xc0,
0x1b,0x00,0x00,0x58,0x06,0x60,0x1a,0x00,0x00,0x70,0x0c,0x30,0x0e,0x00,0x00,0x20,0x18,
0x18,0x04,0x00,0x00,0x00,0xf0,0x0f,0x00,0x00,0x00,0x00,0xc0,0x03,0x00,0x00,0x00,0x00,
0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00 };

 这样一个图片数组就取模成功了

直接主函数调用显示

		u8g2_ClearBuffer(&u8g2);//清空缓存
		u8g2_DrawXBMP(&u8g2,40,0,48,48,startp);//显示图片数组
		u8g2_SendBuffer(&u8g2);//发送缓存到oled

整个任务代码，包含显示进度条，i加的值可以调节进度条的速度

void StartTask(void const * argument)
{
  /* USER CODE BEGIN StartTask */
  /* Infinite loop */
  char percentageText[20];
  u8g2Init(&u8g2);//just use once in one task

  for(;;)
  { 
    vTaskSuspend(menuTaskHandle);//挂起菜单任务句柄
        //显示图片
		u8g2_ClearBuffer(&u8g2);
		u8g2_DrawXBMP(&u8g2,40,0,48,48,startp);
		u8g2_SendBuffer(&u8g2);
		
		// Simulate loading process, increasing by 1% each time
		for (int i = 10; i <= 100; i += 1) {        //i from 10 start cover actual rounded
				// Draw percentage text
				u8g2_SetFont(&u8g2, u8g2_font_ncenB08_tr);
				snprintf(percentageText, sizeof(percentageText), "%d%%", i);
				u8g2_DrawStr(&u8g2, 95, 59, percentageText);

				// Draw rounded progress bar background
				u8g2_DrawRFrame(&u8g2, 10, 50, 80, 10, 3);

				// Calculate actual progress bar length
				uint8_t progressBarLength = (i*80)/ 100;

				// Draw actual rounded progress bar
				u8g2_DrawRBox(&u8g2, 10, 50,progressBarLength, 10, 3);
				u8g2_SendBuffer(&u8g2);
				osDelay(20);
		}

		// clear data update screen 立即关闭显示
		u8g2_ClearBuffer(&u8g2);
		u8g2_SendBuffer(&u8g2);
		u8g2_UpdateDisplay(&u8g2);     

		vTaskResume(menuTaskHandle);//恢复菜单任务
		vTaskDelete(startTaskHandle);//删除自己

  }
  /* USER CODE END StartTask */
}

  freertos.c中初始化任务

/* USER CODE BEGIN PTD */

u8g2_t u8g2; // a structure which will contain all the data for one display


int fputc(int ch,FILE *f)
{
		HAL_UART_Transmit(&huart1,(uint8_t*)&ch,1,0xFFFF);
		return ch;
}
          
void ui_show(uint8_t x,uint8_t y){
	
		u8g2_DrawXBMP(&u8g2,1,1,30,30,clockp);
		u8g2_DrawXBMP(&u8g2,33,1,30,30,wifip);
		u8g2_DrawXBMP(&u8g2,65,1,30,30,tempp);
		u8g2_DrawXBMP(&u8g2,97,1,30,30,humip);
		u8g2_DrawXBMP(&u8g2,1,33,30,30,misicp);
		u8g2_DrawXBMP(&u8g2,33,33,30,30,smockp);
		u8g2_DrawXBMP(&u8g2,65,33,30,30,lightp);
		u8g2_DrawXBMP(&u8g2,97,33,30,30,waterp);
		u8g2_DrawRFrame(&u8g2, x, y, 32, 32, 2);
		u8g2_SendBuffer(&u8g2);
}

 int run_str(int *now,int *trag,const int speed,const int c_speed)
{
	int temp = 0;
	if (*now > *trag)
	{
		temp = ((*now - *trag) > c_speed) ? speed : c_speed;
		*now -= temp;
	}
	else if (*now < *trag)
	{
		temp = ((*trag - *now) > c_speed) ? speed : c_speed;
		*now += temp;
	}
	else 
	{
		return 1;
	}
	return 0;
}
/* USER CODE END PTD */

菜单任务

void MenuTask(void const * argument)
{
  /* USER CODE BEGIN MenuTask */
  /* Infinite loop */
		char tempText[20];
		char humiText[20];
		char displayText[10]; 
		int x=0,x_t=0,y=0,flag=0;
		int sedmu=0;
		uint8_t temp=55,humi=55;
		//MyMessage receivemessage;
  for(;;)
  {	osDelay(20);	
		// 接收消息从消息队列
//	 if (xQueueReceive(xQueue, &receivemessage, portMAX_DELAY) == pdPASS&&sedmu==0) {
		// receivedMessage 包含了发送的消息数据
//		u8g2_ClearBuffer(&u8g2);
//主页菜单		
//		// Show humi and temp
//		u8g2_SetFont(&u8g2, u8g2_font_ncenB08_tr);
//		snprintf(tempText, sizeof(tempText), "Smock: %d",temp);
//		u8g2_DrawStr(&u8g2, 4, 10, tempText);
//		snprintf(humiText, sizeof(humiText), "Power: %d",humi);
//		u8g2_DrawStr(&u8g2, 68, 10, humiText);
//		snprintf(tempText, sizeof(tempText), "Light: %d",temp);
//		u8g2_DrawStr(&u8g2, 8, 61, tempText);
//		snprintf(humiText, sizeof(humiText), "Water: %d",humi);
//		u8g2_DrawStr(&u8g2, 70, 61, humiText);
//		 
//		u8g2_DrawFrame(&u8g2, 0, 0, 128, 64); 
//		 // 绘制线条
//		u8g2_DrawLine(&u8g2, 0, 13, 128, 13);
//		u8g2_DrawLine(&u8g2, 64, 0, 64, 13);
//		 // 绘制线条
//		u8g2_DrawLine(&u8g2, 0, 51, 128, 51);
//		u8g2_DrawLine(&u8g2, 64, 64, 64, 51);	 
//		 
//		u8g2_DrawXBMP(&u8g2,16,18,30,30,humip);	 
//		u8g2_SetFont(&u8g2, u8g2_font_10x20_mf);		 
//		snprintf(humiText, sizeof(humiText), "%d%%", humi);
//		u8g2_DrawStr(&u8g2, 54, 40, humiText);
//		u8g2_SendBuffer(&u8g2);
//	 }

//列表菜单
			if(HAL_GPIO_ReadPin(GPIOA,GPIO_PIN_3)==0){
				osDelay(20);
				if(HAL_GPIO_ReadPin(GPIOA,GPIO_PIN_3)==0){
					flag ++;
					if(flag>3)
					{flag=0;}
				}
			}
			if(HAL_GPIO_ReadPin(GPIOA,GPIO_PIN_4)==0){
				osDelay(20);
				if(HAL_GPIO_ReadPin(GPIOA,GPIO_PIN_4)==0){
					flag--;
					if(flag<0)
					{flag=3;}
				
				}
			}
		
		switch(flag){
				case 1:x=0,x_t=13;u8g2_ClearBuffer(&u8g2);run_str(&x,&x_t,1,0);break;
				case 2:x=13,x_t=26;u8g2_ClearBuffer(&u8g2);run_str(&x,&x_t,1,0);break;
				case 3:x=26,x_t=0;u8g2_ClearBuffer(&u8g2);run_str(&x,&x_t,1,0);break;
				
				default: break;
	  }
		u8g2_SetFont(&u8g2, u8g2_font_ncenB08_tr);
		u8g2_DrawStr(&u8g2, 10, 12, "Clock");
		u8g2_DrawStr(&u8g2,10,24, "Hour");
		u8g2_DrawStr(&u8g2,10,36, "Min");
		u8g2_DrawRFrame(&u8g2, 0, x, 128, 14,3);		
		u8g2_SendBuffer(&u8g2);

//图形菜单
//		if(HAL_GPIO_ReadPin(GPIOA,GPIO_PIN_3)==0){
//			osDelay(18);
//			if(HAL_GPIO_ReadPin(GPIOA,GPIO_PIN_3)==0){
//				sedmu=1;
//			}
//		}
//		if(HAL_GPIO_ReadPin(GPIOA,GPIO_PIN_3)==0){
//			osDelay(200);
//			if(HAL_GPIO_ReadPin(GPIOA,GPIO_PIN_3)==0){
//				sedmu=0;
//			}
//		}

//			u8g2_ClearBuffer(&u8g2);
//			int i=1,j=3;
//			if(HAL_GPIO_ReadPin(GPIOA,GPIO_PIN_3)==0){
//				osDelay(20);
//				if(HAL_GPIO_ReadPin(GPIOA,GPIO_PIN_3)==0){
//					flag ++;
//					if(flag>8)
//					{flag=0;}
//				}
//			}
//			if(HAL_GPIO_ReadPin(GPIOA,GPIO_PIN_4)==0){
//				osDelay(20);
//				if(HAL_GPIO_ReadPin(GPIOA,GPIO_PIN_4)==0){
//					flag--;
//					if(flag<0)
//					{flag=8;}
//				
//				}
//			}
//			switch(flag){
//				case 1:x=0,x_t=32;y=0;u8g2_ClearBuffer(&u8g2);run_str(&x,&x_t,i,j);break;
//				case 2:x=32,x_t=64;y=0;u8g2_ClearBuffer(&u8g2);run_str(&x,&x_t,i,j);break;
//				case 3:x=64,x_t=96;y=0;u8g2_ClearBuffer(&u8g2);run_str(&x,&x_t,i,j);break;
//				case 4:x=96,x_t=0;y=0;u8g2_ClearBuffer(&u8g2);run_str(&x,&x_t,i,j);break;
//				case 5:x=0,x_t=32;y=32;u8g2_ClearBuffer(&u8g2);run_str(&x,&x_t,i,j);break;
//				case 6:x=32,x_t=64;y=32;u8g2_ClearBuffer(&u8g2);run_str(&x,&x_t,i,j);break;
//				case 7:x=64,x_t=96;y=32;u8g2_ClearBuffer(&u8g2);run_str(&x,&x_t,i,j);break;
//				case 8:x=96,x_t=0;y=32;u8g2_ClearBuffer(&u8g2);run_str(&x,&x_t,i,j);break;
//				default: break;
//			}
//			ui_show(x,y);




  }
  /* USER CODE END MenuTask */
}

主页菜单

图形菜单

列表菜单