图表生成器：开源物联网可视化

今天，我们将发布Diagram Maker，这是一个面向物联网应用程序开发人员的开源图形用户界面库。使用Diagram Maker，物联网应用程序开发人员可以定义他们自己的用户界面和用户体验，或者完全禁止它并使用Diagram Maker API构建他们自己的自定义行为。在这篇文章中，我们解释了物联网应用程序开发人员如何开始并通过使用Diagram Maker的插件接口创作可重用插件来为Diagram Maker的开源项目做出贡献。

Diagram Maker是一个开源客户端库，使物联网应用程序开发人员能够为物联网终端客户构建可视化编辑器。借助此可视化编辑器，物联网客户可以借助图形用户界面以可视化方式创建和修改任何类似图形的数据，如状态机或工作流定义。

下面是一个JSON示例，它描述了IoT事件内部构建的状态机：

{ "；检测器模型定义"；：{ "；州"；：[ { "；stateName"；："；计费"；， "；onInput"；：{ "；事件"；：[]， "；TransitionEvents"；：[ { "；eventName"；："；Full_Charge"；， "；条件"；："；$input.AWS_IoTEvents_HelloWorld_VoltageInput.voltage>；29&34；， "；操作"；：[]， "；nextState"；："；已收费"； } ] }, "；onEnter"；：{ "；事件"；：[] }, "；onExit"；：{ "；事件"；：[] } }, { "；stateName"；："；已收费"；， "；onInput"；：{ "；事件"；：[]， "；TransitionEvents"；：[ { "；eventName"；："；in_use"；， "；条件"；："；$input.AWS_IoTEvents_HelloWorld_VoltageInput.voltage<；29&；&；$input.AWS_IoTEvents_HelloWorld_VoltageInput.voltage>；20&34；， "；操作"；：[]， "；nextState"；："；正在释放"； } ] }, "；onEnter"；：{ "；事件"；：[] }, "；onExit"；：{ "；事件"；：[] } }, { "；stateName"；："；正在排放"；， "；onInput"；：{ "；事件"；：[]， "；TransitionEvents"；：[ { "；eventName"；："；Charge_on"；， "；条件"；："；$input.AWS_IoTEvents_HelloWorld_VoltageInput.voltage<；21&34； "；操作"；：[]， "；nextState"；："；计费"； } ] }, "；onEnter"；：{ "；事件"；：[] }, "；onExit"；：{ "；事件"；：[] } } ], "；initialStateName"；："；收费"； }, "；DetectorModelDescription"；："；一个示例\"；Hello_World\"；用于监控电源墙电压的检测器型号。"；， "；检测器模型名称"；："；AWS_IoTEvents_Hello_World"；， "；评估方法"；："；批次"；， "；密钥"；："；powerwallId"；， "；角色Arn"；："；arn:aws:iam：：XXXXXXXXXXXX:role/service-role/AWS_IoTEvents_HelloWorld_ActionRole"； }。

构建物联网应用程序的开源UI库的想法并不是全新的。开放源码社区中已经存在用于非物联网用例的库，它们在没有内置交互的情况下提供绘制线条和形状的低级抽象。还有一些库提供高级抽象，如节点和边。但是，这些库不能轻松集成到不同的物联网应用中。

Diagram Maker不仅提供了与宿主应用程序一致的视觉体验，而且还为应用程序开发人员提供了更多空间，让他们能够利用宿主应用程序设计出各种外观。Diagram Maker是在Apache2.0许可下发布的，它提供了高级抽象，如节点和边，并且在外观和用户体验方面仍然保留了很高级别的自定义。

用于定义任何拖放接口的声明性接口，如面板标题或节点连接器。

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

图表生成器具有通过API接口自动布局给定图表的能力。通过此API接口，应用程序开发人员现在可以撤消或重做可变操作，调整视图内的所有节点，聚焦给定或选定的节点，以及创建布局。使用此功能，应用程序开发人员可以通过将与布局相关的信息附加到资源来轻松地可视化关系，即使它们是在编辑器之外创建的。

此外，应用程序开发人员可以潜在地将Diagram Maker的功能用于物联网之外的用例。例如，使用Diagram Maker，应用程序开发人员可以直观、直观地构建工作流引擎(AWS STEP Functions)或基础架构即代码(AWS CloudFortification)等云服务所需的云资源，从而增强最终客户的体验，从而使关系和层次结构正常工作。

或者，物联网应用程序开发人员可以使用Diagram Maker的插件接口来创作可重用插件。由应用程序开发人员开发的可重用插件扩展了Diagram Maker的核心功能，因此最终客户可以使用插件，而无需自己开发此类功能。

除了Diagram Maker，我们还开源了最小地图插件，这是在Diagram Maker插件界面之上制作的第一个插件。迷你地图插件允许消费者在他们选择的面板中渲染一个小的迷你地图。当物联网客户处理包含数百个节点的大型图表时，这会很有帮助，因为导航此图表变得很复杂。小地图通过显示整个图形的概览来增强客户体验，并允许客户拖动并单击不同部分以直接跳转到画布的这些部分。

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

使Diagram Maker成为一个开源项目可以促进创新，并为我们的客户提供更大的价值。开发人员可以完全控制定义界面和用户体验。Diagram Maker的核心功能非常广泛，它允许物联网应用程序开发人员修改Diagram Maker行为、完全禁止它，并使用Diagram Maker API或使用Diagram Maker的插件接口创建自己的自定义行为来创作可重用的插件。作为一个社区，AWS和IoT应用程序开发人员可以共同为IoT最终客户提供价值。