Conéctate para seguir esto  
chujalt

Adaptar pagina web en codigo de Arduino

1 post en este tema

Saludos.

 

Si vamos a utilizar nuestro Arduino como un servidor de una página web tenemos que introducir el código de la página dentro del código de Arduino. Esto es, cada linea de código html debe ir dentro de:
 

client.println("Aquí código html");

 

Esto se puede convertir en un trabajo muy cansado si la página es amplia y, además, si el código html tiene comillas doble tendremos que "escaparlas" con una barra invertida.

 

Para los que trabajamos con linux he creado tres lineas de código bash que nos facilitan enormemente la tarea.

 

Vamos a suponer que tenemos la siguiente página, la cual la llamamos 1.html

 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Portal básico - aprenderaprogramar.com</title>
</head>
<body>
<div id="page">
<div id="header">
Portal (Tutorial básico del programador web: HTML desde cero) - aprenderaprogramar.com
</div>
<!-- contenedor -->
<br />
<br />
<br />
<div id="wrapper">
<!-- menu -->
<div id="menu">
<div>Menú</div>
<hr style="color:red; background-color:red; width:50%;" />
<ul>
<li><a href="#">Portada</a></li>
<li>
<a href="http://www.aprenderaprogramar.com">aprenderaprogramar.com</a>
</li>
</ul>
</div>
<!-- fin menu -->
<!-- cuerpo -->
<div id="body">
<form method="get" action="accion.html">
Nombre: <input type="text" name="nombre" /><br />
Apellidos: <input type="text" name="apellidos" /><br />
Dirección: <input type="text" name="direccion" /><br />
Correo electrónico: <input type="text" name="correo" /><br />
Teléfono: <input type="text" name="telefono" /><br />
</form>
</div>
<!-- fin cuerpo -->
</div>
<!-- fin contenedor -->
<br /> <br /> <br />
<div id="footer">
Copyright 2006-2012 aprenderaprogramar.com
</div>
</div>
</body>
</html>

 

El script bash creará un archivo llamado 2.txt para nuestro código en Arduino.

 

Las lineas bash a ejecutar una por una serían:

 

sed -e 's/\"/\/"/g' 1.html > 2.txt

sed -i "s|^|client.println(\"|g" 2.txt

sed -i "s|$|\");|g" 2.txt

 

y el resultado final listo para introducir en nuestro código para Arduino es:
 

client.println("<!DOCTYPE html>");
client.println("<html>");
client.println("<head>");
client.println("<meta charset=/"utf-8/">");
client.println("<title>Portal básico - aprenderaprogramar.com</title>");
client.println("</head>");
client.println("<body>");
client.println("<div id=/"page/">");
client.println("<div id=/"header/">");
client.println("Portal (Tutorial básico del programador web: HTML desde cero) - aprenderaprogramar.com");
client.println("</div>");
client.println("<!-- contenedor -->");
client.println("<br />");
client.println("<br />");
client.println("<br />");
client.println("<div id=/"wrapper/">");
client.println("<!-- menu -->");
client.println("<div id=/"menu/">");
client.println("<div>Menú</div>");
client.println("<hr style=/"color:red; background-color:red; width:50%;/" />");
client.println("<ul>");
client.println("<li><a href=/"#/">Portada</a></li>");
client.println("<li>");
client.println("<a href=/"http://www.aprenderaprogramar.com/">aprenderaprogramar.com</a>");
client.println("</li>");
client.println("</ul>");
client.println("</div>");
client.println("<!-- fin menu -->");
client.println("<!-- cuerpo -->");
client.println("<div id=/"body/">");
client.println("<form method=/"get/" action=/"accion.html/">");
client.println("Nombre: <input type=/"text/" name=/"nombre/" /><br />");
client.println("Apellidos: <input type=/"text/" name=/"apellidos/" /><br />");
client.println("Dirección: <input type=/"text/" name=/"direccion/" /><br />");
client.println("Correo electrónico: <input type=/"text/" name=/"correo/" /><br />");
client.println("Teléfono: <input type=/"text/" name=/"telefono/" /><br />");
client.println("</form>");
client.println("</div>");
client.println("<!-- fin cuerpo -->");
client.println("</div>");
client.println("<!-- fin contenedor -->");
client.println("<br /> <br /> <br />");
client.println("<div id=/"footer/">");
client.println("Copyright 2006-2012 aprenderaprogramar.com");
client.println("</div>");
client.println("</div>");
client.println("</body>");
client.println("</html>");

 

Bueno, como veréis es fácil y puede ahorrarnos mucho trabajo.

 

Saludos

 

Compartir este post


Enlace al post
Compartir en otros sitios

Registra una cuenta o conéctate para comentar

Debes ser un miembro de la comunidad para dejar un comentario

Crear una cuenta

Regístrate en nuestra comunidad. ¡Es fácil!

Registrar una cuenta nueva

Iniciar Sesión

¿Ya tienes cuenta? Conéctate aquí.

Iniciar Sesión
Conéctate para seguir esto