Method for converting svg configuration flow chart into dynamic interactive webpage on line

A flow chart and configuration technology, applied in website content management, network data retrieval, visual/graphic programming, etc., to reduce memory usage, facilitate front-end data interaction, and reduce learning costs

Pending Publication Date: 2021-10-29
ZHEJIANG SUPCON INFORMATION TECH CO LTD
View PDF0 Cites 2 Cited by
  • Summary
  • Abstract
  • Description
  • Claims
  • Application Information

AI Technical Summary

Problems solved by technology

[0004] The present invention mainly aims to solve the problem that the svg configuration flow chart edited online by the Internet of Things monitoring system and the svg configuration flow chart drawn offline by third-party software are converted online to dynamic interactive webpages, and provides an online svg configuration flow chart Method for turning dynamic interactive web pages

Method used

the structure of the environmentally friendly knitted fabric provided by the present invention; figure 2 Flow chart of the yarn wrapping machine for environmentally friendly knitted fabrics and storage devices; image 3 Is the parameter map of the yarn covering machine
View more

Image

Smart Image Click on the blue labels to locate them in the text.
Viewing Examples
Smart Image
  • Method for converting svg configuration flow chart into dynamic interactive webpage on line

Examples

Experimental program
Comparison scheme
Effect test

Embodiment 1

[0040]监测和控制办公楼的ACDEV1（1号空调设备）和ACDEV2（2号空调设备）空调设备运行状态，其中ACDEV（空调产品）属性点有ON（开机）、OFF（关机）、ERROR（错误故障）、TEMPERATURE（温度）和MODE(模式)。则svg组态流程图中包含有ACDEV（空调产品）的定位图ACDEV.png、MODE(模式)的自定义图形定位图MODE.png、温度显示文本框text.svg、标题传参文本框param.svg、温度设置输入框input.svg、温度设置按钮的自定义图形定位图SETBTN.png。

[0041]产品图形处理模块将上传的空调产品的图形保存至资源库，配置的表达式等，转存为json格式数据和JavaScript脚本。用户通过前端界面上传产品图形有ACDEV.png（空调的定位图）、ON.svg（开机状态图元）、OFF.svg（关机状态图元）和ERROR.svg(错误故障图元)，ON.svg图元对应配置表达式为"TAG.ERROR==0&&TAG.ON==1”即当空调设备的ERROR属性值为0且 ON属性值为1时，定位图的位置处显示ON.svg图元以下同理，OFF.svg图元对应配置表达式为"TAG.ERROR==0&&TAG.OFF==1”并设置为默认图元，用于当表达式都不满足的条件下，定位图位置展示的图元，ERROR.svg图元对应配置表达式为"TAG.ERROR==1”。产品图形处理模块将用户配置的表达式转JavaScript脚本并保存为ACDEV.js至transform文件夹下。

[0042]通用组件处理模块将上传的自定义图形保存至资源库，配置的表达式等转存为json格式数据和JavaScript脚本，根据文本框、输入框和多行文本框的配置生成svg文件，并将配置转存为json格式数据。通用组件处理模块，除了对通用组件功能类型进行分类，还支持用户对通用组件进行分组，以方便用户对通用组件管理。

[0043]用户通过前端界面上传自定义图形有MODE.png（模式的定位图）、COOL.svg（制冷模式图元）、HEAT.svg（制热模式图元）和DEFAULT.svg(未设置默认图元)，COOL.svg图元对应配置表达式为"value==1”即当被绑定设备属性点值为1时，定位图的位置处显示COOL.svg图元，以下同理，HEAT.svg图...

the structure of the environmentally friendly knitted fabric provided by the present invention; figure 2 Flow chart of the yarn wrapping machine for environmentally friendly knitted fabrics and storage devices; image 3 Is the parameter map of the yarn covering machine
Login to view more

PUM

No PUM Login to view more

Abstract

The invention discloses a method for converting an svg configuration flow chart into a dynamic interactive webpage on line, and aims to solve the problem of converting the svg configuration flow chart edited on line and the svg configuration flow chart drawn off line through third-party software of an Internet of Things monitoring system into the dynamic interactive webpage on line. The invention comprises: a product graphic processing module, which is used for storing an uploaded product graph in a resource library, and converting and storing an expression configured by a user; an universal component processing module, which is used for storing the uploaded self-defined graph to a resource library and converting and storing an expression configured by the self-defined graph; a public processing module, which is used for storing public styles and scripts of the dynamic interactive webpage; and an svg configuration flow chart processing module, which converts the static configuration flow chart into a dynamic interactive webpage on line. The method has the beneficial effects that the method supports positioning maps, primitives and svg configuration flow diagrams directly drawn by third-party software, and supports complex and diversified svg configuration flow diagrams.

Description

technical field [0001] The invention relates to the field of industrial monitoring, in particular to a method for converting an svg configuration flowchart online to a dynamic interactive webpage. Background technique [0002] In the traditional industrial SCADA system, most of them are in the mode of CS, and the process of drawing the configuration and graphic elements and the drawing of the monitoring diagram are intertwined, and the installation and learning costs are high. Because it is the mode of CS, the monitoring diagram page is also Cannot be viewed across platforms. However, with the continuous popularization of BS applications and mobile applications, traditional configuration software is also migrating to the Web side. With the rapid development of Web-related technologies in recent years, relevant standards such as HTML5, Javascript, CSS3, and WebGL have also been continuously improved. Among them, the use of svg technology can make monitoring images undistorte...

Claims

the structure of the environmentally friendly knitted fabric provided by the present invention; figure 2 Flow chart of the yarn wrapping machine for environmentally friendly knitted fabrics and storage devices; image 3 Is the parameter map of the yarn covering machine
Login to view more

Application Information

Patent Timeline
no application Login to view more
Patent Type & Authority Applications(China)
IPC IPC(8): G06F8/34G06F16/958
CPCG06F8/34G06F16/958
Inventor 林杨平杨振伟王陈淼姜雪明谷阳米振清
Owner ZHEJIANG SUPCON INFORMATION TECH CO LTD
Who we serve
  • R&D Engineer
  • R&D Manager
  • IP Professional
Why Eureka
  • Industry Leading Data Capabilities
  • Powerful AI technology
  • Patent DNA Extraction
Social media
Try Eureka
PatSnap group products

Browse by: Latest US Patents, China's latest patents, Technical Efficacy Thesaurus, Application Domain, Technology Topic.

© 2024 PatSnap. All rights reserved.Legal|Privacy policy|Modern Slavery Act Transparency Statement|Sitemap