小白制作图形库第四课图形样式设计基础下

libai500 · 发表于 2024-5-19 02:42:39

本帖最后由 libai500 于 2024-5-20 01:02 编辑

上一篇小白制作图形库第三课图形样式设计基础中

龙荒冬往时时雪
兔苑春归处处花
冬去春来，转眼又将进入盛夏。本教程去年深秋起笔已有半年，我们的教材编纂工作进展缓慢。
还好，总有进展。
本篇继续为大家介绍天问图形库设计重要核心“图形样式设计”

正文

前文中我们多次重申，图形样式设计是图形化编程的核心，可谓重中之重。图形样式的设计合理性以及配套完整性，决定了图形化道路的成败。一套合理而完整的图形库，能加快新人上手速度，大幅度提高专业编程效率，节省程序员和工程师的宝贵时间。
本篇我们围绕图形化样式设计，再为“张三文本处理库”添加一个图形块“整数转文本”。
第一节图形功能策划

如上图，是天问Block数组文本菜单中的一个标准指令，我们都知道它的用途，就是将任何数据转换为文本，并支持多文本连接功能。
那么有朋友会问，这个图形块功能很明确，还有什么发挥空间么？当然有.......

如上图所示，我们通过图形样式设计改进，实现将整数转为各种进制格式的文本。
比如，1234转为十六进制格式是4D2，转为二进制文本是10011010010。尤其十六进制文本和二进制文本大量用于程序员调试场景，其中十六进制文本也用于ModbusASC协议。
好我们下面直切正题，讲解这个图形模块如何制作。

第二节打开旧有的张三文本处理库准备添加新图形第一步导入本地库

如上图，我们打开上一篇文章中给大家分享的张三文本处理库1.1.0版。
第三步检查导入库的基本信息

如上图，因天问图形库制作平台时不时的会加载库信息加载不上来，因此我们要先核对一下库信息中，中文名，英文名，版本号，甚至XML文件是否属于导入库的，如果不放心，再导入两三次，确保库信息加载完整。
库信息一旦加载不完整，后期编写制作工作会受阻，甚至发生一些奇怪问题。

第三节通过复制模块的方法建立一个新模块
第一步复制旧有的图形块

如上图，我们通过复制图块来建立一个新的图形块。
第二步为复制好的图形块起名

如上图，按照以往经验，图形块名字要包含作者名字_图形库名字_功能块描述，因此名称如下：
"三_文本处理库_整数转文本块"的汉语拼音
zhangsan_wenbenchuliku_zhengshuzhuanwenbenkuai

模块名必须能直观表达模块的作者、库名以及模块名，这是为了在后期一旦丢失扩展库时，能有助于库的使用者找回扩展库。我们设计扩展库，不能只管自己方便，必须要考虑到不同水平使用者方便使用和维护。
第三步删除没必要的样式

第四节快速部署“值输入框”和“假输入框”完成样式设计
第一步部署“值输入框”并放置标签

如上图，放置一个“值输入框”，作为外部可插入数据的开孔，然后放置一个标签。
第二步部署“假输入框”并放置标签

如上图，假输入框就是不开孔、不支持外部图形插入的框架。在这个框架里可以安排标签和一些其他非外部插入式的图形元素，比如标签、下拉框之类的，我们下面就讲解下拉框的部署和配置使用。
第四步放置下拉框

如上图，放置下拉框并不困难。我们把下拉框起名op，并简单配置了下拉框的显示内容和对应值。分别为各种进制选项和对应的程序需要的代码内容。至此我们完成了图形样式设计。

第五节快速编辑XML文件并预览效果
第一步编辑XML文件

如上图，我们点开XML编辑画面，添加刚才编辑好的图块，模仿之前的模块菜单配置，编写好新的模块菜单配置。
XML文件决定了图形块输出到图形画面图形菜单中的样式，如果填写不当，图形块将不会出现在图形菜单上。
关于XML的一些编辑细节，在前两篇文章中已经多次介绍过，后期还会详细介绍。
第二步预览图形块效果

好，我们保存XML文件，点击预览，在菜单中找到新建的图形，放置它，样式设计完全正常。
下面我们来进行程序代码设计。

第六节获取并拼装整数转文本的代码
第一步从原始图形获得程序代码
一直以来，我们的图形样式设计课程中，所牵扯的代码都是现成的。在图形样式设计课程中，我们不过多研究代码如何编写，不涉及C语言，仅仅对原有图形的样式进行新一轮合理化编排。

如上图，我们对比原图形库的代码，并利用天问跳转VSCODE方法，翻阅String类构造函数，发现String支持各种数值类型转换为文本（即字符串），包括字符，U16,I16,U32,I32有无符号数据类型转换，并且可以设置进制格式。我们推测其可以设置为2到36进制，也就是0到F之前能表达的信息量。
笔者在这里特别测试了浮点转文本的功能，结论是失败的，最后两个浮点转文本形式没有功能。因此本图形库只支持整数转文本。

好，如上图，通过观察和评估，我们已经确定了代码格式。我们只要在图形库代码设计框中，拼接出上图中的代码，就能大功告成。
第二步拼装String函数名

如上图，我们基于上一篇代码设计的成果，很容易搭建了类名String代码。
第三步搭建参数V1的代码

如上图，找到V1的值输入变量条，插入代码框即可。
第四步拼装参数2的op下拉选项内容

如上图，我们早先已经在op选项卡中直接添加了代码“,10,16....”等参数2的代码。因此，我们也是直接将op变量插入代码框对应位置中即可。
第五步加上函数结尾括弧并保存后预览代码设计效果

如上图，我们添加好结尾括弧，去掉没用的代码框，保存图形块后，点击预览。
我们看到，参数1,2的变换正常，图形与对应的代码切换正确完美。

第七节打包并实测
第一步打包新建图形库

如上图我们先保存一下图形块，然后点击打包按钮后，主要是更新一下版本号，升级为1.2版。注意，库文件名一定要自行添加上版本号，因此巍后期手动查找库文件时，肉眼分辨库版本需要依据文件名上的版本号。
第二步加载打包好的本地库并编写一个测试程序

如上图，我们手动加载刚打包好的本地库，具体过程前几篇文章都有详述，本篇不再啰嗦。
我们编写一个简单的小程序，接收电脑发来的数字，然后用我们新写的图形库，分别打印发来的数据的十进制，十六进制，二进制文本。

如上图，下载程序后，我们用串口助手发送123456，看到了串口给我们返回的十进制，十六进制，二进制格式文本。返回的数据对不对呢？我们用WINDOW计算器看一下。

如上图，123456的十进制，十六进制，二进制数据由WIN计算器算出了。大家可以自行核对一下。
好，图形样式设计课程上中下三篇，到今天全部讲完。谢谢朋友们关注，谢谢老师们指导。

我们分享一下这个张三文本处理库，用于学习探讨

张三文本处理库1_2_0.zip (22.29 KB, 下载次数: 5)

小白制作图形库第四课 图形样式设计基础下

小白制作图形库第四课图形样式设计基础下