Estacion grafica multimedia con Raspberry Pi - Parte 2 -
Ocultar información innecesaria
Si desea ocultar cierta información proporcionada por el widget, simplemente añadir un <div> en negro por encima de los elementos que desea ver desaparecer.
Añadir un <div> en el archivo index.php justo por debajo del tiempo div:
<Div id = "Tiempo"> </ div>
<Div id = "meteo_black"> </ div>
A continuación, edite el archivo style.css añadiendo el siguiente código en la sección del tiempo:
[color=#000000]div # meteo_black
{
derecha: 0px;
top: 420px;
anchura: 600px;
altura: 100px;
position: absolute;
z-index: 9999;
background-color: RGBA (0, 0, 0, 1);
}[/color]
Por supuesto, tendrá que ajustar la posición y el tamaño del div para satisfacer sus necesidades pero el resultado, es muy fácil de leer y el diseño es muy elegante
Con estos primeros tres módulos de reloj , xplanet y el tiempo, ya es posible hacer una hermosa pantalla con todos estos elementos. Esta información puede ser valiosa y útil para todo el mundo todos los días
Como extra aparte de todos los módulos de hora ,el tiempo y las fases lunares el diseñador decidió añadir algunas funciones de “monitoreo”, cuya función es supervisar los servidores y redes..
8 – Módulo 5 – |TeamSpeak|
Si usted no sabe TeamSpeak , se trata de un software de conferencia de audio que permite a varias personas chatear a través de Internet (para más información http://fr.wikipedia.org/wiki/TeamSpeak ). Este módulo se utiliza para mostrar el estado del servidor de TeamSpeak (on / off) y la lista de las personas que están conectados a él.
Para obtener esta información se utiliza TeamSpeak 3 framework PHP que es una descarga gratuita. Esta gran libreria PHP proporciona acceso a todas las funciones del servidor de TeamSpeak3.
Sólo tiene que descargar y descomprimir TeamSpeak 3 framework PHP a su directorio web raíz.
index.php
Al igual que con otros módulos, sólo un <div> suficientes. Se empieza a acostumbrarse
<Div id = "TS3"> </ div>
La etiqueta se queda vacía, y se “llena” de la función de JavaScript …
style.css
Es la hoja de estilo minimalista para este módulo:
[color=#000000]/ * * Ts3 /
div # TS3
{
izquierda: 340px;
parte inferior: 10px;
position: absolute;
overflow: hidden;
background-color: RGBA (0, 0, 0, 1);
Color: #FFF;
font-weight: bold;
text-align: center;
}
td.ts3_user
{
text-align: left;
font-size: 30px;
padding-left: 10px;
}[/color]
|javascript.js|
Una vez más, una aplicación AJAX fácil de recuperar información a mostrar.
[color=#000000]/ * * TS3 /
ts3_timeout var;
función TS3 ()
{
$ .ajax ({
asíncrono: falso,
del tipo: "GET"
url: "./ajax.php"
de datos "de bloque = TS3"
el éxito: function (html) {
$ ( "# Ts3") HTML (HTML).
}
});
ts3_timeout = setTimeout ( "TS3 ()", 10000);
}[/color]
El período de actualización se establece en 10 segundos para ver rápidamente los cuales conecta / desconecta el servidor.
|ajax.php|
Eso habla por sí mismo …
/////////////////////////////////////////////////
// TS3
/////////////////////////////////////////////////
if ($ == bloque 'TS3') {
eco TS3 ();
}
|.inc.php|
Aquí se utiliza TeamSpeak 3 framework PHP .
Primero se abre un socket en el puerto 30033 (como para el módulo 4 – Servidor de ping ) para verificar que el servidor de TeamSpeak esta funcionando bien. Si es así, entonces se puede mostrar la bandera del servidor (la imagen triton_ts3.png), entonces se usa TeamSpeak 3 Marco de PHP para recuperar la lista y el estado de los usuarios conectados
[color=#000000]/////////////////////////////////////////////////
// TS3
/////////////////////////////////////////////////
función TS3 () {
$ Host_ip = '10 .0.0.1 ';
$ Host_port = '30033';
$ Zócalo = 0;
$ Socket = @fsockopen ($ host_ip, $ host_port, $ errno, $ errstr, 3);
$ Html = '';
if ($ socket &&! $ errno) {
require_once ( "./ TS3_PHP_Framework-1.1.12 / bibliotecas / TeamSpeak3 / TeamSpeak3.php");
$ Ts3_ServerInstance = TeamSpeak3 :: factory ( "ServerQuery: // nombre de usuario: [email protected]: 10011 /");
$ = $ Ts3_VirtualServer ts3_ServerInstance-> serverGetById (1);
$ Html = '<img width = "200 px" src = "/ triton_ts3.png PICT" estilo = "margin-bottom: 10px;">' ;.
. $ Html = '<table cellspacing = "0px" cellpadding = "0px">';
foreach ($ ts3_VirtualServer-> clientList () como cliente $) {
if ($ cliente [ "client_unique_identifier"] == 'serveradmin') {continúe;}
$ Html = '<tr>'.
$ Html = '<td valign = "middle">'.
$ Html = '<estilo img =. "Width: 20px;" src = "./ TS3_PHP_Framework-1.1.12 / images / espectador /'.$ cliente-> getIcon () 'png" alt = "">';
$ Html = '</ td>.';
$ Html = '<td valign = "middle">'.
$ Html = '' .htmlspecialchars ($ cliente).
$ Html = '</ td>.';
$ Html = '</ tr>'.
}
$ Html = '</ table>'.
}
devolver $ html;
}[/color]
Este módulo es muy fácil de conseguir con la lib TeamSpeak 3 framework PHP
7 – Módulo 4 – |servidor Ping|
Si tiene servidores, NAS, o cualquier otro tipo de máquina que desee conocer el estado (encendido / apagado, o disponible / no disponible), este tipo de módulo, de nuevo es muy simple pero de gran uso
La idea es mostrar los servidores verdes que responden correctamente al módulo solicitaciones, y en rojo los que no responden. Para enfatizar la naturaleza alarmante de una máquina que no responde, vamos a añadir una animación para resaltar este resultado:
index.php
Al igual que con otros módulos, sólo un <div> suficientes.
<Div id = "ping"> </ div>
La etiqueta se queda vacía, y se “llena” de la función de JavaScript.
style.css
Para este módulo, la hoja de estilo es un poco más larga:
[color=#000000]/ * * Ping /
div # ping
{
left: 0px;
parte inferior: 0px;
position: absolute;
overflow: hidden;
background-color: RGBA (0, 0, 0, 1);
}
td.ping
{
font-size: 30px;
text-align: left;
border-radius: 10px;
padding: 5px 10px;
font-weight: bold;
}
td.ping_up
{
color: # 00DD00;
}
td.ping_down
{
Imagen de fondo: url ( 'PICT / warning.gif');
color: # DD0000 ;;
}[/color]
Los nombres de la máquina se muestran en una tabla <table> que cada célula <td> puede o bien utilizar el estilo “ping_up” si la máquina cumple o “ping_down” si la máquina no responde. En este último caso, vamos a utilizar una imagen de un gif animado, a modo de “flash” en un cuadro rojo con el mes,para dar un mayor resalte
|javascript.js|
Javascript función de este módulo hace sólo una petición AJAX, y muestra el resultado en el index.php div:
[color=#000000]/ * * PING /
var PING_TIMEOUT;
función ping ()
{
$ .ajax ({
asíncrono: falso,
del tipo: "GET"
url: "./ajax.php"
datos "bloque = ping"
el éxito: function (html) {
$ ( "# Tabla") HTML (HTML).
}
});
PING_TIMEOUT = setTimeout ( "ping ()", 30000);
}[/color]
Es importante tener una visión en tiempo real del estado de las máquinas, por lo que estamos estableciendo el tiempo de refresco a 30 segundos. Se puede reducir este tiempo para que se adapte a sus necesidades, pero asegúrese de que sigue siendo mayor que el tiempo que tarda la función de PHP para poner a prueba todas sus máquinas. En promedio, se puede tardar de 4 a 5 segundos para poner a prueba todas las máquinas. Sin embargo, no es raro que se tarde hasta 20 segundos! Así que si se ajusta a 30 segundos ,esta puede ser una buena opción para el tiempo de espera entre cada actualización del módulo.
|ajax.php|
Sólo tiene que añadir unas pocas líneas a ajax.php archivo para la función correcta se llama:
/////////////////////////////////////////////////
// PING
/////////////////////////////////////////////////
if ($ == bloque de 'ping') {
eco ping ();
}
|inc.php|
En este archivo vamos a declarar la función de ping () que es responsable del lanzamiento de las aplicaciones en diferentes servidores, y luego construir la tabla HTML que se mostrará.
En general, para supervisar el estado de un servidor, se utiliza el comando ping que simplemente indica si la máquina objetivo satisface las peticiones ICMP. Esto plantea varios problemas. De hecho, es probable que el tráfico ICMP está bloqueado por un servidor cortafuegos por arriba que distorsione el resultado. Además, si desea supervisar un servidor web, por ejemplo, es muy posible que la máquina responda bien a los pings, pero que el servicio web no está disponible. Haciendo ping por lo tanto tienen poco interés …
La idea es bastante sencilla si los servicios que se ejecutan en nuestras máquinas están disponibles. Para ello, sólo tendremos que abrir un socket con la función de PHP fsockopen () . Si la abertura del pipe no es posible eso significara que el servicio no está disponible
[color=#000000]/////////////////////////////////////////////////
// PING
/////////////////////////////////////////////////
función ping () {
$ Hosts = array ();
// Definición de máquinas de prueba
$ Hosts_ip = array (
Oberon => array ('10 .0.0.1 '' 22 '), // SSH
'Triton' => array ('10 .0.0.2 '' 15915 '), // TeamSpeak
'Ananke' => array ('10 .0.0.3 '' 2049 '), // NFS
'DS110j' => array ('10 .0.0.4 '' 2049 '), // NFS
'DS210j' => array ('10 .0.0.5 '' 2049 '), // NFS
'DS212j' => array ('10 .0.0.6 '' 2048 ') // NFS
);
// para cada máquina de abrir un socket se prueba en el puerto especificado
// almacenamos el resultado 'arriba' o 'abajo' en las variables $ anfitriones
foreach ($ hosts_ip como $ host => $ host_data) {
$ = $ Host_ip host_data [0];
$ = $ Host_port host_data [1];
$ Zócalo = 0;
$ Socket = @fsockopen ($ host_ip, $ host_port, $ errno, $ errstr, 3);
if ($ && $ errno toma!) {$ anfitriones [$ nombre de host] = 'arriba';}
else {$ anfitriones [$ nombre de host] = 'abajo';}
}
// Construir la tabla HTML
// para cada máquina probado, que muestra su nombre y el estilo se fija 'ping_up' o 'ping_down' la etiqueta td
$ Html = '';
. $ Html = '<table cellspacing = "10px">';
$ C = 0;
foreach ($ anfitriones como $ host => $ host_status) {
if ($ c == 0) {$ html = '<tr>'} ;.
$ Html = '<td class = "ping ping _' $ host_status .. '">' $ nombre de host </ td> '...;
$ C ++;
if ($ c == 2) {$ c = 0; $ Html = '</ tr>'} ;.
}
if ($ c! = 0) {$ html = '</ tr>'} ;.
$ Html = '</ table>'.
devolver $ html;
}[/color]
El $ hosts_ip variable contiene la lista de equipos para poner a prueba y la pantalla. El nombre que se muestra, la dirección IP y el puerto TCP servicio a ensayar se almacena allí. Debe adaptar los nombres, direcciones IP y número de puerto para sus necesidades.
Como se puede ver en los comentarios de código, dependiendo de la máquina de prueba, abro un zócalo en servicios tales como SSH, NFS y TeamSpeak. Esto también funciona muy bien en FTP, HTTP, POP3, etc … hasta que el servicio a prueba de escucha en un puerto TCP, que funcionará
Nota: Es posible optimizar esta función PHP paralelización de sockets abiertos en cada máquina. De hecho, esta función prueba las máquinas de uno en uno, que puede ser largo … En “bifurcan” la tarea con la función pcntl_fork PHP (), es posible ejecutar todas las peticiones a la vez, reduciendo así el tiempo total que se pone la función para devolver la tabla HTML que se vea. Siéntase libre de dejar un comentario si quieres más detalles sobre este procedimiento
Optimización mediante el fork
El principio es simple: Para cada máquina a ensayar, vamos a crear un proceso a través del hijo función de PHP fork_pcntl () que pondrá en marcha fsockopen (). A medida que el proceso hijo y el proceso padre no puede compartir las variables (por lo menos el uso de técnicas de memoria compartida …), debe almacenar los resultados en una pequeña base de datos SQLite El proceso padre espera a todos proceso hijo se completa ir a leer el contenido de la base de datos SQLite (que contiene el estado de cada máquina). El resto permanece sin cambios, construimos la tabla HTML para mostrar como en la función inicial de ping () A saber, el fork sólo es posible desde la línea de comandos, será necesario adaptar el archivo ajax.php de esta manera:
[color=#000000]/////////////////////////////////////////////////
// PING
/////////////////////////////////////////////////
if ($ == bloque de 'ping') {
eco shell_exec ( 'php5 fork.php'); // fork.php es el archivo en el que se encuentra la función ping_fork ();
}[/color]
Aquí la versión “fork” de la función de ping (), se puede utilizar directamente copiando un archivo fork.php:
[color=#000000]función ping_fork () {
$ Hosts_ip = array (
Oberon => array ('10 .0.0.1 '' 22 '), // SSH
'Triton' => array ('10 .0.0.2 '' 15915 '), // TeamSpeak
'Ananke' => array ('10 .0.0.3 '' 2049 '), // NFS
'DS110j' => array ('10 .0.0.4 '' 2049 '), // NFS
'DS210j' => array ('10 .0.0.5 '' 2049 '), // NFS
'DS212j' => array ('10 .0.0.6 '' 2048 ') // NFS
);
$ PIDS = array ();
// Conectar con el SQLite base de datos y la creación de la tabla hosts_status si no existe todavía
$ Db = new SQLite3 ( 'ifstat / hosts.sqlite');
$ Db-> exec (CREATE TABLE SI NO EXISTE hosts_status (nomb_sist_pral VARCHAR (10), host_status VARCHAR (5)); ');
// Para cada máquina, hemos creado un proceso hijo
foreach ($ hosts_ip como $ nomb_sist_pral => $ host) {
$ PIDS [$ nombre_host] = pcntl_fork ();
if (! $ PID [$ nomb_sist_pral]) {
$ Socket = @fsockopen ($ host [0], $ host [1] $ errno, $ errstr, 3);
if ($ && $ errno toma!) {$ status = 'arriba';} else {$ status = 'abajo';}
// esperamos hosts_status la tabla ya no está bloqueado por un acceso potencial competidor
if ($ db-> busyTimeout (5000)) {
$ Db-> exec ( "INSERT INTO VALORES hosts_status ( '$ nomb_sist_pral' '$ status');");
}
exit ();
}
}
// el proceso padre debe esperar hasta que todos los procesos se han completado hijo
foreach ($ PID como $ nomb_sist_pral => $ pid) {
pcntl_waitpid ($ pid, estado $, WUNTRACED);
}
Resultados $ = $ db-> query ( 'select * from hosts_status;');
$ Html = '';
. $ Html = '<table cellspacing = "10px">';
$ C = 0;
while ($ host = $ Resultados> fetchArray (SQLITE3_ASSOC)) {
if ($ c == 0) {$ html = '<tr>'} ;.
. $ Html = '<td class = "ping ping _' $ Anfitrión [ 'host_status']. '">' $ Anfitrión [ 'nomb_sist_pral'] '</ td>' ..;
$ C ++;
if ($ c == 2) {$ c = 0; $ Html = '</ tr>'} ;.
}
if ($ c! = 0) {$ html = '</ tr>'} ;.
$ Html = '</ table>'.
$ Db-> exec ( "BORRADO DE hosts_status;");
devolver $ html;
}
eco ping_fork ();[/color]
El tiempo de espera fsockopen () aquí se establece en 3 segundos, lo que significa que uno debe esperar por lo menos tres segundos antes de declarar el equipo de destino como “abajo” (no disponible). En la versión no fork del ping () si un equipo no contesta, tuvo que esperar 3 segundos antes de probar la máquina siguiente, y así sucesivamente. Con mis 6 máquinas, si nadie contesta, él tendría que esperar 6 x 3 = 18 segundos antes de que el resultado final. Con la versión 6 fork solicitudes se envían simultáneamente. Cualquiera que sea el número de máquinas a ensayar, vamos a tener una respuesta dentro de 3 segundos como máximo
9 – Módulo 6 – |Gráfico de ancho de banda|
Por diversas razones, puede ser interesante tener si nuestro ancho de banda de Internet está saturado o no. Este módulo muestra una historia de unos 5 minutos utilizando el ancho de banda aguas abajo (descarga) y aguas arriba (carga). De esta manera, se puede ver de un vistazo si algo anormal está sucediendo en su red.
introducción
Este módulo es el más complicado de todo por la borda. Por un lado, tenemos que recuperar el caudal instantáneo utilizado por la interfaz de red de la pasarela que está conectado al router. A continuación, tendrá que pasar estos datos en Pi para ejecutarlos en el dashscreen. Por último, se creará un gráfico para representar esta información …
De hecho,se ha optado por no utilizar suave tipo mrtg que se especializan en este tipo de cosas instalando el software mínimo y utilizando algunos comandos básicos. Para hacer algo simple (como el ancho de banda de visualización en el gráfico), sin necesidad de sacar la gran artillería Y entonces … si no nos complicamos la vida, que sería mucho menos divertido, ¿verdad?
Ancho de Banda
ifstat es una pequeña herramienta desde la línea de comandos que muestra las estadísticas de uso de una interfaz de red. En un terminal, escriba el siguiente comando:
ifstat -n -i eth0
Y se obtiene continua, algo en el género:
eth0
KB / s en KB / s hacia fuera
0,45 0,06
0,71 0,39
2,85 0,76
0,57 0,06
1,86 0,19
0,45 0,06
0,45 0,06
0,45 0,06
0,57 0,06
0,59 0,13
0,45 0,06
0,45 0,06
0,59 0,26
0,57 0,06
1,74 0,13
...
Como vemos se obtiene cada segundo el flujo instantáneo (casi) en Kbytes / s, es decir, en KB / s Esto es exactamente lo que necesitamos ahora debe enviar esta información continuamente a nuestra pantalla.
|Transmitir los datos a través de la red Pi|
La forma más fácil de transmitir información desde un ordenador a otro es enviarlos en paquetes UDP … El comando netcat es totalmente apropiado para este tipo de operación. En una máquina que hace el papel de servidor de hecho:
nc -u -l 12345
- -u: Para utilizar UDP
- -l: para cambiar al modo de escucha (servidor)
- 12345: un número de puerto découte
A continuación, en una máquina B que actúa como un cliente, hacer:
- n -p 8888 -u 10.0.0.1 12345
- -p 8888: un puerto de origen
- -u: Para utilizar UDP
10.0.0.1 dirección IP de la máquina A (servidor)
12345: Oyente Una máquina (servidor)
Para transmitir los datos devueltos por el comando ifstat través netcat, vamos a utilizar una tubería . Aquí hay dos scripts completos (cliente / servidor) para realizar esta operación:
servidor de secuencia de comandos para ejecutar en el nc_ifstat_srv.sh Pi:
[color=#000000]### COMENZAR INIT INFO
# Proporciona: nc_ifstat_srv
# Required-Start:
# Requerido-Stop:
# Default-Start: 2 3 4 5
# Default-Stop: 0 1 6
# Corto Descripción: ifstat para Jarvis
# Descripción: Habilitar el servicio proporcionado por el demonio.
### END INIT INFO
dst_port = 12,345
dst_dir = / home / Jarvis / ifstat
dst_file = eth0.log
nc -l -u $ dst_port >> dst_dir $ / $ & dst_file[/color]
- script de cliente para funcionar en su nc_ifstat_clt.sh gateway / router de:
[color=#000000]### COMENZAR INIT INFO
# Proporciona: nc_ifstat_clt
# Required-Start:
# Requerido-Stop:
# Default-Start: 2 3 4 5
# Default-Stop: 0 1 6
# Corto Descripción: ifstat para Jarvis
# Descripción: Habilitar el servicio proporcionado por el demonio.
### END INIT INFO
src_port = 8888
dst_port = 12,345
dst_host = 10.0.0.2
eth = eth0
nc_ifstat ()
{
mientras [ "true"]
hacer
-i -n ifstat $ eth | n -p -u src_port $ $ $ dst_host dst_port
sueño 5
por lo tanto
}
case "$ 1" en
parada)
echo "parando ifstat para Jarvis ..."
killall ifstat
killall nc
;;
empezar)
echo "A partir de ifstat Jarvis ..."
nc_ifstat y
exit 0
;;
*)
la salida 1
;;
esac
exit 0[/color]
Para ejecutar el script en el arranque de la máquina, colocarlo en /etc/init.d continuación, ejecute el comando:
incumplimientos update-rc.d nom_du_script.sh
En este punto, usted debe tener un archivo en el Pi en la que, cada segundo, el ancho de banda instantáneo se anexa al archivo Sigue siendo para nosotros leer este archivo con un script PHP, y dibujar el gráfico para representar los datos que contiene
|Creación gráfico con PHP|
Una vez más, se podría haber utilizado una librería gráfica en PHP, JavaScript o cualquier otra cosa. Pero en lugar de operar asi el autor decidio crear su propia función de gráficos en PHP. Verá que es mucho más simple que se puede imaginar
Aquí está mi función imagickHisto () :
[color=#000000]imagickHisto función (máx $ $ ETH = '', $ UP_DOWN = 'abajo') {
Datas $ = parseData ( "eth0.log" $ UP_DOWN);
$ Width = 304; // anchura de la gráfica
$ Altura = 100; // altura del gráfico
Relleno $ = 1;
Las garrapatas $ = 5;
$ Background_color = '# 000'; // color de fondo
$ Axes_color = '# 555'; // ejes de color
si ( 'abajo' $ UP_DOWN ==) {
$ Data_color = '# 1D1'; // carta de colores para descargar
}
else {
$ Data_color = '# D11'; // gráficos en color para la carga
}
$ = $ Nb_values ancho - 2 * $ acolchado - 2;
$ MAX_VALUE $ height = - 2 * $ acolchado - 4;
$ Nb_datas = sizeof ($ datas más);
$ = Trim $ nb_values - $ nb_datas;
if ($ recortar <0) {$ recortar = 0;}
$ Imagen = nueva Imagick ();
$ Imagen -> newImage (ancho $, $ altura, nuevo ImagickPixel ($ background_color));
Dibuje $ = new ImagickDraw ();
N ° de dibujo $> setStrokeColor (nueva ImagickPixel ($ axes_color));
$ = $ Xx1 de relleno;
$ Xy1 $ height = - $ acolchado - 1;
$ XX2 width = $ - $ acolchado - 1;
$ = $ Xy2 xy1;
$ = $ Yx1 XX1;
$ = $ Xy1 YY1;
$ = $ Yx2 yx1;
$ = $ Acolchado YY2;
$ Half_y = $ altura / 2;
$ Half_x = $ ancho / 2;
N ° de dibujo $> línea ($ XX1, xy1 $, $ xx2, $ xy2);
N ° de dibujo $> línea ($ yx1, yy1 $, $ yx2, $ YY2);
N ° de dibujo $> línea ($ yx1, YY2 $, $ + $ yx1 garrapatas, $ YY2);
N ° de dibujo $> línea ($ yx1, half_y $, $ + $ yx1 garrapatas, $ half_y);
N ° de dibujo $> setStrokeColor (nueva ImagickPixel ($ data_color));
$ First_x XX1 = $ 1 + $ + asiento;
$ = $ Last_x xx2 - 1;
$ = $ First_y xy1 - 1;
$ = $ Last_y YY2 + 1;
for ($ i = 0; i $ <$ nb_values; $ i ++) {
if (isset ($ datas más [$ i])) {
$ Valor = $ $ datas más [i] * $ MAX_VALUE / $ max;
$ Value_y first_y = $ - $ valor;
$ = $ $ Value_x first_x + i;
N ° de dibujo $> línea ($ value_x, first_y $, $ value_x, $ value_y);
}
}
$ Imagen-> drawImage ($ dibujar);
$ Text_draw ImagickDraw = new ();
$ Text_draw-> setFillColor ($ axes_color);
$ Text_draw-> setFontSize (12);
$ Imagen-> annotateImage (, $ half_x-20, $ $ acolchado text_draw + 10, 0, "eth $ - $ UP_DOWN");
$ Imagen-> setImageFormat ( "PNG");
header ( 'Content-Type: image / png ");
echo $ imagen;
salida;
}[/color]
En resumen, la función toma tres parámetros:
- $ Max: máximo (en KB) para limitar el gráfico. Por ejemplo, un rendimiento máximo real alcanza 1.800 KB / s. Así que se ha seleccionado max = $ de 2000.
- $ ETH: Nombre de la interfaz (por ejemplo, eth0)
- $ UP_DOWN “arriba” o “abajo” para especificar el color del gráfico y los datos que se mostrará después de ifstat
La función lee una matriz de datos devuelto por la función parseData (), a continuación, se representa el gráfico una barra ancha de 1 píxel por datos. Con un ancho de 300 px, para que puedas ver 5 minutos de datos históricos
Aquí parseData (), cuya función es la función para leer el archivo que contiene los datos de la orden ifstat:
[color=#000000]parseData función ($ stat_file, $ UP_DOWN) {
$ Datas = array ();
si (filemtime ($ stat_file) <time () - 10) {return $ datas más;}
Estadísticas = $ fopen ($ stat_file, 'r');
while ((línea $ = fgets ($ estadísticas))! == false) {
$ Explode_line = str_word_count (línea $, 1, "0123456789.");
si ( 'abajo' $ UP_DOWN ==) {
$ Datas [] = $ explode_line [0];
}
else {
$ Datas [] = $ explode_line [1];
}
}
fclose ($ estadísticas);
Datas $ = $ array_slice (datas más, -300);
devolver $ datas más;
}[/color]
Esta función tiene dos parámetros:
- $ Stat_file: analizador de archivos
- $ UP_DOWN “arriba” o “abajo” para distinguir la carga de datos y descarga,
- En lo que sigue, reprensenta el mismo enfoque que para los otros módulos
|index.php|
Se necesita un div por gráfico; Así que agregamos dos para el archivo index.php, uno para subir y otro para su descarga.
<Div id = "ifstat_eth0_up"> <img id = "img_eth0_up" src = "PICT / blank.png"> </ div>
<Div id = "ifstat_eth0_down"> <img id = "img_eth0_down" src = "PICT / blank.png"> </ div>
En cuanto al módulo de Xplanet , es conveniente iniciar la fuente de las etiquetas de imagen <img> con un blank.png imagen en blanco.
|style.css|
Basta con colocar nuestros dos <div>:
[color=#000000]/ * * Ifstat /
div # ifstat_oberon_up
{
derecha: 20px;
parte inferior: 20 píxeles;
position: absolute;
overflow: hidden;
background-color: RGBA (0, 0, 0, 1);
}
div # ifstat_oberon_down
{
derecha: 340px;
parte inferior: 20 píxeles;
position: absolute;
overflow: hidden;
background-color: RGBA (0, 0, 0, 1);
}[/color]
|javascript.js|
Una simple petición AJAX para recuperar la pantalla gráfica.
[color=#000000]/ * * Ifstat /
ifstat_timeout var;
ifstat function () {
var ahora = new Date () getTime ().
url_down var = "bloque = ajax.php ifstat y eth = & UP_DOWN wan = down & max = 2.000 y hora =" + ahora;
img_eth0_down var = $ (url_eth0_down "<img />").attr("src");
$ ( "# Img_eth0_down") attr ( "src", url_eth0_down).
url_up var = "bloque = ajax.php ifstat y eth = & UP_DOWN wan = up & max = 150 y hora =" + ahora;
img_eth0_up var = $ (url_eth0_up "<img />").attr("src");
. $ ( "# Img_eth0_up") attr ( "src", url_eth0_up);
ifstat_timeout = setTimeout ( "ifstat ()", 5000);
}[/color]
Igual que para el módulo Xplanet , debe pre-cargar las imágenes y las muestra.En este caso el tiempo de actualización es de 5 segundos, lo cual es suficiente.
|ajax.php|
El código para agregar este archivo permanece tan elemental para los otros módulos. Sin embargo, no se olvide de tener en cuenta los parámetros de la imagickHisto () Función:
[color=#000000]/////////////////////////////////////////////////
// ifstat
/////////////////////////////////////////////////
if ($ == bloque 'ifstat') {
imagickHisto ($ _REQUEST [ 'max'], $ _REQUEST [ 'eth'], $ _REQUEST [ 'UP_DOWN']);
}
[/color]
|inc.php|
En este archivo, simplemente copia y pega el imagickHisto () y parseData () que se describieron anteriormente
Esta es la representación final de primer plano, cuando el ancho de banda es de alta demanda
10 – Módulo 7 – |VPN|
Si usa un pequeño servidor VPN PPTP para sus amigos para poder intercambiar fácilmente archivos o jugar juegos en red , es muy fácil de configurar tanto en el lado del servidor mediante la instalación del paquete de pptpd que el lado del cliente, ya que ‘ se forma nativa compatible con Windows.
Este módulo permite mostrar una lista de personas que están conectadas con el servidor PPTP VPN.
No se detalla en este artículo cómo instalar y configurar PGWP. Aquí hay un tutorial para ayudarle a implementar este tipo de VPN https://help.ubuntu.com/community/PPTPServer
El servidor pptpd está instalado en el router , proceda de la misma manera que el módulo de ancho de banda de gráficos para transferir datos utilizando netcat Pi. Lo único nuevo aquí es el comando last permitiendo recuperar información de conexión de cliente VPN.
|Transferir los datos a la Pi|
lado Pi (servidor netcat):
[color=#000000] #! / Bin / bash
### COMENZAR INIT INFO
# Proporciona: nc_vpn_srv
# Required-Start:
# Requerido-Stop:
# Default-Start: 2 3 4 5
# Default-Stop: 0 1 6
# Corto Descripción: VPN para Jarvis
# Descripción: Habilitar el servicio proporcionado por el demonio.
### END INIT INFO
dst_port = 12,346
dst_dir = / home / Jarvis / VPN
dst_file = vpn_oberon.log
nc_vpn ()
{
mientras [ "true"]
hacer
n q 1 -u -l 12346> $ dst_dir / $ dst_file </ dev / null
sueño 5
por lo tanto
}
case "$ 1" en
parada)
echo "vpn parando para Jarvis ..."
killall VPN
killall nc
;;
empezar)
echo "A partir de VPN para Jarvis ..."
nc_vpn y
exit 0
;;
*)
la salida 1
;;
esac
exit 0[/color]
lado de puerta de enlace (cliente netcat):
[color=#000000]#! / Bin / bash
### COMENZAR INIT INFO
# Proporciona: nc_vpn_clt
# Required-Start:
# Requerido-Stop:
# Default-Start: 2 3 4 5
# Default-Stop: 0 1 6
# Corto Descripción: VPN para Jarvis
# Descripción: Habilitar el servicio proporcionado por el demonio.
### END INIT INFO
src_port = 8889
dst_port = 12,346
dst_host = 10.0.0.1
nc_vpn ()
{
mientras [ "true"]
hacer
última | ppp grep | grep "conectado" | n q 1 -p -u src_port $ $ $ dst_host dst_port
sueño 5
por lo tanto
}
case "$ 1" en
parada)
echo "vpn parando para Jarvis ..."
killall VPN
killall nc
;;
empezar)
echo "A partir de VPN para Jarvis ..."
nc_vpn y
exit 0
;;
*)
la salida 1
;;
esac
exit 0[/color]
Ejecute estas secuencias de comandos en el inicio del sistema en la compactación en el directorio /etc/init.d a continuación, ejecutar el siguiente comando:
update-rc.d nom_du_script.sh defaults
index.php
Un simple <div> Simplemente porque sólo queremos mostrar una lista de usuarios:
<Div id = "VPN"> </ div>
style.css
Un poco de formato de mirar bastante
[color=#000000]/ * * VPN /
div # VPN
{
izquierda: 550px;
parte inferior: 10px;
position: absolute;
overflow: hidden;
background-color: RGBA (0, 0, 0, 1);
Color: #FFF;
}
td.vpn
{
text-align: left;
font-size: 30px;
padding: 5px;
}
img.vpn
{
anchura: 20 píxeles;
altura: 20 píxeles;
}[/color]
|javascript.js|
Una simple petición AJAX para recuperar los datos a mostrar.
[color=#000000]/ * * VPN /
vpn_timeout var;
función vpn ()
{
$ .ajax ({
asíncrono: falso,
del tipo: "GET"
url: "./ajax.php"
datos "bloque = vpn"
el éxito: function (html) {
$ ( "# VPN") HTML (HTML).
}
});
vpn_timeout = setTimeout ( "VPN ()", 5000);
}[/color]
ajax.php
Nada específico para este módulo:
[color=#000000]/////////////////////////////////////////////////
// VPN PGWP
/////////////////////////////////////////////////
if ($ == bloque 'VPN') {
vpn echo ();
}[/color]
.inc.php
Se requieren dos funciones de este módulo:
- vpn_parseData (): analizar el archivo enviado a través netcat
- VPN (): crear una tabla HTML con los nombres de usuarios conectados
[color=#000000]/////////////////////////////////////////////////
// VPN PGWP
/////////////////////////////////////////////////
función vpn () {
Datas $ = vpn_parseData ( "/home/jarvis/vpn/vpn_oberon.log");
$ Html = '';
if (sizeof (Datas $)> 0) {
. $ Html = '<table cellspacing = "0px">';
foreach ($ Datas como $ data) {
$ Html = '<tr>'.
$ Html. = '<Td valign = "middle"> <img class = "VPN" src = "PICT / vpn.png"> </ td> <td class = "VPN">'. $ Data [0]. </ td> ';
$ Html = '</ tr>'.
}
$ Html = '</ table>'.
}
devolver $ html;
}
vpn_parseData función ($ stat_file) {
$ Datas = array ();
si (filemtime ($ stat_file) <time () - 10) {return $ datas más;}
Estadísticas = $ fopen ($ stat_file, 'r');
while ((línea $ = fgets ($ estadísticas))! == false) {
$ Explode_line = str_word_count (línea $, 1, "0123456789.");
$ Datas [] = $ explode_line;
}
fclose ($ estadísticas);
devolver $ datas más;
}[/color]
Esto en cuanto a este último módulo es muy simple
Como vemos el trabajo de MagdiBlog es impresionante mostrando en una pantalla de forma espectacular la hora y la fecha de una forma fácil de leer La visualización del tiempo es también información útil todos los días. En cuanto a la tierra y la luna , resulta muy agradable (si eso no es lo suyo, puede reemplazar fácilmente estas imágenes con fotografías, añadir una función de “marco de fotos digital” integrado a los dashscreen ,etc)
Otros módulos como ping , TeamSpeak , ancho de banda y VPN pueden ser útiles para controlar lo que está sucediendo en cualquier red y recibir avisos de averías y otros problemas que puedan surgir.
Justo por encima del módulo de gráficos de ancho de banda,el autor incluso añadió un gráfico del número de visitas diarias usando GAPI para recuperar las estadísticas de Google Analytics y JSAPI (Gráficos de Google) para crear el gráfico.
Como vemos las posibilidades son inmensas sujetas tan solo a la creatividad de cada persona. Para los módulos, el principio es siempre el mismo:
- un <div> con un ID en el archivo index.php
- una hoja de estilo style.css para colocar el div en cuestión y gestionar el formato de los datos que
- una función de JavaScript en el archivo javascript.js que se ejecuta una petición AJAX a intervalos regulares
- una línea en el archivo para llamar ajax.php buena función de PHP
- función de PHP en el archivo .inc.php para generar el código HTML para que se muestren las imágenes
Nota: tendrá que adaptar el código a sus necesidades.