11/8/2016 SebaElectronicLabs:[Arduino06]EncenderApagarunledconEthernetShieldArduinoycreacindeunservidorwebconhtml

AqupodrsencontrartutorialesdeArduinoyElectrnicaengeneral.

Home TutorialesArduino LenguajeArduino CmocomprarenChina Python PHP MySQL

KiCad Libros Sigueme Contacto

jueves,23dejuliode2015
Tiendarecomendada(Chile)
[Arduino06]EncenderApagarunledconEthernet
ShieldArduinoycreacindeunservidorwebconhtml
En este tutorial mostrare como encender/apagar un led desde un servidor web, para ello
configuraremos la shield ethernet y aprenderemos a crear un servidor web con conocimientos
bsicosenhtml.

Vdeo
Enelsiguientevdeosepuedeapreciarelservidorwebytambincomoalpresionarenlosbotones
delapaginaseenciendeyapagaelLEDconectadoalarduino. Facebook

Twitter

Mejordeestemes
http://sebalabs.blogspot.com.es/2015/07/10encenderapagarunledconethernet.html 1/15
11/8/2016 SebaElectronicLabs:[Arduino06]EncenderApagarunledconEthernetShieldArduinoycreacindeunservidorwebconhtml

[Arduino 06] Encender Ap... [Arduino08]Medir

distanciaconsensor
ultrasnicoHRSR04

[Arduino06]Encender
Apagarunledcon
EthernetShieldArduinoy
creacindeunservidor
webconhtml

[Arduino12]Velocmetro
debicicleta(1/3)

Fotosdelproyecto
[Arduino09]Conectar
Aqu se presentan unas fotos donde se puede ver el Arduino, sobre el se encuentran la shield pantallaLCD2x16
Ethernet y la ProtoShield. Cuando se tomaron las fotos ya funcionaba el proyecto y se apreciar (1602A)[Ejemplos]
tambinqueestaencendidoyotromomentoestaapagadoelLED.

[Arduino10]Sensor
ultrasnicoHRSR04con
pantallaLCD2x16

[Arduino14]Arduino
SensordeOxgeno
(GroveGasSensorO2)

Enlasiguienteimagensemuestraelcircuitosinprotoshield [Arduino11]Sensor
magntico(EfectoHall)

[Arduino12]Velocmetrodebicicleta
(3/3)
http://sebalabs.blogspot.com.es/2015/07/10encenderapagarunledconethernet.html 2/15
11/8/2016 SebaElectronicLabs:[Arduino06]EncenderApagarunledconEthernetShieldArduinoycreacindeunservidorwebconhtml

[Arduino13]Controlar
LEDStrip(tiraLED)con
potencimetro

[Arduino04]Crucede
Objetivos semaforos

1.LograrnuestraprimeraconexinconlaShieldEthernet
2.AprenderaconfigurarlaEthernetShield
3.SubirunservidorwebconEthernetShield
4.Crearunservidorwebconquackit
5.Lograrconocimientosbsicosenhtml Entradadestacada

Materiales: [Arduino09]Conectarpantalla
LCD2x16(1602A)[Ejemplos]
ArduinoUNO/MegaysucableUSB
Enestetutorialsemuestracomo
EthernetShield conectarlapantallaLCD2x16auna
RouterSwitchconsurespectivocableconconectorRJ45 placaarduinoUNO(ArduinoPcaro).
EstaPantallaLCDesfcildeprog...
Resistenciade220ohm

LED

Cablesconectores

Protoboard

CargadorUSB5v/100mA(opcional)

1.Conexindehardwares
1.MontarethernetshieldsobreArduino.
2.ConectarpormediodelcableconconectoresRJ45elRouterylaethernetshield. Acercadem
3.ConectararduinopormediodesuUSBalacomputadora.

http://sebalabs.blogspot.com.es/2015/07/10encenderapagarunledconethernet.html 3/15
11/8/2016 SebaElectronicLabs:[Arduino06]EncenderApagarunledconEthernetShieldArduinoycreacindeunservidorwebconhtml

SebastianLatorre
Valdivia,Regiondelos
Rios,Chile
EstudiantedeIngeniera
CivilElectrnicadela
UACh,miembrodelIEEE.Mis
interesessonlalectura,msica,
deportesylatecnologa.Enmisratos
libresveoanimes,series,tambinme
gustaleeryentrenarenelgym.
Vermiperfilcompleto

Avisolegal

Conestoestalistalaconexinentrearduino,EthenretShieldysuRouteroSwitch.Ahorasepuede
comenzaraprogramar
SebaElectronicLABsbySebastian
LatorreislicensedunderaCreative
2.Armadodelcircuito CommonsReconocimiento
NoComercialCompartirIgual4.0
Elcircuitoesmuysimplebastaconconectardesdeelpin8unaresistenciade220ohmyenserie InternacionalLicense.
unled,paraterminarelcircuitoconectandoatierra(GND).

Trabajando...

http://sebalabs.blogspot.com.es/2015/07/10encenderapagarunledconethernet.html 4/15
11/8/2016 SebaElectronicLabs:[Arduino06]EncenderApagarunledconEthernetShieldArduinoycreacindeunservidorwebconhtml

3.BuscarunaIPparaelservidorweb

Una vez conectado todo como se mencion anteriormente se puede comenzar a programar, pero
antes de esto necesitamos tener una IP para el servidor web que subiremos con la shield
ethernet,paraelloiremosainicioyescribiremos"cdm"(sincomillas,todoloquesemencionesera
sincomillas),luegodeesoenconsolaseescribe"ipconfig",aqutienenquebuscarsuIPv4parael
"adaptadordeLANinalmbrico"enelcasoqueestnconectadosasurouterporwifi,enmicasose
puedeverqueelIPv4paraeladaptadorLANinalmbricoes192.168.1.6.

3.1.PasosaseguirparaobtenerlaIPnuestracomputadoraylaIPparaelservidorweb
Primerovamosainicioyescribimos"cmd"enelbuscadorqueapareceeninicio

http://sebalabs.blogspot.com.es/2015/07/10encenderapagarunledconethernet.html 5/15
11/8/2016 SebaElectronicLabs:[Arduino06]EncenderApagarunledconEthernetShieldArduinoycreacindeunservidorwebconhtml

Enconsolaescribimos"ipconfig"

SiestamosconectadosporWifibuscamoselIPv4deladaptadordeLANinalmbrica

http://sebalabs.blogspot.com.es/2015/07/10encenderapagarunledconethernet.html 6/15
11/8/2016 SebaElectronicLabs:[Arduino06]EncenderApagarunledconEthernetShieldArduinoycreacindeunservidorwebconhtml

UnavezquetenemosnuestraIPv4queenmicasoes192.168.1.6tenemosquebuscarunIPpara
el web server que subiremos con la ethernet shield, esto lo haremos buscando una ip que este
desocupada, para ello iremos nuevamente a inicio, escribiremos "cmd" y en consola escribiremos
ping y escribiremos la IPv4, pero cambiaremos el ultimo numero (en mi caso es 6) por un numero
entre1y254

Sinosentregaunmensajecomoelqueseveenlaimagendeabajo(nosdicequeelhostdedestino
esinaccesibledebidoaquenadieestausandolaIPqueestoyprobando)

http://sebalabs.blogspot.com.es/2015/07/10encenderapagarunledconethernet.html 7/15
11/8/2016 SebaElectronicLabs:[Arduino06]EncenderApagarunledconEthernetShieldArduinoycreacindeunservidorwebconhtml

AhoraquetenemosunaIPqueestadesocupada(192.168.1.7quesolosirveparamicaso,ustedes
tendrnquebuscarlasuya)podemoscomenzaraprogramarycrearelservidorweb.

4.ProgramacinArduinoEthernetShield

Elcdigoqueutiliceparaesteproyectoeselsiguiente:

#include<SPI.h>//AquiincluimoslalibreriaSPI
#include<Ethernet.h>//AquiincluimoslalibreriaEthernet
bytemac[]={0xDE,0xAD,0xBE,0xEF,0xFE,0xED};//DeclaraciondeladireccionMAC
IPAddressip(192,168,1,7);//DeclaraciondelaIP
EthernetServerservidor(80);//Declaraciondelpuerto80

intPIN_LED=8;//AquiestablecemoslavariablePIN_LEDcomounvalorentero
StringreadString=String(30);//leeloscaracteresdeunasecuenciaenunacadena.
//Losstringsserepresentancomoarraysdecaracteres(tipochar)
Stringstate=String(3);

voidsetup(){
Ethernet.begin(mac,ip);//Inicializamosconlasdireccionesasignadas
servidor.begin();//iniciaelservidor
pinMode(PIN_LED,OUTPUT);
digitalWrite(PIN_LED,LOW);
state="OFF";
}

http://sebalabs.blogspot.com.es/2015/07/10encenderapagarunledconethernet.html 8/15
11/8/2016 SebaElectronicLabs:[Arduino06]EncenderApagarunledconEthernetShieldArduinoycreacindeunservidorwebconhtml

voidloop(){
//EthernetClientCreaunclientequesepuedeconectara
//unadireccinespecficadeInternetIP
EthernetClientcliente=servidor.available();
if(cliente){
booleanlineaenblanco=true;
while(cliente.connected()){
if(cliente.available()){
charc=cliente.read();
if(readString.length()<30){
readString.concat(c);
//Clienteconectado
//LeemospeticinHTTPcaracteracaracter
//AlmacenarloscaracteresenlavariablereadString
}
if(c=='\n'&&lineaenblanco)//SilapeticinHTTPhafinalizado
{
intLED=readString.indexOf("LED=");
if(readString.substring(LED,LED+5)=="LED=T"){
digitalWrite(PIN_LED,HIGH);
state="ON";}
elseif(readString.substring(LED,LED+5)=="LED=F"){
digitalWrite(PIN_LED,LOW);
state="OFF";
}

//CabeceraHTTPestndar
cliente.println("HTTP/1.1200OK");
cliente.println("ContentType:text/html");
cliente.println();//PginaWebenHTML
cliente.println("<html>");
cliente.println("<head>");
cliente.println("<title>LEDON/OFF</title>");
cliente.println("</head>");
cliente.println("<bodywidth=100%height=100%>");
cliente.println("<center>");
cliente.println("<h1>LEDON/OFF</h1>");
cliente.print("<br><br>");
cliente.print("EstadodelLED:");
http://sebalabs.blogspot.com.es/2015/07/10encenderapagarunledconethernet.html 9/15
11/8/2016 SebaElectronicLabs:[Arduino06]EncenderApagarunledconEthernetShieldArduinoycreacindeunservidorwebconhtml

cliente.print(state);
cliente.print("<br><br><br><br>");
cliente.println("<inputtype=submitvalue=ONstyle=width:200px;height:75pxonClick=location.href='./?LED=T\'>");
cliente.println("<inputtype=submitvalue=OFFstyle=width:200px;height:75pxonClick=location.href='./?LED=F\'>");
cliente.println("</center>");
cliente.println("</body>");
cliente.println("</html>");
cliente.stop();
//Cierroconexinconelcliente
readString="";
}
}
}
}
}

EstesitioempleacookiesdeGoogleparaprestarsusservicios,parapersonalizaranunciosyparaanalizarel
trfico.Googlerecibeinformacinsobretuusodeestesitioweb.Siutilizasestesitioweb,sesobreentiendeque
4.1.Probarelservidorweb
aceptaselusodecookies.
Paraprobarelservidorweblonicoquedebemoshaceresiranuestronavegadorfavoritoeingresar
laIPdelservidorwebquecreamosenlabarradenavegacin.
MSINFORMACIN ENTENDIDO

Aquloprobdesdemicomputadora

Tambinloprobdesdemicelular(SonyC3)desdeelnavegadorChrome

http://sebalabs.blogspot.com.es/2015/07/10encenderapagarunledconethernet.html 10/15
11/8/2016 SebaElectronicLabs:[Arduino06]EncenderApagarunledconEthernetShieldArduinoycreacindeunservidorwebconhtml

Nota: No me cargaba el servidor web al ingresar en la IP en el buscador de iphone (safari) lo que

hice para solucionar el problema fue ingresar la siguiente direccin 192.168.1.7/?LED=F (tambin
puedenprobarconlaTdeTRUEenvezdeunaF).

EstesitioempleacookiesdeGoogleparaprestarsusservicios,parapersonalizaranunciosyparaanalizarel
5.CreacindelservidorwebmedianteQuackit
trfico.Googlerecibeinformacinsobretuusodeestesitioweb.Siutilizasestesitioweb,sesobreentiendeque
aceptaselusodecookies.
Como se vio la etapa anterior ya habamos creado el servidor web pero ahora mostrare como se
MSINFORMACIN ENTENDIDO
haceunservidorwebparaqueluegosepuedaponerenelsketch(programaquehicimos)enArduino
IDE.

5.1.NocionesbsicasdeHTML
Esimportanteentenderestascosassiquieresentendercomosecrealapaginaweb

Undocumentohtmlsiemprecomienzacon<html>yterminacon</html>

<head>Aquvalacabeceradelapagina</head>

<title>Aquivaeltitulodelapagina(eltitulodelapestaa)</title>

<body>siempredespuesdelheadvaelbody(cuerpodelapagina)</body>

height="100%" widht="100%" son dos caractersticas que se le asignaron a body, usar

el100%delaalturayanchuradelapagina

<center>secentratodoeltextoqueestedentrodeesteenunciado</center>

</br>generaunespaciodeunalinea

<input(caractersticas)/>seaade"algo"puedeserbotn,caja,imagen,contrasea,etc
dependedesucaractersticatype="(aquvaesealgo)"

http://sebalabs.blogspot.com.es/2015/07/10encenderapagarunledconethernet.html 11/15
11/8/2016 SebaElectronicLabs:[Arduino06]EncenderApagarunledconEthernetShieldArduinoycreacindeunservidorwebconhtml

(caracterstica)onclick="location.href"="./?LED=T",redireccinIP/?LED=T
enmicasoredireccionaalsiguienteenlace192.168.1.7/?LED=T

(caracterstica)name="ledon",nombre:ledon

(caracterstica)type="button",tipo:botn

(caracterstica)value="ON",tienevalorON

5.2.CdigoHTMLdenuestroservidorweb
Enlaimagensemuestraelcdigohtmldelservidorweb

En esta otra imagen se muestra el mismo cdigo con comentarios para que quienes no saben
programarenhtmlloentiendan

6.FormaalternativadeconectarelArduinounavezprogramado

Una vez programado Arduino podemos alimentarlo por medio de un cargador de celular siempre y
cuando suministre suficiente corriente y sea de 5V. Como se puede ver la imagen el arduino se
alimenta por medio de su cable USB que se encuentra conectado al cargador USB de mi celular
(Output5V1000mA)queestaconectadoalacorrientealterna.

http://sebalabs.blogspot.com.es/2015/07/10encenderapagarunledconethernet.html 12/15
11/8/2016 SebaElectronicLabs:[Arduino06]EncenderApagarunledconEthernetShieldArduinoycreacindeunservidorwebconhtml

Nota: Es normal que la shield se caliente, se calentara conectado a la computadora o ya sea al

cargadorUSB,comosepuedeverenlaethernetshieldhayundisipador(estapiezademetalsirve
para irradiar el calor hacia el medio ambiente) y en esa zona se suele calentar, no hay por que
preocuparse.

Seguir haciendo mas tutoriales, pero volver en un mes aproximadamente ya que tengo que
terminartrabajosyprepararmeparapruebas,paraascerrarelsemestreenlaUniversidad

Muchasgraciasporvisitarmiblogysitienenalgunaconsultaoconsejopuederealizarlopormedio
deestemismoblogopormediodemicorreoelectrnicosebastian.latorre.cl@ieee.org

PublicadoporSebastianLatorrealas15:33:00 Etiquetas:Arduino,led,Principiantes,Tutorial,
Tutoriales,Tutorialesarduino
Reacciones: Me sirvi (2) Interesante (0) No me gust (0)

SebastianLatorre
EstudiantedeIngenieraCivilElectrnicadelaUACh,miembrodelIEEE.Misintereses
sonlalectura,msica,deportesylatecnologa.Enmisratoslibresveoanimes,series,
tambinmegustaleeryentrenarenelgym.

4comentarios:

Annimo 16deseptiembrede2015,08:43

http://sebalabs.blogspot.com.es/2015/07/10encenderapagarunledconethernet.html 13/15