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

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

【技术保护点】
基于WEB的嵌入式设备中仿真面板实现方法，其特征在于，包括以下步骤：步骤1.准备绘制面板所需的仿真小图片，定义面板信息的位置、大小及使用仿真小图片的数据信息，得到仿真面板配置文件；步骤2.针对面板需要的数据信息访问设备，解析设备返回的数据生成端口和插卡的对象数组，得到设备数据；步骤3.根据仿真面板配置文件和设备数据构建面板逻辑树，逻辑树包括仿真面板底板、插卡、端口及静态元素的位置、高度、宽度以及使用图片或者文本串，并构建层次关系；步骤4.根据面板逻辑树，通过创建HTML的元素生成仿真面板，并显示在WEB浏览器上；步骤5.对仿真面板上的HTML元素添加控制事件；步骤6.提供修改端口状态的接口，业务模块通过调用所述接口完成面板端口状态的修改。

【技术特征摘要】
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.在底板的配置信息上构建底板上插槽的节点，插槽的节点中包括底板上能够插入插卡的数量、位置信息、插槽类型及与...

【专利技术属性】
技术研发人员：邓鹏，
申请(专利权)人：迈普通信技术股份有限公司，
类型：发明
国别省市：