Volvamos en el meollo de las cosas con este primer módulo que muestra la fecha y la hora.

Este módulo es muy simple, completamente en JavaScript. El módulo se llama: Reloj

index.php

En la página de índice, por lo que este es el <div> con el reloj Identificación del que nos interesa.

  <Div id = "reloj"> </ div>

La etiqueta se queda vacía, y se «llena» por medio de la función de JavaScript.

style.css

Al igual que con todos los módulos, se debe crear un div cuyo id es el nombre del módulo (aquí reloj) que contendrá la información a mostrar y, a continuación, establezer su tamaño y posición en la pantalla.

  / * Reloj * /

 div # reloj
 {
   derecha: 0px;
   top: 0px;
   position: absolute;
   overflow: hidden;
   background-color: RGBA (0, 0, 0, 1);
   Color: #FFF;
   font-weight: bold;
   text-align: center;
 }

 div.horloge_heure
 {
   font-size: 180px;
   background-color: RGBA (0, 0, 0, 1);
 }

 div.horloge_date
 {
   font-size: 50px;
   background-color: RGBA (0, 0, 0, 1);
 }

 span.horloge_grey
 {
   color: # 888;
   font-size: heredar;
 }

javascript.js

Esta función simple se basa en la hora del sistema, y muestra las horas y 24 minutos más o menos, a continuación, justo por debajo del día a día que en el mes, el nombre de mes y año .

 horloge_timeout var;

 function horloge ()
 {
   dows = [ "Domingo", "Lunes", "Martes", "Miércoles", "Jueves", "Viernes", "Sábado"];
   meses = [ "Enero" ,"Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre" "Diciembre"];

now          = new Date;
  heure        = now.getHours();
  min          = now.getMinutes();
  sec          = now.getSeconds();
  jour_semaine = dows[now.getDay()];
  jour         = now.getDate();
  mois         = mois[now.getMonth()];
  annee        = now.getFullYear();

  if (sec < 10){sec0 = "0";}else{sec0 = "";}
  if (min < 10){min0 = "0";}else{min0 = "";}
  if (heure < 10){heure0 = "0";}else{heure0 = "";}

  horloge_heure   = heure + ":" + min0 + min;
  horloge_date    = "<span class='horloge_grey'>" + jour_semaine + "</span> " + jour + " " + mois + " <span class='horloge_grey'>" + annee + "</span>";
  horloge_content = "<div class='horloge_heure'>" + horloge_heure + "</div><div class='horloge_date'>" + horloge_date + "</div>";

  $("#horloge").html(horloge_content);

  horloge_timeout = setTimeout("horloge()", 1000);

  }

Cada 1000 ms, o cada segundo, el contenido del div reloj se actualiza con el contenido de la horloge_content variable. También puede mostrar segundos en la pantalla si lo desea 

Esto en cuanto a este primer módulo muy simple, pero entre los más útiles para visualizar en la pantalla

En cuanto a la tierra, se puede ver la posición de las ciudades y una gran cantidad de información, incluyendo el clima. También es posible representar nuestros satélites artificiales con su posición real, órbita, etc …

xplanet

instalación

Xplanet es una aplicación que ha sido … muy larga! Está disponible en los repositorios de Debian, por lo que instalarlo, es simple:

  apt-get install xplanet

los mapas

La base de Xplanet contiene un «mapa» para cada planeta (una imagen que representa la superficie). Se puede, y es recomedable descargar mapas mejor en alta definición. También es interesante  descargar un mapa dedicado a la parte de la superficie de la tierra que no se expone al sol (noche), de lo contrario será simplemente Xplanet el mapa de la jornada.

Aquí se pueden encontrar muchos mapas de la tierra y todos los otros planetas del sistema solar:

• http://planetpixelemporium.com/planets.html
• http://flatplanet.sourceforge.net/maps/natural.html

Xplanet trabajará para crear una combinación de las dos imágenes para representar la parte soleada de la tierra y la parte en  oscuridad.

La generación de imágenes

Xplanet es en última instancia un generador de imágenes que representa las estrellas en su estado en un momento T y desde cierto punto de vista. Todo sucede en la línea de comandos, y como se puede ver navegando por la página web Xplanet, hay cientos de opciones! Aquí veremos  la configuración que se utiliza para la pantalla.

De hecho,  genera dos imágenes diferentes, una para la tierra y otra para la luna. Aquí está el  archivo de configuración xplanet.conf:

  [Por defecto] # Los valores de esta sección se aplican a todos los cuerpos menos que se modifique a continuación.

 arc_color = white
 arc_thickness = 1
 bump_scale = 3
 cloud_gamma = 1
 cloud_ssec = false
 cloud_threshold = 90
 color = {255,255,255}   # caja de color de reserva en un mapa de imagen no se encuentra
 draw_orbit = false
 grid = false
 grid1 = 6
 Grid2 = 15
 magnify = 1
 marker_color = rojo
 max_radius_for_label = 3
 min_radius_for_label = 0,01
 min_radius_for_markers = 40
 orbit = {-. 5, .5,2}
 orbit_color = {} # 255255255 color para la órbita
 random_origin = true
 random_target = true
 sombreado = 30 # 0 = negro, 100 = Sami tiene dayside
 text_color = {255,0,0} # color del texto (marcadores de etiquetas y Cuerpo)
 twilight = 6 # mezclan las imágenes para el día y la noche
                                 # Dentro de este píxel Muchos grados de
                                 # El terminador

 [sun]
 "Sun"
 color = {255 255 166}
 map = / home / Jarvis / xplanet / img / sunmap.jpg
 max_radius_for_label = 0
 sombra = 100

 [earth]
 "Earth"
 color = {28, 82, 110}
 map = / home / Jarvis / xplanet / img / land_ocean_ice_2048.jpg
 night_map = / home / Jarvis / xplanet / img / noche dark.jpg
 cloud_map = / home / Jarvis / xplanet / img / clouds_2048.jpg
 min_radius_for_label = 0

 [moon]
 "Moon"
 color = {100, 100, 100}
 map = / home / Jarvis / xplanet / img / moonmap2k.jpg

En el [la tierra] por la tierra y [Luna] a la luna,  es  interesante que vea las rutas de acceso a los mapas para el día de «mapa» y «night_map» modo noche.

Las nubes

También vimos el mapa «cloud_map» por la tierra. De hecho, Xplanet permite emular una imagen o mapa de las nubes en la tierra para obtener un resultado muy realiza con la cobertura de nubes visto casi en tiempo real.

Se puede conseguir esta tarjeta nubes o «cloud_map» en diversos sitios. Según las fuentes, que se actualizan entre 1 y 10 veces al día: http://xplanet.sourceforge.net/clouds.php

Debe ser un pequeño script que descarga el último mapa publicado nubes. Una tarea cron se encargará de ejecutar el script a intervalos regulares. Xplanet_cloud.sh es mi guión:

  #! / Bin / sh

 Pat = / home / Jarvis / xplanet / img / # destino de la imagen descargada
 tmp = $ pat nombre de archivo temporal # "tmp_clouds_2048.jpg"
 img = $ pat "clouds_2048.jpg" # nombre del archivo final

 rm $ tmp # borrar el archivo temporal de edad

 $ Wget -O imagen tmp # http://xplanet.sourceforge.net/clouds/clouds_2048.jpg descargado

 if [-f $ tmp];  a continuación, # si el archivo se ha descargado ...
   mogrify -resize 2000x1000 $ tmp # redimenssionne la imagen descargada de manera que sea la misma resolución que el mapa "día"
   $ Mv tmp $ img # sustituye a la antigua imagen con el nuevo
   $ Pat Jarvis chown -R www-data && chmod -R 775 $ pat # cambia los permisos en el archivo
 fi

Recuerde hacer el script ejecutable con chmod 755 xplanet_cloud.sh 

Y eso es tarea CRON asociado que se pueden configurar con el comando crontab -e:

  0 * / 4 * * * /home/jarvis/xplanet/xplanet_cloud.sh

Cada 4 horas, la secuencia de comandos se ejecuta y un nuevo mapa se descargan las nubes 

generar imágenes

El último paso, se inicia xplanet iniciar el sistema para generar imágenes de la tierra y la luna cada N minutos,lo cual se consigue conun pequeño script llamado  Xplanet.sh  que contiene dos controles (uno para la imagen de la tierra y para la imagen de la luna).

Este es el contenido del script:

  #! / Bin / sh

 TIERRA #
 xplanet -conf /home/jarvis/xplanet/xplanet.conf -output /home/jarvis/xplanet/img/xplanet_earth.png -wait 120 tierra -cuerpo -latitud -Longitude 40 10 500x500 y -geometry

 LUNA #
 xplanet -conf /home/jarvis/xplanet/xplanet.conf -output /home/jarvis/xplanet/img/xplanet_moon.png -wait 600 -cuerpo luna -geometry 250x250 y

Veamos al comando xplanet ,el cual soporta los siguientes parámetros:

• -conf: xplanet.conf el archivo de configuración
• -output: el archivo de salida
• -wait: el intervalo de tiempo, en segundos, de espera entre cada uno de generación de imágenes (120 segundos o 2 minutos a la tierra, para poder observar el sol durante todo el día 600 segundos o 10 minutos son. suficiente para la luna, cuya fase varía muy lentamente).
• -cuerpo: nombre del cuerpo celeste para ver, establecido en el archivo de configuración
• -geometry: tamaño en píxeles, de la imagen generada
• -latitud y -Longitude: fija el punto central de la imagen de la tierra. Al elegir la latitud y longitud 40 10, la imagen será más o menos centrado en Italia. No vemos ninguna afinidad particular con este país, es simplemente un ángulo que revela Francia y en Europa, el conjunto de África, gran parte de Rusia, las Américas y el polo norte es bastante! También puede elegir la vista del sol, por ejemplo, para ver siempre el lado soleado de la tierra, que recorrerá un poco y no siempre ver la misma parte del globo 

Entonces sólo tiene que colocar la secuencia de comandos en el directorio /etc/init.d y ejecutar el siguiente comando a ejecutar en cada inicio del sistema:

  update-rc.d xplanet.sh defaults

Hemos hecho la mitad del trabajo  Cada 2 minutos, se genera a partir de la tierra con un mapa nubes actualizados cada 4 horas una nueva imagen (500 x 500 píxeles). Cada 10 minutos, la imagen de la fase de la luna (250 x 250 píxeles) se actualiza.

index.php

En la página de índice, se añaden dos etiquetas <div>, cada uno con una etiqueta <img>, uno para la tierra y otro para la luna.

 <div id="earth"><img id="img_earth" src="pict/blank.png"></div>
  <div id="moon"><img id="img_moon" src="pict/blank.png"></div>

Para evitar mostrar un error al cargar la página se debe inicializar las fuentes de <img> etiquetas con un blank.png imagen en blanco.

style.css

La hoja de estilo para este módulo es muy simple, ya que sólo tiene que definir la posición y el tamaño de la div que contiene las imágenes que se muestran.

/* tierra */

div#earth
{
  width             : 500px;
  height            : 500px;
  left              : 0px;
  top               : 0px;
  position          : absolute;
  overflow          : hidden;
  background-color  : rgba(0, 0, 0, 1);
}

/* luna */

div#moon
{
  width             : 250px;
  height            : 250px;
  left              : 500px;
  top               : 0px;
  position          : absolute;
  overflow          : hidden;
  background-color  : rgba(0, 0, 0, 1);
}

javascript.js

Es simplemente para reemplazar la imagen mostrada por la nueva imagen generada. El problema es que el nombre del archivo no cambia, el navegador tenderá a mostrar la imagen que ya está almacenada en su caché. Para superar este problema vamos a añadir una marca de tiempo (fecha y hora expresada en número de segundos transcurridos desde el primer Janver 1970) en la ruta de la imagen. De esta manera, el navegador va a pensar que se trata de una nueva imagen cada vez.

En aras de la fluidez, también es necesario para precargar las imágenes antes de sustituto en la pantalla. y la imagen se evita cargar cuanto a su pantalla.

  / * * Xplanet /

 xplanet_timeout var;

 function xplanet () {

 var now = new Date ().getTime ();

   / * * Carga previa de imágenes /
 img_earth var = $ ( "<img />").attr("src", "xplanet / img / xplanet_earth.png?" + now);
 img_moon var = $ ( "<img />").attr("src", "xplanet / img / xplanet_moon.png?" + now);

   / * Mostrar nuevas imágenes a la pantalla * /
 . $ ( "# Img_earth") attr ( "src", "xplanet / img / xplanet_earth.png?"+now ;
 $ ( "# Img_moon") attr ( "src", "xplanet / img / xplanet_moon.png?" + now );

 xplanet_timeout = setTimeout ( "xplanet ()", 120000);
 }

La función se ejecuta cada 120000ms (es decir, cada 2 minutos) que en última instancia se desplaza sol de la tierra y de la luna durante todo el día .

Este módulo es particularmente difícil porque es muy difícil de personalizar. De hecho, es el uso de «widgets» puestos a disposición por los sitios especializados que ofrecen opciones de configuración limitadas.

Reproductores

Al menos  tres sitios que ofrecen widgets de tiempo más o menos completa y más o menos bonita: my-meteo.fr , tameteo.com y meteocity.com

Todas las ofertas para personalizar la información que se muestra, el número de días pronosticar, colores de los elementos y estilos de iconos Una vez que las opciones seleccionadas, el sitio genera el código HTML para copiar / pegar en su página.

Aquí se  muestran algunos sites que ofrecen este tipo de servicios:

• my-meteo.fr
• tameteo.com
• meteocity.com

Las opciones propuestas por el widget de meteocity son un poco más amigables  . Aparte de la información sobre la humedad y el viento, el resto  de información es fácil de leer a distancia, pero vamos a tener que utilizar trucos para ocultar la información innecesaria .

index.php

Añadimos a nuestro archivo index.php una simple etiqueta <div> se deja vacío por ahora.

 <divv id = "meteo"> </ div>

Como todos los módulos de este dashscreen es una función de JavaScript que cargará insertar el contenido que se mostrará en el div del módulo.

style.css

Caso particular de este módulo,  no tiene la posibilidad de actuar directamente sobre el código CSS proporcionada por el sitio de tiempo. Así que sólo tenemos que colocar el div que contendrá información sobre el clima.

 / * El tiempo * /

 div # meteo

{
  right             : 0px;
  top               : 300px;
  position          : absolute;
  overflow          : hidden;
  background-color  : rgba(0, 0, 0, 1);
  color             : #FFF;
  font-weight       : bold;
  text-align        : center;
}

javascript.js

La función JavaScript de este módulo es feliz de enviar una petición AJAX e introduzca el resultado de la consulta en el div adecuado.

 / * El tiempo * /

 meteo_timeout var;

 función meteo ()
 {

$.ajax({
    async : false,
    type: "GET",
    url: "./ajax.php",
    data: "block=meteo",
    success: function(html){
      $("#meteo").html(html);
    }
  });

  meteo_timeout = setTimeout ( "Tiempo ()", 3.600.000);  }

la información del tiempo cada hora (cada ms 3600000) es más que suficiente.

inc.php

En este módulo necesitamos una función PHP que devuelve el código generado por el widget. Esto nos da una función muy sencilla en la que simplemente copiar / pegar el código HTML que ha generado el sitio Tiempo

 /////////////////////////////////////////////////
 // tiempo
 /////////////////////////////////////////////////

 function meteo () {
   $ Tiempo = 'pegar aquí el código HTML generado por el sitio de tiempo';
   return $ meteo;
 }

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:

 div # meteo_black

{
  right             : 0px;
  top               : 420px;
  width             : 600px;
  height            : 100px;
  position          : absolute;
  z-index           : 9999;
  background-color  : rgba(0, 0, 0, 1);
}

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..

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:

 / * * Ts3 /

div#ts3
{
  left              : 340px;
  bottom            : 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;
}

javascript.js

Una vez más, una aplicación AJAX fácil de recuperar información a mostrar.

 / * * 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);
 }

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($block == 'ts3'){
    echo 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 .

 /////////////////////////////////////////////////
 // TS3
 /////////////////////////////////////////////////

 function ts3 () {

    $host_ip    = '10.0.0.1';
    $host_port  = '30033';
    $socket     = 0;
    $socket     = @fsockopen($host_ip, $host_port, $errno, $errstr, 3);
    $html       = '';

    if($socket && !$errno){
      require_once("./TS3_PHP_Framework-1.1.12/libraries/TeamSpeak3/TeamSpeak3.php");
      $ts3_ServerInstance = TeamSpeak3::factory("serverquery://login:[email protected]:10011/");
      $ts3_VirtualServer  = $ts3_ServerInstance->serverGetById(1);

      $html .= '<img width="200px" src="pict/triton_ts3.png" style="margin-bottom : 10px;">';
      $html .= '<table cellspacing="0px" cellpadding="0px">';
      foreach($ts3_VirtualServer->clientList() as $client){
        if($client["client_unique_identifier"] == 'serveradmin'){continue;}
        $html .= '  <tr>';
        $html .= '    <td valign="middle">';
        $html .= '      <img style="width : 20px;" src="./TS3_PHP_Framework-1.1.12/images/viewer/'.$client->getIcon().'.png" alt="">';
        $html .= '    </td>';
        $html .= '    <td valign="middle">';
        $html .= '      '.htmlspecialchars($client);
        $html .= '    </td>';
        $html .= '  </tr>';
      }
      $html .= '</table>';
    }

    return $html;
  }

Este módulo es muy fácil de conseguir con la lib TeamSpeak 3 framework PHP 

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:

/* ping */

div#ping
{
  left              : 0px;
  bottom            : 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
{
  background-image  : url('pict/warning.gif');
  color             : #DD0000;;
}

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:

/* PING */

var ping_timeout;

function ping ()
{
  $.ajax({
    async : false,
    type: "GET",
    url: "./ajax.php",
    data: "block=ping",
    success: function(html){
      $("#ping").html(html);
    }
  });

  ping_timeout = setTimeout("ping()", 30000);
}

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 ($block == 'ping') {
     echo 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 

 /////////////////////////////////////////////////
   // 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 as $ host => $ host_data) {
       $Host_ip =$host_data [0];
       $Host_port=$ host_data [1];
       $socket= 0;
       $s[email protected] ($ host_ip, $ host_port, $ errno, $ errstr, 3);

 if($socket && !$errno){$hosts[$hostname] = 'up';}
      else{$hosts[$hostname] = 'down';}

 }  // 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($hosts as $hostname => $host_status){
      if($c == 0){$html .= '<tr>';}
      $html .= '<td class="ping ping_'.$host_status.'">'.$hostname.'</td>';
      $c++;
      if($c == 2){$c = 0; $html .= '</tr>';}
    }
    if($c != 0){$html .= '</tr>';}
    $html .= '</table>';

    return $html;
  }

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:

  /////////////////////////////////////////////////
   // PING
   /////////////////////////////////////////////////

   if ($block=='ping') {
     eco shell_exec ( 'php5 fork.php');  // fork.php es el archivo en el que se encuentra la función ping_fork ();
   }

Aquí la versión «fork» de la función de ping (), se puede utilizar directamente copiando un archivo fork.php:

 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 IF NO EXISTS hosts_status (nomb_sist_pral VARCHAR (10), host_status VARCHAR (5)); ');

   // Para cada máquina, hemos creado un proceso hijo

 foreach($hosts_ip as $host_name => $host){
    $pids[$host_name] = pcntl_fork();
    if(!$pids[$host_name]) {
      $socket = @fsockopen($host[0], $host[1], $errno, $errstr, 3);
      if($socket && !$errno){$status = 'up';}else{$status = 'down';}

 // esperamos hosts_status la tabla ya no está bloqueado por un acceso potencial competidor

 if($db->busyTimeout(5000)){
        $db->exec("INSERT INTO hosts_status VALUES ('$host_name', '$status');");
      }
      exit();
    }
  }

  // el proceso padre debe esperar hasta que todos los procesos se han completado hijo  

foreach($pids as $host_name => $pid){
    pcntl_waitpid($pid, $status, WUNTRACED);
  }

  $results = $db->query('select * from hosts_status;');

  $html  = '';
  $html .= '<table cellspacing="10px">';
  $c=0;
  while($host = $results->fetchArray(SQLITE3_ASSOC)){
    if($c == 0){$html .= '<tr>';}
    $html .= '<td class="ping ping_'.$host['host_status'].'">'.$host['host_name'].'</td>';
    $c++;
    if($c == 2){$c = 0; $html .= '</tr>';}
  }
  if($c != 0){$html .= '</tr>';}
  $html .= '</table>';

  $db->exec("DELETE FROM hosts_status;");

  return $html;
}

echo ping_fork();

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

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 in KB/s out
     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:

  ### 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 = 12345
 dst_dir = /home/Jarvis/ifstat
 dst_file = eth0.log

 nc -u -l $dst_port >> $dst_dir/$dst_file

• script de cliente para funcionar en su nc_ifstat_clt.sh gateway / router de:

 ### 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 = 12345
 dst_host = 10.0.0.2
 eth = eth0

nc_ifstat()
{
	while [ "true" ]
	do
  		ifstat -n -i $eth | nc -p $src_port -u $dst_host $dst_port
  		sleep 5
	done
}

case "$1" in
        stop)
		echo " Stoping ifstat for Jarvis..."
                killall ifstat
		killall nc
		;;
        start)
		echo " Starting ifstat for Jarvis..."
		nc_ifstat&
		exit 0	
                ;;
        *)
                exit 1
                ;;
esac

exit 0

 Para ejecutar el script en el arranque de la máquina, colocarlo en /etc/init.d continuación, ejecute el comando:

update-rc.d nom_du_script.sh defaults

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 ():

function imagickHisto ($max, $eth = '', $up_down = 'down') {

  $datas = parseData ("eth0.log", $up_down);

  $width            = 304; // anchura de la gráfica
  $height           = 100; // altura del gráfico
  $padding          = 1;
  $ticks            = 5;
  $background_color = '#000'; // color de fond
  $axes_color       = '#555'; // ejes de color 

  if($up_down == 'down'){
    $data_color       = '#1D1'; // carta de colores para descargar
  }
  else{
    $data_color       = '#D11'; //  gráficos en color para la carga
  }

  $nb_values        = $width - 2*$padding - 2;
  $max_value        = $height - 2*$padding - 4;

  $nb_datas         = sizeof($datas);
  $trim             = $nb_values - $nb_datas;

  if($trim < 0){$trim = 0;}

  $image = new Imagick();
  $image ->newImage( $width, $height, new ImagickPixel($background_color) );
  $draw  = new ImagickDraw();
  $draw->setStrokeColor( new ImagickPixel($axes_color) );

  $xx1    = $padding;
  $xy1    = $height - $padding - 1;
  $xx2    = $width - $padding - 1;
  $xy2    = $xy1;
  $yx1    = $xx1;
  $yy1    = $xy1;
  $yx2    = $yx1;
  $yy2    = $padding;
  $half_y = $height/2;
  $half_x = $width/2;

  $draw->line  ( $xx1, $xy1, $xx2, $xy2 );
  $draw->line  ( $yx1, $yy1, $yx2, $yy2 );

  $draw->line  ( $yx1, $yy2, $yx1+$ticks, $yy2 );
  $draw->line  ( $yx1, $half_y, $yx1+$ticks, $half_y );

  $draw->setStrokeColor( new ImagickPixel($data_color) );

  $first_x = $xx1 + 1 + $trim;
  $last_x  = $xx2 - 1;
  $first_y = $xy1 - 1;
  $last_y  = $yy2 + 1;

  for($i=0;$i<$nb_values;$i++){
    if(isset($datas[$i])){
      $value   = $datas[$i]*$max_value/$max;
      $value_y = $first_y - $value;
      $value_x = $first_x + $i;
      $draw->line  ( $value_x, $first_y, $value_x, $value_y );
    }
  }

  $image->drawImage( $draw );

  $text_draw = new ImagickDraw();
  $text_draw->setFillColor($axes_color);
  $text_draw->setFontSize( 12 );
  $image->annotateImage($text_draw, $half_x-20, $padding+10, 0, "$eth - $up_down");

  $image->setImageFormat( "png" );
  header( "Content-Type: image/png" );
  echo $image;
  exit;
}

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:

function parseData ($stat_file, $up_down) {
    $datas = array();
    if(filemtime($stat_file) < time()-10){return $datas;}
    $stats = fopen($stat_file, 'r');
    while (($line = fgets($stats)) !== false) {
      $explode_line = str_word_count($line, 1, "0123456789.");
      if($up_down == 'down') {
        $datas[]  = $explode_line[0];
      }
      else{
        $datas[]  = $explode_line[1];
      }
    }
    fclose($stats);
    $datas = array_slice($datas, -300);
    return $datas;
  }

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>:

 / * * Ifstat /

div#ifstat_oberon_up
{
  right             : 20px;
  bottom            : 20px;
  position          : absolute;
  overflow          : hidden;
  background-color  : rgba(0, 0, 0, 1);
}

div#ifstat_oberon_down
{
  right             : 340px;
  bottom            : 20px;
  position          : absolute;
  overflow          : hidden;
  background-color  : rgba(0, 0, 0, 1);
}

javascript.js

Una simple petición AJAX para recuperar la pantalla gráfica.

 / * * Ifstat /

var ifstat_timeout;

function ifstat () {

  var now             = new Date().getTime();

  var url_down = "ajax.php?block=ifstat&eth=wan&up_down=down&max=2000&hour="+now;
  var img_eth0_down = $("<img />").attr("src", url_eth0_down);
  $("#img_eth0_down").attr("src", url_eth0_down);

  var url_up   = "ajax.php?block=ifstat&eth=wan&up_down=up&max=150&hour="+now;
  var img_eth0_up = $("<img />").attr("src", url_eth0_up);
  $("#img_eth0_up").attr("src", url_eth0_up);

  ifstat_timeout = setTimeout("ifstat()", 5000);
}

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:

 /////////////////////////////////////////////////
 // ifstat
 /////////////////////////////////////////////////

  if($block == 'ifstat'){
    imagickHisto ($_REQUEST['max'], $_REQUEST['eth'], $_REQUEST['up_down']);
  }

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

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):

 #! / Bin / bash

 ### COMENZAR INIT INFO
 # Proporciona: nc_vpn_srv
 # Requirido-arrancar :
 # 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=12346
dst_dir=/home/jarvis/vpn
dst_file=vpn_oberon.log

nc_vpn()
{
  while [ "true" ]
  do
    nc -q 1 -u -l 12346 > $dst_dir/$dst_file < /dev/null
    sleep 5
  done
}

case "$1" in
        stop)
                echo " Stoping vpn for Jarvis..."
                killall vpn
                killall nc
                ;;
        start)
                echo " Starting vpn for Jarvis..."
                nc_vpn&
                exit 0
                ;;
        *)
                exit 1
                ;;
esac

exit 0

lado de la  puerta de enlace (cliente netcat):

 #!  / 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=12346
dst_host=10.0.0.1

nc_vpn()
{
        while [ "true" ]
        do
                last | grep ppp | grep "logged in" | nc -q 1 -p $src_port -u $dst_host $dst_port
                sleep 5
        done
}

case "$1" in
        stop)
                echo " Stoping vpn for Jarvis..."
                killall vpn
                killall nc
                ;;
        start)
                echo " Starting vpn for Jarvis..."
                nc_vpn&
                exit 0
                ;;
        *)
                exit 1
                ;;
esac

exit 0

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 

 / * * VPN /

div#vpn
{
  left              : 550px;
  bottom            : 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
{
  width : 20px;
  height : 20px;
}

javascript.js

Una simple petición AJAX para recuperar los datos a mostrar.

 / * * VPN /

 var vpn_timeout;

function vpn ()
{
  $.ajax({
    async : false,
    type: "GET",
    url: "./ajax.php",
    data: "block=vpn",
    success: function(html){
      $("#vpn").html(html);
    }
  });

  vpn_timeout = setTimeout("vpn()", 5000);
}

ajax.php

Nada específico para este módulo:

 /////////////////////////////////////////////////
   // VPN PGWP
   /////////////////////////////////////////////////

  if($block == 'vpn'){
    echo vpn();
  }

.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

 /////////////////////////////////////////////////
   // VPN PGWP
   /////////////////////////////////////////////////

function vpn () {

    $datas = vpn_parseData ("/home/jarvis/vpn/vpn_oberon.log");

    $html  = '';

    if(sizeof($datas) > 0){
      $html .= '<table cellspacing="0px">';
      foreach($datas as $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>';
    }

    return $html;
  }

  function vpn_parseData ($stat_file) {
    $datas = array();
    if(filemtime($stat_file) < time()-10){return $datas;}
    $stats = fopen($stat_file, 'r');
    while (($line = fgets($stats)) !== false) {
      $explode_line = str_word_count($line, 1, "0123456789.");
      $datas[]  = $explode_line;
    }
    fclose($stats);
    return $datas;
  }

Esto en cuanto a este último módulo es muy simple