跳到主要内容

使用入门

不器斧的基本思路和使用方法​

  1. 从工具箱中选择需要的组件；
  2. 将组件拖拽到工作区，创建执行组件功能的实体（也称组件节点，简称节点）；
  3. 连接一个节点的输出到另一个节点的输入，把上级节点的执行结果导入到下级节点中；
  4. 建立更多的输出–>输入的连接；
  5. 通过“检查”节点输入和输出或是界面控件查看节点的执行情况；
  6. 选择一个节点，点击执行，启动工具的执行；
  7. 通过"窗口设计器"设计工具的窗口界面。

创建工具示例​

示例1(基于1.0版本)，视频：《零代码5分钟打造个人颜色拾取器》。​

示例2，实操：《带体感指示的温度转换器》​

下载示例文件

目标工具：摄氏温度到华氏温度的转换器，并且在不同温度区间，配图表示人体感受：

小于16­°C: 冷；

16­°C ~ 30­°C: 舒服、惬意；

大于30­°C: 热；

成果如下：

show

下面是此工具的创建过程

  1. 前提准备​

    • 摄氏温度转换为华氏温度的转换公式：华氏度 = 32°F + 摄氏度 × 1.8
    • 从网络找到三张图片，用于体感配图，放于目录“D:\温度转换器图片”(如图片涉及侵权，请联系我们删除引用) img

  1. 启动“不器斧”，在起始窗口中选择“创建新工程”。​

    img

  2. 在文件名中输入“温度转换器”，点击“保存”，​

    img

软件进入主窗口界面。​

img

  1. 在功能组件的搜索栏中输入“数学” 或 “Math", 在检索到的组件中选择“Basic Math Operation”,​

img

在组件上双击，组件预览窗口中显示出Math组件的有关信息​

img

  1. 在“Math”组件上按下鼠标左键，将其拖放到工作区，创建出一个Math组件节点，节点ID为#1。​

show

  1. 在#1号节点上选择“A X B”的乘法运算，输入端口Input1用作输入摄氏温度， 输入端口Input2设为固定值1.8。​

show

  1. 点击选择节点#1，右键鼠标，在弹出的右键菜单中选择“复制”，复制节点#1。​

img

  1. 在#1节点稍右边的位置右键鼠标，选择“粘贴”，一个新的“Math”节点创建出来了，节点ID为#2​

    show

  2. #2节点的运算类型选择默认的加法运算“A + B"，输入Input1的值设为32。在#1的端出端口Product上按下鼠标左键，拖拽出连接线，连接到#2的输入Input2。​

    show

  3. 检查温度转换计算结果。在#1节点上右键，在弹出的右键菜单中选择“检查端口”​

img

在“检查节点端口数据”窗口中，勾选“Input1”，然后关闭窗口。​

img

同样操作，检查#2节点的输出端口Sum。​

img

  1. 微调#1节点的Input1,或是直接输入一些数字，检查窗口中输出了摄氏度（#1-Input1）对应的华氏度(#2-Sum)。​

show

  1. 切换到“界面控件”组件选择页，选择添加“Text Block”组件节点（#3），并连接#2-sum到#3-Text​

show

  1. 在#3节点上点击“在窗口中预览控件”​

img

调整预览窗口到合适大小，修改#1-Input1的值，对应的华氏度也在窗口中同步显示了。​

show

  1. 在上一步的中，发现华氏度的数值的小数位数有时多有时少，不太美观，我们需要将数值精确度改为一位小数。在“功能组件”选项页中，搜索“double”，选择“Double To String” 组件，添加到工作区。​

img

在#3的输入Text上拖动鼠标左键，断开此端口的连接线，然后连接新增的#4节点，将#4格式化后的结果输入到#3的结果显示控件。​

show

  1. 设置#4小数转换为字符串的精度。在#4节点上右键，选择“属性”，设置精度(Precision)为1。​

img

#4节点的华氏度数值都是一位精度了。​

show

  1. 在#1节点的Input1端口上鼠标右键，在右键菜单上选择“创建直通输出端口”。​

img

Input1的直通输出端口即创建出来了。​

img

  1. 修饰输入摄氏度的显示精度，并以文字预览其数值。 复制#3，#4的拷贝，新创建出#5，#6节点。创建连接：#1-Input1直通输出到#5-Input，#5-Output到#6-Text。预览#3和#6的显示结果。​

    show

  2. 设计工具的窗口界面。选择点击工具栏上的“窗口设计器”。​

img

即打开了窗口设计器​

img

  1. 创建输入摄氏度数值的界面控件。在窗口设计器中选择#1::Math的端口Input1, 拖动它到设计窗口中，一个数值微调旋钮就创建出来了，用来输入摄氏度。再添加一个静态文本控件，修改其显示文本为摄氏度的单位°C，放置到数值旋钮的后面。(在窗口设计器界面中，每个节点下的子项称为控件项，控件项的命名约定为“节点名称%子项名”，比如：#1::Math%Input1，#6::Text Block%控件)​

show

  1. 创建摄氏度数值显示控件。拖动“#6::Text Block%控件”到设计窗口中，创建出一个文本控件，在属性面板中修改它的字体（FontSize）为72，文字颜色（TextColor）为一种蓝色。​

show

  1. 添加摄氏度单位控件。在工作区中添加一个新的“Text Block”界面控件节点，设置它的输入端口Text的内容为摄氏度单位°C。​

img

切换到“窗口设计器”界面，拖动“#7::Text Block%控件”到设计窗口，放在摄氏度数值后，让字体稍小些，选择一个颜色。​

show

  1. 按照步骤19、20为华氏度创建风格化的数值及单位显示（华氏度数值控件项为“#3::Text Block%控件”， 数值单位控件项为“#8::Text Block%控件”）。​

网络节点​

img

界面窗口布局​

img

  1. 开始创建温度区间的体感配图。在功能组件检索“test”。​

img

在列出的组件中选择创建两个“Numeric Test”和一个“Num Range Test”节点: #9::Numeric Test、#10::Numeric Test和#11::Num Range Test,​

各节点的端口配置如下：

  • #9::Numeric Test： TestType ： 小于; Input2 : 16
  • #10::Numeric Test: TestType： 大于； Input2： 30
  • #11::Num Range Test: LowerRange: 16, UpperRange: 30

然后将#1::Math-Input1(输出)分别连接到#9-Input1,#10-Input1,#11-TestNum。​

img

  1. 在功能组件中检索“通过”，在结果组件中选择“Pass By Switch”，创建为#12节点，放在#9节点右边。​

img

#12节点选择数据类型为string, 并设置字符串为路径“D:\温度转换器图片\冷.gif”， 连接#9-Result到#12-PassSwitch。​
show

  1. 通过复制#12，分别创建出两个节点#13，#14，按照上步操作，设置它们的字符串路径，并且分别连接到#10，#11的输出端口Result。​

img

  1. 添加体感图片文件选择器。在功能组件中搜索“mux”， 在检索结果中选择“Inputs Mux”, 在工作区添加为节点#15::Inputs Mux。​

img

img

修改ValueType，选择“string”​

img

各端口数据类型变成了string​

img

在其上右键鼠标，在弹出的右键菜单中选择“新建输入端口”。​

img

变成了含有3个输入端口。​

img

连接#12、#13、#14的输出“PassedString”到#15的3个输入端口。​

img

  1. 添加体感图片显示节点。切换到界面控件组件页，选择添加“Image Viewer”控件节点，ID为#16，连接#15::Inputs Mux-Out到#16-Image Source, 然后选择窗口预览#16图片显示，修改#1::Math节点的Input1(步骤5，用作输入摄氏度)的数值，可观察到图片的变换是符合预期的。​

    show

  2. 切换到“窗口设计器”，调整设计窗口的大小，拖放控件项#16::Image Viewer%控件到窗口中，调整其大小。在窗口设计器工具栏点击“显示工程窗口”，查看温度转换器的运行界面及效果。​

    show

  3. 关闭“窗口设计器”，在主窗口中选择“显示工程窗口”，“不器斧”进入到独立工具模式，关闭工具窗口，“不器斧”又返回到工程编辑界面中。​

    show

  4. “温度转换器”工具制作完成。​