【开源】迪文圆形屏双旋转菜单

二哲科技

1.介绍
圆形屏幕和方形屏幕不同，所以在想有什么适合圆形屏幕的菜单，经过一段时间的思考，发现可以做一个旋转菜单。
2.设计想法
以前介绍完都是直接上设计，发现对大家好像没有太大的帮助，从之后的设计都会给到大家一些我的设计想法，可能会比较啰嗦，有兴趣的可以看看，没兴趣的可以直接看后面的设计和演示视频。
关注我的朋友应该记得我之前发布的一款圆屏雷达Demo，上面就有对应显示雷达点位，当时设计的时候就是让8个点位显示在离中心点不同的角度，这样就可以让每个点不进行重叠，这次设计也是使用了这个方案。
这次设计一共设计了两种菜单，第一种是显示八个图片，在左右滑动的时候所有图标会以圆周的形式进行运动，同时我还设计了一个归位功能，就是当不再触摸的时候，图标会自行归位，这里就需要检测触摸松开了。
图标自动归位主要是在触摸松开里进行一个归位处理，归位处理则检测运动的角度，如果不是能整除45则递增或者递减，显示八个图标刚好就是45度。
第二种设计就比较麻烦了，因为要显示14个图标，这时候就需要有一个地方可以让图标进行替换，而且是那种FIFO模式的进出，这块设计非常麻烦，足足耗费了我两个晚上，刚开始我是想就用8个变量图标，然后到一定角度时显示不同的图标，不过发现这个极其复杂。后面我就定义了14个变量图标，把这些变量图标藏在一个图片后面，这样就用类似FIFO的模式把变量图标一个一个的扔出去就行了。
3.设计
首先是准备素材，这里给大家分享一个阿里巴巴对外提供的矢量图库【https://www.iconfont.cn/home/index】，下面是我准备的图标和背景图片。

图1

其次是界面设计，第一种就是放8个变量图标即可。

图2

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

图3

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

图4

图5

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

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. }

复制代码

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

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

图6

4.总结

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

源码：

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