CN104699749A - 一种自定义图形展示方法 - Google Patents

一种自定义图形展示方法 Download PDF

Info

Publication number
CN104699749A
CN104699749A CN201410827458.4A CN201410827458A CN104699749A CN 104699749 A CN104699749 A CN 104699749A CN 201410827458 A CN201410827458 A CN 201410827458A CN 104699749 A CN104699749 A CN 104699749A
Authority
CN
China
Prior art keywords
graph
loaded
methods
picture
exhibiting
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.)
Granted
Application number
CN201410827458.4A
Other languages
English (en)
Other versions
CN104699749B (zh
Inventor
彭连峰
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Qingdao Aolipuzhi Intelligent Industrial Technology Co ltd
Original Assignee
Qingdao Aolipu Automation and Control System Co Ltd
Priority date (The priority date 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 date listed.)
Filing date
Publication date
Application filed by Qingdao Aolipu Automation and Control System Co Ltd filed Critical Qingdao Aolipu Automation and Control System Co Ltd
Priority to CN201410827458.4A priority Critical patent/CN104699749B/zh
Publication of CN104699749A publication Critical patent/CN104699749A/zh
Application granted granted Critical
Publication of CN104699749B publication Critical patent/CN104699749B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/10—File systems; File servers
    • G06F16/16—File or folder operations, e.g. details of user interfaces specifically adapted to file systems
    • G06F16/168—Details of user interfaces specifically adapted to file systems, e.g. browsing and visualisation, 2d or 3d GUIs
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90—Details of database functions independent of the retrieved data types
    • G06F16/95—Retrieval from the web
    • G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
    • G06F16/986—Document structures and storage, e.g. HTML extensions

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Databases & Information Systems (AREA)
  • Data Mining & Analysis (AREA)
  • Physics & Mathematics (AREA)
  • General Engineering & Computer Science (AREA)
  • General Physics & Mathematics (AREA)
  • Human Computer Interaction (AREA)
  • Information Transfer Between Computers (AREA)
  • User Interface Of Digital Computer (AREA)

Abstract

本发明公开了一种自定义图形展示方法，包括以下步骤：将实际图形分解成小图片，打开自定义图形工具，将分解好的小图片加载到图形工具中，以及拖拽小图片、矢量图、文本框等组合成客户需要的实际图形，最后保存导出、加载到jsp中，用户可自定义设置图形、字体的大小、颜色、透明度、边框，并可复制、粘贴、回退、恢复等功能。可根据业务需求的变化自定义图形，包括：增加、删除控件、等比例缩放；设置字体、图形大小颜色等。可导入历史图形，在历史图形基础上编辑生成最新图形。

Description

一种自定义图形展示方法
技术领域
本发明涉及计算机技术领域，特别涉及一种自定义图形展示方法。
背景技术
现有技术中，web应用对于工厂的实时监控和办公的流程图的需求通常采用的是硬编码的方式，即在网页上绘制html。每个监控的数据点配置特定的ID，并根据监控的对象的状态发生变化来实时刷新对应的图片或者数值。
然而，这种硬编码的方式仅适用于单个工厂，且存在系统中监控页面很少、分辨率统一、无后续需求的情况。在遇到多家工厂的推广、系统监控界面较多、需要再加监控点的情况时，将带来很大的工作量，并且维护成本也很高。此外在分辨率发生变化时，页面会出现变形。
西门子的Wincc和一些国外致力于工控软件的公司都有自己的组态工具，但大多数组态工具只能实现CS方面，很少在WEB上展示出客户想要的效果，本发明可在CS或WEB上同时展示，并支持java平台。
发明内容
本发明针对上述问题，本发明所要解决的技术问题是提供一种可根据业务需求的变化自定义图形的展示方法，为实现本发明的上述目的，采取如下技术方案：
一种自定义图形展示方法，包括以下步骤：
步骤A：将实际图形分解成小图片；
步骤B：打开自定义图形工具；
步骤C：将分解好的小图片加载到图形工具中；
步骤D：拖拽小图片、矢量图、文本框等组合成客户需要的实际图形
步骤E：保存导出、加载到jsp中
其中，所述步骤C在XML中配置。
其中，所述步骤D中，每个图片矢量图和文本框的组件通过AWT的DragGestureListener来实现自动拖拽、复制功能，在每一个组件上加上此监听事件；并且在此基础上加入mouseListener来支持双击事件实现可以对任何的组件设置ID。
其中，所述步骤E中，将导出的xml采用mxgraph技术加载到网页中，并通过Ajax异步查询数据，并展示在页面上。
本发明具有如下的有益效果：
用户可自定义设置图形、字体的大小、颜色、透明度、边框，并可复制、粘贴、回退、恢复等功能。可根据业务需求的变化自定义图形，包括：增加、删除控件、等比例缩放；设置字体、图形大小颜色等。可导入历史图形，在历史图形基础上编辑生成最新图形。
附图说明
图1示出本发明的自定义图形展示方法的主要步骤流程；
图2为本发明具体实施例客户所要实现的配电结构图；
图3为本发明具体实施例中美工分解的管路图片；
图4示出本发明具体实施例中运行工具后的图；
图5示出本发明具体实施例对应步骤D的工具运行图；
图6示出本发明具体实施例对应步骤E的工具运行图；
具体实施方式
下面结合具体实施方式和附图说明本发明以使本领域技术人员对发明有更为清楚的理解。
参见附图1，本发明自定义图形展示方法采用JAVA语言实现，包括四个步骤：
步骤A:将实际图形分解成小图片；
步骤B：打开自定义图形工具；
步骤C:将分解好的小图片加载到图形工具中。此步骤只需要在xml中配置上即可，如：<images>
<image name＝"水表"icon＝"images/network/shui.png"/>
<image name＝"bj"icon＝"images/network/gds.png"/>
<image name＝"流量计"icon＝"images/network/liuliangji.png"/>
<image name＝"粗线"icon＝"images/network/yline.png"/>
<image name＝"竖粗线"icon＝"images/network/zline.png"/>
<image name＝"粗管道"icon＝"images/network/cgd.png"/>
<image name＝"横向管道"icon＝"images/network/hx.png"/>
<image name＝"竖向管道"icon＝"images/network/sx.png"/>
<image name＝"左拐小"icon＝"images/network/zx.png"/>
</images>
然后采用jdom读取XML的方式加载到工具的左侧的JList中去。
步骤D：拖拽小图片、矢量图、文本框等组合成客户需要的实际图形,每个图片矢量图和文本框的组件通过AWT的DragGestureListener来实现自动拖拽、复制等功能，在每一个组件上加上此监听事件，如：DragGestureListener dragGestureListener＝newDragGestureListener(){public void dragGestureRecognized(DragGestureEvente){e.startDrag(null,mxConstants.EMPTY_IMAGE,new Point(),t,null)；}}；DragSourcedragSource＝newDragSource()；
dragSource.createDefaultDragGestureRecognizer(entry,DnDConstants.ACTION_COPY,dragGestureListener)；并且在此基础上加入mouseListener来支持双击事件实现可以对任何的组件设置ID，这样，图形在展示数据的时候可以通过设置ID的value实现实时的数据刷新，图形画完后采用DataOutputStream写入到xml文件中；
步骤E：保存导出、加载到jsp中。将导出的xml采用mxgraph技术加载到网页中，并通过Ajax异步查询数据，并展示在页面上
下面具体通过一个例子详细说明上面步骤。
步骤A：如客户想实现工厂内的配电结构图如图2所示，美工将该图分解成小的管路图片截图如图3所示；
步骤B、C：将图片路径放到工具指定的包下，运行工具后如图4所示；
步骤D：拖拽左边选择区域的图片和矢量图、文本框等至右边，可按上面的工具栏设置字体大小和要展示实时数据的控件ID，如图5所示；
步骤E：设置完成后，保存，导出图片，并加载到JSP中，jsp页面通过调用AJAX到后台数据库查询数据后现在到指定的ID控件上；
在本发明中，用户可自定义设置图形、字体的大小、颜色、透明度、边框，并可复制、粘贴、回退、恢复等功能。客户可根据业务需求的变化自定义图形，包括：增加、删除控件、等比例缩放；设置字体、图形大小颜色等。可导入历史图形，在历史图形基础上编辑生成最新图形。
对于本领域技术人员而言，显然本发明不限于上述示范性实施例的细节，而且在不背离本发明的精神或基本特征的情况下，能够以其他的具体形式实现本发明。因此，无论从哪一点来看，均应将实施例看作是示范性的，而且是非限制性的，本发明的范围由所附权利要求而不是上述说明限定，因此旨在将落在权利要求的等同要件的含义和范围内的所有变化囊括在本发明内。

Claims (4)

1.一种用于工厂实时监控的流程图的自定义图形展示方法，包括以下步骤：
步骤A：将实际图形分解成小图片；
步骤B：打开自定义图形工具；
步骤C：将分解好的小图片加载到图形工具中；
步骤D：拖拽小图片、矢量图、文本框等组合成客户需要的实际图形；
步骤E：保存导出、加载到jsp中。
2.根据权利要求1所述的展示方法，其中，所述步骤C在XML中配置。
3.根据权利要求1所述的展示方法，其中，所述步骤D中，每个图片矢量图和文本框的组件通过AWT的DragGestureListener来实现自动拖拽、复制功能，在每一个组件上加上此监听事件；并且在此基础上加入mouseListener来支持双击事件实现可以对任何的组件设置ID。
4.根据权利要求1所述的展示方法，其中所述步骤E中，将导出的xml采用mxgraph技术加载到网页中，并通过Ajax异步查询数据，并展示在页面上。
CN201410827458.4A 2014-12-26 2014-12-26 一种自定义图形展示方法 Active CN104699749B (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201410827458.4A CN104699749B (zh) 2014-12-26 2014-12-26 一种自定义图形展示方法

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201410827458.4A CN104699749B (zh) 2014-12-26 2014-12-26 一种自定义图形展示方法

Publications (2)

Publication Number Publication Date
CN104699749A true CN104699749A (zh) 2015-06-10
CN104699749B CN104699749B (zh) 2018-02-16

Family

ID=53346870

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201410827458.4A Active CN104699749B (zh) 2014-12-26 2014-12-26 一种自定义图形展示方法

Country Status (1)

Country Link
CN (1) CN104699749B (zh)

Cited By (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN107832460A (zh) * 2017-11-28 2018-03-23 航天天绘科技有限公司 基于svg的实时显示卫星测控数据的图形页面控制方法
CN111552242A (zh) * 2020-04-18 2020-08-18 青岛奥利普自动化控制系统有限公司 一种生产线管理设备及方法

Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
WO2010099177A2 (en) * 2009-02-24 2010-09-02 Virginia Commonwealth University System and method for constructing an application using distributed functionalities
CN102368196A (zh) * 2011-10-02 2012-03-07 上海量明科技发展有限公司 客户端内容发送窗口中编辑动态图片的方法、终端及系统
CN102609966A (zh) * 2010-10-22 2012-07-25 微软公司 通过图形对象表示数据
CN103257800A (zh) * 2012-02-19 2013-08-21 上海博路信息技术有限公司 一种基于图片组合方式的解锁方法
CN103413002A (zh) * 2013-08-20 2013-11-27 山东中创软件商用中间件股份有限公司 一种拓扑图编辑后方法及拓扑图编辑器

Patent Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
WO2010099177A2 (en) * 2009-02-24 2010-09-02 Virginia Commonwealth University System and method for constructing an application using distributed functionalities
CN102609966A (zh) * 2010-10-22 2012-07-25 微软公司 通过图形对象表示数据
CN102368196A (zh) * 2011-10-02 2012-03-07 上海量明科技发展有限公司 客户端内容发送窗口中编辑动态图片的方法、终端及系统
CN103257800A (zh) * 2012-02-19 2013-08-21 上海博路信息技术有限公司 一种基于图片组合方式的解锁方法
CN103413002A (zh) * 2013-08-20 2013-11-27 山东中创软件商用中间件股份有限公司 一种拓扑图编辑后方法及拓扑图编辑器

Cited By (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN107832460A (zh) * 2017-11-28 2018-03-23 航天天绘科技有限公司 基于svg的实时显示卫星测控数据的图形页面控制方法
CN111552242A (zh) * 2020-04-18 2020-08-18 青岛奥利普自动化控制系统有限公司 一种生产线管理设备及方法

Also Published As

Publication number Publication date
CN104699749B (zh) 2018-02-16

Similar Documents

Publication Publication Date Title
WO2017076259A1 (zh) 一种流程设计方法、客户机、服务器侧装置及系统
CN104410720B (zh) 一种基于web图形的实时监控平台系统及其方法
CN104951996A (zh) 基于可缩放矢量图形的配电网运行监测方法
WO2015188626A1 (zh) 在移动终端上实时查看电力系统单线图的方法
US20110252335A1 (en) Zooming in a Web Browser
CN112464119A (zh) 一种基于web端的SCADA在线组态编辑方法
CN109254771A (zh) 一种监控页面生成方法和装置
CN106126489A (zh) 一种报告文件动态图表编辑方法及系统
EP4058886A1 (en) Computerized system and method for a distributed low-code / no-code computing environment
CN103019683A (zh) 一种动态配置页面视图的方法
CN111949256A (zh) 网页实时预览编辑方法、装置、设备及存储介质
CN101777072A (zh) 一种图片热区的生成装置、方法和应用系统
CN102867030A (zh) 一种机房环境及布局的准三维表现方法
CN103473041A (zh) 一种可视化的数据处理方法及系统
CN104699749A (zh) 一种自定义图形展示方法
CN103593345A (zh) 网页流程图编辑方法及系统
CN104834715A (zh) 一种基于部件和容器的网站生成方法及系统
US9973410B2 (en) Notifying original state listeners of events in a domain model
CN113111632A (zh) 电子稿纸的可视化配置方法、装置、设备及介质
CN103795799A (zh) 一种远程监控方法与系统
CN109284105A (zh) 一种基于可编程脚本的svg组态显示方法及系统
Adesanwo et al. Smart alarming for intelligent surveillance of Electrical Submersible Pump Systems
CN102929186B (zh) 一种模型系统与Web监控画面的数据通信实现方法
CN204334631U (zh) 一种基于web图形的实时监控装置
JP6776041B2 (ja) 表示制御装置及び表示制御プログラム

Legal Events

Date Code Title Description
C06 Publication
PB01 Publication
C10 Entry into substantive examination
SE01 Entry into force of request for substantive examination
GR01 Patent grant
GR01 Patent grant
PE01 Entry into force of the registration of the contract for pledge of patent right

Denomination of invention: Custom graph presentation method

Effective date of registration: 20190530

Granted publication date: 20180216

Pledgee: Qingdao high technology financing Company limited by guarantee

Pledgor: QINGDAO AOLIPU AUTOMATION AND CONTROL SYSTEM Co.,Ltd.

Registration number: 2019990000484

PE01 Entry into force of the registration of the contract for pledge of patent right
PC01 Cancellation of the registration of the contract for pledge of patent right

Date of cancellation: 20200616

Granted publication date: 20180216

Pledgee: Qingdao high technology financing Company limited by guarantee

Pledgor: QINGDAO AOLIPU AUTOMATION AND CONTROL SYSTEM Co.,Ltd.

Registration number: 2019990000484

PC01 Cancellation of the registration of the contract for pledge of patent right
PE01 Entry into force of the registration of the contract for pledge of patent right

Denomination of invention: A method of user defined graphic display

Effective date of registration: 20210407

Granted publication date: 20180216

Pledgee: Qingdao high technology financing Company limited by guarantee

Pledgor: QINGDAO AOLIPU AUTOMATION AND CONTROL SYSTEM Co.,Ltd.

Registration number: Y2021990000305

PE01 Entry into force of the registration of the contract for pledge of patent right
PC01 Cancellation of the registration of the contract for pledge of patent right

Date of cancellation: 20220401

Granted publication date: 20180216

Pledgee: Qingdao high technology financing Company limited by guarantee

Pledgor: QINGDAO AOLIPU AUTOMATION AND CONTROL SYSTEM Co.,Ltd.

Registration number: Y2021990000305

PC01 Cancellation of the registration of the contract for pledge of patent right
PE01 Entry into force of the registration of the contract for pledge of patent right

Denomination of invention: A custom graphic display method

Effective date of registration: 20220407

Granted publication date: 20180216

Pledgee: Qingdao high technology financing Company limited by guarantee

Pledgor: QINGDAO AOLIPU AUTOMATION AND CONTROL SYSTEM Co.,Ltd.

Registration number: Y2022370010047

PE01 Entry into force of the registration of the contract for pledge of patent right
CP03 Change of name, title or address

Address after: 266000 6D, building 1, No. 169 Songling Road, Laoshan District, Qingdao, Shandong Province

Patentee after: Qingdao aolipuzhi Intelligent Industrial Technology Co.,Ltd.

Address before: East 5th Floor, City Home Business Hotel, No. 7 Xianxialing Road, Laoshan District, Qingdao City, Shandong Province, 266000

Patentee before: QINGDAO AOLIPU AUTOMATION AND CONTROL SYSTEM Co.,Ltd.

CP03 Change of name, title or address
PC01 Cancellation of the registration of the contract for pledge of patent right

Date of cancellation: 20230406

Granted publication date: 20180216

Pledgee: Qingdao high technology financing Company limited by guarantee

Pledgor: QINGDAO AOLIPU AUTOMATION AND CONTROL SYSTEM Co.,Ltd.

Registration number: Y2022370010047

PC01 Cancellation of the registration of the contract for pledge of patent right