Application of Digital Image processing technology in Twaver visualization

Digital Image processing (processing), also known as Computer image processing, refers to the process of converting image signals into digital signals and using computers to process them. Commonly used image processing methods include image enhancement, restoration, coding, compression, etc., Digital image processing applications are very extensive. Detailed introduction of digital image processing can refer to the book "Gonzales Digital Image processing."
Twaver as a tool of visualization, if in the display network element, integration of image processing technology, will be the display of the network element to increase flexibility, is a very interesting thing. Then we might as well try to incorporate image processing technology into it.

First we rewrite a network element cnode, and customize the special network element used to process the image.

public class CNode extends Node{public function CNode (id:object = null) {super (ID);} Override public Function Get Elementuiclass (): Class{return Cnodeui;}} public class Cnodeui extends nodeui{private var currentimageasset:iimageasset = null;private var currentcomponent:d Isplayobject = Null;public function Cnodeui (network:network, Node:node) {super (network,node);} Override protected function Drawdefaultcontent (graphics:graphics): void{//here to process the image and draw the image}}

such a framework for processing images in the Twaver is completed, as long as the image processing in the above Drawdefaultcontent method and return to draw, you can achieve the image processing.
so let's take a look at the common image processing method, in this explanation, choose a beautiful picture as the image processing material.
1. Image binary: Treat an image as a two-dimensional array, traverse a two-dimensional array, and process the values of a single pixel. To achieve grayscale, you need to define a color (or grayscale value) threshold that separates the grayscale values in the image by the threshold values.

Private Function Dobinary (bd:bitmapdata): BitmapData {var rect:rectangle = bd.rect;for (var i:int=rect.x; i<rect.x+ rect.width;i++) {for (var J:int=rect.y; j<rect.y+rect.height;j++) {var color:uint = Bd.getpixel (i,j); if (color> 0x605555) {bd.setpixel (I,J,0XFFFFFF);} Else{bd.setpixel (i,j,0x00000);}}} return BD;}

The effect is as follows:

2. Grayscale of images
The grayscale calculation formula is as follows: Gary (I,J) =0.299*r (i,j) +0.587*g (i,j) +0.114*b (i,j);

Private Function Dogray (bd:bitmapdata): BitmapData {var rect:rectangle = bd.rect;for (var i:int=rect.x; I for (Var j:int= Rect.y;  J var color = Bd.getpixel (i,j), var rgb:array = Colorutils.combinationtorgb (color), var gray = (int) (rgb[0] * 0.299 + rgb[1] * 0.587 + rgb[2] * 0.114) Bd.setpixel (I,j,colorutils.rgbtocombination ([Gray,gray,gray]));}} return BD;}

3. Image rotation

Private Function Dorotate (bd:bitmapdata): Bitmapdata{var rect:rectangle = Bd.rect;var M:matrix = new Matrix (); M.rotate ( MATH.PI/3); m.translate (rect.height,0); var bmp:bitmapdata = new BitmapData (bd.height, Bd.width,false); Bmp.draw (bd,m) ; return bmp;}

image rotation 60 degrees

image First binary, then rotated 60 degrees

There are many algorithms for image processing, which can be used to support updating more complex image processing results.
Some people will ask, what is the significance of such treatment, and what practical application value?
The answer is yes, any kind of technology, as long as the right place, will reflect its value, then the combination of image processing technology and twaver can be rubbed out what sparks?
look at the demo below.
when the network element alarm occurs, the Twaver traditional method is through the mixed network element picture color and the alarm color, obtains the effect as follows:

then using image processing techniques can be used to obtain such rendering results:

How, the effect is good, need to hurry contact us, mail: [email protected]

Application of Digital Image processing technology in Twaver visualization