CN115495067A - 一种拓扑图编辑器代码可视化生成方法、装置及存储介质 - Google Patents
一种拓扑图编辑器代码可视化生成方法、装置及存储介质 Download PDFInfo
- Publication number
- CN115495067A CN115495067A CN202211200749.1A CN202211200749A CN115495067A CN 115495067 A CN115495067 A CN 115495067A CN 202211200749 A CN202211200749 A CN 202211200749A CN 115495067 A CN115495067 A CN 115495067A
- Authority
- CN
- China
- Prior art keywords
- configuration
- area
- graph editor
- topological graph
- code
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
- 238000000034 method Methods 0.000 title claims abstract description 38
- 230000000007 visual effect Effects 0.000 claims abstract description 19
- 238000012800 visualization Methods 0.000 claims description 16
- 238000004590 computer program Methods 0.000 claims description 12
- 238000012545 processing Methods 0.000 claims description 10
- 230000000694 effects Effects 0.000 claims description 6
- 208000018747 cerebellar ataxia with neuropathy and bilateral vestibular areflexia syndrome Diseases 0.000 claims description 3
- 239000000725 suspension Substances 0.000 claims description 3
- 238000010586 diagram Methods 0.000 description 19
- 238000011161 development Methods 0.000 description 11
- 230000008569 process Effects 0.000 description 6
- 230000002159 abnormal effect Effects 0.000 description 4
- 238000004891 communication Methods 0.000 description 3
- 238000010276 construction Methods 0.000 description 3
- 230000008878 coupling Effects 0.000 description 3
- 238000010168 coupling process Methods 0.000 description 3
- 238000005859 coupling reaction Methods 0.000 description 3
- 239000012634 fragment Substances 0.000 description 2
- 230000005540 biological transmission Effects 0.000 description 1
- 238000005516 engineering process Methods 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/34—Graphical or visual programming
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
- G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
- G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
- G06F3/0481—Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance
- G06F3/04817—Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance using icons
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
- G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
- G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
- G06F3/0481—Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance
- G06F3/0482—Interaction with lists of selectable items, e.g. menus
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
- G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
- G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
- G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/33—Intelligent editors
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/38—Creation or generation of source code for implementing user interfaces
Landscapes
- Engineering & Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Software Systems (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Human Computer Interaction (AREA)
- Stored Programmes (AREA)
Abstract
本发明涉及一种拓扑图编辑器代码可视化生成方法、装置及存储介质，实现按照需求通过可视化配置的方式定制拓扑图编辑器，定制拓扑图编辑器中涉及到的网络节点和工具。本发明配置用于校验拓扑图编辑器的配置相关Json数据的Jsonschema；通过可视化的编辑界面配置所需的拓扑图编辑器支持的各类网络节点及属性、自定义工具、画布大小和网络节点连接规则，Json数据生成器按照自定义的拓扑图编辑器的配置生成相关Json数据；利用所述Jsonschema对得到的拓扑图编辑器的配置相关Json数据进行校验，若校验有格式或参数问题，则产生相应的提示警示用户，若校验无误，则保存Json数据并通过预设的代码生成器将得到的Json数据转化为拓扑图编辑器运行的实际代码。
Description
技术领域
本发明涉及拓扑图编辑器构建领域，尤其涉及一种拓扑图编辑器代码可视化生成方法、装置及存储介质。
背景技术
云计算时代已经到来，存储、网络、计算等越来越多的资源开始上云，伴随而来的就是这些资源如何运维、如何监控的问题，而拓扑图编辑器作为一种云计算资源可视化展现技术，通过拖拉拽各类资源节点，建立节点间连接关系，制作的资源拓扑图、网络拓扑图等形式，将当前云上资源进行直观、动态展示。
但对于开发人员来说，每个云平台所涉及的云上资源种类多、资源间的拓扑关系不同，如网络拓扑图是指由云计算资源网络中网络节点设备和通信介质构成连接关系的网络结构图。网络拓扑图定义了各种计算机、打印机、网络设备和其他设备的连接方式，网络拓扑描述了线缆和网络设备的布局以及数据传输时所采用的路径。提供可供扩展的拓扑图编辑工具，包括拓扑图展示、编辑、导出、保存等功能。如虚拟机拓扑图是指形成云计算平台的虚拟机之间连接关系所形成集群的集群结构图。如果逐一对每个平台资源对象开发拓扑图编辑工具，不仅有大量重复冗余工作，而且要面对不同平台的个性化需求进行大量不可复用的开发，造成开发成本高、开发效率低下的问题。
发明内容
为了解决上述技术问题或者至少部分地解决上述技术问题，本发明提供一种拓扑图编辑器代码可视化生成方法、装置及存储介质。
第一方面，本发明提供一种拓扑图编辑器代码可视化生成方法，包括：配置用于校验拓扑图编辑器的配置相关Json数据的Jsonschema；通过可视化的编辑界面配置所需的拓扑图编辑器支持的各类网络节点及属性、自定义工具、画布大小和网络节点连接规则，Json数据生成器按照自定义的拓扑图编辑器的配置生成相关Json数据；利用所述Jsonschema对得到的拓扑图编辑器的配置相关Json数据进行校验，若校验有格式或参数问题，则产生相应的提示警示用户，若校验无误，则保存Json数据并通过预设的代码生成器将得到的Json数据转化为拓扑图编辑器运行的实际代码。
更进一步地，可视化的编辑界面基于拓扑图编辑器效果模板构建，拓扑图编辑器效果模板包含：拓扑图节点区域、画布区域、工具栏区域和配置区域，所述配置区域针对拓扑图节点区域的网络节点、画布区域的画布、工具栏区域的自定义工具的详细属性提供配置接口；
所述拓扑图节点区域和配置区域结合供用户配置拓扑图编辑器中涉及到的各类网络节点及网络节点详细属性；所述画布区域和配置区域结合供用户配置画布及画布详细属性；所述工具栏区域和配置区域结合供用户配置自定义工具及自定义工具详细属性。
更进一步地，可视化的编辑界面包括用于触发保存所构建拓扑图编辑器配置Json数据的保存按钮，用于触发取消所构建拓扑图编辑器的取消按钮，用于触发导出所构建拓扑图编辑器实际代码的导出代码按钮。
更进一步地，所述拓扑图节点区域和配置区域结合供用户配置拓扑图编辑器中涉及到的各类网络节点及网络节点详细属性包括：单击拓扑图节点区域的新增节点按钮触发配置区域提供自定义的网络节点的详细属性配置接口，自定义网络节点的详细属性配置接口包括节点名称配置接口、节点大小配置接口、节点流入规则配置接口、节点流出规则配置接口、节点图标上传接口和节点悬浮提示接口。
更进一步地，所述画布区域和配置区域结合供用户配置画布及画布详细属性包括：选中画布触发配置区域提供画布详细属性配置接口，画布详细属性配置接口包括画布背景配置接口、画布网格配置接口、画布大小配置接口。
更进一步地，所述工具栏区域和配置区域结合供用户配置自定义工具及自定义工具详细属性包括：单击工具栏区域的新增自定义工具按钮触发提供自定义工具栏列表，用户选择自义定工具栏列表中待添加的自定义工具后列表中待添加的自定义工具后触发将自定义工具图标配置到自定义工具栏且触发配置区域提供所选自定义工具的详细属性配置接口；针对不同的自定义工具提供相应的自定义工具配置接口。
更进一步地，所述Jsonschema配置各详细属性数据类型、详细属性中数据类型为数值型属性的取值范围、自定义工具的功能范围。
更进一步地，所述代码生成器预置将Json数据转化为拓扑图编辑器实际代码的生成规则；所述代码生成器支持包括：html和javascript框架的代码、Vue框架的代码和React框架的代码。
第二方面，本发明提供一种拓扑图编辑器代码可视化生成装置，包括：至少一处理单元，总线单元和存储单元，其中，所述总线单元连接存储单元、处理单元，所述存储单元存储计算机程序，计算机程序被处理单元执行时实现所述的拓扑图编辑器代码可视化生成方法。
第三方面，本发明提供一种实现拓扑图编辑器代码可视化生成方法的存储介质，所述存储介质存储计算机程序，所述计算机程序被处理器执行时实现所述的拓扑图编辑器代码可视化生成方法。
本发明实施例提供的上述技术方案与现有技术相比具有如下优点：
本发明通过可视化的编辑界面构建可自定义网络节点、自定义工具和画布的拓扑图编辑器，通过Json数据生成器将用户自定义的拓扑图编辑器的配置映射成Json数据。利用预先配置的Jsonschema对Json数据进行校验，避免Json数据的格式或参数存在问题。通过预设的代码生成器调用校验后的Json数据的数据构建拓扑图编辑器的实际代码。从而将原有的拓扑图编辑器构建时代码开发工作转换为简单的配置工作，大大简化了拓扑图编辑器开发的工作量。支持开发人员基于自身对于拓扑图的需求自定义的进行二次开发和个性化开发，满足不同用户的需求；提高工作效率。
附图说明
此处的附图被并入说明书中并构成本说明书的一部分，示出了符合本发明的实施例，并与说明书一起用于解释本发明的原理。
为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，对于本领域普通技术人员而言，在不付出创造性劳动性的前提下，还可以根据这些附图获得其他的附图。
图1为本发明实施例提供的一种拓扑图编辑器代码可视化生成方法的流程图；
图2为本发明实施例提供的可视化的编辑界面的示意图；
图3为本发明实施例提供的一种拓扑图编辑器代码可视化生成装置的示意图；
图4为本发明实施例提供的一种拓扑图编辑器代码可视化生成系统的示意图。
具体实施方式
为使本发明实施例的目的、技术方案和优点更加清楚，下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本发明的一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动的前提下所获得的所有其他实施例，都属于本发明保护的范围。
需要说明的是，在本文中，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同要素。
实施例1
参阅图1所示，本发明提供一种拓扑图编辑器代码可视化生成方法，包括：
S100，预先配置用于校验拓扑图编辑器的配置相关Json数据的Jsonschema；所述Jsonschema涉及各拓扑编辑器网络节点、自定义工具和画布配置的详细属性数据类型、详细属性中数据类型为数值型属性的取值范围、自定义工具的功能范围。一种针对拓扑编辑器默认格式网络节点的Jsonschema片段如下：
默认格式网络节点的Jsonschema片段中，定义默认格式网络节点的数据类型为对象“object”，默认网络节点中不同层级的详细属性：“backgroundConfig”，“backgroundConfig”层级下的“fill”、“stroke”、“anchorPoint”和“labelCfg”，“labelCfg”层级下的“style”，“labelCfg”层级下的“style”层级下的“fill”、“fontSize”；以及详细属性的数据类型“string”、“array”、“object”，其中对于“array”类型的“anchorPoint”，其受限于画布的大小。
S200，通过可视化的编辑界面配置所需的拓扑图编辑器支持的各类网络节点及属性、自定义工具、画布大小和网络节点连接规则，Json数据生成器按照自定义的拓扑图编辑器的配置生成相关Json数据。
具体实施过程中，参阅图2所示，可视化的编辑界面基于拓扑图编辑器效果模板构建，拓扑图编辑器效果模板包含：拓扑图节点区域、画布区域、工具栏区域和配置区域，所述配置区域针对拓扑图节点区域的网络节点、画布区域的画布、工具栏区域的自定义工具的详细属性提供配置接口。所述可视化的编辑界面还包括用于触发保存所构建拓扑图编辑器配置Json数据的保存按钮，用于触发取消所构建拓扑图编辑器的取消按钮，用于触发导出所构建拓扑图编辑器实际代码的导出代码按钮。具体的，单击所述导出代码按钮触发弹出选择框，所述选择框提示用户所需导出代码的类型所需导出代码的类型包括：html和javascript框架的代码、Vue框架的代码和React框架的代码；用户选择，基于用户的选择调用相应代码生成器生成相应类型的代码导出。
所述拓扑图节点区域和配置区域结合供用户配置拓扑图编辑器中涉及到的各类网络节点及网络节点详细属性；所述画布区域和配置区域结合供用户配置画布及画布详细属性；所述工具栏区域和配置区域结合供用户配置自定义工具及自定义工具详细属性。
所述拓扑图节点区域和配置区域结合供用户配置拓扑图编辑器中涉及到的各类网络节点及网络节点详细属性包括：
单击拓扑图节点区域的新增节点按钮触发配置区域提供自定义的网络节点的详细属性配置接口，自定义网络节点的详细属性配置接口包括节点名称配置接口、节点大小配置接口、节点流入规则配置接口、节点流出规则配置接口、节点图标上传接口和节点悬浮提示接口。
所述画布区域和配置区域结合供用户配置画布及画布详细属性包括：
选中画布触发配置区域提供画布详细属性配置接口，画布详细属性配置接口包括画布背景配置接口、画布网格配置接口、画布大小配置接口。通过画布背景配置接口配置画布背景颜色、白天黑夜护眼等风格，通过画布网格配置接口配置画布是否显示网格，若显示网格配置网格的网孔大小，画布大小配置接口配置画布尺寸。
所述工具栏区域和配置区域结合供用户配置自定义工具及自定义工具详细属性包括：
单击工具栏区域的新增自定义工具按钮触发提供自定义工具栏列表。所述自定义工具栏列表中配置各类自定义工具，如放大缩小工具、下载拓扑图工具、撤销工具、取消撤销工具。
用户选择自义定工具栏列表中待添加的自定义工具后触发将自定义工具图标配置到自定义工具栏且触发配置区域提供所选自定义工具的详细属性配置接口。
针对不同的自定义工具提供相应的自定义工具配置接口。如针对缩小放大工具提供定义步进放大或缩小倍数的配置接口。
Json数据生成器按照自定义的拓扑图编辑器的配置生成相关Json数据，如对于默认格式网络节点通过Json数据生成器处理默认格式网络节点的配置生成如下Json数据：
S300，利用所述Jsonschema校验得到的拓扑图编辑器的配置相关Json数据是否存在格式或参数问题，若校验有格式或参数问题，则执行S400。若校验无问题，则执行S500。
S400，产生相应的提示警示用户进行异常配置修改。具体的，若格式出现问题，则提示当前异常格式和对应当前异常格式的Jsonschema，以及当前异常格式不符合相应Jsonschema之处。
S500，保存Json数据并通过预设的代码生成器将得到的Json数据转化为拓扑图编辑器运行的实际代码。
具体实施过程中，所述代码生成器预置将Json数据转化为拓扑图编辑器实际代码的生成规则；所述代码生成器支持包括：html和javascript框架的代码、Vue框架的代码和React框架的代码。
如对于网络节点，通过预先配置的代码生成规则调用网络节点的配置参数进行构建。
将所生成的拓扑图编辑器的实际代码加入到已有的代码工程中，对现有的拓扑图编辑器进行拓展，或将所生成的拓扑图编辑器的实际代码作为新工程，构建新的拓扑图编辑器。
实施例2
参阅图3所示，本发明实施例提供一种拓扑图编辑器代码可视化生成装置，包括：至少一处理单元，总线单元和存储单元，其中，所述总线单元连接存储单元、处理单元，所述存储单元存储计算机程序，计算机程序被处理单元执行时实现所述的拓扑图编辑器代码可视化生成方法。
实施例3
本发明实施例提供一种实现拓扑图编辑器代码可视化生成方法的存储介质，所述存储介质存储计算机程序，所述计算机程序被处理器执行时实现所述的拓扑图编辑器代码可视化生成方法。
实施例4
参阅图4所示，本发明实施例提供一种拓扑图编辑器代码可视化生成系统包括：
可视化的编辑界面，通过所述可视化的编辑界面配置所需的拓扑图编辑器支持的各类网络节点及属性、自定义工具、画布大小和网络节点连接规则。
Json数据生成器，所述Json数据生成器用于将可视化的编辑界面提供的配置映射成相应的Json数据。
Jsonschema模块，所述Jsonschema模块用于预先构建对Json数据进行校验的Jsonschema。
校验模块，所述校验模块利用Jsonschema模块提供的Jsonschema对Json数据生成器生成的Json数据进行校验，检测是否存在参数或格式异常，出现参数或格式异常通过编辑界面进行提示。
代码生成器，所述代码生成器将Json数据生成器生成的无异常Json数据转化为拓扑图编辑器的实际代码。
本发明通过可视化的编辑界面构建可自定义网络节点、自定义工具和画布的拓扑图编辑器，通过Json数据生成器将用户自定义的拓扑图编辑器的配置映射成Json数据。利用预先配置的Jsonschema对Json数据进行校验，避免Json数据的格式或参数存在问题。通过预设的代码生成器调用校验后的Json数据的数据构建拓扑图编辑器的实际代码。从而将原有的拓扑图编辑器构建时代码开发工作转换为简单的配置工作，大大简化了拓扑图编辑器开发的工作量。支持开发人员基于自身对于拓扑图的需求自定义的进行二次开发和个性化开发，满足不同用户的需求；提高工作效率。
在本发明所提供的实施例中，应该理解到，所揭露的结构和方法，可以通过其它的方式实现。例如，以上所描述的结构实施例仅仅是示意性的，例如，所述单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，例如多个单元或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些接口，结构或单元的间接耦合或通信连接，可以是电性，机械或其它的形式。
所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。
另外，在本发明各个实施例中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。上述集成的单元既可以采用硬件的形式实现，也可以采用软件功能单元的形式实现。
以上所述仅是本发明的具体实施方式，使本领域技术人员能够理解或实现本发明。对这些实施例的多种修改对本领域的技术人员来说将是显而易见的，本文中所定义的一般原理可以在不脱离本发明的精神或范围的情况下，在其它实施例中实现。因此，本发明将不会被限制于本文所示的这些实施例，而是要符合与本文所申请的原理和新颖特点相一致的最宽的范围。
Claims (10)
1.一种拓扑图编辑器代码可视化生成方法，其特征在于，包括：配置用于校验拓扑图编辑器的配置相关Json数据的Jsonschema；通过可视化的编辑界面配置所需的拓扑图编辑器支持的各类网络节点及属性、自定义工具、画布大小和网络节点连接规则，Json数据生成器按照自定义的拓扑图编辑器的配置生成相关Json数据；利用所述Jsonschema对得到的拓扑图编辑器的配置相关Json数据进行校验，若校验有格式或参数问题，则产生相应的提示警示用户，若校验无误，则保存Json数据并通过预设的代码生成器将得到的Json数据转化为拓扑图编辑器运行的实际代码。
2.根据权利要求1所述的拓扑图编辑器代码可视化生成方法，其特征在于，可视化的编辑界面基于拓扑图编辑器效果模板构建，拓扑图编辑器效果模板包含：拓扑图节点区域、画布区域、工具栏区域和配置区域，所述配置区域针对拓扑图节点区域的网络节点、画布区域的画布、工具栏区域的自定义工具的详细属性提供配置接口；
所述拓扑图节点区域和配置区域结合供用户配置拓扑图编辑器中涉及到的各类网络节点及网络节点详细属性；所述画布区域和配置区域结合供用户配置画布及画布详细属性；所述工具栏区域和配置区域结合供用户配置自定义工具及自定义工具详细属性。
3.根据权利要求2所述的拓扑图编辑器代码可视化生成方法，其特征在于，可视化的编辑界面包括用于触发保存所构建拓扑图编辑器配置Json数据的保存按钮，用于触发取消所构建拓扑图编辑器的取消按钮，用于触发导出所构建拓扑图编辑器实际代码的导出代码按钮。
4.根据权利要求2所述的拓扑图编辑器代码可视化生成方法，其特征在于，所述拓扑图节点区域和配置区域结合供用户配置拓扑图编辑器中涉及到的各类网络节点及网络节点详细属性包括：单击拓扑图节点区域的新增节点按钮触发配置区域提供自定义的网络节点的详细属性配置接口，自定义网络节点的详细属性配置接口包括节点名称配置接口、节点大小配置接口、节点流入规则配置接口、节点流出规则配置接口、节点图标上传接口和节点悬浮提示接口。
5.根据权利要求2所述的拓扑图编辑器代码可视化生成方法，其特征在于，所述画布区域和配置区域结合供用户配置画布及画布详细属性包括：选中画布触发配置区域提供画布详细属性配置接口，画布详细属性配置接口包括画布背景配置接口、画布网格配置接口、画布大小配置接口。
6.根据权利要求1所述的拓扑图编辑器代码可视化生成方法，其特征在于，所述工具栏区域和配置区域结合供用户配置自定义工具及自定义工具详细属性包括：单击工具栏区域的新增自定义工具按钮触发提供自定义工具栏列表，用户选择自义定工具栏列表中待添加的自定义工具后触发将自定义工具图标配置到自定义工具栏且触发配置区域提供所选自定义工具的详细属性配置接口；针对不同的自定义工具提供相应的自定义工具配置接口。
7.根据权利要求1所述的拓扑图编辑器代码可视化生成方法，其特征在于，所述Jsonschema配置各详细属性数据类型、详细属性中数据类型为数值型属性的取值范围、自定义工具的功能范围。
8.根据权利要求1所述的拓扑图编辑器代码可视化生成方法，其特征在于，所述代码生成器预置将Json数据转化为拓扑图编辑器实际代码的生成规则；所述代码生成器支持包括：html和javascript框架的代码、Vue框架的代码和React框架的代码。
9.一种拓扑图编辑器代码可视化生成装置，其特征在于，包括：至少一处理单元，总线单元和存储单元，其中，所述总线单元连接存储单元、处理单元，所述存储单元存储计算机程序，计算机程序被处理单元执行时实现如权利要求1-8任一所述的拓扑图编辑器代码可视化生成方法。
10.一种实现拓扑图编辑器代码可视化生成方法的存储介质，所述存储介质存储计算机程序，其特征在于，所述计算机程序被处理器执行时实现如权利要求1-8任一所述的拓扑图编辑器代码可视化生成方法。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202211200749.1A CN115495067A (zh) | 2022-09-29 | 2022-09-29 | 一种拓扑图编辑器代码可视化生成方法、装置及存储介质 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202211200749.1A CN115495067A (zh) | 2022-09-29 | 2022-09-29 | 一种拓扑图编辑器代码可视化生成方法、装置及存储介质 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN115495067A true CN115495067A (zh) | 2022-12-20 |
Family
ID=84473155
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202211200749.1A Pending CN115495067A (zh) | 2022-09-29 | 2022-09-29 | 一种拓扑图编辑器代码可视化生成方法、装置及存储介质 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN115495067A (zh) |
Cited By (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN116048480A (zh) * | 2023-04-04 | 2023-05-02 | 青岛普瑞盛医药科技有限公司 | 一种基于代码工具自动生成图表的方法及装置 |
| CN116055572B (zh) * | 2023-01-03 | 2024-01-16 | 广州市玄武无线科技股份有限公司 | 一种全域集成编排流协议生成方法及执行方法 |
| CN117556578A (zh) * | 2024-01-09 | 2024-02-13 | 中科物栖(南京)科技有限公司 | 图形化生成物联网应用的方法、装置、设备及存储介质 |
| CN117768510A (zh) * | 2024-01-09 | 2024-03-26 | 中科物栖(南京)科技有限公司 | 图形化生成广播通信机制的方法、装置、设备和存储介质 |
-
2022
- 2022-09-29 CN CN202211200749.1A patent/CN115495067A/zh active Pending
Cited By (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN116055572B (zh) * | 2023-01-03 | 2024-01-16 | 广州市玄武无线科技股份有限公司 | 一种全域集成编排流协议生成方法及执行方法 |
| CN116048480A (zh) * | 2023-04-04 | 2023-05-02 | 青岛普瑞盛医药科技有限公司 | 一种基于代码工具自动生成图表的方法及装置 |
| CN117556578A (zh) * | 2024-01-09 | 2024-02-13 | 中科物栖(南京)科技有限公司 | 图形化生成物联网应用的方法、装置、设备及存储介质 |
| CN117556578B (zh) * | 2024-01-09 | 2024-03-26 | 中科物栖(南京)科技有限公司 | 图形化生成物联网应用的方法、装置、设备及存储介质 |
| CN117768510A (zh) * | 2024-01-09 | 2024-03-26 | 中科物栖(南京)科技有限公司 | 图形化生成广播通信机制的方法、装置、设备和存储介质 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN115495067A (zh) | 一种拓扑图编辑器代码可视化生成方法、装置及存储介质 | |
| US20210034336A1 (en) | Executing a process-based software application in a first computing environment and a second computing environment | |
| CN111881662A (zh) | 表单生成方法、装置、处理设备及存储介质 | |
| CN112486073B (zh) | 机器人控制方法、控制系统和可读存储介质 | |
| CN104424338A (zh) | web系统的自动生成装置和自动生成方法 | |
| JP2008234213A (ja) | 情報処理装置、情報処理方法、情報処理プログラム、及び情報処理プログラムを記録する記録媒体 | |
| CN110765028B (zh) | 验证环境的可视化搭建方法、装置及存储介质 | |
| WO2019033016A1 (en) | SYSTEM AND METHOD FOR PROVIDING VISUALIZATIONS OF COMPUTER INFRASTRUCTURE USING A DOMAIN-SPECIFIC LANGUAGE FOR CLOUD SERVICES INFRASTRUCTURE | |
| CN111399941A (zh) | 一种bmc功能的批量配置方法、装置及设备 | |
| CN110764864A (zh) | 一种基于Terraform的可视化资源编排方法 | |
| CN108628648B (zh) | 数据处理方法和数据处理装置 | |
| CN115495069A (zh) | 基于模型驱动的煤炭工业软件流程实现方法、装置及设备 | |
| CN115525280A (zh) | 前端代码生成方法及装置、存储介质及电子设备 | |
| CN111538498A (zh) | 一种应用创建方法、装置、电子设备及存储介质 | |
| CN114912897A (zh) | 工作流执行方法、工作流编排方法及电子设备 | |
| CN109840201B (zh) | Ui测试方法、装置、电子设备及计算机可读存储介质 | |
| CN114741071A (zh) | 一种应用构建方法及装置 | |
| CN116301785A (zh) | 自定义文本编辑器组件的实现方法及装置 | |
| JP5532811B2 (ja) | パーツカタログ作成支援装置、プログラム、およびパーツカタログ作成支援方法 | |
| JP7164039B2 (ja) | プラグイン生成装置、コントローラシステム、プラグイン生成方法、および、プラグイン生成プログラム | |
| CN114817379A (zh) | 基于Qunee的配置项关系可视化方法、系统、设备及介质 | |
| JP2013235508A (ja) | オブジェクト指向プログラム生成装置、その方法、プログラム | |
| US20220113993A1 (en) | Graphical user interfaces for exploring and interacting with distributed software applications | |
| JP4327162B2 (ja) | ３次元形状データから形状情報を取得するシステム、その方法、及びコンピュータソフトウエアプログラム | |
| JP7380376B2 (ja) | 情報処理装置およびラダープログラムを表示するためのプログラム |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination |