3 – Principe de base

8 réponses

Une page pour les afficher tous

Voici l’arborescence des fichiers nécessaires à l’affichage des différents modules.

  • index.php : page principale qui est appelée par le navigateur
  • ajax.php : contient le code exécuté lors des requêtes AJAX
  • inc.php : contient les fonctions PHP
  • javascript.js : contient les fonctions Javascript
  • style.css : feuille de style

Structure on-ne-peut-plus simple. La page « index.php » est appelée par le navigateur, et une fonction JavaScript se charge d’afficher le contenu de chaque module au bon endroit dans la page et de rafraichir l’affichage à intervalle régulier.

Note : Vous pourrez télécharger tous les fichiers dans une archive dans le dernier article du projet.

index.php

La page d’index se contente de positionner les balises <div> dans lesquelles seront affichés chaque module.

Dans la balise <head>, il y a une balise <meta> dont le but est de rafraichir la page toute les 3600 secondes (soit toutes les heures). Ainsi, toute la page sera rechargée, les compteurs JavaScript réinitialisés, les mise à jour du code sont prises en compte, etc…

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <title>Jarvis</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <meta http-equiv="Content-Language" content="Fr"/>
    <meta name="Author" lang="fr" content="Torna"/>
    <meta name="Copyright" content="© Torna"/>
    <meta http-equiv="Cache-Control" content="no-cache">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Expires" content="0">
    <meta http-equiv="refresh" content="3600;url=index.php">
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript" src="javascript.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css"/>
  </head>
  <body>

    <div id="main">
      <!--div id="etalon">Jarvis <?php //echo date("Y-m-d H:i:s"); ?></div-->
      <div id="horloge"></div>
      <div id="meteo"></div>
      <div id="meteo_black"></div>
      <div id="ts3"></div>
      <div id="ping"></div>
      <div id="analytics"></div>
      <div id="vpn"></div>
      <div id="latency"></div>
      <div id="earth"><img id="img_earth" src="pict/blank.png"></div>
      <div id="moon"><img id="img_moon" src="pict/blank.png"></div>
      <div id="ifstat_oberon_up"><img id="img_oberon_up" src="pict/blank.png"></div>
      <div id="ifstat_oberon_down"><img id="img_oberon_down" src="pict/blank.png"></div>
    </div>

    <?php include('inc.php'); echo analytics(); ?>

  </body>
</html>

Pour les modules qui affichent des images (phases terre et lune, graphique de bande passante), il convient d’insérer une image vide « blank.png » afin d’éviter l’affichage d’une erreur dans la page en attendant que la requète AJAX chargée de l’affichage de l’image soit terminée.

ajax.php

C’est ce fichier qui est appelé par les requètes AJAX et qui est chargé d’appeler la bonne fonction à exécuter.

<?php

  header('Content-type: text/html; charset=utf-8');
  require_once('inc.php');

  if(isset($_REQUEST['block'])){$block = $_REQUEST['block'];}else{$block = 'none';}

  /////////////////////////////////////////////////
  //  LATENCY
  /////////////////////////////////////////////////

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

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

  else if($block == 'ts3'){
    echo ts3();
  }

  /////////////////////////////////////////////////
  //  METEO
  /////////////////////////////////////////////////

  else if($block == 'meteo'){
    echo meteo();
  }

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

  else if($block == 'ping'){
    echo ping();
  }

  /////////////////////////////////////////////////
  //  VPN PPTPD
  /////////////////////////////////////////////////

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

  /////////////////////////////////////////////////
  //  IFSTAT
  /////////////////////////////////////////////////

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

?>

Un bloc de code pour chaque module. En fonction de la variable $block passée en paramètre de la requète AJAX, on appelle la fonction ciblée.

inc.php

Ce fichier contient les fonctions appelées par le fichier ajax.php. Même principe, un bloc de code pour chaque module.

En gros, une fonction par module 🙂 Le détail de chaque fonction fera l’objet d’un article à suivre.

javascript.js

Ce fichier contient les fonctions JavaScript qui vont lancer les requêtes AJAX à intervalle réuglier.

/* initialisation des fonctions de tous les modules au chargement de la page */
$(document).ready(function() {
   fonction_nom_du_module_1 ();
   fonction_nom_du_module_2 ();
   ...
});

/* initialisation des variables timeout pour chaque module */
var timeout_nom_du_module_1; 
var timeout_nom_du_module_2;
...

/* définition de la fonction pour le module nom_du_module_1 */

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

  g = setTimeout("nom_du_module_1()", 10000);
}

Je ne mets ici que la structure gobale du fichier pour expliquer le principe. Le fichier complet sera disponible au téléchargement dans le dernier article.

style.css

Ce fichier contient la feuille de style de la page, c’est elle qui contient toutes les options de mise en forme des éléments de la page (position, taille, couleurs, etc…).

/* init */

body
{
  background-color  : rgba(0, 0, 50, 1);
  font-family       : Verdana, "Courier New", "Lucida Console";
  font-size         : 14px;
  font-weight       : normal;
  padding           : 0px;
  margin            : 0px;
  overflow          : hidden;
}

div, table, tr, td, th, h1, h2, h3, a, span, p, pre, fieldset, input, textarea, form, img, select
{
  font-family       : Verdana, "Courier New", "Lucida Console";
  font-size         : 14px;
  font-weight       : normal;
  padding           : 0px;
  margin            : 0px;
  color             : #FFF;
}

/* main */

div#main
{
  width             : 1366px;
  height            : 768px;
  position          : relative;
  overflow          : hidden;
  background-color  : rgba(0, 0, 0, 1);
  color             : #FFF;
}

La div qui a pour id main est la div qui contient toutes les autres div de chaque module. Ici, je fixe sa taille en pixel à la résolution native de mon écran 1366×768 px.

La couleur de fond (background-color) est fixée au noir mais vous pouvez choisir ce qui vous plaît 🙂

8 réflexions au sujet de « 3 – Principe de base »

    1. Olivier Auteur de l’article

      Sympa ! J’aime beaucoup le design de ce type de dashboard 🙂
      Ca me rassure également de voir que le PHP et l’AJAX sont utilisés par d’autres pour réaliser ce type de dashscreen 🙂

      Répondre ↓

  2. Ping : MagdiBlog - PiHomeDashScreen et Domoticz

  3. Ping : Tuto Raspberry Pi, Technologie - Un Tableau de Bord numérique - v2 !

  4. NAS78000

    Bonsoir,

    J’aime bien tout ce que vous faites, mais je n’arrive pas à faire afficher quoi que ce soit,
    Lorsque je tape INDEX.PHP sur le PC à côté de mon Rapsberry, rien ne s’affiche,En fait je n’ai pas tout compris dans l’imbrication des différents fichiers et l’astuce pour les faire fonctionner ensemble.
    J’essaie bien de commencer par l’horloge simple avec les différents fichiers (INDEX.Php,style.css, Javascrpit.js
    Pouvez-vous svp me donner une clé pour bien démarrer,

    Merci à vous

    Répondre ↓

  5. Ping : Principe de base et l'heure du DashScreen

  6. patrick metri

    bonjour
    je suis très intéressé pour effectuer ce dashboard, je suis néophite, pouvez vous m’expliquer comment utiliser la commande pour installer les composants (apt get…)?
    vous mettez à disposition une dossier piHomedashscreen, comment s’en sert-on?
    Merci pour vos explications

    Répondre ↓

  7. Ping : Estacion grafica multimedia con Raspberry Pi | Soloelectronicos.com

Laisser un commentaire

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.