Image : http://rigor.com/blog/2014/08/internal-dashboard-kpis-apis-raspberry-pis

Tuto : Un dashboard avec votre Raspberry Pi

Le Raspberry Pi peut servir pour tout un tas de projets. Aujourd’hui je vous propose de créer votre propre Dashboard avec un grand nombre de widgets : Google Maps avec la circulation en live, flux RSS, météo, tweets, et bien d’autres données en temps réel… Ce dashboard est possible grâce à Dashing, un module développé en ruby et très facile à mettre en place !

Image : http://rigor.com/blog/2014/08/internal-dashboard-kpis-apis-raspberry-pis
Image : http://rigor.com/blog/2014/08/internal-dashboard-kpis-apis-raspberry-pis

Prérequis pour ce tuto :

– Un Raspberry Pi (B, B+, 2)
– Une carte SD de 8Go minimum (class 10 idéalement)
– Une connexion internet (via WiFi ou Ethernet)

Vous devez avoir un Raspbian d’installé dessus, je vous passe la procédure d’installation il y a pleins de bons tutos sur internet qui expliquent comment faire.

>> Commandez dès maintenant votre kit Raspberry Pi 2 (livraison en 1 jour ouvré)

Installer Dashing sur le Raspberry Pi

Lorsque Raspbian est installé et configuré sur votre Raspberry Pi, entrez les commandes suivantes (ligne pas ligne) et validez à chaque fois l’installation :

sudo apt-get install libssl-dev
sudo apt-get install ruby-dev
sudo apt-get install nodejs
sudo apt-get install bundler
sudo apt-get install rubygems
sudo gem install dashing

La dernière commande prend au moins 10 minutes à s’installer, ne soyez donc pas étonnés si le Raspberry Pi semble bugué. Soyez patient…

Installation de Chromium

On va maintenant installer le navigateur Chromium, pour ce faire, toujours dans une invite de commande, saisissez cette ligne :

sudo apt-get install unclutter x11vnc chromium-browser

Création du Dashboard

On peut maintenant créer le dashboard via le module Dashing (saisissez les commandes ligne par ligne) :

sudo dashing new dashboard_project
cd dashboard_project
sudo bundle
dashing start

Ne fermez pas l’invite de commande, pour laisser le service Dashing tourner en tâche de fond. Par ailleurs, ces trois dernières commandes seront à faire si vous redémarrez votre Raspberry Pi.

Il ne vous reste plus qu’à lancer le navigateur Chromium et à vous rendre à l’adresse suivante : http://localhost:3030

N’oubliez pas de passer en mode plein écran pour profiter au maximum de ce dashboard (touche F11 du clavier).

dashboard raspberry pi dashing

Vous n’obtiendrez pas un dashboard complet comme celui-ci dessus, mais comme vous vous en doutez, tout est personnalisable.

Les fichiers de configuration pour votre dashboard

Le fonctionnement de Dashing est très simple, un dossier dashboard_project a été créé et à l’intérieur se trouvent plusieurs autres sous dossiers et fichiers.

Les dossiers les plus importants sont :

/dashboards : Contient les fichiers de configuration principale
/jobs : Contient les fichiers de paramètre des widgets
/widgets : Contient tous les widgets à afficher

Configuration de l’affichage des widgets

Pour faciliter la configuration de Dashing, assurez-vous d’avoir activé le SSH sur le Raspberry Pi et utilisez un client comme FileZilla pour vous connecter en SFTP et accéder aux répertoires.

SFTP raspberry pi

Allez dans le dossier dashboards et ouvrez le fichier sample.erb avec un éditeur de texte ou un logiciel tel que Notepad++ par exemple.

Ce fichier est simple à comprendre, chaque widget est inséré de la manière suivante :

<li data-row="1" data-col="1" data-sizex="2" data-sizey="1">
      <div data-id="welcome" data-view="Text" style="background-color:#315157;" data-title="Bonjour Adrien" data-text="Bienvenue sur votre Dashboard personnel"></div>
</li>

data-row : numéro de ligne
data-col : numéro de colonne
data-sizex : largeur du widget
data-sizey : hauteur du widget

Ensuite, chaque widget utilise des balises data propre à son fonctionnement. Heureusement, c’est vraiment simple à comprendre et parfois il n’est même pas nécessaire de modifier quoi que ce soit.

Tout en haut de ce fichier, je vous conseille d’insérer ces quelques lignes, qui permettront de personnaliser plus précisément la taille des widgets et d’adapter l’affichage à la résolution de votre écran.

<script type='text/javascript'>
$(function() {
  // These settings override the defaults set in application.coffee. You can do this on a per dashboard basis.
  Dashing.widget_base_dimensions = [320, 240] // [largeur,hauteur]
  Dashing.numColumns = 4 //Nombre de colonnes
});
</script>

Les widgets du dashboard

Dashing permet de créer facilement des widgets et de ce fait, une large communauté s’est créée pour développer tout un tas de widgets très utiles et modifiables.

Vous pouvez consulter la liste (régulièrement mise à jour) sur le github du projet

Comme vous pouvez le constater, il en existe plus d’une cinquantaine et parmi eux on peut trouver : Google Maps, Twitter, Google Analytics, la surveillance d’un serveur, la météo, l’affichage d’une caméra IP, un lecteur de musique, la disponibilité des Vlib sur Paris..

Une procédure d’installation et de configuration accompagne à chaque fois les widgets qui sont proposés !

Si vous trouvez ce dashboard très utile, n’hésitez pas à me le faire savoir afin que je puisse vous proposer un second tuto avec la création de widgets pour afficher des données en temps réel sur ce dashboard.

Le site du projet (avec quelques exemples) : dashing.io
Le GitHub de Dashing

>> Le Raspberry Pi 2 vous tente ? Commandez-le dès maintenant (livraison 1 jour ouvré)

Fondateur de networkshare.fr, ce site me permet de publier tout ce que j’adore : des tests de produits, des tutoriels et des astuces ! Toujours en rapport avec le vaste monde high-tech… Le tout dans la bonne humeur !
  • Merci pour ce tutoriel ! Je l’avais installé sur mon Raspberry Pi également, c’est sympa. J’avais eu un peu plus de mal en revanche sur le paramétrage des widgets.

    Je suis donc fortement intéressé pour le deuxième article ! 🙂

  • Olivier Torna

    Voici un projet très similaire, et beaucoup plus modulaire : http://www.magdiblog.fr/boa-pi-homedashscreen/1-raspberry-pi-home-dash-screen/

    • Adrien

      Ton projet est sympa, mais je le trouve moins “graphique” après c’est une question de goût.

      Pourquoi ton soft est beaucoup plus modulaire que Dashing ?

      • Olivier Torna

        Navré pour ma réponse tardive…
        Je suis d’accord, tout est question de goût. En revanche, pour qu’un dashboard domestique soit utile/ergonomique, il faut tenir compte de la lisibilité de celui ci. Il convient donc de privilégier un affichage contrastées et visible de loin (càd depuis l’autre bout du séjour par exemple). En ce sens, je ne suis pas persuadé que le design avec tuiles de couleurs et pavé de texte écrit petit soit pertinent pour cet usage.
        Pour ce qui est de la modularité, mon projet étant totalement décortiqué, de la conception à la mise en oeuvre en passant par la création de modules, il est accessible aux plus novices, et permet facilement d’être adapter à tout. En effet, ce n’est pas tellement le soft en lui même qui est intéressant, mais les principes utiliser pour créer un dashboard domestique 🙂

        • Olivier Torna

          Voici un aperçu avec les derniers modules (dont domotique : température et vidéo-surveillance) :

          • Adrien

            J’ai déjà vu ça oui 😉

  • Rachid Daoudi

    Merci pour ce tuto mais j’ai beaucoup de mal à faire fonctionner le widget pour afficher un flux RSS. En gros, rien ne s’affiche.

  • Cabra Men

    Bonjour Bonjour, après la derniere phrase (le dashing start)
    je n’obtiens qu’une erreur, la voici:
    /var/lib/gems/1.9.1/gems/execjs-2.0.2/lib/execjs/runtimes.rb:51:in `autodetect’: Could not find a JavaScript runtime. See https://github.com/sstephenson/execjs for a list of available runtimes. (ExecJS::RuntimeUnavailable)
    from /var/lib/gems/1.9.1/gems/execjs-2.0.2/lib/execjs.rb:5:in `’
    from /var/lib/gems/1.9.1/gems/execjs-2.0.2/lib/execjs.rb:4:in `’
    from /var/lib/gems/1.9.1/gems/backports-3.6.6/lib/backports/std_lib.rb:9:in `require’
    from /var/lib/gems/1.9.1/gems/backports-3.6.6/lib/backports/std_lib.rb:9:in `require_with_backports’
    from /var/lib/gems/1.9.1/gems/coffee-script-2.2.0/lib/coffee_script.rb:1:in `’
    from /var/lib/gems/1.9.1/gems/backports-3.6.6/lib/backports/std_lib.rb:9:in `require’
    from /var/lib/gems/1.9.1/gems/backports-3.6.6/lib/backports/std_lib.rb:9:in `require_with_backports’
    from /var/lib/gems/1.9.1/gems/coffee-script-2.2.0/lib/coffee-script.rb:1:in `’
    from /var/lib/gems/1.9.1/gems/backports-3.6.6/lib/backports/std_lib.rb:9:in `require’
    from /var/lib/gems/1.9.1/gems/backports-3.6.6/lib/backports/std_lib.rb:9:in `require_with_backports’
    from /var/lib/gems/1.9.1/gems/dashing-1.3.4/lib/dashing/app.rb:5:in `’
    from /var/lib/gems/1.9.1/gems/dashing-1.3.4/lib/dashing.rb:3:in `require’
    from /var/lib/gems/1.9.1/gems/dashing-1.3.4/lib/dashing.rb:3:in `’
    from config.ru:1:in `require’
    from config.ru:1:in `block in ‘
    from /var/lib/gems/1.9.1/gems/rack-1.5.5/lib/rack/builder.rb:55:in `instance_eval’
    from /var/lib/gems/1.9.1/gems/rack-1.5.5/lib/rack/builder.rb:55:in `initialize’
    from config.ru:1:in `new’
    from config.ru:1:in `’
    from /var/lib/gems/1.9.1/gems/thin-1.6.3/lib/rack/adapter/loader.rb:33:in `eval’
    from /var/lib/gems/1.9.1/gems/thin-1.6.3/lib/rack/adapter/loader.rb:33:in `load’
    from /var/lib/gems/1.9.1/gems/thin-1.6.3/lib/thin/controllers/controller.rb:182:in `load_rackup_config’
    from /var/lib/gems/1.9.1/gems/thin-1.6.3/lib/thin/controllers/controller.rb:72:in `start’
    from /var/lib/gems/1.9.1/gems/thin-1.6.3/lib/thin/runner.rb:200:in `run_command’
    from /var/lib/gems/1.9.1/gems/thin-1.6.3/lib/thin/runner.rb:156:in `run!’
    from /var/lib/gems/1.9.1/gems/thin-1.6.3/bin/thin:6:in `’
    from /usr/local/bin/thin:23:in `load’
    from /usr/local/bin/thin:23:in `’

  • Silver

    Bonjour Adrien,
    merci pour ce tuto 🙂
    J’ai des sondes de température placées ici et là dans ma maison, j’aimerai faire apparaitre les relevé de chaqu’une d’entre elles sur mon dashboard personnel, je ne parviens pas a trouver des exemples concret pour réaliser ça.

    Aurais-tu un lien où des exemples a nous montrer ? 🙂

    Merci 🙂

    • Adrien

      Bonjour Silver 🙂

      Ça doit surement être possible ! De quelle marque sont tes sondes de températures ?

      • Silver

        toute les sondes sont de marque Z-Wave

        Fibaro Motion Sensor FGMS-001
        elles font sonde de températeur, capteur de mouvement, capteur de luminosité.

  • Pingback: Raspberry Pi 2 B, un Dashboard à votre sauce ! Septième partie. | castman.fr()

  • mathieusachet

    J’ajouterai qu’il n’est pas nécessaire de laisser tourner l’invite de commandes. Tu peux lancer : “dashing start -d” pour le faire tourner en arrière-plan.

  • starlight

    merci pour ton post, pour ceux qui aurai une erreur de type : “`gem_original_require’: no such file to load — json (LoadError)”

    il vous manque ruby-json : sudo apt-get install ruby-json

  • Yann

    Tres beau projet. Je vais donc m y mettre mais aprea avoir lu plusieurs fois ton tuto en effet je sebut dans le monde de raspberry 🙂 encore merci pour le tuto

    • Adrien

      Merci !

  • Greg

    Hello,

    Pour info le projet n’est plus maintenu par les développeurs depuis quelques mois.

    Pas la bonne idée de continuer à utiliser le produit, sauf si la configuration de base fonctionne.

    • Adrien

      Hello Greg !

      Effectivement, le projet n’est plus maintenu.. Mais l’article date de plus d’un an et demi ! Merci pour l’info en tout cas, en espérant que quelqu’un reprenne le projet 🙂

  • Anthony

    bonjour, je n’ arrive pas a obtenir ruby 2.0, rpi2 raspbian wheezy

  • Gilles Dubois

    Super projet qui malheureusement ne fonctionne pas quand on tape la dernière de commande (dashing start)

    J’ai passé une semaine sans résoudre le problème ……. Dommage Dommage,

  • jabrane

    hello , thank you very much for this useful dashing work, i have a question, can i put player widget to loop my video .
    Thank you very much