Dave's Silverlight Dashboards and gauges

MatrixLedMarquee


The MatrixLedMarquee control is a scrolling LED display. It is modelled on the early monochrome versions. As usual on the Silverlight Dashboard project the mode is fully go-retro.

As usual we start with a basic example to get us going.

The marquee in code (as in real life) is constructed from multiple panels that are 5 wide by seven high. in code we specify this via the Panels property, the message can be specified in XAML by the Text property

            <db:MatrixLedMarquee 
                Panels="10" 
                Text="Hello Silverlight."/>

There are properties to specified the on and off colors of the LEDS LedOnColor and not unsurprisingly LedOffColor You can also specify the interval between steps for the anination using the TimerDuration property.

Which gives us:

            <db:MatrixLedMarquee 
                TimerDuration="00:00:0.1"
                LedOnColor="#FFFF00FF"
                LedOffColor="#22FF00FF"
                Panels="10" 
                Text="Hello Silverlight."/>

Modes

As you will see when the above animation completes, the marquee is empty. That's because the default mode for the MatrixLedMarquee is SingleShot and we don't supply additional text.

The three modes that the MatrixLedMarquee supports are:

  • SingleShot
  • Continious
  • Motionless

SingleShot: The text is scrolled once, whe the last digit is fully rendered on the panel, the MatrixLedMarquee will raise an event allowing you to set the next piece of text.

Continious: The text is scrolled, when it comes to an end the text is started again.

Motionless: The Text is not scrolled, it is rendered in place and alligned according to the TextAlign property.

For SingleShot and Continious modes: the new text goes straight on after the previous one, it is up to the caller to pad with spaces as required.


SingleShot

Single shot can be fire and forget, but it can also be useful for a news ticker, where after a headline has finished scrolling, you retrieve the next one and start it away.

The XAML for the control initializes it and sets up the event handler

            <db:MatrixLedMarquee Panels="10" TimerDuration="00:00:0.1"
                Mode="SingleShot" x:Name="_marq"
                MarqueeFinished="_marq_MarqueeFinished"
                />

Our user control that hosts the marquee initializes the first text on load and then the next one after each message finishes.

In reality the list would come from a web service

         public partial class Mat3 : UserControl
            {
                /// <summary>
                /// Our messages, we will continuously rotate through them
                /// </summary>
                List<string> Messages = new List<string>
                {
                    "Message one",
                    "Message two",
                    "Message three"
                };

                /// <summary>
                /// Constructs a Mat3
                /// </summary>
                public Mat3()
                {
                    InitializeComponent();

                    Loaded += new RoutedEventHandler(IAmLoaded);
                }

                /// <summary>
                /// Control is loaded set the first message
                /// </summary>
                void IAmLoaded(object sender, RoutedEventArgs e)
                {
                    SetNextMessage();
                }

                /// <summary>
                /// Marquee has finished animating, get the next message going
                /// </summary>
                private void _marq_MarqueeFinished(object sender, EventArgs e)
                {
                    SetNextMessage();
                }

                int _message = 0;
                /// <summary>
                /// Sets the next message and puts a little place holder between em
                /// </summary>
                private void SetNextMessage()
                {
                    _marq.Text = Messages[_message] + " * ";
                    _message += 1;
                    if (_message > Messages.Count -1 )
                    {
                        _message = 0;
                    }
                }
            }

Continious

Continious operation is as simple as setting the text and the mode to Continious. Note that the Text defintion has an space at the end to sperate the next copy from the previous one

            <db:MatrixLedMarquee 
                Panels="10" 
                TimerDuration="00:00:0.1"                             
                Mode="Continious"
                Text="David Black "/>

Motionless

For motonless text we set the text, the Model to motionless and ! nothing much else happens :-). Seen here with text left, right and center justified

            <db:MatrixLedMarquee Panels="10" Mode="Motionless"
                TextAlignment="Left" Text="lft" />

            <db:MatrixLedMarquee  Panels="10" Mode="Motionless"
                TextAlignment="Right" Text="rgt" />       
                
            <db:MatrixLedMarquee  Panels="10" Mode="Motionless"
                TextAlignment="Center"  Text="cent" />
            

Character set

The current release supports the most common characters for English. Further support will be added if an when requested. Please note this control is very low resolution and as such will not support Japanese or Chinese characters. I would need to create a 24 by 16 matrix for that to be possible

There is a very basic font editor available on the demo site I will include instructions on how to ue it later if required.

Current character support is

Welcome page

Controls

  • DecadeVuMeter
  • Dial180
  • Dial360
  • DiamondSlider
  • FiveStarRanking
  • MatrixLedMarquee
  • Odometer
  • PerformanceMonitor
  • PlainThermometer
  • ProgressBar
  • RoundLed
  • SixteenSegmentLED
  • TickCross
  • WallThermometer

Bits and pieces

  • Bidirectional operation
  • Contacts and pages
  • Matrix font editor
Designed by Free CSS Templates, Thanks to Dubai Villas