【动手制作简易GUI】如何利用WallPaper打造自己的串口屏界面

众所周知,WallPaper是一款很酷的壁纸工厂,而串口屏也是自由度很高的工业级屏幕,今天小鱼君带来了串口屏的使用教程。

先给大家看看小鱼君自己用过的工程例子:

《【动手制作简易GUI】如何利用WallPaper打造自己的串口屏界面》

 

怎么样是不是感觉很炫酷呢?我们是把它用在门禁系统上的,可以控制芯片来进行密码识别与指纹识别。

其中的图片来自WallPaper,其他的控件都在软件中设置。

 

本来我们用的是正点原子的LCD屏幕,但是有学长推荐给我们这款只需要4线一个串口的屏幕,几天时间就可以大概学会。

 

小鱼君买的是尺寸最小的一款,价格在40到50元,大家需要准备一个USB转串口的模块用来下载我们自己的文件。由于淘宝链接过长我们就先不贴了,大家在公众号:小鱼君code 中发送串口屏就会收到它的资料了,本期我们先讲UI的制作,下期我们再讲如何与单片机通信(对于之前串口通信了解的同学们应该很容易的)。

首先大家可以在官方网站获取资料,他们讲的也很详细。http://www.tjc1688.com这个网址进去就可以了。在这里点击就可以下载了:

《【动手制作简易GUI】如何利用WallPaper打造自己的串口屏界面》

 

我们直接开始软件的使用,首先新建工程:

《【动手制作简易GUI】如何利用WallPaper打造自己的串口屏界面》

 

大家在这里选择自己的型号,之后就进入了空白的界面:

《【动手制作简易GUI】如何利用WallPaper打造自己的串口屏界面》

 

然后我们要做的就是生成字库,点击工具,生成字库后保存就可以。这样我们就可以开始接下来的操作了。

首先我们添加背景,大家可以随便选择一张图片,小鱼君就简单的给大家示范一下:

 

 

随后点击图片下的+就可以了:

《【动手制作简易GUI】如何利用WallPaper打造自己的串口屏界面》

在这一步大家会遇到这样一个问题,图片导入时候会失败。这种情况大都是图片的像素大小不合适。这时候大家只需要用电脑自带的编辑功能就可以修改了。

《【动手制作简易GUI】如何利用WallPaper打造自己的串口屏界面》

接下来我们就把这张图片作为当前界面的背景:

《【动手制作简易GUI】如何利用WallPaper打造自己的串口屏界面》

之后我们就可以放置自己需要的功能了。这里小鱼君做一个简单的示例,大家可以做个参考:

《【动手制作简易GUI】如何利用WallPaper打造自己的串口屏界面》

大家在右下角做修改,绿色字体的就代表着可以是可修改的参数,小鱼君这里放置了一个文本就是修改的text。

在制作完成后大家点击调试,就可以预览了同时调试也可以确保我们的程序没有错,如果确保没有问题就可以下载到串口屏了。

 

 

《【动手制作简易GUI】如何利用WallPaper打造自己的串口屏界面》

本期教程就到此结束了

如果大家有什么问题

可以在公众号提出呦~

小鱼君看到就会回复大家的~

    原文作者:小鱼君code
    原文地址: https://blog.csdn.net/m0_45961876/article/details/113763088
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞