CN108196925A - 一种多图标多状态的管理系统及实施方法 - Google Patents

一种多图标多状态的管理系统及实施方法 Download PDF

Info

Publication number
CN108196925A
CN108196925A CN201711468173.6A CN201711468173A CN108196925A CN 108196925 A CN108196925 A CN 108196925A CN 201711468173 A CN201711468173 A CN 201711468173A CN 108196925 A CN108196925 A CN 108196925A
Authority
CN
China
Prior art keywords
icon
icons
style
state
file
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
Application number
CN201711468173.6A
Other languages
English (en)
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.)
DAREWAY SOFTWARE Co Ltd
Original Assignee
DAREWAY SOFTWARE 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 DAREWAY SOFTWARE Co Ltd filed Critical DAREWAY SOFTWARE Co Ltd
Priority to CN201711468173.6A priority Critical patent/CN108196925A/zh
Publication of CN108196925A publication Critical patent/CN108196925A/zh
Pending legal-status Critical Current

Links

Classifications

    • 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

Landscapes

  • Engineering & Computer Science (AREA)
  • General Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Human Computer Interaction (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • User Interface Of Digital Computer (AREA)

Abstract

本发明提供了一种多图标多状态的管理系统及实施方法，该系统包括图标采集模块，用于采集图标信息；图标转换模块，用于将采集到的图标按照规定的尺寸和格式进行转换；图标目录生成模块，用于将进行转换后的图标进行目录编制，生成图标目录；图标样式生成模块，用于生成图标样式的CSS文件；图标解析应用模块，用于生成图标解析使用的JS文件；图标文件打包模块，用于将已经形成的图标及目录、图标样式和图标解析规则文件以压缩包的形式打包并导出。开发人员将打包的文件添加到信息系统工程中，可进行图标调用，解决了在大型系统开发过程中多图标多状态下，管理混乱、图标不统一、样式不统一的问题，大大减少开发和图标维护工作量，提高工作效率。

Description

一种多图标多状态的管理系统及实施方法
技术领域
本发明涉及一种大型信息系统下的一种多图标状态管理的系统及实施方法，使用统一的多图标管理的系统及实施方法，解决大型系统中多种图标的多状态显示的问题。
背景技术
随着社会的发展，信息化发展越来越迅速，信息系统如数据处理系统、管理信息系统、决策支持系统、专家系统、办公自动化与虚拟办公室等有了长足的发展。随着信息系统越来越庞大，信息系统中用来作为功能入口、功能提示和装饰作用的图标越来越多。在当前信息系统的开发过程中，图标一般作为程序中的一部分，引用图标时需要在页面程序中标明图标所在的路径、图标的名称和图标的样式。这种方法适合图标数量少，图标状态少的数据库系统，若是信息系统较为庞大，图标数量太多，在系统的开发过程中容易造成管理混乱，图标不统一，样式不统一，开发代码量加大等问题。
发明内容
(一)解决的技术问题
针对现有技术的不足，本发明提供了一种多图标多状态管理的系统及实施方法，解决了在大型系统开发过程中多图标多状态下，管理混乱、图标不统一、样式不统一的问题，大大减少开发和图标维护工作量，提高工作效率。
(二)技术方案
为实现以上目的，本发明采用的技术方案是：
一种多图标多状态的管理系统，包括如下模块：
图标采集模块，用于采集图标信息；
图标转换模块，用于将采集到的图标按照规定的尺寸和格式进行转换；
图标目录生成模块，用于将进行转换后的图标进行目录编制，生成图标目录；
图标样式生成模块，用于生成图标样式的CSS文件；
图标解析应用模块，用于生成图标解析使用的JS文件；
图标文件打包模块，用于将已经形成的图标及目录、图标样式和图标解析文件以压缩包的形式打包并导出。
一种上述多图标多状态的管理系统的实施方法，包括如下步骤：
a.所述图标采集模块采集需要管理的图标：采集不同图标，然后定义上述不同图标的图标ID，所述不同图标包括状态不同的图标、种类不同的图标、格式不同的图标和目标尺寸不同的图标。
b.所述图标转换模块将采集的图标按照固定的格式进行转换：将采集到的图标按照目标尺寸的大小进行修改，修改后的图标的尺寸默认为12px*12px，同时修改图标的格式，目标端的默认格式为PNG格式。
c.所述图标目录生成模块生成图标管理目录：将进行转换后的图标按照图标ID和图标状态的名称进行目录编制，编制目录的顶层目录为icon，下一级目录为图标ID(ICONID，根据不同图标的ID不同生成多个文件夹)，最底层为图标状态的名称，以图标状态的英文命名，可以为普通状态(normal)、悬停状态(hover)和禁用状态(diasbled)。
d.所述图标样式生成模块生成图标管理样式：根据需要生成图标的样式信息，生成图标样式的CSS文件；所述图标的样式信息包括图标状态、图标路径、是否重复显示、图标对齐方式和样式优先级。
e.所述图标解析应用模块生成解析规则：根据图标管理目录和图标管理样式文件，生成文件的解析规则，规定前端页面调用图标的标签，解析规则根据标签进行处理，通过该处理过程完成图标的状态管理，生成JS文件。
f.所述图标文件打包模块打包并导出应用文件：将已经形成的图标及目录、图标样式和图标解析规则文件以压缩包的形式打包并导出。
g.开发人员图标使用，开发人员将打包的图标目录、图标样式和图标解析文件添加到信息系统工程中，使用解析规则规定的图标标签即可进行图标调用。
优选的，所述步骤a中，所述状态不同的图标可以自行定义一种或者几种，可涵盖所有的鼠标响应事件，包括普通状态、悬停状态、禁用状态、点击状态、双击事件；所述格式不同的图标包括JPG、JPEG或者PNG，系统推荐使用PNG格式；所述种类不同的图标包括功能入口图标、按钮类图标或装饰类图标。
进一步说，所述状态不同的图标可以为一种或多种状态，多种状态下的图标内容可以重复，命名不可重复。
优选的，所述步骤b中，修改图标的大小时，根据原图标的长宽比和目标图标的长宽比等比例缩放，若原图标的长宽比与目标图标不一致，则按照长度比等比例缩放。
优选的，所述步骤c、d中，生成图标管理目录和图标管理样式是根据采集到的图标的具体状态生成的。
进一步说，所述生成图标管理样式时，图标的样式可以自定义，样式信息可以进行增加或者修改。
(三)有益效果
本发明提供了一个大型信息系统开发过程中的一种多图标多状态的管理系统及实施方法，通过提前对图标类型、图标状态、图标样式进行统一的管理，生成标准的图标目录、图标样式和图标解析文件，开发人员在系统开发的过程中，通过图标的ID即可调用图标。对图标进行统一的管理，开发人员不需要对图标的大小、样式和状态进行定义，大大减少了工作量。对信息系统中所用到的图标进行统一的预处理，形成大小、格式一致的图标，减少图标维护的工作量。使用统一的图标管理方式，开发人员使用图标时可以根据推荐的图标使用情况进行图标的使用，减少了图标乱用、混用的问题。使用统一的样式文件，使得所有图标风格统一，避免信息系统风格混乱，增加美观度。
附图说明
图1为一种多图标多状态的管理系统；
图2为一种多图标多状态的管理系统的实施方法；
具体实施方式
为了使本技术领域人员更好的理解本发明方案，下面将结合附图进一步说明。
一种多图标多状态的管理系统，如图1所示，包括如下模块：
图标采集模块101，用于采集图标信息；
图标转换模块102，用于将采集到的图标按照规定的尺寸和格式进行转换；
图标目录生成模块103，用于将进行转换后的图标进行目录编制，生成图标目录；
图标样式生成模块104，用于生成图标样式的CSS文件；
图标解析应用模块105，用于生成图标解析使用的JS文件；
图标文件打包模块106，用于将已经形成的图标及目录、图标样式和图标解析文件以压缩包的形式打包并导出。
一种上述多图标多状态的管理系统的实施方法，包括如下步骤：
步骤201，所述图标采集模块101采集需要管理的图标：采集不同图标，然后定义上述不同图标的图标ID，所述不同图标包括状态不同的图标(如正常、悬停、禁用状态)、种类不同的图标、格式不同的图标和目标尺寸不同的图标。所述状态不同的图标可以自行定义一种或者几种，可涵盖所有的鼠标响应事件，包括普通状态、悬停状态、禁用状态、点击状态、双击事件；所述格式不同的图标包括JPG、JPEG或者PNG，系统推荐使用PNG格式；所述种类不同的图标包括功能入口图标、按钮类图标或装饰类图标。所述状态不同的图标可以为一种或多种状态，多种状态下的图标内容可以重复，命名不可重复。
步骤202，所述图标转换模块102将采集的图标按照固定的格式进行转换：将采集到的图标按照目标尺寸的大小进行修改，修改后的图标的尺寸默认为12px*12px，同时修改图标的格式，目标端的默认格式为PNG格式，该格式更适用于大型信息系统。修改图标的大小时，根据原图标的长宽比和目标图标的长宽比等比例缩放，若原图标的长宽比与目标图标不一致，则按照长度比等比例缩放。
步骤203，所述图标目录生成模块103生成图标管理目录：将进行转换后的图标按照图标ID和图标状态的名称进行目录编制，编制目录的顶层目录为icon，下一级目录为图标ID(ICONID，根据不同图标的ID不同生成多个文件夹)，最底层为图标状态的名称，图标状态与步骤201中设置的图标状态一致，以图标状态的英文命名，可以为普通状态(normal)、悬停状态(hover)和禁用状态(diasbled)。展示如下：
步骤204，所述图标样式生成模块104生成图标管理样式：根据需要生成图标的样式信息，生成图标样式的CSS文件；所述图标的样式信息包括图标状态、图标路径、是否重复显示、图标对齐方式和样式优先级。图标的样式可以自定义，样式信息可以进行增加或者修改。CSS文件部分内容如下：
步骤205，所述图标解析应用模块105生成解析规则：根据图标管理目录和图标管理样式文件，生成文件的解析规则，规定前端页面调用图标的标签，解析规则根据标签进行处理，通过该处理过程完成图标的状态管理，包括状态的切换和CSS样式的选择，生成JS文件，在JS文件中设定图标页面出发操作的类型。以PicButton作为识别标签，JS文件部分内容如下：
步骤206，所述图标文件打包模块106打包并导出应用文件：将已经形成的图标及目录、图标样式和图标解析规则文件以压缩包的形式打包并导出。
步骤207，开发人员图标使用，开发人员将打包的图标目录、图标样式和图标解析文件添加到信息系统工程中，在前台页面中使用调用图标时以PicButton作为识别标签，使用案例如下：
系统对picButton标签进行识别，根据disabled标签识别当前状态，disabled默认值为false，disabled标签值对应JS代码中的bFlag标志，当disabled标签的值为false时，标签处于普通状态(normal)，反正则处于禁用状态(disable)。
浏览器能够对标签内容进行解析，生成浏览器可以识别的HTML或者JS文件，根据图标ID(iconId)和标签状态获得CSS样式，浏览器根据CSS样式修改对应的标签状态。其中，标签的悬停状态(hover)直接使用css伪类实现，悬停状态(hover)由浏览器捕获，浏览器根据CSS伪类的内容直接应用CSS样式。
上述虽然结合附图对本发明的具体实施方式进行了描述，但并非是对本发明保护范围的限制，所属领域技术人员应该明白，在本发明的技术方案的基础上，本领域技术人员不需要付出创造性劳动即可做出的各种修改或变形仍在本发明的保护范围以内。

Claims (7)

1.一种多图标多状态的管理系统，其特征在于，包括如下模块：
图标采集模块，用于采集图标信息；
图标转换模块，用于将采集到的图标按照规定的尺寸和格式进行转换；
图标目录生成模块，用于将进行转换后的图标进行目录编制，生成图标目录；
图标样式生成模块，用于生成图标样式的CSS文件；
图标解析应用模块，用于生成图标解析使用的JS文件；
图标文件打包模块，用于将已经形成的图标及目录、图标样式和图标解析规则文件以压缩包的形式打包并导出。
2.一种如权利要求1所述的多图标多状态的管理系统的实施方法，其特征在于，包括如下步骤：
a.所述图标采集模块采集需要管理的图标：采集不同图标，然后定义上述不同图标的图标ID，所述不同图标包括状态不同的图标、种类不同的图标、格式不同的图标和目标尺寸不同的图标；
b.所述图标转换模块将采集的图标按照固定的格式进行转换：将采集到的图标按照目标尺寸的大小进行修改，修改后的图标的尺寸默认为12px*12px，同时修改图标的格式，目标端的默认格式为PNG格式；
c.所述图标目录生成模块生成图标管理目录：将进行转换后的图标按照图标ID和图标状态的名称进行目录编制，编制目录的顶层目录为icon，下一级目录为图标ID，最底层为图标状态的名称，以图标状态的英文命名；
d.所述图标样式生成模块生成图标管理样式：根据需要生成图标的样式信息，生成图标样式的CSS文件；所述图标的样式信息包括图标状态、图标路径、是否重复显示、图标对齐方式和样式优先级；
e.所述图标解析应用模块生成解析规则：根据图标管理目录和图标管理样式文件，生成文件的解析规则，规定前端页面调用图标的标签，解析规则根据标签进行处理，通过该处理过程完成图标的状态管理，生成JS文件；
f.所述图标文件打包模块打包并导出应用文件：将已经形成的图标及目录、图标样式和图标解析规则文件以压缩包的形式打包并导出；
g.开发人员图标使用，开发人员将打包的图标目录、图标样式和图标解析文件添加到信息系统工程中，使用解析规则规定的图标标签即可进行图标调用。
3.根据权利要求2所述的一种多图标多状态的管理系统的实施方法，其特征在于：所述步骤a中，所述状态不同的图标可以自行定义一种或者几种，可涵盖所有的鼠标响应事件，包括普通状态、悬停状态、禁用状态、点击状态、双击事件；所述格式不同的图标包括TIF、JPG、JPEG、PNG、BMP格式的图标；所述种类不同的图标包括功能入口图标、按钮类图标或装饰类图标。
4.根据权利要求3所述的一种多图标多状态的管理系统的实施方法，其特征在于：所述状态不同的图标可以为一种或多种状态，多种状态下的图标内容可以重复，命名不可重复。
5.根据权利要求2所述的一种多图标多状态的管理系统的实施方法，其特征在于：所述步骤b中，修改图标的大小时，根据原图标的长宽比和目标图标的长宽比等比例缩放，若原图标的长宽比与目标图标不一致，则按照长度比等比例缩放。
6.根据权利要求2所述的一种多图标多状态的管理系统的实施方法，其特征在于：所述步骤c、d中，生成图标管理目录和图标管理样式是根据采集到的图标的具体状态生成的。
7.根据权利要求6所述的一种多图标多状态的管理系统的实施方法，其特征在于：所述生成图标管理样式时，图标的样式可以自定义，样式信息可以进行增加或者修改。
CN201711468173.6A 2017-12-29 2017-12-29 一种多图标多状态的管理系统及实施方法 Pending CN108196925A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201711468173.6A CN108196925A (zh) 2017-12-29 2017-12-29 一种多图标多状态的管理系统及实施方法

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201711468173.6A CN108196925A (zh) 2017-12-29 2017-12-29 一种多图标多状态的管理系统及实施方法

Publications (1)

Publication Number Publication Date
CN108196925A true CN108196925A (zh) 2018-06-22

Family

ID=62585524

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201711468173.6A Pending CN108196925A (zh) 2017-12-29 2017-12-29 一种多图标多状态的管理系统及实施方法

Country Status (1)

Country Link
CN (1) CN108196925A (zh)

Cited By (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN111178044A (zh) * 2019-12-31 2020-05-19 中国银行股份有限公司 一种确定目标文本要素的方法及装置
CN111191174A (zh) * 2018-11-14 2020-05-22 北京京东尚科信息技术有限公司 雪碧图集成方法、系统及装置
CN114780182A (zh) * 2022-03-11 2022-07-22 北京百度网讯科技有限公司 切换图标风格的方法、装置、设备、介质及产品
CN115185581A (zh) * 2022-09-09 2022-10-14 统信软件技术有限公司 图标封装方法和装置、图标显示方法、计算设备
CN116679852A (zh) * 2023-08-03 2023-09-01 民航成都信息技术有限公司 一种项目图标的引用方法、装置、电子设备及介质

Citations (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN105373373A (zh) * 2014-08-29 2016-03-02 腾讯科技（深圳）有限公司 一种快速生成图标的方法和装置
CN105989098A (zh) * 2015-02-12 2016-10-05 阿里巴巴集团控股有限公司 图标包的生成方法及服务器、图标的处理方法及系统
CN107133035A (zh) * 2017-04-25 2017-09-05 东莞中国科学院云计算产业技术创新与育成中心 响应式网页生成方法和装置

Patent Citations (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN105373373A (zh) * 2014-08-29 2016-03-02 腾讯科技（深圳）有限公司 一种快速生成图标的方法和装置
CN105989098A (zh) * 2015-02-12 2016-10-05 阿里巴巴集团控股有限公司 图标包的生成方法及服务器、图标的处理方法及系统
CN107133035A (zh) * 2017-04-25 2017-09-05 东莞中国科学院云计算产业技术创新与育成中心 响应式网页生成方法和装置

Cited By (9)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN111191174A (zh) * 2018-11-14 2020-05-22 北京京东尚科信息技术有限公司 雪碧图集成方法、系统及装置
CN111178044A (zh) * 2019-12-31 2020-05-19 中国银行股份有限公司 一种确定目标文本要素的方法及装置
CN111178044B (zh) * 2019-12-31 2023-04-18 中国银行股份有限公司 一种确定目标文本要素的方法及装置
CN114780182A (zh) * 2022-03-11 2022-07-22 北京百度网讯科技有限公司 切换图标风格的方法、装置、设备、介质及产品
CN114780182B (zh) * 2022-03-11 2024-05-10 北京百度网讯科技有限公司 切换图标风格的方法、装置、设备、介质及产品
CN115185581A (zh) * 2022-09-09 2022-10-14 统信软件技术有限公司 图标封装方法和装置、图标显示方法、计算设备
CN115185581B (zh) * 2022-09-09 2022-12-02 统信软件技术有限公司 图标封装方法和装置、图标显示方法、计算设备
CN116679852A (zh) * 2023-08-03 2023-09-01 民航成都信息技术有限公司 一种项目图标的引用方法、装置、电子设备及介质
CN116679852B (zh) * 2023-08-03 2023-10-27 民航成都信息技术有限公司 一种项目图标的引用方法、装置、电子设备及介质

Similar Documents

Publication Publication Date Title
CN108196925A (zh) 一种多图标多状态的管理系统及实施方法
US9696972B2 (en) Method and apparatus for updating a web-based user interface
US20210150136A1 (en) Apparatuses, systems, and methods for providing a visual program for machine vision systems
US8078980B2 (en) User defined wire appearance indicating communication functionality in a graphical programming environment
US7317952B2 (en) Managing field devices having different device description specifications in a process control system
CN104216691B (zh) 一种创建应用的方法及装置
US8074177B2 (en) User defined wire appearance indicating data type in a graphical programming environment
US20040017392A1 (en) Web service control for use in a graphical programming environment
EP1546857A1 (en) System and method for making user interface elements known to an application and user
CN105094832A (zh) 一种所见即所得的动态生成用户界面的方法和系统
JP2004005568A (ja) レガシー・アプリケーションの高速ｇｕｉ体裁更新
CN109375914B (zh) 信息远程交互方法和系统
CN110096278B (zh) 一种可扩展的嵌入式人机接口工具实现方法
CN108369514B (zh) 用于可执行内容和可执行内容流创建的系统和方法
CN109583591A (zh) 用于简化的知识工程的方法与系统
CN112068911A (zh) 电子表单的生成方法、装置、系统、设备以及介质
Goldman et al. The ISI visual design editor generator
CN116627402B (zh) 一种基于React在低代码平台中实现自定义组件配置化的方法
CN110764762B (zh) 页面形成方法及装置、计算机可读存储介质、终端
Stroia et al. Web based monitoring of solar power systems
Lincke et al. Lively fabrik a web-based end-user programming environment
CN114003224A (zh) 一种基于taro实现低代码平台的方法
CN114594945A (zh) 高级弹窗选择框的生成方法、装置、系统、设备以及介质
CN112667210A (zh) 一种地理信息系统软件的模块化定制方法及装置
CN113468836A (zh) 数据处理方法、装置、存储介质和电子设备

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
RJ01 Rejection of invention patent application after publication

Application publication date: 20180622

RJ01 Rejection of invention patent application after publication