自制嵌入式GUI 【前1-3篇】-基于freeRTOS

自制GUI第4篇：https://blog.csdn.net/shungry/article/details/78659613

自制GUI第5篇：https://blog.csdn.net/shungry/article/details/85246023

———————————————————————分割线—————————————————————————

本篇文章我在野火论坛中发布过，现在修改下发到这里（里面可能会有很多逻辑不通的地方请见谅）

第一篇

因为接近毕业，在老师的推荐下做了个GUI，花了将近一个月的时间，从一点都不了解C++，到用C++做出一个简单的消息机制，以及简单的控件库，发帖纪念一下。虽然还是简单的不行，包括各个控件的重绘机制都有些BUG 重绘的控件会重新改过所有的控件-----尴尬。想消息处理机制依然有些混乱，借鉴了miniGui的窗口过程方式，但是人家毕竟是pc上的大型GUI，理解不大来，期间也看了QT，最后才加了自己理解用孩子兄弟二叉树表示了整个GUI的结构，现在发现了许多因这种方式的不足，但是一条路走到黑了。
二叉树：
 
目前的GUI测试界面：
 
list控件：（实在是简陋）
键盘：（只支持英文）
 
对话框：
 

图中还有 单选框，复选框，滑块和进度条。---第一次发帖，确实不会排版，大牛们见谅哈。。
现在自己的脑子一片混乱，没发做下去了。我老师还想我增强可移植性。。。😢
。
。
。
补充一句：我现在还在完善代码，如果不出意外，本周末或下周会发最新的情况。
中间还有很多BUG，我也不知道自己能做成什么样。
有兴趣的各位可以加入一起完善代码。---------------------但是C++代码真的写的难看

第二篇

之前的GUI实现方法都没讲，以后慢慢讲把。但是代码都公开，虽然很难看。但是很欢迎大家提意见。
这里还是感谢火哥支持，让我有了做下去的动力!!!
之前留下了一些自己很难解决的问题，这次大概全部都解决了（但是有些都是走擦边球）
上次发的问题 ：
     问题 1：当某个控件注册重绘后再消失时，桌面还留下了之前的控件的图案，之前解决方法在控件销售时重绘桌面（这样当所有小按键消失时都会导致背景重绘，所以会出现屏幕经常闪动）
     解决 ：在呼出要覆盖当前界面的控件时，先把要覆盖的数据保存到新建的buffer里面，再覆盖，当当前控件回收时再从buffer中把数据读回。如图：（字丑不要嫌弃）
     
     问题 2：当有呼出一些控件时（如键盘）,在去按其他被键盘覆盖的控件时，又会把键盘覆盖。（这个不符合逻辑，按理说按键应该时最高层的，谁都无法覆盖它。）
                 问题的本身是所有的控件不知道谁把谁覆盖了，各个的显示层次是怎么样的。
     解决 ：当创建，或呼出一个新的控件时，把自己进行采样成一个个点，会遍历控件树（上一篇稍微提过，我是用树来实现相应关系的）去一个个比对是否采样点在控件范围中，若是则把控件标记为被覆盖，设置覆盖其的对象是新的控件。这样当被覆盖的控件被点按时，上面的控件也会被刷新，保证一直被覆盖。如图：（这个会一点出现闪屏，但是是我目前不大改代码下最好的方法了。）
       
     问题 3：一些按钮会出现bug，导致GUI奔溃，卡带。（这个想想就害羞 0 0 ----不完整的就发出来了。）

     这个纯属自己没考虑好，现在已经解决。

注意： 左上角的‘ X ’是我测试用的 不要按得太频繁，会出现脏图像。
       

之后将要实现 1.布局类（可以方便的布局控件，不需要计算绝对坐标）
                    2.重写绘画函数（现在都是使用火哥的函数，为了方便GUI其他板子方便移植）
                    3.完成可移植性
我用Cpp写的所以堆的要求较大，因为是树结构我中间用了递归，所以栈的要求也不小。

第三篇

最近去投简历了，就没有太多的进展（添加了布局类），这次我就大概记录自己做这个GUI的思路吧。
1.
在第一篇的时候我简单的讲过我这个是基于 孩子兄弟二叉树 的映像表达。
如图：（二叉树中，左边的为孩子，右边的为兄弟）
 
有什么好处呢？当时觉得比较容易管理，而且思路清晰。
如图：这样一个根节点会有两个孩子窗口（WinA，WinB），然后窗口中又有孩子控件（a，b1，b2），WinA和WinB是兄弟关系，b1和b2也是兄弟关系，查找起来就很方便。
 
因为我选择的是二叉树，所以当要重绘全部的时候，只要用树的先序遍历就能把所有的窗口控件全部都画出来。如果我想要注销某一个窗口或控件，通过把他们从树中分离，其他连带的孩子也会背分离，同样的添加也很方便。
如图：（便于遍历，删除，添加，这是我的主要目的）
 
上面讲的是GUI的结构存储情况。
下面的GUI控件中的消息机制，我有点参考MiniGUI（其实也没怎么研究MiniGUI >_< 大神们莫见怪）

2.
TGUI的所有控件的交互都是基于消息机制的。
怎么说呢，就是每一个线程会维护一个消息队列。（我这里用的是freeRTOS 线程自带的队列--原理一样）
然后每个控件/窗口都会有 窗口过程函数 （这需要我们自己实现），用来实现触发该控件/窗口时应该做的处理过程。
如图：描述了一个 创建控件/窗口 注册 重绘 循环接收信息处理 的全过程。（当然也可以自己动态创建，这个是后话了 其实原理差不多）
 

3.
这一次我多添加了布局类（以后添加控件，布局控件比较方便吧）参考于Java的布局类。我主要实现了 
流式布局（flowLayout）：一个一个控件按顺序排列，一行排列不下就换行接着排列，到时只需用addWin函数添加控件就好
 
边框布局（borderLayout）：把指定的区域分成东、西、南、北、中五个区域存放控件
 
网格布局（gridLayout）：这个顾名思义就把窗口划分为大小一样的网格，用控件进行排列（都继承一个layout基类，用的方法都差不多。）
 

还有可移植性还是没想好，画图的函数还没做。主要就是画图函数和后面的LCD驱动各有不同，还在想中。
最后还是贴上我的资源：
GitHub：https://github.com/909452726/TGUI
百度网盘：http://pan.baidu.com/s/1pLyZH0n