使用gojs展示设备配置过程

最新推荐文章于 2025-02-05 15:34:47 发布

原创

最新推荐文章于 2025-02-05 15:34:47 发布 · 1.5k 阅读

标签

#gojs

本文介绍如何使用GoJS为嵌入式设备创建配置界面。该界面支持拖拽配置输入、输出及算法属性，并能保存配置至设备。文章涵盖界面布局、属性编辑、连线生成等细节。

项目需求

使用gojs给嵌入式工程师写一套在设备上运行，可给设备配置属性的界面，配置完成后保存到设备上，图示如下（文字部分打了马赛克）
在这里插入图片描述

详细功能

1.左侧“输入”、“输出”及“算法”属性均可拖到右边进行配置，“算法”属性包含在“算法配置”框中，属性数量不限
2.“输入”属性拖到右侧后要指向“算法配置”，同理“输出”属性拖到右侧要从“算法配置”指向“输出”，由此表现输入输出的一个过程
3.所有属性均由若干字段组成，要求可以编辑配置项数据
4.配置完成“保存”数据到设备
5.判断设备是否已有配置，若有，则加载出来，即反向显示图表
6.右上角数据从服务器获取后加载，5s更新一次

功能实现

1.拆分界面，基本布局，太简单，不赘述
2.左侧调色板样式：
⑴ “输入”，“算法”，“输出”不参与配置，仅仅作为文字区分

//矩形，title样式
myDiagram.nodeTemplateMap.add("Title",
    $$(go.Node, "Table", nodeStyle(),
      $$(go.Panel, "Auto",
        $$(go.Shape, "Rectangle",
          {
    
     minSize: new go.Size(120, 40), stroke: "#eeeeee", strokeWidth: 1 },
		  new go.Binding("fill", "background")),
        $$(go.TextBlock, "Tablename", 
			{
    
    font: "bold 14pt Helvetica, Arial, sans-serif",
			 stroke: "black"},
		  {
    
    editable: true},
          new go.Binding("text"))
      ),
      // three named ports, one on each side except the top, all output only:
	  makePort("T", go.Spot.Top, go.Spot.Top,  true,false ),
      makePort("L", go.Spot.Left, go.Spot.Left, true,false ),
      makePort("R", go.Spot.Right, go.Spot.Right, true, false),
	  makePort("B", go.Spot.Bottom, go.Spot.Bottom, true, false)
));

效果在这里插入图片描述

⑵因各属性里面还有若干字段要编辑，所以用折叠框来展示，折叠框里面加入表格，表格中填写字段数据，折叠框可展开隐藏表格，但在左侧调色板中需禁止折叠框展开，拖到右侧后才可以展开

//折叠框样式
myDiagram.nodeTemplateMap.add("ExpandePanel",
	$$(go.Node, "Auto", 
	  {
    
    
		selectionAdorned: true,
		resizable: true,
		layoutConditions: go.Part.LayoutStandard & ~go.Part.LayoutNodeSized,
		fromSpot: go.Spot.AllSides,
		toSpot: go.Spot.AllSides,
		isShadowed: true,
		shadowOffset: new go.Point(3, 3),
		shadowColor: "#C5C1AA",
		locationSpot: go.Spot.Center
	  },
	  new go.Binding("desiredSize", "visible", function(v) {
   
    return new go.Size(NaN, NaN); }).ofObject("LIST"),
	  $$(go.Shape, "RoundedRectangle",
		{
    
     strokeWidth: 0,cursor: "pointer",minSize:new go.Size(120, 30) },
		new go.Binding("fill", "background")),
	  $$(go.Panel, "Table",
		{
    
     margin: 8, stretch: go.GraphObject.Fill},
		$$(go.RowColumnDefinition, {
    
     row: 0, sizing: go.RowColumnDefinition.None }),
		$$(go.TextBlock,
		  {
    
    
			row: 0, alignment: go.Spot.Center,
			margin: new go.Margin(0, 24,0,0),  
			font: "bold 13px sans-serif"
		  },
		  new go.Binding("text", "key")),
		// the collapse/expand button
		$$("PanelExpanderButton", "LIST",  
		  {
    
     row: 0, alignment: go.Spot.TopRight }),
		$$(go.Panel, "Vertical",
		  {
    
    
			name: "LIST",
			row: 1,
			padding: 1,
			alignment: go.Spot.TopLeft,
			defaultAlignment: go.Spot.Left,
			stretch: go.GraphObject.Horizontal,
			itemTemplate: itemTempl,
			visible:false,
			background: "white"
		  },
		  $$(go.Panel, "Table",
			  {
    
    
			   name: "TABLE", stretch: go.GraphObject.Horizontal,
			   minSize: new go.Size(100, 10),
			   defaultAlignment: go.Spot.Left,
			   defaultStretch: go.GraphObject.Horizontal,
			   defaultColumnSeparatorStroke: "gray",
			   defaultRowSeparatorStroke: "gray",
			   itemTemplate: fieldTemplate
			  },
			  $$(go.RowColumnDefinition, makeWidthBinding(0)),
			  $$(go.RowColumnDefinition, makeWidthBinding(1)),
			  $$(go.RowColumnDefinition, makeWidthBinding(2)),
			  new go.Binding("itemArray", "fields")
		  )) 
	)
))

效果在这里插入图片描述

⑶添加“保存”和“加载”按钮

//矩形,button样式1，保存
myDiagram.nodeTemplateMap.add("Button",
     $$(go.Node, "Auto",nodeStyle(),
          $$(go.Shape, "Rectangle",
             {
    
     strokeWidth: 2, stroke: "#76C176" }),
          $$(go.Panel, "Vertical",
            $$("Button",{
    
    minSize: new go.Size(120, 40)},
			{
   
   click:  diagramTojson},
              $$(go.TextBlock, "Click me!",{
    
    font: "12pt 华文细黑"},
          new go.Binding("text")))
    )
));

//矩形,button样式2，加载
myDiagram.nodeTemplateMap.add("getButton",
     $$(go.Node, "Auto",nodeStyle(),
           $$(go.Shape, "Rectangle",
              {
    
     strokeWidth: 2, stroke: "#76C176" }),
           $$(go.Panel, "Vertical",
             $$("Button",{
    
    minSize: new go.Size(120, 40)},
     		{
   
   click:  loadDiagram},
               $$(go.TextBlock, "Click me!",{
    
    font: "12pt 华文细黑"},
           new go.Binding("text")))
     )
));

效果在这里插入图片描述
3.将“算法配置”框作为固定节点，设置isGroup: true，便可将算法属性拖到框中

//绘制节点模板
myDiagram.nodeTemplate =
 $$("Node", "Auto",
   {
    
    
	 locationSpot: go.Spot.Center,
	 layerName: "Background"
   },  // always have regular nodes behind Links
   $$("Shape", "RoundedRectangle",
	 {
    
    
	   fill: "white",
	   fromLinkable: true, toLinkable: true, cursor: "pointer",
	   width:100,height:80
	 },
	 new go.Binding("fill", "color")),
   $$("TextBlock",
	 {
    
     margin: 8 },  
	 new go.Binding("text", "text")), 
	 makePort("L", go.Spot.Left, go.Spot.Left, false, true)
 );

myDiagram.model.nodeDataArray = [
	{
   
    key: 1, text: "算法配置", color: "#C0818B",isGroup: true },
]

效果在这里插入图片描述
4.拖动属性到右侧之后自动生成连线的问题，这里我们使用gojs事件来实现，可添加监听节点生成事件，当节点拖到右侧生成之后，根据节点的key值来判断是输入属性还是输出属性，之后添加连线即可，这里“算法配置”框设置key值为1，上面代码有显示，其他属性的key值自己设置

//添加监听节点生成事件
myDiagram.addDiagramListener("externalobjectsdropped",function(e) {
   
   
    e.subject.each(function(n){
   
   
	   if(n.data.key.indexOf("FTPIN") != -1||n.data.key.indexOf("MQTTIN") != -1||n.data.key.indexOf("HTTPIN") != -1||n.data.key.indexOf("RTSPIN") != -1){
   
   
			myDiagram.model.addLinkData({
   
    from: n.data.key, to: 1 });
	   }
	   if(n.data.key.indexOf("FTPOUT") != -1||n.data.key.indexOf("MQTTOUT") != -1||n.data.key.indexOf("HTTPOUT") != -1){
   
   
		   myDiagram.model.addLinkData({
   
    from:1 , to: n.data.key });
	   }
	});
  });

5.“保存”，“加载”方法略，所有功能实现，界面如下图
在这里插入图片描述
完整代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-3.2.1.min.js"></script>
		<script src="js/go-debug.js"></script>
		<script src="https://gojs.net/latest/extensions/Figures.js"></script>
		<script src="js/layer-v3.1.1/layer/layer.js"></script>
	
		<style>
			body{
   
   
				width: 100%;
				height: 100%;
				margin: 0;
				padding: 0;
				position: absolute;
			}
			.bg{
   
   
				background:#BFCDE9 ;
				height: 10%;
				width: 100%;
				position: relative;
			}
			.logo{
   
   
				width: auto;
				height: 100%;
				position: absolute;
				left: 10px;
				padding: 10px;
			}
			.logo>img{
   
   
				width: auto;
				height: 80%;
			}
			.logo>span{
   
   
				font: 54px bold ;
				vertical-align: top;
				margin: 0 20px;
				text-shadow: 5px 5px 5px grey;
				color:

最低0.47元/天解锁文章