A veces desea mostrar el flujo continuo de datos en una conexión en serie como una página web en un navegador. ¿Cómo lograr esto? Muy fácil con un guión...
Básicamente, solo se trata de crear periódicamente una página web con los datos de serie más recientes. Luego, un navegador web puede mostrar la página en la computadora local o en una red. Por lo tanto, se requiere un pequeño programa que convierta continuamente los datos en serie en archivos HTML, por ejemplo. ¿No es PHP también un lenguaje de programación para aplicaciones relacionadas con Internet? Sí, y por eso, PHP hace que sea fácil y elegante hacer el trabajo. Pero hay otras formas, como veremos.
Actualización automática
HTML conoce una metaetiqueta que indica al navegador que cargue una página web con cierto retraso:
Si no se especifica ninguna URL, esta etiqueta en el encabezado de la página web indica al navegador que actualice la página actual cada diez segundos. Por supuesto, el tiempo de espera también puede tener un valor diferente. Si su navegador no es compatible con esta etiqueta, se puede reemplazar con una pequeña pieza de JavaScript (descargue a continuación). Y si la página se actualiza con nuevos datos en serie cada diez segundos, el navegador también lo mostrará.
¡Divida la tarea en dos!
La etiqueta de actualización también se puede usar en un archivo PHP en lugar de en un archivo HTML. El navegador reaccionará de forma idéntica. Este archivo PHP también podría contener un script que lea los datos del puerto serie. Aquí es donde las cosas se complican porque PHP no admite puertos serie de forma nativa. E incluso si lo fuera, cada vez que el navegador solicita la última versión de la página, el script tendría que abrir el puerto serie, obtener los datos actuales y cerrar el puerto nuevamente. Los datos que atraviesen la interfaz fuera de esta ventana se perderían. Para colmo, los sistemas arduinoides podrían reiniciarse al abrir el puerto serie, haciendo que todo el enfoque sea imposible. Una solución a esto es dividir el proceso en dos secciones:
Sección 1: un script para leer continuamente el puerto serie y actualizar los datos en un archivo importado del sitio web de PHP (Listado 1).
Listado 1. Un script PHP que lee los datos del puerto serie y los escribe en el archivo "data.txt".
// Linux $comPort = "/dev/ttyACM0";$comPort = "COM15";include "php_serial.class2.php";$serial = new phpSerial;$serial->deviceSet($comPort);/ / En Windows (¿solo 10?), todas las configuraciones de modo deben realizarse de una sola vez. $ cmd = "modo". $comPuerto . " baud=115200 parity=n data=8 stop=1 to=off xon=off";$serial->_exec($cmd);$serial->deviceOpen();echo "Esperando datos...\ n";dormir(2); // Espera a que Arduino termine de arrancar. $serial->serialflush();while(1){ $read = $serial->readPort(); if (strlen($leer)!=0) { $fp = fopen("data.txt","w"); if ($fp!=falso) { fwrite($fp,trim($leer)); fclose($fp); } }}?>
Sección 2: Un navegador que actualiza periódicamente la página web de PHP para mostrar los datos más recientes (Listado 2, Figura 1).
Listado 2. Esta página web de PHP formatea el contenido del archivo data.txt como una tabla.
";echo ""; // Inicio de página.echo "
",$título_página,"
"; // Head begin.echo "";echo "";echo "";echo "";echo "";echo ""; // Head end.echo "
"; // Cuerpo begin.echo "
",$título_página,"
"; // Título de la página.// Crea una tabla a partir del archivo de datos.$handle = fopen("data.txt","r");if ($handle!=NULL) { // Lee una línea de el archivo, luego ciérrelo $data = fgets($handle); fclose($handle); // Sincroniza con los datos. if ($data[0]=='$') { // Elimina los espacios en blanco. str_replace( ' ','',$data); // Divida los datos en campos separados por ','. // Formato esperado: "$,id1,value1,id2,value2,CRLF" list($startchar,$id1,$value1 , $id2,$valor2,$nueva línea) = explotar(",",$datos);// Crear matriz a partir de la lista.$números = matriz($id1=>$valor1,$id2=>$valor2); / / Ordenar matriz en orden de clave ascendente. ksort($numbers); // Inicio de tabla. echo "
"; eco"
Identificación
valor
"; foreach ($números como $x =" $x_value) { echo "
"; // Comienza la fila de la tabla. echo "
", $x, "
"; // Columna 1 de la tabla. echo "
"; // Comienza la columna 2 de la tabla. if ($x_value>=500) echo "
"; de lo contrario echo "
"; echo $x_valor; echo "
"; // Fin de la columna 2 de la tabla. echo "
"; // Fin de la fila de la tabla. } // Fin de la tabla. echo "
"; }}echo ""; // Fin del cuerpo.echo ""; // Fin de la página.?>
Servidor web requerido
Este enfoque distribuido resuelve el problema de abrir y cerrar el puerto y la pérdida de datos resultante, pero requiere que se ejecute un script en segundo plano. Si se trata de un script PHP, entonces la computadora también debe poder ejecutar scripts PHP. También se requiere un servidor web para entregar la página web PHP al navegador. Sin un servidor web, el navegador simplemente mostraría el código PHP que conforma la página. La forma tradicional de lograr esto es instalar algo llamado paquete AMP. AMP significa Apache MySQL PHP. Los servidores web de Windows a menudo están precedidos por una "W", las versiones de Linux por una "L", es decir, WAMP o LAMP (pero hay muchos otros servidores web, desde mini hasta completos en la red).
No tomes PHP,...
Probamos PHP y conseguimos que el script funcionara, pero no sin problemas. Además de las dificultades para configurar el servidor web, el principal problema era que PHP no abre un puerto serie de forma fiable para recibir datos. Parece que solo hay una biblioteca para la comunicación en serie en Internet llamada PHP Serial, todas las demás parecen derivarse de ella. Como menciona el autor en la página de GitHub [2] "Windows: parece estar funcionando para algunas personas, no funciona para otras". Claramente pertenecíamos al segundo grupo. Para que la comunicación serial funcione con PHP, primero tuvimos que abrir el puerto con un programa de terminal serial como TeraTerm e inmediatamente cerrarlo de nuevo. Por lo tanto, hemos abandonado el método PHP y optamos por Python en su lugar.
... ¡toma Python!
Python 3 con pySerial demostró ser perfecto en nuestra máquina de prueba con Windows 10. Escribimos un script para leer datos del puerto serial y llenar la página web con los datos. Dado que PHP ya no es necesario, la secuencia de comandos de Python también puede generar un archivo HTML puro (Listado 3, Ilustración 2).
Listado 3. Una secuencia de comandos de Python que lee datos del puerto serie y crea un archivo HTML correspondiente. import serialimport timefile_name = "serial.html" # Una vez creado, abra este archivo en un navegador. &erio; velocidad en baudios a su sistema.serial_port = 'COM15'velocidad en baudios = 115200page_title = "Arduino en Python";def write_page(data_list): fo = open(file_name,"w+") # Inicio de la página HTML. fo.escribir("") fo.escribir("
"+título_página+"
") # Inicio de página y encabezado. fo.write("") fo.write("") fo.write("") fo.write("") fo.write("") fo.write ( "
"+título_página+"
") # Extremo de cabecera, inicio de cuerpo. # Inicio de tabla. fo.write("
") fo.escribir("
Identificación
valor
") for i in range(0,len(data_list),2): fo.write("
") # Fila de la tabla begin.fo.write("
"+lista_datos[i]+"
") # Columna 1 de la tabla. fo.write("
") # Columna 2 de la tabla begin.fo.write("
") fo.write(lista_datos[i+1]) fo.write("
") # Fin de la columna 2 de la tabla. fo.write("
") # Fila de la tabla end.fo.write("
") # Fin de la tabla. fo.write("") # Fin del cuerpo. fo.write("") # Fin de la página. # Hecho, cierre el archivo. fo.close()s = serial.Serial(serial_port, baudrate) # Abrir puerto serie.s.dtr = 0 # Restablecer Arduino.s.dtr = 1print("Esperando datos...");time.sleep(2) # Esperar a que Arduino termine de arrancar.s.reset_input_buffer( ) # Eliminar cualquier dato obsoleto.while 1: data_str = s.readline().decode() # Leer datos y convertir bytes a tipo de cadena. # Limpiar datos de entrada. # Formato esperado: "$,id1,value1,id2 , value2,...,CRLF" data_str = data_str.replace(' ','') # Elimina espacios en blanco. data_str = data_str.replace('\r','') # Elimina return. data_str = data_str.replace(' \ n','') # Eliminar nueva línea.data_str += '123,65,1,999,cpv,236' # Agregar más datos print(data_str) # Dividir datos en campos separados por ','.data_list = data_str. (",") del data_list[0] # Eliminar '$' # Escribir página HTML. write_page(data_list)
Todo el formateo de datos también se puede hacer directamente en Python. Si bien la página web todavía se puede servir desde un servidor web, un navegador también puede mostrar y actualizar la página localmente. Por lo tanto, ya no se requiere un paquete (W/L)AMP, lo que hace que todo sea mucho más fácil.
Finalmente
En este artículo, presentamos un método para mostrar datos en serie en un navegador web. El método no es nuevo ni necesariamente el mejor. Si conoce otra forma, más simple, más elegante o lo que sea, compártala con nosotros. Y, por supuesto, no necesita escribir el script en Python, puede usar cualquier otro lenguaje de programación capaz de manejar la comunicación en serie y escribir archivos. La ventaja de Python (y pySerial) es que se ejecuta en Windows, macOS y Linux (y más). El código desarrollado para este artículo en forma de secuencias de comandos de PHP y Python y un boceto de Arduino se puede descargar a continuación. (170111)
➔ ¿Quiere leer más artículos de ElektorLabs? ¡Únete a Elektor ahora!
