CN102902527B - 基于web的嵌入式设备中仿真面板实现方法 - Google Patents

Abstract

本发明涉及网络管理技术。本发明解决了目前没有成熟的基于WEB的嵌入式设备管理系统中高仿真面板实现方法的问题，提供了一种基于WEB的嵌入式设备中仿真面板实现方法，其技术方案可概括为：首先得到仿真面板配置文件，然后针对面板需要的数据信息访问设备，得到设备数据，再根据仿真面板配置文件和设备数据构建面板逻辑树，并构建层次关系，然后根据面板逻辑树，通过创建HTML的元素生成仿真面板，并在浏览器上显示，再添加控制事件，最后提供修改端口状态的接口，业务模块通过调用接口完成面板端口状态的修改。本发明的有益效果是：仿真程度高，且其组件所需要的存储空间较小，适用于基于WEB的嵌入式设备中的仿真面板显示。

Description

基于WEB的嵌入式设备中仿真面板实现方法

技术领域

本发明涉及网络管理技术，特别涉及基于WEB的嵌入式设备中仿真面板实现方法。

背景技术

对于单台的网络通信设备，基于WEB的嵌入式设备管理是一种常用的管理方法和系统。对于基于WEB的嵌入式设备管理系统，拥有高仿真的设备面板更方便网络管理员直观的监控网络通信设备状态，以及网络业务配置。但是高仿真的设备面板的绘制过程往往需要大量的高清图片，这些图片会占用网络通信设备的较大存储空间，特别对于机架式网络通信设备，可插入板卡类型和数量均比较多，在WEB上完成面板绘制、呈现和性能均有一定的技术难度，因此现有技术中没有成熟的基于WEB的嵌入式设备管理系统中高仿真面板实现方法。

发明内容

本发明的目的就是克服目前没有成熟的基于WEB的嵌入式设备管理系统中高仿真面板实现方法的缺点，提供一种基于WEB的嵌入式设备中仿真面板实现方法。

本发明解决其技术问题，采用的技术方案是，基于WEB的嵌入式设备中仿真面板实现方法，其特征在于，包括以下步骤：

步骤1.准备绘制面板所需的仿真小图片，定义面板信息的位置、大小及使用仿真小图片的数据信息，得到仿真面板配置文件；

步骤2.针对面板需要的数据信息访问设备，解析设备返回的数据生成端口和插卡的对象数组，得到设备数据；

步骤3.根据仿真面板配置文件和设备数据构建面板逻辑树，逻辑树包括底板、插卡、端口及静态元素的位置、高度、宽度以及使用图片或者文本串，并构建层次关系；

步骤4.根据面板逻辑树，通过创建HTML的元素生成仿真面板，并显示在WEB浏览器上；

步骤5.对仿真面板上的HTML元素添加控制事件；

步骤6.提供修改端口状态的接口，业务模块通过调用所述接口完成面板端口状态的修改。

进一步的，步骤1中，所述面板信息包括底板、插卡和端口。

再进一步的，步骤1包括以下步骤：

步骤1A.准备面板信息的仿真图片；

步骤1B.抽取面板信息的仿真图片中的大面积颜色值及其对应的矩形区域，拆分面板信息的仿真图片中的静态图像，生成节点图像；

步骤1C.将拆分出的节点图像合并为水平平铺图片、垂直平铺图片及不平铺图片；

步骤1D.将水平平铺图片、垂直平铺图片、不平铺图片及抽取的颜色值与设备面板建立对应关系，构建面板配置文件。

具体的，步骤1D包括以下步骤：

步骤1D1.构建底板的配置信息，至少包括底板的宽度、高度及背景色参数；

步骤1D2.在底板的配置信息上构建底板上静态元素节点，静态元素节点包括底板的边框、螺丝钉及电源插头，这些静态元素节点为一个数组，数组中包含多个元素，每个元素包含类型、使用图片、默认颜色、元素大小、相对底板位置、图片中图像位置、文本信息及字体信息；

步骤1D3.在底板的配置信息上构建底板上插槽的节点，插槽的节点中包括底板上插卡的数量、位置信息、插槽类型及与设备上读取插卡数据的索引对应关系；

步骤1D4.构建每种插卡类型的配置信息，至少包括插卡的大小、插卡的类型及背景色参数；

步骤1D5.在插卡的配置信息上构建插卡上静态元素节点，静态元素节点包括插卡的边框，这些静态元素节点为一个数组，数组中包含多个元素，每个元素包含类型、使用图片、默认颜色、元素大小、相对插卡的位置、图片中图像位置、文本信息及字体信息；

步骤1D6.在插卡的配置信息上构建插卡上的端口节点，端口节点中至少包括与端口定义的关系、端口所在的位置及端口的名称；

步骤1D7.构建端口配置信息，至少包括端口大小、端口文本大小、文本字体及状态图片。

再进一步的，步骤1D6中，所述端口节点中还包括端口显示文本数据及端口文本的位置。

具体的，步骤1D7中，所述状态图片指：端口每种状态所使用图片、图片中端口状态图像位置。

再进一步的，步骤1D3和步骤1D4之间还包括以下步骤：

步骤1D8.在底板的配置信息上构建底板上的端口节点，端口节点中至少包括与端口定义的关系、端口所在的位置及端口的名称。

具体的，步骤1D8中，所述状态图片指：端口每种状态所使用图片、图片中端口状态图像位置。

再进一步的，步骤3包括以下步骤：

步骤3A.加载当前设备的面板配置文件；

步骤3B.计算面板的高度或宽度，及显示高度或宽度；

步骤3C.生成面板节点对象实例，至少包括节点所使用图片、位置及大小；

步骤3D.根据插卡的高度宽度及未插卡信息计算节点对象的显示位置；

步骤3E.组织各个节点对象间的关系，生成面板逻辑树。

具体的，步骤3还包括以下步骤：

步骤3F.生成设备面板翻页模型。

再进一步的，步骤5中，所述控制事件包括底板的拖拽使用的鼠标事件、端口选中鼠标事件及端口拖拽触发事件。

包括以下步骤：

步骤5A.设置底板的mousedown事件，以实现拖拽翻页功能；

步骤5B.在底板的mousedown事件中修改document的事件，以实现拖拽翻页功能；

步骤5C.document事件处理拖拽翻页效果和功能；

步骤5D.设置端口的mousedown和mousemove事件，以完成拖放功能；

步骤5E.在端口的mousedown中通知拖放组件准备拖放；

步骤5F.在端口的mousemove中通知拖放组件开始拖放。

本发明的有益效果是，通过上述基于WEB的嵌入式设备中面板实现的方法，可以看出其存储的不是完整的高清图片，而是压缩后的仿真小图片，所存储图片非常小，且达到的仿真程度高，和真实设备基本一致，且其组件所需要的存储空间较小，另外，采用标准HTML标签，浏览器可以进行兼容，不需要第三方插件，且仿真面板的加载速度较快。

附图说明

图1是本发明的基于WEB的嵌入式设备中仿真面板实现系统的结构图。

图2是本发明的仿真面板生成总体流程图。

图3是本发明的仿真面板配置文件生成流程图。

图4是本发明的面板逻辑树生成流程图。

图5是本发明的仿真面板翻页控制流程图。

图6是本发明的仿真面板端口拖放控制流程图。

具体实施方式

下面结合实施例及附图，详细描述本发明的技术方案。

本发明的仿真面板生成总体流程图如图2。本发明的基于WEB的嵌入式设备管理系统中仿真面板实现方法中，首先准备绘制面板所需的仿真小图片，定义面板信息的位置、大小及使用仿真小图片的数据信息，得到仿真面板配置文件，然后针对面板需要的数据信息访问设备，解析设备返回的数据生成端口和插卡的对象数组，得到设备数据，再根据仿真面板配置文件和设备数据构建面板逻辑树，逻辑树包括底板、插卡、端口及静态元素的位置、高度、宽度以及使用图片或者文本串，并构建层次关系(层次关系是指各个元素间的所属关系,比如底板上有插卡,插卡上有端口,底板上有端口,是指这样的层次关系)，然后根据面板逻辑树，通过创建HTML的元素生成仿真面板，并显示在WEB浏览器上，最后对仿真面板上的HTML元素添加控制事件，且提供接口修改端口状态，业务模块能够通过这些接口完成面板的状态修改。

实施例

本发明实施例中，实现基于WEB的嵌入式设备中仿真面板实现系统被分成多个模块，通过模块之间的协同来完成面板的绘制和事件控制，其系统结构图如图1，包括：

面板配置模块：该模块完成仿真面板配置文件的生成。在设备上，存储空间一般比较小，如果使用大图片和多个图片将会对设备造成压力，在该模块中需要缩小图片大小和占用的空间，再将绘制面板的资源文件组织成面板绘制的配置文件，在该配置文件中说明设备面板的界面状态，具体的组成将在下述解释图3仿真面板配置文件生成流程图中详细说明；

设备访问模块：该模块完成设备的访问，读取设备的数据，将设备数据组织成绘制面板需要的数据信息，本发明中需要使用的设备的插卡和端口的数据，在本模块中需要解析出当前设备有哪些插卡、插卡对应的插槽、有哪些端口、端口的模式(是光口还是电口)，提供给面板绘制组件的是两个对象数组：

1、插卡对象中需要包含关键数据项有：插卡的ID、插卡的类型、插卡的插槽位置；

2、端口对象中需要包含关键数据项有：端口名称、端口的模式、端口的状态；

端口状态：在本发明中端口可以以多种状态呈现在用户面前，在面板配置模块中会定义端口的状态类别，在本模块中提供端口状态，使用模块就可以根据自己的需要来呈现需要的端口状态，比如：红色(代表down)、绿色(代表up)、灰色(代表非启用端口)。

面板逻辑树模型：该模块属于面板的数据结构模型，没有具体的逻辑处理过程，在该模型中说明设备面板的底板、插卡和端口的关系和界面显示位置以及大小和显示的状态，在该模块中还需要包含面板页面的数据模型对象，给翻页模块提供数据支持；

1、面板逻辑树中包含：

a)首先是面板的底板(或者说机筐)；

b)在底板上有静态的螺丝钉、电源插头及电源按钮等(可能还有很多,只要是设备上有的图案都包含在这里面,比如:丝印,商标…)；

c)在底板上还有插卡的节点；

d)在插卡的节点上有静态的螺丝钉等；

e)在插卡的节点上有端口的节点；

f)端口节点包含端口的具体状态；

2、在面板逻辑树的各个节点中包含如下关键属性：

a)节点对应HTML元素的位置；

b)节点对应HTML元素的大小；

c)节点使用的图片资源和资源位置；

d)在端口节点中还包含选中、未选中、各种状态的图片资源以及资源位置；

3、翻页组件中包含：

a)面板翻页的方向：横向还是纵向；

b)面板的总页数；

c)面板当前显示的页；

d)面板各个页的高度或者宽度信息；

仿真面板绘制模块：在有了面板逻辑树模型后，就能够在WEB中绘制出面板，本模块就是结合面板逻辑树模型在WEB中绘制面板，绘制过程比较简单，将面板逻辑树模型中的节点按照模型中的层次关系在WEB创建HTML元素，可以按照以下步骤绘制：

1、绘制底板的HTML元素；

2、绘制底板上的静态螺丝钉等HTML元素；

3、在底板上绘制插卡；

4、绘制插卡上的静态螺丝钉等HTML元素；

5、绘制插卡上的端口HTML元素；

6、绘制HTML元素都是在WEB中创建HTML标签、设置标签的位置、宽度、高度、背景图；

事件控制模块：在仿真面板绘制完成后，在视觉上有了面板的显示效果，在本模块更进一步对面板元素的进行事件控制，本发明中完成面板翻页和端口拖拽的控制，详细过程参见下述解释图5仿真面板翻页控制流程图和图6仿真面板端口拖放控制流程图的具体描述；

设备仿真面板组件：该模块是组件的统一接口和所有子模块的逻辑关联部分，在上面描述的各个模块中都有面板的部分功能，这些功能通过该模块进行关联，具体的实现过程参见图2；

如图2所示，仿真面板的绘制和控制过程需要六个大的步骤完成：

准备仿真面板配置：在该步骤中需要完成仿真面板配置文件，需要对资源文件进行进一步的拆分合并处理来减少存储空间，再通过配置文件定义设备面板的具体界面状态，该步骤比较复杂，将在下述解释图3仿真面板配置文件生成流程图时详细说明；

设备数据访问：要绘制设备的面板，需要设备的数据支持，在设备面板配置文件中说明了设备面板具体界面状态，但是设备具体有哪些插卡、哪些端口都需要从设备上才能知道，在本步骤中可以采用HTTP请求，通过AJAX的方式取得设备上的数据，在访问设备时可以采用设备交付命令SHELL的方式或者简单网络管理协议SNMP的方式读取设备的数据，读取设备数据后，构建插卡对象数据和端口对象数组；

构建面板逻辑树模型：该步骤需要构建设备面板的逻辑结构树，以底板为起始节点，端口为终结节点构建一颗树，具体构建过程参见后面的逻辑树生成过程；

绘制设备面板：在有了面板逻辑树模型后，就能够在WEB中绘制出面板，本步骤就是结合面板逻辑树模型在WEB中绘制面板，绘制过程比较简单，将面板逻辑树模型中的节点按照模型中的层次关系在WEB创建HTML元素，可以按照以下步骤绘制：

1、绘制底板的HTML元素；

2、绘制底板上的静态螺丝钉等HTML元素；

3、在底板上绘制插卡；

4、绘制插卡上的静态螺丝钉等HTML元素；

5、绘制插卡上的端口HTML元素；

绘制HTML元素都是在WEB中创建HTML标签、设置标签的位置、宽度、高度、背景图；

添加面板事件控制：在本步骤中，需要完成翻页和端口拖放的事件控制，具体过程在翻页事件控制和端口拖放事件控制中详细说明；

设备面板端口状态：本步骤是可选步骤，是由用户模块触发，如果用户模块需要修改端口状态，调用面板组件的接口来修改面板的端口的状态；

如图3所示，本流程中完成仿真面板配置文件的生成：

准备设备真实面板图片：准备各个面板信息的真实图片，这个工作一般由美工完成，在项目中，需要准备面板的底板图片、设备支持的插卡的图片、设备支持的各个端口的图片以及端口对应的多种状态的图片；这里所说的每张图片都是一个高保真的真实设备图片；

拆分面板真实图片：对于端口来说，不需要进行拆分，对于底板和插卡来说，先来抽取边框，对于边框首先抽取四个角，生成四张很小的图片(可能所有插卡的四个角的图片都一样)，去掉四个角后，上下边框就可以由宽度为1的图片进行平铺得到，左右边框就可以由高度为1的图片进行平铺得到，这样边框图片所占的空间就很小了。拆分了这些边框后，我们再对其它部位的静态图象进行拆分(比如螺丝钉、电源按钮等等)，将这些图片都单独的放在独立的文件中。

合并图片：根据拆分出的很多小图片，在本步骤中，将这些小图片以图像的形式按照拆分方式合并为三张图片：水平平铺的图片，将上面提到的所有上下边框的图片放到这一张图片中；垂直平铺的图片，将上面提到的所有左右边框的图片放到这一张图片中；不平铺的图片，将上面提到的静态图象、各个状态的端口图片都放到这样张图片中。

记录合并图片的位置信息：生成上述三张图片的同时需要记录下放入的位置，放到哪张图片中，以及这些图像是需要如何平铺。

构建仿真面板配置文件：准备上面三张图片后，将这三张图片和抽取的颜色值需要与设备面板建立对应的关系，构建仿真面板配置文件，包含以下详细步骤：

1.定义设备的底板背景色，在配置文件中首先定义设备面板的宽度，高度，背景色参数；

例如我们采用JSON的数据格式可以定义如下：

2.定义设备底板底板静态元素，这里的静态元素包含了底板的边框、螺丝钉及电源插头等，这里定义的是一个数组，是多个元素，数组中的每个元素包含类型、使用图片、默认颜色、元素大小、相对底板位置、图片中图象位置、文本信息、字体信息等等(这些信息根据情况而定)，比如，我这里定义底板的边框和部分螺丝钉，定义如下(在本例子中fixy.jpg为垂直平铺的图片、fixx.jpg为水平平铺的图片、fixed.jpg为不平铺的图片)，在例子定义中有positions和sizes，主要是为了同一个图片在多个地方使用，对此还可以自由定义positions和sizes的方式：

3.该步骤为一个可选步骤，如果设备底板上就有端口，需要在这个地方定义，具体定义方式和插卡上的端口定义一样，请参见下述相关章节。

4.定义设备底板上插槽位置和索引，底板上接下来就是插卡的信息，底板上的插卡插入的位置和插卡的类型也是动态的，在本步骤中，只需要说明底板上可以插入多少张插卡、插槽的位置信息、插槽类型、以及和设备上读取插卡数据的索引对应关系即可，假设设备上能够插入三张插卡，可以定义如下：

5.定义各个插卡的基本信息，通过上面定义了底板的信息，现在来进行插卡的定义，插卡的定义在配置文件中和底板定义平级，只需要定义出各个插卡的面板信息，首先定义插卡的基本信息，需要包含：插卡的类型(和设备上的卡的类型对应)、插卡的大小、背景色等，和底板定义一样，可以参照如下例子：

6.定义插卡的静态元素，与底板的静态元素定义相同，这里不再描述。

定义插卡的端口信息，在设备的插卡上有哪些端口，需要在插卡中进行定义，插卡上对应的端口是多个，需要定义成数组的类型，每个元素需要包含：与端口定义的关系、端口所在的位置、端口的名称、端口显示文本数据(可选项)、端口文本的位置(可选项)，这里所说的端口定义的关系是指在底板和插卡上定义有哪些端口,而这里定义的端口,但是这里没有定义端口的状态和特征,需要单独定义,举例说明如下:

插卡A:位置100,100上有port 0/1,缺口朝上的电口

位置100,200上有port 0/2缺口朝下的光口

……

端口定义:

1:缺口朝上的电口:图片a.png,图象位置-100,-100

2:缺口朝下的光口:图片a.png,图象位置-100,-300

这里说缺口朝上的电口就是指明插卡A的port 0/1使用的是端口定义中的1号端口定义；比如，现在有3个端口，端口都是朝上的方式，可以如下定义：

7.定义设备端口的信息，在底板和插卡上都可能存在端口，并且在上面只定义了端口的位置、名称、文本等，在本步骤中具体定义端口如何绘制的，绘制端口，需要定义端口大小、端口文本大小、文本字体、状态图片等信息，可以参照如下定义：

面板逻辑树生成流程图如图4所示，需要将上面的面板配置文件和设备的数据组合生成面板逻辑树：

设备数据读取：首先读取设备数据，得到需要的数据对象，在前面有所描述；

加载仿真面板配置文件：该步骤只需要将当前设备的面板配置文件加载得到json对象；

重新计算面板的高度：在本发明中支持无插卡的位置动态隐藏(不显示)，该功能对设备的显示宽度或者高度是有影响的，在本步骤中，通过设备数据得到有哪些插卡，在计算这些插卡的高度，加起来得到显示的高度；

生成面板节点对象实例：在配置文件中包含底板、插卡、端口及其他信息的配置，在该步骤中生成对象实例，实例中包含节点的使用图片、位置、大小等信息；

重新计算面板节点对象实例的位置：通过上一步骤生成了所有的面板绘制节点，在本发明中支持未插卡的位置动态隐藏(不显示)，这时需要根据隐藏的插卡的信息以及插卡的高度宽度再重新确定每个节点真实的显示位置；

生成面板节点对象逻辑树：通过上面步骤，生成了所有的面板需要绘制的节点，在本步骤中组织各个节点的关系，生成面板逻辑树；

生成设备面板翻页模型：由于部分设备的高度宽度比较大，在一个WEB视图中显示效果不好，需要支持面板翻页，在本发明中是通过插卡的大小进行翻页，在本步骤中生成翻页的数据模型，插卡的数量为面板中的页数，每张插卡的高度和宽度为每个页的显示位置；比如我们的6800-16,可以插入16张插卡,那这样的话可能设备高度为16*200＝3200个象素高度,电脑的屏幕无法显示完全,只能部分显示,而通过翻页处理,可以定义16个页,再假设屏幕上能够显示5*200＝1000个象素的面板,那首先显示1,2,3,4,5的插卡,当翻到下一页,显示2,3,4,5,6的插卡,这样我们就能显示完全了.这里翻页就是指这个意思,本发明中提供的只是目前实现的翻页机制,当然可以按照需求定义其它的机制.底板上除去插卡的部分就很少了,只有4个边框,可以忽略。

仿真面板翻页控制流程图如图5所示，面板组件支持拖拽翻页，拖拽是通过用户操作鼠标的方式完成，在本流程中包含初始化过程和用户操作过程：

添加外部翻页方法：面板支持翻页，在该步骤中添加翻页的接口方式，可以通过外部设置面板显示的页；

初始化面板元素的鼠标事件：对于用户鼠标事件拖拽面板，需要在面板的元素上初始化事件，这里需要初始化的事件有mousedown事件，这里初始化的是面板的底板元素的事件，如果针对其它元素有其它操作含义，将在其它元素上屏蔽事件，在HTML中通过event.cancelBubble设置屏蔽；

用户按下鼠标左键：当用户在面板按下鼠标左键时，表示拖拽面板已经开始，这时需要设置全局的鼠标事件；

初始化全局鼠标事件：本发明中所指的全局鼠标事件是指HTML中的document对象上的事件，需要设置mousemove和mouseup两个事件；

用户移动鼠标：当用户在按下鼠标事件后，移动鼠标，表示在拖动面板进行翻页了；

修改面板拖动效果界面：拖动面板时，需要显示面板的拖动效果，通过设置面板元素的位置来完成，在HTML中设置left和top参数；

用户松开鼠标左键：当用户在松开鼠标左键时，表示拖拽结束；

重新计算面板显示页码：拖拽结束后，需要重新计算显示的页面，这里是根据拖拽的偏移量计算，当前拖拽了几个插卡，从而得到拖拽后应该显示的页码；

修改面板的页码：重新计算了页码后，需要修改面板的显示页面，调用上面提供的接口修改面板元素的left和top参数；

释放全局数鼠标事件：在拖放完成后，需要释放document上的鼠标事件，将mousemove和mouseup设置为null；

仿真面板端口拖放控制流程图如图6所示，面板端口拖放控制流程，在需要进行端口拖放到某个位置时，可以通过该流程完成：

初始化拖放目标：面板需要支持拖放端口功能，首先要初始化拖放的目标对象，外部指定能够拖放到什么位置，位置为矩形区域；矩形区域,这个区域是指端口能够拖到那个地方,而这个地方是一个区域,一个矩形区域,比如,我们在屏幕中指定300,300到600,600的矩形区域表示vlan 100,哪端口拖入这个目标区域就是指将该端口加入的vlan 100,这个矩形区域是有vlan 100这个目标对象给的,不是面板知道的；

初始化端口元素的事件：这里只需要初始化mousedown事件即可；

用户按下鼠标左键：当用户在端口上按下鼠标左键时，表示拖放端口操作开始了；

初始化全局鼠标事件：本发明中所指的全局鼠标事件是指HTML中的document对象上的事件，需要设置mousemove和mouseup两个事件；

用户移动鼠标：当用户在按下鼠标事件后，移动鼠标，表示在端口正在拖动；

绘制拖放端口界面呈现：正在拖动时需要显示拖放端口界面效果，在鼠标的位置显示端口拖动效果；

检测拖放目标：在移动过程中需要检测当前拖动是否已经拖到用户指定的目标位置；

显示目标拖入效果：当用户拖动端口到用户指定的位置时，显示拖入的效果，可以采用灰色的矩形区域来表示已经拖入该区域了；

用户松开鼠标左键：当用户松开鼠标左键时，表示拖放结束；

检测拖放目标：这时还需要检测当前鼠标的位置是否在用户指定的目标位置；

触发目标拖放事件给用户：通过上一步的检测，如果在用户指定的目标位置，触发目标拖放事件给用户模块，让用户模块处理拖放成功的逻辑；

释放全局数比较事件：拖放完成后，需要释放document的mousemove和mouseup事件，设置事件为null。

通过本发明实现面板仿真效果，能够完成和设备差不多的界面效果，但是在生成的WEB页面的元素时，没有采用第三方的插件，都是通过DIV和SPAN标签完成，如下生成代码：

1、DIV是面板的容器，在该元素内显示面板，由业务模块确定

2、SPAN是面板的底板元素

3、SPAN是面板的插卡的元素，这里的插卡是一张线卡(LPU)

4、SPAN是线卡上的静态元素，这里代表螺丝钉

5、SPAN是线卡上的静态文本，显示当前线卡的名称

6、SPAN是端口元素，显示设备端口，通过修改background修改端口状态

在图片存储上，使用了三张图片，其中fixx.jpg和fixy.jpg都很小(只有一个象素的高度或者宽度)，而fixed.Png而是很小的一张图片。

Claims (9)

1.基于WEB的嵌入式设备中仿真面板实现方法，其特征在于，包括以下步骤：

步骤1.准备绘制面板所需的仿真小图片，定义面板信息的位置、大小及使用仿真小图片的数据信息，得到仿真面板配置文件，本步骤具体为：

步骤1A.准备面板信息的仿真图片；

步骤1B.抽取面板信息的仿真图片中的大面积颜色值及其对应的矩形区域，拆分面板信息的仿真图片中的静态图像，生成节点图像；

步骤1C.将拆分出的节点图像合并为水平平铺图片、垂直平铺图片及不平铺图片，所述水平平铺的图片，将节点图像中所有上下边框的图片放到这一张图片中；所述垂直平铺的图片，将节点图像中所有左右边框的图片放到这一张图片中；所述不平铺的图片，将节点图像中的其他静态图象及各个状态的端口图片都放到这张图片中；

步骤1D.将水平平铺图片、垂直平铺图片、不平铺图片及抽取的颜色值与设备面板建立对应关系，构建面板配置文件；

步骤2.针对面板需要的数据信息访问设备，解析设备返回的数据生成端口和插卡的对象数组，得到设备数据；

步骤3.根据仿真面板配置文件和设备数据构建面板逻辑树，逻辑树包括仿真面板底板、插卡、端口及静态元素的位置、高度、宽度以及使用图片或者文本串，并构建层次关系；

步骤4.根据面板逻辑树，通过创建HTML的元素生成仿真面板，并显示在WEB浏览器上；

步骤5.对仿真面板上的HTML元素添加控制事件；

步骤6.提供修改端口状态的接口，业务模块通过调用所述接口完成面板端口状态的修改。

2.如权利要求1所述的基于WEB的嵌入式设备中仿真面板实现方法，其特征在于，步骤1中，所述面板信息包括底板、插卡和端口。

3.如权利要求1所述的基于WEB的嵌入式设备中仿真面板实现方法，其特征在于，步骤1D包括以下步骤：

步骤1D1.构建底板的配置信息，至少包括底板的宽度、高度及背景色参数；

步骤1D2.在底板的配置信息上构建底板上静态元素节点，静态元素节点包括底板的边框、螺丝钉及电源插头，这些静态元素节点为一个数组，数组中包含多个元素，每个元素包含类型、使用图片、默认颜色、元素大小、相对底板位置、图片中图像位置、文本信息及字体信息；

步骤1D3.在底板的配置信息上构建底板上插槽的节点，插槽的节点中包括底板上能够插入插卡的数量、位置信息、插槽类型及与设备上读取插卡数据的索引对应关系；

步骤1D4.构建每种类型插卡的配置信息，至少包括插卡的大小、插卡的类型及背景色参数；

步骤1D5.在插卡的配置信息上构建插卡上静态元素节点，静态元素节点包括插卡的边框，这些静态元素节点为一个数组，数组中包含多个元素，每个元素包含类型、使用图片、默认颜色、元素大小、相对插卡的位置、图片中图像位置、文本信息及字体信息；

步骤1D6.在插卡的配置信息上构建插卡上的端口节点，端口节点中至少包括与端口定义的关系、端口所在的位置及端口的名称；

步骤1D7.构建端口配置信息，至少包括端口大小、端口文本大小、文本字体及状态图片。

4.如权利要求3所述的基于WEB的嵌入式设备中仿真面板实现方法，其特征在于，步骤1D6中，所述端口节点中还包括端口显示文本数据及端口文本的位置。

5.如权利要求3所述的基于WEB的嵌入式设备中仿真面板实现方法，其特征在于，步骤1D7中，所述状态图片指：端口每种状态所使用图片、图片中端口状态图像位置。

6.如权利要求3所述的基于WEB的嵌入式设备中仿真面板实现方法，其特征在于，步骤1D3和步骤1D4之间还包括以下步骤：

步骤1D8.在底板的配置信息上构建底板上的端口节点，端口节点中至少包括与端口定义的关系、端口所在的位置及端口的名称。

7.如权利要求6所述的基于WEB的嵌入式设备中仿真面板实现方法，其特征在于，步骤1D8中，所述状态图片指：端口每种状态所使用图片、图片中端口状态图像位置。

8.如权利要求1所述的基于WEB的嵌入式设备中仿真面板实现方法，其特征在于，步骤3包括以下步骤：

步骤3A.加载当前设备的面板配置文件；

步骤3B.计算面板的高度或宽度，及显示高度或宽度；

步骤3C.生成面板节点对象实例，至少包括节点所使用图片、位置及大小；

步骤3D.根据插卡的高度宽度及未插插卡信息计算节点对象的显示位置；

步骤3E.组织各个节点对象间的关系，生成面板逻辑树。

9.如权利要求8所述的基于WEB的嵌入式设备中仿真面板实现方法，其特征在于，步骤3还包括以下步骤：

步骤3F.生成设备面板翻页模型。