图形编程

为了让更多的人从不同的角度体验和应用IntoRobot的产品,进一步降低学习的门槛,让创意实现的操作过程进一步简化,平台上线了图形编程功能。图形编程,顾名思义就是通过图形化的操作完成编程的动作。结合平台已有的在线编译和烧录功能,可以很简便的完成软件配置,从而轻松实现创意。

主界面

web-graph-program

  • 返回:返回至工程列表页面。
  • 保存:将编辑的内容进行保存。
  • 烧录:将图形代码块对应的代码程序烧录至绑定设备。
  • 绑定设备设置:可设置代码烧录的目标设备。
  • 编辑代码:可跳转到在线编程编辑代码。
  • 图形代码块列表:点击可打开菜单下对应代码块,拖动至编辑区域进行对应代码的修改。
  • 编辑区域:编辑代码的区域,主要代码块可以在该区域内拖动,组合。
  • 代码查看区域:可查看图形化代码块组合出的源码,实时更新,不可编辑。
  • 隐藏(点击后变为“代码”):点击可切换是否显示代码查看区域。
  • 撤销:可撤销最近20次的编辑操作。
  • 清空:可清空除“IntoRobot主程序”之外的所有图形代码块。
  • 定位:点击可将图形代码块调整到合适的大小和显示位置,方便查看。
  • 删除:可将图形代码块拖动至该图标处将其删除。也可以选中后按delete键删除。

列表菜单及右键菜单

web-graph-program

  • IntoRobot:包含IntoRobot平台自用的各种模块。
  • 功能应用:设备底下的应用,只有设备添加了该应用才会出现在这,方括号(【】)中为应用的名称。
  • 传感器:包含常用传感器,即可以获取对应管脚的各种传感器的值。
  • 控制:包含各种控制操作,例如循环,判断等。
  • 数字与逻辑:包含各种数值输出与逻辑判断
  • 文字:发送字符串数据类型

编辑区域右键菜单:
空白处点击右键可显示如下菜单: web-graph-program

  • 整理模块:可以将所有模块排列整齐。
  • 折叠模块:可以将多个模块折叠,方便查看。
  • 展开块:可以将折叠的模块展开。

选中其中某个代码模块后点击右键显示如下菜单: web-graph-program

  • 复制:可以复制出一个与选定模块相同的模块。
  • 折叠模块:将模块折叠。
  • 禁用块:将选定模块禁用,不再起作用。
  • 删除块:删除。
  • 帮助:链接到教程

模块颜色分类

web-graph-program

结合方式

web-graph-program

从左边图形代码块列表种选择需要使用的模块,拖动至编辑区域进行组合。两个接口契合的模块拖动移近时,缺口边缘会显示黄色线条指示,放开鼠标后即可以将模块组合在一起。

例程

  1. 先绑定设备,添加应用
  2. 进入“图形编程”,点击加号新建一个工程
  3. 从图形代码模块中选择对应的模块,拖动至编辑区进行组合:
  4. 首先添加温控风扇事件监控,判断如果应用的开光状态为关闭,那么控制风扇(D0管脚)为关闭,否则为打开。
  5. 然后在主程序下添加重复执行,循环监控D1管脚的DHT11的温度,并显示在应用中。并且增加判断,如果检测到D1管脚的DHT11的传感器的温度值小于25,那么将温控风扇的风扇关闭。之后延时1000毫秒,继续进行下一个循环。
  6. 图形编程中不用自己定义变量,不用手动添加调用,等等这些相关工作平台均会自动处理。

图形编程完成后,对应的代码为:

#include <WidgetTempCtrlFan/WidgetTempCtrlFan.h>
#include <DHT11/dht11.h>
WidgetTempCtrlFan tempCtrlFan_0 = WidgetTempCtrlFan(0);
DHT11 senser_humiture_D1 = DHT11(D1);
void fanSwitchCb_0(void)
{
    if (tempCtrlFan_0.getFanSwitch() == 0)
    {
        tempCtrlFan_0.control(D0,LOW);
    }
    else
    {
        tempCtrlFan_0.control(D0,HIGH);
    }
}
void setup()
{
    tempCtrlFan_0.begin(fanSwitchCb_0);
    senser_humiture_D1.begin();
}
void loop()
{
    tempCtrlFan_0.displayTemperature(senser_humiture_D1.ReadTemperature(0));
    if (senser_humiture_D1.ReadTemperature(0) <= 25)
    {
        tempCtrlFan_0.control(D0,LOW);
    }
    delay(1000);
}

自定义模块

自定义模块功能可以让用户创建可生成特定代码的模块。你可以十分方便的创建、修改并保存这些自定义模块。

区域划分

  • 左侧: 功能栏,分别为输入、功能、类型和颜色四类组件
  • 中间: 编辑区域,将左侧功能栏内组件拖入中间编辑模块内部即可生成自定义模块
  • 右上: 实时生成自定义模块预览图
  • 右中: 生成模块的信息
  • 右下: 当自定义模块在功能中使用时输出的代码 区域划分

配置自定义模块

配置自定义模块,首先需要确定模块输入,然后对每个输入模块进行配置,最后进行输出代码编写

1.模块输入,将输入组件拖入中间编辑模块的输入区域内

一个模块有一个或多个输入,每个输入按照顺序相连。这里提供三种输入方式,每种输入的连接方式如下:

  • 值输入: 可连接一个带有输出的值模块。例如求根模块会接入一个数字输入模块。 值输入
  • 过程输入: 可连接一个带有上连接的状态模块。例如循环模块可接入带有上连接的判断模块。 过程输入
  • 虚拟输入: 不含输入的模块。 虚拟输入

PS:在模块信息区域,选择手动设置,则可直接编辑模块信息代码,此方法可跳过组件拼接直接通过代码生成模块

2.输入参数配置,将功能组件拖入中间编辑模块的输入组件内功能区域

每个输入模块可配置内部参数,对当前行添加功能。如显示文字,增加下拉列表等

  • 文本: 会在当前行显示此文本。
  • 文本输入: 会在当前行增加文本输入功能,并在生成代码时作为变量NAME。
  • 数值输入: 会在当前行增加数字输入功能,并在生成代码时作为变量NAME。
  • 角度输入: 会在当前行增加角度输入功能,并在生成代码时作为变量NAME。
  • 下拉式列表: 会在当前行增加下拉列表,并在生成代码时作为变量NAME。下拉列表可设置每个选项的显示名称与值
  • 复选框: 会在当前行增加复选框,并在生成代码时作为变量NAME。
  • 颜色: 会在当前行增加颜色选择,并在生成代码时作为变量NAME。
  • 图片: 会在当前行显示此图片。

参数配置

3.模块参数配置,确定排列与连接方式

  • 输入排列方式。如下图,左代表外部输入,右代表单行输入 输入排列
  • 连接方式。如下图 输入排列 上连接与下连接决定此模块是否可接入其他过程输入模块

    左向输出代表此模块的代码输出为一个值,下连接代表此模块输出为若干行语句

  • 提示,鼠标悬停在自定义模块时弹出提示信息。
  • 接入类型,对应上下连接与左向输出,可接入何种类型的模块。例如在左向输出选择数字类型时,则生成模块只能接入带有数字输入的模块
  • 颜色,可设置自定义模块整体颜色

4.输出代码编写,点击按钮[编辑code变量],在弹出框内对code变量进行编辑

当完成模块拼接后,在模块代码区域会自动生成模块原始代码,并将所有输入参数整理完成

  • 模块为左向输出,则代码输出为值

    Blockly.Dart['text_indexOf'] = function(block) {
    // Search the text for a substring.
    var text_text = block.getFieldValue('text');
    var number_name = block.getFieldValue('num');
    var code = "...";
    return [code, Blockly.Dart.ORDER_NONE];
    };
    

    用户需要通过对code变量进行编辑来获取模块最终输出代码,

    Blockly.Dart['text_indexOf'] = function(block) {
    // Search the text for a substring.
    var text_text = block.getFieldValue('text');
    var number_name = block.getFieldValue('num');
    var code = text + '_' + number_name;
    return [code, Blockly.Dart.ORDER_NONE];
    };
    
  • 模块包含向下输出,则代码输出为语句

    Blockly.Dart['abc'] = function(block) {
    var text_text = block.getFieldValue('text');
    var dropdown_list = block.getFieldValue('list');
    // TODO: Assemble Dart into code variable.
    var code = "...;\n";
    return code;
    };
    

    用户需要通过对code变量进行编辑来获取模块最终输出代码

    Blockly.Dart['text_indexOf'] = function(block) {
    // Search the text for a substring.
    var text_text = block.getFieldValue('text');
    var dropdown_list = block.getFieldValue('list');
    // TODO: Assemble Dart into code variable.
    var code = "if(" + dropdown_list + " == "2")\n{\nreturn " + text_text + ";\n}\n";
    return code;
    };
    

    使用自定义模块

    当自定义模块配置完成后,点击保存。然后回到我的工程界面,进入任意工程,在左侧功能栏点击模块库,即可使用自定义模块 输入排列