Control de omega-onion desde una nube propia. Segunda parte

1.1. Instalación de apache y php

Vamos a explicar básicamente como crear nuestro propio servidor web instalando apache y php. Si hemos comprado un hospedaje no será necesario ya que vendrá preparado.

Apache es una aplicación que crea un servidor web capaz de trabajar con archivos escritos en lenguaje html. Para instalarlo en una máquina linux basada en debian (nosotros usamos Ubuntu) escribiremos en la consola de texto:

sudo apt-get update

sudo apt-get install apache2

Apache no será suficiente para crear páginas web dinámicas, vamos a instalar un módulo para apache llamado php.

sudo apt-get install php libapache2-mod-php php-mcrypt

En caso de duda se puede seguir alguna de las múltiples páginas que describen la instalación de apache y php, como por ejemplo

https://www.digitalocean.com/community/tutorials/como-instalar-linux-apache-mysql-php-lamp-en-ubuntu-16-04-es

Para comprobar que se ha instalado correctamente apache en nuestro equipo, abrimos un navegador y tecleamos http://localhost o http://ip_del_equipo desde cualquier ordenador que esté en la misma red, nos aparecerá la página de prueba.

Fig.16. Página por defecto

1.2. Diseño de nuestra propia web dinámicas

En la foto anterior podemos ver en el apartado “Document roots” que los archivos correspondientes a la web están en la carpeta /var/www/html, por ello nos desplazaremos a dicha carpeta con el comandos

cd /var/www/html

A continuación abrimos el navegador

nano index.php

y copiamos el siguiente código html/php

<html>

<head>

<title>Andalucía Integra</title>

</head>

<form method=”post” action=”index.php”>

<?php

//Lectura de variables de entrada

$nombre=$_POST[‘nombre’];

$lectura=$_POST[‘lectura’];

if($archivo = fopen(datos, “a”))//Abrimos archivo de texto en modo escritura

{

if ($lectura!=””)//Si la variable lectura no está vacía

{

//Escribimos el dato leido en el archivo “datos”

if(fwrite($archivo, date(“d m Y H:m:s”). ” “. $lectura. “\n”))

{

echo “Se ha ejecutado correctamente”;

}

else

{

echo “Ha habido un problema al crear el archivo”;

}

}

}

fclose($archivo);//Cerramos archivo “datos”

 

if($archivo = fopen(orden, “w”))//Abrimos archivo de texto “orden”

{

if ($nombre!=””)//Si la variable nombre no está vacía

{

//escribimos esa variable en el archivo “orden”

if(fwrite ($archivo, $nombre. “\n”))

{

echo “Se ha ejecutado correctamente”;

}

else

{

echo “Ha habido un problema al crear el archivo”;

}

}

}

fclose($archivo);//Cerramos el archivo “orden”

//Escribimos tres botones en la web y capturamos los datos en “lectura”

?>

<br>

<input type=”submit” value=”ROJO” style=”background:pink” name=”nombre”>

<input type=”submit” value=”AZUL” style=”background:lightblue” name=”nombre”>

<input type=”submit” value=”VERDE” style=”background:green” name=”nombre”>

Lectura:

<input type=”text” name=”lectura”>

</body>

</html>

Pulsando laS tecla <CTRL> y <o> guardaremos y con <CTRL> <x> salimos del editor. Ahora nos vamos a un navegador y tecleamos

http://localhost/index.php

El resultado debe ser el siguiente:

Fig.17. Página web nube

Como alternativa al editor “nano” podemos utilizar cualquier editor de texto que no añada códigos extraños al texto, por ejemplo el Notepad.

Sin pretender ser un curso de html/php explicaremos básicamente este código.

El código html comienza por <html> y termina con </html>, la cabecera comienza por <head> y termina por </head>, dentro de la cabecera hemos introducido el título de la página con <title> y <title>

Después de la cabecera hemos añadido la línea

<form method=”post” action=”index.php”>

que significa que vamos a introducir un formulario con el método “post” y cuando lo lancemos se abrirá la página “index.php”

Después de esa línea hemos introducido <?php que significa que comienza el código “php”, este código termina con ?>. El código “php” se incrusta dentro del “html”.

El código “php” se encarga de guardar en el archivo de texto “datos” el dato recogido del formulario “lectura” y en el archivo “orden” el nombre de la orden “nombre”

En el archivo “dados” se van almacenando los datos con fecha y hora, en el archivo “orden” sólo se guardará una palabra, esa palabra sirve a la omega_onion para lanzar un programa, una vez leída por la omega el comando, la omega guardará la palabra “hecho” para indicar que se ha ejecutado la orden y no volver a hacerlo la próxima vez que lea el archivo.

Una vez terminado el código “php” con ?> hemos escrito tres líneas de botones, sólo vamos a comentar una y las otras dos son análogas

<input type=”submit” value=”ROJO” style=”background:pink” name=”nombre”>

En esta línea se define un botón de color rosa, la variable es “nombre” que coincide con la variable leída al principio del archivo y el valor enviado será “ROJO”. Este “ROJO” es la orden de se guardará en el archivo “orden” y que la omega interpretará encendiendo el led rojo durante un cierto tiempo.

Aquí se han usado colores para activar led, pero los botones podrían ser “Abrir garaje” o “Activar calefacción”. En ese caso la omega actuaría sobre un relé para abrir el garaje o activar la calefacción.

2. Realización, subida y visualización de fotos en web con omega-onion a través de ftp

2.1. Realización y subida de fotos a la nube

Siguiendo los pasos del enlace https://onion.io/taking-photos-with-a-usb-webcam-on-the-omega/ instalaremos el paquete fswebcam que nos servirá para realizar fotos con una webcam en nuetra omega-onion

Luego nos conectamos a nuestra omega onion por ssh

ssh root@192.168.200.123

…abrimos un archivo de texto

nano fotos.py

Fig.18. Omega-onion con cámara USB

…y copiamos el siguiente código

#!/usr/bin/env python

# -*- coding: cp1252 -*-

import ftplib

import os

# Datos FTP

ftp_servidor = ‘ftp.andaluciaintegra.com’

ftp_usuario = ‘usuario’

ftp_clave   = ‘contraseña’

ftp_raiz     = ‘/’ # Carpeta del servidor donde queremos subir el fichero

# Datos del fichero a subir

fichero_origen = ‘foto.jpg’ # Ruta al fichero que vamos a subir

fichero_destino = ‘foto.jpg’ # Nombre que tendrá el fichero en el servidor

#Realizamos una foto

os.system(‘fswebcam –no-banner -r 1080×720 foto.jpg’)

# Conectamos con el servidor

try:

s = ftplib.FTP(ftp_servidor, ftp_usuario, ftp_clave)

try:

f = open(fichero_origen, ‘rb’)

s.cwd(ftp_raiz)

s.storbinary(‘STOR ‘ + fichero_destino, f)

f.close()

s.quit()

except:

print “No se ha podido encontrar el fichero ” + fichero_origen

except:

print “No se ha podido conectar al servidor ” + ftp_servidor

Por motivos de seguridad no se facilita el usuario ni la contraseña de nuestra web, el resto del código es operativo adaptándolo a cada caso. En la parte de la conexión ftp hemos seguido los pasos de https://nideaderedes.urlansoft.com/2008/09/03/python-subir-archivos-a-un-ftp/

La línea:

os.system(‘fswebcam –no-banner -r 1080×720 foto.jpg’)

ejecuta el comando de consola fswebcam –no-banner -r 1080×720 foto.jpg para realizar una foto de resolución 1080×720 y guarda la foto en el archivo foto.jpg

El resto de código es el necesario para abrir una conexión ftp con el servidor y enviar el archivo foto.jpg.

2.2. Visualización de las fotos enviadas

Una vez subida una foto al sitio web, vamos a crear una página para visualizar dicha foto.

En nuestro sitio web vamos a crear un archivo llamado camara.php con el siguiente contenido

<html>

<head>

<title>Cámara</title>

<META HTTP-EQUIV=”REFRESH” CONTENT=”1;URL=http://andaluciaintegra.com/domo/camara.php”>

<head>

<body>

<IMG SRC=”foto.jpg” WIDTH=400 HEIGHT=300 ALT=”video en directo”>

</body>

</html>

Esta página no sólo va a visualizar la foto una vez, sino que se va a refrescar cada segundo, de esta forma si realizamos y enviamos fotos de forma automática desde nuestra omega, dará la sensación de video de muy baja velocidad a razón de 1 imagen/segundo. La línea en “html” encargada del refresco es la siguiente:

<META HTTP-EQUIV=”REFRESH” CONTENT=”1;URL=http://andaluciaintegra.com/domo/camara.php”>

…y la línea encargada de visualizar la foto con una anchura de 400 píxeles y una altura de 300 píxeles es:

<IMG SRC=”foto.jpg” WIDTH=400 HEIGHT=300 ALT=”video en directo”>

Aquí termina la serie de artículos en los que describimos cómo instalar un sistema de control basado en el mini-ordenador omega onion, capaz de leer información, tomar fotografías y actuar sobre el medio para después enviar y recibir información desde una nube; asimismo se ha diseñado dicha nube.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *