Silverlight-Distribute Radar Scan Points Randomly and Simulate Scanned Equipment

In last post, we have simulated a radar scan to monitor several computers. Now, there are many equipments and every one has CPU usage property. If the CPU value is over 90, the color turns to red when radar scanning.

In this post, we will throw several equipment points in radar scan randomly. The location of these points in radar scan is set by X and Y coordinate property and a flicker animation is generated.

Create a new custom control and name it Device.xaml.

Firstly, calculate X, Y coordinate and set CPU signalvalue Value. We can use Rondom object rom.Next(Math.Sin(45)*250) function to get X and Y coordinate of equipment. Temporarily, we set central coordinate as (0,0) and radius as 250. It is possible that X or Y coordinate is negative. At that time, we can call Random object to get number less than 2. If it is 1, set the number which is gotten randomly as negative. Please note that Random object is to use system clock to generate seed value. Therefore, we should set only one Random object in global scope. If setting several Random objects, we get the same value at the same time. The solution is to set one public static global scope random object. It can meet the requirement by calling Next() function of this object. The coordinate is set as (0,0) at the beginning, after calculating, X, Y coordinate plus 300 and the central point location becomes (300, 300). Besides, assign number within 100 which random object gets to CPU usage signalvalue Value of equipment.

Code as following:

        public Device()

        {

            InitializeComponent();

            InitData();

        }

        private double _X;

        private double _Y;

        private double _Value;

        ///<summary>

        ///X Coordinate

        ///</summary>

        public double X

        {

            get { return _X; }

            set { _X = value; }

        }

        ///<summary>

        ///Y Coordinate

        ///</summary>

        public double Y

        {

            get { return _Y; }

            set { _Y = value; }

        }

        ///<summary>

        ///Equipment Key Signalvalue

        ///</summary>

         public double Value

         {

             get { return _Value; }

             set { _Value = value; }

         }

        public static Random rom = new Random();

        public void InitData()

        {

            #regionDistribute Equipment to Radar Scan Randomly and Simulate Scanned Equipment.

            //Simulate Equipment CPU Value

            Value = rom.Next(100);

            //Simulate Equipments and Distribute them in Scan Randomly.

            //Simulate X Coordinate           

            X = rom.Next(200);

            //Simulate X Coordinate Symbol. If 0, it is positive. If 1, negative.

            int Xmark = rom.Next(2);

            if (Xmark == 1)

            {

                X = -X;

            }

            X = X + 300.0;

            //Simulate Y Coordinate

            Y = rom.Next(Convert.ToInt32(Math.Sin(45)*250));

            //Simulate Y Coordinate Symbol. If 0, it is positive. If 1, negative.

            int Ymark = rom.Next(2);

            if (Ymark == 1)

            {

                Y = -Y;

            }          

            Y = Y + 300.0;

            Storyboard1.Begin();

            #endregion

            //tip Displays Current Value

            devicetip.Content = “CPU usage:” + Value + “–X:” + X + “–Y:” + Y;

        }

Secondly, generate animation of equipment point. Add two same rectangle boxes in Device.xaml (RectangleRed, Rectangleblue). The two boxes become one small ring which has white center and transparent external surface by CompositeTransform. We can control ScaleX and ScaleY of RetangleRed ring from 0.3 times to 2 times within 1 sec and control ScaleX and ScaleY of Rectangleblue ring from 2 times to 0.3 times within 1 sec. Then, we can get a flickering point.

XAML code:

    <UserControl.Resources>

    <Storyboard x:Name=“Storyboard1” RepeatBehavior=“Forever”>

    <DoubleAnimation Duration=“0:0:1” From=“0.3” To=“2”   Storyboard.TargetProperty=“(UIElement.RenderTransform).(CompositeTransform.ScaleX)” Storyboard.TargetName=“RectangleRed” />

    <DoubleAnimation Duration=“0:0:1” From=“0.3” To=“2” Storyboard.TargetProperty=“(UIElement.RenderTransform).(CompositeTransform.ScaleY)” Storyboard.TargetName=“RectangleRed” />

    <DoubleAnimation Duration=“0:0:1” From=“2” To=“0.3”   Storyboard.TargetProperty=“(UIElement.RenderTransform).(CompositeTransform.ScaleX)” Storyboard.TargetName=“Rectangleblue” />

    <DoubleAnimation Duration=“0:0:1” From=“2” To=“0.3” Storyboard.TargetProperty=“(UIElement.RenderTransform).(CompositeTransform.ScaleY)” Storyboard.TargetName=“Rectangleblue” />

    </Storyboard>

    </UserControl.Resources>

    <Grid x:Name=“LayoutRoot” >

    <Rectangle HorizontalAlignment=“Left”   VerticalAlignment=“Top” Height=“16” x:Name=“RectangleRed” RadiusX=“15” RadiusY=“15” Width=“15” RenderTransformOrigin=“0.5,0.5”>

    <Rectangle.RenderTransform>

    <CompositeTransform/>

    </Rectangle.RenderTransform>

    <Rectangle.Fill>

    <RadialGradientBrush>

    <GradientStop Color=“White” Offset=“0”/>

    <GradientStop Color=“#30FFFFFF” Offset=“0.276”/>

    <GradientStop Color=“Transparent” Offset=“0.582”/>

    </RadialGradientBrush>

    </Rectangle.Fill>

    </Rectangle>

    <Rectangle HorizontalAlignment=“Left”   VerticalAlignment=“Top” Height=“16” x:Name=“Rectangleblue” RadiusX=“15” RadiusY=“15” Width=“15” RenderTransformOrigin=“0.5,0.5”>

    <Rectangle.RenderTransform>

    <CompositeTransform/>

    </Rectangle.RenderTransform>

    <Rectangle.Fill>

    <RadialGradientBrush>

    <GradientStop Color=“White” Offset=“0”/>

    <GradientStop Color=“#30FFFFFF” Offset=“0.276”/>

    <GradientStop Color=“Transparent” Offset=“0.582”/>

    </RadialGradientBrush>

    </Rectangle.Fill>

    <ToolTipService.ToolTip>

    <ToolTip x:Name=“devicetip” />

    </ToolTipService.ToolTip>

    </Rectangle>

    </Grid>

Finally, put several scanning point which is created when radar scan is intialized in scan.

            #region Add Flicker Equipment

            for (int i = 0; i < 15; i++)

            {

                Device dev=new Device();

                //Set X, Y Coordinate and Z Level

                dev.SetValue(Canvas.TopProperty,dev.Y);

                dev.SetValue(Canvas.LeftProperty,dev.X);

                dev.SetValue(Canvas.ZIndexProperty, 600);

                LayoutRoot.Children.Add(dev);

            }

            #endregion

Result:

Two Components Recommend:

Spire.Doc, is used to operate MS Word document for .Net and Silverlight, including basic manipulations (generate, open, edit documents), mail merge and other Word functions manipulations.

Spire.XLS, is used to operate MS Excel for .NET and Silverlight, including basic manipulations (generate, open, edit files), chart creation and data exporting.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s