專利名稱：基于web的嵌入式設(shè)備中仿真面板實(shí)現(xiàn)方法
技術(shù)領(lǐng)域：
本發(fā)明涉及網(wǎng)絡(luò)管理技術(shù)，特別涉及基于WEB的嵌入式設(shè)備中仿真面板實(shí)現(xiàn)方法。
背景技術(shù)：
對(duì)于單臺(tái)的網(wǎng)絡(luò)通信設(shè)備，基于WEB的嵌入式設(shè)備管理是一種常用的管理方法和系統(tǒng)。對(duì)于基于WEB的嵌入式設(shè)備管理系統(tǒng)，擁有高仿真的設(shè)備面板更方便網(wǎng)絡(luò)管理員直觀的監(jiān)控網(wǎng)絡(luò)通信設(shè)備狀態(tài)，以及網(wǎng)絡(luò)業(yè)務(wù)配置。但是高仿真的設(shè)備面板的繪制過(guò)程往往需要大量的高清圖片，這些圖片會(huì)占用網(wǎng)絡(luò)通信設(shè)備的較大存儲(chǔ)空間，特別對(duì)于機(jī)架式網(wǎng)絡(luò)通信設(shè)備，可插入板卡類型和數(shù)量均比較多，在WEB上完成面板繪制、呈現(xiàn)和性能均有一定的技術(shù)難度，因此現(xiàn)有技術(shù)中沒(méi)有成熟的基于WEB的嵌入式設(shè)備管理系統(tǒng)中高仿真面板實(shí)現(xiàn)方法。·

發(fā)明內(nèi)容
本發(fā)明的目的就是克服目前沒(méi)有成熟的基于WEB的嵌入式設(shè)備管理系統(tǒng)中高仿真面板實(shí)現(xiàn)方法的缺點(diǎn)，提供一種基于WEB的嵌入式設(shè)備中仿真面板實(shí)現(xiàn)方法。本發(fā)明解決其技術(shù)問(wèn)題，采用的技術(shù)方案是，基于WEB的嵌入式設(shè)備中仿真面板實(shí)現(xiàn)方法，其特征在于，包括以下步驟步驟I.準(zhǔn)備繪制面板所需的仿真小圖片，定義面板信息的位置、大小及使用仿真小圖片的數(shù)據(jù)信息，得到仿真面板配置文件；步驟2.針對(duì)面板需要的數(shù)據(jù)信息訪問(wèn)設(shè)備，解析設(shè)備返回的數(shù)據(jù)生成端口和插卡的對(duì)象數(shù)組，得到設(shè)備數(shù)據(jù)；步驟3.根據(jù)仿真面板配置文件和設(shè)備數(shù)據(jù)構(gòu)建面板邏輯樹，邏輯樹包括底板、插卡、端口及靜態(tài)元素的位置、高度、寬度以及使用圖片或者文本串，并構(gòu)建層次關(guān)系；步驟4.根據(jù)面板邏輯樹，通過(guò)創(chuàng)建HTML的元素生成仿真面板，并顯示在WEB瀏覽器上；步驟5.對(duì)仿真面板上的HTML元素添加控制事件；步驟6.提供修改端口狀態(tài)的接口，業(yè)務(wù)模塊通過(guò)調(diào)用所述接口完成面板端口狀態(tài)的修改。進(jìn)一步的，步驟I中，所述面板信息包括底板、插卡和端口。再進(jìn)一步的，步驟I包括以下步驟步驟1A.準(zhǔn)備面板信息的仿真圖片；步驟1B.抽取面板信息的仿真圖片中的大面積顏色值及其對(duì)應(yīng)的矩形區(qū)域，拆分面板信息的仿真圖片中的靜態(tài)圖像，生成節(jié)點(diǎn)圖像；步驟1C.將拆分出的節(jié)點(diǎn)圖像合并為水平平鋪圖片、垂直平鋪圖片及不平鋪圖片；
步驟ID.將水平平鋪圖片、垂直平鋪圖片、不平鋪圖片及抽取的顏色值與設(shè)備面板建立對(duì)應(yīng)關(guān)系，構(gòu)建面板配置文件。具體的，步驟ID包括以下步驟 步驟1D1.構(gòu)建底板的配置信息，至少包括底板的寬度、高度及背景色參數(shù)；步驟1D2.在底板的配置信息上構(gòu)建底板上靜態(tài)元素節(jié)點(diǎn)，靜態(tài)元素節(jié)點(diǎn)包括底板的邊框、螺絲釘及電源插頭，這些靜態(tài)元素節(jié)點(diǎn)為一個(gè)數(shù)組，數(shù)組中包含多個(gè)元素，每個(gè)元素包含類型、使用圖片、默認(rèn)顏色、元素大小、相對(duì)底板位置、圖片中圖像位置、文本信息及字體信息；步驟1D3.在底板的配置信息上構(gòu)建底板上插槽的節(jié)點(diǎn)，插槽的節(jié)點(diǎn)中包括底板上插卡的數(shù)量、位置信息、插槽類型及與設(shè)備上讀取插卡數(shù)據(jù)的索引對(duì)應(yīng)關(guān)系；步驟1D4.構(gòu)建每種插卡類型的配置信息，至少包括插卡的大小、插卡的類型及背景色參數(shù)；步驟1D5.在插卡的配置信息上構(gòu)建插卡上靜態(tài)元素節(jié)點(diǎn)，靜態(tài)元素節(jié)點(diǎn)包括插卡的邊框，這些靜態(tài)元素節(jié)點(diǎn)為一個(gè)數(shù)組，數(shù)組中包含多個(gè)元素，每個(gè)元素包含類型、使用圖片、默認(rèn)顏色、元素大小、相對(duì)插卡的位置、圖片中圖像位置、文本信息及字體信息；步驟1D6.在插卡的配置信息上構(gòu)建插卡上的端口節(jié)點(diǎn)，端口節(jié)點(diǎn)中至少包括與端口定乂的關(guān)系、端口所在的位直及端口的名稱；步驟1D7.構(gòu)建端口配置信息，至少包括端口大小、端口文本大小、文本字體及狀態(tài)圖片。再進(jìn)一步的，步驟1D6中，所述端口節(jié)點(diǎn)中還包括端口顯示文本數(shù)據(jù)及端口文本的位置。具體的，步驟1D7中，所述狀態(tài)圖片指端口每種狀態(tài)所使用圖片、圖片中端口狀態(tài)圖像位置。再進(jìn)一步的，步驟1D3和步驟1D4之間還包括以下步驟步驟1D8.在底板的配置信息上構(gòu)建底板上的端口節(jié)點(diǎn)，端口節(jié)點(diǎn)中至少包括與端口定義的關(guān)系、端口所在的位置及端口的名稱。具體的，步驟1D8中，所述狀態(tài)圖片指端口每種狀態(tài)所使用圖片、圖片中端口狀態(tài)圖像位置。再進(jìn)一步的，步驟3包括以下步驟步驟3A.加載當(dāng)前設(shè)備的面板配置文件；步驟3B.計(jì)算面板的高度或?qū)挾?，及顯示高度或?qū)挾龋徊襟E3C.生成面板節(jié)點(diǎn)對(duì)象實(shí)例，至少包括節(jié)點(diǎn)所使用圖片、位置及大??；步驟3D.根據(jù)插卡的高度寬度及未插卡信息計(jì)算節(jié)點(diǎn)對(duì)象的顯示位置；步驟3E.組織各個(gè)節(jié)點(diǎn)對(duì)象間的關(guān)系，生成面板邏輯樹。具體的，步驟3還包括以下步驟步驟3F.生成設(shè)備面板翻頁(yè)模型。再進(jìn)一步的，步驟5中，所述控制事件包括底板的拖拽使用的鼠標(biāo)事件、端口選中鼠標(biāo)事件及端口拖拽觸發(fā)事件。包括以下步驟
步驟5Α·設(shè)置底板的mousedown事件，以實(shí)現(xiàn)拖拽翻頁(yè)功能；步驟5B.在底板的mousedown事件中修改document的事件，以實(shí)現(xiàn)拖拽翻頁(yè)功倉(cāng)泛;步驟5C. document事件處理拖拽翻頁(yè)效果和功能；步驟5D.設(shè)置端口的mousedown和mousemove事件，以完成拖放功能；
步驟5E.在端口的mousedown中通知拖放組件準(zhǔn)備拖放；步驟5F.在端口的mousemove中通知拖放組件開始拖放。本發(fā)明的有益效果是，通過(guò)上述基于WEB的嵌入式設(shè)備中面板實(shí)現(xiàn)的方法，可以看出其存儲(chǔ)的不是完整的高清圖片，而是壓縮后的仿真小圖片，所存儲(chǔ)圖片非常小，且達(dá)到的仿真程度高，和真實(shí)設(shè)備基本一致，且其組件所需要的存儲(chǔ)空間較小，另外，采用標(biāo)準(zhǔn)HTML標(biāo)簽，瀏覽器可以進(jìn)行兼容，不需要第三方插件，且仿真面板的加載速度較快。


圖I是本發(fā)明的基于WEB的嵌入式設(shè)備中仿真面板實(shí)現(xiàn)系統(tǒng)的結(jié)構(gòu)圖。圖2是本發(fā)明的仿真面板生成總體流程圖。圖3是本發(fā)明的仿真面板配置文件生成流程圖。圖4是本發(fā)明的面板邏輯樹生成流程圖。圖5是本發(fā)明的仿真面板翻頁(yè)控制流程圖。圖6是本發(fā)明的仿真面板端口拖放控制流程圖。
具體實(shí)施例方式下面結(jié)合實(shí)施例及附圖，詳細(xì)描述本發(fā)明的技術(shù)方案。本發(fā)明的仿真面板生成總體流程圖如圖2。本發(fā)明的基于WEB的嵌入式設(shè)備管理系統(tǒng)中仿真面板實(shí)現(xiàn)方法中，首先準(zhǔn)備繪制面板所需的仿真小圖片，定義面板信息的位置、大小及使用仿真小圖片的數(shù)據(jù)信息，得到仿真面板配置文件，然后針對(duì)面板需要的數(shù)據(jù)信息訪問(wèn)設(shè)備，解析設(shè)備返回的數(shù)據(jù)生成端口和插卡的對(duì)象數(shù)組，得到設(shè)備數(shù)據(jù)，再根據(jù)仿真面板配置文件和設(shè)備數(shù)據(jù)構(gòu)建面板邏輯樹，邏輯樹包括底板、插卡、端口及靜態(tài)元素的位置、高度、寬度以及使用圖片或者文本串，并構(gòu)建層次關(guān)系(層次關(guān)系是指各個(gè)元素間的所屬關(guān)系，比如底板上有插卡，插卡上有端口，底板上有端口，是指這樣的層次關(guān)系)，然后根據(jù)面板邏輯樹，通過(guò)創(chuàng)建HTML的元素生成仿真面板，并顯示在WEB瀏覽器上，最后對(duì)仿真面板上的HTML元素添加控制事件，且提供接口修改端口狀態(tài)，業(yè)務(wù)模塊能夠通過(guò)這些接口完成面板的狀態(tài)修改。實(shí)施例本發(fā)明實(shí)施例中，實(shí)現(xiàn)基于WEB的嵌入式設(shè)備中仿真面板實(shí)現(xiàn)系統(tǒng)被分成多個(gè)模塊，通過(guò)模塊之間的協(xié)同來(lái)完成面板的繪制和事件控制，其系統(tǒng)結(jié)構(gòu)圖如圖1，包括面板配置模塊該模塊完成仿真面板配置文件的生成。在設(shè)備上，存儲(chǔ)空間一般比較小，如果使用大圖片和多個(gè)圖片將會(huì)對(duì)設(shè)備造成壓力，在該模塊中需要縮小圖片大小和占用的空間，再將繪制面板的資源文件組織成面板繪制的配置文件，在該配置文件中說(shuō)明設(shè)備面板的界面狀態(tài)，具體的組成將在下述解釋圖3仿真面板配置文件生成流程圖中詳細(xì)說(shuō)明；設(shè)備訪問(wèn)模塊該模塊完成設(shè)備的訪問(wèn)，讀取設(shè)備的數(shù)據(jù)，將設(shè)備數(shù)據(jù)組織成繪制面板需要的數(shù)據(jù)信息，本發(fā)明中需要使用的設(shè)備的插卡和端口的數(shù)據(jù)，在本模塊中需要解析出當(dāng)前設(shè)備有哪些插卡、插卡對(duì)應(yīng)的插槽、有哪些端口、端口的模式(是光口還是電口)，提供給面板繪制組件的是兩個(gè)對(duì)象數(shù)組I、插卡對(duì)象中需要包含關(guān)鍵數(shù)據(jù)項(xiàng)有插卡的ID、插卡的類型、插卡的插槽位置；2、端口對(duì)象中需要包含關(guān)鍵數(shù)據(jù)項(xiàng)有端口名稱、端口的模式、端口的狀態(tài)；端口狀態(tài)在本發(fā)明中端口可以以多種狀態(tài)呈現(xiàn)在用戶面前，在面板配置模塊中會(huì)定義端口的狀態(tài)類別，在本模塊中提供端口狀態(tài)，使用模塊就可以根據(jù)自己的需要來(lái)呈現(xiàn)需要的端口狀態(tài)，比如紅色(代表down)、綠色(代表up)、灰色(代表非啟用端口)
面板邏輯樹模型該模塊屬于面板的數(shù)據(jù)結(jié)構(gòu)模型，沒(méi)有具體的邏輯處理過(guò)程，在該模型中說(shuō)明設(shè)備面板的底板、插卡和端口的關(guān)系和界面顯示位置以及大小和顯示的狀態(tài)，在該模塊中還需要包含面板頁(yè)面的數(shù)據(jù)模型對(duì)象，給翻頁(yè)模塊提供數(shù)據(jù)支持；I、面板邏輯樹中包含a)首先是面板的底板(或者說(shuō)機(jī)筐);b)在底板上有靜態(tài)的螺絲釘、電源插頭及電源按鈕等(可能還有很多，只要是設(shè)備上有的圖案都包含在這里面，比如絲印，商標(biāo)…)；c)在底板上還有插卡的節(jié)點(diǎn)；d)在插卡的節(jié)點(diǎn)上有靜態(tài)的螺絲釘?shù)?；e)在插卡的節(jié)點(diǎn)上有端口的節(jié)點(diǎn)；f)端口節(jié)點(diǎn)包含端口的具體狀態(tài)；2、在面板邏輯樹的各個(gè)節(jié)點(diǎn)中包含如下關(guān)鍵屬性 a)節(jié)點(diǎn)對(duì)應(yīng)HTML元素的位置；b)節(jié)點(diǎn)對(duì)應(yīng)HTML元素的大?。籧)節(jié)點(diǎn)使用的圖片資源和資源位置；d)在端口節(jié)點(diǎn)中還包含選中、未選中、各種狀態(tài)的圖片資源以及資源位置；3、翻頁(yè)組件中包含a)面板翻頁(yè)的方向橫向還是縱向；b)面板的總頁(yè)數(shù)；c)面板當(dāng)前顯示的頁(yè)；d)面板各個(gè)頁(yè)的高度或者寬度信息；仿真面板繪制模塊在有了面板邏輯樹模型后，就能夠在WEB中繪制出面板，本模塊就是結(jié)合面板邏輯樹模型在WEB中繪制面板，繪制過(guò)程比較簡(jiǎn)單，將面板邏輯樹模型中的節(jié)點(diǎn)按照模型中的層次關(guān)系在WEB創(chuàng)建HTML元素，可以按照以下步驟繪制I、繪制底板的HTML元素；2、繪制底板上的靜態(tài)螺絲釘?shù)菻TML元素；3、在底板上繪制插卡；4、繪制插卡上的靜態(tài)螺絲釘?shù)菻TML元素；5、繪制插卡上的端口 HTML元素；
6、繪制HTML元素都是在WEB中創(chuàng)建HTML標(biāo)簽、設(shè)置標(biāo)簽的位置、寬度、高度、背景圖；事件控制模塊在仿真面板繪制完成后，在視覺(jué)上有了面板的顯示效果，在本模塊更進(jìn)一步對(duì)面板元素的進(jìn)行事件控制，本發(fā)明中完成面板翻頁(yè)和端口拖拽的控制，詳細(xì)過(guò)程參見(jiàn)下述解釋圖5仿真面板翻頁(yè)控制流程圖和圖6仿真面板端口拖放控制流程圖的具體描述；設(shè)備仿真面板組件該模塊是組件的統(tǒng)一接口和所有子模塊的邏輯關(guān)聯(lián)部分，在上面描述的各個(gè)模塊中都有面板的部分功能，這些功能通過(guò)該模塊進(jìn)行關(guān)聯(lián)，具體的實(shí)現(xiàn)過(guò)程參見(jiàn)圖2 ；如圖2所示，仿真面板的繪制和控制過(guò)程需要六個(gè)大的步驟完成準(zhǔn)備仿真面板配置在該步驟中需要完成仿真面板配置文件，需要對(duì)資源文件進(jìn)行進(jìn)一步的拆分合并處理來(lái)減少存儲(chǔ)空間，再通過(guò)配置文件定義設(shè)備面板的具體界面狀態(tài)，該步驟比較復(fù)雜，將在下述解釋圖3仿真面板配置文件生成流程圖時(shí)詳細(xì)說(shuō)明； 設(shè)備數(shù)據(jù)訪問(wèn)要繪制設(shè)備的面板，需要設(shè)備的數(shù)據(jù)支持，在設(shè)備面板配置文件中說(shuō)明了設(shè)備面板具體界面狀態(tài)，但是設(shè)備具體有哪些插卡、哪些端口都需要從設(shè)備上才能知道，在本步驟中可以采用HTTP請(qǐng)求，通過(guò)AJAX的方式取得設(shè)備上的數(shù)據(jù)，在訪問(wèn)設(shè)備時(shí)可以采用設(shè)備交付命令SHELL的方式或者簡(jiǎn)單網(wǎng)絡(luò)管理協(xié)議SNMP的方式讀取設(shè)備的數(shù)據(jù)，讀取設(shè)備數(shù)據(jù)后，構(gòu)建插卡對(duì)象數(shù)據(jù)和端口對(duì)象數(shù)組；構(gòu)建面板邏輯樹模型該步驟需要構(gòu)建設(shè)備面板的邏輯結(jié)構(gòu)樹，以底板為起始節(jié)點(diǎn)，端口為終結(jié)節(jié)點(diǎn)構(gòu)建一顆樹，具體構(gòu)建過(guò)程參見(jiàn)后面的邏輯樹生成過(guò)程；繪制設(shè)備面板在有了面板邏輯樹模型后，就能夠在WEB中繪制出面板，本步驟就是結(jié)合面板邏輯樹模型在WEB中繪制面板，繪制過(guò)程比較簡(jiǎn)單，將面板邏輯樹模型中的節(jié)點(diǎn)按照模型中的層次關(guān)系在WEB創(chuàng)建HTML元素，可以按照以下步驟繪制I、繪制底板的HTML元素；2、繪制底板上的靜態(tài)螺絲釘?shù)菻TML元素；3、在底板上繪制插卡；4、繪制插卡上的靜態(tài)螺絲釘?shù)菻TML元素；5、繪制插卡上的端口 HTML元素；繪制HTML元素都是在WEB中創(chuàng)建HTML標(biāo)簽、設(shè)置標(biāo)簽的位置、寬度、高度、背景圖；添加面板事件控制在本步驟中，需要完成翻頁(yè)和端口拖放的事件控制，具體過(guò)程在翻頁(yè)事件控制和端口拖放事件控制中詳細(xì)說(shuō)明；設(shè)備面板端口狀態(tài)本步驟是可選步驟，是由用戶模塊觸發(fā)，如果用戶模塊需要修改端口狀態(tài)，調(diào)用面板組件的接口來(lái)修改面板的端口的狀態(tài)；如圖3所示，本流程中完成仿真面板配置文件的生成準(zhǔn)備設(shè)備真實(shí)面板圖片準(zhǔn)備各個(gè)面板信息的真實(shí)圖片，這個(gè)工作一般由美工完成，在項(xiàng)目中，需要準(zhǔn)備面板的底板圖片、設(shè)備支持的插卡的圖片、設(shè)備支持的各個(gè)端口的圖片以及端口對(duì)應(yīng)的多種狀態(tài)的圖片；這里所說(shuō)的每張圖片都是一個(gè)高保真的真實(shí)設(shè)備圖片；
拆分面板真實(shí)圖片對(duì)于端口來(lái)說(shuō)，不需要進(jìn)行拆分，對(duì)于底板和插卡來(lái)說(shuō)，先來(lái)抽取邊框，對(duì)于邊框首先抽取四個(gè)角，生成四張很小的圖片(可能所有插卡的四個(gè)角的圖片都一樣)，去掉四個(gè)角后，上下邊框就可以由寬度為I的圖片進(jìn)行平鋪得到，左右邊框就可以由高度為I的圖片進(jìn)行平鋪得到，這樣邊框圖片所占的空間就很小了。拆分了這些邊框后，我們?cè)賹?duì)其它部位的靜態(tài)圖象盡心拆分(比如螺絲釘、電源按鈕等等)，將這些圖片都單獨(dú)的放在獨(dú)立的文件中。合并圖片根據(jù)拆分出的很多小圖片，在本步驟中，將這些小圖片以圖像的形式按照拆分方式合并為三張圖片水平平鋪的圖片，將上面提到的所要上下邊框的圖片放到這一張圖片中；垂直平鋪的圖片，將上面提到的所有左右邊框的圖片放到這一張圖片中；不平鋪的圖片，將上面提到的靜態(tài)圖象、各個(gè)狀態(tài)的端口圖片都放到這樣張圖片中。記錄合并圖片的位置信息生成上述三張圖片的同時(shí)需要記錄下放入的位置，放到哪張圖片中，以及這些圖像是需要如何平鋪。構(gòu)建仿真面板配置文件準(zhǔn)備上面三張圖片后，將這三張圖片和抽取的顏色值需·要與設(shè)備面板建立對(duì)應(yīng)的關(guān)系，構(gòu)建仿真面板配置文件，包含以下詳細(xì)步驟I.定義設(shè)備的底板背景色，在配置文件中首先定義設(shè)備面板的寬度，高度，背景色參數(shù)；例如我們采用JSON的數(shù)據(jù)格式可以定義如下
root : {
size [776,370], backgroundColor : ’ #2e5a63’
}
}2.定義設(shè)備底板底板靜態(tài)元素，這里的靜態(tài)元素包含了底板的邊框、螺絲釘及電源插頭等，這里定義的是一個(gè)數(shù)組，是多個(gè)元素，數(shù)組中的每個(gè)元素包含類型、使用圖片、默認(rèn)顏色、元素大小、相對(duì)底板位置、圖片中圖象位置、文本信息、字體信息等等(這些信息根據(jù)情況而定)，比如，我這里定義底板的邊框和部分螺絲釘，定義如下(在本例子中fixy.jpg為垂直平鋪的圖片、fixx. jpg為水平平鋪的圖片、fixed, jpg為不平鋪的圖片)，在例子定義中有positions和sizes,主要是為了同一個(gè)圖片在多個(gè)地方使用，對(duì)此還可以自由定義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·
權(quán)利要求
1.基于WEB的嵌入式設(shè)備中仿真面板實(shí)現(xiàn)方法，其特征在于，包括以下步驟 步驟I.準(zhǔn)備繪制面板所需的仿真小圖片，定義面板信息的位置、大小及使用仿真小圖片的數(shù)據(jù)信息，得到仿真面板配置文件； 步驟2.針對(duì)面板需要的數(shù)據(jù)信息訪問(wèn)設(shè)備，解析設(shè)備返回的數(shù)據(jù)生成端口和插卡的對(duì)象數(shù)組，得到設(shè)備數(shù)據(jù)；步驟3.根據(jù)仿真面板配置文件和設(shè)備數(shù)據(jù)構(gòu)建面板邏輯樹，邏輯樹包括仿真面板底板、插卡、端口及靜態(tài)元素的位置、高度、寬度以及使用圖片或者文本串，并構(gòu)建層次關(guān)系；步驟4.根據(jù)面板邏輯樹，通過(guò)創(chuàng)建HTML的元素生成仿真面板，并顯示在WEB瀏覽器上； 步驟5.對(duì)仿真面板上的HTML元素添加控制事件； 步驟6.提供修改端口狀態(tài)的接口，業(yè)務(wù)模塊通過(guò)調(diào)用所述接口完成面板端口狀態(tài)的修改。
2.如權(quán)利要求I所述的基于WEB的嵌入式設(shè)備中仿真面板實(shí)現(xiàn)方法，其特征在于，步驟I中，所述面板信息包括底板、插卡和端口。
3.如權(quán)利要求I或2所述的基于WEB的嵌入式設(shè)備中仿真面板實(shí)現(xiàn)方法，其特征在于，步驟I包括以下步驟 步驟1A.準(zhǔn)備面板信息的仿真圖片； 步驟1B.抽取面板信息的仿真圖片中的大面積顏色值及其對(duì)應(yīng)的矩形區(qū)域，拆分面板信息的仿真圖片中的靜態(tài)圖像，生成節(jié)點(diǎn)圖像； 步驟1C.將拆分出的節(jié)點(diǎn)圖像合并為水平平鋪圖片、垂直平鋪圖片及不平鋪圖片；步驟1D.將水平平鋪圖片、垂直平鋪圖片、不平鋪圖片及抽取的顏色值與設(shè)備面板建立對(duì)應(yīng)關(guān)系，構(gòu)建面板配置文件。
4.如權(quán)利要求3所述的基于WEB的嵌入式設(shè)備中仿真面板實(shí)現(xiàn)方法，其特征在于，步驟ID包括以下步驟 步驟1D1.構(gòu)建底板的配置信息，至少包括底板的寬度、高度及背景色參數(shù)； 步驟1D2.在底板的配置信息上構(gòu)建底板上靜態(tài)元素節(jié)點(diǎn)，靜態(tài)元素節(jié)點(diǎn)包括底板的邊框、螺絲釘及電源插頭，這些靜態(tài)元素節(jié)點(diǎn)為一個(gè)數(shù)組，數(shù)組中包含多個(gè)元素，每個(gè)元素包含類型、使用圖片、默認(rèn)顏色、元素大小、相對(duì)底板位置、圖片中圖像位置、文本信息及字體信息； 步驟1D3.在底板的配置信息上構(gòu)建底板上插槽的節(jié)點(diǎn)，插槽的節(jié)點(diǎn)中包括底板上能夠插入插卡的數(shù)量、位置信息、插槽類型及與設(shè)備上讀取插卡數(shù)據(jù)的索引對(duì)應(yīng)關(guān)系； 步驟1D4.構(gòu)建每種類型插卡的配置信息，至少包括插卡的大小、插卡的類型及背景色參數(shù)； 步驟1D5.在插卡的配置信息上構(gòu)建插卡上靜態(tài)元素節(jié)點(diǎn)，靜態(tài)元素節(jié)點(diǎn)包括插卡的邊框，這些靜態(tài)元素節(jié)點(diǎn)為一個(gè)數(shù)組，數(shù)組中包含多個(gè)元素，每個(gè)元素包含類型、使用圖片、默認(rèn)顏色、元素大小、相對(duì)插卡的位置、圖片中圖像位置、文本信息及字體信息； 步驟1D6.在插卡的配置信息上構(gòu)建插卡上的端口節(jié)點(diǎn)，端口節(jié)點(diǎn)中至少包括與端口定義的關(guān)系、端口所在的位置及端口的名稱； 步驟1D7.構(gòu)建端口配置信息，至少包括端口大小、端口文本大小、文本字體及狀態(tài)圖片。
5.如權(quán)利要求4所述的基于WEB的嵌入式設(shè)備中仿真面板實(shí)現(xiàn)方法，其特征在于，步驟1D6中，所述端口節(jié)點(diǎn)中還包括端口顯示文本數(shù)據(jù)及端口文本的位置。
6.如權(quán)利要求4所述的基于WEB的嵌入式設(shè)備中仿真面板實(shí)現(xiàn)方法，其特征在于，步驟1D7中，所述狀態(tài)圖片指端口每種狀態(tài)所使用圖片、圖片中端口狀態(tài)圖像位置。
7.如權(quán)利要求4所述的基于WEB的嵌入式設(shè)備中仿真面板實(shí)現(xiàn)方法，其特征在于，步驟1D3和步驟1D4之間還包括以下步驟 步驟1D8.在底板的配置信息上構(gòu)建底板上的端口節(jié)點(diǎn)，端口節(jié)點(diǎn)中至少包括與端口定義的關(guān)系、端口所在的位置及端口的名稱。
8.如權(quán)利要求7所述的基于WEB的嵌入式設(shè)備中仿真面板實(shí)現(xiàn)方法，其特征在于，步驟1D8中，所述狀態(tài)圖片指端口每種狀態(tài)所使用圖片、圖片中端口狀態(tài)圖像位置。
9.如權(quán)利要求3所述的基于WEB的嵌入式設(shè)備中仿真面板實(shí)現(xiàn)方法，其特征在于，步驟3包括以下步驟 步驟3A.加載當(dāng)前設(shè)備的面板配置文件； 步驟3B.計(jì)算面板的高度或?qū)挾龋帮@示高度或?qū)挾龋? 步驟3C.生成面板節(jié)點(diǎn)對(duì)象實(shí)例，至少包括節(jié)點(diǎn)所使用圖片、位置及大??； 步驟3D.根據(jù)插卡的高度寬度及未插插卡信息計(jì)算節(jié)點(diǎn)對(duì)象的顯示位置； 步驟3E.組織各個(gè)節(jié)點(diǎn)對(duì)象間的關(guān)系，生成面板邏輯樹。
10.如權(quán)利要求9所述的基于WEB的嵌入式設(shè)備中仿真面板實(shí)現(xiàn)方法，其特征在于，步驟3還包括以下步驟 步驟3F.生成設(shè)備面板翻頁(yè)模型。
全文摘要
本發(fā)明涉及網(wǎng)絡(luò)管理技術(shù)。本發(fā)明解決了目前沒(méi)有成熟的基于WEB的嵌入式設(shè)備管理系統(tǒng)中高仿真面板實(shí)現(xiàn)方法的問(wèn)題，提供了一種基于WEB的嵌入式設(shè)備中仿真面板實(shí)現(xiàn)方法，其技術(shù)方案可概括為首先得到仿真面板配置文件，然后針對(duì)面板需要的數(shù)據(jù)信息訪問(wèn)設(shè)備，得到設(shè)備數(shù)據(jù)，再根據(jù)仿真面板配置文件和設(shè)備數(shù)據(jù)構(gòu)建面板邏輯樹，并構(gòu)建層次關(guān)系，然后根據(jù)面板邏輯樹，通過(guò)創(chuàng)建HTML的元素生成仿真面板，并在瀏覽器上顯示，再添加控制事件，最后提供修改端口狀態(tài)的接口，業(yè)務(wù)模塊通過(guò)調(diào)用接口完成面板端口狀態(tài)的修改。本發(fā)明的有益效果是仿真程度高，且其組件所需要的存儲(chǔ)空間較小，適用于基于WEB的嵌入式設(shè)備中的仿真面板顯示。
文檔編號(hào)G06F9/44GK102902527SQ201210316869
公開日2013年1月30日 申請(qǐng)日期2012年8月31日 優(yōu)先權(quán)日2012年8月31日
發(fā)明者鄧鵬 申請(qǐng)人:邁普通信技術(shù)股份有限公司