本文正在參加星光計劃3.0—夏日挑戰賽
一.前言
上一篇文章示範了小淩派手勢操作子產品搭配OLED的基本效果,文章在這:
小淩派玩一玩OLED+手勢操作
這次玩點有意思的,用手勢操作OLED屏的菜單
二.制作中文字型
如果要實作手勢菜單.就不能使用以前的方式來操作中文了,除非你能記住所有的中文字的位置,那這種情況下要如果進行呢,請看法寶:
typedef struct Chinese_Font_data{
char text[3];
uint8_t data[32];
}Chinese_Font_data;
typedef struct ChineseFont{
uint8_t font_size;
uint8_t font_data_len;
// uint8_t keep;
Chinese_Font_data *font_data;
}ChineseFont;
這裡建立兩個結構體,結構體裡面就是存的字型資訊和字型資料,那内容是啥樣的呢,這裡舉幾個例子:
Chinese_Font_data xingkai_data_16[]={
/*---------------子----------------*/
{"子",
{0x00,0x00,0x00,0x00,0x01,0xF0,0x0F,0x70,0x00,0x60,0x01,0xC0,0x01,0xFE,0x3F,0xFE,
0x78,0xC0,0x00,0xC0,0x00,0xC0,0x00,0xC0,0x00,0xC0,0x07,0xC0,0x03,0x80,0x01,0x00}},
/*---------------菜----------------*/
{"菜",
{0x00,0x00,0x06,0x70,0x06,0x7C,0x3F,0xFC,0x12,0xC0,0x03,0xC0,0x07,0x30,0x0D,0xE0,
0x05,0x70,0x3F,0xF8,0x17,0xC0,0x0D,0x60,0x19,0x38,0x71,0x1F,0x03,0x00,0x01,0x00}},
/*---------------單----------------*/
{"單",
{0x00,0x00,0x06,0x70,0x07,0x60,0x02,0x70,0x0F,0xF8,0x0D,0xF8,0x0F,0xF0,0x07,0xF0,
0x07,0xA0,0x01,0xFE,0x7F,0xFC,0x01,0x80,0x01,0x80,0x01,0x80,0x01,0x80,0x01,0x80}},
/*---------------選----------------*/
{"選",
{0x00,0x00,0x00,0x60,0x00,0x60,0x19,0xE0,0x09,0xF8,0x01,0xF0,0x02,0x7C,0x3F,0xF8,
0x3A,0xA0,0x19,0xA0,0x19,0x24,0x0A,0x3E,0x7F,0x1C,0x01,0xFF,0x00,0x3C,0x00,0x00}},
/*---------------項----------------*/
{"項",
{0x00,0x00,0x00,0x00,0x00,0x1E,0x01,0xFC,0x0E,0x60,0x3C,0xFC,0x0C,0x8C,0x0C,0xAC,
0x0E,0xAC,0x3F,0xAC,0x71,0xEC,0x01,0xFC,0x00,0xDC,0x01,0x8C,0x02,0x04,0x00,0x00}},
}
三.中文字型的顯示
處理完這個之後,就可以編寫中文顯示的方法了:
void ssd1306_DrawChinese(char *ch, ChineseFont *font,SSD1306_COLOR color)
{
// printf("%d %d\n",sizeof(xingkai_16),(sizeof(xingkai_16[0])));
// printf("%d,, draw chinese:%s\n",xingkai_16_font_len,ch);
IF(font == &xingkai_16){
for(int ch_idx=0;ch_idx<xingkai_16_font_len;ch_idx++){
// printf("%d === %s\n",i,font[i].text);
Chinese_Font_data *font_data =&font->font_data[ch_idx];
if(strncmp(ch,font_data->text,sizeof(font_data->text))==0){
{
int x=SSD1306.CurrentX,y=SSD1306.CurrentY;
int w=font->font_size,h=font->font_size;
int stride = 0;
if (x + w > SSD1306_WIDTH || y + h > SSD1306_HEIGHT || w * h == 0) {
printf("%dx%d @ %d,%d out of range or invalid!\r\n", w, h, x, y);
return;
}
w = (w <= SSD1306_WIDTH ? w : SSD1306_WIDTH);
h = (h <= SSD1306_HEIGHT ? h : SSD1306_HEIGHT);
stride = (stride == 0 ? w : stride);
uint8_t rows = font->font_data_len * 8 / stride;
for (uint8_t i = 0; i < rows; i++) {
uint32_t base = i * stride / 8;
for (uint8_t j = 0; j < w; j++) {
uint32_t idx = base + (j / 8);
uint8_t byte = idx < font->font_data_len ? font_data->data[idx] : 0;
uint8_t bit = byte & (0x80 >> (j % 8));
ssd1306_DrawPixel(x + j, y + i, bit ? !color : color);
}
}
}
// ssd1306_DrawRegion(SSD1306.CurrentX,SSD1306.CurrentY,font->font_size,
// font->font_size, font_data->data,font->font_data_len,0);
SSD1306.CurrentX += font->font_size;
break;
}
}
}
}
void ssd1306_Text(char *string,uint8_t string_len,uint8_t font_size,uint8_t mode)
{
int i=0;
// printf("Text:%x %x %x %x %x %x %d %d %d\n",string[0],string[1],string[2],string[3],string[4],string[5],
// string[3],string[4],string[5]);
printf("ssd1306_Text %d:%s\n",string_len,string);
while(i<string_len){
if(string[i] < 0)
{
// printf("[%d ]%d %x for chinese\n",i,string[i],string[i]);
ssd1306_DrawChinese(&string[i],&xingkai_16,mode);
i+=3;
}
else
{
// printf("[%d ]%d %x for char\n",i,string[i],string[i]);
ssd1306_DrawChar(string[i],Font_7x10,!mode);
i+=1;
}
}
}
這裡面的一個邏輯就是判斷字元是中文還是英文,如果是中文的話char值是小于0的,但是不是一個字元能表示,中文使用UTF-8,最多會使用3個字元表示一個中文字,是以當出現中文的時候,char數組裡長度需要增加3,如果是英文字的話就隻需要1個字元了.
這工作完成之後就可以測試中文和英文數字等的的顯示了,随便寫幾個中文字,調用接口顯示:
ssd1306_Text("1.你好 2.Hello",strlen("你好世界"),16,0);
可以觀察顯示,不得不提一句,這地方花費了大量的時間在編譯上,因為編譯系統不完善.不能支援增量編譯,希望廠家團隊盡快解決.
四.制作菜單架構
其實這裡示範的菜單架構比較簡單,因為菜單會有子菜單項,是以需要用多叉樹的結構來表現,請看法寶:
typedef struct Menu{
// char name[8];
char text[14];
char state;
void *param;
uint8_t sub_len;
struct Menu **subMenu;
void (*enteRFunc)(struct Menu *menu);
void (*exitFunc)(struct Menu *menu);
}Menu;
然後就制作菜單的資料,這裡舉例:
#include "menu.h"
#include <stddef.h>
Menu hoguo={
.text="火鍋",
};
Menu BBQ={
.text="BBQ",
};
Menu western={
.text="西餐",
};
extern Menu mainMenu;
Menu *eating_subs[]={&mainMenu,&hoguo,&BBQ,&western};
Menu eating={
.text="聚餐",
.sub_len = 3,
.subMenu=eating_subs
};
Menu comedy={
.text="喜劇片",
.sub_len=0,
};
Menu Thriller={
.text="驚悚片"
};
extern Menu movie;
Menu *movie_subs[]={&mainMenu, &comedy,
&Thriller};
Menu movie={
.text="看電影",
.sub_len = 3,
.subMenu=movie_subs
};
Menu yunnan={
.text="雲南",
.sub_len=0,
};
Menu beijing={
.text="北京"
};
Menu xizang={
.text="西藏"
};
extern Menu trip;
Menu *trip_subs[]={&mainMenu,&yunnan, &beijing,
&xizang};
Menu trip={
.text="旅遊",
.sub_len = 4,
.subMenu=trip_subs
};
Menu kge={
.text="唱K",
.sub_len=0,
};
Menu anmo={
.text="按摩"
};
Menu xizao={
.text="洗澡"
};
extern Menu relex;
Menu *releax_subs[]={&mainMenu,&kge, &anmo,
&xizao};
Menu relax={
.text="放松",
.sub_len = 4,
.subMenu=releax_subs
};
Menu *mainMenu_subs[5]={NULL,&eating,&trip,&movie,&relax};
Menu mainMenu={
.text = "娛樂活動",
.sub_len = 5,
.subMenu=mainMenu_subs
};
菜單項制作好了之後,可以放到UI裡去渲染
五.UI線程渲染菜單
ssd1306_SetCursor(32, 0);
ssd1306_Text(currentMenu->text,strlen(currentMenu->text),16,0);
int show_idx=1;
if(select_idx > max_sub){
show_idx+=(select_idx-max_sub);
// continue;
}
int cursor=1;
for(int i=show_idx;i<currentMenu->sub_len;i++)
{
ssd1306_SetCursor(0, 16*(cursor++));
Menu *currentSub=currentMenu->subMenu[i];
if(currentSub){
char text[24]={0};
sprintf(text,"%d.%s",i,currentSub->text);
printf("text = %s\n",text);
ssd1306_Text(text,strlen(text),16,select_idx==i);
}
}
ssd1306_UpdateScreen();
這裡的邏輯就是把菜單标題和子菜單都顯示出來,效果如圖:
六.結合手勢傳感器傳的資料
把手勢傳感器的資料接收到,然後做相應的邏輯處理,這裡有一個問題,就是目前菜單因為螢幕的原因,隻能顯示3個菜單,是以需要做一個機制,當選擇的菜單超過目前長度的時候往下滑一格,
代碼如下:
static void *OLedTask(const char *arg)
{
(void)arg;
uint32_t ret=0;
ssd1306_Init();
printf("OLedTask queueId=%d\n",queueId);
//ssd1306_DrawString("Hello HarmonyOS!", Font_7x10, White);
int text_area_width = 64;
int text_area_height = 64;
int text_per_line_num = text_area_height / font_width;
int mod = hope_num % text_per_line_num;
int text_line_num = hope_num / text_per_line_num;
if (mod)
{
text_line_num += 1;
}
printf("title_addr=%p,dir_addr=%p\n", title_arr,dir_arr);
int text_alredy_show = 0;
int x = 0;
int y = 0;
int select_idx = 1;
ssd1306_Fill(Black);
ssd1306_SetCursor(0, 0);
Menu *currentMenu = &mainMenu;
int max_sub=3;
int start=0;
while(1){
uint32_t flag = 0;
uint32_t rLen =4;
if(start){
ret = LOS_QueueReadCopy(queueId,
&flag,
&rLen,
LOS_WAIT_FOREVER);
// LOS_Msleep(OLED_INTERVAL_TIME_US);
printf("READ ret = %d,FLAG =%02x\n",ret,flag);
}
start =1;
ssd1306_Fill(Black);
ssd1306_SetCursor(0, 0);
int idx=0;
for(;idx<9;idx++){
if(flag&(1<<idx)){
break;
}
}
printf("idx=%d,select_idx=%d\n",idx,select_idx);
switch(idx){
case 0:
if(select_idx > 1){
select_idx--;
}
break;
case 1:
if(select_idx < currentMenu->sub_len-1){
select_idx++;
}
break;
case 2:
{
Menu *currentSub=currentMenu->subMenu[0];
if(currentSub){
currentMenu=currentSub;
select_idx = 1;
start = 0;
continue;
}
}break;
case 3:
{
Menu *currentSub=currentMenu->subMenu[select_idx];
if(currentSub){
currentMenu=currentSub;
select_idx = 1;
start = 0;
continue;
}
}break;
break;
}
printf(">>idx=%d,select_idx=%d\n",idx,select_idx);
ssd1306_SetCursor(32, 0);
ssd1306_Text(currentMenu->text,strlen(currentMenu->text),16,0);
int show_idx=1;
if(select_idx > max_sub){
show_idx+=(select_idx-max_sub);
// continue;
}
int cursor=1;
for(int i=show_idx;i<currentMenu->sub_len;i++)
{
ssd1306_SetCursor(0, 16*(cursor++));
Menu *currentSub=currentMenu->subMenu[i];
if(currentSub){
char text[24]={0};
sprintf(text,"%d.%s",i,currentSub->text);
printf("text = %s\n",text);
ssd1306_Text(text,strlen(text),16,select_idx==i);
}
}
ssd1306_UpdateScreen();
}
具體效果可以檢視附件的視訊：https://ost.51cto.com/resource/2131
七.總結
其實手勢控制菜單最重要的就是思路,再結合一點程式設計技巧的話,事情就很容易了,費時的地方就是字庫的制作和菜單的制作.
希望還能給大家帶來更多作品.
![新到啦！🎉今天給大家推薦一款超值數位産品：一加Ace2V青釉16+256G。這款手機于07.16日激活，是全新的，帶有原[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)