Interconexiones de Servicios

de Telecomunicacin.

Integrantes:

Rene Fernando Carrin Pineda.

Pedro Ivan Sanchez Portocarrero.
Jonathan Andrs Cabrera Toledo.
Juan Carlos Vzquez Tapia.

Profesor:

Ing. Hernn Samaniego.

Fecha:

Mircoles, 13 de Julio del 2016.

Tema:

Encendido de leds utilizando tecnologa LTE.

Loja - Ecuador

1. Objetivos.

Encender varios Leds remotamente usando una red 4G desde un telfono inteligente.

2. Esquema de interconexin de equipos.

Fig 1. Interconexin de Equipos.

3. Descripcin de Equipos.

ARDUINO MEGA 2560.

Fig. 1 Arduino Shield Mega. Imagen disponible en:

https://www.arduino.cc/en/Main/ArduinoBoardMega2560

El Mega 2560 es una placa electrnica basada en el Atmega2560. Cuenta con 54 pines digitales
de entrada / salida (de los cuales 15 se pueden utilizar como salidas PWM), 16 entradas
analgicas, 4 UARTs (puertos serie de hardware), un oscilador de 16MHz, una conexin USB,
un conector de alimentacin, una cabecera ICSP, y un botn de reinicio. Contiene todo lo
necesario para apoyar el microcontrolador; basta con conectarlo a un ordenador con un cable
USB o la corriente con un adaptador de CA a CC o una batera para empezar. [1]

Tabla 1. Especificaciones Tcnicas del Arduino Mega 2560. [1]

ARDUINO SHIELD ETHERNET

Fig. 2 Arduino Shield Ethernet. Imagen disponible en:

https://www.arduino.cc/en/Main/ArduinoEthernetShield
La Arduino Ethernet Shield permite a una placa Arduino conectarse a internet. Se basa en
la Wiznet W5100 chip de ethernet. El Wiznet W5100 ofrece una red (IP) apilar capaz de TCP y
UDP. Es compatible con hasta cuatro conexiones de socket simultneas. Usar la librera
Ethernet para escribir bocetos que se conectan a Internet a travs de la pantalla. El escudo de
Ethernet se conecta a una placa Arduino usando encabezados por arrollamiento de hilo largos
que se extienden a travs del escudo. Esto mantiene la disposicin de las clavijas intacta y
permite que otro escudo para ser apilados en la parte superior. [2]
El escudo de Ethernet tiene un estndar de conexin RJ-45, con un transformador de lnea
integrada y alimentacin a travs de Ethernet activado. [2]
Hay una ranura para tarjetas micro-SD a bordo, que se puede utilizar para almacenar archivos
para servir travs de la red. Es compatible con todas las placas Arduino / Genuino. El lector de
tarjetas micro SD de a bordo es accesible a travs de la Biblioteca SD. Cuando se trabaja con
esta biblioteca, SS es por el pin 4. La revisin original del escudo contena una de tamao
completo ranura para tarjetas SD; esto no es compatible. [2]

El escudo tambin incluye un controlador de reajuste, para asegurar que el mdulo Ethernet
W5100 se restablece correctamente en el encendido. Las revisiones anteriores del escudo no
eran compatibles con el Mega y la necesidad de restablecer manualmente despus del
encendido. [2]
[2] ARDUINO Genuino OUTSIDE USA. Arduino Ethernet Shield. Disponible en:
https://www.arduino.cc/en/Main/ArduinoEthernetShield

UBIQUITI NANOSTATION 5

Fig. 3 Equipos Nanostation 5. Imagen disponible en: http://www.maswifi.com/puntosde-acceso/nanostation-5-ubiquiti-14dbi-5ghz-routerapcliente-cpe

El Access Point Ubiquiti NanoStation 5 802.11a es perfecto para aplicaciones WLAN que
requieren una solucin robusta, de alta potencia. El UB-NS5cuenta con un alcance en
exteriores de ms de 15 kilmetros (dependiendo de la antena de estacin base), antena
integrada de 14 dBi. El UB-NS5 se puede montar en un poste, ventana o pared y dispone de un
conector integrado RP-SMA. [3]

Aplicaciones.
o Conexin inalmbrica 802.11a
o Incluye PoE.
o Interconecta sucursales y oficinas de empresas pblicas y privadas (Wireless
LAN).
o Telefona por IP (VOIP)
o Transmisin de audio y video en 5.8 GHz.
Ventajas
o WLAN
o WIFI
o Wireless Ethernet
o Hasta 350 mW de potencia.
o Antena integrada de 14 dBi.

Tabla 2. Especificaciones Tcnicas.

4. Funcionamiento.
Para el desarrollo programaremos un Arduino usando libreras HTML, las cuales nos
permitirn levantar un servidor web, este nos permitir controlar los LED y visualizar el
estado de los mismos (Encendido o Apagado). El cdigo cargado adems contendr la
librera para el shield Ethernet la cual permitir configurar la direccin IP del dispositivo y
el puerto a travs del cual el servidor va a recibir sus peticiones.
Despus de configurar la Arduino vamos a crear un DDNS (Sistema Dinmico de Nombres
de Dominio.) con el principal objetivo de poder ingresar a la pgina sin la necesidad de
tener que recordar la direccin IP pblica, de nuestro servidor, tomando en cuenta que esta
cambia siempre que el router se apaga o reinicia. De esta forma lo nico que debemos
recordar es el nombre de dominio que creemos.
Para la creacin del DDNS usaremos noip.com, ya que este es gratuito y fcil de usar.
Como ltimo paso se configurar el router, agregando el DDNS creado y la NAT (Network
Address Translation) para habilitar los puertos correspondientes (8080) e ingresar la
direccin del servidor local.

Fig 5. Implementacin y funcionamiento.

Cuando un cliente desde el mvil accede al servidor web, este enva una peticin http que recibe
el servidor web, luego este enva esta informacin a travs del protocolo http en formato HTML
como se muestra a continuacin.

Fig 6. Peticin HTTP.

5. Desarrollo.
Todas las configuraciones realizadas a cada uno de los equipos se detallan a continuacin.

Access Point (Base).

Accedemos al AP, para esto asignamos al puerto Ethernet de nuestro computador y agregamos
una direccin IP esttica y el Gateway 192.168.1.20 que es el que viene por defecto en todos los
equipos Ubiquiti.

Fig 7. Asignacin IP Esttica.

F
Abrimos el navegador e ingresamos en la direccin 192.168.1.20, nos pedir un usuario y
contrasea ubnt, una vez adentro vamos a la parte de wireless en el cual seleccionamos e
modo Punto de Acceso WDS, creamos la SSID INTERCONEXIONES, seleccionamos el
canal, aumentamos la potencia y por ultimo colocamos una contrasea a la red creada, una vez
hecho esto guardamos y aplicamos los cambios.

Fig 8. Configuraciones AP Base.

Por ultimo vamos a la pestaa de network, seleccionamos el modo de red como bridge, y
colocamos una IP de acceso distinta en ambos equipos para poder administraros, aplicamos y
guardamos los cambios.

Fig 9. Configuraciones AP Base.

Access Point (Estacin).

De igual manera que para el AP (Estacin), el computador asignamos una direccin IP Esttica e
ingresamos a equipo, vamos a la pestaa de wireless, seleccionamos el modo inalmbrico

como Estacin WDS, luego vamos a ESSID y seleccionamos la Red creada en el AP Base,
en la parte posterior ingresamos la contrasea guardamos y aplicamos los cambios.

Fig 10. Configuraciones AP estacin.

Por ultimo al igual que el AP Base, vamos a la pestaa de network, seleccionamos el modo de
red como bridge, y colocamos una IP de acceso distinta en ambos equipos para poder
administraros, aplicamos y guardamos los cambios.

Fig 11. Configuraciones AP estacin.

Configuracin Modem Huawei.

Primero ingresamos al modem que nos va a dar acceso a internet, ingresamos el usuario y el
password y nos dirigimos a la pestaa basic e ingresamos las siguientes configuraciones.

Fig 12. Configuraciones del DHCP en la LAN.

Luego en el men de Advanced nos dirigimos a NAT, luego a Port Mapping en donde
configuraremos el puerto por el cual ingresaremos a nuestro servidor, las configuraciones se
muestran en la siguiente figura.

Fig 13. Configuraciones del NAT.

Luego vamos a DDNS, para esto creamos una cuenta para DNS dinmico que se actualice
cada vez que la IP cambia y en donde solo tenemos que recordar el nombre que se cre. En este
caso en No-ip.org, dentro de opciones avanzadas, DDNS, se coloca el nombre de la cuenta de
no-ip como se muestra a continuacin:

Fig 13. Configuraciones del DDNS.

6. Referencias.
[1] ARDUINO Genuino OUTSIDE USA. Arduino
https://www.arduino.cc/en/Main/ArduinoBoardMega2560

Mega

2560.

Disponible

en:

[2] ARDUINO Genuino OUTSIDE USA. Arduino Ethernet Shield. Disponible en:
https://www.arduino.cc/en/Main/ArduinoEthernetShield

[3]
Hyperlink
Technologies.
Authorized
Distributor.
Comunicaciones.
Disponible
http://www.ds3comunicaciones.com/ubiquiti/UB-NS5.html

DS3
en:

7. Cdigo implementado en Arduino.

//Declaracion de Librerias SPI y ETHERNET
#include <Ethernet.h>
#include <SPI.h>
#include <EEPROM.h>
//asignacion de IP a modulo Arduino
byte ip[] = { 10, 7, 7, 1};
byte gateway[] = { 10, 7, 7, 2 };
byte subnet[] = { 255, 255, 255, 192 };
byte mac[] = { 0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED };
//Salida por el puerto ethernet
EthernetServer server = EthernetServer(8080); //HTML puerto 8080
int outputQuantity = 10; // numero de Salidas
boolean outputInverted = false; //Invertir la salida de los Leds en caso de que el Rele
este en negativo.
int refreshPage = 15; //Recargar paguina HTML
//Mostrar u olcultar los botones de la pagina
int switchOnAllPinsButton = false;
//Declaracion de pines
int outputAddress[10] = { 3,5,6,7,8,9,14,15,16,17};
//Descripcion para el texto de cada boton
String buttonText[10] = {
"LED 1","LED 2","LED 3","LED 4","LED 5","LED 6","LED 7","LED 8","LED 9","LED 10"};
// Establecer la salida para retener el ltimo estado.
int retainOutputStatus[10] = {1,0,0,0,1,1,1,1,1,1}; //
/*Declaracion de Variables*/
int outp = 0;
boolean printLastCommandOnce = false;
boolean printButtonMenuOnce = false;
boolean initialPrint = true;
String allOn = "";
String allOff = "";
boolean reading = false;
boolean outputStatus[10];
unsigned long timeConnectedAt;
boolean writeToEeprom = false;
//Inicio del Programa
void setup(){
Serial.begin(9600);
initEepromValues();
readEepromValues();

boolean currentState = false;

for (int var = 0; var < outputQuantity; var++){
pinMode(outputAddress[var], OUTPUT);
//Invertir todas las Salidas en el inicio
if(outputInverted == true) {
//digitalWrite(outputAddress[var], HIGH);
if(outputStatus[var] == 0){currentState = true;}else{currentState = false;}
//Comprovando el estado de la salida.
digitalWrite(outputAddress[var], currentState);
}
else{
//digitalWrite(outputAddress[var], LOW);
if(outputStatus[var] == 0){currentState = false;}else{currentState = true;}
digitalWrite(outputAddress[var], currentState);
}
}
//Configuracion de la IP de Accesso. estara impresa en el puerto Serial.
Ethernet.begin(mac, ip, gateway, subnet); //La direccion esta creada
server.begin();
Serial.print("Se inicio el Servidor en: ");
Serial.println(Ethernet.localIP());
}
//Inicio del Lazo
void loop(){
//Escuchar a los clientes entrantes y solicitudes de proceso.
checkForClient();
}
//Funcion checkForClient
void checkForClient(){
EthernetClient client = server.available();
if (client) {
//Una Peticion Http permina con una linea en blaco
boolean currentLineIsBlank = true;
boolean sentHeader = false;
while (client.connected()) {
if (client.available()) {
// Si no se ha establecido cabecera enviarlo
// Leer la entrada del usuario
char c = client.read();
if(c == '*'){
printHtmlHeader(client); //Llama a HTML CSS
printLoginTitle(client);
printHtmlFooter(client);
//sentHeader = true;
break;
}
if(!sentHeader){
printHtmlHeader(client);
printHtmlButtonTitle(client);

sentHeader = true;
}
//Lectura de Usuario de Entrada.
//char c = client.read();
//Si esta en blanco la lectura.
if(reading && c == ' '){
reading = false;
}
//si hay un ? y no haba entrada de usuario
if(c == '?') {
reading = true; //Encontrado el ?, Comenzar la lectura de la informacin
}
// Si hay Interruptor en la Entrada de Usuario.
if(reading){
//Si la entrada del usuario es de salida ajustada a 1
if(c == 'H') {
outp = 1;
}
//si el Usuario de entrada es L y la salida 0
if(c == 'L') {
outp = 0;
}
Serial.print(c); //Escribir el valor en el puerto serial
//Serial.print(outp);
//Serial.print('\n');
switch (c) {
case '0':
//Aade el codigo para disparar en cada caso
triggerPin(outputAddress[0], client, outp);
break;
case '1':
triggerPin(outputAddress[1], client,
break;
case '2':
//add code here to trigger on 2
triggerPin(outputAddress[2], client,
break;
case '3':
//add code here to trigger on 3
triggerPin(outputAddress[3], client,
break;
case '4':
//add code here to trigger on 4
triggerPin(outputAddress[4], client,
break;
case '5':
//add code here to trigger on 5
triggerPin(outputAddress[5], client,
//printHtml(client);
break;
case '6':
//add code here to trigger on 6
triggerPin(outputAddress[6], client,
break;
case '7':
//add code here to trigger on 7
triggerPin(outputAddress[7], client,
break;
case '8':
//add code here to trigger on 8
triggerPin(outputAddress[8], client,
break;
case '9':
//add code here to trigger on 9
triggerPin(outputAddress[9], client,
break;
}
//Fin del CASE

outp);

outp);

outp);

outp);

outp);

outp);

outp);

outp);

outp);

}
//Si el usario de entrada estuvo en blaco
if (c == '\n' && currentLineIsBlank){
printLastCommandOnce = true;
printButtonMenuOnce = true;
triggerPin(777, client, outp); //Habilita la entrada e impresin. 777 se
utiliza no para actualizar las salidas.
break;
}
}
}
printHtmlFooter(client); //Imprime Pagina HTML
}
else
{
//Si no hay ningun cliente en mas de un minuto
if (millis() > (timeConnectedAt + 60000)){
if (writeToEeprom == true){
writeEepromValues(); //write to EEprom the current output statuses
Serial.println("No hay clientes durante ms de un minuto - Escribiendo
estados en la EEPROM");
writeToEeprom = false;
}
}
}
}

//Funcion triggerPin
void triggerPin(int pin, EthernetClient client, int outp){
//Lee las salidas e Imprime los Botones
//ajecutando salidas
if (pin != 777){
if(outp == 1) {
if (outputInverted ==false){
digitalWrite(pin, HIGH);
}
else{
digitalWrite(pin, LOW);
}
}
if(outp == 0){
if (outputInverted ==false){
digitalWrite(pin, LOW);
}
else{
digitalWrite(pin, HIGH);
}
}
}
//Refrecando entradas y salidas
readOutputStatuses();
//Mostrando los botones
if (printButtonMenuOnce == true){
printHtmlButtons(client);
printButtonMenuOnce = false;
}
}

//Funcion printHtmlButtons
//Imprimir los botones HTML para encender / apagar los LEDS
void printHtmlButtons(EthernetClient client){
//Inicializacion y creacion de tabla HTML
client.println("");
//client.println("<p>");
client.println("<FORM>");
client.println("<table border=\"0\" align=\"center\">");
/*
//Escribiendo Temperatura
client.print("<tr>\n");
client.print("<td><h4>");
client.print("Temperatura");
client.print("</h4></td>\n");
client.print("<td></td>");
client.print("<td>");
client.print("<h3>");
client.print(tempOutDeg);
//
client.print(tempOutValue);
client.print(" C</h3></td>\n");
*/
client.print("<td></td>");
client.print("</tr>");
//Imprimiendo los Botones
for (int var = 0; var < outputQuantity; var++)

//Conjunto de comandos para todos de encendido/apagado

allOn += "H";
allOn += outputAddress[var];
allOff += "L";
allOff += outputAddress[var];
//Imprimir comienzo de la fila
client.print("<tr>\n");
//Prints the button Text
client.print("<td><h4>");
client.print(buttonText[var]);
client.print("</h4></td>\n");
//Imprimir Botones "Encender"
client.print("<td>");
//client.print(buttonText[var]);
client.print("<INPUT TYPE=\"button\" VALUE=\"Encender ");
//client.print(buttonText[var]);
client.print("\" onClick=\"parent.location='/?H");
client.print(var);
client.print("'\"></td>\n");
//imprimir Botones "Apagar"
client.print(" <td><INPUT TYPE=\"button\" VALUE=\"Apagar");
//client.print(var);
client.print("\" onClick=\"parent.location='/?L");
client.print(var);
client.print("'\"></td>\n");
//Imprimir primera parte de los crculos o los LED
//Invertir la pantalla LED si se invierte la salida.
if (outputStatus[var] == true ){//Si la salidaes un "Encender"
if (outputInverted == false){//si la salida no esta invertida
client.print(" <td><div class='green-circle'><div
class='glare'></div></div></td>\n");//Imprimir HTML para LED "Encender"
}
else{
client.print(" <td><div class='black-circle'><div
class='glare'></div></div></td>\n"); //Imprimir HTML para LED "Apagar"
}

}
else
//S
i la salida es "Apagar"
{
if (outputInverted == false){
client.print(" <td><div class='black-circle'><div
class='glare'></div></div></td>\n"); //Imprimir HTML para "Apagar" LED
}
else{
client.print(" <td><div class='green-circle'><div
class='glare'></div></div></td>\n"); //Imprimir HTML para "Encender" LED
}
}

//Fin de impresin de la fila

client.print("</tr>\n");
}
//Mostrar u ocultar la impresin de todo el botn de Encender
if (switchOnAllPinsButton == true ){
//Imprime el botn "Encender" todos los pines
client.print("<tr>\n<td><INPUT TYPE=\"button\" VALUE=\"Encender Todos los Pines");
client.print("\" onClick=\"parent.location='/?");
client.print(allOn);
client.print("'\"></td>\n");
//Prints the OFF All Pins Button
client.print("<td><INPUT TYPE=\"button\" VALUE=\"Apagar Todos los Pines");
client.print("\" onClick=\"parent.location='/?");
client.print(allOff);
client.print("'\"></td>\n<td></td>\n<td></td>\n</tr>\n");
}
//Crear tabla y formialario
client.println("</table>");
client.println("</FORM>");
//client.println("</p>");
}
// Funcion "readOutputStatuses"
//Lectura de Estado de entradass
void readOutputStatuses(){
for (int var = 0; var < outputQuantity; var++) {
outputStatus[var] = digitalRead(outputAddress[var]);
//Serial.print(outputStatus[var]);
}
}
//Funcion "readEepromValues"
// Leer los valores EEPROM y guardar en OutputStatus
void readEepromValues(){
for (int adr = 0; adr < outputQuantity; adr++) {
outputStatus[adr] = EEPROM.read(adr);
}
}
//Funcion "writeEepromValues"
//Escribe valores en la EEPROM
void writeEepromValues(){
for (int adr = 0; adr < outputQuantity; adr++)
EEPROM.write(adr, outputStatus[adr]);
}
}

//Inicializa los valores de la EEPROM

//si los valores de la EEPROM no son el formato correcto es decir, no igual a 0 o 1.
Inicializar poniendo 0
void initEepromValues(){
for (int adr = 0; adr < outputQuantity; adr++){
if (EEPROM.read(adr) > 1){
EEPROM.write(adr, 0);
}
}
}

//Funcion htmlHeader
//Escribiendo html header
void printHtmlHeader(EthernetClient client){
Serial.print("Sirviendo cabeceras HTML en ms ");
timeConnectedAt = millis(); //Tiempo de Recarga de la Paguina
Serial.print(timeConnectedAt);
writeToEeprom = true; //Estableciendo accion de escritura de la EEPROM
//Enviar encabezado de Respuesta HTTP estandar
client.println("HTTP/1.1 200 OK");
client.println("Content-Type: text/html");
client.println("Conexion: Cerrada");
client.println();
client.println("<!DOCTYPE HTML>");
client.println("<head>");
// add page title
client.println("<title>Encendido Remoto de LEDs</title>");
client.println("<meta name=\"description\" content=\"Encendido Remoto de
LEDs\"/>");
//Aade Etiqueta de Actualizacion cada X segundos.
client.print("<meta http-equiv=\"refresh\" content=\"");
client.print(refreshPage);
client.println("; url=/\">");
// add other browser configuration
client.println("<meta name=\"apple-mobile-web-app-capable\"
content=\"yes\">");
client.println("<meta name=\"apple-mobile-web-app-status-bar-style\"
content=\"default\">");
client.println("<meta name=\"viewport\" content=\"width=device-width, userscalable=no\">");
//La insercin de los datos de estilos , por lo general se encuentran en los
archivos CSS
client.println("<style type=\"text/css\">");
client.println("");
//Visualizacion de la Pagina
client.println("html { height:100%; }");
client.println(" body {");
client.println("
height: 100%;");
client.println("
margin: 0;");
client.println("
font-family: helvetica, sans-serif;");
client.println("
-webkit-text-size-adjust: none;");
client.println("
}");
client.println("");
client.println("body {");
client.println("
-webkit-background-size: 100% 21px;");
client.println("
background-color: #c5ccd3;");
client.println("
background-image:");
client.println("
-webkit-gradient(linear, left top, right top,");
client.println("
color-stop(.75, transparent),");
client.println("
color-stop(.75, rgba(255,255,255,.1)) );");
client.println("
-webkit-background-size: 7px;");
client.println("
}");
client.println("");

client.println(".view {");
client.println("
min-height: 100%;");
client.println("
overflow: auto;");
client.println("
}");
client.println("");
client.println(".header-wrapper {");
client.println("
height: 44px;");
client.println("
font-weight: bold;");
client.println("
text-shadow: rgba(0,0,0,0.7) 0 -1px 0;");
client.println("
border-top: solid 1px rgba(255,255,255,0.6);");
client.println("
border-bottom: solid 1px rgba(0,0,0,0.6);");
client.println("
color: #fff;");
client.println("
background-color: #8195af;");
client.println("
background-image:");
client.println("
-webkit-gradient(linear, left top, left bottom,");
client.println("
from(rgba(255,255,255,.4)),");
client.println("
to(rgba(255,255,255,.05)) ),");
client.println("
-webkit-gradient(linear, left top, left bottom,");
client.println("
from(transparent),");
client.println("
to(rgba(0,0,64,.1)) );");
client.println("
background-repeat: no-repeat;");
client.println("
background-position: top left, bottom left;");
client.println("
-webkit-background-size: 100% 21px, 100% 22px;");
client.println("
-webkit-box-sizing: border-box;");
client.println("
}");
client.println("");
client.println(".header-wrapper h1 {");
client.println("
text-align: center;");
client.println("
font-size: 20px;");
client.println("
line-height: 44px;");
client.println("
margin: 0;");
client.println("
}");
client.println("");
client.println(".group-wrapper {");
client.println("
margin: 9px;");
client.println("
}");
client.println("");
client.println(".group-wrapper h2 {");
client.println("
color: #4c566c;");
client.println("
font-size: 17px;");
client.println("
line-height: 0.8;");
client.println("
font-weight: bold;");
client.println("
text-shadow: #fff 0 1px 0;");
client.println("
margin: 20px 10px 12px;");
client.println("
}");
client.println("");
client.println(".group-wrapper h3 {");
client.println("
color: #4c566c;");
client.println("
font-size: 12px;");
client.println("
line-height: 1;");
client.println("
font-weight: bold;");
client.println("
text-shadow: #fff 0 1px 0;");
client.println("
margin: 20px 10px 12px;");
client.println("
}");
client.println("");
client.println(".group-wrapper h4 {");
client.println("
color: #212121;");
client.println("
font-size: 14px;");
client.println("
line-height: 1;");
client.println("
font-weight: bold;");
client.println("
text-shadow: #aaa 1px 1px 3px;");
client.println("
margin: 5px 5px 5px;");
client.println("
}");
client.println("");
client.println(".group-wrapper table {");
client.println("
background-color: #fff;");
client.println("
-webkit-border-radius: 10px;");
client.println("
client.println("
client.println("

-moz-border-radius: 10px;");
-khtml-border-radius: 10px;");
border-radius: 10px;");

client.println("
client.println("
client.println("

font-size: 17px;");
line-height: 20px;");
margin: 9px 0 20px;");

client.println("
client.println("
client.println("
client.println("

border: solid 1px #a9abae;");

padding: 11px 3px 12px 3px;");
margin-left:auto;");
margin-right:auto;");

client.println("
client.println("

-moz-transform :scale(1);");
-moz-transform-origin: 0 0;");

client.println("
}");
client.println("");
//Para visualizacion del led Verde del LED "Encender"
client.println(".green-circle {");
client.println("
display: block;");
client.println("
height: 23px;");
client.println("
width: 23px;");
client.println("
background-color: #0f0;");
//client.println("
background-color: rgba(60, 132, 198, 0.8);");
client.println("
-moz-border-radius: 11px;");
client.println("
-webkit-border-radius: 11px;");
client.println("
-khtml-border-radius: 11px;");
client.println("
border-radius: 11px;");
client.println("
margin-left: 1px;");
client.println("
background-image: -webkit-gradient(linear, 0% 0%, 0% 90%,
from(rgba(46, 184, 0, 0.8)), to(rgba(148, 255, 112, .9)));@");
client.println("
border: 2px solid #ccc;");
client.println("
-webkit-box-shadow: rgba(11, 140, 27, 0.5) 0px 10px
16px;");
client.println("
-moz-box-shadow: rgba(11, 140, 27, 0.5) 0px 10px 16px; /*
FF 3.5+ */");
client.println("
box-shadow: rgba(11, 140, 27, 0.5) 0px 10px 16px; /* FF
3.5+ */");
client.println("
}");
client.println("");
//Para visualizacion del led negra del LED "Apagar"
client.println(".black-circle {");
client.println("
display: block;");
client.println("
height: 23px;");
client.println("
width: 23px;");
client.println("
background-color: #040;");
client.println("
-moz-border-radius: 11px;");
client.println("
-webkit-border-radius: 11px;");
client.println("
-khtml-border-radius: 11px;");
client.println("
border-radius: 11px;");
client.println("
margin-left: 1px;");
client.println("
-webkit-box-shadow: rgba(11, 140, 27, 0.5) 0px 10px
16px;");
client.println("
-moz-box-shadow: rgba(11, 140, 27, 0.5) 0px 10px 16px; /*
FF 3.5+ */");
client.println("
box-shadow: rgba(11, 140, 27, 0.5) 0px 10px 16px; /* FF
3.5+ */");
client.println("
}");
client.println("");
client.println("
.glare {");
client.println("
position: relative;");
client.println("
top: 1;");
client.println("
left: 5px;");
client.println("
-webkit-border-radius: 10px;");
client.println("
-moz-border-radius: 10px;");
client.println("
-khtml-border-radius: 10px;");
client.println("
border-radius: 10px;");
client.println("
height: 1px;");
client.println("
width: 13px;");
client.println("
padding: 5px 0;");
client.println("
background-color: rgba(200, 200, 200, 0.25);");
client.println("
background-image: -webkit-gradient(linear, 0% 0%, 0%
95%, from(rgba(255, 255, 255, 0.7)), to(rgba(255, 255, 255, 0)));");
client.println("
}");
client.println("");

//Final de los datos Estilo y Cabecera

client.println("</style>");
client.println("</head>");
//Impresion de la paguina en si
client.println("<body>");
client.println("<div class=\"view\">");
client.println("
<div class=\"header-wrapper\">");
client.println("
<h1>Encendido Remoto de LEDs</h1>");
client.println("
</div>");
}
//Fin de htpmlHeader
//Funcion HtmlFooter
void printHtmlFooter(EthernetClient client){
//Set Variables Before Exiting
printLastCommandOnce = false;
printButtonMenuOnce = false;
allOn = "";
allOff = "";
//Imprimir ltima parte del html
client.println("\n<h3 align=\"center\"> Edit - Grupo 2 <br> Interconexiones
2016");
client.println("</h3></div>\n</div>\n</body>\n</html>");
delay(1);
client.stop(); //Cierra la conexion
Serial.println(" Cerrando conexion");
delay (2); //Tiempo para memoria intermedia del cliente para limpiar,se repite
varias pginas .
}
//Funcion printHtmlButtonTitle
//Impresion de titulo
void printHtmlButtonTitle(EthernetClient client){
client.println("<div class=\"group-wrapper\">");
//client.println("
<h2>Conmutar la salida requerida.</h2>");
client.println();
}
//Funcion printLoginTitle
//Impresion de Titulo
void printLoginTitle(EthernetClient client){
//
client.println("<div class=\"group-wrapper\">");
client.println("
<h2>Por favor, introduzca los datos de usuario para
iniciar sesin.</h2>");
client.println();
}