专利名称：基于web的嵌入式设备中仿真面板实现方法
技术领域：
本发明涉及网络管理技术，特别涉及基于WEB的嵌入式设备中仿真面板实现方法。
背景技术：
对于单台的网络通信设备，基于WEB的嵌入式设备管理是一种常用的管理方法和系统。对于基于WEB的嵌入式设备管理系统，拥有高仿真的设备面板更方便网络管理员直观的监控网络通信设备状态，以及网络业务配置。但是高仿真的设备面板的绘制过程往往需要大量的高清图片，这些图片会占用网络通信设备的较大存储空间，特别对于机架式网络通信设备，可插入板卡类型和数量均比较多，在WEB上完成面板绘制、呈现和性能均有一定的技术难度，因此现有技术中没有成熟的基于WEB的嵌入式设备管理系统中高仿真面板实现方法。·
发明内容
本发明的目的就是克服目前没有成熟的基于WEB的嵌入式设备管理系统中高仿真面板实现方法的缺点，提供一种基于WEB的嵌入式设备中仿真面板实现方法。本发明解决其技术问题，采用的技术方案是，基于WEB的嵌入式设备中仿真面板实现方法，其特征在于，包括以下步骤步骤I.准备绘制面板所需的仿真小图片，定义面板信息的位置、大小及使用仿真小图片的数据信息，得到仿真面板配置文件；步骤2.针对面板需要的数据信息访问设备，解析设备返回的数据生成端口和插卡的对象数组，得到设备数据；步骤3.根据仿真面板配置文件和设备数据构建面板逻辑树，逻辑树包括底板、插卡、端口及静态元素的位置、高度、宽度以及使用图片或者文本串，并构建层次关系；步骤4.根据面板逻辑树，通过创建HTML的元素生成仿真面板，并显示在WEB浏览器上；步骤5.对仿真面板上的HTML元素添加控制事件；步骤6.提供修改端口状态的接口，业务模块通过调用所述接口完成面板端口状态的修改。进一步的，步骤I中，所述面板信息包括底板、插卡和端口。再进一步的，步骤I包括以下步骤步骤1A.准备面板信息的仿真图片；步骤1B.抽取面板信息的仿真图片中的大面积颜色值及其对应的矩形区域，拆分面板信息的仿真图片中的静态图像，生成节点图像；步骤1C.将拆分出的节点图像合并为水平平铺图片、垂直平铺图片及不平铺图片；
步骤ID.将水平平铺图片、垂直平铺图片、不平铺图片及抽取的颜色值与设备面板建立对应关系，构建面板配置文件。具体的，步骤ID包括以下步骤 步骤1D1.构建底板的配置信息，至少包括底板的宽度、高度及背景色参数；步骤1D2.在底板的配置信息上构建底板上静态元素节点，静态元素节点包括底板的边框、螺丝钉及电源插头，这些静态元素节点为一个数组，数组中包含多个元素，每个元素包含类型、使用图片、默认颜色、元素大小、相对底板位置、图片中图像位置、文本信息及字体信息；步骤1D3.在底板的配置信息上构建底板上插槽的节点，插槽的节点中包括底板上插卡的数量、位置信息、插槽类型及与设备上读取插卡数据的索引对应关系；步骤1D4.构建每种插卡类型的配置信息，至少包括插卡的大小、插卡的类型及背景色参数；步骤1D5.在插卡的配置信息上构建插卡上静态元素节点，静态元素节点包括插卡的边框，这些静态元素节点为一个数组，数组中包含多个元素，每个元素包含类型、使用图片、默认颜色、元素大小、相对插卡的位置、图片中图像位置、文本信息及字体信息；步骤1D6.在插卡的配置信息上构建插卡上的端口节点，端口节点中至少包括与端口定乂的关系、端口所在的位直及端口的名称；步骤1D7.构建端口配置信息，至少包括端口大小、端口文本大小、文本字体及状态图片。再进一步的，步骤1D6中，所述端口节点中还包括端口显示文本数据及端口文本的位置。具体的，步骤1D7中，所述状态图片指端口每种状态所使用图片、图片中端口状态图像位置。再进一步的，步骤1D3和步骤1D4之间还包括以下步骤步骤1D8.在底板的配置信息上构建底板上的端口节点，端口节点中至少包括与端口定义的关系、端口所在的位置及端口的名称。具体的，步骤1D8中，所述状态图片指端口每种状态所使用图片、图片中端口状态图像位置。再进一步的，步骤3包括以下步骤步骤3A.加载当前设备的面板配置文件；步骤3B.计算面板的高度或宽度，及显示高度或宽度；步骤3C.生成面板节点对象实例，至少包括节点所使用图片、位置及大小；步骤3D.根据插卡的高度宽度及未插卡信息计算节点对象的显示位置；步骤3E.组织各个节点对象间的关系，生成面板逻辑树。具体的，步骤3还包括以下步骤步骤3F.生成设备面板翻页模型。再进一步的，步骤5中，所述控制事件包括底板的拖拽使用的鼠标事件、端口选中鼠标事件及端口拖拽触发事件。包括以下步骤
步骤5Α·设置底板的mousedown事件，以实现拖拽翻页功能；步骤5B.在底板的mousedown事件中修改document的事件，以实现拖拽翻页功倉泛;步骤5C. document事件处理拖拽翻页效果和功能；步骤5D.设置端口的mousedown和mousemove事件，以完成拖放功能；
步骤5E.在端口的mousedown中通知拖放组件准备拖放；步骤5F.在端口的mousemove中通知拖放组件开始拖放。本发明的有益效果是，通过上述基于WEB的嵌入式设备中面板实现的方法，可以看出其存储的不是完整的高清图片，而是压缩后的仿真小图片，所存储图片非常小，且达到的仿真程度高，和真实设备基本一致，且其组件所需要的存储空间较小，另外，采用标准HTML标签，浏览器可以进行兼容，不需要第三方插件，且仿真面板的加载速度较快。
图I是本发明的基于WEB的嵌入式设备中仿真面板实现系统的结构图。图2是本发明的仿真面板生成总体流程图。图3是本发明的仿真面板配置文件生成流程图。图4是本发明的面板逻辑树生成流程图。图5是本发明的仿真面板翻页控制流程图。图6是本发明的仿真面板端口拖放控制流程图。
具体实施例方式下面结合实施例及附图，详细描述本发明的技术方案。本发明的仿真面板生成总体流程图如图2。本发明的基于WEB的嵌入式设备管理系统中仿真面板实现方法中，首先准备绘制面板所需的仿真小图片，定义面板信息的位置、大小及使用仿真小图片的数据信息，得到仿真面板配置文件，然后针对面板需要的数据信息访问设备，解析设备返回的数据生成端口和插卡的对象数组，得到设备数据，再根据仿真面板配置文件和设备数据构建面板逻辑树，逻辑树包括底板、插卡、端口及静态元素的位置、高度、宽度以及使用图片或者文本串，并构建层次关系(层次关系是指各个元素间的所属关系，比如底板上有插卡，插卡上有端口，底板上有端口，是指这样的层次关系)，然后根据面板逻辑树，通过创建HTML的元素生成仿真面板，并显示在WEB浏览器上，最后对仿真面板上的HTML元素添加控制事件，且提供接口修改端口状态，业务模块能够通过这些接口完成面板的状态修改。实施例本发明实施例中，实现基于WEB的嵌入式设备中仿真面板实现系统被分成多个模块，通过模块之间的协同来完成面板的绘制和事件控制，其系统结构图如图1，包括面板配置模块该模块完成仿真面板配置文件的生成。在设备上，存储空间一般比较小，如果使用大图片和多个图片将会对设备造成压力，在该模块中需要缩小图片大小和占用的空间，再将绘制面板的资源文件组织成面板绘制的配置文件，在该配置文件中说明设备面板的界面状态，具体的组成将在下述解释图3仿真面板配置文件生成流程图中详细说明；设备访问模块该模块完成设备的访问，读取设备的数据，将设备数据组织成绘制面板需要的数据信息，本发明中需要使用的设备的插卡和端口的数据，在本模块中需要解析出当前设备有哪些插卡、插卡对应的插槽、有哪些端口、端口的模式(是光口还是电口)，提供给面板绘制组件的是两个对象数组I、插卡对象中需要包含关键数据项有插卡的ID、插卡的类型、插卡的插槽位置；2、端口对象中需要包含关键数据项有端口名称、端口的模式、端口的状态；端口状态在本发明中端口可以以多种状态呈现在用户面前，在面板配置模块中会定义端口的状态类别，在本模块中提供端口状态，使用模块就可以根据自己的需要来呈现需要的端口状态，比如红色(代表down)、绿色(代表up)、灰色(代表非启用端口)
面板逻辑树模型该模块属于面板的数据结构模型，没有具体的逻辑处理过程，在该模型中说明设备面板的底板、插卡和端口的关系和界面显示位置以及大小和显示的状态，在该模块中还需要包含面板页面的数据模型对象，给翻页模块提供数据支持；I、面板逻辑树中包含a)首先是面板的底板(或者说机筐);b)在底板上有静态的螺丝钉、电源插头及电源按钮等(可能还有很多，只要是设备上有的图案都包含在这里面，比如丝印，商标…)；c)在底板上还有插卡的节点；d)在插卡的节点上有静态的螺丝钉等；e)在插卡的节点上有端口的节点；f)端口节点包含端口的具体状态；2、在面板逻辑树的各个节点中包含如下关键属性 a)节点对应HTML元素的位置；b)节点对应HTML元素的大小；c)节点使用的图片资源和资源位置；d)在端口节点中还包含选中、未选中、各种状态的图片资源以及资源位置；3、翻页组件中包含a)面板翻页的方向横向还是纵向；b)面板的总页数；c)面板当前显示的页；d)面板各个页的高度或者宽度信息；仿真面板绘制模块在有了面板逻辑树模型后，就能够在WEB中绘制出面板，本模块就是结合面板逻辑树模型在WEB中绘制面板，绘制过程比较简单，将面板逻辑树模型中的节点按照模型中的层次关系在WEB创建HTML元素，可以按照以下步骤绘制I、绘制底板的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元素，可以按照以下步骤绘制I、绘制底板的HTML元素；2、绘制底板上的静态螺丝钉等HTML元素；3、在底板上绘制插卡；4、绘制插卡上的静态螺丝钉等HTML元素；5、绘制插卡上的端口 HTML元素；绘制HTML元素都是在WEB中创建HTML标签、设置标签的位置、宽度、高度、背景图；添加面板事件控制在本步骤中，需要完成翻页和端口拖放的事件控制，具体过程在翻页事件控制和端口拖放事件控制中详细说明；设备面板端口状态本步骤是可选步骤，是由用户模块触发，如果用户模块需要修改端口状态，调用面板组件的接口来修改面板的端口的状态；如图3所示，本流程中完成仿真面板配置文件的生成准备设备真实面板图片准备各个面板信息的真实图片，这个工作一般由美工完成，在项目中，需要准备面板的底板图片、设备支持的插卡的图片、设备支持的各个端口的图片以及端口对应的多种状态的图片；这里所说的每张图片都是一个高保真的真实设备图片；
拆分面板真实图片对于端口来说，不需要进行拆分，对于底板和插卡来说，先来抽取边框，对于边框首先抽取四个角，生成四张很小的图片(可能所有插卡的四个角的图片都一样)，去掉四个角后，上下边框就可以由宽度为I的图片进行平铺得到，左右边框就可以由高度为I的图片进行平铺得到，这样边框图片所占的空间就很小了。拆分了这些边框后，我们再对其它部位的静态图象尽心拆分(比如螺丝钉、电源按钮等等)，将这些图片都单独的放在独立的文件中。合并图片根据拆分出的很多小图片，在本步骤中，将这些小图片以图像的形式按照拆分方式合并为三张图片水平平铺的图片，将上面提到的所要上下边框的图片放到这一张图片中；垂直平铺的图片，将上面提到的所有左右边框的图片放到这一张图片中；不平铺的图片，将上面提到的静态图象、各个状态的端口图片都放到这样张图片中。记录合并图片的位置信息生成上述三张图片的同时需要记录下放入的位置，放到哪张图片中，以及这些图像是需要如何平铺。构建仿真面板配置文件准备上面三张图片后，将这三张图片和抽取的颜色值需·要与设备面板建立对应的关系，构建仿真面板配置文件，包含以下详细步骤I.定义设备的底板背景色，在配置文件中首先定义设备面板的宽度，高度，背景色参数；例如我们采用JSON的数据格式可以定义如下
root : {
size [776,370], backgroundColor : ’ #2e5a63’
}
}2.定义设备底板底板静态元素，这里的静态元素包含了底板的边框、螺丝钉及电源插头等，这里定义的是一个数组，是多个元素，数组中的每个元素包含类型、使用图片、默认颜色、元素大小、相对底板位置、图片中图象位置、文本信息、字体信息等等(这些信息根据情况而定)，比如，我这里定义底板的边框和部分螺丝钉，定义如下(在本例子中fixy.jpg为垂直平铺的图片、fixx. jpg为水平平铺的图片、fixed, jpg为不平铺的图片)，在例子定义中有positions和sizes,主要是为了同一个图片在多个地方使用，对此还可以自由定义positions和sizes的方式
r >ot {
children : [{
type : ，static5，//border-left image : J fixy. jpg5 url ; JOpx Opxi， positions : [[Os0]]， sizes ; [[5，77]]
{
type : static" //border-right·
权利要求
1.基于WEB的嵌入式设备中仿真面板实现方法，其特征在于，包括以下步骤 步骤I.准备绘制面板所需的仿真小图片，定义面板信息的位置、大小及使用仿真小图片的数据信息，得到仿真面板配置文件； 步骤2.针对面板需要的数据信息访问设备，解析设备返回的数据生成端口和插卡的对象数组，得到设备数据；步骤3.根据仿真面板配置文件和设备数据构建面板逻辑树，逻辑树包括仿真面板底板、插卡、端口及静态元素的位置、高度、宽度以及使用图片或者文本串，并构建层次关系；步骤4.根据面板逻辑树，通过创建HTML的元素生成仿真面板，并显示在WEB浏览器上； 步骤5.对仿真面板上的HTML元素添加控制事件； 步骤6.提供修改端口状态的接口，业务模块通过调用所述接口完成面板端口状态的修改。
2.如权利要求I所述的基于WEB的嵌入式设备中仿真面板实现方法，其特征在于，步骤I中，所述面板信息包括底板、插卡和端口。
3.如权利要求I或2所述的基于WEB的嵌入式设备中仿真面板实现方法，其特征在于，步骤I包括以下步骤 步骤1A.准备面板信息的仿真图片； 步骤1B.抽取面板信息的仿真图片中的大面积颜色值及其对应的矩形区域，拆分面板信息的仿真图片中的静态图像，生成节点图像； 步骤1C.将拆分出的节点图像合并为水平平铺图片、垂直平铺图片及不平铺图片；步骤1D.将水平平铺图片、垂直平铺图片、不平铺图片及抽取的颜色值与设备面板建立对应关系，构建面板配置文件。
4.如权利要求3所述的基于WEB的嵌入式设备中仿真面板实现方法，其特征在于，步骤ID包括以下步骤 步骤1D1.构建底板的配置信息，至少包括底板的宽度、高度及背景色参数； 步骤1D2.在底板的配置信息上构建底板上静态元素节点，静态元素节点包括底板的边框、螺丝钉及电源插头，这些静态元素节点为一个数组，数组中包含多个元素，每个元素包含类型、使用图片、默认颜色、元素大小、相对底板位置、图片中图像位置、文本信息及字体信息； 步骤1D3.在底板的配置信息上构建底板上插槽的节点，插槽的节点中包括底板上能够插入插卡的数量、位置信息、插槽类型及与设备上读取插卡数据的索引对应关系； 步骤1D4.构建每种类型插卡的配置信息，至少包括插卡的大小、插卡的类型及背景色参数； 步骤1D5.在插卡的配置信息上构建插卡上静态元素节点，静态元素节点包括插卡的边框，这些静态元素节点为一个数组，数组中包含多个元素，每个元素包含类型、使用图片、默认颜色、元素大小、相对插卡的位置、图片中图像位置、文本信息及字体信息； 步骤1D6.在插卡的配置信息上构建插卡上的端口节点，端口节点中至少包括与端口定义的关系、端口所在的位置及端口的名称； 步骤1D7.构建端口配置信息，至少包括端口大小、端口文本大小、文本字体及状态图片。
5.如权利要求4所述的基于WEB的嵌入式设备中仿真面板实现方法，其特征在于，步骤1D6中，所述端口节点中还包括端口显示文本数据及端口文本的位置。
6.如权利要求4所述的基于WEB的嵌入式设备中仿真面板实现方法，其特征在于，步骤1D7中，所述状态图片指端口每种状态所使用图片、图片中端口状态图像位置。
7.如权利要求4所述的基于WEB的嵌入式设备中仿真面板实现方法，其特征在于，步骤1D3和步骤1D4之间还包括以下步骤 步骤1D8.在底板的配置信息上构建底板上的端口节点，端口节点中至少包括与端口定义的关系、端口所在的位置及端口的名称。
8.如权利要求7所述的基于WEB的嵌入式设备中仿真面板实现方法，其特征在于，步骤1D8中，所述状态图片指端口每种状态所使用图片、图片中端口状态图像位置。
9.如权利要求3所述的基于WEB的嵌入式设备中仿真面板实现方法，其特征在于，步骤3包括以下步骤 步骤3A.加载当前设备的面板配置文件； 步骤3B.计算面板的高度或宽度，及显示高度或宽度； 步骤3C.生成面板节点对象实例，至少包括节点所使用图片、位置及大小； 步骤3D.根据插卡的高度宽度及未插插卡信息计算节点对象的显示位置； 步骤3E.组织各个节点对象间的关系，生成面板逻辑树。
10.如权利要求9所述的基于WEB的嵌入式设备中仿真面板实现方法，其特征在于，步骤3还包括以下步骤 步骤3F.生成设备面板翻页模型。
全文摘要
本发明涉及网络管理技术。本发明解决了目前没有成熟的基于WEB的嵌入式设备管理系统中高仿真面板实现方法的问题，提供了一种基于WEB的嵌入式设备中仿真面板实现方法，其技术方案可概括为首先得到仿真面板配置文件，然后针对面板需要的数据信息访问设备，得到设备数据，再根据仿真面板配置文件和设备数据构建面板逻辑树，并构建层次关系，然后根据面板逻辑树，通过创建HTML的元素生成仿真面板，并在浏览器上显示，再添加控制事件，最后提供修改端口状态的接口，业务模块通过调用接口完成面板端口状态的修改。本发明的有益效果是仿真程度高，且其组件所需要的存储空间较小，适用于基于WEB的嵌入式设备中的仿真面板显示。
文档编号G06F9/44GK102902527SQ201210316869
公开日2013年1月30日 申请日期2012年8月31日 优先权日2012年8月31日
发明者邓鹏 申请人:迈普通信技术股份有限公司