專利名稱：基于ie瀏覽器的系統(tǒng)資源動態(tài)顯示方法及系統(tǒng)的制作方法
技術(shù)領(lǐng)域：
本發(fā)明涉及一種網(wǎng)絡(luò)管理技術(shù)，尤其涉及基于IE瀏覽器的儀表盤動態(tài)顯示嵌入式設(shè)備系統(tǒng)資源的方法和系統(tǒng)。
背景技術(shù)：
為了更加直觀，在WEB瀏覽器上通過儀表盤顯示某些嵌入式設(shè)備的系統(tǒng)資源信息(如CPU資源的利用率，帶寬利用率等等)，是目前比較通用的做法；要完成系統(tǒng)資源利用率的動態(tài)顯示例如從0%到100%，儀表盤的指針需要從一個角度旋轉(zhuǎn)到另外一個角度。所以系統(tǒng)資源的動態(tài)顯示，關(guān)鍵技術(shù)在于儀表盤的指針旋轉(zhuǎn)問題，特別是在IE這類瀏覽器下，對圖片旋轉(zhuǎn)的支持在滿足儀表盤的指針旋轉(zhuǎn)時存在一定的問題；
在IE瀏覽器下旋轉(zhuǎn)圖片是通過filter (濾鏡)方式支持，其旋轉(zhuǎn)方式有兩種Uauto expand (自動擴張):這種方式旋轉(zhuǎn)會修改圖片的顯示位置,這樣就不能按照一個中心點進行旋轉(zhuǎn)，中心點的位置會隨著角度漂移，如果動態(tài)調(diào)整中心點，中心點的位置不能調(diào)整到同一個點上，會有明顯的跳躍視覺效果；2、clip to original (原始裁剪)這種方式會裁剪圖片，并且只有在旋轉(zhuǎn)角度為0-90度可顯示部分圖片，其它角度無法正常顯示圖片，并且在旋轉(zhuǎn)角度0-90時，圖片顯示不完全，不能達到理想的效果；目前為解決在WEB瀏覽器上基于IE瀏覽器的系統(tǒng)資源動態(tài)顯示的現(xiàn)有實現(xiàn)方案中，儀表盤的制作和旋轉(zhuǎn)一般采用如下兩種方式I、采用畫圖插件，這種方式需要第三方插件支持，實用性不是很好；2、采用HTML元素模擬畫點函數(shù)，這種方式需要的HTML標簽會很多，影響性能，并且繪制的指針效果不是很好，不能達到滿意的需求。因此，提供一種新的基于IE瀏覽器的系統(tǒng)資源動態(tài)顯示的方式，是亟待解決的問題。

發(fā)明內(nèi)容
本發(fā)明所要解決的技術(shù)問題是提出一種基于IE瀏覽器的系統(tǒng)資源動態(tài)顯示方法，采用儀表盤顯示系統(tǒng)資源，解決傳統(tǒng)技術(shù)中采用畫圖插件的方式制作儀表盤需要插件支持，實用性不好以及采用HTML元素模擬畫點函數(shù)的方式制作儀表盤，繪制的指針效果不好的問題。本發(fā)明解決上述技術(shù)問題所采用的方案是一種基于IE瀏覽器的系統(tǒng)資源動態(tài)顯示方法，其包括以下步驟A.設(shè)備數(shù)據(jù)訪問模塊從嵌入式設(shè)備讀取嵌入式設(shè)備系統(tǒng)資源利用狀態(tài)的數(shù)據(jù)；B.設(shè)備數(shù)據(jù)轉(zhuǎn)換模塊將所述設(shè)備數(shù)據(jù)訪問模塊讀取的嵌入式設(shè)備的系統(tǒng)資源利用狀態(tài)數(shù)據(jù)轉(zhuǎn)換為用于顯示的百分比數(shù)值；C.設(shè)備資源顯示模塊利用創(chuàng)建的儀表盤顯示嵌入式設(shè)備的系統(tǒng)資源利用率。
優(yōu)選地,步驟C具體包括
Cl、設(shè)備資源顯示模塊判斷是否存在用于顯示嵌入式設(shè)備系統(tǒng)資源利用率的儀表盤，如否，則執(zhí)行C2 ;如是，則執(zhí)行C3 ；
C2、設(shè)備資源顯示模塊首先創(chuàng)建儀表盤，再利用已創(chuàng)建的儀表盤顯示嵌入式設(shè)備的系統(tǒng)資源利用狀態(tài)；
C3、設(shè)備資源顯示模塊利用已創(chuàng)建的儀表盤，根據(jù)嵌入式設(shè)備的系統(tǒng)資源利用狀態(tài)數(shù)據(jù)百分比數(shù)值，顯示嵌入式設(shè)備的系統(tǒng)資源利用率。
優(yōu)選地,步驟C2具體包括
C21，在超文本標記語言HTML中創(chuàng)建一個DIV (分區(qū))層，并設(shè)置該層的背景圖片為選擇的帶有刻度的儀表盤圖片；
C22.在步驟C21中創(chuàng)建的DIV層的基礎(chǔ)上，依次創(chuàng)建A、B、C三個DIV層，其中A 層位于步驟C21中創(chuàng)建的DIV層的上一層，C層位于最外層，B層位于A層和C層之間，并分別對A、B、C三個DIV層進行屬性設(shè)置。
具體地，在步驟C22中，設(shè)置C層背景圖片為選擇的儀表盤的指針圖片。
具體地，在步驟C22中，設(shè)置B、C層的旋轉(zhuǎn)方式為才原始裁剪模式clip to original,設(shè)置A層的旋轉(zhuǎn)方式為自動擴張auto expand。
優(yōu)選地,步驟C3具體包括
C31.將嵌入式設(shè)備的系統(tǒng)資源利用狀態(tài)數(shù)據(jù)的百分比數(shù)值，轉(zhuǎn)換為所述指針圖片的旋轉(zhuǎn)角度值；
C32.利用所述指針圖片的旋轉(zhuǎn)角度值，計算A、B、C三層的旋轉(zhuǎn)角度值，通過Α、Β、 C三層的共同旋轉(zhuǎn)完成所述指針圖片在儀表盤圖片上的指示。
具體地，在步驟C31中，將嵌入式設(shè)備的系統(tǒng)資源利用狀態(tài)數(shù)據(jù)的百分比數(shù)值，轉(zhuǎn)換為所述指針圖片的旋轉(zhuǎn)角度值是指，根據(jù)當(dāng)前指針圖片中的指針所指向的儀表盤圖片中百分比數(shù)值，以及當(dāng)前獲取的嵌入式設(shè)備的系統(tǒng)資源利用狀態(tài)數(shù)據(jù)的百分比數(shù)值，由開發(fā)人員進行調(diào)試比對后獲取指針圖片的旋轉(zhuǎn)角度值。
具體地，在步驟C32中，通過A、B、C三層的共同旋轉(zhuǎn)完成指針在儀表盤上的指示， 假設(shè)所述指針圖片的旋轉(zhuǎn)角度值為deg，具體包括
C321.設(shè)置A層的旋轉(zhuǎn)角度為所述指針圖片的旋轉(zhuǎn)角度值deg與30相加的和整除90得到倍數(shù)，將倍數(shù)乘以90后的值；
C322.設(shè)置B層的旋轉(zhuǎn)角度為所述指針圖片的旋轉(zhuǎn)角度值deg整除30得到30的倍數(shù)，將倍數(shù)與3求余，余數(shù)值為O時，B層的旋轉(zhuǎn)角度為0，余數(shù)為I時，B層的旋轉(zhuǎn)角度為30，余數(shù)為2時，B的旋轉(zhuǎn)角度為330 ；
C323.設(shè)置C層的旋轉(zhuǎn)角度為所述指針圖片的旋轉(zhuǎn)角度值deg除以30的余數(shù)；
C324.設(shè)置B層的邊距屬性，使得所述指針圖片的中心位置和儀表盤圖片的中心位置重合。
本發(fā)明的另一個目的，提供實施上述基于IE瀏覽器的系統(tǒng)資源動態(tài)顯示方法的系統(tǒng)，具體包括
設(shè)備數(shù)據(jù)訪問模塊，用于從嵌入式設(shè)備讀取嵌入式設(shè)備系統(tǒng)資源利用狀態(tài)的數(shù)據(jù)；CN 102929624 A書明說3/9頁
設(shè)備數(shù)據(jù)轉(zhuǎn)換模塊，用于將所述設(shè)備數(shù)據(jù)訪問模塊讀取的嵌入式設(shè)備的系統(tǒng)資源利用狀態(tài)數(shù)據(jù)轉(zhuǎn)換為用于顯示的百分比數(shù)值；
設(shè)備資源顯示模塊，用于利用創(chuàng)建的儀表盤顯示嵌入式設(shè)備的系統(tǒng)資源利用率。
本發(fā)明的有益效果是無需采用畫圖插件，實用性好，通過三層DIV層共同旋轉(zhuǎn)的方式完成指針圖片在儀表盤圖片上的指示，避免了單獨采用一種方式旋轉(zhuǎn)造成的視覺跳躍或圖片顯示不完全的問題出現(xiàn)，動態(tài)顯示嵌入式設(shè)備系統(tǒng)資源利率的效果更佳。


圖I為本發(fā)明實施例的基于IE瀏覽器的系統(tǒng)資源動態(tài)顯示方法流程圖。
圖2為本發(fā)明實施例設(shè)備資源顯示模塊創(chuàng)建儀表盤的流程圖。
圖3為本發(fā)明實施例選擇的儀表盤圖片的示意圖。
圖4為本發(fā)明實施例選擇的儀表盤的指針圖片的示意圖。
圖5為本發(fā)明基于IE瀏覽器的系統(tǒng)資源動態(tài)顯示系統(tǒng)的結(jié)構(gòu)框圖。
具體實施方式
下面結(jié)合附圖及具體實施例對本發(fā)明的技術(shù)方案作進一步的描述。
如圖I所示，一種基于IE瀏覽器的系統(tǒng)資源動態(tài)顯示方法，共分為三個步驟
步驟101，系統(tǒng)的設(shè)備數(shù)據(jù)訪問模塊從嵌入式設(shè)備讀取嵌入式設(shè)備系統(tǒng)資源利用狀態(tài)的數(shù)據(jù)。這里讀取的數(shù)據(jù)是原始的數(shù)據(jù)，而且網(wǎng)絡(luò)管理系統(tǒng)訪問嵌入式設(shè)備并讀取設(shè)備數(shù)據(jù)是現(xiàn)有技術(shù)，一般實現(xiàn)方式為嵌入式設(shè)備利用超文本傳輸協(xié)議HTTP單獨啟動一個服務(wù)，并利用其配置命令讀取設(shè)備系統(tǒng)資源的狀態(tài)信息，通過HTTP協(xié)議傳輸?shù)絀E瀏覽器。
步驟102，設(shè)備數(shù)據(jù)轉(zhuǎn)換模塊將所述設(shè)備數(shù)據(jù)訪問模塊讀取的嵌入式設(shè)備的系統(tǒng)資源利用狀態(tài)數(shù)據(jù)轉(zhuǎn)換為用于顯示的百分比數(shù)值。在本步驟中，設(shè)備數(shù)據(jù)轉(zhuǎn)換模塊通過文本解析，解析出嵌入式設(shè)備的系統(tǒng)資源利用狀態(tài)數(shù)據(jù)，形成用于顯示的百分比數(shù)值。
步驟103，系統(tǒng)的設(shè)備資源顯示模塊利用創(chuàng)建的儀表盤顯示嵌入式設(shè)備的系統(tǒng)資源利用率。本步驟中設(shè)備資源顯示模塊首先判斷是否存在用于顯示嵌入式設(shè)備系統(tǒng)資源利用率的儀表盤，如是，則直接利用已創(chuàng)建的儀表盤根據(jù)步驟102中轉(zhuǎn)換后的嵌入式設(shè)備的系統(tǒng)資源利用狀態(tài)數(shù)據(jù)，顯示嵌入式設(shè)備的系統(tǒng)資源利用狀態(tài)，該已創(chuàng)建的儀表盤可以是預(yù)先創(chuàng)建的，也可以是在進行第一次顯示之前創(chuàng)建的；如否，則設(shè)備資源顯示模塊首先創(chuàng)建儀表盤，再利用已創(chuàng)建的儀表盤顯示嵌入式設(shè)備的系統(tǒng)資源利用狀態(tài)。
設(shè)備資源顯示模塊創(chuàng)建儀表盤的具體流程圖參見圖2，包括如下步驟
步驟1031，在HTML中創(chuàng)建一個分區(qū)DIV層，并設(shè)置該層的背景圖片為選擇的帶有刻度的儀表盤圖片。圖3為本發(fā)明實施例選擇的儀表盤圖片的示意圖，用于顯示嵌入式設(shè)備CPU資源的利用率。在本步驟中，創(chuàng)建的第一個DIV層的位置屬性為相對位置即 position:relative,指定該層的寬度和高度分別為所選擇的帶有刻度的儀表盤圖片的寬度和高度。
步驟1032，在步驟1031中創(chuàng)建的DIV層的基礎(chǔ)上，依次創(chuàng)建A、B、C三個DIV層， 其中A層位于步驟1031中創(chuàng)建的DIV層的上一層，C層位于最外層，B層位于A層和C層之間，并分別對A、B、C三個DIV層進行屬性設(shè)置；具體實現(xiàn)方法為7
a)創(chuàng)建一個DIV層A，將A添加到第一個DIV層內(nèi)，設(shè)置A的屬性
位置屬性為絕對位置即position:absolute
高度儀表盤圖片的高度；寬度儀表盤圖片的寬度
位置top:O,left:O
通過濾鏡的方式設(shè)置旋轉(zhuǎn)方式自動擴張(auto expand)，旋轉(zhuǎn)角度為O
b)創(chuàng)建一個DIV層B，將B添加到A內(nèi)設(shè)置B的屬性
位置屬性為絕對位置即position:absolute
高度儀表盤圖片的高度；寬度儀表盤圖片的寬度
位置top:0，left:O
邊距margin:0px
通過濾鏡的方式設(shè)置旋轉(zhuǎn)方式原始裁剪模式(clip tooriginal),旋轉(zhuǎn)角度為O
c)創(chuàng)建一個DIV層C，將C添加到B內(nèi)；設(shè)置C的屬性
背景圖片為選擇的儀表盤的指針圖片，圖4為本發(fā)明實施例選擇的儀表盤的指針圖片的不意圖
高度儀表盤的指針圖片高度；寬度儀表盤的指針圖片高度
位置top:0，left:O
設(shè)置左邊距(margin-left)、上邊距(margin-top)的屬性，達到儀表盤的指針圖片的中心位置與選擇的儀表盤圖標的中心位置重合
通過濾鏡的方式設(shè)置旋轉(zhuǎn)方式clip tooriginal,旋轉(zhuǎn)角度為O
設(shè)備資源顯示模塊利用已創(chuàng)建的儀表盤，并根據(jù)步驟102中轉(zhuǎn)換后的嵌入式設(shè)備的系統(tǒng)資源利用狀態(tài)數(shù)據(jù)，通過A、B、C三層的共同旋轉(zhuǎn)完成指針在儀表盤上的指示，顯示嵌入式設(shè)備系統(tǒng)資源利用率，具體包括如下步驟
a)將嵌入式設(shè)備的系統(tǒng)資源利用狀態(tài)數(shù)據(jù)的百分比值，轉(zhuǎn)換為選擇的儀表盤的指針圖片的旋轉(zhuǎn)角度值。具體是根據(jù)當(dāng)前指針圖片中的指針所指向的儀表盤圖片中百分比數(shù)值(刻度值)，以及當(dāng)前獲取的嵌入式設(shè)備的系統(tǒng)資源利用狀態(tài)數(shù)據(jù)的百分比值，由開發(fā)人員進行調(diào)試比對后獲取指針圖片的旋轉(zhuǎn)角度值；
b)利用所述指針圖片的旋轉(zhuǎn)角度值，計算A、B、C三層的旋轉(zhuǎn)角度值，通過A、B、C 三層的共同旋轉(zhuǎn)完成所述指針圖片在儀表盤圖片上的指示。假設(shè)針圖片旋轉(zhuǎn)角度值為deg， 設(shè)置A層的旋轉(zhuǎn)角度為所述指針圖片的旋轉(zhuǎn)角度值deg與30相加的和整除90得到倍數(shù)， 將倍數(shù)乘以90后的值；設(shè)置B層的旋轉(zhuǎn)角度為所述指針圖片的旋轉(zhuǎn)角度值deg整除30得到30的倍數(shù)，將倍數(shù)與3求余，余數(shù)值為O時，B層的旋轉(zhuǎn)角度為0，余數(shù)為I時，B層的旋轉(zhuǎn)角度為30，余數(shù)為2時，B的旋轉(zhuǎn)角度為330 ;設(shè)置C層的旋轉(zhuǎn)角度為所述指針圖片的旋轉(zhuǎn)角度值deg除以30的余數(shù)；設(shè)置B層的邊距屬性，使得所述指針圖片的中心位置和儀表盤圖片的中心位置重合。具體設(shè)置過程如下
I)當(dāng)指針圖片旋的轉(zhuǎn)角度值deg為0-30度之間時，則C順時針旋轉(zhuǎn)deg，B不旋轉(zhuǎn)，A不旋轉(zhuǎn)；即分別設(shè)置A、B、C三層的屬性
設(shè)置A 的濾鏡屬性 Matrix 中的 Mll=I, M12=0, M21=0, M22=l
設(shè)置B 的濾鏡屬性 Matrix 中的 Mll=I, M12=0, M21=0, M22=l
設(shè)置B 的邊距屬性 margin-left: Opx, margin-top: Opx
設(shè)置C的濾鏡屬性Matrix中的
Mll=Math. cos (aDeg*Math. PI*2/360)
M12=-Math. sin (aDeg*Math. PI*2/360)
M2I=Math. sin (aDeg*Math. PI*2/360)
M22=Math. cos (aDeg*Math. PI*2/360)
2)當(dāng)指針圖片的旋轉(zhuǎn)角度值deg為30-60度之間時，則C順時針旋轉(zhuǎn)deg-30，B順時針旋轉(zhuǎn)30°，A不旋轉(zhuǎn)；即分別設(shè)置A、B、C三層的屬性
設(shè)置A 的濾鏡屬性 Matrix 中的 Mll=l，M12=0，M21=0;M22=1
設(shè)置B的濾鏡屬性Matrix中的
Mll=Math. cos(30*Math. PI*2/360)
M12=-Math. sin(30*Math. PI*2/360)
M2I=Math. sin(30*Math. PI*2/360)
M22=Math. cos (30*Math. PI*2/360)
設(shè)置B 的邊距屬性 margin-left :51px，margin-top: -29px
設(shè)置C的濾鏡屬性Matrix中的
Mll=Math. cos((aDeg-30)*Math. PI*2/360)
M12=-Math. sin((aDeg-30)^Math. PI*2/360)
M2I=Math. sin((aDeg-30)*Math. PI*2/360)
M22=Math. cos ((aDeg-30) ^Math. PI*2/360)
3)當(dāng)指針圖片的旋轉(zhuǎn)角度值deg為60-90度之間時，則C順時針旋轉(zhuǎn)deg-60，B順時針旋轉(zhuǎn)60°，A不旋轉(zhuǎn)；即分別設(shè)置A、B、C三層的屬性
設(shè)置A 的濾鏡屬性 Matrix 中的 M11=0，M12=_l，M21=l，M22=0
設(shè)置B的濾鏡屬性Matrix中的
Mll=Math. cos (330*Math. PI*2/360)
M12=-Math. sin (330*Math. PI*2/360)
M21=Math. sin (330*Math. PI*2/360)
M22=Math. cos (330*Math. PI*2/360)
設(shè)置B 的邊距屬性 margin-left :_29px，margin-top: 58px
設(shè)置C的濾鏡屬性Matrix中的
Mll=Math. cos ((aDeg-60) *Math. PI*2/360)
M12=-Math. sin ((aDeg-60) ^Math. PI*2/360)
M2I=Math. sin ((aDeg-60) ^Math. PI*2/360)
M22=Math. cos ((aDeg-60) ^Math. PI*2/360)
4)當(dāng)指針圖片的旋轉(zhuǎn)角度值deg為90-120度之間時，則C順時針旋轉(zhuǎn)deg-90，B 不旋轉(zhuǎn)，A順時針旋轉(zhuǎn)90° ;即分別設(shè)置A、B、C三層的屬性
設(shè)置A 的濾鏡屬性 Matrix 中的 M11=0，M12=_l，M21=l，M22=0
設(shè)置B 的濾鏡屬性 Matrix 中的 Mll=l，M12=0，M21=0，M22=l
設(shè)置B 的邊距屬性 margin-left :_lpx，margin-top: 9px
設(shè)置C的濾鏡屬性Matrix中的
Mll=Math. cos((aDeg-90)*Math. PI*2/360)
M12=-Math. sin((aDeg-90)*Math. PI*2/360)
M2I=Math. sin((aDeg-90)*Math. PI*2/360)
M22=Math. cos((aDeg-90)*Math. PI*2/360)
5)當(dāng)指針圖片的旋轉(zhuǎn)角度值deg為120-150度之間時，則C順時針旋轉(zhuǎn)deg-120,B順時針旋轉(zhuǎn)30°，A順時針旋轉(zhuǎn)90° ;即分別設(shè)置A、B、C三層的屬性
設(shè)置 A 的濾鏡屬性 Matrix 中的 Mll=O, M12=_l, M21=l, M22=0
設(shè)置B的濾鏡屬性Matrix中的
Mll=Math. cos(30*Math. PI*2/360)
M12=-Math. sin(30*Math. PI*2/360)
M2I=Math. sin(30*Math. PI*2/360)
M22=Math. cos(30*Math. PI*2/360)
設(shè)置 B 的邊距屬性 margin-left: 49px, margin-top: _21px
設(shè)置C的濾鏡屬性Matrix中的
Mll=Math. cos((aDeg-120)*Math. PI*2/360)
M12=-Math. sin((aDeg-120)*Math. PI*2/360)
M2I=Math. sin((aDeg-120)*Math. PI*2/360)
M22=Math. cos((aDeg-120)*Math. PI*2/360)
6)當(dāng)指針圖片的旋轉(zhuǎn)角度值deg為150-180度之間時，則C順時針旋轉(zhuǎn)deg-150,B順時針旋轉(zhuǎn)60°，A順時針旋轉(zhuǎn)90° ;即分別設(shè)置A、B、C三層的屬性
設(shè)置 A 的濾鏡屬性 Matrix 中的 Mll=-I, M12=0, M21=0, M22=_l
設(shè)置B的濾鏡屬性Matrix中的
Mll=Math. cos(330*Math. PI*2/360)
M12=-Math. sin(330*Math. PI*2/360)
M2I=Math. sin(330*Math. PI*2/360)
M22=Math. cos(330*Math. PI*2/360)
設(shè)置 B 的邊距屬性 margin-left: -21px, margin-top: 60px
設(shè)置C的濾鏡屬性Matrix中的
Mll=Math. cos((aDeg-150)*Math. PI*2/360)
M12=-Math. sin((aDeg-150)*Math. PI*2/360)
M2I=Math. sin((aDeg-150)*Math. PI*2/360)
M22=Math. cos((aDeg-150)*Math. PI*2/360)
7)當(dāng)指針圖片的旋轉(zhuǎn)角度值deg為180-210度之間時，則C順時針旋轉(zhuǎn)deg-180,B不旋轉(zhuǎn)，A順時針旋轉(zhuǎn)180° ；即分別設(shè)置A、B、C三層的屬性
設(shè)置 A 的濾鏡屬性 Matrix 中的 Mll=-I, M12=0, M21=0, M22=_l
設(shè)置 B 的濾鏡屬性 Matrix 中的 Mll=I, M12=0, M21=0, M22=l
設(shè)置 B 的邊距屬性 margin-left: IOpx, margin-top: 9px
設(shè)置C的濾鏡屬性Matrix中的
MlI=Math. cos((aDeg-180)*Math. PI*2/360)10
M12=-Math. sin((aDeg-180)*Math. PI*2/360)
M2I=Math. sin((aDeg-180)*Math. PI*2/360)
M22=Math. cos((aDeg-180)*Math. PI*2/360)
8)當(dāng)指針圖片的旋轉(zhuǎn)角度值deg為210-240度之間時，則C旋轉(zhuǎn)deg-210，B順時針旋轉(zhuǎn)30°，A順時針旋轉(zhuǎn)180° ;即分別設(shè)置A、B、C三層的屬性
設(shè)置 A 的濾鏡屬性 Matrix 中的 Mll=-I, M12=0, M21=0, M22=_l
設(shè)置B的濾鏡屬性Matrix中的
Mll=Math. cos(30*Math. PI*2/360)
M12=-Math. sin(30*Math. PI*2/360)
M2I=Math. sin(30*Math. PI*2/360)
M22=Math. cos(30*Math. PI*2/360)
設(shè)置 B 的邊距屬性 margin-left: 60px, margin-top: _21px
設(shè)置C的濾鏡屬性Matrix中的
Mll=Math. cos((aDeg-210)*Math. PI*2/360)
M12=-Math. sin((aDeg-210)*Math. PI*2/360)
M2I=Math. sin((aDeg-210)*Math. PI*2/360)
M22=Math. cos((aDeg-210)*Math. PI*2/360)
9)當(dāng)指針圖片的旋轉(zhuǎn)角度值deg為240-270度之間時，則C順時針旋轉(zhuǎn)deg-240，B順時針旋轉(zhuǎn)60°，A順時針旋轉(zhuǎn)180° ;即分別設(shè)置A、B、C三層的屬性
設(shè)置 A 的濾鏡屬性 Matrix 中的 Mll=O, M12=l, M21=-l, M22=0
設(shè)置B的濾鏡屬性Matrix中的
Mll=Math. cos(330*Math. PI*2/360)
M12=-Math. sin(330*Math. PI*2/360)
M2I=Math. sin(330*Math. PI*2/360)
M22=Math. cos(330*Math. PI*2/360)
設(shè)置 B 的邊距屬性 margin-left: -21px, margin-top: 50px
設(shè)置C的濾鏡屬性Matrix中的
Mll=Math. cos((aDeg-240)*Math. PI*2/360)
M12=-Math. sin((aDeg-240)*Math. PI*2/360)
M2I=Math. sin((aDeg-240)*Math. PI*2/360)
M22=Math. cos((aDeg-240)*Math. PI*2/360)
10 )當(dāng)指針圖片的旋轉(zhuǎn)角度值deg為270-300度之間時，則C順時針旋轉(zhuǎn)deg-270，B不旋轉(zhuǎn)，A順時針旋轉(zhuǎn)270° ；即分別設(shè)置A、B、C三層的屬性
設(shè)置 A 的濾鏡屬性 Matrix 中的 Mll=O, M12=l, M21=-l, M22=0
設(shè)置 B 的濾鏡屬性 Matrix 中的 Mll=I, M12=0, M21=0, M22=l
設(shè)置 B 的邊距屬性 margin-left: 9px, margin-top: Opx
設(shè)置C的濾鏡屬性Matrix中的
Mll=Math. cos((aDeg-270)*Math. PI*2/360)
M12=-Math. sin((aDeg-270)*Math. PI*2/360)
M2I=Math. sin((aDeg-270)*Math. PI*2/360)
M22=Math. cos((aDeg-270)*Math. PI*2/360)
11)當(dāng)指針圖片的旋轉(zhuǎn)角度值deg為300-330度之間時，則C順時針旋轉(zhuǎn)deg-300，B順時針旋轉(zhuǎn)30°，A順時針旋轉(zhuǎn)270° ;即分別設(shè)置A、B、C三層的屬性
設(shè)置 A 的濾鏡屬性 Matrix 中的 Mll=O, M12=l, M21=-l, M22=0
設(shè)置B的濾鏡屬性Matrix中的
Mll=Math. cos(30*Math. PI*2/360)
M12=-Math. sin(30*Math. PI*2/360)
M2I=Math. sin(30*Math. PI*2/360)
M22=Math. cos(30*Math. PI*2/360)
設(shè)置 B 的邊距屬性 margin-left: 59px, margin-top: _29px
設(shè)置C的濾鏡屬性Matrix中的
Mll=Math. cos((aDeg-300)*Math. PI*2/360)
M12=-Math. sin((aDeg-300)*Math. PI*2/360)
M2I=Math. sin((aDeg-300)*Math. PI*2/360)
M22=Math. cos((aDeg-300)*Math. PI*2/360)
12)當(dāng)指針圖片的旋轉(zhuǎn)角度值deg為330-360度之間時，則C順時針旋轉(zhuǎn)deg-330，B順時針旋轉(zhuǎn)60°，A順時針旋轉(zhuǎn)270° ;即分別設(shè)置A、B、C三層的屬性
設(shè)置 A 的濾鏡屬性 Matrix 中的 Mll=I, M12=0, M21=0, M22=l
設(shè)置B的濾鏡屬性Matrix中的
Mll=Math. cos(330*Math. PI*2/360)
M12=-Math. sin(330*Math. PI*2/360)
M2I=Math. sin(330*Math. PI*2/360)
M22=Math. cos(330*Math. PI*2/360)
設(shè)置 B 的邊距屬性 margin-left: -29px, margin-top: 50px
設(shè)置C的濾鏡屬性Matrix中的
Mll=Math. cos((aDeg-330)*Math. PI*2/360)
M12=-Math. sin((aDeg-330)*Math. PI*2/360)
M2I=Math. sin((aDeg-330)*Math. PI*2/360)
M22=Math. cos((aDeg-330)*Math. PI*2/360)
本發(fā)明實施例，還提供了一種實施上述基于IE瀏覽器的系統(tǒng)資源動態(tài)顯示方法的系統(tǒng)，參見圖5,具體包括
設(shè)備數(shù)據(jù)訪問模塊501，用于從嵌入式設(shè)備讀取嵌入式設(shè)備系統(tǒng)資源利用狀態(tài)的數(shù)據(jù)；
設(shè)備數(shù)據(jù)轉(zhuǎn)換模塊502，用于將所述設(shè)備數(shù)據(jù)訪問模塊讀取的嵌入式設(shè)備的系統(tǒng)資源利用狀態(tài)數(shù)據(jù)轉(zhuǎn)換為用于顯示的百分比數(shù)值；
設(shè)備資源顯示模塊503，用于利用創(chuàng)建的儀表盤顯示嵌入式設(shè)備的系統(tǒng)資源利用率。該模塊還用于創(chuàng)建儀表盤。
以上所述，僅為本發(fā)明的較佳實施例而已，并非用于限定本發(fā)明的保護范圍。凡在本發(fā)明的精神和原則之內(nèi)，所作的任何修改、等同替換、改進等，均應(yīng)包含在本發(fā)明的保護范圍之內(nèi)。
權(quán)利要求
1.基于IE瀏覽器的系統(tǒng)資源動態(tài)顯示方法，其特征在于，包括以下步驟A.設(shè)備數(shù)據(jù)訪問模塊從嵌入式設(shè)備讀取嵌入式設(shè)備系統(tǒng)資源利用狀態(tài)的數(shù)據(jù)；B.設(shè)備數(shù)據(jù)轉(zhuǎn)換模塊將所述設(shè)備數(shù)據(jù)訪問模塊讀取的嵌入式設(shè)備的系統(tǒng)資源利用狀態(tài)數(shù)據(jù)轉(zhuǎn)換為用于顯示的百分比數(shù)值；C.設(shè)備資源顯示模塊利用創(chuàng)建的儀表盤顯示嵌入式設(shè)備的系統(tǒng)資源利用率。
2.如權(quán)利要求I所述的基于IE瀏覽器的系統(tǒng)資源動態(tài)顯示方法，其特征在于，步驟C具體包括 Cl、設(shè)備資源顯示模塊判斷是否存在用于顯示嵌入式設(shè)備系統(tǒng)資源利用率的儀表盤，如否，則執(zhí)行C2 ;如是，則執(zhí)行C3 ；C2、設(shè)備資源顯示模塊首先創(chuàng)建儀表盤，再利用已創(chuàng)建的儀表盤顯示嵌入式設(shè)備的系統(tǒng)資源利用狀態(tài)；C3、設(shè)備資源顯示模塊利用已創(chuàng)建的儀表盤，根據(jù)嵌入式設(shè)備的系統(tǒng)資源利用狀態(tài)數(shù)據(jù)百分比數(shù)值，顯示嵌入式設(shè)備的系統(tǒng)資源利用率。
3.如權(quán)利要求2所述的基于IE瀏覽器的系統(tǒng)資源動態(tài)顯示方法，其特征在于，步驟C2具體包括C21.在超文本標記語言HTML中創(chuàng)建一個DIV層，并設(shè)置該層的背景圖片為選擇的帶有刻度的儀表盤圖片；C22.在步驟C21中創(chuàng)建的DIV層的基礎(chǔ)上，依次創(chuàng)建A、B、C三個DIV層，其中A層位于步驟C21中創(chuàng)建的DIV層的上一層，C層位于最外層，B層位于A層和C層之間，并分別對A、B、C三個DIV層進行屬性設(shè)置。
4.如權(quán)利要求3所述的基于IE瀏覽器的系統(tǒng)資源動態(tài)顯示方法，其特征在于，在步驟C22中，設(shè)置C層背景圖片為選擇的儀表盤的指針圖片。
5.如權(quán)利要求3所述的基于IE瀏覽器的系統(tǒng)資源動態(tài)顯示方法，其特征在于，在步驟C22中，設(shè)置B、C層的旋轉(zhuǎn)方式為才原始裁剪模式clip to original，設(shè)置A層的旋轉(zhuǎn)方式為自動擴張auto expand ο
6.如權(quán)利要求5所述的基于IE瀏覽器的系統(tǒng)資源動態(tài)顯示方法，其特征在于，步驟C3具體包括C31.將嵌入式設(shè)備的系統(tǒng)資源利用狀態(tài)數(shù)據(jù)的百分比數(shù)值，轉(zhuǎn)換為所述指針圖片的旋轉(zhuǎn)角度值；C32.利用所述指針圖片的旋轉(zhuǎn)角度值，計算A、B、C三層的旋轉(zhuǎn)角度值，通過A、B、C三層的共同旋轉(zhuǎn)完成所述指針圖片在儀表盤圖片上的指示。
7.如權(quán)利要求6所述的基于IE瀏覽器的系統(tǒng)資源動態(tài)顯示方法，其特征在于，在步驟C31中，將嵌入式設(shè)備的系統(tǒng)資源利用狀態(tài)數(shù)據(jù)的百分比數(shù)值，轉(zhuǎn)換為所述指針圖片的旋轉(zhuǎn)角度值是指，根據(jù)當(dāng)前指針圖片中的指針所指向的儀表盤圖片中百分比數(shù)值，以及當(dāng)前獲取的嵌入式設(shè)備的系統(tǒng)資源利用狀態(tài)數(shù)據(jù)的百分比數(shù)值，由開發(fā)人員進行調(diào)試比對后獲取指針圖片的旋轉(zhuǎn)角度值。
8.如權(quán)利要求6所述的基于IE瀏覽器的系統(tǒng)資源動態(tài)顯示方法，其特征在于，在步驟C32中，通過A、B、C三層的共同旋轉(zhuǎn)完成指針在儀表盤上的指示，假設(shè)所述指針圖片的旋轉(zhuǎn)角度值為deg，具體包括C321.設(shè)置A層的旋轉(zhuǎn)角度為所述指針圖片的旋轉(zhuǎn)角度值deg與30相加的和整除90得到倍數(shù)，將倍數(shù)乘以90后的值； C322.設(shè)置B層的旋轉(zhuǎn)角度為所述指針圖片的旋轉(zhuǎn)角度值deg整除30得到30的倍數(shù)，將倍數(shù)與3求余，余數(shù)值為O時，B層的旋轉(zhuǎn)角度為0，余數(shù)為I時，B層的旋轉(zhuǎn)角度為·30，余數(shù)為2時，B的旋轉(zhuǎn)角度為330 ； C323.設(shè)置C層的旋轉(zhuǎn)角度為所述指針圖片的旋轉(zhuǎn)角度值deg除以30的余數(shù)； C324.設(shè)置B層的邊距屬性，使得所述指針圖片的中心位置和儀表盤圖片的中心位置重合。
9.如權(quán)利要求6所述的基于IE瀏覽器的系統(tǒng)資源動態(tài)顯示方法，其特征在于，在步驟C32中，通過A、B、C三層的共同旋轉(zhuǎn)完成指針在儀表盤上的指示，假設(shè)所述指針圖片的旋轉(zhuǎn)角度值為deg，具體包括 C321.當(dāng)所述指針圖片的旋轉(zhuǎn)角度值deg為0-30度之間時，則C層順時針旋轉(zhuǎn)deg，B層不旋轉(zhuǎn)，A層不旋轉(zhuǎn)； C322.當(dāng)所述指針圖片的旋轉(zhuǎn)角度值deg為30-60度之間時，則C層順時針旋轉(zhuǎn)deg-30，B層順時針旋轉(zhuǎn)30°，A層不旋轉(zhuǎn)； C323.當(dāng)所述指針圖片的旋轉(zhuǎn)角度值deg為60-90度之間時，則C層順時針旋轉(zhuǎn)deg-60，B層順時針旋轉(zhuǎn)60°，A層不旋轉(zhuǎn)； C324.當(dāng)所述指針圖片的旋轉(zhuǎn)角度值deg為90-120度之間時，則C層順時針旋轉(zhuǎn)deg-90，B層不旋轉(zhuǎn)，A層順時針旋轉(zhuǎn)90° ; C325.當(dāng)所述指針圖片的旋轉(zhuǎn)角度值deg為120-150度之間時，則C層順時針旋轉(zhuǎn)deg-120，B層順時針旋轉(zhuǎn)30°，A層順時針旋轉(zhuǎn)90° ; C326.當(dāng)所述指針圖片的旋轉(zhuǎn)角度值deg為150-180度之間時，則C層順時針旋轉(zhuǎn)deg-150，B層順時針旋轉(zhuǎn)60°，A層順時針旋轉(zhuǎn)90° ; C327.當(dāng)所述指針圖片的旋轉(zhuǎn)角度值deg為180-210度之間時，則C層順時針旋轉(zhuǎn)deg-180, B層不旋轉(zhuǎn)，A層順時針旋轉(zhuǎn)180° ； C328.當(dāng)所述指針圖片的旋轉(zhuǎn)角度值deg為210-240度之間時，則C層旋轉(zhuǎn)deg-210，B層順時針旋轉(zhuǎn)30°，A層順時針旋轉(zhuǎn)180° ； C329.當(dāng)所述指針圖片的旋轉(zhuǎn)角度值deg為240-270度之間時，則C層順時針旋轉(zhuǎn)deg-240，B層順時針旋轉(zhuǎn)60°，A層順時針旋轉(zhuǎn)180° ； C3210.當(dāng)所述指針圖片的旋轉(zhuǎn)角度值deg為270-300度之間時，則C層順時針旋轉(zhuǎn)deg-270, B層不旋轉(zhuǎn)，A層順時針旋轉(zhuǎn)270° ； C3211.當(dāng)所述指針圖片的旋轉(zhuǎn)角度值deg為300-330度之間時，則C層順時針旋轉(zhuǎn)deg-300，B層順時針旋轉(zhuǎn)30°，A層順時針旋轉(zhuǎn)270° ； C3212.當(dāng)所述指針圖片的旋轉(zhuǎn)角度值deg為330-360度之間時，則C層順時針旋轉(zhuǎn)deg-330，B層順時針旋轉(zhuǎn)60°，A層順時針旋轉(zhuǎn)270°。
10.基于IE瀏覽器的系統(tǒng)資源動態(tài)顯示系統(tǒng)，其特征在于，包括 設(shè)備數(shù)據(jù)訪問模塊，用于從嵌入式設(shè)備讀取嵌入式設(shè)備系統(tǒng)資源利用狀態(tài)的數(shù)據(jù)；設(shè)備數(shù)據(jù)轉(zhuǎn)換模塊，用于將所述設(shè)備數(shù)據(jù)訪問模塊讀取的嵌入式設(shè)備的系統(tǒng)資源利用狀態(tài)數(shù)據(jù)轉(zhuǎn)換為用于顯示的百分比數(shù)值；設(shè)備資源顯示模塊，用于利用創(chuàng)建的儀表盤顯示嵌入式設(shè)備的系統(tǒng)資源利用率。
全文摘要
本發(fā)明涉及一種網(wǎng)絡(luò)管理技術(shù)，其公開了一種基于IE瀏覽器的儀表盤動態(tài)顯示嵌入式設(shè)備系統(tǒng)資源的方法，采用儀表盤顯示系統(tǒng)資源，解決傳統(tǒng)技術(shù)中采用畫圖插件的方式制作儀表盤需要插件支持，實用性不好以及采用HTML元素模擬畫點函數(shù)的方式制作儀表盤，繪制的指針效果不好的問題。該方法包括A.設(shè)備數(shù)據(jù)訪問模塊從嵌入式設(shè)備讀取嵌入式設(shè)備系統(tǒng)資源利用狀態(tài)的數(shù)據(jù)；B.設(shè)備數(shù)據(jù)轉(zhuǎn)換模塊將所述設(shè)備數(shù)據(jù)訪問模塊讀取的嵌入式設(shè)備的系統(tǒng)資源利用狀態(tài)數(shù)據(jù)轉(zhuǎn)換為用于顯示的百分比數(shù)值；C.設(shè)備資源顯示模塊利用創(chuàng)建的儀表盤顯示嵌入式設(shè)備的系統(tǒng)資源利用率。此外，本發(fā)明還公開了實施上述方法的系統(tǒng)，適用于嵌入式設(shè)備。
文檔編號G06F9/44GK102929624SQ20121041792
公開日2013年2月13日 申請日期2012年10月26日 優(yōu)先權(quán)日2012年10月26日
發(fā)明者鄧鵬 申請人:邁普通信技術(shù)股份有限公司