Aporte Adaptar pagina web en codigo de Arduino.

Aporte: Adaptar pagina web en codigo de Arduino. - Versión para impresión

+- ChuJALT (https://chujalt.com)
+-- Foro: PLACAS DE PROTOTIPOS Y MINI PC'S (https://chujalt.com/forum-22.html)
+--- Foro: Anduino, Nodemcu, Wemos (https://chujalt.com/forum-23.html)
+--- Tema: Aporte: Adaptar pagina web en codigo de Arduino. (/thread-2.html)

Adaptar pagina web en codigo de Arduino. - chujalt - 05-03-2021

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:

Código:
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

Código:
<!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:

Código:
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:

Código:
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