Code Source des Modules de DashboardPi

Module xPlanet

Simplement trop long à détailler ici

Référer vous en bas de page pour les sources initiales du projet . Sources Xplanet

Module Météo

Page index.PHP

<!--SOURCE MÉTÉOCITY:-->
<?php
 <div id="cont_NjkyNjZ8NXwzfDR8NXwwMDAwMDB8MnxGRkZGRkZ8Y3wx"><div id="spa_NjkyNjZ8NXwzfDR8NXwwMDAwMDB8MnxGRkZGRkZ8Y3wx"><a id="a_NjkyNjZ8NXwzfDR8NXwwMDAwMDB8MnxGRkZGRkZ8Y3wx" href="http://www.meteocity.com/france/villeurbanne_v69266/" target="_blank" style="color:#333;text-decoration:none;">Météo Villeurbanne</a> ©<a href="http://www.meteocity.com">meteocity.com</a></div><script type="text/javascript" src="http://widget.meteocity.com/js/NjkyNjZ8NXwzfDR8NXwwMDAwMDB8MnxGRkZGRkZ8Y3wx"></script></div>
<!--SOURCE TAMETEO:-->
<!-- <div id="cont_e8e27925dfb8015a52d4fc58681c6604"><script type="text/javascript" async src="https://www.tameteo.com/wid_loader/e8e27925dfb8015a52d4fc58681c6604"></script></div> -->
<!-- <div id="cont_8b9d0fcc467c55c9ec1d6ffa4bd680d6"><script type="text/javascript" async src="https://www.tameteo.com/wid_loader/8b9d0fcc467c55c9ec1d6ffa4bd680d6"></script></div> -->
?>

Vous pouver utiliser d'autres sites qui permettent de générer du code pour les modules.
Ex: TAMETEO ou Metéo France.

Variante

Fichier meteo.CSS

/* meteo */
 
#meteo_h
{
	width			: 600px;
	height			: 215px;
	top				: 0px;
	left			: 0px;
	position		: absolute;
	overflow 		: hidden;
}

Module Google Traffic

Page index.HTML

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>My Traffic</title>
    <style>
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
        height: 100%;
      }
      /* Optional: Makes the sample page fill the window. */
      html, body {
       /* height: 100%; */
       height: 340px;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
      function initMap() {
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 11.55,
          center: {lat: 45.741261, lng: 4.887996} /* CARTE AGLO GENERALE */
          /*center: {lat: 45.759821, lng: 4.863008} /* CARTE AGLO LYON ARR */
         /* center: {lat: 45.764043, lng: 4.835659} */ /* CARTE VILLEURBANNE LYON 3 */
        });
 
        var trafficLayer = new google.maps.TrafficLayer();
        trafficLayer.setMap(map);
      }
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key="VOTRE API KEY"callback=initMap">
    </script>
  </body>
</html>

L'API KEY s'obtient depuis votre compte Google, auquel cas il vous faudra en créer un.

Option Maps

Doc Google
Vous pouvez afficher le traffic,les piste cylclable ou positionner un repère sur la carte.
Enlever les contrôles sur la carte.

/* Affichagedu traffic Autoroutier*/
        const trafficLayer = new google.maps.TrafficLayer();
        trafficLayer.setMap(map);
/*Affichage des piste Ciclables*/
		const bikeLayer = new google.maps.BicyclingLayer();
		bikeLayer.setMap(map);
 
/*Placer un repère sur la carte */		
		new google.maps.Marker({
		position: {lat: 49.7623659, lng: 5.941505} ,
		map,
		title: "Maison",
		});

/* Permet d'enlever les bouton type Street View et Zoom*/
		  disableDefaultUI: true,

Fichier traffic.CSS

/* log */
 
#traffic
{
	top				: 0px;
	left			: 0px;
	position		: absolute;
	weight                  : 650px;
        height			: 300px; 
}

Module Diaporama

Page index.HTML

<script src='./modules/diaporama/diaporama.js'></script>
 
<?php
 
//--------------------------------
// DIAPORAMA
// Il s'agit ici d'afficher des images toutes les x secondes.
//--------------------------------
 
 
// Récupération du répertoire de stockage des photos
if(!empty($_GET['dossier'])) {
	$dir = $_GET['dossier'];
} else {
	$dir = './img/';
}
 
// Récupération du délai d'affichage de chaque photo
if(!empty($_GET['delai'])) {
	$delai = $_GET['delai'];
} else {
	$delai = 60; // 60 secondes par défaut
}
 
// liste des extensions images affichables
$types = '*.{gif,jpg,jpeg,JPG,png}';
 
// récupération des fichiers associés dans un tableau
// ne pas oublier GLOB_BRACE qui permet de lister plusieurs patterns de recherche !
$diapo=glob($dir.$types, GLOB_BRACE);
// Mise à jour des chemins d'accès relatifs
$diapo=str_replace("./", "./modules/diaporama/", $diapo);
// si on veut trier le tableau dans l'ordre naturel
// = 10 après 2 et pas avant !
//usort($diapo, "strnatcmp");
 
// on compte les images à afficher
$nb=count($diapo);
 
// affichage des images
$img=0;
echo '<img width="100%" src="'.$diapo[0].'" alt="diaporama" />';
echo '<ul style="display:none">';
while ($img < $nb) {
    echo '<li>'.$diapo[$img].'</li>';
    $img++;
}
echo '</ul>';
?>
 
<script>
window.monDiaporama = diaporama();
</script>

Fichier diaporama.CSS

/* diaporama */
 
#diaporama {
  height: 580px;
  width: 520px;
  left: 0px;
  top: 0px;
  position: absolute;
  background-color: transparent;
  overflow: hidden;
  position: relative;
  padding:0px;
  margin: 0px;
  border-radius: 12px;
  box-shadow: 1px -1px 0 rgba(0, 0, 0, 0);
}
.swipe-wrap {
    overflow: hidden;
    position: relative;
}
.swipe-wrap div {
    float:left;
    margin: auto;
    position: relative;
}
 
img {
    border-radius: 12px;
}

Fichier diaporama.JS

function diaporama() {
 
// 'tab' est un tableau contenant les objets JavaScript
// correspondants aux elements <li> de l'element <div>
// definissant le slideshow
var tab;
 
// 'image' est l'objet JavaScript correspondant a
// l'element <img> de l'element <div> definissant
// le slideshow
var image;
 
// 'index' est l'indice de l'element du tableau 'tab'
// a utiliser pour afficher la prochaine image du
// slideshow
var index;
 
// Affiche la nouvelle image dans l'objet 'image' et
// incremente la valeur de 'index'
//
function next() {
	if ( index == tab.length )
		index = 0;
	image.src = tab[index].innerHTML;
	index++;
}
 
// le corps de la fonction :
// - initialise la variable globale 'image' a l'objet
//   JavaScript correspondant a l'element <img> de
//   l'element <div> definissant le slideshow
// - affiche la premiere image dans l'objet 'image' et
//   lance les appels periodiques a la fonction 'next'
//   a l'aide de 'setInterval'
// 
 
var div = document.getElementById('diaporama');
tab = div.getElementsByTagName('li');
index = 1;
image = div.getElementsByTagName('img')[0];
image.src = tab[0].innerHTML;
setInterval(next,60000);
 
}

Module Flux RSS

Fichier index.PHP

<?php
 
	// Récupération du flux rss à afficher via config.json ou une valeur par défaut (lemonde.fr ici)
	if(!empty($_GET['url'])) {
		$url = $_GET['url'];
	} else {
		$url = 'http://www.lemonde.fr/rss/une.xml';
	}
 
	// Récupération du nb d'articles à afficher via config.json ou une valeur par défaut
	if(!empty($_GET['nb_items'])) {
		$nb_items_a_afficher = $_GET['nb_items'];
	} else {
		$nb_items_a_afficher = 6;
	}
 
	// Gestion de la hauteur des items en fonction de leur nombres (en %)
	$hauteur_items = round((95 / $nb_items_a_afficher), 0);
	echo '<style type="text/css">.rss_item { height: '.$hauteur_items.'%; }</style>';
 
	// Gestion d'une image logo du flux rss lu
    $domain = parse_url($url, PHP_URL_HOST);			// Extraction du nom de domaine du flux rss
    if($domain{3} == ".") {								// Suppression du www. si besoin
    	$domain = substr($domain, 4);
    }
    $domain = substr($domain, 0, strpos($domain, '.'));	// Suppression du .extension
    $logo = $domain.'.png';								// Création du nom du logo à associer au flux rss
    if(!file_exists($logo)){							// Remplacement par un logo standard si le fichier n'existe pas
    	$logo = 'rss.png';
    }
    echo '<img src="./modules/rss/'.$logo.'" title="Rss" alt="Rss">';
 
	// Récupération des articles Rss
	$rss = @simplexml_load_file($url);
	$i = 0;
	foreach($rss->channel->item as $item) {
		if($i == $nb_items_a_afficher) break;
		$i++;
        echo '<div class="rss_item">';
        echo '<div class="rss_titre">';
        echo '<a href="'.$item->link.'" title="'.$item->title.'">'.$item->title.'</a>';
        echo '</div>';
        echo '<div class="rss_texte">'.strip_tags($item->description).'</div>';
        echo '</div>';
	}
 
?>

Fichier rss.CSS

/* rss */
 
#rss
{
	top				: 0px;
	left			: 0px;
	position		: absolute;
	background-color: rgba(0, 0, 0, 1);
}
 
.rss_item
{
	margin-left		: 75px;
	padding-top     : 5px;
	border-bottom	: 1px dotted white;
	overflow		: hidden;
}
 
.rss_texte
{
	color			: #888;
	text-align      : justify;
	padding-left	: 6px;
	padding-top		: 6px;
}
 
.rss_titre
{
	padding-left	: 6px;
}
 
#rss img
{
	width			: 75px;
	height			: 75px;
	position		: absolute;
	top				: 0px;
	left			: 0px;
}

Module RRDTool Conso Internet

Page index.HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>ModuleGraph</title>
 
<script language="javascript">
function reloadIt()
{
frm=document.getElementsByName("iframe_1")[0];//we get the iframe object
frm.src=frm.src;//or you can set the src to a new src
setTimeout("reloadIt()",15000);//the function will run every 10 seconds
}
 
function reloadIt2()
{
frm1=document.getElementsByName("iframe_2")[0];//we get the iframe object
frm1.src=frm1.src;//or you can set the src to a new src
setTimeout("reloadIt2()",15000);//the function will run every 20 seconds
}
 
</script>
 
</head>
<body onload="reloadIt();reloadIt2();">
 
<iframe id="iframe_1" src="./modules/graph/wan_graph.png?:embed=yes&:refresh=yes" style="width:565px;height:130px;" scrolling="no" marginwidth="0" marginheight="0" frameborder="0"></iframe>
 
<iframe id="iframe_2" src="./modules/graph/wan_graph+3.png?:embed=yes&:refresh=yes" style="width:450px;height:130px;" scrolling="no" marginwidth="0" marginheight="0" frameborder="0"></iframe>
 
</html>

La fonction iframe dans la page permet de rafraîchir uniquement le fichier PNG générer
par le script si dessous, ceci évite que l'image ne reste figée.

Fichier graph.CSS

/* graph */
 
#graph
{
  height: 130px;
  width: 1025px;
  left             : 0px;
  top            : 0px;
  position          : absolute;
  background-color  : black;
}

Script create-graph.sh qui génère les graphique, à faire exécuter dans Cron toutes les 2 minutes.

##############################################
#Creation de Graphique pour traffic Internet #
##############################################
####################################
#   Script php create graph V1.3   #
#  Powered By Sylvain VALLDAURA    #
#    For DashboardPi Modules       #
####################################

#!/bin/bash
#Repertoire de travail
cd /var/www/html/dashboard/modules/graph/ 
##Supression des anciens fichiers de graph
rm -rf *.png
## Graph FW for last 24 hours 
/usr/bin/rrdtool graph wan_graph.png \
--imgformat=PNG \
--start='-86400' \
--end='-60' \
--title='⚓︎ Debit du Trafic Internet RED/SFR 100Mo Fibre - WAN vers LAN /24h' \
--rigid \
--base='1000' \
--height='120' \
--width='750' \
--alt-autoscale \
--vertical-label='bits par seconde' \
--slope-mode \
--color "BACK#000000" \
--color "FONT#FFFFFF" \
--color "CANVAS#000000" \
--font TITLE:12: \
--font AXIS:8: \
--font LEGEND:10: \
--font UNIT:8: \
DEF:a='/media/NFS/RRA/zyxell_usg20_traffic_in_128.rrd':'traffic_in':AVERAGE \
DEF:b='/media/NFS/RRA/zyxell_usg20_traffic_in_128.rrd':'traffic_in':MAX \
DEF:c='/media/NFS/RRA/zyxell_usg20_traffic_in_128.rrd':'traffic_out':AVERAGE \
DEF:d='/media/NFS/RRA/zyxell_usg20_traffic_in_128.rrd':'traffic_out':MAX \
CDEF:cdefa='a,8,*' \
CDEF:cdefe='b,8,*' \
CDEF:cdeff='c,8,*,-1,*' \
CDEF:cdefg='c,8,*' \
CDEF:cdefj='d,8,*,-1,*' \
AREA:cdefa#FFFFFFFF:'Trafic Entrant'  \
GPRINT:cdefa:LAST:'   Current\:%8.2lf%s'  \
GPRINT:cdefa:AVERAGE:'Average\:%8.2lf%s'  \
GPRINT:cdefa:MAX:'Maximum\:%8.2lf%s'  \
LINE1:cdefe#005D57FF:'Peak Usage\n'  \
AREA:cdeff#00A0FF99:'Trafic Sortant'  \
GPRINT:cdefg:LAST:'  Current\:%8.2lf%s'  \
GPRINT:cdefg:AVERAGE:'Average\:%8.2lf%s'  \
GPRINT:cdefg:MAX:'Maximum\:%8.2lf%s'  \
LINE1:cdefj#0000AAFF:'Peak Usage\n'  \
COMMENT:' \n'  \
## resize de limage png
mogrify -resize 450x130 wan_graph.png

##AREA:cdefa#00FF0099:'Trafic Entrant'  \ ORIGINAL

### Graph FW for last 3 hours 
/usr/bin/rrdtool graph wan_graph+3.png \
--imgformat=PNG \
--start='-10800' \
--end='-60' \
--title='⚓︎ Débit du Trafic Internet RED/SFR 100Mo Fibre - WAN vers LAN /3h' \
--rigid \
--base='1000' \
--height='120' \
--width='750' \
--alt-autoscale \
--vertical-label='bits par seconde' \
--slope-mode \
--color "BACK#000000" \
--color "FONT#FFFFFF" \
--color "CANVAS#000000" \
--font TITLE:12: \
--font AXIS:8: \
--font LEGEND:10: \
--font UNIT:8: \
DEF:a='/media/NFS/RRA/zyxell_usg20_traffic_in_128.rrd':'traffic_out':AVERAGE \
DEF:b='/media/NFS/RRA/zyxell_usg20_traffic_in_128.rrd':'traffic_out':MAX \
DEF:c='/media/NFS/RRA/zyxell_usg20_traffic_in_128.rrd':'traffic_in':AVERAGE \
DEF:d='/media/NFS/RRA/zyxell_usg20_traffic_in_128.rrd':'traffic_in':MAX \
CDEF:cdefa='a,8,*' \
CDEF:cdefe='b,8,*' \
CDEF:cdeff='c,8,*,-1,*' \
CDEF:cdefg='c,8,*' \
CDEF:cdefj='d,8,*,-1,*' \
AREA:cdefa#FFFFFFFF:'Trafic Entrant'  \
GPRINT:cdefa:LAST:'   Current\:%8.2lf%s'  \
GPRINT:cdefa:AVERAGE:'Average\:%8.2lf%s'  \
GPRINT:cdefa:MAX:'Maximum\:%8.2lf%s'  \
LINE1:cdefe#005D57FF:'Peak Usage\n'  \
AREA:cdeff#00A0FF99:'Trafic Sortant'  \
GPRINT:cdefg:LAST:'  Current\:%8.2lf%s'  \
GPRINT:cdefg:AVERAGE:'Average\:%8.2lf%s'  \
GPRINT:cdefg:MAX:'Maximum\:%8.2lf%s'  \
LINE1:cdefj#0000AAFF:'Peak Usage\n'  \
COMMENT:' \n'  \

## resize de limage png
mogrify -resize 450x130 wan_graph+3.png
chmod 755 /var/www/html/dashboard/modules/graph/*.png

##############################################
#Script de suppression de residu de PNG Graph#
##############################################
chmod 755 *.png~
rm -rf *.png~
chmod 755 *.png~~
rm -rf *.png~~
chmod 755 *.png~~~
rm -rf *.png~~~
chmod 755 *.png~~~~
rm -rf *.png~~~~
chmod 755 *.png~~~~~
rm -rf *.png~~~~~
chmod 755 *.png~~~~~~
rm -rf *.png~~~~~~

/media/NFS/RRA/

Est le point de montage des sources rrd du serveur Cacti distant.
Vous pouvez néanmoins le faire tourner en local sur le Dashboard, mais ceci affaiblit considérablement ces ressources.
Dashboard peut s'avérer gourmand en ressource selon le nombre de Module voulu.

Module Infra

Page index.PHP

<?php
####################################
#   Script php sonde infra V1.3    #
#  Powered By Sylvain VALLDAURA    #
#    For DashboardPi Modules       #
####################################

#Declaration des port à sonder

#Port DNS
$port0="53";
#Port SMB over Ip
$port1="445";
#Port WEB
$port2="80";
#Port WEB ALT
$port3="81";
 
#Declaration des ip a sonder

#IP GOOGLE DNS
$host0="8.8.8.8";
#IP GANDAL PX4R DLNA
$host1="192.168.0.--";
#IP TP-LINK IP AC730
$host2="192.168.0.--";
#IP ZYWALL USG20
$host3="192.168.0.--";
#IP RAZORBACKPI
$host4="192.168.0.--";
#IP DELL 1135
$host9="192.168.0.--";
#SWITCH NETGEAR
$host10="192.168.0.--";
 
echo '<center>';
// Test d'ouverture du port sur DNS GOOGLE pendant 1 seconde
	$socket = 0;
	$socket = @fsockopen($host0, $port0, $errno, $errstr, 1);
	// Si OK...
	if($socket && !$errno) {
echo '<img src="./modules/infra/internet-ok.png">&nbsp&nbsp';
} else {
echo '<img src="./modules/infra/internet-no.png">&nbsp&nbsp';
		}
 
// Test d'ouverture du port sur le FIREWALL pendant 1 seconde
	$socket = 0;
	$socket = @fsockopen($host3, $port3, $errno, $errstr, 1);
	// Si OK...
	if($socket && !$errno) {
echo '<img src="./modules/infra/firewall-ok.png">&nbsp&nbsp';
} else {
echo '<img src="./modules/infra/firewall-no.png">&nbsp&nbsp';
		}
 
// Test d'ouverture du port sur le NETGEAR pendant 1 seconde
	$socket = 0;
	$socket = @fsockopen($host10, $port2, $errno, $errstr, 1);
	// Si OK...
	if($socket && !$errno) {
echo '<img src="./modules/infra/netgear-ok.png">&nbsp&nbsp';
} else {
echo '<img src="./modules/infra/netgear-no.png">&nbsp&nbsp';
		}		
 
// Test du ping sur  la Borne WIFI pour 1 Saut
exec("ping -c 1 " . $host2, $output2, $result2);
if ($result2 == 0)
echo '<img src="./modules/infra/wifi-ok.png">&nbsp&nbsp';
else
echo '<img src="./modules/infra/wifi-no.png">&nbsp&nbsp';
 
// Test d'ouverture du port sur GORMAN pendant 1 seconde
	$socket = 0;
	$socket = @fsockopen($host1, $port1, $errno, $errstr, 1);
	// Si OK...
	if($socket && !$errno) {
echo '<img src="./modules/infra/dlna-ok.png">&nbsp&nbsp';
} else {
echo '<img src="./modules/infra/dlna-no.png">&nbsp&nbsp';
		}
 
// Test d'ouverture du port sur RAZORBACK PI pendant 1 seconde
	$socket = 0;
	$socket = @fsockopen($host4, $port2, $errno, $errstr, 1);
	// Si OK...
	if($socket && !$errno) {
echo '<img src="./modules/infra/rpi1-ok.png">&nbsp&nbsp';
} else {
echo '<img src="./modules/infra/rpi1-no.png">&nbsp&nbsp';
		}
 
// Test d'ouverture du port sur la DELL 1135 pendant 1 seconde
	$socket = 0;
	$socket = @fsockopen($host9, $port2, $errno, $errstr, 1);
	// Si OK...
	if($socket && !$errno) {
echo '<img src="./modules/infra/print-ok.png">&nbsp&nbsp';
} else {
echo '<img src="./modules/infra/print-no.png">&nbsp&nbsp';
		}
echo '</center>';		
 
?>

Ici j'utilise 2 méthode pour sonder les appliances le PING & FSOCKOPEN.
Le ping fait beaucoup ramer le RASPBERRY donc je l'utilise quand certaines aplliances le refuse explicitement. (Protection)

Fichier infra.CSS

/* infra */
 
#infra
{
  height: 55px;
  width: 540px;
  left             : 0px;
  top            : 0px;
  position          : absolute;
  background-color  : black;
}

Module Domoticz

Page index.HTML

<link href="http://fonts.googleapis.com/css?family=Orbitron:700" rel="stylesheet" type="text/css">
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<style>
body {
	background: #000;
}
 
div#cnt {
	background: #FF00FF;
	width: 990px;
    margin: 0 auto;
    text-align: center;
}
 
 
#frame {
	float: left;
	margin: 0px;
	padding: 0px 2px 0px 2px;
}
 
#label_lg {
	font-family: arial;
	font-weight: normal;
	color: #999;
	font-size: 17px;
	margin-top: -20px;
	height: 25px;
	line-height: 10px;
}
 
#itempIN {
	font-family: Orbitron, serif;
	font-weight: bold;
	width: 570px;
	padding: 5px;
	border: 1px solid #666;
	height: 217px;	
	line-height: 210px; 
	font-size: 180px;	
	color: darkorange;
	margin: 0px ;
}
 
#ihi, #ilow, #ohi, #ihum, #astat, #astatw1, #astatw2, #otemp, #wtemp, #crte,
#ohi1, #ohi2, #rain, #ohum, #ocld, #etmp, #itmp, #otxt3, #ctime, #cycb, #ctemp, #cyce, 
#tmpb, #tmpe, #tmpc, #crte, #ctme, #wind, #state, #Co2,
#ctmep, #sgas, #mode, #estate {
	font-family: Orbitron, serif;
	font-weight: bold;
	width: 162px;
	padding: 10px;
	border: 1px solid #666;
	height: 45px;
	line-height: 45px; 		
	font-size: 90px;
	color: #FFFFFF;
}
 
#ctime, #cycb, #cyce, #tmpb, #tmpe, #tmpc, #crte, #ctme, #ohi1, #ohi2,
#rain, #ohum, #ocld, #itmp, #etmp, #otxt3, #otemp, #wtemp, #wind, #astat, #awatt, 
#astatw1, #astatw2, #state, #estate, #ctmep, #sgas, #mode, #Co2{
	height: 45px;
	line-height: 45px;
	color: #FFFFFF;
}
 
#state, #estate, #crte, #wind { 
	width: 184px; 
}
#Co2 { 
	width: 184px; 
}
#etmp { 
	width: 560px; 
	font-size: 40px;
	line-height: 35px;
	color: yellow;
} 
#itmp { 
	width: 560px; 
	font-size: 40px;
	line-height: 35px;
	color: #0066cc;
}
#otxt3 { 
	width: 455px; 
	font-size: 40px;
	line-height: 55px;
	color: white;
}
 
#al { 
	margin-left: -35px; 
	margin-top: 55px; 
	width: 1050px;height: 570px;	
}
 
</style>
 
<div id="cnt">
	<div style="margin-bottom:5px;">
		<div>
			<div>
				<div id="frame">
					<div id="ohum" style="color:white;font-size:20px;"><img src="./modules/sensor/Humid.png"/>&nbsp <?php $bme280ext = `curl -s "http://IP_SERVEUR _DOMOTICZ:8088/json.htm?type=devices&rid=12" | grep 'Humidity' | sed -e "s/[,]//g" | cut -c21-25 | cut -c2-5`;  echo substr($bme280ext, 0, -10); ?> %Hr</div>
					<div id="label_lg"></div>
					<div id="ihum" style="font-size:20px;"><img src="./modules/sensor/Humid.png"/>&nbsp <?php $bme280int = `curl -s "http://IP_SERVEUR _DOMOTICZ:8088/json.htm?type=devices&rid=6" | grep 'Humidity' | cut -c22-25 | cut -c2-5`; echo substr($bme280int, 0, -10); ?> %Hr</div>
					<div id="label_lg"></div>
				</div>
				<div id="frame">
					<div id="etmp"><img src="./modules/sensor/Thermo-gauge.png"/>&nbsp <?php $bme280ext = `curl -s "http://IP_SERVEUR _DOMOTICZ:8088/json.htm?type=devices&rid=12" | grep 'Data' | cut -c20-24`; echo substr($bme280ext, 0, -2); ?>°C <img src="./modules/sensor/Foret.png"/></div>
					<div id="label_lg">Température Exterieur</div>
					<div id="itmp"><img src="./modules/sensor/Thermo-gauge.png"/>&nbsp <?php $bme280maiz = `curl -s "http://IP_SERVEUR _DOMOTICZ:8088/json.htm?type=devices&rid=6" | grep 'Temp' | cut -c18-22`; echo substr($bme280maiz, 6, -5); ?>°C <img src="./modules/sensor/Maison.png"/></div>
					<div id="label_lg">Température Domicile</div>
				</div>
				<div id="frame">
					<div id="astatw1" style="font-size:20px;"><img src="./modules/sensor/Baro.png"/>&nbsp <?php $bme280ext = `curl -s "http://IP_SERVEUR _DOMOTICZ:8088/json.htm?type=devices&rid=12" | grep 'Barometer' | cut -c23-27`; echo "$bme280ext"; ?>hPa</div>
					<div id="label_lg"></div>
					<div id="astatw2" style="font-size:20px;"><img src="./modules/sensor/Baro.png"/>&nbsp <?php $bme280int = `curl -s "http://IP_SERVEUR _DOMOTICZ:8088/json.htm?type=devices&rid=6" | grep 'Barometer' | cut -c23-27`; echo "$bme280int"; ?>hPa</div>
					<div id="label_lg"></div>
				</div>
 
				<div>
					<div id="frame">
						<div id="ohi1" style="font-size:20px;"><img src="./modules/sensor/Sun.png"/>&nbsp <?php $TSL2561ext = `curl -s "http://IP_SERVEUR _DOMOTICZ:8088/json.htm?type=devices&rid=13" | grep 'Data' | cut -c20-28`; echo substr($TSL2561ext, 0, -6); ?> Lux</div>
						<div id="label_lg">Exterieur</div>
					</div>
					<div id="frame">
						<div id="otemp" style="font-size:20px;"><img src="./modules/sensor/Wind.png"/>&nbsp <?php $DS18b20windsud = `curl -s "http://IP_SERVEUR _DOMOTICZ:8088/json.htm?type=devices&rid=15" | grep 'Data' | cut -c20-24`; echo substr($DS18b20windsud, 0, -2);?>°C</div>
						<div id="label_lg">Ressentie</div>
					</div>
					<div id="frame">
						<div id="Co2" style="font-size:20px;"><img src="./modules/sensor/Co2.png"/>&nbsp <?php $MHZ19maiz = `curl -s "http://IP_SERVEUR _DOMOTICZ:8088/json.htm?type=devices&rid=4" | grep 'Data' | cut -c20-27`; echo substr($MHZ19maiz, 0, -5); ?> Ppm </div>
						<div id="label_lg">Domicile</div>
					</div>
					<div id="frame">
						<div id="wtemp" style="font-size:20px;"><img src="./modules/sensor/Eau.png"/>&nbsp <?php $DS18b20eau = `curl -s "http://IP_SERVEUR _DOMOTICZ:8088/json.htm?type=devices&rid=18" | grep 'Data' | cut -c20-24`; echo substr($DS18b20eau, 0, -2);?>°C</div>
						<div id="label_lg">Piscine</div>
					</div>
					<div id="frame">
						<div id="ohi2" style="font-size:20px;"><img src="./modules/sensor/Lux.png"/>&nbsp <?php $TSL2561int = `curl -s "http://IP_SERVEUR _DOMOTICZ:8088/json.htm?type=devices&rid=8" | grep 'Data' | cut -c20-28`; echo substr($TSL2561int, 0, -6); ?> Lux</div>
						<div id="label_lg">Domicile</div>
					</div>
				</div>
 
				<div>
				<div id="frame">
 
				</div>
 
 
			</div>
		</div>
	</div>
</div>

Ce Module rapatrie les remontées des capteurs paramétrés sur le serveur Domoticz.
Il contient sa propre mise en page CSS pour le tableau de donneés.

Note: Depuis la verison 2023 les appels d'API ont changé!!
Remplacer “/json.htm?type=devices” par “/json.htm?type=command&param=getdevices”

Fichier sensor.CSS

/* sensor */
 
#sensor{
  height: 220px;
  width: 970px;
  left             : 0px;
  top            : 0px;
  position          : absolute;
  background-color  : black;
}

Module NAS Infos

Fichier index.PHP

<link href="http://fonts.googleapis.com/css?family=Orbitron:700" rel="stylesheet" type="text/css">
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<style>
#FONT {
	font-family: Orbitron, serif;
	font-weight: bold; 		
	font-size: 15px;
	color: #FFFFFF;
}
</style>
 
<?php
 
####################################
#   Script php sonde NAS V1.3      #
#  Powered By Sylvain VALLDAURA    #
#    For DashboardPi Modules       #
####################################

#Port WEB NAS
$http="80";
 
// GANDAL
$host1="192.168.0.--";
// GORMAN
$host2="192.168.0.--";
// MAZINGER
$host3="192.168.0.--";
echo '<div id="FONT" style="font-size:20px;">';
//echo '<center>';
// Test d'ouverture du port 80 sur la Machine pendant 2 secondes
	$socket = 0;
	$socket = @fsockopen($host1, $http, $errno, $errstr, 2);
	// Si OK...
	if($socket && !$errno) {
echo '<img src="./modules/infos/Rack.png"><span style="color: white">&nbsp GANDAL &nbsp';
} else {
echo '<img src="./modules/infos/Rack.png"><span style="color: red">&nbsp GANDAL &nbsp';
	}
 
// Test d'ouverture du port 80 sur la Machine pendant 2 secondes
	$socket = 0;
	$socket = @fsockopen($host2, $http, $errno, $errstr, 2);
	// Si OK...
	if($socket && !$errno) {
echo '<img src="./modules/infos/Rack.png"><span style="color: white">&nbsp GORMAN &nbsp';
} else {
echo '<img src="./modules/infos/Rack.png"><span style="color: red">&nbsp GORMAN &nbsp';
	}
 
// Test d'ouverture du port 80 sur la Machine pendant 2 secondes
	$socket = 0;
	$socket = @fsockopen($host3, $http, $errno, $errstr, 2);
	// Si OK...
	if($socket && !$errno) {
echo '<img src="./modules/infos/Rack.png"><span style="color: white">&nbsp MAZINGER &nbsp';
} else {
echo '<img src="./modules/infos/Rack.png"><span style="color: red">&nbsp MAZINGER &nbsp';
	}
//echo '</br>';
echo '</div>';	
?>

Ce Module s'assure de l'état online / offline de mes NAS

Variante

Fichier index.PHP
Ici en plus de récupérer l'état du NAS, je récupère les différents paramètre de sonde à travers Domoticz.
Bien entendu il faut avoir le(s) capteur(s) pour ces environements.

<link href="http://fonts.googleapis.com/css?family=Orbitron:700" rel="stylesheet" type="text/css">
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<style>
#FONT {
	font-family: Orbitron, serif;
	font-weight: bold; 		
	font-size: 15px;
	color: #FFFFFF;
}
</style>
 
<?php
 
####################################
#   Script php sonde BAIE IT V1.6			      #
#  Powered By Sylvain VALLDAURA   		  #
#    For DashboardPi Modules       			  #
####################################
 
 
 
// QNAP TS-H973AX
$host1="192.168.XXX.XX";
 
echo '<div id="FONT" style="font-size:20px;">';
// Test du ping sur BigHero pendant 1 seconde
exec("fping -r 1 -c 1 " . $host1, $output1, $result1);
if ($result1 == 0)
echo '<img src="./modules/server/Qnap-Nas.png"><span style="color: white">&nbsp NAS &nbsp  BigHero &nbsp';
	else
echo '<img src="./modules/server/Qnap-Nas.png"><span style="color: red">&nbsp NAS &nbsp  BigHero &nbsp';
 
//echo '</br>';
//j'affiche en vert la valeur issue de la température.
echo '<span style="color: lime">';
//j'affiche la temperature avec °c
//echo substr($bme280maiz, 6, -5),°c;
//j'affiche la temperature + l'icone de Board FAN.
	$bmeFANTMP = `curl -s "http://192.168.0.30:8088/json.htm?type=devices&rid=30" | grep 'Temp' | cut -c13-16`;
	$Fan = '<img src="./modules/server/fan-rpm.png"/>';
echo $Fan, substr($bmeFANTMP, 10, -5),'°','&ensp;';
//j'affiche la temperature + l'icone de BaieGuard.
    $bme280ServerTMP = `curl -s "http://192.168.0.30:8088/json.htm?type=devices&rid=19" | grep 'Temp' | cut -c12-16`;
    $bme280ServerHR = `curl -s "http://192.168.0.30:8088/json.htm?type=devices&rid=19" | grep '"Humidity"' | cut -c16-18`;
    //$thermometre = '<img src="./modules/server/Temp.png"/>';
	$Baies = '<img src="./modules/server/Baies.png"/>';
	$Hum = '<img src="./modules/server/water.png"/>';
echo $Baies, substr($bme280ServerTMP, 6, -5),'°','&ensp;',$Hum,$bme280ServerHR,'%';
 
echo '</div>';	
 
?>

Fichier infos.css

/* infos */
 
#infos
{
  height: 50px;
  width: 500px;
  left             : 0px;
  top            : 0px;
  position          : absolute;
  background-color  : black;
}

Module IoT SonOff

Fichier index.PHP

<?php 
 
####################################
#   Script php sonoff V1.1b        #
#  Powered By Sylvain VALLDAURA    #
#    For DashboardPi Modules       #
####################################

#RMMINI-TV CONTROL
$host1="192.168.0.--";
#SONOFF-CUISINE
$host2="192.168.0.--";
#SONOFF-VMC	
$host3="192.168.0.--";
#SONOFF-COULOIR
$host4="192.168.0.--";
#SONOFF-SALON
$host5="192.168.0.--";
#SONOFF-ETAGE
$host6="192.168.0.--";
#SONOFF-CH-ENFANTS
$host7="192.168.0.--";
#SONOFF-CH-PARENTS	
$host8="192.168.0.--";
#######################
#SONOFF-OPTION +2
$host9="192.168.0.--";
$host10="192.168.0.--";
#######################
#SONOFF PORT NETWORK
$port='8081';
 
//echo '<center>';
echo '<img src="./modules/sonoff/icone24.png">';
echo '&nbsp&nbsp';
// ------ PING METHODE RM mini ------ \\
exec("ping -c 1 " . $host1, $output1, $result1);
if ($result1 == 0)
echo '<img src="./modules/sonoff/Rm-ok.png">';
else
echo '<img src="./modules/sonoff/Lan-no.png">';
echo '&nbsp&nbsp';
 
//exec("ping -c 1 " . $host2, $output2, $result2);
//if ($result2 == 0)
//echo '<img src="./modules/sonoff/Lan-ok.png">';
//else
//echo '<img src="./modules/sonoff/Lan-no.png">';
//echo '&nbsp&nbsp';
 
// Test d'ouverture du port sur la Machine pendant 3 secondes
	$socket = 0;
	$socket = @fsockopen($host2, $port, $errno, $errstr, 1);
	// Si OK...
	if($socket && !$errno) {
echo '<img src="./modules/sonoff/Lan-ok.png">';
} else {
echo '<img src="./modules/sonoff/Lan-no.png">';
		}
echo '&nbsp&nbsp';
 
// Test d'ouverture du port sur la Machine pendant 3 secondes
	$socket = 0;
	$socket = @fsockopen($host3, $port, $errno, $errstr, 1);
	// Si OK...
	if($socket && !$errno) {
echo '<img src="./modules/sonoff/Lan-ok.png">';
} else {
echo '<img src="./modules/sonoff/Lan-no.png">';
		}
echo '&nbsp&nbsp';
 
// Test d'ouverture du port sur la Machine pendant 3 secondes
	$socket = 0;
	$socket = @fsockopen($host4, $port, $errno, $errstr, 1);
	// Si OK...
	if($socket && !$errno) {
echo '<img src="./modules/sonoff/Lan-ok.png">';
} else {
echo '<img src="./modules/sonoff/Lan-no.png">';
		}
echo '&nbsp&nbsp';
 
// Test d'ouverture du port sur la Machine pendant 3 secondes
	$socket = 0;
	$socket = @fsockopen($host5, $port, $errno, $errstr, 1);
	// Si OK...
	if($socket && !$errno) {
echo '<img src="./modules/sonoff/Lan-ok.png">';
} else {
echo '<img src="./modules/sonoff/Lan-no.png">';
		}
echo '&nbsp&nbsp';
 
// Test d'ouverture du port sur la Machine pendant 3 secondes
	$socket = 0;
	$socket = @fsockopen($host6, $port, $errno, $errstr, 1);
	// Si OK...
	if($socket && !$errno) {
echo '<img src="./modules/sonoff/Lan-ok.png">';
} else {
echo '<img src="./modules/sonoff/Lan-no.png">';
		}
echo '&nbsp&nbsp';
 
// Test d'ouverture du port sur la Machine pendant 3 secondes
	$socket = 0;
	$socket = @fsockopen($host7, $port, $errno, $errstr, 1);
	// Si OK...
	if($socket && !$errno) {
echo '<img src="./modules/sonoff/Lan-ok.png">';
} else {
echo '<img src="./modules/sonoff/Lan-no.png">';
		}
echo '&nbsp&nbsp';
 
// Test d'ouverture du port sur la Machine pendant 3 secondes
	$socket = 0;
	$socket = @fsockopen($host8, $port, $errno, $errstr, 1);
	// Si OK...
	if($socket && !$errno) {
echo '<img src="./modules/sonoff/Lan-ok.png">';
} else {
echo '<img src="./modules/sonoff/Lan-no.png">';
		}
echo '&nbsp&nbsp';
 
######## OPTION MODULE SUPPLEMENTAIRE #########
//exec("ping -c 1 " . $host9, $output9, $result9);
//if ($result9 == 0)
//echo '<img src="./modules/sonoff/Lan-ok.png">';
//else
//echo '<img src="./modules/sonoff/Lan-no.png">';
//echo '&nbsp&nbsp';
 
//exec("ping -c 1 " . $host10, $output10, $result10);
//if ($result10 == 0)
//echo '<img src="./modules/sonoff/Lan-ok.png">';
//else
//echo '<img src="./modules/sonoff/Lan-no.png">';
//echo '&nbsp&nbsp';
 
echo '</center>'; 
?>

Ce Module s'assure de l'état online / offline de mes relais SonOff

Fichier sonoff.CSS

/* sonoff */
 
#sonoff
{
  height: 25px;
  width: 360px;
  left             : 0px;
  top            : 0px;
  position          : absolute;
  background-color  : black;
}

Module Horloge

Fichier index.HTML

<link href="http://fonts.googleapis.com/css?family=Orbitron:700" rel="stylesheet" type="text/css">
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<!--
Ce module affiche l'heure et la date courante
Récupération des arguments
-->
<?php
	if(!empty($_GET)){
		echo '<style type="text/css">';
		// Taille de l'heure
		if(!empty($_GET['taille_heure'])){
			echo '.horloge_heure { font-size: '.$_GET['taille_heure'].'; }';
		}
		// Taille de la date
		if(!empty($_GET['taille_date'])){
			echo '.horloge_date { font-size: '.$_GET['taille_date'].'; }';
		}
		echo '</style>';
	}
?>
 
<!-- Fonction Javascript d'affichage de l'heure et de la date -->
<script type='text/javascript'>
 
	dows  = ["dimanche", "lundi", "mardi", "mercredi", "jeudi", "vendredi", "samedi"];
	mois  = ["janv", "f&eacute;v", "mars", "avril", "mai", "juin", "juillet", "ao&ucirc;t", "sept", "oct", "nov", "d&eacute;c"];
 
	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 = "";}
 
	if (sec % 2 != 0){sep = ":";}else{sep = "<span class='horloge_grey'>:</span>";}
 
	horloge_heure   = heure + sep + 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>";
 
	document.getElementById('horloge').innerHTML += horloge_content;
 
</script>

Fichier horloge.CSS

/* horloge */
 
#horloge
{
	position		: absolute;
	padding-bottom	: 15px;
	color			: #FFF;
	text-align		: center;
	text-shadow		: 1px 2px 0px rgba(0, 0, 0, 0.8);
    background: -webkit-linear-gradient( #000, #333);
    background:    -moz-linear-gradient( #000, #333);
    background:     -ms-linear-gradient( #000, #333);
    background:      -o-linear-gradient( #000, #333);
    background:         linear-gradient( #000, #333);
    border-radius	: 12px;
    box-shadow		: 1px -1px 0 rgba(125, 125, 125, 0.4);
}
 
.horloge_heure
{
	font-size		: 180px;
	font-family: Orbitron, serif;
	font-weight: bold
}
 
.horloge_date
{
	font-size		: 45px;
	font-family: Orbitron, serif;
	font-weight: bold
}
 
span.horloge_grey
{
	color			: #888;
	font-size		: inherit;
}

Module Byod

Ce module affiche les Byod actuellement connectés au Wifi du domicile.
Fichier index.PHP

<?php
 
####################################
#   Script php sonde byod V1.3     #
#  Powered By Sylvain VALLDAURA    #
#    For DashboardPi Modules       #
####################################

################################################################
#Le module Boyd affiche une icone des lors que l'appareil est  #
# en ligne sinon il n'affiche rien a defaut d'une icone grisée.#
################################################################
// CONFIG PORT ECOUTE //
$port="62078";
$appletv="3689";
$hitachi="4660";
$samch="8000";
$macbookair="9002";
$android='34970';
$samsungs8='30830';
$tvsalon="5601";
 
//SAMSUNG AVAIBLE WLAN PORT //
// 6006 - 30830 - 30831 - 35625 - 41966 //
//TV SAMSUNG : 5601
 
$blueray='80';
// SAMSUNG S8+ 
$host1="192.168.0.--";
// ANDROID 
$host2="192.168.0.--";
// IPAD ENFANT
$host3="192.168.0.--";
// IPAD PAPA
$host4="192.168.0.--";
// MACBOOK AIR
$host5="192.168.0.--";
// TV SAMSUNG 4K
$host6="192.168.0.--";
// TV SAMSUNG UE46C500
$host7="192.168.0.--";
// BLUE RAY
$host8="192.168.0.--";
// APPLE TV
$host9="192.168.0.--";
// HITACHI TV
$host10="192.168.0.--";
// MOBILE SEMIH
$host11="192.168.0.--";
// MOBILE HEDDY
$host12="192.168.0.--";
 
echo "<center>";
 
// Ping sur le Samsung s8+
exec("ping -c 1 " . $host1, $output1, $result1);
if ($result1 == 0)
echo '<img src="./modules/byod/SmartphoneSy.png">';
 
// Ping sur le Huawei p8
exec("ping -c 1 " . $host2, $output2, $result2);
if ($result2 == 0)
echo '<img src="./modules/byod/SmartphoneD.png">';
 
// Test d'ouverture du port sur iPad Mini pendant 1 seconde
	$socket = 0;
	$socket = @fsockopen($host3, $port, $errno, $errstr, 1);
	// Si OK...
	if($socket && !$errno) {
echo '<img src="./modules/byod/ipadmini-ok.png">';
} else {
 
	}
 
// Test d'ouverture du port sur iPad pro pendant 1 seconde
	$socket = 0;
	$socket = @fsockopen($host4, $port, $errno, $errstr, 1);
	// Si OK...
	if($socket && !$errno) {
echo '<img src="./modules/byod/ipadpro-ok.png">';
} else {
 
	}
 
// ----- FSOCKOPEN METHODE Plus Supporté sur MBA ----- \\	
	// Test d'ouverture du port sur le MacBook Air pendant 1 seconde
	//$socket = 0;
	//$socket = @fsockopen($host5, $macbookair, $errno, $errstr, 1);
	// Si OK...
	//if($socket && !$errno) {
//echo '<img src="./modules/byod/macbookair-ok.png">';
//} else {
 
	//}
 
// Ping sur le MBA pendant 1 seconde
exec("ping -c 1 " . $host5, $output5, $result5);
if ($result5 == 0)
echo '<img src="./modules/byod/macbookair-ok.png">';
 
	// Test d'ouverture du port sur la Machine pendant 1 seconde
	$socket = 0;
	$socket = @fsockopen($host6, $samch, $errno, $errstr, 1);
	// Si OK...
	if($socket && !$errno) {
echo '<img src="./modules/byod/samch-ok.png">';
} else {
 
	}
 
//FSOCKOPEN METHODE
// Test d'ouverture du port sur la SAMSUNG UE46C500  pendant 1 seconde
	$socket = 0;
	$socket = @fsockopen($host7, $tvsalon, $errno, $errstr, 1);
	// Si OK...
	if($socket && !$errno) {
echo '<img src="./modules/byod/samsalon-ok.png">';
} else {
 
	}
 
// Test d'ouverture du port sur la AppleTv pendant 1 seconde
	$socket = 0;
	$socket = @fsockopen($host9, $appletv, $errno, $errstr, 1);
	// Si OK...
	if($socket && !$errno) {
echo '<img src="./modules/byod/apltv-ok.png">';
} else {
 
	}
 
// Ping sur le BlueRay Disc
exec("ping -c 1 " . $host8, $output8, $result8);
if ($result8 == 0)
echo '<img src="./modules/byod/blueray-ok.png">';
 
// Test d'ouverture du port sur la TV Enfant pendant 1 seconde
	$socket = 0;
	$socket = @fsockopen($host10, $hitachi, $errno, $errstr, 1);
	// Si OK...
	if($socket && !$errno) {
echo '<img src="./modules/byod/Netflix-ok.png">';
} else {
 
	}
 
// Ping sur le KIKAA POWER HEDDY
exec("ping -c 1 " . $host11, $output11, $result11);
if ($result11 == 0)
echo '<img src="./modules/byod/SmartphoneS.png">';
 
// Ping sur le KIKAA POWER SEMIH
exec("ping -c 1 " . $host12, $output12, $result12);
if ($result12 == 0)
echo '<img src="./modules/byod/SmartphoneH.png">';	
 
echo "</center>";
echo ('<center>Appareils Actuellement Connectés ™</center>');
 
?>

Fichier byod.CSS

/* byod */
 
#byod
{
  height: 60px;
  width: 525px;
  left             : 0px;
  top            : 0px;
  position          : absolute;
  background-color  : black;
}

Module Wifi

Ce Module affiche les réseaux Wifi disponible du domicile.
Le password du réseau Wifi Invité Hawei a volontairement été masqué. ;o)
Fichier index.PHP

<?php
 
####################################
#   Script php sonde wifi V1.3     #
#  Powered By Sylvain VALLDAURA    #
#    For DashboardPi Modules       #
####################################

echo '&nbsp&nbsp&nbsp&nbsp<center><img src="./modules/wifi/wifi.png"></center><span style="color: graylight"></br><strong><font face="Arial">(SSID):&nbsp&nbsp&nbspHuawei_lte/4g_e5180s&nbsp&nbsp♠︎</br>(Passwd):&nbsp&nbsp&nbspS7eh9sejo0&nbsp&nbsp♠︎</br></br>(SSID):&nbsp&nbsp&nbspFacebook(n)450Mb/s&nbsp&nbsp♣︎</br>(SSID):&nbsp&nbsp&nbspFacebook(a/n/ac)900Mb/s&nbsp&nbsp♣︎</font></strong></span>';
 
 
 ?>

Le PHP écrit en une ligne seulement est une façon de comprésser celui-ci à la lecture par le serveur WEB.

Fichier wifi.CSS

/* wifi */
 
#wifi
{
  height: 190px;
  width: 165px;
  left             : 0px;
  top            : 0px;
  position          : absolute;
  background-color  : black;
}

Module Signature

Ce Module est le Signature de mon travail. ;o)
Fichier index.PHP

<?php 
 
####################################
#   Script php signature V1.3      #
#  Powered By Sylvain VALLDAURA    #
#    For DashboardPi Modules       #
####################################

echo '<span style="color: white"><strong><center>✪ ------------------------------- ✪</center></font></strong></span>';
echo '<span style="color: white"><strong><center>Full HDR Dashboard v6.7.3c</p> Copyright© Sylvain®</p>Powered By Minos Corp Certified™ </p>Team DEV Plop℗</center></font></strong></span>';
echo '<span style="color: white"><strong><center>✪ ------------------------------- ✪</center></font></strong></span>';
#echo '<center><img src="./modules/signature/emoji.png"></center>';
echo '<span style="color: gray"><center>';
echo shell_exec('uname -smn');
echo '<br>'; 
echo shell_exec('uptime -p'); 
echo '<br>';
echo shell_exec('cat /proc/loadavg');
echo '<br>';
echo 'Température du Système   ';
echo shell_exec('cat /sys/class/thermal/thermal_zone0/temp | cut -c1-2');
echo '°C';
echo '<br>';
echo '<center>✪ ---------------------------------------- ✪</center>';
echo '</center></span>';
?>

Fichier signature.CSS

/* sigature */
 
#signature
{
  height: 150px;
  width: 280px;
  left             : 0px;
  top            : 0px;
  position          : absolute;
  background-color  : black;
}

Json Configuration Module

{
	"title": "Dashboard Pi",
	"width": "1080px",
	"height": "1920px",
	"modules": [
{
		"name": "horloge",
		"width": "470px",
		"top": "1715px",
		"left": "305px",
		"update": 1,
		"args":
		{
			"taille_heure": "75px",
			"taille_date": "32px"
		}
	},
	
	    {
		"name": "meteo_h",
		"width": "600px",
		"height": "215px",
		"top": "260px",
		"left": "470px",
		"update": 900
	},
		
	
	    {
		"name": "rss",
		"width": "480px",
		"height": "400px",
		"top": "790px",
		"left": "560px",
                "update": 600,
		"args":
		{
			"url": "http://www.lefigaro.fr/rss/figaro_actualites.xml",
			"nb_items": 4
		}
	 },
	 
	    {  
		"name": "byod",
		"wight": "515px",
		"height": "60px",
		"top": "1845px",
		"left": "285px",
		"update": 15
	},
	
	   {
        "name": "infra",
		"wight": "540px",
		"heigt": "55px",
		"left": "300px",
		"top": "1385px",
		"update": 30
	},
	
    	{
        "name": "sensor",
		"wight": "970px",
		"heigt": "220px",
		"top": "1445px",
		"left": "55Px",
		"update": 55
	},
	
	    {
        "name": "sonoff",
        "wight": "360px",
        "height": "25px",
        "left": "700px",
        "top": "1680px",
        "update": 40
	},
	
	    {
        "name": "graph",
		"wight": "1025px",
		"heigt": "130px",
		"left": "30px",
		"top": "1240px",
		"update": 120
	},
      
        {
		"name": "infos",
		"wight": "500px",
		"height": "25px",
		"left": "30px",
		"top": "1680px",
		"update": 80
	},
      
     	{
        "name": "signature",
        "width": "280px",
        "height": "150px",
        "top": "1740px",
        "left": "790px",
        "update": 120
     },
	
        {
        "name": "traffic",
        "width": "1045px",
        "height": "300px",
        "top": "475px",
        "left": "15px",
        "update": 600
    },
    
	    {
		"name": "xplanet_terre",
		"width": "450px",
		"height": "450px",
		"top": "20px",
		"left": "25px",
		"update": 900
	},
	
	    {
		"name": "xplanet_lune",
		"width": "224px",
		"height": "224px",
		"top": "20px",
		"left": "560px",
		"update": 3600
	},
	
	    {
        "name": "sun",
        "width": "160px",
        "height": "150px",
        "top": "5px",
        "left": "895px",
        "update": 0
    },
    
        {
        "name": "wifi",
        "width": "265px",
        "height": "170px",
        "top": "1720px",
        "left": "15px",
        "update": 0
     },
     
	
	    {
		"name": "diaporama",
		"width": "520px",
		"height": "580px",
		"top": "790px",
		"left": "15px",
		"update": 0,
		"args":
		{
			"dossier": "./img/",
			"delai": 80
		}
	}
	]
}

Les Sources du projet Initial

http://www.magdiblog.fr/boa-pi-homedashscreen/1-raspberry-pi-home-dash-screen/

Le liens IMGUR d'une de mes premières release de mon Dashbord:
https://imgur.com/a/7tH24
Je n'ai pas réinventer la roue, mais simplement appris grâce à ce super projet à développer
avec différent code tel que le Java-Scrip / PHP / xHTML / CSS / ainsi qu'a utiliser des Framworks
comme JQUERY et développer mes compétences en Script Bash Sell UNIX.

— sylvain 2019/05/30 19:14

— sylvain 2022/06/06 19:24 Mise à jour.

Table des matières

Code Source des Modules de DashboardPi

Module xPlanet

Simplement trop long à détailler ici

Module Météo

Variante

Module Google Traffic

Option Maps

Module Diaporama

Module Flux RSS

Module RRDTool Conso Internet

Module Infra

Module Domoticz

Module NAS Infos

Variante

Module IoT SonOff

Module Horloge

Module Byod

Module Wifi

Module Signature

Json Configuration Module

Les Sources du projet Initial