12 – En résumé

36 réponses

IMG_5413Ce dashscreen est accroché au mur de mon séjour depuis presque un an maintenant, et je m’en sers tous les jours 🙂 L’affichage de l’heure et de la date en fait une horloge pratique et très lisible depuis toute la pièce. L’affichage de la météo est également une information utile au quotidien. Quant à la Terre et la Lune, je reconnais que l’utilité est moindre, mais je trouve cela vraiment chouette :). Si ce n’est pas votre truc, vous pouvez facilement remplacer ces images par des photos, pour ajouter une fonction « cadre photo numérique » intégrée à votre dashscreen 😉

Les autres modules, ping, TeamSpeak, bande passante et VPN me sont utiles pour surveiller ce qui se passe sur mon réseau et être alerté des pannes et autres problèmes qui peuvent survenir.

Juste au dessus du module graphique de la bande passante, j’ai intégré un graphique du nombre de visite quotidienne de ce blog 🙂 J’utilise GAPI pour récupérer les statistiques de Google Analytics, puis JSAPI (Google Charts) pour créer le graphique.

Pour les modules, le principe est toujours le même :

  1. une <div> avec un id dans le fichier index.php
  2. une feuille de style style.css pour positionner la div en question et gérer la mise en forme des données affichées
  3. une fonction javascript dans le fichier javascript.js qui lance une requête AJAX à intervalle régulier
  4. une ligne dans le fichier ajax.php pour appeler la bonne fonction PHP
  5. une fonction PHP dans le fichier inc.php pour générer le code HTML pour les images à afficher

Télécharger les sources

Vous pouvez télécharger toutes les sources ici : PiHomeDashScreen

Note : Vous devrez adapter le code à vos besoins.

Etendre le projet ?

Il sera vraiment intéressant de répertorier tous les modules créer sur ce principe par tous les utilisateurs qui se lance dans la réalisation d’un dashscreen. Nous pourrions mettre en place un « dépôt » pour stocker et partager tous les modules existants 🙂 Si cela intéresse du monde, n’hésitez pas à foncer 🙂

Nous pourrions également proposer une appli en ligne avec tous ces modules pour que le Pi n’est qu’à pointer sur une URL pour afficher une page web avec différentes options et modules activés/désactivés 😉

Remerciements

J’aimerai remercier toutes les personnes qui sont intervenues en commentaire ou sur forum, ou qui m’ont contacté directement par mail. Merci pour l’intérêt que vous portez à ce projet, ainsi que pour vos questions, remarques et astuces qui ont contribué à améliorer le projet. Merci également pour les erreurs qui m’ont été remontées avec beaucoup d’indulgence 😉

Le matériel

Un Pi et un écran suffisent pour réaliser ce projet. Vous pouvez choisir le type et la taille d’écran que vous souhaitez. Vous pouvez brancher votre Pi sur votre télé pour avoir un affichage en grand dans votre salon, ou utiliser un tout petit écran de 7″ à 10″ pour vous créer un réveil high-tech (l’idée m’a été soufflée sur un forum 🙂 ). Vous pouvez également étendre les fonctionnalités de ce dashscreen en ajoutant du son, ou un écran tactil pour interagir avec les informations affichées.

Technos et logiciels utilisés

  • Linux, Raspbian
  • script bash
  • Apache
  • PHP5
  • HTML & CSS
  • JavaScript
  • netcat
  • Xplanet
  • imagemagick

Sommaire

Forums de discussion

36 réflexions au sujet de « 12 – En résumé »

  3. Cyril

    Vraiment sympa.
    Ce qu’il y a de bien c’est que c’est complètement customisable, mais la vue de la Terre c’est parce que c’est inutile que c’est indispensable.
    Ce que je vois déjà à rajouter, c’est les températures actuelles (extérieures et intérieures) renvoyées par une station météo. D’ailleurs, si RPi qui supporte HomeDash peut aussi faire station météo ça évite de multiplier les RPi

    Répondre ↓
  4. Guillaume

    Hey salut,

    je viens de tomber sur ton site. Super idée ton projet de dashboard sur raspberrypi j’ai dans l’idée d’en faire un aussi.

    Pourquoi tu mettrais pas tes sources sur Github ce serais plus simple pour manager et participer à ton projet.

    Répondre ↓
    1. Olivier Auteur de l’article

      Salut Guillaume,
      On pourrait passer par Github effectivement… Je vais regarder ça, et mettre les sources au carré.
      Vu qu’on peut potentiellement ajouter tous les modules qu’on veut, faudrait recoder l’ensemble pour pouvoir gérer des plugins avec fichier de config et tout et tout…

      Répondre ↓
  7. José

    Bonjour

    Félicitations pour ce travail qui est d’une grande qualité. J’ai un peu galéré pour intégrer les 2 modules de la communauté mais finalement ça été 🙂

    J’ai une question par rapport aux stats et au module « GAPI » auriez vous les sources de votre graphiques de stats car je rencontre maintenant des soucis d’authentifications.

    Merci

    Répondre ↓
    1. Olivier Auteur de l’article

      Bonjour José, et merci pour tes encouragements 🙂
      J’utilise la lib PHP de GAPI, et voici comment récupérer les données :


      require ('gapi.class.php');
      $datas = "";
      $ga = new gapi('adresse.email@gmail.com','motdepasse');
      $ga->requestReportData(id_google_analytics,array('date'),array('visits', 'visitors'), array('date'), null, $from_date, $today);
      foreach ($ga->getResults() as $result) {
      $date = $result->getDate();
      $year = substr($date, 0, 4);
      $month = substr($date, 4, 2);
      $day = substr($date, 6, 2);
      if(substr($day, 0, 1) == "0"){$day = substr($day, 1, 1);}
      $date = $day.' '.$months[$month];
      $datas .= ", ['".$date."', ".$result->getVisits().", ".$result->getVisitors()."]";
      }

      N’hésites pas si tu rencontre d’autres problèmes 🙂

      Répondre ↓
  8. José

    Bonjour,

    J’ai posté au moins deux com cette semaine qui apparemment n’ont pas fonctionné. Simplement pour dire que ça fonctionne parfaitement surtout après avoir trouvé l’identifiant id_google_analytics.

    Merci encore

    Répondre ↓
  9. Archibal11

    Bonjour a tous
    j’appelle a l’aide j’ai recommencé 3 fois et a chaque fois fonctionnement différent.
    j’avais réussi a téléchargé tmp_cloud.2048.jpg mais maintenant je n’y arrive plus.
    de meme le chargement de xplanet_earth et xplanet_moon avait marché la 1er foi et maintenant non.
    pour ces derniers la mise a jour ne se faisait pas dans la page index.php.

    je commence a désespérer!!
    Quelqu’un pourrait il m’envoyer un zip avec des fichiers fonctionnels ou m’aider pas a pas.

    Ce projet m’intéresse beaucoup car il peut m’apporter d’élements supplémentaire sur un de mes projet en cours : commande a distance d’allumage de lampes et réception info météo d’une sonde oregon( temp,hum,vit vent ,hydrométrie..) ceci avec un arduino.

    Merci pour votre aide…

    Répondre ↓
  10. stephane balasse

    Bonjour à tous et déjà félicitation pour se travail.

    Si cela peu intéresser quelqu’un je suis entrain de créer plusieurs directives angularjs pour ajouter et customiser facilement des fonction au tableau de bord

    Pour l’instant j’ai reproduit l’horloge, la date et le module météo . Pour le module météo je récupère les données sur openweathermap.

    Tous est dans mon github si des gens sont intéresser j’attends vos remarques.

    le projet github : https://github.com/stephanebalasse/dashbord-angularjs.git

    Répondre ↓
  11. jojo

    Bonjour et bravo pour ce tuto.

    Malgré le fait que je sois complètement inculte en programmation web, j’ai réussi a faire fonctionner l’ensemble des modules présentés et même à les personnaliser.

    Pour ma part je souhaite ajouter quelques boutons d’interaction pour effectuer des opérations simples en appelant des script shell (commandes ON/OFF de prises par exemple). Au niveau des scripts pas de souci, par contre si quelqu’un pouvait m’aider à mettre en place la partie web qui appelle le script via un bouton de ce type par exemple : http://proto.io/freebies/onoff/

    Merci pour votre aide

    Répondre ↓
    1. Olivier Auteur de l’article

      Bonjour jojo 🙂
      Si tu veux simplement un bouton qui déclenche une action tu peux faire une requête AJAX (en utilisant JQuery).
      Je te laisse explorer le sujet, et n’hésites pas si tu ne parviens toujours à réaliser ce que tu souhaites 🙂
      Bonne continuation 🙂

      Répondre ↓
  12. Nicolas

    Bonjour un grand merci pour ces tutoriel cela marche chez moi (terre lune heure météo ping et bande passante). Je voudrais savoir si tubas déjà lis en œuvre le module cadre photo ? J’aimerai afficher mes photos stockées sur mon nas synology merci !

    Répondre ↓
  13. Eric Terrasse

    Bonjour,
    Cela fait un moment que je suis vos projets et c’est vraiment top.
    J’ai trouvé le concept super et je me suis lancé.
    Ai dû ramer pas mal pour arriver à tout faire fonctionner comme je voulais, mais j’ai appris plein de choses et c’est génial.
    En tout cas, merci beaucoup !
    Je joins un lien DropBox avec une copie d’écran de mon PiDashBoard, si ça peut servir, c’est cool.
    J’ai d’autres projets en cours et en vue avec le Pi (en + d’une OpenElec pour les films depuis quelques temps) et ça promet d’être intéressant.
    Encore merci.
    Eric

    PiHomeDashScreen

    Répondre ↓
    1. Olivier Auteur de l’article

      Hello,
      Je suis très content que tu ais pu apprendre des choses en reproduisant ce projet et en l’améliorant à ta sauce 🙂
      C’est exactement le but de ce blog !
      Bonne continuation 😉

      Répondre ↓

  14. Ping : RPi et dashboard | Col Blanc et Mains Grasses

  15. Flo

    Bonjour,

    Tout d’abord, merci pour ce travail 😉
    Avez-vous tester/trouver un grand écran tactile ?
    Il existe un écran 10 » officiel, mais je voudrais réaliser la même chose avec un grand écran tactile (au moins 17 »).

    Répondre ↓
    1. Alx

      Je pense pas que le fait qu’un ecran tactile change beaucoup la donne! Je me suis connecté à mon Pi avec mon iPad et il prend tout très bien en compte, c’est un écran tactile… je présume que ca fera le même effet sur le Pi ! 🙂

      Répondre ↓
  16. Mehdi

    Salut Merci pour tout ,
    Je bloque sur un truc , ou creer les fichiers index.php ,ajax.php,inc.php…
    Par exemple pour le module heure , je met tout dans VAR\WWW\ ? ,
    Pour d autres modules je met tout sur les memes fichiers ?
    Merci encore.

    Répondre ↓
    1. Alx

      Exactement 🙂 tous les fichiers relatif au site internet (.php etc) vont se loger dans /var/www/ si tu ne l’a pas modifié !

      Répondre ↓
  17. Alx

    Salut à tous,

    Super projet ! Je m’y suis attelé et y ait ajouté ma petite touche perso. J’ai ajouté un module de vigilance météo france fait maison (récupération des données direct depuis le météo france via un script), re-fait le module ical qui fonctionnait pas pour moi avec un calcul d’itinéraire et un le temps de départ, le tout en affichage dynamique. Du coup ca rend vraiment sympa !!

    J’ai aussi fait du coup un script d’installation si jamais je dois reinstaller le Pi, pensez à le faire aussi ca prend un peu de temps mais au final ca vous en fera gagner beaucoup si votre framboise plante 🙂

    Cependant il me reste une petite question. Je vois que tu utilises une télé pour l’affichage (comme moi), du coup quand tu met en veille l’écran via le Pi, la télé reste allumée h24 ? La mienne personnellement restait allumée mais en noir. Du coup au lieu de la sur-conso, je l’éteins moi même. Bon après ma télé est vieille et je suis en attente de la nouvelle, peut-être elle réagiras différemment 🙂

    A plush !

    Répondre ↓
  18. cyclopkilouch

    J’ai déjà posté dans une autre page de ce tuto, mais je voulais réagir plus globalement.

    J’ai quasi rien compris au tuto (c’est surement de ma faute puisque d’autres y arrivent) :

    -je ne sais pas sous quel format créer les fichiers qui manquent dans la partie 2.
    -J’ai vaguement compris dans les commentaires qu’il faut placer les fichier php et autres (ceux qu’on peut télécharger directement) de la partie 3, dans /var/www/ mais ensuite j’ai pas compris comment on fait en sorte que tous apparaisse dans la page du navigateur, j’ai toujours le message du fichier index.html

    Bref, je suis perdu.

    Répondre ↓
  20. xavier

    Salut à tous

    Quelqu’un a t il essaye de recuperer les stats rezo sur une freebox a travers l’api.

    Merci

    Répondre ↓
  21. Tintin3p

    Bonjour, ou plutôt bonsoir,

    Tout d’abord bravo pour le super tuto.Cependant, j’ai deux questions, la première concerne le fichier index.html, que doit-on mettre dedans ?
    Ma seconde question est pour le VPN et la courbe de débit,il y as un programme a exécuter sur le routeur. Seriez-vous y exécuter ceux-ci sur une freebox V5 ?

    Répondre ↓
  22. benoit

    hello, je suis tout nouvel acquereur du pi. les fichiers index et cie, je vois comment cela est reconnu par un pc a laide de wampserver par exemple, maks sur le pi, on a juste une carte sd….je comprends po comment lire index.php sur le pi, :/

    Répondre ↓
  23. nicozozo

    Bonjour,
    je débute avec domoticz sur raspberry, quand je démarre mon raspberry avec domoticz dessus, comment puis avoir sur la sortie hdmi un écran web comme celui que tu montres ?
    moi j’ai un écran noir, linux, avec un login a entrer *,

    Répondre ↓

  24. Ping : Projet perso | Pearltrees

  25. meteo thenioux blog

    Tres jolie projet ,
    1 ) est il possible de le porter sur un vieille Apple  » tournesol «  » celui qui a la boule comme pieds et l’écran inclut
    2) la météo j’ai une station automatique netatmo et une vantage pro davis avec les api wunderground ou open weather peut intégrer a ce projet
    3) l’intégration d’une vidéo surveillance ( genre porte d’entrée )
    5 ) pas encore trouver l iddee
    le tout sachant que je n’y connait absolument rien

    Répondre ↓
  26. newbie

    Bonjour,
    Je voudrais pouvoir utiliser le dashboard pour afficher les prochains passages de bus RATP et trains SNCF Transilien près de chez moi…
    Quelqu’un a déjà développé un tel module ?
    Comment utiliser les données des API SNCF et RATP ?
    Merci pour vos lumières

    Répondre ↓
  27. Mijsoot

    Bonjour,
    Merci pour cet excellent travail !!! C’est vraiment Top !!!
    J’ai relevé un lien mort juste au dessus dans le sommaire : 14 – Domotique : température et humidité (boa-pi-homedashscreen.com/pihomedashscreen-et-domotique-temperatures-et-humidite/), à changer je pense.

    Encore merci
    Thierry

    Répondre ↓

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.