基于WEB的嵌入式設備中仿真面板實現(xiàn)方法技術

本發(fā)明專利技術涉及網(wǎng)絡管理技術。本發(fā)明專利技術解決了目前沒有成熟的基于WEB的嵌入式設備管理系統(tǒng)中高仿真面板實現(xiàn)方法的問題，提供了一種基于WEB的嵌入式設備中仿真面板實現(xiàn)方法，其技術方案可概括為：首先得到仿真面板配置文件，然后針對面板需要的數(shù)據(jù)信息訪問設備，得到設備數(shù)據(jù)，再根據(jù)仿真面板配置文件和設備數(shù)據(jù)構建面板邏輯樹，并構建層次關系，然后根據(jù)面板邏輯樹，通過創(chuàng)建HTML的元素生成仿真面板，并在瀏覽器上顯示，再添加控制事件，最后提供修改端口狀態(tài)的接口，業(yè)務模塊通過調(diào)用接口完成面板端口狀態(tài)的修改。本發(fā)明專利技術的有益效果是：仿真程度高，且其組件所需要的存儲空間較小，適用于基于WEB的嵌入式設備中的仿真面板顯示。

【技術實現(xiàn)步驟摘要】
本專利技術涉及網(wǎng)絡管理技術，特別涉及基于WEB的嵌入式設備中仿真面板實現(xiàn)方法。
技術介紹
對于單臺的網(wǎng)絡通信設備，基于WEB的嵌入式設備管理是一種常用的管理方法和系統(tǒng)。對于基于WEB的嵌入式設備管理系統(tǒng)，擁有高仿真的設備面板更方便網(wǎng)絡管理員直觀的監(jiān)控網(wǎng)絡通信設備狀態(tài)，以及網(wǎng)絡業(yè)務配置。但是高仿真的設備面板的繪制過程往往需要大量的高清圖片，這些圖片會占用網(wǎng)絡通信設備的較大存儲空間，特別對于機架式網(wǎng)絡通信設備，可插入板卡類型和數(shù)量均比較多，在WEB上完成面板繪制、呈現(xiàn)和性能均有一定的技術難度，因此現(xiàn)有技術中沒有成熟的基于WEB的嵌入式設備管理系統(tǒng)中高仿真面板實現(xiàn)方法。·
技術實現(xiàn)思路
本專利技術的目的就是克服目前沒有成熟的基于WEB的嵌入式設備管理系統(tǒng)中高仿真面板實現(xiàn)方法的缺點，提供一種基于WEB的嵌入式設備中仿真面板實現(xiàn)方法。本專利技術解決其技術問題，采用的技術方案是，基于WEB的嵌入式設備中仿真面板實現(xiàn)方法，其特征在于，包括以下步驟步驟I.準備繪制面板所需的仿真小圖片，定義面板信息的位置、大小及使用仿真小圖片的數(shù)據(jù)信息，得到仿真面板配置文件；步驟2.針對面板需要的數(shù)據(jù)信息訪問設備，解析設備返回的數(shù)據(jù)生成端口和插卡的對象數(shù)組，得到設備數(shù)據(jù)；步驟3.根據(jù)仿真面板配置文件和設備數(shù)據(jù)構建面板邏輯樹，邏輯樹包括底板、插卡、端口及靜態(tài)元素的位置、高度、寬度以及使用圖片或者文本串，并構建層次關系；步驟4.根據(jù)面板邏輯樹，通過創(chuàng)建HTML的元素生成仿真面板，并顯示在WEB瀏覽器上；步驟5.對仿真面板上的HTML元素添加控制事件；步驟6.提供修改端口狀態(tài)的接口，業(yè)務模塊通過調(diào)用所述接口完成面板端口狀態(tài)的修改。進一步的，步驟I中，所述面板信息包括底板、插卡和端口。再進一步的，步驟I包括以下步驟步驟1A.準備面板信息的仿真圖片；步驟1B.抽取面板信息的仿真圖片中的大面積顏色值及其對應的矩形區(qū)域，拆分面板信息的仿真圖片中的靜態(tài)圖像，生成節(jié)點圖像；步驟1C.將拆分出的節(jié)點圖像合并為水平平鋪圖片、垂直平鋪圖片及不平鋪圖片；步驟ID.將水平平鋪圖片、垂直平鋪圖片、不平鋪圖片及抽取的顏色值與設備面板建立對應關系，構建面板配置文件。具體的，步驟ID包括以下步驟 步驟1D1.構建底板的配置信息，至少包括底板的寬度、高度及背景色參數(shù)；步驟1D2.在底板的配置信息上構建底板上靜態(tài)元素節(jié)點，靜態(tài)元素節(jié)點包括底板的邊框、螺絲釘及電源插頭，這些靜態(tài)元素節(jié)點為一個數(shù)組，數(shù)組中包含多個元素，每個元素包含類型、使用圖片、默認顏色、元素大小、相對底板位置、圖片中圖像位置、文本信息及字體信息；步驟1D3.在底板的配置信息上構建底板上插槽的節(jié)點，插槽的節(jié)點中包括底板上插卡的數(shù)量、位置信息、插槽類型及與設備上讀取插卡數(shù)據(jù)的索引對應關系；步驟1D4.構建每種插卡類型的配置信息，至少包括插卡的大小、插卡的類型及背景色參數(shù)；步驟1D5.在插卡的配置信息上構建插卡上靜態(tài)元素節(jié)點，靜態(tài)元素節(jié)點包括插卡的邊框，這些靜態(tài)元素節(jié)點為一個數(shù)組，數(shù)組中包含多個元素，每個元素包含類型、使用圖片、默認顏色、元素大小、相對插卡的位置、圖片中圖像位置、文本信息及字體信息；步驟1D6.在插卡的配置信息上構建插卡上的端口節(jié)點，端口節(jié)點中至少包括與端口定乂的關系、端口所在的位直及端口的名稱；步驟1D7.構建端口配置信息，至少包括端口大小、端口文本大小、文本字體及狀態(tài)圖片。再進一步的，步驟1D6中，所述端口節(jié)點中還包括端口顯示文本數(shù)據(jù)及端口文本的位置。具體的，步驟1D7中，所述狀態(tài)圖片指端口每種狀態(tài)所使用圖片、圖片中端口狀態(tài)圖像位置。再進一步的，步驟1D3和步驟1D4之間還包括以下步驟步驟1D8.在底板的配置信息上構建底板上的端口節(jié)點，端口節(jié)點中至少包括與端口定義的關系、端口所在的位置及端口的名稱。具體的，步驟1D8中，所述狀態(tài)圖片指端口每種狀態(tài)所使用圖片、圖片中端口狀態(tài)圖像位置。再進一步的，步驟3包括以下步驟步驟3A.加載當前設備的面板配置文件；步驟3B.計算面板的高度或寬度，及顯示高度或寬度；步驟3C.生成面板節(jié)點對象實例，至少包括節(jié)點所使用圖片、位置及大小；步驟3D.根據(jù)插卡的高度寬度及未插卡信息計算節(jié)點對象的顯示位置；步驟3E.組織各個節(jié)點對象間的關系，生成面板邏輯樹。具體的，步驟3還包括以下步驟步驟3F.生成設備面板翻頁模型。再進一步的，步驟5中，所述控制事件包括底板的拖拽使用的鼠標事件、端口選中鼠標事件及端口拖拽觸發(fā)事件。包括以下步驟步驟5Α·設置底板的mousedown事件，以實現(xiàn)拖拽翻頁功能；步驟5B.在底板的mousedown事件中修改document的事件，以實現(xiàn)拖拽翻頁功倉泛;步驟5C. document事件處理拖拽翻頁效果和功能；步驟5D.設置端口的mousedown和mousemove事件，以完成拖放功能； 步驟5E.在端口的mousedown中通知拖放組件準備拖放；步驟5F.在端口的mousemove中通知拖放組件開始拖放。本專利技術的有益效果是，通過上述基于WEB的嵌入式設備中面板實現(xiàn)的方法，可以看出其存儲的不是完整的高清圖片，而是壓縮后的仿真小圖片，所存儲圖片非常小，且達到的仿真程度高，和真實設備基本一致，且其組件所需要的存儲空間較小，另外，采用標準HTML標簽，瀏覽器可以進行兼容，不需要第三方插件，且仿真面板的加載速度較快。附圖說明圖I是本專利技術的基于WEB的嵌入式設備中仿真面板實現(xiàn)系統(tǒng)的結構圖。圖2是本專利技術的仿真面板生成總體流程圖。圖3是本專利技術的仿真面板配置文件生成流程圖。圖4是本專利技術的面板邏輯樹生成流程圖。圖5是本專利技術的仿真面板翻頁控制流程圖。圖6是本專利技術的仿真面板端口拖放控制流程圖。具體實施例方式下面結合實施例及附圖，詳細描述本專利技術的技術方案。本專利技術的仿真面板生成總體流程圖如圖2。本專利技術的基于WEB的嵌入式設備管理系統(tǒng)中仿真面板實現(xiàn)方法中，首先準備繪制面板所需的仿真小圖片，定義面板信息的位置、大小及使用仿真小圖片的數(shù)據(jù)信息，得到仿真面板配置文件，然后針對面板需要的數(shù)據(jù)信息訪問設備，解析設備返回的數(shù)據(jù)生成端口和插卡的對象數(shù)組，得到設備數(shù)據(jù)，再根據(jù)仿真面板配置文件和設備數(shù)據(jù)構建面板邏輯樹，邏輯樹包括底板、插卡、端口及靜態(tài)元素的位置、高度、寬度以及使用圖片或者文本串，并構建層次關系(層次關系是指各個元素間的所屬關系，比如底板上有插卡，插卡上有端口，底板上有端口，是指這樣的層次關系)，然后根據(jù)面板邏輯樹，通過創(chuàng)建HTML的元素生成仿真面板，并顯示在WEB瀏覽器上，最后對仿真面板上的HTML元素添加控制事件，且提供接口修改端口狀態(tài)，業(yè)務模塊能夠通過這些接口完成面板的狀態(tài)修改。實施例本專利技術實施例中，實現(xiàn)基于WEB的嵌入式設備中仿真面板實現(xiàn)系統(tǒng)被分成多個模塊，通過模塊之間的協(xié)同來完成面板的繪制和事件控制，其系統(tǒng)結構圖如圖1，包括面板配置模塊該模塊完成仿真面板配置文件的生成。在設備上，存儲空間一般比較小，如果使用大圖片和多個圖片將會對設備造成壓力，在該模塊中需要縮小圖片大小和占用的空間，再將繪制面板的資源文件組織成面板繪制的配置文件，在該配置文件中說明設備面板的界面狀態(tài)，具體的組成將在下述解釋圖3仿真面板配置文件生成流程圖中詳細說明；設備訪問模塊該模塊完成設備的訪問，讀取設備的數(shù)據(jù)，將本文檔來自技高網(wǎng)...

【技術保護點】
基于WEB的嵌入式設備中仿真面板實現(xiàn)方法，其特征在于，包括以下步驟：步驟1.準備繪制面板所需的仿真小圖片，定義面板信息的位置、大小及使用仿真小圖片的數(shù)據(jù)信息，得到仿真面板配置文件；步驟2.針對面板需要的數(shù)據(jù)信息訪問設備，解析設備返回的數(shù)據(jù)生成端口和插卡的對象數(shù)組，得到設備數(shù)據(jù)；步驟3.根據(jù)仿真面板配置文件和設備數(shù)據(jù)構建面板邏輯樹，邏輯樹包括仿真面板底板、插卡、端口及靜態(tài)元素的位置、高度、寬度以及使用圖片或者文本串，并構建層次關系；步驟4.根據(jù)面板邏輯樹，通過創(chuàng)建HTML的元素生成仿真面板，并顯示在WEB瀏覽器上；步驟5.對仿真面板上的HTML元素添加控制事件；步驟6.提供修改端口狀態(tài)的接口，業(yè)務模塊通過調(diào)用所述接口完成面板端口狀態(tài)的修改。

【技術特征摘要】
1.基于WEB的嵌入式設備中仿真面板實現(xiàn)方法，其特征在于，包括以下步驟 步驟I.準備繪制面板所需的仿真小圖片，定義面板信息的位置、大小及使用仿真小圖片的數(shù)據(jù)信息，得到仿真面板配置文件； 步驟2.針對面板需要的數(shù)據(jù)信息訪問設備，解析設備返回的數(shù)據(jù)生成端口和插卡的對象數(shù)組，得到設備數(shù)據(jù)；步驟3.根據(jù)仿真面板配置文件和設備數(shù)據(jù)構建面板邏輯樹，邏輯樹包括仿真面板底板、插卡、端口及靜態(tài)元素的位置、高度、寬度以及使用圖片或者文本串，并構建層次關系；步驟4.根據(jù)面板邏輯樹，通過創(chuàng)建HTML的元素生成仿真面板，并顯示在WEB瀏覽器上； 步驟5.對仿真面板上的HTML元素添加控制事件； 步驟6.提供修改端口狀態(tài)的接口，業(yè)務模塊通過調(diào)用所述接口完成面板端口狀態(tài)的修改。2.如權利要求I所述的基于WEB的嵌入式設備中仿真面板實現(xiàn)方法，其特征在于，步驟I中，所述面板信息包括底板、插卡和端口。3.如權利要求I或2所述的基于WEB的嵌入式設備中仿真面板實現(xiàn)方法，其特征在于，步驟I包括以下步驟 步驟1A.準備面板信息的仿真圖片； 步驟1B.抽取面板信息的仿真圖片中的大面積顏色值及其對應的矩形區(qū)域，拆分面板信息的仿真圖片中的靜態(tài)圖像，生成節(jié)點圖像； 步驟1C.將拆分出的節(jié)點圖像合并為水平平鋪圖片、垂直平鋪圖片及不平鋪圖片；步驟1D.將水平平鋪圖片、垂直平鋪圖片、不平鋪圖片及抽取的顏色值與設備面板建立對應關系，構建面板配置文件。4.如權利要求3所述的基于WEB的嵌入式設備中仿真面板實現(xiàn)方法，其特征在于，步驟ID包括以下步驟 步驟1D1.構建底板的配置信息，至少包括底板的寬度、高度及背景色參數(shù)； 步驟1D2.在底板的配置信息上構建底板上靜態(tài)元素節(jié)點，靜態(tài)元素節(jié)點包括底板的邊框、螺絲釘及電源插頭，這些靜態(tài)元素節(jié)點為一個數(shù)組，數(shù)組中包含多個元素，每個元素包含類型、使用圖片、默認顏色、元素大小、相對底板位置、圖片中圖像位置、文本信息及字體信息； 步驟1D3.在底板的配置信息上構建底板上插槽的節(jié)點，插槽的節(jié)點中包括底板上能夠插入插卡的數(shù)量、位置信息、插槽類型及與...

【專利技術屬性】
技術研發(fā)人員：鄧鵬，
申請(專利權)人：邁普通信技術股份有限公司，
類型：發(fā)明
國別省市：