【开源】基于迪文屏的猫粮记

二哲科技

1、介绍

最近做了一款猫粮控制系统，可以通过屏幕观察到猫粮情况，如温度、湿度、猫粮剩余情况以及猫咪吃粮记录。主要以水墨风为主题，还有点击时的水墨效果，大家可以在结尾的视频中观看。

2、设计想法
首先是界面素材，从0到1都是自己设计的，主要最近学了AI，用AI工具直接画的，后续的一些素材可能也会自己用AI去画，因为这样后期想要修改也PS容易。其次就是点击特效，这个是我在思考挺久之后想出来的一个设计，因为单纯的显示一些温湿度，猫粮情况没有太大的观赏性，所以在此基础上我设计了点击特效，从视频上效果还是很不错的，点击时还有音效哦~

3、界面设计
这次素材文件比较多，如下图所示。

之后就是欢迎界面设计，欢迎界面就是一个点击特效图标+基础触摸，如下图所示。

接下来是状态界面设计，状态就比较多了，可以显示猫粮的剩余量，温湿度，投放克数以及当前时间，如下图所示。

记录页面主要就是显示猫咪吃粮的时间，加上两个基础触摸用于查看上下吃粮的时间，如下图所示。

之后就是设置页面了，这个页面的控件比较多，因为每个数值都需要能够进行设置，并且还有定时投放猫粮的模式设置，如下图所示。

最后就是调节页面了，所有关于数字调节的控件，在点击之后都会进入该页面，点击确定之后会自动更新对应的控件值，如下图所示。

4、代码设计

首先是点击特效和音效，51程序中会获取触摸的位置，然后移动特效变量到触摸的位置，然后开始进行动画播放，是不是很简单~

检测触摸位置代码并播放音效：

1. void TouchDetect()
   
2. {
   
3.     u16 Va[3] = 0;
   
4.     u8 i = 0;
   
5. 
   
6.     for(i = 0;i < 3;i++)
   
7.     {
   
8.         Va[i] = Read_Dgus(0x0016 + i);
   
9.         if(Va[0] == 0x5A01)
   
10.         {
    
11.         }
    
12.         else
    
13.         {
    
14.             break;
    
15.         }
    
16.     }
    
17.     if(i != 0)  //第一次点击进入
    
18.     {
    
19.         u16 play[2] = {0x0001, 0x4000};
    
20.         touchAnimationFlag = 1;
    
21.         touchAnimationCnt = 0;
    
22.         touchPosX = Va[1];
    
23.         touchPosY = Va[2];
    
24.         write_dgus_vp(0x00A0, play, 2);
    
25.     }
    
26. }

复制代码

触摸特效显示的代码如下所示：

1. void TouchStart()
   
2. {
   
3.     if(touchAnimationFlag == 1)
   
4.     {
   
5.         if(touchAnimationCnt == 0)
   
6.         {
   
7.             Write_Dgus(0x5011, touchPosX - 100);
   
8.             Write_Dgus(0x5012, touchPosY - 100);
   
9.         }
   
10. 
    
11.         Write_Dgus(0x5000, touchAnimationCnt);
    
12.         touchAnimationCnt++;
    
13. 
    
14.         if(touchAnimationCnt == 6)
    
15.         {
    
16.             touchAnimationFlag = 0;
    
17.             Write_Dgus(0x5011, 1024);
    
18.             Write_Dgus(0x5012, 600);
    
19.         }
    
20.     }
    
21.    
    
22. }

复制代码

接下来就是最核心的，触摸对应的数值，跳转到另一个页面时需要修改指定数值的功能，主要是通过触摸进行实现的，具体代码如下所示：

1. //获取按键状态
   
2. void get_key_status()
   
3. {
   
4.     int i = 0;
   
5.     //u16 Va=Read_Dgus(addr);
   
6.     u16  Va=Read_Dgus(0x1000);
   
7.     if(Va != 0x0000)
   
8.     {        
   
9.         //状态页   
   
10.         if(Va == 0x0103)    //放置g数量
    
11.         {
    
12.             u16 switchpage[2] = {0x5A01, 19};
    
13.             setNum = placeGramNum;
    
14.             backPage = 1;   //返回状态页
    
15.             Write_Dgus(0x4000 + 0, setNum % 10);
    
16.             Write_Dgus(0x4000 + 2, setNum / 10 % 10);
    
17.             Write_Dgus(0x4000 + 4, setNum / 100 % 10);
    
18.             Write_Dgus(0x4000 + 6, setNum / 1000 % 10);
    
19.             write_dgus_vp(0x0084, switchpage, 2);
    
20.         }
    
21.         else if(Va == 0x0102)
    
22.         {
    
23.             OneSendData3(placeGramNum); //放置一次粮
    
24.         }
    
25.         else if(Va == 0x0101)   //设置页面
    
26.         {
    
27.             u16 switchpage[2] = {0x5A01, 3};
    
28.             for(i = 0;i < 6;i++)
    
29.             {  
    
30.                 if(i == 0)
    
31.                 {
    
32.                     Write_Dgus(0x3070 + i * 0x10 + 0, currentTime[i] % 10);
    
33.                     Write_Dgus(0x3070 + i * 0x10 + 2, currentTime[i] / 10 % 10);
    
34.                     Write_Dgus(0x3070 + i * 0x10 + 4, currentTime[i] / 100 % 10);
    
35.                     Write_Dgus(0x3070 + i * 0x10 + 6, currentTime[i] / 1000 % 10);
    
36.                 }
    
37.                 else
    
38.                 {
    
39.                     Write_Dgus(0x3070 + i * 0x10 + 0, currentTime[i] % 10);
    
40.                     Write_Dgus(0x3070 + i * 0x10 + 2, currentTime[i] / 10 % 10);
    
41.                 }
    
42.             }
    
43.             write_dgus_vp(0x0084, switchpage, 2);    //进入设置页
    
44.         }
    
45.         else if(Va == 0x0100)   //记录页面
    
46.         {
    
47.             u16 switchpage[2] = {0x5A01, 2};
    
48.             for(i = 0;i < 6;i++)
    
49.             {  
    
50.                 if(i == 0)
    
51.                 {
    
52.                     Write_Dgus(0x2000 + i * 0x10 + 0, eatFeedList[0][i] % 10);
    
53.                     Write_Dgus(0x2000 + i * 0x10 + 2, eatFeedList[0][i] / 10 % 10);
    
54.                     Write_Dgus(0x2000 + i * 0x10 + 4, eatFeedList[0][i] / 100 % 10);
    
55.                     Write_Dgus(0x2000 + i * 0x10 + 6, eatFeedList[0][i] / 1000 % 10);
    
56.                 }
    
57.                 else
    
58.                 {
    
59.                     Write_Dgus(0x2000 + i * 0x10 + 0, eatFeedList[0][i] % 10);
    
60.                     Write_Dgus(0x2000 + i * 0x10 + 2, eatFeedList[0][i] / 10 % 10);
    
61.                 }
    
62.             }
    
63.             write_dgus_vp(0x0084, switchpage, 2);    //进入记录页
    
64.         }
    
65.         //记录页
    
66.         else if(Va == 0x0201)   //记录页面上一个
    
67.         {
    
68.             if(lookEatCnt > 0)
    
69.             {
    
70.                 lookEatCnt--;
    
71.                 for(i = 0;i < 6;i++)
    
72.                 {  
    
73.                     if(i == 0)
    
74.                     {
    
75.                         Write_Dgus(0x2000 + i * 0x10 + 0, eatFeedList[lookEatCnt][i] % 10);
    
76.                         Write_Dgus(0x2000 + i * 0x10 + 2, eatFeedList[lookEatCnt][i] / 10 % 10);
    
77.                         Write_Dgus(0x2000 + i * 0x10 + 4, eatFeedList[lookEatCnt][i] / 100 % 10);
    
78.                         Write_Dgus(0x2000 + i * 0x10 + 6, eatFeedList[lookEatCnt][i] / 1000 % 10);
    
79.                     }
    
80.                     else
    
81.                     {
    
82.                         Write_Dgus(0x2000 + i * 0x10 + 0, eatFeedList[lookEatCnt][i] % 10);
    
83.                         Write_Dgus(0x2000 + i * 0x10 + 2, eatFeedList[lookEatCnt][i] / 10 % 10);
    
84.                     }
    
85.                 }
    
86.             }
    
87.         }
    
88.         else if(Va == 0x0202)   //记录页面下一个
    
89.         {
    
90.             if(lookEatCnt < eatCnt - 1)
    
91.             {
    
92.                 lookEatCnt++;
    
93.                 for(i = 0;i < 6;i++)
    
94.                 {  
    
95.                     if(i == 0)
    
96.                     {
    
97.                         Write_Dgus(0x2000 + i * 0x10 + 0, eatFeedList[lookEatCnt][i] % 10);
    
98.                         Write_Dgus(0x2000 + i * 0x10 + 2, eatFeedList[lookEatCnt][i] / 10 % 10);
    
99.                         Write_Dgus(0x2000 + i * 0x10 + 4, eatFeedList[lookEatCnt][i] / 100 % 10);
    
100.                         Write_Dgus(0x2000 + i * 0x10 + 6, eatFeedList[lookEatCnt][i] / 1000 % 10);
     
101.                     }
     
102.                     else
     
103.                     {
     
104.                         Write_Dgus(0x2000 + i * 0x10 + 0, eatFeedList[lookEatCnt][i] % 10);
     
105.                         Write_Dgus(0x2000 + i * 0x10 + 2, eatFeedList[lookEatCnt][i] / 10 % 10);
     
106.                     }
     
107.                 }
     
108.             }
     
109.         }
     
110.         //设置页
     
111.         else if(Va == 0x0302)
     
112.         {
     
113.             if(timeMode == 1)
     
114.             {
     
115.                 timeMode = 0;
     
116.                 Write_Dgus(0x3A12, 139);
     
117.             }
     
118.         }
     
119.         else if(Va == 0x0303)
     
120.         {
     
121.             if(timeMode == 0)
     
122.             {
     
123.                 timeMode = 1;
     
124.                 Write_Dgus(0x3A12, 242);
     
125.             }
     
126.         }
     
127.         else if(Va >= 0x0304 && Va <= 0x0309)
     
128.         {
     
129.             u16 switchpage[2] = {0x5A01, 19};
     
130.             backPage = 3;
     
131.             backNum = Va;
     
132.             setNum = timrIntervalHour[Va - 0x0304];
     
133.             Write_Dgus(0x4000 + 0, setNum % 10);
     
134.             Write_Dgus(0x4000 + 2, setNum / 10 % 10);
     
135.             Write_Dgus(0x4000 + 4, setNum / 100 % 10);
     
136.             Write_Dgus(0x4000 + 6, setNum / 1000 % 10);
     
137.             write_dgus_vp(0x0084, switchpage, 2);
     
138.         }
     
139.         else if(Va >= 0x030A && Va <= 0x030F)
     
140.         {
     
141.             u16 switchpage[2] = {0x5A01, 19};
     
142.             backPage = 3;
     
143.             backNum = Va;
     
144.             setNum = currentTime[Va - 0x030A];
     
145.             Write_Dgus(0x4000 + 0, setNum % 10);
     
146.             Write_Dgus(0x4000 + 2, setNum / 10 % 10);
     
147.             Write_Dgus(0x4000 + 4, setNum / 100 % 10);
     
148.             Write_Dgus(0x4000 + 6, setNum / 1000 % 10);
     
149.             write_dgus_vp(0x0084, switchpage, 2);
     
150.         }
     
151.         //调节数据页
     
152.         else if(Va == 0x0400)   //确定
     
153.         {   
     
154.             u16 switchpage[2] = {0x5A01, 0x0000};
     
155.             switchpage[1] = backPage;
     
156.             if(backPage == 1)   //返回状态页
     
157.             {
     
158.                 placeGramNum = setNum;
     
159.                 Write_Dgus(0x1140 + 0, placeGramNum % 10);
     
160.                 Write_Dgus(0x1140 + 2, placeGramNum / 10 % 10);
     
161.             }
     
162.             else if(backPage == 3)
     
163.             {
     
164.                 if(backNum >= 0x0304 && backNum <= 0x0309)
     
165.                 {
     
166.                     u16 select = 0;
     
167.                     select = (backNum - 0x0304) * 0x10;
     
168.                     timrIntervalHour[backNum - 0x0304] = setNum;
     
169.                     Write_Dgus(0x3010 + select + 0, setNum % 10);
     
170.                     Write_Dgus(0x3010 + select + 2, setNum / 10 % 10);
     
171.                 }
     
172.                 else if(backNum >= 0x030A && backNum <= 0x030F)
     
173.                 {
     
174.                     u16 select = 0;
     
175.                     select = (backNum - 0x0304) * 0x10;
     
176.                     currentTime[backNum - 0x030A] = setNum;
     
177.                     
     
178.                     if(backNum == 0x030A)
     
179.                     {
     
180.                         Write_Dgus(0x3010 + select + 0, setNum % 10);
     
181.                         Write_Dgus(0x3010 + select + 2, setNum / 10 % 10);
     
182.                         Write_Dgus(0x3010 + select + 4, setNum / 100 % 10);
     
183.                         Write_Dgus(0x3010 + select + 6, setNum / 1000 % 10);
     
184.                     }
     
185.                     else
     
186.                     {
     
187.                         Write_Dgus(0x3010 + select + 0, setNum % 10);
     
188.                         Write_Dgus(0x3010 + select + 2, setNum / 10 % 10);
     
189.                     }
     
190.                 }
     
191.             }
     
192.             write_dgus_vp(0x0084, switchpage, 2);
     
193.         }
     
194.         else if(Va == 0x0401)   //退出
     
195.         {   
     
196.             u16 switchpage[2] = {0x5A01, 0x0000};
     
197.             switchpage[1] = backPage;
     
198.             write_dgus_vp(0x0084, switchpage, 2);
     
199.         }
     
200.         else if(Va == 0x0402)   //数值增加
     
201.         {
     
202.             setNum++;
     
203.             Write_Dgus(0x4000 + 0, setNum % 10);
     
204.             Write_Dgus(0x4000 + 2, setNum / 10 % 10);
     
205.             Write_Dgus(0x4000 + 4, setNum / 100 % 10);
     
206.             Write_Dgus(0x4000 + 6, setNum / 1000 % 10);
     
207.         }
     
208.         else if(Va == 0x0403)   //数值减少
     
209.         {
     
210.             if(setNum > 0)
     
211.                 setNum--;
     
212.             Write_Dgus(0x4000 + 0, setNum % 10);
     
213.             Write_Dgus(0x4000 + 2, setNum / 10 % 10);
     
214.             Write_Dgus(0x4000 + 4, setNum / 100 % 10);
     
215.             Write_Dgus(0x4000 + 6, setNum / 1000 % 10);
     
216.         }
     
217.         
     
218.         Write_Dgus(0x1000, 0);
     
219.     }
     
220. }

复制代码

最后给大家展示以下效果。

首页效果图：

状态页效果图：

记录页效果图：

设置页效果图：

5、总结

这次设计可以说真的是从0到1设计的，其中主要依靠于AI工具，可以设计出很多效果的图片，也欢迎设计者们学习以下这个软件。这次设计发现水墨风其实也是可以溶于科技中的，毕竟还有墨水屏的存在嘛，后续的设计中也会多尝试不同的风格，希望大家和我一起期待吧！

演示视频：https://www.bilibili.com/video/BV1qP411s7D2/

屏+猫粮机：https://www.bilibili.com/video/BV1rX4y1W7pg/

工程文件：

二哲科技

tcp_client是连接屏幕的ESP32。

海东占宇

不错，不错。学习了。。

zyfxuexi

楼主可以推荐一下AI的工具不

二哲科技

zyfxuexi 发表于 2023-8-22 15:08
楼主可以推荐一下AI的工具不

Adobe Illustrator CC 2018，此AI（矢量图设计）非彼AI（人工智能），可以上B站学一下，我两天就能上手了。

zyfxuexi

二哲科技 发表于 2023-8-22 19:19
Adobe Illustrator CC 2018，此AI（矢量图设计）非彼AI（人工智能），可以上B站学一下，我两天就能上手了 ...

好的好的，谢谢