Diagram Maker:开源物联网可视化工具

近日亚马逊宣布了Diagram Maker,这是一个面向IoT应用程序开发人员的开源图形用户界面库。借助Diagram Maker,IoT应用程序开发人员可以定义自己的用户界面和用户体验,并使用Diagram Maker API建立自己的自定义行为。在本文中,我们将说明IoT应用程序开发人员如何开始工作,并通过使用Diagram Maker的插件界面编写可重用的插件来为Diagram Maker的开源项目做出贡献。

什么是图制作工具?

Diagram Maker是一个开源客户端库,使IoT应用程序开发人员可以为IoT最终客户构建可视化编辑器。借助该可视化编辑器,IoT客户可以借助图形UI以可视化方式创建和修改任何类似图形的数据,例如状态机或工作流定义。

这是JSON的示例,描述了IoT Events中内置的状态机:

{
    "detectorModelDefinition": {
        "states": [
            {
                "stateName": "Charging",
                "onInput": {
                    "events": [],
                    "transitionEvents": [
                        {
                            "eventName": "Full_charge",
                            "condition": "$input.AWS_IoTEvents_HelloWorld_VoltageInput.voltage > 29",
                            "actions": [],
                            "nextState": "Charged"
                        }
                    ]
                },
                "onEnter": {
                    "events": []
                },
                "onExit": {
                    "events": []
                }
            },
            {
                "stateName": "Charged",
                "onInput": {
                    "events": [],
                    "transitionEvents": [
                        {
                            "eventName": "In_use",
                            "condition": "$input.AWS_IoTEvents_HelloWorld_VoltageInput.voltage < 29 && $input.AWS_IoTEvents_HelloWorld_VoltageInput.voltage > 20",
                            "actions": [],
                            "nextState": "Discharging"
                        }
                    ]
                },
                "onEnter": {
                    "events": []
                },
                "onExit": {
                    "events": []
                }
            },
            {
                "stateName": "Discharging",
                "onInput": {
                    "events": [],
                    "transitionEvents": [
                        {
                            "eventName": "Charge_on",
                            "condition": "$input.AWS_IoTEvents_HelloWorld_VoltageInput.voltage < 21",
                            "actions": [],
                            "nextState": "Charging"
                        }
                    ]
                },
                "onEnter": {
                    "events": []
                },
                "onExit": {
                    "events": []
                }
            }
        ],
        "initialStateName": "Charging"
    },
    "detectorModelDescription": "A sample \"Hello_World\" detector model that monitors powerwall voltage.",
    "detectorModelName": "AWS_IoTEvents_Hello_World",
    "evaluationMethod": "BATCH",
    "key": "powerwallId",
    "roleArn": "arn:aws:iam::XXXXXXXXXXXX:role/service-role/AWS_IoTEvents_HelloWorld_ActionRole"
}

IoT Events控制台的三种状态的屏幕截图:

Diagram Maker:开源物联网可视化工具

用于构建IoT应用程序的开源UI库的想法并不是什么新想法。开源社区中已经存在用于非IoT用例的库,这些库无需内部交互即可提供绘制线条和形状的低级抽象。也有提供高级抽象的库,例如节点和边。但是,这些库无法轻松集成到不同的IoT应用程序中。

注意:在本文中,是指连接两个顶点的几何线。

Diagram Maker提供的视觉体验不仅与宿主应用程序保持一致,而且还为应用程序开发人员提供了更多空间来提出宿主应用程序的各种外观。在Apache 2.0许可下发布的Diagram Maker提供了高级抽象(例如节点和边缘),并且在外观和用户体验方面仍然保留了高级定制。

Diagram Maker的核心功能包括:

  • 内置节点拖动
  • 拖动以创建边缘
  • 画布平移和缩放
  • 面板拖动
  • 基于上下文的菜单
  • 全选和删除的键盘快捷键
  • 模式:拖动模式,多选选择模式,限制编辑的只读模式
  • 用于定义任何拖放接口的声明性接口,例如面板标题或节点连接器

借助Diagram Maker,IoT应用程序开发人员可以创建,移动或删除节点和边缘。这些可以代表基于AWS IoT服务的不同实体。例如,在AWS IoT Events中,节点表示状态,而边缘(连接两个顶点的几何线)表示过渡。开发人员可以对节点,边和面板的位置和大小进行建模,然后Diagram Maker将这些元素渲染为Diagram Maker画布上的元素。呈现的UI是完全交互式的,并允许用户移动节点,创建新边缘或删除节点或边缘。

Diagram Maker具有通过API接口自动布置给定图形的功能。使用此API界面,应用程序开发人员现在可以撤消或重做可变操作,适合视图中的所有节点,集中给定或选定的节点,以及创建布局。借助此功能,即使在编辑器外部创建了与布局相关的信息,这些应用程序开发人员也可以通过将与布局相关的信息随资源统一可视化关系。

此外,应用程序开发人员可以潜在地利用Diagram Maker的功能来解决物联网以外的用例。例如,借助Diagram Maker,应用程序开发人员可以使最终客户直观,直观地构建云服务(如工作流引擎(AWS Step Functions)或基础设施即代码(AWS CloudFormation))所需的云资源,从而增强最终用户的体验,从而获得关系和层次结构正常工作。获取更多前沿科技信息访问:https://byteclicks.com

Diagram Maker入门

可以在GitHub中使用Diagram Maker 。

Diagram Maker插件:Minimap

IoT应用程序开发人员可以使用Diagram Maker的插件界面创作可重用插件。由应用程序开发人员开发的可重用插件扩展了Diagram Maker的核心功能,因此最终客户可以使用插件而无需自己开发此类功能。

与Diagram Maker一起还将开源minimap插件,这是在Diagram Maker插件界面之上制作的第一个插件。minimap插件允许消费者在自己选择的面板中渲染一个小型minimap。当IoT客户正在处理具有数百个节点的大型图时,该图的导航变得非常复杂,这将很有帮助。小地图通过显示整个图形的概述来增强客户体验,并允许客户拖动并单击不同的部分以直接跳到画布的那些部分。

Diagram Maker:开源物联网可视化工具

我们设想该计划将发展成为一个充满活力的插件作者社区,他们将以创新的方式扩展Diagram Maker的核心功能。这些将反过来使AWS IoT和其他产品中的该库的所有消费者受益,并将帮助我们的Io​​T客户更快,更轻松地理解IoT数据。

结论

使Diagram Maker成为一个开源项目可以促进创新并为我们的客户提供更大的价值。开发人员可以完全控制定义界面和用户体验。凭借如此广泛的功能,Diagram Maker允许IoT应用程序开发人员使用Diagram Maker API或使用Diagram Maker的插件接口来编写可重用插件。作为一个社区,AWS和物联网应用程序开发人员可以共同为物联网最终客户提供价值。

上一篇:

下一篇:


标签