【开源】切屏效果和动态下拉框

二哲科技

1、介绍

本来想用最近开发的DwinQuick和DE-RTOS设计一些传感类型的Demo，不过DwinQuick到可以真正使用还需要一段时间，下面是DwinQuick软件的部分界面。

图1

图2

接下来进入今天开源项目的正题，项目采用的是【DWG80480F043】屏幕，分辨率800x480，做了一些界面切换的Demo和动态的下拉框，也是可以让大家移植到自己项目中。

2、设计

首先准备素材，如下图所示。

图3

接下来就是界面的设计，主要是主界面和动态下拉框的设计，其他界面都只是一个图片和一个按钮控件。

图4

图5

这次设计主要都是用的基本图形功能，用矩形填充控件，进行矩形覆盖面的修改，这样就可以做到类似PPT一样的切屏过度效果。动态下拉框，也是用的基本图形，将其他页面的内容显示在当前页面上，但是不是立马显示，而且需要根据时间一点一点显示。

图6

用的还是DE-RTOS框架，切屏效果和动态下拉框主要代码如下：

1. void display_task()
   
2. {
   
3.     static uint8_t one_flag = 1;
   
4.     static uint16_t timer_cnt = 0;
   
5.     static uint16_t step_cnt = 0;
   
6.     timer_cnt++;
   
7.     if(timer_cnt >= 200)
   
8.     {
   
9.         timer_cnt = 0;
   
10.         if(display_mode == 0x01)
    
11.         {
    
12.             step_cnt++;
    
13.             if(step_cnt >= step_period)
    
14.             {
    
15.                 step_cnt = 0;
    
16.                 base_graph_rectangle_param1.end_x--;
    
17.                 if(base_graph_rectangle_param1.end_x == 0)
    
18.                 {
    
19.                     display_mode = 0x00;
    
20.                 }
    
21.                 base_graph_rectangle_fill_set(0x2000, &base_graph_rectangle_param1, 1);
    
22.             }
    
23.         }
    
24.         else if(display_mode == 0x02)
    
25.         {
    
26.             step_cnt++;
    
27.             if(step_cnt >= step_period)
    
28.             {
    
29.                 step_cnt = 0;
    
30.                 base_graph_rectangle_param1.start_x++;
    
31.                 if(base_graph_rectangle_param1.start_x == 800)
    
32.                 {
    
33.                     display_mode = 0x00;
    
34.                 }
    
35.                 base_graph_rectangle_fill_set(0x2000, &base_graph_rectangle_param1, 1);
    
36.             }
    
37.         }
    
38.         else if(display_mode == 0x03)
    
39.         {
    
40.             step_cnt++;
    
41.             if(step_cnt >= step_period * 2)
    
42.             {
    
43.                 step_cnt = 0;
    
44.                 base_graph_rectangle_param1.end_y--;
    
45.                 if(base_graph_rectangle_param1.end_y == 0)
    
46.                 {
    
47.                     display_mode = 0x00;
    
48.                 }
    
49.                 base_graph_rectangle_fill_set(0x2000, &base_graph_rectangle_param1, 1);
    
50.             }
    
51.             
    
52.         }
    
53.         else if(display_mode == 0x04)
    
54.         {
    
55.             step_cnt++;
    
56.             if(step_cnt >= step_period * 2)
    
57.             {
    
58.                 step_cnt = 0;
    
59.                 base_graph_rectangle_param1.start_y++;
    
60.                 if(base_graph_rectangle_param1.start_y == 480)
    
61.                 {
    
62.                     display_mode = 0x00;
    
63.                 }
    
64.                 base_graph_rectangle_fill_set(0x2000, &base_graph_rectangle_param1, 1);
    
65.             }
    
66.             
    
67.         }
    
68.         else if(display_mode == 0x05)
    
69.         {
    
70.             if(one_flag == 1)
    
71.             {
    
72.                 base_graph_rectangle_param2[0].start_x = 0;
    
73.                 base_graph_rectangle_param2[0].start_y = 0;
    
74.                 base_graph_rectangle_param2[0].end_x = 400;
    
75.                 base_graph_rectangle_param2[0].end_y = 480;
    
76.                 base_graph_rectangle_param2[1].start_x = 400;
    
77.                 base_graph_rectangle_param2[1].start_y = 0;
    
78.                 base_graph_rectangle_param2[1].end_x = 800;
    
79.                 base_graph_rectangle_param2[1].end_y = 480;
    
80.                 one_flag = 0;
    
81.             }
    
82.             step_cnt++;
    
83.             if(step_cnt >= step_period)
    
84.             {
    
85.                 step_cnt = 0;
    
86.             
    
87.                 base_graph_rectangle_param2[0].start_x++;
    
88.                 base_graph_rectangle_param2[1].end_x--;
    
89.                 if(base_graph_rectangle_param2[0].start_x == 400)
    
90.                 {
    
91.                     display_mode = 0x00;
    
92.                 }
    
93.                 base_graph_rectangle_fill_set(0x2100, &base_graph_rectangle_param2, 2);
    
94.             }
    
95.         }
    
96.         else if(display_mode == 0x06)
    
97.         {
    
98.             if(one_flag == 1)
    
99.             {
    
100.                 base_graph_rectangle_param2[0].start_x = 0;
     
101.                 base_graph_rectangle_param2[0].start_y = 0;
     
102.                 base_graph_rectangle_param2[0].end_x = 400;
     
103.                 base_graph_rectangle_param2[0].end_y = 480;
     
104.                 base_graph_rectangle_param2[1].start_x = 400;
     
105.                 base_graph_rectangle_param2[1].start_y = 0;
     
106.                 base_graph_rectangle_param2[1].end_x = 800;
     
107.                 base_graph_rectangle_param2[1].end_y = 480;
     
108.                 one_flag = 0;
     
109.             }
     
110.             
     
111.             step_cnt++;
     
112.             if(step_cnt >= step_period)
     
113.             {
     
114.                 step_cnt = 0;
     
115.                 base_graph_rectangle_param2[0].end_x--;
     
116.                 base_graph_rectangle_param2[1].start_x++;
     
117.                 if(base_graph_rectangle_param2[0].end_x == 0)
     
118.                 {
     
119.                     display_mode = 0x00;
     
120.                 }
     
121.                 base_graph_rectangle_fill_set(0x2100, &base_graph_rectangle_param2, 2);
     
122.             }
     
123.         }
     
124.         else if(display_mode == 0x07)
     
125.         {
     
126.             if(one_flag == 1)
     
127.             {
     
128.                 base_graph_rectangle_param2[0].start_x = 0;
     
129.                 base_graph_rectangle_param2[0].start_y = 0;
     
130.                 base_graph_rectangle_param2[0].end_x = 800;
     
131.                 base_graph_rectangle_param2[0].end_y = 240;
     
132.                 base_graph_rectangle_param2[1].start_x = 0;
     
133.                 base_graph_rectangle_param2[1].start_y = 240;
     
134.                 base_graph_rectangle_param2[1].end_x = 800;
     
135.                 base_graph_rectangle_param2[1].end_y = 480;
     
136.                 one_flag = 0;
     
137.             }
     
138.             
     
139.             step_cnt++;
     
140.             if(step_cnt >= step_period * 2)
     
141.             {
     
142.                 step_cnt = 0;
     
143.                 base_graph_rectangle_param2[0].start_y++;
     
144.                 base_graph_rectangle_param2[1].end_y--;
     
145.                 if(base_graph_rectangle_param2[0].start_y == 240)
     
146.                 {
     
147.                     display_mode = 0x00;
     
148.                 }
     
149.                 base_graph_rectangle_fill_set(0x2100, &base_graph_rectangle_param2, 2);
     
150.             }
     
151.             
     
152.         }
     
153.         else if(display_mode == 0x08)
     
154.         {
     
155.             if(one_flag == 1)
     
156.             {
     
157.                 base_graph_rectangle_param2[0].start_x = 0;
     
158.                 base_graph_rectangle_param2[0].start_y = 0;
     
159.                 base_graph_rectangle_param2[0].end_x = 800;
     
160.                 base_graph_rectangle_param2[0].end_y = 240;
     
161.                 base_graph_rectangle_param2[1].start_x = 0;
     
162.                 base_graph_rectangle_param2[1].start_y = 240;
     
163.                 base_graph_rectangle_param2[1].end_x = 800;
     
164.                 base_graph_rectangle_param2[1].end_y = 480;
     
165.                 one_flag = 0;
     
166.             }
     
167.             
     
168.             step_cnt++;
     
169.             if(step_cnt >= step_period * 2)
     
170.             {
     
171.                 step_cnt = 0;
     
172.                 base_graph_rectangle_param2[0].end_y--;
     
173.                 base_graph_rectangle_param2[1].start_y++;
     
174.                 if(base_graph_rectangle_param2[0].end_y == 0)
     
175.                 {
     
176.                     display_mode = 0x00;
     
177.                 }
     
178.                 base_graph_rectangle_fill_set(0x2100, &base_graph_rectangle_param2, 2);
     
179.             }
     
180.             
     
181.         }
     
182.         else if(display_mode == 0x09)
     
183.         {
     
184.             step_cnt++;
     
185.             if(step_cnt >= step_period * 2)
     
186.             {
     
187.                 step_cnt = 0;
     
188.                 base_graph_rectangle_param3.start_y++;
     
189.                 base_graph_rectangle_param3.start_x = base_graph_rectangle_param3.start_y * 1.67 ;
     
190.                 base_graph_rectangle_param3.end_y--;
     
191.                 base_graph_rectangle_param3.end_x = base_graph_rectangle_param3.end_y * 1.67;
     
192.                 if(base_graph_rectangle_param3.start_y == 240)
     
193.                 {
     
194.                     display_mode = 0x00;
     
195.                 }
     
196.                 base_graph_rectangle_fill_set(0x2200, &base_graph_rectangle_param3, 1);
     
197.             }
     
198.         }
     
199.         else if(display_mode == 0x0A)
     
200.         {
     
201.             if(one_flag == 1)
     
202.             {
     
203.                 base_graph_rectangle_param3.start_y = 240;
     
204.                 base_graph_rectangle_param3.start_x = 480;
     
205.                 base_graph_rectangle_param3.end_y = 240;
     
206.                 base_graph_rectangle_param3.end_x = 480;
     
207.                 base_graph_rectangle_fill_set(0x2200, &base_graph_rectangle_param3, 1);
     
208.                 one_flag = 0;
     
209.             }
     
210.             step_cnt++;
     
211.             if(step_cnt >= step_period * 2)
     
212.             {
     
213.                 step_cnt = 0;
     
214.                 base_graph_rectangle_param3.start_y--;
     
215.                 base_graph_rectangle_param3.start_x = base_graph_rectangle_param3.start_y * 1.67 ;
     
216.                 base_graph_rectangle_param3.end_y++;
     
217.                 base_graph_rectangle_param3.end_x = base_graph_rectangle_param3.end_y * 1.67;
     
218.                 if(base_graph_rectangle_param3.start_y == 0)
     
219.                 {
     
220.                     base_graph_rectangle_param3.start_y = 240;
     
221.                     base_graph_rectangle_param3.start_x = 480;
     
222.                     base_graph_rectangle_param3.end_y = 240;
     
223.                     base_graph_rectangle_param3.end_x = 480;
     
224.                     base_graph_rectangle_fill_set(0x2200, &base_graph_rectangle_param3, 1);
     
225.                     display_mode = 0x00;
     
226.                 }
     
227.                 base_graph_rectangle_fill_set(0x2200, &base_graph_rectangle_param3, 1);
     
228.             }
     
229.         }
     
230.         else if(display_mode == 0x20)
     
231.         {
     
232.             if(dropdown_flag == 0)
     
233.             {
     
234.                 base_graph_page_copy_param4.end_y++;
     
235.                 if(base_graph_page_copy_param4.end_y == 312)
     
236.                 {
     
237.                     dropdown_flag = 1;
     
238.                     display_mode = 0x00;
     
239.                 }
     
240.                 base_graph_page_copy_fill_set(0x2A00, &base_graph_page_copy_param4, 1);
     
241.             }
     
242.             else if(dropdown_flag == 1)
     
243.             {
     
244.                 base_graph_page_copy_param4.end_y--;
     
245.                 if(base_graph_page_copy_param4.end_y == 0)
     
246.                 {
     
247.                     dropdown_flag = 0;
     
248.                     display_mode = 0x00;
     
249.                 }
     
250.                 base_graph_page_copy_fill_set(0x2A00, &base_graph_page_copy_param4, 1);
     
251.             }
     
252.         }
     
253. 
     
254.         else if(display_mode == 0x10)   //返回
     
255.         {
     
256.             base_graph_rectangle_param1.start_x = 0;
     
257.             base_graph_rectangle_param1.start_y = 0;
     
258.             base_graph_rectangle_param1.end_x = 800;
     
259.             base_graph_rectangle_param1.end_y = 480;
     
260.             base_graph_rectangle_param1.color = 0x0000;
     
261.             base_graph_rectangle_fill_set(0x2000, &base_graph_rectangle_param1, 1);
     
262.             display_mode = 0x00;
     
263.         }
     
264.         else if(display_mode == 0x11)   //返回
     
265.         {
     
266.             one_flag = 1;
     
267.             base_graph_rectangle_param2[0].start_x = 0;
     
268.             base_graph_rectangle_param2[0].start_y = 0;
     
269.             base_graph_rectangle_param2[0].end_x = 400;
     
270.             base_graph_rectangle_param2[0].end_y = 480;
     
271.             base_graph_rectangle_param2[1].start_x = 400;
     
272.             base_graph_rectangle_param2[1].start_y = 0;
     
273.             base_graph_rectangle_param2[1].end_x = 800;
     
274.             base_graph_rectangle_param2[1].end_y = 480;
     
275.             base_graph_rectangle_fill_set(0x2100, &base_graph_rectangle_param1, 2);
     
276.             display_mode = 0x00;
     
277.         }
     
278.         else if(display_mode == 0x12)   //返回
     
279.         {
     
280.             one_flag = 1;
     
281.             base_graph_rectangle_param3.start_x = 0;
     
282.             base_graph_rectangle_param3.start_y = 0;
     
283.             base_graph_rectangle_param3.end_x = 800;
     
284.             base_graph_rectangle_param3.end_y = 480;
     
285.             base_graph_rectangle_param3.color = 0x0000;
     
286.             base_graph_rectangle_fill_set(0x2200, &base_graph_rectangle_param3, 1);
     
287.             display_mode = 0x00;
     
288.         }
     
289.         else if(display_mode == 0x13)   //返回
     
290.         {
     
291.             base_graph_page_copy_param4.page_id = 6;
     
292.             base_graph_page_copy_param4.start_x = 0;
     
293.             base_graph_page_copy_param4.start_y = 0;
     
294.             base_graph_page_copy_param4.end_x = 264;
     
295.             base_graph_page_copy_param4.end_y = 0;//312;
     
296.             base_graph_page_copy_param4.current_x = 255;
     
297.             base_graph_page_copy_param4.current_y = 145;
     
298.             base_graph_page_copy_fill_set(0x2A00, &base_graph_page_copy_param4, 1);
     
299.             display_mode = 0x00;
     
300.         }
     
301.     }
     
302. }

复制代码

3、结论

其实界面设计有很多可玩性，我也只是在发掘其中的一小部分，感觉大家可以天马行空的进行想象，只要能想出来的基本就是可以做到的，后面的开源项目，我依旧会设计更多新颖和炫酷的功能~

工程文件：

演示视频：

海东占宇

支持下、、、、、、、、、、、、、、、、

xiangliverygood

顶，期待下一步