中国建设监理协会继续教育网站,群辉可以做网站服务器吗,郑州仿站定制模板建站,免费建网站的程序WouoUIPagePC端实现
WouoUIPage是一个与硬件平台无关#xff0c;纯C语言的UI库#xff08;目前只能应用于128*64的单色OLED屏幕上#xff0c;后期会改进#xff0c;支持更多尺寸#xff09;。因此#xff0c;我们可以在PC上实现它#xff0c;本文就以在PC上使用 VScode…WouoUIPagePC端实现
WouoUIPage是一个与硬件平台无关纯C语言的UI库目前只能应用于128*64的单色OLED屏幕上后期会改进支持更多尺寸。因此我们可以在PC上实现它本文就以在PC上使用 VScodeMinGWEGE 的组合来搭建PC上可以用于测试自己写UI代码的WouoUIPage环境。
WouoUIPage的github链接https://github.com/Sheep118/WouoUI-PageVersion
环境搭建流程
VScodeMinGWEGE
需要准备的东西有VScode、EGE安装包、MinGW安装包需要实现能够在PC上用C语言进行绘图后期才能移植WouoUIPage。所以搭建PC能用于C语言屏幕绘制的环境可以参考下面这个博客。
VScodeMinGWEasyGraphicEngineege图形库配置教程_安装的mingw怎么使用graphic图形库-CSDN博客
这里总结一下博客里提及的操作以便检测EGE的环境是否安装成功。
安装VScodeMinGW这个按博客中提供的视频操作问题不大安装完MinGW后可以新建个C文件或者C文件使用gcc或者g编译测试。在easy graphic engine官网上下载ege_19.01_all的zip包我们需要获取里面的图形库添加到MinGW的路径中。复制两个东西 ege_19.01_all压缩包下include文件夹下的ege文件夹、ege.h 、graphics.h 两个文件将这三个东西复制到MinGW安装路径中的include 文件夹下。(我使用的是64位的版本)将ege_19.01_all压缩包下lib文件夹下mingw64下的libgraphics64.a 库文件复制到MinGW安装路径中的lib 文件夹下。32位的安装环境则对应换成32位。 使用VScode任意打开一个空的文件夹在文件夹下建立.vscode 文件夹(注意有个.前缀)将博客提供的c_cpp_properties.json 、 tasks.json 、launch.json 新建对应的文件并复制进去即可注意需要更换对应MinGW的路径。之后在VScode里打开上面的文件夹新建一个out的目录和main.cpp 文件将博客中提及对应的测试代码粘贴进去按CtrlShiftB编译按F5编译执行即可。
移植WouoUIPage
我将WouoUIPage的SDK也就是移植完成的VScode文件夹上传到GitHub中了可以直接将Github中ProjectExamples\PCSimulate 下的zip包下载解压将解压出来的文件中.vscode\c_cpp_properties.json 、.vscode\tasks.json 、.vscode\launch.json 这三个json文件中MinGW的路径改为自己的安装路径即可。
需要注意一点由于我没有讲编译的依赖关系写入.vscode\tasks.json 文件中而是使用Makefile来组织依赖关系因此电脑中需要安装Make
这里讲一下zip提供的SDK移植好的zip包中各个文件夹的作用。
|--.vscode #vscode的配置文件|--c_cpp_properties.json #指定编译器|--tasks.json #指定编译的任务命令|--launch.json #指定运行时的shell命令
|--build #编译中间的.o文件存放文件夹
|--out #最终的可执行文件输出文件夹
|--WouoUIPage #WouoUIPage的库文件夹|-- #注意这里面的oled_port.c和oled_port.h改写过
|--UITest #调用WouoUIPage编写的UI文件编写自己UI测试时主要修改这里面的文件|--TestUI.c|--TestUI.h
|--main.cpp #调用EGE库的主函数
|--Makefile #编译依赖关系的组织文件
|--simulate_conf.h #PC端仿真的配置头文件具体实现的方式解释
WouoUIPage的移植
主要更改了 oled_port.c 和 oled_port.h 这两个文件。 oled_port.c #include oled_port.hvoid OLED_SendBuff(uint8_t buff[8][128]) //将8*128字节的buff一次性全部发送的函数
{
for (int y 0; y 8; y) {for (int x 0; x 128; x) {for (int bit 0; bit 8; bit) {uint8_t value (buff[y][x] bit) 1; // 获取相应位的值drawBigPixel(x, y*8bit, value);}}
}
}使用了drawBigPixel 这个函数实现把缓存的点全部绘制到屏幕上这个函数的实现在main.cpp 中如下并在oled_port.h 中将其声明。 // 画大像素点的函数一个大像素由PIXEL_SIZExPIXEL_SIZE的小像素组成
void drawBigPixel(int x, int y, uint8_t value) {
COLORREF color (value 0 ? BACK_COLOR : FORE_COLOR); // 数组值为0对应背景色非0对应前景色
setfillcolor(color); //设置填充颜色
// 使用bar函数绘制一个大像素PIXEL_SIZExPIXEL_SIZE块
int x0 x * PIXEL_SIZE;
int y0 y * PIXEL_SIZE;
bar(x0, y0, x0 PIXEL_SIZE, y0 PIXEL_SIZE); // bar函数的坐标是按照左上角和右下角来绘制矩形的
}Makefile文件的依赖关系
makefile文件指定了文件的依赖关系使用gcc编译. 、WouoUIPage 、UITest 这三个文件夹下所有的.c文件并使用g编译mian.cpp最后链接成可执行放在out目录下。makefile文件的内容如下
CC : gcc
CXX : g
CFLAGS : -Wall
CXXFLAGS : -Wall
TARGET : ./out/main.exe# 手动指定源文件
SRC_DIRS : . WouoUIPage UITest
C_SOURCES : $(foreach dir,$(SRC_DIRS),$(wildcard $(dir)/*.c)) #在给定源文件路径下搜索.c文件
CPP_SOURCES : $(wildcard *.cpp) C_OBJS : $(patsubst %.c,./build/%.o,$(notdir $(C_SOURCES)))
CPP_OBJS : $(patsubst %.cpp,./build/%.o,$(notdir $(CPP_SOURCES))) # 在build目录下生成不带子目录的.o文件
OBJS : $(C_OBJS) $(CPP_OBJS)# 需要增加VPATH变量来定位源文件
VPATH : $(SRC_DIRS)all: $(TARGET)$(TARGET): $(OBJS)$(CXX) $^ -o $ -lgraphics64 -luuid -lmsimg32 -lgdi32 -limm32 -lole32 -loleaut32./build/%.o: %.c$(CC) $(CFLAGS) -c $ -o $./build/%.o: %.cpp$(CXX) $(CXXFLAGS) -c $ -o $clean:rm -rf ./build/*.orm -f $(TARGET).PHONY: all clean演示效果
