小白自己动手做一个小小的图形库偷懒版

libai500 · 发表于 2024-4-2 11:53:53

本帖最后由 libai500 于 2024-4-7 09:24 编辑

上文《小白做库人人都要会》
上文太过气势磅礴，想必不少新人还是拿不下来。笔者再出一篇快速制作图形库方法，全过程手把手。
这次介绍偷懒库制作方法，所谓“偷懒”就是不需要写头文件和C文件。很多功能是天问源代码甚至编译器自带的，但是没有图形化，没有图形库，天问程序员可以自己把它们发掘出来，做自己的小图形库，提高编程效率。自己仅仅需要设计图形样式即可，得心应手也容易上手。

正文

序曲，以求绝对值函数图形化为例

如上图，我们都知道天问有个强大的小图形块，其中包含了一个求绝对值的工程选项。

从以上两张图上，我们可以看到，它只支持16位int，也就是-32767到32768之间的数值。这在很多场合下，显然不够。

但我们翻阅天问开源代码stdlib显然已经有一个32位绝对值函数labs，只是没有图形化。如上图。本文就讲述如何快速为这个已有的函数建立一个图形库。完全手把手讲解。

第一步打开扩展库建设画面

如上图，在天问编程画面左下角打开添加扩展库画面，在添加扩展库画面上方，有个“新疆库”按钮，点击它。

如上图，打开新建库画面，首先有个教程按钮，介绍了各个功能按钮和简单库制作过程。本文不做详述，直切正题

第二步导入一个基础模板库文件

Model_20240330.zip (20.15 KB, 下载次数: 1)

2024-4-1 08:39 上传

点击文件名下载附件

如上所示，先下载这个zip模板库，zip文件本身就是图形库文件，不用解压缩。在导入本地库弹窗中，找到下载好的zip文件，打开导入即可。
有朋友可能会问，为什么不直接开干，而是先导入一个模板本地库？
因为该库已经精简了内部图形块，达到最简单形式，并填写好了一些必要的库名称和版本号等信息。
我们当然也可以导入其他库，作为蓝本，加以修改，生成一个新库，但本文只介绍从最简单的开始。

第三步填写扩展库信息并新建库文档

如上图，再次介绍了图形库编辑的样式设计和代码设计布局，我们先不理会。在这里笔者认为应先打包一下，打包目的是是填写好于库相关的信息并建立新的库文档。这是首要工作。

如上图，点击“打包”后，弹出库基本信息窗，凡是打勾的，都要事先按照新库填好。下面我们一一介绍填写要领，这很重要。

如上图
中文名 首先中文名前面要写上作者署名比如作者是张三，也可以用笔名或代号，表明库的唯一归属，这个名字会出现在扩展库添加画面的中文标识中，用来区别是哪一个作者的库，因为某些库会有很多作者，都是绝对值数学库，因此为了区分他们，最好中文名开头签上自己的名字，当然也可以后面上传个性图标来进一步区分。
英文名，我们直接用汉语拼音填写，尤其注意，英文名前缀ZS也是必不可少，这在后期加载库异常时，系统报错会弹出这个名字，ZS前缀能帮助程序员知道这个库的归属，便于追溯修复。
版本号管理也是重中之重，不同版本号代表同一个库不同的改进版本，在共享库中，同名库的不同版本，会自动收集到一个库图标内，并列罗出来。
类别颜色 是扩展库加载到图形画面后，左侧人带单标签栏的颜色，可随意。它并不是图形指令的颜色。
中文介绍 将出现在扩展库添加画面，该库图标的下面，认真介绍该库，有助于程序员选用和区分不同库的特色。

主板支持这里，因我们要设计的绝对值函数库，函数来自GCC编译器，我们有理由相信所有32位机都支持这个库。如果读者认为库只是为某一个芯片所作，也可以自由勾选需要的。一旦勾选了相关芯片，该库就允许该芯片编程画面加载它，如果发布过为共享库，则会出现在任何使用天问Block该芯片编程的扩展库共享库画面列表中。
类型，因没有数学算法类型，我们选“其它”

扩展库帮助是一个链接网页，如果你打算发布这个库为共享，则务必把该库的说明书建立一个帖子，并把帖子链接写入这个帮助链接中，以确保使用者能迅速掌握它的用法。
上传头文件 因我们今天做的这个库，是偷懒库，程序头文件已经包含在天问里了，属于天问一部分，因此不用上传头文件。
上传封面 如果你有心怡的个性图片，可以上传它，作为扩展库中的图标，无果不上传，则默认为天问图标。
接下来，点击“导出”。

点击导出后，弹出文件名选项，起什么文件名，并没有什么要求，但版本号001最好写上，以免自己加载本地库时分不清版本，因为版本号从文件名上看不到，因此得你自己命名文件是个加上。ZIP就是天问库的文件格式，天问扩展库是ZIP压缩格式，不要改动。
点“保存”后，完成新库文档建立。别忘了记住保存在哪了，后面加载它时便于找到它。
第四步图形样式设计之从新开始

如上图，我们删除库中所有的图框，就留一个图块，该图块中的元素，也都清空。
我们并不是反对基于导入库去修改，而是要从新做一个库，来熟悉全过程。
第五步图形库样式设计之图形块命名

如上图，我们必须给这个图形块先起一个合适的名字。
这个名字我们还是要求必须先提现作者名字，张三。后面是图形库的英文名，我们为了老少皆宜，干脆用绝对值的汉语拼音命名。一个合适的图块名字，能有助于图块管理和在图形库加载错误时，便于知道是谁的图形库哪一个图块有问题。现在我们权且命名为zs_jueduizhi。
第六步图形样式设计之开孔

如上图，我们在输入菜单中，选择“值输入框”，当值到模块中，为图形指令开一个孔，
值输入就是开孔，假输入就是不开孔。；
“开孔”能让图形程序员插入一个外部值，在这里，用于插入要获取绝对值的数。
第七步图形样式设计之文字表达

如上图，我们在领域菜单中，选择一个文本条放入“值输入框”内部，并协商“获取绝对值”这几个字，标识该图形块的功能以及使用方法。
值得注意的是，样式设计师图形库的核心价值，文字描述是核心价值的重中之重。
图形样式设计不合理，使用者不能一目了然看明白，图形库的效能就大打折扣，甚至无法超越C语言，给编程工作版帮倒忙。如果图形样式设计合理，则能事半功倍，提高编程效率，老少皆宜上手，无论你是为公司团队制作图形库，还是为了广大单片机程序员制作共享库，做一个优秀的图形库，都是功德无量，功在社稷。
后期有机会，我们还要长篇论述图形样式设计技巧和真谛。
第八步图形样式设计之小进阶
在第七步中的画面里，我们是否认为绝对值图形指令样式设计完美了呢？
我们看一下下面的改进。

如上图，我们在开孔后面添加一个“假输入框”，也就是不开孔的组合框，并在该框里添加后续文本，大家注意，改进后的图形样式，是不是更容易看懂了。这就是图形样式进阶设计的开端。
图形库设计师，必须像大导演一样，注重每一个镜头细节，一定要考虑观众视角的体验感和理解力。才能做出好图形库。因篇幅有限，本文仅开一个头。日后有机会，我们还会深度讨论。

第九步图形样式设计之保存并预览

如上图，为了能够预览或打包发布，我们先要保存一下当前的图形块。
保存编辑好的图形块后，才能进行预览和打包。

保存好后，我们看上图，2024年开始，天问图形库制作工具有了预览图形功能，这让图形设计不用打包后加载到编程画面里，就能马上看到图形设计效果。我们要充分利用这个功能。
值得注意的是，无论是预览还是最终打包发布，都要先编辑XML文件。
XML文件内容，决定了图形菜单栏是否有这个图形，以及这个图形出现在菜单中的形式。因此如果没有编辑好XML文件，就无法在图形菜单中看到这个图形块。

如上图，我们保存图形块后，点击XML文件编辑。如下图

如上图，我们点击XML编辑后，弹出一个XML编辑画面，里面有原来的XML描述文本，我们用不上，全部删除重新来。

如上图，清除旧的XML内容后，我们直接导入编辑区内容，也就是当前正在编辑的所有图形块的描述文本。、

如上图，导入后，我们会看见图形库中所有编辑的图形块的描述文本。
我们当前库中，只有一个图形块，名为zs_jueduizhi。
下面我们还要在这个图形块的开孔里，预先添加一个数值。

如上图，点击插入常用值数字，会自动给出一段代码，这个代码就是预先插入数字的代码。
我们需要把它全部移入zs_jueduizhi的Block框架内。如下图

如上图，我们一气呵成，做四个工作
1，将值输入插入常量数值代码移入Block框
2，核对Block框名字是否与图还行模块zs_jueduizhi名字一致
3，核对开孔的值输入框名字，是否与NAME值输入框名字一致。
4，添加数值设定为-1234.
一定要认真核对，任何错误都可能导致图形块无法正常的出现在用户图形菜单上。

最后，如上图，点击保存，将XML文本保存好，ESC键退出XML编辑窗口。

如上图，退出XML编辑窗口后，点击预览。

如上图，点击预览后，会弹出一个精简的图形编程画面，在这个画面上，会出现我们刚才设计好的图形XML菜单，我们放置这个图形，可以看到开孔中，预设的-1234数值已经在图形开孔里了。
至此，图形块保存和预览，告一段落。我们进行下一节讲解。
第十步图形代码设计之指定头文件
在上一节最后一张预览图中，我们会发现预览窗口的右侧代码框中，没有labs绝对值函数的调用，也就是这个图形块只是个样子，没有任何代码产生，也就没有任何实际功能。
下面我们来介绍如何设计图形块的后台执行代码，让其为程序员自动部署C代码到程序中。
我们文章开头介绍过，我们现在做的图形库是偷懒库，代码是天问后台编译器自带的函数，不用我们写，头文件也是现成的，因此我们代码设计部分，要轻松很多。

如上图，我们即将大功告成，只剩下两步。

如上图，我们先在代码菜单组中，把预处理指令图块放入预处理接口中，准备添加头文件。

好，上面一系列图片，一气呵成，演示了如何添加头文件。下面我们看看预览效果

如上图，我们在预览窗口里重新放置这个图形块，我们会发现，头文件定义已经出现在代码上。就此，添加头文件操作完成。
第十一步图形代码设计之添加代码
文章开头说过，我们这个库是偷懒库，实现32位绝对值获取，是调用后台库中的labs函数，因此下面我们就让图形块能够自动部署调用labs函数的代码。

如上图，我们会发现，设计代码并不复杂，我们只需要和指定头文件一样，将字符串框放入组合框内，写上函数labs的名字，然后把代表labs参数的NAME值输入开孔的内容插入到labs后面，就可以了。
我们保存图形块，点击预览看一下。

如上图，点击预览后，放置图形块，我们可以看到，图形块自动部署了labs函数，并按照预先安排，将值输入框内的数字-1234写入了函数的参数里。组成了完整的函数调用代码labs(-1234)，求-1234的绝对值。
有朋友可能会问，按照C语言规范，语句后面应该有分号结束啊，怎么没看见分号？因为我们这个图形属于左侧连接图形，左侧接收图形负责添加分号，后面我们会实际测试演示。
第十二步打包发行到本地

如上图，我们顺便在做一个完善，加上32位字样，标识这个图形库的特点。
点击打包后，保存为前面章节指定好的文件即可。库制作完成。
第十三步加载本地库并测试图形库

如上图，我们在天问编程画面左下角，点击扩展库，进入扩展库添加画面，再点击用户库，也就是本地库。

如上图，我们找到刚加载好的张三绝对值库，编写一个绝对值打印程序。

如上图，此时我们可以看到labs函数调用正确，语法合规，就是括号多了点，无伤大雅，语法允许、

如上图，编译下载后，我们看到了32位数求得的绝对值。
好，今天这个小小库制作，就讲到这里。感谢朋友们关注，感谢大佬和老师们指导。
同时吧这个库送给大家，朋友们可以在图形库制作画面导入这个库，用于进一步学习体验。

张三绝对值库001.zip (20.19 KB, 下载次数: 1)