这是一个灵感源自WouoUI的纯C语言(C99标准)，无依赖库(只需要C的标准库)，适用于多种不同大小屏幕，极易部署的代

# WouoUI-PageVersion1.0.0 ## 写在前面 ### 简介&致谢 - 这是一个灵感源自WouoUI的**纯C语言(C99标准)**，**无依赖库(只需要C的标准库)**，适用于**多种不同大小屏幕**，**极易部署的代码框架**，可以快速构建、开发一个丝滑、Q弹的单色屏UI。 - 本项目最新的源码使用基于EasyX的PC仿真(该仿真模拟器由[叻叻菌](https://space.bilibili.com/86391945)移植实现的)实现，之后会适配本项目的最开始的硬件版本(Air001上)，目前Air001硬件版本工程中使用的还是0.10版本，**其余工程都是最新的1.0.0（Stm32的工程已更新到最新的1.0.0版本）。** - 在此十分感谢WouoUI(Arduino单文件版本)作者开源WouoUI的源码🙏🙏(是本项目的灵感来源)，这是[WouoUI的Github链接](https://github.com/RQNG/WouoUI )和[作者的b站链接](https://space.bilibili.com/9182439)。 - 同时感谢[叻叻菌](https://space.bilibili.com/86391945)移植实现的基于EasyX的PC仿真版本🙏🙏，并为本项目引入 指示器连贯动画，使用渐进整形的动画参数代替浮点运算的神来之笔(👍)等很多新的特性。 ### 版本声明和视频演示链接 - 1.0.0版本基于EasyX在PC上仿真的演示效果([极易部署，支持多种尺寸屏幕，支持二次开发的丝滑UI框架——WouoUIPage1.0.0演示视频_哔哩哔哩_bilibili](https://www.bilibili.com/video/BV1fANreSE8h/?vd_source=9168c6e8f345501e2daaa866a1f91d5d))。 - Air001的TestUI(0.1.0版本)例子的[b站的演示视频](https://www.bilibili.com/video/BV19K421r76m/?share_source=copy_web&vd_source=d55bdbc2322bca2e7e5f953886166b1e) - Air001的LittleClock例子(0.1.0版本)的b站演示视频: https://www.bilibili.com/video/BV1J6421g7H1/ - Stm32的TestUI例子(0.1.0版本)的b站演示视频: https://www.bilibili.com/video/BV1mS421P7CZ/ - 具体版本更新的说明和未来更新的进度查看最底部的[项目维护](#项目维护) ### 最新版本的新特性（1.0.0） 1. **适配多尺寸屏幕**，可以通过WouoUI_conf.h中的宽长的宏定义更改屏幕宽长，所有页面的元素都会自动居中 2. **字体自适应**，同样在WouoUI_conf.h中的修改页面使用的字体，页面会自适应字体的宽高 3. **长文本自动滚动**，长文本在选中时会自动滚动，同时滚动模式、速度和起始延时都有参数可以调整 4. **基于anim、slide动画监视的软件动态刷新**，相比硬件buff对比动态刷新： - 软件刷新：基于动画监视，静止时完全停止状态机，只会轮询msg输入，通用性不如硬件动态刷新。 - 硬件刷新：基于buff对比，通用性强，但需要多一个buff作为对比，同时静止时，内部buff的clear和重新写入一直在运行，只是没有将buff发送 5. 主状态机优化，将弹窗抽象为页面(弹窗状态机和页面状态机融合)，支**持任意页面的弹窗调用和弹窗自身的嵌套调用** 6. 修改了回调函数类型，回调函数会将该页面msg传入，方便使用者进行更灵活的开发，且所有页面回调函数调用机制统一——**只要有该页面有msg输入就会调用**. 7. 宏参数检查和LOG提示 ### 内存占用 运行`WouoUI_user.c/h` 中自带的例程(包含7个弹窗页面，5个列表页面，1个磁贴页面和1个波形页面的Flash和RAM占用如下表所示)，测试环境使用KeilV5编译器，所有WouoUIPage相关文件使用O3优化等级，对比移植前后的`Program Size` 变化 | Program Size | Code段 | Ro-Data段 | Rw-data段 | ZI-data段 | | -------------- | ------ | --------- | --------- | --------- | | 移植前后的增量 | 23276 | 6452 | 3464 | 522 | 所以，移植WouoUIPage版并使用如上的例程的UI，至少需要Flash约33KB, RAM约4KB。注意其中包括TitlePage的图片(占720B)和提供的五种大小的字库(使用统一的字体大小，如stm32工程中将SpinWin的字体统一为6*8，减少Ro-data段的大小，大约能较少大概1.3KB)。增加一个页面需要的Flash和RAM是很少的(除了需要自带数据buff的波形页面，其余页面对象基本都是由基本数据组成的)，下次更新时会加上每增加一个xx类型的页面大概需要多少Flash和RAM的消耗。 ## 移植说明 ### 本项目的文件说明 ```markdown |---Csource(这个文件夹是WouoUIPage最主要的源代码文件，移植时主要用这里面的几个文件) 其中WouoUI_user.c/h是用户使用接口编写的UI文件，目前里面编写了一个简单的例子，开发自己的界面是可以用这个例子做更改 |---HardwareTestingDevice(这个文件夹存在着我所用来测试WouoUI Page版的相关硬件资料) |---HardWare1.0_air001(用于测试WouoUIPage的第一版的硬件以air001作为主控，不过内存比较小之后会考虑更换，与第一版相关的硬件资料就都放在这个文件夹下，之后版本的文件夹也会遵从这样的命名方式HardWarex.0_主控) |---ProjectExamples (这个文件夹内放着使用WouoUIPage的工程的参考，按主控的类型划分，为移植时提供一些参考) |---Air001(0.1.0版本) |---Stm32(1.0.0版本) |---PCSimulate(一直都会是最新版本) |---Image (存放一些展示用的图片) |---SoftWare(取模软件和说明) ``` ### 源文件组(CSource文件夹) WouoUIPage版源代码非常简单(CSource文件夹下)，按功能可以划分为以下几部分 | 代码文件 | 作用 | | :------: | :--: | | WouoUI_conf.h/WouoUI_common.h | 配置文件，定义屏幕宽高、字体等参数/内部通用的一些函数和宏 | | WouoUI_font.c/h | 字体文件和数组 | | WouoUI_anim.c/h | 非线性动画实现 | | WouoUI_msg.c/h | 输入消息队列的实现 | | WouoUI_graph.c/h | 图形层，提供基本的图形和字符绘制函数 | | **WouoUI_page.c/h** | **提供了Title\List\Wave三个基本的全页面** | | **WouoUI_win.c/h** | **提供了Msg\Conf\Val\Spin\ListWin五种基本的弹窗页面** | |**WouoUI.c/h** | **核心状态机和UI调度的代码** | | WouoUI_user.c/h | 用户UI文件，内实现了一个使用WouoUIPage版提供接口实现的一个UI的样例 | ### 快速上手 直接使用提供的UI用例放在128*64屏幕单色屏上的话，只需要下面四步 1. 准备一个测试无误的OLED屏幕的读写工程，将CSource下的文件添加进自己的工程，并在主函数中include `WouoUI.h` `WouoUI_user.h` 。 2. 在OLED硬件初始化完成后使用 `WouoUI_AttachSendBuffFun` 函数绑定自己的OLED屏幕刷新函数，自己刷新函数需要接收一个`uint8_t [8][128]`的数组 ,并将这个数组发送至OLED内部的显存中。 3. 在主循环前调用 `TestUI_Init()` ，在主循环中（间隔一段时间或者）直接循环调用`TestUI_Proc()`函数即可。 4. 根据自己的输入设备，调用 `WOUOUI_MSG_QUE_SEND` 向UI发送对应的消息。 ### 移植大致流程 移植时，可以参考ProjectExamples文件夹下的工程(注意最新版本请参考PC_Simulate和stm32版本的工程例子) 1. 将上述说明的WouoUIPage的源文件包含在工程中。 2. 在WouoUI_conf.h中自己屏幕的尺寸修改对应的宏`WOUOUI_BUFF_WIDTH` 、 `WOUOUI_BUFF_HEIGHT`。 >这两个宏确定了使用的屏幕缓存的大小，在代码中定义为： > >`#define UINT_DIVISION_CELL(a,b) ((a + b - 1) / b)` > >`#define WOUOUI_BUFF_HEIGHT_BYTE_NUM UINT_DIVISION_CELL(WOUOUI_BUFF_HEIGHT,8) ` > >`typedef uint8_t ScreenBuff[WOUOUI_BUFF_HEIGHT_BYTE_NUM][WOUOUI_BUFF_WIDTH];` > >即内部使用的缓存数组，是一个`[高度/8+1][宽度]` 的二维数组，即字节是竖着存放在buff中(这和一般的OLED的芯片内部的字节排布是一致的)，同时高度所需的字节数是`高度/8` 再向上取整得到的，字节序可以参考下图。 ![buff字节排布](https://sheep-photo.oss-cn-shenzhen.aliyuncs.com/img/buff%E5%AD%97%E8%