TWaver - 专注UI技术

http://twaver.servasoft.com/
posts - 171, comments - 191, trackbacks - 0, articles - 2
  BlogJava :: 首页 :: 新随笔 :: 联系 :: 聚合  :: 管理

自定义告警染色

Posted on 2012-05-03 14:13 TWaver 阅读(2040) 评论(3)  编辑  收藏
在TWaver中,拓扑上的告警呈现的方式是多种多样的,最常见、最通用的是在原来的图片上叠加上告警级别所对应的颜色,这种方式在TWaver的各个分支版本中都是支持的,呈现效果如下图所示:

另外还有两种是将告警颜色添加在网元的前景或背景上,效果如下:
    我们主要来看默认的渲染方式,这种方式是采取图片颜色叠加处理,也就是在原来网元的图片上叠加上告警的颜色,对于大部分的图片来说是没有什么问题的,比如任意从网上找两种图片进行告警渲染:
     看得出来效果还是可以的,两张图片的染色都没有保持着告警的颜色。但有些图片的渲染就不是那么让人满意了,从客户那边取过来一个icon图片做了一下测试,结果发现:
 
    图中对于Major,Minor和custom这三种级别的告警渲染的颜色和冒泡的颜色显然有些不同。对于这种情况该如何处理呢,经查阅API获得TWaver可以自定义告警染色的规则,默认采用了Defaults中的PIXEL_FILTER_FUNCTION,我们来看看默认的实现:
1 function(sourceColor:uint, filterColor:uint):uint {
2 var r:uint = (sourceColor >> 16) & 0xFF;
3 var g:uint = (sourceColor &gt;&gt; <img src="http://twaver.servasoft.com/wp-includes/images/smilies/icon_cool.gif" alt="8)" class="wp-smiley"> &amp; 0xFF;
4 var b:uint = sourceColor &amp; 0xFF;
5 sourceColor = (r * 77 + g * 151 + b * 28) &gt;&gt; 8;
6 sourceColor = (sourceColor &lt;&lt; 16) | (sourceColor &lt;&lt; 8 ) | sourceColor;
7 return sourceColor &amp; filterColor;
8 }

 有了这个方法之后,我们就可以对其进行定制,可以将这三种颜色进行一下特殊处理,直接返回告警的颜色
1 var s:uint = (162 &lt;&lt; 16) | (193 &lt;&lt; <img src="http://twaver.servasoft.com/wp-includes/images/smilies/icon_cool.gif" alt="8)" class="wp-smiley"> | 210; twaver.Defaults.PIXEL_FILTER_FUNCTION = function(sourceColor:uint, filterColor:uint):uint {     if(sourceColor == s &amp;&amp; (filterColor == AlarmSeverity.MAJOR.color ||         filterColor == AlarmSeverity.MINOR.color         || filterColor == customAlarmSeverity.color)) {         return filterColor;     }     var r:uint = (sourceColor &gt;&gt; 16) &amp; 0xFF;
2 var g:uint = (sourceColor &gt;&gt; <img src="http://twaver.servasoft.com/wp-includes/images/smilies/icon_cool.gif" alt="8)" class="wp-smiley"> &amp; 0xFF;
3 var b:uint = sourceColor &amp; 0xFF;
4 sourceColor = (r * 77 + g * 151 + b * 28) &gt;&gt; 8;
5 sourceColor = (sourceColor &lt;&lt; 16) | (sourceColor &lt;&lt; 8 ) | sourceColor;
6 return sourceColor &amp; filterColor;
7 };

运行后再来看看效果:

最新附上完整的代码供大家参考:
 1 <?xml version="1.0" encoding="utf-8"?>
 2 <mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml"
 3                 xmlns:twaver="http://www.servasoftware.com/2009/twaver/flex"
 4                 width="100%" height="100%"
 5                 creationComplete="init()" backgroundColor="#FFFFFF" >
 6     <mx:Script>
 7         <![CDATA[
 8             import twaver.AlarmSeverity;
 9             import twaver.Defaults;
10             import twaver.Node;
11             import twaver.Utils;
12             import twaver.Consts;
13             import twaver.Styles;
14 
15             [Embed(source="/image/BTSGroup.png")]
16             private static var bts:Class;
17 
18             [Embed(source="/image/network_server.png")]
19             private static var wireless:Class;
20 
21             private static var customAlarmSeverity:AlarmSeverity = AlarmSeverity.register(3, 'custom', 'custom', 0xE4DC8A);
22 
23             private function init():void {
24                 var s:uint = (162 << 16 ) | (193 << 8 ) | 210;
25                 Utils.registerImageByClass('bts', bts);
26                 Utils.registerImageByClass('wireless', wireless);
27                 twaver.Defaults.PIXEL_FILTER_FUNCTION = function(sourceColor:uint, filterColor:uint):uint {
28                     if(sourceColor == s && (filterColor == AlarmSeverity.MAJOR.color ||
29                         filterColor == AlarmSeverity.MINOR.color
30                         || filterColor == customAlarmSeverity.color)) {
31                         return filterColor;
32                     }
33                     var r:uint = (sourceColor >> 16 ) & 0xFF;
34                     var g:uint = (sourceColor >> 8 ) & 0xFF;
35                     var b:uint = sourceColor & 0xFF;
36                     sourceColor = (r * 77 + g * 151 + b * 28 ) >> 8;
37                     sourceColor = (sourceColor << 16 ) | (sourceColor << 8 ) | sourceColor;
38                     return sourceColor & filterColor;
39                 };
40 
41                 addNode(AlarmSeverity.CRITICAL, 220, 100,'bts');
42                 addNode(AlarmSeverity.MAJOR, 340, 100,'bts');
43                 addNode(AlarmSeverity.MINOR, 460, 100,'bts');
44                 addNode(AlarmSeverity.WARNING, 580, 100,'bts');
45                 addNode(AlarmSeverity.INDETERMINATE, 700, 100,'bts');
46 
47                 addNode(AlarmSeverity.CRITICAL, 220, 250,'wireless');
48                 addNode(AlarmSeverity.MAJOR, 340, 250,'wireless');
49                 addNode(AlarmSeverity.MINOR, 460, 250,'wireless');
50                 addNode(AlarmSeverity.WARNING, 580, 250,'wireless');
51                 addNode(AlarmSeverity.INDETERMINATE, 700, 250,'wireless');
52             }
53 
54             private function addNode(alarmSeverity:AlarmSeverity, x:Number, y:Number,image):void {
55                 var node:Node = new Node();
56                 node.image = image;
57                 if(image == "bts"){
58                     node.setStyle(Styles.INNER_STYLE, Consts.INNER_STYLE_SHAPE);
59                     node.setStyle(Styles.INNER_SHAPE, Consts.SHAPE_CIRCLE);
60                     node.setStyle(Styles.INNER_GRADIENT, Consts.GRADIENT_RADIAL_CENTER);
61                     node.setStyle(Styles.INNER_GRADIENT_ALPHA, 0.5);
62                     node.setStyle(Styles.INNER_ALPHA, 0.8);
63                     node.setStyle(Styles.INNER_PADDING, -6);
64                     node.setStyle(Styles.INNER_BACK, false);
65                 }else if(image == "wireless"){
66                     node.setStyle(Styles.INNER_STYLE, Consts.INNER_STYLE_SHAPE);
67                     node.setStyle(Styles.INNER_SHAPE, Consts.SHAPE_DIAMOND);
68                     node.setStyle(Styles.INNER_GRADIENT, Consts.GRADIENT_RADIAL_SOUTHWEST);
69                     node.setStyle(Styles.INNER_PADDING_TOP, 10);
70                     node.setStyle(Styles.INNER_PADDING_BOTTOM, -5);
71                     node.setStyle(Styles.INNER_PADDING_LEFT, -20);
72                     node.setStyle(Styles.INNER_PADDING_RIGHT, -20);
73                 }
74 
75                 node.name = alarmSeverity.name ;
76                 node.location = new Point(x, y);
77                 node.alarmState.setNewAlarmCount(alarmSeverity, 22);
78                 network.elementBox.add(node);
79             }
80         ]]>
81     </mx:Script>
82     <twaver:Network id="network" width="100%" height="100%" />
83 </mx:HBox>
 

评论

# re: 自定义告警染色  回复  更多评论   

2012-05-09 13:09 by 上海婚庆公司
这个有点复杂的

# re: 自定义告警染色  回复  更多评论   

2012-05-14 12:37 by 35crmo合金管
这个代码有点复杂

只有注册用户登录后才能发表评论。


网站导航: