CN102929624A - 基于ie浏览器的系统资源动态显示方法及系统 - Google Patents
基于ie浏览器的系统资源动态显示方法及系统 Download PDFInfo
- Publication number
- CN102929624A CN102929624A CN2012104179219A CN201210417921A CN102929624A CN 102929624 A CN102929624 A CN 102929624A CN 2012104179219 A CN2012104179219 A CN 2012104179219A CN 201210417921 A CN201210417921 A CN 201210417921A CN 102929624 A CN102929624 A CN 102929624A
- Authority
- CN
- China
- Prior art keywords
- layer
- turns clockwise
- picture
- angle value
- rotation angle
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Granted
Links
Images
Landscapes
- User Interface Of Digital Computer (AREA)
Abstract
本发明涉及一种网络管理技术，其公开了一种基于IE浏览器的仪表盘动态显示嵌入式设备系统资源的方法，采用仪表盘显示系统资源，解决传统技术中采用画图插件的方式制作仪表盘需要插件支持，实用性不好以及采用HTML元素模拟画点函数的方式制作仪表盘，绘制的指针效果不好的问题。该方法包括：A.设备数据访问模块从嵌入式设备读取嵌入式设备系统资源利用状态的数据；B.设备数据转换模块将所述设备数据访问模块读取的嵌入式设备的系统资源利用状态数据转换为用于显示的百分比数值；C.设备资源显示模块利用创建的仪表盘显示嵌入式设备的系统资源利用率。此外，本发明还公开了实施上述方法的系统，适用于嵌入式设备。
Description
技术领域
本发明涉及一种网络管理技术，尤其涉及基于IE浏览器的仪表盘动态显示嵌入式设备系统资源的方法和系统。
背景技术
为了更加直观，在WEB浏览器上通过仪表盘显示某些嵌入式设备的系统资源信息(如CPU资源的利用率，带宽利用率等等)，是目前比较通用的做法；要完成系统资源利用率的动态显示例如从0%到100%，仪表盘的指针需要从一个角度旋转到另外一个角度。所以系统资源的动态显示，关键技术在于仪表盘的指针旋转问题，特别是在IE这类浏览器下，对图片旋转的支持在满足仪表盘的指针旋转时存在一定的问题；
在IE浏览器下旋转图片是通过filter（滤镜）方式支持，其旋转方式有两种：
1、auto expand（自动扩张）：这种方式旋转会修改图片的显示位置，这样就不能按照一个中心点进行旋转，中心点的位置会随着角度漂移，如果动态调整中心点，中心点的位置不能调整到同一个点上，会有明显的跳跃视觉效果；
2、clip to original（原始裁剪）：这种方式会裁剪图片，并且只有在旋转角度为0-90度可显示部分图片，其它角度无法正常显示图片，并且在旋转角度0-90时，图片显示不完全，不能达到理想的效果；
目前为解决在WEB浏览器上基于IE浏览器的系统资源动态显示的现有实现方案中，仪表盘的制作和旋转一般采用如下两种方式：
1、采用画图插件，这种方式需要第三方插件支持，实用性不是很好；
2、采用HTML元素模拟画点函数，这种方式需要的HTML标签会很多，影响性能，并且绘制的指针效果不是很好，不能达到满意的需求。
因此，提供一种新的基于IE浏览器的系统资源动态显示的方式，是亟待解决的问题。
发明内容
本发明所要解决的技术问题是：提出一种基于IE浏览器的系统资源动态显示方法，采用仪表盘显示系统资源，解决传统技术中采用画图插件的方式制作仪表盘需要插件支持，实用性不好以及采用HTML元素模拟画点函数的方式制作仪表盘，绘制的指针效果不好的问题。
本发明解决上述技术问题所采用的方案是：一种基于IE浏览器的系统资源动态显示方法，其包括以下步骤：
A．设备数据访问模块从嵌入式设备读取嵌入式设备系统资源利用状态的数据；
B．设备数据转换模块将所述设备数据访问模块读取的嵌入式设备的系统资源利用状态数据转换为用于显示的百分比数值；
C．设备资源显示模块利用创建的仪表盘显示嵌入式设备的系统资源利用率。
优选地，步骤C具体包括：
C1、设备资源显示模块判断是否存在用于显示嵌入式设备系统资源利用率的仪表盘，如否，则执行C2；如是，则执行C3；
C2、设备资源显示模块首先创建仪表盘，再利用已创建的仪表盘显示嵌入式设备的系统资源利用状态；
C3、设备资源显示模块利用已创建的仪表盘，根据嵌入式设备的系统资源利用状态数据百分比数值，显示嵌入式设备的系统资源利用率。
优选地，步骤C2具体包括：
C21，在超文本标记语言HTML中创建一个DIV（分区）层，并设置该层的背景图片为选择的带有刻度的仪表盘图片；
C22．在步骤C21中创建的DIV层的基础上，依次创建A、B、C三个DIV层，其中A层位于步骤C21中创建的DIV层的上一层，C层位于最外层，B层位于A层和C层之间，并分别对A、B、C三个DIV层进行属性设置。
具体地，在步骤C22中，设置C层背景图片为选择的仪表盘的指针图片。
具体地，在步骤C22中，设置B、C层的旋转方式为才原始裁剪模式clip to original，设置A层的旋转方式为自动扩张auto expand。
优选地，步骤C3具体包括：
C31.将嵌入式设备的系统资源利用状态数据的百分比数值，转换为所述指针图片的旋转角度值；
C32.利用所述指针图片的旋转角度值，计算A、B、C三层的旋转角度值，通过A、B、C三层的共同旋转完成所述指针图片在仪表盘图片上的指示。
具体地，在步骤C31中，将嵌入式设备的系统资源利用状态数据的百分比数值，转换为所述指针图片的旋转角度值是指，根据当前指针图片中的指针所指向的仪表盘图片中百分比数值，以及当前获取的嵌入式设备的系统资源利用状态数据的百分比数值，由开发人员进行调试比对后获取指针图片的旋转角度值。
具体地，在步骤C32中，通过A、B、C三层的共同旋转完成指针在仪表盘上的指示，假设所述指针图片的旋转角度值为deg，具体包括：
C321.设置A层的旋转角度为：所述指针图片的旋转角度值deg与30相加的和整除90得到倍数，将倍数乘以90后的值；
C322.设置B层的旋转角度为：所述指针图片的旋转角度值deg整除30得到30的倍数,将倍数与3求余，余数值为0时，B层的旋转角度为0，余数为1时，B层的旋转角度为30,余数为2时，B的旋转角度为330；
C323.设置C层的旋转角度为：所述指针图片的旋转角度值deg除以30的余数；
C324.设置B层的边距属性，使得所述指针图片的中心位置和仪表盘图片的中心位置重合。
本发明的另一个目的，提供实施上述基于IE浏览器的系统资源动态显示方法的系统，具体包括：
设备数据访问模块，用于从嵌入式设备读取嵌入式设备系统资源利用状态的数据；
设备数据转换模块，用于将所述设备数据访问模块读取的嵌入式设备的系统资源利用状态数据转换为用于显示的百分比数值；
设备资源显示模块，用于利用创建的仪表盘显示嵌入式设备的系统资源利用率。
本发明的有益效果是：无需采用画图插件，实用性好，通过三层DIV层共同旋转的方式完成指针图片在仪表盘图片上的指示，避免了单独采用一种方式旋转造成的视觉跳跃或图片显示不完全的问题出现，动态显示嵌入式设备系统资源利率的效果更佳。
附图说明
图1为本发明实施例的基于IE浏览器的系统资源动态显示方法流程图。
图2为本发明实施例设备资源显示模块创建仪表盘的流程图。
图3为本发明实施例选择的仪表盘图片的示意图。
图4为本发明实施例选择的仪表盘的指针图片的示意图。
图5为本发明基于IE浏览器的系统资源动态显示系统的结构框图。
具体实施方式
下面结合附图及具体实施例对本发明的技术方案作进一步的描述。
如图1所示，一种基于IE浏览器的系统资源动态显示方法，共分为三个步骤：
步骤101，系统的设备数据访问模块从嵌入式设备读取嵌入式设备系统资源利用状态的数据。这里读取的数据是原始的数据，而且网络管理系统访问嵌入式设备并读取设备数据是现有技术，一般实现方式为：嵌入式设备利用超文本传输协议HTTP单独启动一个服务，并利用其配置命令读取设备系统资源的状态信息，通过HTTP协议传输到IE浏览器。
步骤102，设备数据转换模块将所述设备数据访问模块读取的嵌入式设备的系统资源利用状态数据转换为用于显示的百分比数值。在本步骤中，设备数据转换模块通过文本解析，解析出嵌入式设备的系统资源利用状态数据，形成用于显示的百分比数值。
步骤103，系统的设备资源显示模块利用创建的仪表盘显示嵌入式设备的系统资源利用率。本步骤中设备资源显示模块首先判断是否存在用于显示嵌入式设备系统资源利用率的仪表盘，如是，则直接利用已创建的仪表盘根据步骤102中转换后的嵌入式设备的系统资源利用状态数据，显示嵌入式设备的系统资源利用状态，该已创建的仪表盘可以是预先创建的，也可以是在进行第一次显示之前创建的；如否，则设备资源显示模块首先创建仪表盘，再利用已创建的仪表盘显示嵌入式设备的系统资源利用状态。
设备资源显示模块创建仪表盘的具体流程图参见图2，包括如下步骤：
步骤1031，在HTML中创建一个分区DIV层，并设置该层的背景图片为选择的带有刻度的仪表盘图片。图3为本发明实施例选择的仪表盘图片的示意图，用于显示嵌入式设备CPU资源的利用率。在本步骤中，创建的第一个DIV层的位置属性为相对位置即position:relative，指定该层的宽度和高度分别为所选择的带有刻度的仪表盘图片的宽度和高度。
步骤1032，在步骤1031中创建的DIV层的基础上，依次创建A、B、C三个DIV层，其中A层位于步骤1031中创建的DIV层的上一层，C层位于最外层，B层位于A层和C层之间，并分别对A、B、C三个DIV层进行属性设置；具体实现方法为：
a）创建一个DIV层A，将A添加到第一个DIV层内，设置A的属性：
位置属性为绝对位置即position:absolute
高度：仪表盘图片的高度；宽度:仪表盘图片的宽度
位置：top:0，left:0
通过滤镜的方式设置旋转方式：自动扩张（auto expand)，旋转角度为0
b）创建一个DIV层B，将B添加到A内：设置B的属性：
位置属性为绝对位置即position:absolute
高度：仪表盘图片的高度；宽度:仪表盘图片的宽度
位置：top:0，left:0
边距：margin:0px
通过滤镜的方式设置旋转方式：原始裁剪模式（clip tooriginal)，旋转角度为0
c）创建一个DIV层C，将C添加到B内；设置C的属性：
背景图片为选择的仪表盘的指针图片，图4为本发明实施例选择的仪表盘的指针图片的示意图
高度：仪表盘的指针图片高度；宽度：仪表盘的指针图片高度
位置：top:0，left:0
设置左边距（margin-left）、上边距（margin-top）的属性，达到仪表盘的指针图片的中心位置与选择的仪表盘图标的中心位置重合
通过滤镜的方式设置旋转方式：clip tooriginal，旋转角度为0
设备资源显示模块利用已创建的仪表盘，并根据步骤102中转换后的嵌入式设备的系统资源利用状态数据，通过A、B、C三层的共同旋转完成指针在仪表盘上的指示，显示嵌入式设备系统资源利用率，具体包括如下步骤：
a）将嵌入式设备的系统资源利用状态数据的百分比值，转换为选择的仪表盘的指针图片的旋转角度值。具体是根据当前指针图片中的指针所指向的仪表盘图片中百分比数值（刻度值），以及当前获取的嵌入式设备的系统资源利用状态数据的百分比值，由开发人员进行调试比对后获取指针图片的旋转角度值；
b）利用所述指针图片的旋转角度值，计算A、B、C三层的旋转角度值，通过A、B、C三层的共同旋转完成所述指针图片在仪表盘图片上的指示。假设针图片旋转角度值为deg，设置A层的旋转角度为：所述指针图片的旋转角度值deg与30相加的和整除90得到倍数，将倍数乘以90后的值；设置B层的旋转角度为：所述指针图片的旋转角度值deg整除30得到30的倍数,将倍数与3求余，余数值为0时,B层的旋转角度为0，余数为1时，B层的旋转角度为30,余数为2时，B的旋转角度为330；设置C层的旋转角度为：所述指针图片的旋转角度值deg除以30的余数；设置B层的边距属性，使得所述指针图片的中心位置和仪表盘图片的中心位置重合。具体设置过程如下：
1）当指针图片旋的转角度值deg为0-30度之间时，则C顺时针旋转deg，B不旋转，A不旋转；即分别设置A、B、C三层的属性：
设置A的滤镜属性Matrix中的M11=1,M12=0,M21=0,M22=1
设置B的滤镜属性Matrix中的M11=1,M12=0,M21=0,M22=1
设置B的边距属性margin-left:0px,margin-top:0px
设置C的滤镜属性Matrix中的
M11=Math.cos(aDeg*Math.PI*2/360)
M12=-Math.sin(aDeg*Math.PI*2/360)
M21=Math.sin(aDeg*Math.PI*2/360)
M22=Math.cos(aDeg*Math.PI*2/360)
2）当指针图片的旋转角度值deg为30-60度之间时，则C顺时针旋转deg-30，B顺时针旋转30°，A不旋转；即分别设置A、B、C三层的属性：
设置A的滤镜属性Matrix中的M11=1,M12=0,M21=0;M22=1
设置B的滤镜属性Matrix中的
M11=Math.cos(30*Math.PI*2/360)
M12=-Math.sin(30*Math.PI*2/360)
M21=Math.sin(30*Math.PI*2/360)
M22=Math.cos(30*Math.PI*2/360)
设置B的边距属性margin-left:51px,margin-top:-29px
设置C的滤镜属性Matrix中的
M11=Math.cos((aDeg-30)*Math.PI*2/360)
M12=-Math.sin((aDeg-30)*Math.PI*2/360)
M21=Math.sin((aDeg-30)*Math.PI*2/360)
M22=Math.cos((aDeg-30)*Math.PI*2/360)
3）当指针图片的旋转角度值deg为60-90度之间时，则C顺时针旋转deg-60，B顺时针旋转60°，A不旋转；即分别设置A、B、C三层的属性：
设置A的滤镜属性Matrix中的M11=0,M12=-1,M21=1,M22=0
设置B的滤镜属性Matrix中的
M11=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)
设置B的边距属性margin-left:-29px,margin-top:58px
设置C的滤镜属性Matrix中的
M11=Math.cos((aDeg-60)*Math.PI*2/360)
M12=-Math.sin((aDeg-60)*Math.PI*2/360)
M21=Math.sin((aDeg-60)*Math.PI*2/360)
M22=Math.cos((aDeg-60)*Math.PI*2/360)
4）当指针图片的旋转角度值deg为90-120度之间时，则C顺时针旋转deg-90，B不旋转，A顺时针旋转90°；即分别设置A、B、C三层的属性：
设置A的滤镜属性Matrix中的M11=0,M12=-1,M21=1,M22=0
设置B的滤镜属性Matrix中的M11=1,M12=0,M21=0,M22=1
设置B的边距属性margin-left:-1px,margin-top:9px
设置C的滤镜属性Matrix中的
M11=Math.cos((aDeg-90)*Math.PI*2/360)
M12=-Math.sin((aDeg-90)*Math.PI*2/360)
M21=Math.sin((aDeg-90)*Math.PI*2/360)
M22=Math.cos((aDeg-90)*Math.PI*2/360)
5）当指针图片的旋转角度值deg为120-150度之间时，则C顺时针旋转deg-120，B顺时针旋转30°，A顺时针旋转90°；即分别设置A、B、C三层的属性：
设置A的滤镜属性Matrix中的M11=0,M12=-1,M21=1,M22=0
设置B的滤镜属性Matrix中的
M11=Math.cos(30*Math.PI*2/360)
M12=-Math.sin(30*Math.PI*2/360)
M21=Math.sin(30*Math.PI*2/360)
M22=Math.cos(30*Math.PI*2/360)
设置B的边距属性margin-left:49px,margin-top:-21px
设置C的滤镜属性Matrix中的
M11=Math.cos((aDeg-120)*Math.PI*2/360)
M12=-Math.sin((aDeg-120)*Math.PI*2/360)
M21=Math.sin((aDeg-120)*Math.PI*2/360)
M22=Math.cos((aDeg-120)*Math.PI*2/360)
6）当指针图片的旋转角度值deg为150-180度之间时，则C顺时针旋转deg-150，B顺时针旋转60°，A顺时针旋转90°；即分别设置A、B、C三层的属性：
设置A的滤镜属性Matrix中的M11=-1,M12=0,M21=0,M22=-1
设置B的滤镜属性Matrix中的
M11=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)
设置B的边距属性margin-left:-21px,margin-top:60px
设置C的滤镜属性Matrix中的
M11=Math.cos((aDeg-150)*Math.PI*2/360)
M12=-Math.sin((aDeg-150)*Math.PI*2/360)
M21=Math.sin((aDeg-150)*Math.PI*2/360)
M22=Math.cos((aDeg-150)*Math.PI*2/360)
7）当指针图片的旋转角度值deg为180-210度之间时，则C顺时针旋转deg-180，B不旋转，A顺时针旋转180°；即分别设置A、B、C三层的属性：
设置A的滤镜属性Matrix中的M11=-1,M12=0,M21=0,M22=-1
设置B的滤镜属性Matrix中的M11=1,M12=0,M21=0,M22=1
设置B的边距属性margin-left:10px,margin-top:9px
设置C的滤镜属性Matrix中的
M11=Math.cos((aDeg-180)*Math.PI*2/360)
M12=-Math.sin((aDeg-180)*Math.PI*2/360)
M21=Math.sin((aDeg-180)*Math.PI*2/360)
M22=Math.cos((aDeg-180)*Math.PI*2/360)
8）当指针图片的旋转角度值deg为210-240度之间时，则C旋转deg-210，B顺时针旋转30°，A顺时针旋转180°；即分别设置A、B、C三层的属性：
设置A的滤镜属性Matrix中的M11=-1,M12=0,M21=0,M22=-1
设置B的滤镜属性Matrix中的
M11=Math.cos(30*Math.PI*2/360)
M12=-Math.sin(30*Math.PI*2/360)
M21=Math.sin(30*Math.PI*2/360)
M22=Math.cos(30*Math.PI*2/360)
设置B的边距属性margin-left:60px,margin-top:-21px
设置C的滤镜属性Matrix中的
M11=Math.cos((aDeg-210)*Math.PI*2/360)
M12=-Math.sin((aDeg-210)*Math.PI*2/360)
M21=Math.sin((aDeg-210)*Math.PI*2/360)
M22=Math.cos((aDeg-210)*Math.PI*2/360)
9）当指针图片的旋转角度值deg为240-270度之间时，则C顺时针旋转deg-240，B顺时针旋转60°，A顺时针旋转180°；即分别设置A、B、C三层的属性：
设置A的滤镜属性Matrix中的M11=0,M12=1,M21=-1,M22=0
设置B的滤镜属性Matrix中的
M11=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)
设置B的边距属性margin-left:-21px,margin-top:50px
设置C的滤镜属性Matrix中的
M11=Math.cos((aDeg-240)*Math.PI*2/360)
M12=-Math.sin((aDeg-240)*Math.PI*2/360)
M21=Math.sin((aDeg-240)*Math.PI*2/360)
M22=Math.cos((aDeg-240)*Math.PI*2/360)
10）当指针图片的旋转角度值deg为270-300度之间时，则C顺时针旋转deg-270，B不旋转，A顺时针旋转270°；即分别设置A、B、C三层的属性：
设置A的滤镜属性Matrix中的M11=0,M12=1,M21=-1,M22=0
设置B的滤镜属性Matrix中的M11=1,M12=0,M21=0,M22=1
设置B的边距属性margin-left:9px,margin-top:0px
设置C的滤镜属性Matrix中的
M11=Math.cos((aDeg-270)*Math.PI*2/360)
M12=-Math.sin((aDeg-270)*Math.PI*2/360)
M21=Math.sin((aDeg-270)*Math.PI*2/360)
M22=Math.cos((aDeg-270)*Math.PI*2/360)
11）当指针图片的旋转角度值deg为300-330度之间时，则C顺时针旋转deg-300，B顺时针旋转30°，A顺时针旋转270°；即分别设置A、B、C三层的属性：
设置A的滤镜属性Matrix中的M11=0,M12=1,M21=-1,M22=0
设置B的滤镜属性Matrix中的
M11=Math.cos(30*Math.PI*2/360)
M12=-Math.sin(30*Math.PI*2/360)
M21=Math.sin(30*Math.PI*2/360)
M22=Math.cos(30*Math.PI*2/360)
设置B的边距属性margin-left:59px,margin-top:-29px
设置C的滤镜属性Matrix中的
M11=Math.cos((aDeg-300)*Math.PI*2/360)
M12=-Math.sin((aDeg-300)*Math.PI*2/360)
M21=Math.sin((aDeg-300)*Math.PI*2/360)
M22=Math.cos((aDeg-300)*Math.PI*2/360)
12）当指针图片的旋转角度值deg为330-360度之间时，则C顺时针旋转deg-330，B顺时针旋转60°，A顺时针旋转270°；即分别设置A、B、C三层的属性：
设置A的滤镜属性Matrix中的M11=1,M12=0,M21=0,M22=1
设置B的滤镜属性Matrix中的
M11=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)
设置B的边距属性margin-left:-29px,margin-top:50px
设置C的滤镜属性Matrix中的
M11=Math.cos((aDeg-330)*Math.PI*2/360)
M12=-Math.sin((aDeg-330)*Math.PI*2/360)
M21=Math.sin((aDeg-330)*Math.PI*2/360)
M22=Math.cos((aDeg-330)*Math.PI*2/360)
本发明实施例，还提供了一种实施上述基于IE浏览器的系统资源动态显示方法的系统，参见图5，具体包括：
设备数据访问模块501，用于从嵌入式设备读取嵌入式设备系统资源利用状态的数据；
设备数据转换模块502，用于将所述设备数据访问模块读取的嵌入式设备的系统资源利用状态数据转换为用于显示的百分比数值；
设备资源显示模块503，用于利用创建的仪表盘显示嵌入式设备的系统资源利用率。该模块还用于创建仪表盘。
以上所述，仅为本发明的较佳实施例而已，并非用于限定本发明的保护范围。凡在本发明的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。
Claims (10)
1.基于IE浏览器的系统资源动态显示方法，其特征在于，包括以下步骤：
A．设备数据访问模块从嵌入式设备读取嵌入式设备系统资源利用状态的数据；
B．设备数据转换模块将所述设备数据访问模块读取的嵌入式设备的系统资源利用状态数据转换为用于显示的百分比数值；
C．设备资源显示模块利用创建的仪表盘显示嵌入式设备的系统资源利用率。
2.如权利要求1所述的基于IE浏览器的系统资源动态显示方法，其特征在于，步骤C具体包括：
C1、设备资源显示模块判断是否存在用于显示嵌入式设备系统资源利用率的仪表盘，如否，则执行C2；如是，则执行C3；
C2、设备资源显示模块首先创建仪表盘，再利用已创建的仪表盘显示嵌入式设备的系统资源利用状态；
C3、设备资源显示模块利用已创建的仪表盘，根据嵌入式设备的系统资源利用状态数据百分比数值，显示嵌入式设备的系统资源利用率。
3.如权利要求2所述的基于IE浏览器的系统资源动态显示方法，其特征在于，步骤C2具体包括：
C21.在超文本标记语言HTML中创建一个DIV层，并设置该层的背景图片为选择的带有刻度的仪表盘图片；
C22．在步骤C21中创建的DIV层的基础上，依次创建A、B、C三个DIV层，其中A层位于步骤C21中创建的DIV层的上一层，C层位于最外层，B层位于A层和C层之间，并分别对A、B、C三个DIV层进行属性设置。
4.如权利要求3所述的基于IE浏览器的系统资源动态显示方法，其特征在于，在步骤C22中，设置C层背景图片为选择的仪表盘的指针图片。
5.如权利要求3所述的基于IE浏览器的系统资源动态显示方法，其特征在于，在步骤C22中，设置B、C层的旋转方式为才原始裁剪模式clip to original，设置A层的旋转方式为自动扩张auto expand。
6.如权利要求5所述的基于IE浏览器的系统资源动态显示方法，其特征在于，步骤C3具体包括：
C31.将嵌入式设备的系统资源利用状态数据的百分比数值，转换为所述指针图片的旋转角度值；
C32.利用所述指针图片的旋转角度值，计算A、B、C三层的旋转角度值，通过A、B、C三层的共同旋转完成所述指针图片在仪表盘图片上的指示。
7.如权利要求6所述的基于IE浏览器的系统资源动态显示方法，其特征在于，在步骤C31中，将嵌入式设备的系统资源利用状态数据的百分比数值，转换为所述指针图片的旋转角度值是指，根据当前指针图片中的指针所指向的仪表盘图片中百分比数值，以及当前获取的嵌入式设备的系统资源利用状态数据的百分比数值，由开发人员进行调试比对后获取指针图片的旋转角度值。
8.如权利要求6所述的基于IE浏览器的系统资源动态显示方法，其特征在于，在步骤C32中，通过A、B、C三层的共同旋转完成指针在仪表盘上的指示，假设所述指针图片的旋转角度值为deg，具体包括：
C321.设置A层的旋转角度为：所述指针图片的旋转角度值deg与30相加的和整除90得到倍数，将倍数乘以90后的值；
C322.设置B层的旋转角度为：所述指针图片的旋转角度值deg整除30得到30的倍数,将倍数与3求余，余数值为0时,B层的旋转角度为0，余数为1时，B层的旋转角度为30,余数为2时，B的旋转角度为330；
C323.设置C层的旋转角度为：所述指针图片的旋转角度值deg除以30的余数；
C324.设置B层的边距属性，使得所述指针图片的中心位置和仪表盘图片的中心位置重合。
9.如权利要求6所述的基于IE浏览器的系统资源动态显示方法，其特征在于，在步骤C32中，通过A、B、C三层的共同旋转完成指针在仪表盘上的指示，假设所述指针图片的旋转角度值为deg，具体包括：
C321.当所述指针图片的旋转角度值deg为0-30度之间时，则C层顺时针旋转deg，B层不旋转，A层不旋转；
C322.当所述指针图片的旋转角度值deg为30-60度之间时，则C层顺时针旋转deg-30，B层顺时针旋转30°，A层不旋转；
C323.当所述指针图片的旋转角度值deg为60-90度之间时，则C层顺时针旋转deg-60，B层顺时针旋转60°，A层不旋转；
C324.当所述指针图片的旋转角度值deg为90-120度之间时，则C层顺时针旋转deg-90，B层不旋转，A层顺时针旋转90°；
C325.当所述指针图片的旋转角度值deg为120-150度之间时，则C层顺时针旋转deg-120，B层顺时针旋转30°，A层顺时针旋转90°；
C326.当所述指针图片的旋转角度值deg为150-180度之间时，则C层顺时针旋转deg-150，B层顺时针旋转60°，A层顺时针旋转90°；
C327.当所述指针图片的旋转角度值deg为180-210度之间时，则C层顺时针旋转deg-180，B层不旋转，A层顺时针旋转180°；
C328.当所述指针图片的旋转角度值deg为210-240度之间时，则C层旋转deg-210，B层顺时针旋转30°，A层顺时针旋转180°；
C329.当所述指针图片的旋转角度值deg为240-270度之间时，则C层顺时针旋转deg-240，B层顺时针旋转60°，A层顺时针旋转180°；
C3210.当所述指针图片的旋转角度值deg为270-300度之间时，则C层顺时针旋转deg-270，B层不旋转，A层顺时针旋转270°；
C3211.当所述指针图片的旋转角度值deg为300-330度之间时，则C层顺时针旋转deg-300，B层顺时针旋转30°，A层顺时针旋转270°；
C3212.当所述指针图片的旋转角度值deg为330-360度之间时，则C层顺时针旋转deg-330，B层顺时针旋转60°，A层顺时针旋转270°。
10.基于IE浏览器的系统资源动态显示系统，其特征在于，包括：
设备数据访问模块，用于从嵌入式设备读取嵌入式设备系统资源利用状态的数据；
设备数据转换模块，用于将所述设备数据访问模块读取的嵌入式设备的系统资源利用状态数据转换为用于显示的百分比数值；
设备资源显示模块，用于利用创建的仪表盘显示嵌入式设备的系统资源利用率。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201210417921.9A CN102929624B (zh) | 2012-10-26 | 2012-10-26 | 基于ie浏览器的系统资源动态显示方法及系统 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201210417921.9A CN102929624B (zh) | 2012-10-26 | 2012-10-26 | 基于ie浏览器的系统资源动态显示方法及系统 |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN102929624A true CN102929624A (zh) | 2013-02-13 |
| CN102929624B CN102929624B (zh) | 2016-01-20 |
Family
ID=47644436
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201210417921.9A Active CN102929624B (zh) | 2012-10-26 | 2012-10-26 | 基于ie浏览器的系统资源动态显示方法及系统 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN102929624B (zh) |
Cited By (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN104424074A (zh) * | 2013-08-22 | 2015-03-18 | 腾讯科技（深圳）有限公司 | 一种设备运行状态显示方法和电子设备 |
| CN106502542A (zh) * | 2016-10-27 | 2017-03-15 | 中企动力科技股份有限公司 | 一种指针旋转方法和装置 |
-
2012
- 2012-10-26 CN CN201210417921.9A patent/CN102929624B/zh active Active
Non-Patent Citations (7)
| Title |
|---|
| CUISUQIANG: "《RGraph基于HTML5的JavaScript动态仪表盘》", 13 June 2012 * |
| JAVASCRIPT: "《SVG动态仪表盘JavaScript类库-JustGage》", 11 August 2012 * |
| TYYGMING: "《超棒的仪表盘javascript类库-justGage》", 23 August 2012 * |
| 天极网软件频道: "《Win7小工具CPU仪表盘随时查看系统资源状况》", 23 March 2012 * |
| 张峰等: "《Windows 7+Office 2010入门与提高》", 31 August 2011, 印刷工业出版社 * |
| 王晓兰等: "触摸屏手机GUI中分层显示的设计与实现", 《电子测量技术》 * |
| 王豫翔: "《HTML5 rotate 做仪表盘》", 16 April 2012 * |
Cited By (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN104424074A (zh) * | 2013-08-22 | 2015-03-18 | 腾讯科技（深圳）有限公司 | 一种设备运行状态显示方法和电子设备 |
| CN106502542A (zh) * | 2016-10-27 | 2017-03-15 | 中企动力科技股份有限公司 | 一种指针旋转方法和装置 |
Also Published As
| Publication number | Publication date |
|---|---|
| CN102929624B (zh) | 2016-01-20 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN102495712B (zh) | 一种基于多个显示终端的地图拼接显示方法 | |
| KR101545387B1 (ko) | 디스플레이 미러링을 위한 시스템 및 방법 | |
| CN102750148B (zh) | 一种媒体信息显示方法及装置 | |
| WO2017148298A1 (zh) | 混合模型列表项重用的方法及设备 | |
| CN103137103A (zh) | 文字显示方法及装置 | |
| CN102955794A (zh) | 一种网页点击情况的显示方法及装置 | |
| CN106020685A (zh) | 一种思维导图操作方法及装置 | |
| CN102929624A (zh) | 基于ie浏览器的系统资源动态显示方法及系统 | |
| CN101256595A (zh) | 基于soa架构的多维空间数据展现方法 | |
| CN103176993A (zh) | 一种内容呈现设备和方法 | |
| CN102196028B (zh) | 灵活的车辆显示器 | |
| CN103176760B (zh) | 一种屏幕显示方法及装置、电子设备 | |
| KR101516213B1 (ko) | 도큐먼트를 반응형 웹으로 변환하는 반응형 웹 생성 방법 | |
| WO2015003493A1 (zh) | 一种数据恢复的方法及电子设备 | |
| CN106535002B (zh) | 一种桌面启动器模板布局的更新方法及装置 | |
| CN105653222A (zh) | 一种实现多系统分屏运行的方法和装置 | |
| CN103150742A (zh) | 一种矢量图形动态渲染方法及其装置 | |
| AU2011239885A1 (en) | So-called HD-Web method for high-definition and all-screen compatibile internet contents | |
| CN102209147B (zh) | 移动通信终端浏览器自定义主题的方法及系统 | |
| CN102087596B (zh) | 嵌入式浏览装置及其多页面混合显示方法 | |
| CN114097211A (zh) | 多状态在场和响应跟踪与指示 | |
| CN105893048A (zh) | 浏览器主题更换方法、装置及电子设备 | |
| CN103902573A (zh) | 一种交通线路标识图的显示方法及装置 | |
| CN115049758A (zh) | 基于WebGIS的专题地图制作方法、服务器以及存储介质 | |
| WO2012120704A1 (ja) | ウェブ表示プログラム変換システム、ウェブ表示プログラム変換方法、及び、ウェブ表示プログラム変換用プログラム |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| C06 | Publication | ||
| PB01 | Publication | ||
| C10 | Entry into substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| C14 | Grant of patent or utility model | ||
| GR01 | Patent grant | ||
| CP02 | Change in the address of a patent holder |
Address after: 610041 15-24 floor, 1 1 Tianfu street, Chengdu high tech Zone, Sichuan Patentee after: MAIPU COMMUNICATION TECHNOLOGY Co.,Ltd. Address before: 610041 Sichuan city of Chengdu province high tech Zone nine Hing Road No. 16 building, Maipu Patentee before: MAIPU COMMUNICATION TECHNOLOGY Co.,Ltd. |
|
| CP02 | Change in the address of a patent holder | ||
| CP02 | Change in the address of a patent holder |
Address after: 610041 nine Xing Xing Road 16, hi tech Zone, Sichuan, Chengdu Patentee after: MAIPU COMMUNICATION TECHNOLOGY Co.,Ltd. Address before: 610041 15-24 floor, 1 1 Tianfu street, Chengdu high tech Zone, Sichuan Patentee before: MAIPU COMMUNICATION TECHNOLOGY Co.,Ltd. |
|
| CP02 | Change in the address of a patent holder |