【2023.6.17获奖项目】基于迪文圆形屏的双旋转菜单显示方案

dwinForumAdmin

【开源】基于迪文圆形屏的双旋钮菜单显示方案

该方案基于迪文圆形屏设计，有两种菜单显示选择，一种是显示八个图片在左右滑动的时候所有图标会以圆周的形式进行运动，无触摸状态图标自行归位；第二种是显示14个图标，类似FIFO模式的进出，即先进先出队列。

一、背景介绍

圆形屏幕和方形屏幕不同，所以在想有什么适合圆形屏幕的菜单，经过一段时间的思考，发现可以做一个旋转菜单。

二、设计想法

我之前发布在迪文开发者论坛发布过一款圆屏雷达Demo，上面有对应显示雷达点位设计，让8个点位显示在离中心点不同的角度，让每个点不进行重叠，这次设计也使用了这个方案。

这次设计一共设计了两种菜单。

第一种是显示八个图片，在左右滑动的时候所有图标会以圆周的形式进行运动，并设计了一个归位功能，当屏幕不再触摸的时候，图标会自行归位，这里的实现需要检测触摸松开。图标自动归位主要是在触摸松开里进行一个归位处理，归位处理则检测运动的角度，如果不是能整除45则递增或者递减，显示八个图标刚好就是45度。

第二种设计比较麻烦，因为要显示14个图标，这时候就需要有一个地方可以让图标进行替换，而且是那种FIFO模式的进出。这块设计非常麻烦，足足耗费了我两个晚上。刚开始我是想就用8个变量图标，然后到一定角度时显示不同的图标，不过发现这个极其复杂。后面我就定义了14个变量图标，把这些变量图标藏在一个图片后面，这样就用类似FIFO的模式把变量图标一个一个的扔出去就行了。

三、具体设计

（一）准备素材

这里我给大家分享一个阿里巴巴对外提供的矢量图库【https://www.iconfont.cn/home/index】，下面是我准备的图标和背景图片。

（二）UI界面设计

第一种就是放8个变量图标即可。

第二种就是放14个变量图标，加上一个置顶图片，用于遮盖其他变量图标。

然后在创建两个页面，用于菜单点击后的显示，一共设计了两个，分别对应两个旋转菜单。

（三）代码设计

这里代码设计需要获取触摸情况。一共是两个页面，根据获取的按键值，判断进入的是哪一种菜单模式。然后获取滑动差值和结束触摸，将这些差值和结束触摸事件发送给相关的函数。

1. //获取触摸位置
   
2. void get_tp_status()
   
3. {
   
4.     static u16 get_timer = 0;
   
5.     static u16 SildeValue = 0;
   
6.     static u16 lastX = 0;
   
7. 
   
8.     u16 SildeTemp = 0;
   
9.     u16 Va[3] = 0;
   
10.     u8 i = 0, j = 0;
    
11.    
    
12.     get_timer++;
    
13.     if(get_timer >= 1000)
    
14.     {
    
15.         get_timer = 0;
    
16. 
    
17.         SildeTemp = Read_Dgus(0x4000);
    
18.         if(SildeTemp != 0x0000)
    
19.         {
    
20.             SildeValue = SildeTemp;
    
21.             SildeTemp = 0x0000;
    
22.             write_dgus_vp(0x4000, &SildeTemp, 1);    //清除
    
23.             Va[0] = 0x0000;
    
24.             Va[1] = 0x0000;
    
25.             Va[2] = 0x0000;
    
26.             write_dgus_vp(0x0016, Va, 3);
    
27.             if(SildeValue == 0x0001)
    
28.             {
    
29.                 Va[0] = 0x0006;
    
30.                 silde1MenuCurrent = 6;
    
31.                 write_dgus_vp(0x17F0, Va, 1);   //中间默认图标
    
32.                 silde1_angle = 0;
    
33.                 for(i = 0;i < 8;i++)
    
34.                 {
    
35.                     silde1_pos_set(i, 0);
    
36.                 }
    
37.             }
    
38.             else if(SildeValue == 0x0002)
    
39.             {
    
40.                 Va[0] = 0x0006;
    
41.                 silde2MenuCurrent = 0;
    
42.                 write_dgus_vp(0x27F0, Va, 1);   //中间默认图标
    
43.                 silde2_angle = DEFAULT_ANGLE;
    
44.                 for(i = 0;i < 8;i++)
    
45.                 {
    
46.                     silde2_pos_set(i, DEFAULT_ANGLE, i);
    
47.                 }
    
48.             }
    
49.         }
    
50. 
    
51.         if(SildeValue == 0x0001)
    
52.         {
    
53.             SildeTemp = Read_Dgus(0x4010);
    
54.             if(SildeTemp != 0x0000)
    
55.             {
    
56.                 SildeTemp = 0x0000;
    
57.                 write_dgus_vp(0x4010, &SildeTemp, 1);    //清除
    
58.                
    
59.                 if(silde1MenuCurrent == 0)
    
60.                 {
    
61.                     switch_screen(0x00);
    
62.                 }
    
63.                 else
    
64.                 {
    
65.                     u8 display_text[] = {'M', 'e', 'n', 'u', 0x00, 0x00};
    
66.                     display_text[4] = silde1MenuCurrent + 0x30;
    
67.                     write_dgus_vp(0x4100, display_text, 3);
    
68.                     switch_screen(0x03);
    
69.                 }
    
70.             }
    
71.         }
    
72.         else if(SildeValue == 0x0002)
    
73.         {
    
74.             SildeTemp = Read_Dgus(0x4020);
    
75.             if(SildeTemp != 0x0000)
    
76.             {
    
77.                 SildeTemp = 0x0000;
    
78.                 write_dgus_vp(0x4020, &SildeTemp, 1);    //清除
    
79.                
    
80.                 if(silde2MenuCurrent == 0)
    
81.                 {
    
82.                     switch_screen(0x00);
    
83.                 }
    
84.                 else
    
85.                 {
    
86.                     u8 display_text[] = {'M', 'e', 'n', 'u', 0x00, 0x00};
    
87.                     if(silde2MenuCurrent < 10)
    
88.                     {
    
89.                         display_text[4] = silde2MenuCurrent + 0x30;
    
90.                     }
    
91.                     else
    
92.                     {
    
93.                         display_text[4] = silde2MenuCurrent / 10 + 0x30;
    
94.                         display_text[5] = silde2MenuCurrent % 10 + 0x30;
    
95.                     }
    
96.                     write_dgus_vp(0x4200, display_text, 3);
    
97.                     switch_screen(0x04);
    
98.                 }
    
99.             }
    
100.         }
     
101. 
     
102.         
     
103. 
     
104.         if(SildeValue > 0)
     
105.         {
     
106.             if(SildeValue == 1)
     
107.             {
     
108.                 for(i = 0;i < 3;i++)    //获取触摸值
     
109.                 {
     
110.                     Va[i] = Read_Dgus(0x0016 + i);
     
111.                     if(Va[0] == 0x5A03)
     
112.                     {
     
113.                         //UART2_Sendbyte(Va[i] / 256);
     
114.                         //UART2_Sendbyte(Va[i] % 256);  
     
115.                     }
     
116.                     else
     
117.                     {
     
118.                         break;
     
119.                     }
     
120.                 }
     
121.                 if(Va[0] == 0x5A03)
     
122.                 {
     
123.                     if(lastX != 0)
     
124.                     {
     
125.                         s16 move = Va[1] - lastX;
     
126.                         silde1_move(move);
     
127.                         lastX = Va[1];
     
128.                     }
     
129.                     else
     
130.                     {
     
131.                         lastX = Va[1];
     
132.                     }
     
133.                 }
     
134.                 else if(Va[0] == 0x5A02)    //松开
     
135.                 {
     
136.                     lastX = 0;
     
137.                     //自动归位
     
138.                     silde1_reset();
     
139.                     Va[0] = 0x0000;
     
140.                     Va[1] = 0x0000;
     
141.                     Va[2] = 0x0000;
     
142.                     write_dgus_vp(0x0016, Va, 3);
     
143.                 }
     
144.             }
     
145.             else if(SildeValue == 2)
     
146.             {
     
147.                 for(i = 0;i < 3;i++)    //获取触摸值
     
148.                 {
     
149.                     Va[i] = Read_Dgus(0x0016 + i);
     
150.                     if(Va[0] == 0x5A03)
     
151.                     {
     
152.                         //UART2_Sendbyte(Va[i] / 256);
     
153.                         //UART2_Sendbyte(Va[i] % 256);  
     
154.                     }
     
155.                     else
     
156.                     {
     
157.                         break;
     
158.                     }
     
159.                 }
     
160.                 if(Va[0] == 0x5A03)
     
161.                 {
     
162.                     if(lastX != 0)
     
163.                     {
     
164.                         s16 move = Va[1] - lastX;
     
165.                         silde2_move(move);
     
166.                         lastX = Va[1];
     
167.                     }
     
168.                     else
     
169.                     {
     
170.                         lastX = Va[1];
     
171.                     }
     
172.                 }
     
173.                 else if(Va[0] == 0x5A02)    //松开
     
174.                 {
     
175.                     lastX = 0;
     
176.                     //自动归位
     
177.                     silde2_reset();
     
178.                     Va[0] = 0x0000;
     
179.                     Va[1] = 0x0000;
     
180.                     Va[2] = 0x0000;
     
181.                     write_dgus_vp(0x0016, Va, 3);
     
182.                 }
     
183.             }
     
184.         }        
     
185.     }   
     
186. }

复制代码

这个是第一种滑动旋转的函数：

1. //滑动旋转
   
2. void silde1_move(s16 dis)
   
3. {
   
4.     u16 i = 0;
   
5.    
   
6.     silde1_angle = silde1_angle + (dis / 2);
   
7.     while(silde1_angle < 0)
   
8.     {
   
9.         silde1_angle += 360;
   
10.     }
    
11.     while(silde1_angle > 360)
    
12.     {
    
13.         silde1_angle -= 360;
    
14.     }
    
15.     for(i = 0;i < 8;i++)
    
16.     {
    
17.         silde1_pos_set(i, silde1_angle);
    
18.     }   
    
19. }

复制代码

这是第一种自动归位的函数：

1. //自动归位
   
2. void silde1_reset()
   
3. {
   
4.     u8 add_flag = 0;
   
5.     u8 i = 0;
   
6. 
   
7.    
   
8.     if(silde1_angle % 45 > 22)
   
9.     {
   
10.         add_flag = 1;
    
11.     }
    
12.     else if(silde1_angle % 45 <= 22 && (silde1_angle % 45) != 0)
    
13.     {
    
14.         add_flag = 2;
    
15.     }
    
16.     while(1)
    
17.     {
    
18.         if(add_flag == 1)
    
19.         {
    
20.             silde1_angle++;
    
21.         }
    
22.         else if(add_flag == 2)
    
23.         {
    
24.             silde1_angle--;
    
25.         }
    
26.         
    
27.         for(i = 0;i < 8;i++)
    
28.         {
    
29.             silde1_pos_set(i, silde1_angle);
    
30.         }
    
31.         if(silde1_angle % 45 == 0)
    
32.         {
    
33.             break;
    
34.         }
    
35.         Delay_ms(5);
    
36.     }
    
37. 
    
38.     if(silde1_angle % 45 == 0)
    
39.     {
    
40.         silde1MenuCurrent = 7 - Read_Dgus(0x1000 + 0x100 * (((silde1_angle / 45) + 1) % 8));
    
41.         write_dgus_vp(0x17F0, &silde1MenuCurrent, 1);
    
42.         //UART2_Sendbyte(silde1MenuCurrent % 256);
    
43.     }   
    
44. }

复制代码

第二种的相对比较复杂，大家可以自行下载源码去阅读，这里就不贴出来了。

这是演示时的图片，大家可以看一下。

四、总结

这次设计让我觉得迪文屏的自定义功能还是挺强的，不仅局限于图片，这种自定义动画显示的也是挺流畅的，这让我有了更多的设计想法，让我们一起期待更好的设计吧~

视频展示链接：https://www.bilibili.com/video/BV1qM4y1n72p/

备注说明：如需源码，请参考此链接：http://inforum.dwin.com.cn:20080/forum.php?mod=viewthread&tid=8377