ARM编程新入门----【图形编程】操作指引

zhang209a

为了让更多的人从不同的角度体验和应用IntoRobot的产品，进一步降低学习的门槛，让创意实现的操作过程进一步简化，近期平台上线了图形编程功能。

       图形编程，顾名思义就是通过图形化的操作完成编程的动作。结合平台已有的在线编译和烧录功能，可以很简便的完成软件配置，从而轻松实现创意。

1.图形编程添加控件

登陆后在点击“设备展示”点击创建设备的主界面如下:

                               
登录/注册后可看大图

创建需要的设备并保存，主界面如下:

                               
登录/注册后可看大图

弹出我的设备，点击”编辑控件“按钮，主界面如下:

                               
登录/注册后可看大图

弹出控件列表，选择需要的类型，双击需要的控件，界面如下:

                               
登录/注册后可看大图

弹出控件说明，可以设置控件参数，点击”添加“按钮控件就被添加了，界面如下:

                               
登录/注册后可看大图

如上可以添加各种控件，点击”保存“按钮控件就被添加了，界面如下:

                               
登录/注册后可看大图

选择对应的控件，就有对应的控件图形，点击”图形编程“按钮，界面如下:

                               
登录/注册后可看大图

弹出图形编程，点击”创建工程“ 按钮，创建新的工程，界面如下:

                               
登录/注册后可看大图

在控件列表中，选择需要的控件，选择对应的控件内容，单击或者拖动到白色编辑即可，界面如下:

                               
登录/注册后可看大图

控件内容增加到编辑区域，界面如下:

                               
登录/注册后可看大图

类似增加控件内容，将控制逻辑增加到编辑区域，界面如下:

2.图形编程主界面及模块介绍

       图形编程的主界面如下:

                               
登录/注册后可看大图

                               
登录/注册后可看大图

       返回：返回至工程列表页面。

       保存：将编辑的内容进行保存。

       烧录：将图形代码块对应的代码程序烧录至绑定设备。

       绑定设备设置：可设置代码烧录的目标设备。

       图形代码块列表：点击可打开菜单下对应代码块，拖动至编辑区域进行对应代码的修改。

       编辑区域：编辑代码的区域，主要代码块可以在该区域内拖动，组合。

       代码查看区域：可查看图形化代码块组合出的源码，实时更新，不可编辑。

       隐藏（点击后变为“代码”）:点击可切换是否显示代码查看区域。

       撤销：可撤销最近20次的编辑操作。

       清空：可清空除“IntoRobot主程序”之外的所有图形代码块。

       定位：点击可将图形代码块调整到合适的大小和显示位置，方便查看。

       删除：可将图形代码块拖动至该图标处将其删除。也可以选中后按delete键删除。

3.图形代码块列表菜单及右键菜单

                               
登录/注册后可看大图

       IntoRobot：包含IntoRobot平台自用的各种模块。

       功能控件：其中的模块对应平台的控件，方括号（【】）中为控件的名称。

       传感器：包含常用传感器，即可以获取对应管脚的各种传感器的值。

       控制：包含各种控制操作，例如循环，判断等。

       数字与逻辑：包含各种数值输出与逻辑判断。

       编辑区域右键菜单：

       空白处点击右键可显示如下菜单：

                               
登录/注册后可看大图

       整理模块：可以将所有模块排列整齐。

       折叠模块：可以将多个模块折叠，方便查看。

       展开块：可以将折叠的模块展开。

       选中其中某个代码模块后点击右键显示如下菜单：

                               
登录/注册后可看大图

       复制：可以复制出一个与选定模块相同的模块。

       折叠模块：将模块折叠。

       禁用块：将选定模块禁用，不再起作用。

       删除块：删除。

4.模块颜色分类

                               
登录/注册后可看大图

      

5.图形编程操作方式

                               
登录/注册后可看大图

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

6.图形编程实例-温控风扇

       1.    登录IntoRobot云平台，如没有账号请先进行注册。

       2.    进入“图形编程”，点击加号新建一个工程。

       3.    从图形代码模块中选择对应的模块，拖动至编辑区进行组合，完成后如下图：

                               
登录/注册后可看大图

       1)  首先添加温控风扇事件监控，判断如果控件的开光状态为关闭，那么控制风扇（D0管脚）为关闭，否则为打开。

       2)  然后在主程序下添加重复执行，循环监控D1管脚的DHT11的温度，并显示在控件中。并且增加判断，如果检测到D1管脚的DHT11的传感器的温度值小于25，那么将温控风扇的风扇关闭。之后延时1000毫秒，继续进行下一个循环。

       图形编程中不用自己定义变量，不用手动添加调用，等等这些相关工作平台均会自动处理。

       图形编程完成后，对应的代码为：

#include <DHT11/dht11.h>
#define TEMPCTRLFAN_CMD_SWITCH    "channel/tempCtrlFan_0/cmd/switch"
#define TEMPCTRLFAN_DATA_STATUS    "channel/tempCtrlFan_0/data/status"
#define TEMPCTRLFAN_DATA_TEMPERATURE    "channel/tempCtrlFan_0/data/temperature"

DHT11 dht11_A0 = DHT11(A0);

void fanSwitchCb(uint8_t *payload, uint32_t len)
{
        if (atoi((char *)payload) == 0)
        {
                digitalWrite(D0, LOW);
                IntoRobot.publish(TEMPCTRLFAN_DATA_STATUS,LOW);
        }
        else
        {
                digitalWrite(D0, HIGH);
                IntoRobot.publish(TEMPCTRLFAN_DATA_STATUS,HIGH);
        }
}

void setup()
{
        IntoRobot.subscribe(TEMPCTRLFAN_CMD_SWITCH, NULL, fanSwitchCb);
        pinMode(D0, OUTPUT);

        dht11_A0.begin();
}

void loop()
{
        IntoRobot.publish(TEMPCTRLFAN_DATA_TEMPERATURE, dht11_A0.ReadTemperature(0));
        if (dht11_A0.ReadTemperature(0) <= 25)
        {
                digitalWrite(D0, LOW);
                IntoRobot.publish(TEMPCTRLFAN_DATA_STATUS,LOW);
        }

        delay(1000);
}

       4. 选择需绑定烧录的设备，并保持设备在线，点击烧录，即可以将温控风扇的程序烧录至对应设备。软件配置完成。

shuwentao

学习了 楼主

zhang209a

回复 2# shuwentao


    更多IntoRobot创客工具可以点击：IntoRobot BBS http://bbs.intorobot.com/。可加入QQ群（460095989）与众多创客进行交流。

tgvcat

学习学习， 不错...........

Andy126