To Customize Alarm Coloration

In TWaver, there are varieties of ways to show alarms on the network, among which the most commonly-used one is to add the color of the corresponding alarm severity to the original image. It is supported in all TWaver’s product branches. Here is the effect:

In addition, there is another two ways which is to add the alarm color to the foreground or the background of elements. Here is the effect:

We mainly focus on the default way of coloration which is to overlay color on images, that is, we overlay the alarm color on the original image of the element. It goes perfect in most images. For example, we colorize two images randomly found on the Net.

The effect is good except for the colorizations on two images whose color is obviously different from that of alarm severity. We have made a test on an icon and found that:

In the image above, obviously, the three levels of alarm severity Major, Minor and custom’s color after alarm coloration are different from the color of their bubbles. How to deal with it? After reading API you will know that in TWaver you can customize alarm coloration. PIXEL_FILTER_FUNCTION in Defaults is applied as default. Let’s have a look at it:

function(sourceColor:uint, filterColor:uint):uint {
    var r:uint = (sourceColor >> 16 ) & 0xFF;
    var g:uint = (sourceColor >> 8 ) & 0xFF;
    var b:uint = sourceColor & 0xFF;
    sourceColor = (r * 77 + g * 151 + b * 28) >> 8;
    sourceColor = (sourceColor << 16) | (sourceColor << 8 ) | sourceColor;
    return sourceColor & filterColor;
}

Now we can customize it with this method. It will directly return the alarm color if we conduct special processing to the three colors.

function(sourceColor:uint, filterColor:uint):uint {
    if(sourceColor == s && (filterColor == AlarmSeverity.MAJOR.color ||
        filterColor == AlarmSeverity.MINOR.color)) {
        return filterColor;
    }
    var r:uint = (sourceColor >> 16 ) & 0xFF;
    var g:uint = (sourceColor >> 8 ) & 0xFF;
    var b:uint = sourceColor & 0xFF;
    sourceColor = (r * 77 + g * 151 + b * 28) >> 8;
    sourceColor = (sourceColor << 16) | (sourceColor << 8 ) | sourceColor;
    return sourceColor & filterColor;
};

Let’s see the effect after running the codes above:

The following is the complete codes for your reference:

<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml"
                xmlns:twaver="http://www.servasoftware.com/2009/twaver/flex"
                width="100%" height="100%"
                creationComplete="init()" backgroundColor="#FFFFFF" >
    <mx:Script>
        <![CDATA[
            import twaver.AlarmSeverity;
            import twaver.Defaults;
            import twaver.Node;
            import twaver.Utils;
            import twaver.Consts;
            import twaver.Styles;

            [Embed(source="/image/BTSGroup.png")]
            private static var bts:Class;

            [Embed(source="/image/network_server.png")]
            private static var wireless:Class;

            private static var customAlarmSeverity:AlarmSeverity = AlarmSeverity.register(3, 'custom', 'custom', 0xE4DC8A);

            private function init():void {
                var s:uint = (162 << 16 ) | (193 << 8 ) | 210;
                Utils.registerImageByClass('bts', bts);
                Utils.registerImageByClass('wireless', wireless);
                twaver.Defaults.PIXEL_FILTER_FUNCTION = function(sourceColor:uint, filterColor:uint):uint {
                    if(sourceColor == s && (filterColor == AlarmSeverity.MAJOR.color ||
                        filterColor == AlarmSeverity.MINOR.color
                        || filterColor == customAlarmSeverity.color)) {
                        return filterColor;
                    }
                    var r:uint = (sourceColor >> 16 ) & 0xFF;
                    var g:uint = (sourceColor >> 8 ) & 0xFF;
                    var b:uint = sourceColor & 0xFF;
                    sourceColor = (r * 77 + g * 151 + b * 28 ) >> 8;
                    sourceColor = (sourceColor << 16 ) | (sourceColor << 8 ) | sourceColor;
                    return sourceColor & filterColor;
                };

                addNode(AlarmSeverity.CRITICAL, 220, 100,'bts');
                addNode(AlarmSeverity.MAJOR, 340, 100,'bts');
                addNode(AlarmSeverity.MINOR, 460, 100,'bts');
                addNode(AlarmSeverity.WARNING, 580, 100,'bts');
                addNode(AlarmSeverity.INDETERMINATE, 700, 100,'bts');

                addNode(AlarmSeverity.CRITICAL, 220, 250,'wireless');
                addNode(AlarmSeverity.MAJOR, 340, 250,'wireless');
                addNode(AlarmSeverity.MINOR, 460, 250,'wireless');
                addNode(AlarmSeverity.WARNING, 580, 250,'wireless');
                addNode(AlarmSeverity.INDETERMINATE, 700, 250,'wireless');
            }

            private function addNode(alarmSeverity:AlarmSeverity, x:Number, y:Number,image):void {
                var node:Node = new Node();
                node.image = image;
                if(image == "bts"){
                    node.setStyle(Styles.INNER_STYLE, Consts.INNER_STYLE_SHAPE);
                    node.setStyle(Styles.INNER_SHAPE, Consts.SHAPE_CIRCLE);
                    node.setStyle(Styles.INNER_GRADIENT, Consts.GRADIENT_RADIAL_CENTER);
                    node.setStyle(Styles.INNER_GRADIENT_ALPHA, 0.5);
                    node.setStyle(Styles.INNER_ALPHA, 0.8);
                    node.setStyle(Styles.INNER_PADDING, -6);
                    node.setStyle(Styles.INNER_BACK, false);
                }else if(image == "wireless"){
                    node.setStyle(Styles.INNER_STYLE, Consts.INNER_STYLE_SHAPE);
                    node.setStyle(Styles.INNER_SHAPE, Consts.SHAPE_DIAMOND);
                    node.setStyle(Styles.INNER_GRADIENT, Consts.GRADIENT_RADIAL_SOUTHWEST);
                    node.setStyle(Styles.INNER_PADDING_TOP, 10);
                    node.setStyle(Styles.INNER_PADDING_BOTTOM, -5);
                    node.setStyle(Styles.INNER_PADDING_LEFT, -20);
                    node.setStyle(Styles.INNER_PADDING_RIGHT, -20);
                }

                node.name = alarmSeverity.name ;
                node.location = new Point(x, y);
                node.alarmState.setNewAlarmCount(alarmSeverity, 22);
                network.elementBox.add(node);
            }
        ]]>
    </mx:Script>
    <twaver:Network id="network" width="100%" height="100%" />
</mx:HBox>