lunes, 5 de mayo de 2014

Menu horizontal solo con CSS

Una de las cosas que mas a menudo agrego a un sitio son los menús, estos son simples fáciles de implementar y ayudan a conservar mucho espacio en las paginas.

Este tutorial asume que ya se tiene conocimientos de CSS por lo cual no dará grandes explicaciones del código.

Bueno, básicamente nuestro menú se debe de ver de la siguiente manera cuando este finalizado.



De tal modo que cuando el ratón pase por el menú principal este despliegue un sub-menú, todo usando solamente CSS.

En la siguiente imagen se puede ver como es la estructura del menú cuando no se le ha aplicado el CSS que es lo que le da formato.


Junto con el HTML:

<!DOCTYPE html>
<html>
    <head>
        <title>Simple menu</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="CSS/menu.css" rel="stylesheet" type="text/javascript">
    </head>
    <body>
        <div>
            <ul class="menu">
                <li><a href="#">Menu 1</a></li>
                <li><a href="#">Menu 2</a></li>
                <li><a href="#">Menu 3</a>
                    <ul>
                        <li><a href="#">Sub Menu 1</a></li>
                        <li><a href="#">Sub Menu 2</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </body>
</html>


Como se puede observar es muy sencillo y fácil, no tiene mayor complicación.

Ahora el CSS:

html, body{
    margin: 0;
    padding: 0;
}
div{
    padding: 50px;
}
ul{
    list-style: none;
    margin: 0;
    padding: 0;
}
a{
    color: #FFF;
}
ul.menu{
    position: relative;
}
ul.menu > li{
    float: left;
    position: relative;
    padding: 5px;
    background: #09F;
}
ul.menu > li:hover{
    background: #396eb6;
}
ul.menu > li:hover > ul{
    display: block;
}
ul.menu > li > ul{
    position: absolute;
    display: none;
}
ul.menu > li > ul > li{
    white-space: nowrap;
    padding: 5px;
    background: #0000ff;
}
ul.menu > li > ul > li:hover{
    background: #396eb6;
}


Para este código se esta usando ul.menu como la clase que le dará formato a todo el menú, es de fácil implementación y puede ser adaptado de forma muy fácil pueden agregarle border, colores especificos y mas.

Bueno pues copy paste y adaptenlo a sus necesidades.

lunes, 17 de febrero de 2014

Reloj usando PMW e Interrupts en Arduino

Reloj con Arduino

Creo que uno de los proyectos más comunes con Arduino es crear un reloj el cual sea muy exacto.

Pero siempre necesitas piezas externas para poder lograr este propósito ya que de lo contrario el reloj no será lo suficientemente exacto y perdería varios segundos de forma diaria o posiblemente mas lo cual no es de beneficio para nuestro proyecto.

Hay varios componentes externos que nos permiten tener un RTC (Real time clock) como por ejemplo el Adafruit DS1307, este componente es un reloj externo con batería de respaldo lo cual le permite mantener la hora en todo momento, el problema es si no tenemos uno disponible o queremos ahorrarnos el dinero del componente (exactamente $9.00 USD es el precio de este pequeño componente).

Esta entrada intentara dar una solución, a este problema aun cuando nos queda el problema del respaldo por batería ya que siempre que se reprograme o bien cuando la tarjeta Arduino pierda energía la configuración del reloj se reiniciara y por lo tanto el reloj se reiniciara en ceros, pero esto es tema de otra entrada.

Lista de materiales

Los componentes que se necesitan son los siguientes:
  1. Tarjeta Arduino - En mi caso casi siempre uso el modelo MEGA2560
  2. 3 botones pushup
  3. Pantalla LCD HD44780 o similar.
  4. Placa de pruebas - Breadboard.
  5. Cables de conexión

Armado

Ahora bien, que si no queremos gastar esos $9.00 USD y nos gustan los soluciones alternativas siempre se puede comprar un DS1307 por $3.00 USD en las paginas "wholesale" de China, y con esto tenemos la solución a la perdida de energía en nuestra placa.

Ahora que si nos gusta indagar y aprender como funcionan las cosas, la solución propuesta es el camino a tomar, ya que usaremos uno de los elementos que ya existen en la propia placa de Arduino como son los Interrupts, en este momento les recomiendo una lectura ligera de lo que son los interrupts y para que sirven.

Específicamente en la Mega2560 tenemos los siguiente: External Interrupts: 2 (interrupt 0), 3 (interrupt 1), 18 (interrupt 5), 19 (interrupt 4), 20 (interrupt 3), and 21 (interrupt 2), esto quiere decir que tenemos 6 pines los cuales nos van a servir para este proposito, en el formato, pin (interrupt #).

Para fines de este pequeño proyecto usaremos el interrupt 4, que es el pin 19. Aqui el comando:

attachInterrupt(4, increment, RISING);

Con esto le estamos indicando que active la interrupción en el pin especificado.

analogWrite(8, 127);

Esta linea estamos usando el PWM en el pin 8 para usarlo como señal es en este momento donde tenemos que conectar directamente el pin 8 con el 19, en nuestra Mega2560.

Le indicamos al PWM que envíe una señal al interrupt 4, el ciclo de trabajo es de 255 por lo que solo estamos trabajando con medio ciclo 127, esto quiere decir que 489 serán contabilizados con un segundo completo. Lectura recomendada.

Cuando declaramos attachInterrupt asignamos una referencia a la función "increment" para que esta fuera realizada cada vez que se activa la interrupción, en nuestro código tenemos la función:

void increment() {
  x++;
  if(x == 489)  { // Contamos 489 que son 1 segundo
    x = 0;
    digitalWrite(ledPin, HIGH);
    seconds++;
    calcTime();

    lcd.clear();
    lcd.print(getsize(hours)+ ":" + getsize(minutes) + ":" + getsize(seconds));
  }
}


Y nuestra función calcTime():

void calcTime() //Simples cálculos de tiempo
{
  if(seconds == 60) {
    seconds = 0;
    minutes++;
  }

  if(minutes == 60) {
    minutes = 0;
    hours++;
  }

  if(hours == 24) {
    hours = 0;
  }
}


Así es como podemos crear un reloj sencillo pero muy preciso usando solamente la tarjeta Arduino sin necesidad de tener componente externo alguno, claro que tiene sus desventajas, pero siempre es entretenido conocer el funcionamiento de las cosas.

Les dejo la liga a github con el código completo para este ejemplo.

Preguntas, dudas, mejoras? Dejen su comentario.