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

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

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

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

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


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




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


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

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

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


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

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


如上所示,先下载这个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位数求得的绝对值。
    好,今天这个小小库制作,就讲到这里。感谢朋友们关注,感谢大佬和老师们指导。
同时吧这个库送给大家,朋友们可以在图形库制作画面导入这个库,用于进一步学习体验。
下载账号即天问ASR模型账号,本论坛是天问论坛,账号通用。

返回总目录




页: [1]
查看完整版本: 小白自己动手做一个小小的图形库偷懒版