Vamos a crear un sistema de control de semáforos. Un sistema de control de tráfico, debe coordinar semáforos conforme a la situación geográfica, prioridad de paso, alta circulación y sinfín de factores, en este caso vamos a crear uno sencillo que nos permita cruzar una avenida de una sola vez. Para ello debemos tener un sistema de control y semáforos lógicamente. La mayoría de los semáforos, como de todos es bien sabido, tienen 3 luces, una roja, otra ámbar y otra verde, algunos además tienen control de peatones e indicaciones auxiliares, pero nosotros vamos a crear uno sencillo, con sus tres luces y más adelante ya veremos si ampliamos sus funcionalidades.

Su funcionamiento básico es verde, pasa a amarillo esperando durante unos segundos pasando a rojo finalizando el bucle, vuelve al verde y comienza de nuevo. También puede estar parpadeando.

Pues empezando por lo básico, vamos a crear las luces y como estamos en 2017, vamos a crearlos de LED,s, ya que cambiar el color y añadir un degradado radial no es muy complicado, lo vamos a hacer un poco más difícil o más fácil según se vea.

He usado WPF para crear un control de usuario y dentro de este, he añadido un grid donde voy a distribuir los LED,s dándole un aspecto como el siguiente (el código lo adjunto al final del post)
semaforo01

Además, le he agregado algunas propiedades de dependencia en las que podamos cambiar el color de los LED cuando está encendida la luz, (en este caso yo las he puesto blancas), el color del LED cuando está apagada y el color de fondo cuando están de igual modo apagadas o encendidas. A continuación el código

        #region DependecyProperties

        public bool LightIsEnabled
        {
            get { return (bool)GetValue(LightIsEnabledProperty); }
            set { SetValue(LightIsEnabledProperty, value); }
        }

        public Brush LEDColorON
        {
            get { return (Brush)GetValue(LEDColorONProperty); }
            set { SetValue(LEDColorONProperty, value); }
        }

        public Brush LEDColorOFF
        {
            get { return (Brush)GetValue(LEDColorOFFProperty); }
            set { SetValue(LEDColorOFFProperty, value); }
        }

        public Brush LEDLightBackgroundOFF
        {
            get { return (Brush)GetValue(LEDLightBackgroundProperty); }
            set { SetValue(LEDLightBackgroundProperty, value); }
        }

        public Brush LEDLightBackgroundON
        {
            get { return (Brush)GetValue(LEDLightBackgroundONProperty); }
            set { SetValue(LEDLightBackgroundONProperty, value); }
        }

        // Using a DependencyProperty as the backing store for MyProperty.  This enables animation, styling, binding, etc...
        public static readonly DependencyProperty LEDLightBackgroundONProperty =
            DependencyProperty.Register("LEDLightBackgroundON", typeof(Brush), typeof(LEDLight), new PropertyMetadata(Brushes.Lime));

        // Using a DependencyProperty as the backing store for LEDLightBackground.  This enables animation, styling, binding, etc...
        public static readonly DependencyProperty LEDLightBackgroundProperty =
            DependencyProperty.Register("LEDLightBackgroundOFF", typeof(Brush), typeof(LEDLight), new PropertyMetadata(Brushes.Silver));

        // Using a DependencyProperty as the backing store for LEDColorOFF.  This enables animation, styling, binding, etc...
        public static readonly DependencyProperty LEDColorOFFProperty =
            DependencyProperty.Register("LEDColorOFF", typeof(Brush), typeof(LEDLight), new PropertyMetadata(Brushes.LightGray));

        // Using a DependencyProperty as the backing store for MyProperty.  This enables animation, styling, binding, etc...
        public static readonly DependencyProperty LEDColorONProperty =
            DependencyProperty.Register("LEDColorON", typeof(Brush), typeof(LEDLight), new PropertyMetadata(Brushes.White));

        // Using a DependencyProperty as the backing store for ON.  This enables animation, styling, binding, etc...
        public static readonly DependencyProperty LightIsEnabledProperty =
            DependencyProperty.Register("LightIsEnabled", typeof(bool), typeof(LEDLight), new PropertyMetadata(false));

        #endregion

Y ¿como se enciende y se apaga? He incluido un par de DataTrigger que comprueban si el valor de la propiedad LightIsEnabled es verdadero y si es así asigna el valor de la propiedad LEDColorON a cada LED y el valor de la propiedad LEDLightBackgroundON al relleno de la ellipse interna. Si al crear una instancia de este, cambiamos esta propiedad, la luz se encenderá o se apagará.
Ahora solo nos queda crear una instancia desde un formulario y ver si funciona

Video5.gif
Fondo de color y LED,s blancos

Video6.gif

Fondo y LED,s de color

y las instancias desde XAML, quedarían así:


y el código del control de usuario. En la próxima entrega el semáforo.

<UserControl x:Class="Controls.LEDLight"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:controls="clr-namespace:Controls"
             mc:Ignorable="d" 
             d:DesignHeight="200" d:DesignWidth="200">
    <Grid x:Name="grid">
        <Grid.Resources>
            <!--ESTILO DE LED-->
            <Style x:Key="ellipseLED" TargetType="Ellipse">
                <Setter Property="Margin" Value="1"/>
                <Setter Property="HorizontalAlignment" Value="Stretch"/>
                <Setter Property="VerticalAlignment" Value="Stretch"/>
                <Setter Property="Fill" Value="{Binding LEDColorOFF}"/>
                <Setter Property="Grid.RowSpan" Value="2"/>
                <Setter Property="Grid.ColumnSpan" Value="2"/>
                <Style.Triggers>
                    <DataTrigger Binding="{Binding LightIsEnabled}" Value="True">
                        <Setter Property="Fill" Value="{Binding LEDColorON}"/>
                    </DataTrigger>
                    <MultiDataTrigger>
                        <MultiDataTrigger.Conditions>
                            <Condition Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=controls:LEDLight},Path=LEDLightInsideShape}" Value="{x:Static controls:LEDLight+LEDLightInsideShapeEnum.LeftArrow}"/>
                            <Condition Binding="{Binding LightIsEnabled}" Value="True"/>
                        </MultiDataTrigger.Conditions>
                        <Setter Property="Fill" Value="{Binding LEDColorON}"/>
                    </MultiDataTrigger>
                </Style.Triggers>
            </Style>
            <!--ESTILO DEL CIRCULO CENTRAL EXTERIOR-->
            <Style x:Key="centralEllipse" TargetType="Ellipse">
                <Setter Property="Fill" Value="Transparent"/>
                <Setter Property="Stroke" Value="DarkGray"/>
                <Setter Property="StrokeThickness" Value="5"/>
            </Style>
            <!--ESTILO DEL FONDO DEL CIRCULO INTERIOR-->
            <Style x:Key="centralEllipse2" TargetType="Ellipse">
                <Setter Property="Fill" Value="{Binding LEDLightBackgroundOFF}"/>
                <Style.Triggers>
                    <DataTrigger Binding="{Binding LightIsEnabled}" Value="True">
                        <Setter Property="Fill" Value="{Binding LEDLightBackgroundON}"/>
                    </DataTrigger>
                </Style.Triggers>

            </Style>
        </Grid.Resources>
        <Grid.RowDefinitions>
            <RowDefinition Height="10*"/>
            <RowDefinition Height="10*"/>
            <RowDefinition Height="10*"/>
            <RowDefinition Height="10*"/>
            <RowDefinition Height="10*"/>
            <RowDefinition Height="10*"/>
            <RowDefinition Height="10*"/>
            <RowDefinition Height="10*"/>
            <RowDefinition Height="10*"/>
            <RowDefinition Height="10*"/>
            <RowDefinition Height="10*"/>
            <RowDefinition Height="10*"/>
            <RowDefinition Height="10*"/>
            <RowDefinition Height="10*"/>
            <RowDefinition Height="10*"/>
            <RowDefinition Height="10*"/>
            <RowDefinition Height="10*"/>
            <RowDefinition Height="10*"/>
            <RowDefinition Height="10*"/>
            <RowDefinition Height="10*"/>
            <RowDefinition Height="10*"/>
            <RowDefinition Height="10*"/>
            <RowDefinition Height="10*"/>
            <RowDefinition Height="10*"/>
            <RowDefinition Height="10*"/>
            <RowDefinition Height="10*"/>
            <RowDefinition Height="10*"/>
            <RowDefinition Height="10*"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="10*"/>
            <ColumnDefinition Width="10*"/>
            <ColumnDefinition Width="10*"/>
            <ColumnDefinition Width="10*"/>
            <ColumnDefinition Width="10*"/>
            <ColumnDefinition Width="10*"/>
            <ColumnDefinition Width="10*"/>
            <ColumnDefinition Width="10*"/>
            <ColumnDefinition Width="10*"/>
            <ColumnDefinition Width="10*"/>
            <ColumnDefinition Width="10*"/>
            <ColumnDefinition Width="10*"/>
            <ColumnDefinition Width="10*"/>
            <ColumnDefinition Width="10*"/>
            <ColumnDefinition Width="10*"/>
            <ColumnDefinition Width="10*"/>
            <ColumnDefinition Width="10*"/>
            <ColumnDefinition Width="10*"/>
            <ColumnDefinition Width="10*"/>
            <ColumnDefinition Width="10*"/>
            <ColumnDefinition Width="10*"/>
            <ColumnDefinition Width="10*"/>
            <ColumnDefinition Width="10*"/>
            <ColumnDefinition Width="10*"/>
            <ColumnDefinition Width="10*"/>
            <ColumnDefinition Width="10*"/>
        </Grid.ColumnDefinitions>
        <!--Ellipse central. INTERIOR-->
        <Ellipse Grid.Row="0" Grid.ColumnSpan="27" Grid.RowSpan="28" Style="{StaticResource  centralEllipse2}"/>

        <!--Linea 0-->
        <Ellipse Grid.Row="1" Grid.Column="8" Style="{StaticResource ellipseLED}"/>
        <Ellipse Grid.Row="1" Grid.Column="10" Style="{StaticResource ellipseLED}"/>
        <Ellipse Grid.Row="1" Grid.Column="12" Style="{StaticResource ellipseLED}"/>
        <Ellipse Grid.Row="1" Grid.Column="14" Style="{StaticResource ellipseLED}"/>
        <Ellipse Grid.Row="1" Grid.Column="16" Style="{StaticResource ellipseLED}"/>
        
        <!--Linea 1-->
        <Ellipse Grid.Row="3" Grid.Column="5" Style="{StaticResource ellipseLED}"/>
        <Ellipse Grid.Row="3" Grid.Column="7" Style="{StaticResource ellipseLED}"/>
        <Ellipse Grid.Row="3" Grid.Column="9" Style="{StaticResource ellipseLED}"/>
        <Ellipse Grid.Row="3" Grid.Column="11" Style="{StaticResource ellipseLED}"/>
        <Ellipse Grid.Row="3" Grid.Column="13" Style="{StaticResource ellipseLED}"/>
        <Ellipse Grid.Row="3" Grid.Column="15" Style="{StaticResource ellipseLED}"/>
        <Ellipse Grid.Row="3" Grid.Column="17" Style="{StaticResource ellipseLED}"/>
        <Ellipse Grid.Row="3" Grid.Column="19" Style="{StaticResource ellipseLED}"/>
        
        <!--Linea 2-->
        <Ellipse Grid.Row="5" Grid.Column="4" Style="{StaticResource ellipseLED}"/>
        <Ellipse Grid.Row="5" Grid.Column="6" Style="{StaticResource ellipseLED}"/>
        <Ellipse Grid.Row="5" Grid.Column="8" Style="{StaticResource ellipseLED}"/>
        <Ellipse Grid.Row="5" Grid.Column="10" Style="{StaticResource ellipseLED}"/>
        <Ellipse Grid.Row="5" Grid.Column="12" Style="{StaticResource ellipseLED}"/>
        <Ellipse Grid.Row="5" Grid.Column="14" Style="{StaticResource ellipseLED}"/>
        <Ellipse Grid.Row="5" Grid.Column="16" Style="{StaticResource ellipseLED}"/>
        <Ellipse Grid.Row="5" Grid.Column="18" Style="{StaticResource ellipseLED}"/>
        <Ellipse Grid.Row="5" Grid.Column="20" Style="{StaticResource ellipseLED}"/>
        
        <!--Linea 3-->
        <Ellipse Grid.Row="7" Grid.Column="3" Style="{StaticResource ellipseLED}"/>
        <Ellipse Grid.Row="7" Grid.Column="5" Style="{StaticResource ellipseLED}"/>
        <Ellipse Grid.Row="7" Grid.Column="7" Style="{StaticResource ellipseLED}"/>
        <Ellipse Grid.Row="7" Grid.Column="9" Style="{StaticResource ellipseLED}"/>
        <Ellipse Grid.Row="7" Grid.Column="11" Style="{StaticResource ellipseLED}"/>
        <Ellipse Grid.Row="7" Grid.Column="13" Style="{StaticResource ellipseLED}"/>
        <Ellipse Grid.Row="7" Grid.Column="15" Style="{StaticResource ellipseLED}"/>
        <Ellipse Grid.Row="7" Grid.Column="17" Style="{StaticResource ellipseLED}"/>
        <Ellipse Grid.Row="7" Grid.Column="19" Style="{StaticResource ellipseLED}"/>
        <Ellipse Grid.Row="7" Grid.Column="21" Style="{StaticResource ellipseLED}"/>
        
        <!--Linea 4-->
        <Ellipse Grid.Row="9" Grid.Column="2" Style="{StaticResource ellipseLED}"/>
        <Ellipse Grid.Row="9" Grid.Column="4" Style="{StaticResource ellipseLED}"/>
        <Ellipse Grid.Row="9" Grid.Column="6" Style="{StaticResource ellipseLED}"/>
        <Ellipse Grid.Row="9" Grid.Column="8" Style="{StaticResource ellipseLED}"/>
        <Ellipse Grid.Row="9" Grid.Column="10" Style="{StaticResource ellipseLED}"/>
        <Ellipse Grid.Row="9" Grid.Column="12" Style="{StaticResource ellipseLED}"/>
        <Ellipse Grid.Row="9" Grid.Column="14" Style="{StaticResource ellipseLED}"/>
        <Ellipse Grid.Row="9" Grid.Column="16" Style="{StaticResource ellipseLED}"/>
        <Ellipse Grid.Row="9" Grid.Column="18" Style="{StaticResource ellipseLED}"/>
        <Ellipse Grid.Row="9" Grid.Column="20" Style="{StaticResource ellipseLED}"/>
        <Ellipse Grid.Row="9" Grid.Column="22" Style="{StaticResource ellipseLED}"/>
        
        <!--Linea 5-->
        <Ellipse Grid.Row="11" Grid.Column="1" Style="{StaticResource ellipseLED}"/>
        <Ellipse Grid.Row="11" Grid.Column="3" Style="{StaticResource ellipseLED}"/>
        <Ellipse Grid.Row="11" Grid.Column="5" Style="{StaticResource ellipseLED}"/>
        <Ellipse Grid.Row="11" Grid.Column="7" Style="{StaticResource ellipseLED}"/>
        <Ellipse Grid.Row="11" Grid.Column="9" Style="{StaticResource ellipseLED}"/>
        <Ellipse Grid.Row="11" Grid.Column="11" Style="{StaticResource ellipseLED}"/>
        <Ellipse Grid.Row="11" Grid.Column="13" Style="{StaticResource ellipseLED}"/>
        <Ellipse Grid.Row="11" Grid.Column="15" Style="{StaticResource ellipseLED}"/>
        <Ellipse Grid.Row="11" Grid.Column="17" Style="{StaticResource ellipseLED}"/>
        <Ellipse Grid.Row="11" Grid.Column="19" Style="{StaticResource ellipseLED}"/>
        <Ellipse Grid.Row="11" Grid.Column="21" Style="{StaticResource ellipseLED}"/>
        <Ellipse Grid.Row="11" Grid.Column="23" Style="{StaticResource ellipseLED}"/>
        
        <!--Linea 6-->
        <Ellipse Grid.Row="13" Grid.Column="2" Style="{StaticResource ellipseLED}"/>
        <Ellipse Grid.Row="13" Grid.Column="4" Style="{StaticResource ellipseLED}"/>
        <Ellipse Grid.Row="13" Grid.Column="6" Style="{StaticResource ellipseLED}"/>
        <Ellipse Grid.Row="13" Grid.Column="8" Style="{StaticResource ellipseLED}"/>
        <Ellipse Grid.Row="13" Grid.Column="10" Style="{StaticResource ellipseLED}"/>
        <Ellipse Grid.Row="13" Grid.Column="12" Style="{StaticResource ellipseLED}"/>
        <Ellipse Grid.Row="13" Grid.Column="14" Style="{StaticResource ellipseLED}"/>
        <Ellipse Grid.Row="13" Grid.Column="16" Style="{StaticResource ellipseLED}"/>
        <Ellipse Grid.Row="13" Grid.Column="18" Style="{StaticResource ellipseLED}"/>
        <Ellipse Grid.Row="13" Grid.Column="20" Style="{StaticResource ellipseLED}"/>
        <Ellipse Grid.Row="13" Grid.Column="22" Style="{StaticResource ellipseLED}"/>
        
        <!--Linea 7-->
        <Ellipse Grid.Row="15" Grid.Column="1" Style="{StaticResource ellipseLED}"/>
        <Ellipse Grid.Row="15" Grid.Column="3" Style="{StaticResource ellipseLED}"/>
        <Ellipse Grid.Row="15" Grid.Column="5" Style="{StaticResource ellipseLED}"/>
        <Ellipse Grid.Row="15" Grid.Column="7" Style="{StaticResource ellipseLED}"/>
        <Ellipse Grid.Row="15" Grid.Column="9" Style="{StaticResource ellipseLED}"/>
        <Ellipse Grid.Row="15" Grid.Column="11" Style="{StaticResource ellipseLED}"/>
        <Ellipse Grid.Row="15" Grid.Column="13" Style="{StaticResource ellipseLED}"/>
        <Ellipse Grid.Row="15" Grid.Column="15" Style="{StaticResource ellipseLED}"/>
        <Ellipse Grid.Row="15" Grid.Column="17" Style="{StaticResource ellipseLED}"/>
        <Ellipse Grid.Row="15" Grid.Column="19" Style="{StaticResource ellipseLED}"/>
        <Ellipse Grid.Row="15" Grid.Column="21" Style="{StaticResource ellipseLED}"/>
        <Ellipse Grid.Row="15" Grid.Column="23" Style="{StaticResource ellipseLED}"/>
        
        <!--Linea 8-->
        <Ellipse Grid.Row="17" Grid.Column="2" Style="{StaticResource ellipseLED}"/>
        <Ellipse Grid.Row="17" Grid.Column="4" Style="{StaticResource ellipseLED}"/>
        <Ellipse Grid.Row="17" Grid.Column="6" Style="{StaticResource ellipseLED}"/>
        <Ellipse Grid.Row="17" Grid.Column="8" Style="{StaticResource ellipseLED}"/>
        <Ellipse Grid.Row="17" Grid.Column="10" Style="{StaticResource ellipseLED}"/>
        <Ellipse Grid.Row="17" Grid.Column="12" Style="{StaticResource ellipseLED}"/>
        <Ellipse Grid.Row="17" Grid.Column="14" Style="{StaticResource ellipseLED}"/>
        <Ellipse Grid.Row="17" Grid.Column="16" Style="{StaticResource ellipseLED}"/>
        <Ellipse Grid.Row="17" Grid.Column="18" Style="{StaticResource ellipseLED}"/>
        <Ellipse Grid.Row="17" Grid.Column="20" Style="{StaticResource ellipseLED}"/>
        <Ellipse Grid.Row="17" Grid.Column="22" Style="{StaticResource ellipseLED}"/>
        
        <!--Linea 9-->
        <Ellipse Grid.Row="19" Grid.Column="3" Style="{StaticResource ellipseLED}"/>
        <Ellipse Grid.Row="19" Grid.Column="5" Style="{StaticResource ellipseLED}"/>
        <Ellipse Grid.Row="19" Grid.Column="7" Style="{StaticResource ellipseLED}"/>
        <Ellipse Grid.Row="19" Grid.Column="9" Style="{StaticResource ellipseLED}"/>
        <Ellipse Grid.Row="19" Grid.Column="11" Style="{StaticResource ellipseLED}"/>
        <Ellipse Grid.Row="19" Grid.Column="13" Style="{StaticResource ellipseLED}"/>
        <Ellipse Grid.Row="19" Grid.Column="15" Style="{StaticResource ellipseLED}"/>
        <Ellipse Grid.Row="19" Grid.Column="17" Style="{StaticResource ellipseLED}"/>
        <Ellipse Grid.Row="19" Grid.Column="19" Style="{StaticResource ellipseLED}"/>
        <Ellipse Grid.Row="19" Grid.Column="21" Style="{StaticResource ellipseLED}"/>
        
        <!--Linea 10-->
        <Ellipse Grid.Row="21" Grid.Column="4" Style="{StaticResource ellipseLED}"/>
        <Ellipse Grid.Row="21" Grid.Column="6" Style="{StaticResource ellipseLED}"/>
        <Ellipse Grid.Row="21" Grid.Column="8" Style="{StaticResource ellipseLED}"/>
        <Ellipse Grid.Row="21" Grid.Column="10" Style="{StaticResource ellipseLED}"/>
        <Ellipse Grid.Row="21" Grid.Column="12" Style="{StaticResource ellipseLED}"/>
        <Ellipse Grid.Row="21" Grid.Column="14" Style="{StaticResource ellipseLED}"/>
        <Ellipse Grid.Row="21" Grid.Column="16" Style="{StaticResource ellipseLED}"/>
        <Ellipse Grid.Row="21" Grid.Column="18" Style="{StaticResource ellipseLED}"/>
        <Ellipse Grid.Row="21" Grid.Column="20" Style="{StaticResource ellipseLED}"/>
        
        <!--Linea 11-->
        <Ellipse Grid.Row="23" Grid.Column="5" Style="{StaticResource ellipseLED}"/>
        <Ellipse Grid.Row="23" Grid.Column="7" Style="{StaticResource ellipseLED}"/>
        <Ellipse Grid.Row="23" Grid.Column="9" Style="{StaticResource ellipseLED}"/>
        <Ellipse Grid.Row="23" Grid.Column="11" Style="{StaticResource ellipseLED}"/>
        <Ellipse Grid.Row="23" Grid.Column="13" Style="{StaticResource ellipseLED}"/>
        <Ellipse Grid.Row="23" Grid.Column="15" Style="{StaticResource ellipseLED}"/>
        <Ellipse Grid.Row="23" Grid.Column="17" Style="{StaticResource ellipseLED}"/>
        <Ellipse Grid.Row="23" Grid.Column="19" Style="{StaticResource ellipseLED}"/>
        
        <!--Linea 12-->
        <Ellipse Grid.Row="25" Grid.Column="8" Style="{StaticResource ellipseLED}"/>
        <Ellipse Grid.Row="25" Grid.Column="10" Style="{StaticResource ellipseLED}"/>
        <Ellipse Grid.Row="25" Grid.Column="12" Style="{StaticResource ellipseLED}"/>
        <Ellipse Grid.Row="25" Grid.Column="14" Style="{StaticResource ellipseLED}"/>
        <Ellipse Grid.Row="25" Grid.Column="16" Style="{StaticResource ellipseLED}"/>
        
        <!--Ellipse central. EXTERIOR-->
        <Ellipse Grid.Row="0" Grid.ColumnSpan="27" Grid.RowSpan="28" Style="{StaticResource centralEllipse}"/>
    </Grid>
</UserControl>
Anuncios

3 comentarios en “Semáforo I

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s