4 – Module 1 – Date et Heure

Rentrons dans le vif du sujet avec ce premier module qui affiche la date et l’heure.

jarvis_screenshot_heureCe module est très simple, entièrement réalisé en JavaScript. Le module est baptisé : horloge

index.php

Dans la page d’index, c’est donc la balise <div> avec l’id horloge qui nous intéresse.

 <div id="horloge"></div>

La balise reste vide, et sera « remplie » par la fonction JavaScript.

style.css

Comme pour tous les modules, il convient de créer un div dont l’id correspond au nom du module (ici horloge) qui contiendra les informations à afficher, puis de définir sa taille et sa position sur l’écran.

/* horloge */

div#horloge
{
  right             : 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         : inherit;
}

javascript.js

Cette fonction très simple se base sur l’heure du système, et affiche les heures sur 24h et les minutes en gros, puis juste en dessous, le jour de la semaine, je jour dans le mois, le nom du mois et l’année.

var horloge_timeout;

function horloge()
{
  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 = "";}

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

Toutes les 1000 ms, soit chaque secondes, le contenu de la div horloge est mis à jour avec le contenu de la variable horloge_content. Vous pouvez d’ailleurs afficher les secondes sur l’écran si vous le souhaitez 🙂

Et voilà pour ce premier module très très simple mais parmis les plus utiles, pour se mettre en jambe 🙂

 

28 réflexions au sujet de « 4 – Module 1 – Date et Heure »

  1. Nicolas Steinmetz

    Bonjour,

    Un fichier index.html suffit amplement et il n’y a aucun pré-reqis à avoir sur PHP (ce qui peut réduire la « charge » sur le serveur).

    SInon pour manipuler les dates en JS tu peux regarder du coté de momentjs ou d’une autre librairie dont je ne trouve plus le nom (timejs ou je ne sais plus ) 🙁

    Merci en tous cas,
    NIcolas

    Répondre
    1. Olivier Auteur de l’article

      Excellente la lib momentjs, je ne connaissais pas ! Merci pour le tuyau 🙂 Attention toutefois car cette lib semble être très balaise pour simplement afficher l’heure. L’objet Date natif de JavaScript suffit amplement pour ce module qui ne nécessite pas d’opération complexe sur les dates, attention donc à ne pas surcharger inutilement l’application avec des lib « sur-dimensionnées » 🙂

      Pour le moment, pas besoin de PHP je te l’accorde. Cependant pour les prochains modules, PHP est indispensable pour traiter dynamique les données, effectuer des requêtes (ouverture de sockets pour le statut des serveurs, clients du serveurs TeamSpeak), générer des graphiques (bande passante), etc,… Dans l’absolue, le fichier index.php peut effectivement être renommé en index.html toute la partie PHP est gérée par le fichier ajax.php 🙂

      Répondre
  2. Cyril

    Hello,

    Je vais suivre ton dossier avec attention puisque j’ai en tête le même genre de chose.
    Par contre, je n’avais pas pensé à l’affichage par site internet des informations.
    Est-ce qu’une solution basée sur Conky (à confirmer si ça tourne sur RPi) ne serait pas plus légère ? (attention, je n’y connais pas grand chose, mais j’utilise Conky sur un PC qui fait office d’horloge, affichage de la météo et de photos).

    Répondre
    1. Olivier Auteur de l’article

      Hello Cyril, merci pour l’attention que tu portes à mon projet 🙂

      Conky est effectivement une excellente alternative. Cependant, je pense que cette solution comporte au moins deux inconvénients par rapport à une page web :

      – Options limitées pour le multimédia : Je ne connais pas très bien les possibilités offertes par Conky en la matière, mais j’imagine qu’il est beaucoup plus simple d’intégrer des contenus multimedia dans une page web.
      – Lisibilité des données : Je sais que les options d’affichage de Conky sont très nombreuses, mais je ne pense pas que ce soit adapté à un affichage en grand, pour pouvoir lire les infos à 5 mètres de distance de l’écran.

      L’intérêt, également, de passer par une page web (et un serveur web), comme expliqué en intro du projet, c’est de pouvoir faire des affichages déportés. Tu peux avoir le même affichage sur plusieurs écrans, PC, tablette, smartphone, affichage à distance, voir des affichages différents en passant des paramètres dans l’URL, etc,… Ce qui peut te permettre, de l’extérieur de pouvoir afficher ton dashboard et contrôler que tes serveurs vont bien, et que ta bande passante n’est pas encombrée par exemple 🙂

      Répondre
      1. Cyril

        je n’avais pas vu le besoin d’accéder aux infos de l’extérieur (d’où l’intérêt de passer par du html). Par contre, je te confirme que toutes les infos que tu affiches sur ton dashboard sont affichables avec Conky (même XPlanet).

        Répondre
        1. Olivier Auteur de l’article

          Dans tous les cas, il est préférable d’utiliser les soft et techno que l’on préfère et que l’on maîtrise le mieux 🙂

          Répondre
  3. Christophe

    Moi, je suis au taquet …
    J’apprend! donc merci bcp pour le langage et l’exemple simple et précis.
    Vivement la suite!

    Répondre
  4. Marc

    Hello Olivier,

    Du très bon boulot, et un grand merci pour ce tuto 🙂

    Je vais utiliser une partie de ton tuto pour afficher l’horloge de Paris et de New-York en simultanée, et malheureusement je n’ai pas de grande connaissance dans le monde de la programmation 🙁

    Peux-tu m’aider en ce sens?

    Merci à toi,

    Répondre
  5. ZiZiRiS

    J’avance dans ton tuto et j’essaye tant bien que mal de m’en sortir avec tes explications mais j’ai un soucis. à la fin du tuto pour le module horloge, la page affichée reste mon index.html qui m’affiche coucou. je l’ai pourtant vidée de ce texte.

    Faut il supprimer le fichier index.html ? ou alors copier le contenu de index.php dans ce fichier index.html ?

    merci de ta réponse

    Répondre
    1. ZiZiRiS

      J’ai trouvé ma réponse en tatonnant. Mais lors d’un reboot le systeme a crashé et impossible de le remettre en état. j’ai donc recommencé mais cette fois ci j’ai créé tous mes fichier sur ubuntu en installant php apache2 etc…

      et quant je demande a chrome d’ouvrir index.php…. ben rien ne s’affiche… j’ai virer tous les module sauf la date et l’heure et rien…

      Please help

      Répondre
          1. Olivier Auteur de l’article

            Il faut veillez à ce que la lib JQuery soit bien accessible. Soit directement en local, soit en utilisant le CDN de Google 🙂

  6. laurent

    Bonjour.
    Tout d’abord, merci pour tout ce que tu as fait.
    Je suis débutant et ce projet m’intéresse beaucoup car je voudrais faire travailler mes élèves dessus (je suis prof de techno).
    J’ai réussi à suivre les étapes pour afficher une page « coucou » au démarrage mais maintenant, je suis bloqué.
    Où se trouvent les fichiers index.php style.css javascript.js … ?
    Il faut les créer? A quel endroit? On remplit tout à la main ou on peut prendre ce que tu as fait? Comment?
    Voilà, ça fait beaucoup de questions mais comme j’ai dit, je débute.
    Encore merci pour ce super projet !

    Répondre
    1. Olivier Auteur de l’article

      Bonjour Laurent,
      Excellent projet pour vos élèves, si seulement j’avais pu faire ce genre de chose en cours de techno 😉
      En principe, si vous arrivez à afficher « coucou » au démarrage, c’est que vous avez bien suivi cet article : http://www.magdiblog.fr/boa-pi-homedashscreen/2-installation-et-configuration/
      Pour bien comprendre comment fonctionnent tous ces fichers (php, javascript, etc), vous pouvez vous référez à l’article : http://www.magdiblog.fr/boa-pi-homedashscreen/3-principe-de-base/
      Enfin, vous avez la possibilité de télécharger l’intégralité de ces fichiers en consultant cette page : http://www.magdiblog.fr/boa-pi-homedashscreen/11-en-resume-3/
      En vous souhaitant bonne continuation,

      Répondre
  7. laurent

    Merci pour la réponse 🙂
    C’est agréable de trouver de l’aide.
    J’ai bien lu tout le blog, qui est d’ailleurs très agréable à parcourir.
    J’ai également trouvé les ressources mises à disposition mais mon problème maintenant est bien plus basique.
    Où dois-je mettre les fichiers style, javascript etc… ?
    Je ferai un retour dès que j’obtiendrai quelque chose de correct et puis pourquoi pas une publication avec le travail de mes élèves.
    Encore merci !

    Répondre
    1. Olivier Auteur de l’article

      Merci pour les encouragements 🙂
      En principe, il suffit de les mettre dans le répertoire /var/www/

      Répondre
  8. laurent

    Quelle rapidité ! 🙂
    Je vais tester ça rapidement et je ferai un retour quand ça sera fonctionnel.
    Un très grand MERCI !

    Répondre
  9. Antoine

    Bonjour Olivier, merci pour ce super tuto !

    J’ai reussi à afficher une page blanche avec écrit « coucou » dessus au démarrage. Bon début 😀 (il m’a quand même fallut une matinée…).

    Donc maintenant, j’avance petit à petit et je veux afficher seulement le module Date et heure.

    J’ai copier les parties concernant ce module des fichiers index.php, javascript.js et style.css et je les ai mise dans le dossier /var/www.

    Je reboot et chromium m’affiche un écran noir.

    J’ai adapté la résolution de mon écran dans le fichier style.css. y a t’il d’autres modifs à faire ?

    Merci pour ton aide.

    Répondre
  10. Hat

    salut possible d avoir une image toute faite je galères trop la merci en tous ca pour le tuto

    Répondre
  11. Quentin

    Re Salut, c’est encore moi, l’emmerdeur..

    Bon j’arrive pas a afficher le module, j’ai tout relu 50 fois.

    J’ai bien dans mon /var/www tout les fichiers que tu as mis a dispositions a la fin, dont le Jquery que pas mal de monde a oublié

    Lorsque je vais sur mon index.php, j’ai juste un écran noir, rien ne m’affiche le module avec l’heure.

    Répondre
  12. Quentin

    Je vous relance car déjà je trouve que malgré que le tuto soit bien fait, c’est très dur pour les débutants comme moi d’y arriver.

    Ensuite, j’ai remarqué que vous ne répondez pas aux commentaires, ou alors vous donnez juste des liens. J’ai vu pas mal de commentaire en mode « J’y arrive pas » et soit qqn d’autre réponds, soit qqn trouve la solution par lui même.

    Je ne veux pas être offensant, mais je pense que la moindre des choses c’est d’aider ceux qui sont en difficultés surtout sur un projet comme celui-ci.

    J’ai choisi ce projet pour mon école et je suis pas dans les temps, alors j’attends un minimum d’aide car la je bloque et impossible d’avoir de l’aide.

    Je tiens a préciser que c’est juste une observation qui mène a ce constat.

    Cdt.

    Répondre
  13. NikolaSteakhouse

    bONJOUR A TOUS, Je m’apelle nikola, et je voudrai un steakhouse svp, c’est parceque j’ai faim et que je voudrai manger, ducoup je voudrai un steak house svp

    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.