La manière la plus souple pour afficher des données sur un écran est d’utiliser le langage HTML (comme pour les pages web). Pour rendre le tout un peu plus dynamique, nous utiliserons PHP et un peu de JavaScript. Ces technologies et langages sont très répendues (web) et très simples à utiliser.

En résumé, le Pi HomeDashScreen est un navigateur web, qui affiche une page web Le gros avantage de cette solution, c’est que vous pouvez avoir plusieurs écrans dans votre maison qui affichent la même URL. Si cette URL est accessible depuis l’extérieur de votre réseau, vous pouvez afficher  votre écran d’information depuis n’importe où

Dans mon cas, le serveur web est installé directement sur le Pi qui est relié à l’écran. Mais vous pouvez très bien vous contenter d’afficher l’URL publiée par un serveur distant

Note : Pour être franc, c’est la partie la plus chi… la moins intéressante ! Si vous savez installer un serveur web et lancer une application au démarrage du système, passez directement à la suite. Notez toutefois que j’explique ici comment lancer une application (Firefox/Chromium), sans gestionnaire de connexion (ou display manager), sans gestionnaire de bureau et avec un gestionnaire de fenêtre minimaliste. Pour avoir passé plusieurs jours à trouver comment faire, je pense que ça peut être utile Rien que l’auto-login en mode console, ça peut servir !

Note : Ce tuto a été mis à jour le 16.03.2015 pour fonctionner facilement avec une installation classique des dernières versions de Raspbian. Un grand merci à chipsetseo et au magazine The MagPi pour les infos

Note 2 : Je précise que le but est ici de ne pas passer par un environnement de bureau (tel que LXDE disponible par défaut sous Raspbian) inutile et lourd pour afficher une page web, mais simplement un gestionnaire de fenêtre (et notamment openbox) qui est nécessaire et suffisant pour l’affichage d’une fenêtre d’un navigateur comme Chromium. Il convient donc de ne pas activer l’interface graphique via l’outil raspi-config ; voire même de la désinstaller totalement en suivant ce tuto : Supprimer les paquets inutiles pour alléger Raspbian

Installation des paquets

Je ne reviens pas sur l’installation de Raspbian sur la carte SD, ce sujet ayant été traité de nombreuses fois, et notamment dans les projets Pi TimeLapse et Pi CarJukeBox. Partons du principe que vous avez un Pi fonctionnel sous Raspbian, configuration réseau effectuée (ethernet ou wifi) et un accès à Internet.

Vous allez avoir besoin de quatres composants clés :

• Apache : serveur web, pour assurer la publication du contenu à afficher
• PHP : pour pouvoir traiter dynamiquement les données à afficher
• Chromium : pour afficher le contenu HTML à l’écran
• Openbox : gestionnaire de fenêtre très léger pour gérer l’affichage de Firefox
• xinit : permet d’installer tout ce qu’il faut pour le serveur X (qui se charge véritablement d’afficher toutes ces choses à l’écran)

Pour installer ces composants, utilisez la commande suivante :

apt-get install apache2 php5 php5-cli chromium openbox xinit

Toutes les dépendances seront installées automatiquement.

Nous aurons ensuite besoin d’un certain nombre d’outils :

• imagemagick : pour manipuler des images
• xplanet : pour générer les images de la terre et de la lune
• unclutter : pour masquer le curseur de la souris
• x11-xserver-utils : pour gérer la mise en veille de l’écran

Comme précédemment nous utilisons la commande apt-get install :

apt-get install imagemagick php5-imagick php5-gd xplanet unclutter mingetty x11-xserver-utils

Configuration

Le but est qu’à chaque démarrage du Pi, le système lance Firefox en plein écran sur l’URL du contenu que nous souhaitons afficher, tout en masquant le curseur de la souris. Dans mon cas, je mets en veille l’écran à 1h du matin, et je le réveille à 7h30.

Apache

Rien de plus simple car nous pouvons directement utiliser la configuration par défaut ou presque. Le fichier qui nous intéresse est  /etc/apache2/sites-enabled/Default. Vous pouvez le vider et remplacer son contenu par :

<VirtualHost *:80>
        DocumentRoot /var/www
</VirtualHost>

Cette configuration minimaliste suffira pour ce que nous souhaitons faire. /var/www correspond au répertoire qui contiendra les fichiers à afficher sur l’écran.

Vous pouvez créer un fichier « /var/www/index.html » et y écrire « coucou« . Ouvrez Firefox et allez à l’adresse http://localhost (localhost, désigne la boucle locale, autrement dit, c’est votre machine, home sweet localhost !). Vous devriez voir votre message « coucou »

Lancer Chromium au démarrage sur la bonne URL

Ceci ce fait en trois étapes. Dans un premier temps, il faut s’auto-loguer en tant qu’utilisateur au démarrage du système (dans mon cas, mon nom d’utilisateur est Jarvis. On ne se moque pas ). Une fois logué, l’utilisateur lance une session du gestionnaire de fenêtre Openbox. Lorsqu’Openbox démarre, il lance à son tour Chromium.

Auto-login au démarrage en mode console

Editez le fichier /etc/inittab et remplacez la ligne :

1:2345:respawn:/sbin/getty 115200 tty1

par :

1:2345:respawn:/bin/login -f jarvis tty1/dev/tty1 2>&1

(Remplacez « jarvis » par votre nom d’utilisateur)

Lancer une session Openbox automatiquement

Cela concerne l’utilisateur qui se connecte au démarrage, nous devons donc éditer le fichier /home/jarvis/.bash_profile. Il se peut que ce fichier n’existe pas, vous devrez alors le créer et y inscrire :

startx

Lancer Firefox au démarrage d’Openbox

Très simple, il suffit d’éditer le fichier  /home/jarvis/.config/openbox/autostart et d’ajouter en fin de fichier la commande pour lancer Chromium :

chromium -kiosk –incognito

(-kiosk pour lancer en mode plein écran ; –incognito pour que chromium se lance toujours en ignorant la session précédente)

Configuration de Chromium

Nous approchons du but. Il ne reste plus qu’à configurer Firefox pour sa page d’accueil par défaut soit http://localhost. Pour cela, il suffit d’aller dans les préférences de Chromium et de saisir http://localhost dans le champ « page d’accueil ».

Mise en veille à heure fixe

Pour gérer la mise en veille de votre moniteur à heure fixe, vous pouvez utiliser CRON, qui est un planificateur de tâche. En root, tapez crontab -e puis ajouter les deux lignes suivantes :

0 1 * * *       su - jarvis -c "xset -display :0 dpms force off" # met le moniteur en veille à 1h du matin
30 7 * * *      su - jarvis -c "xset -display :0 dpms force on" #réveille le moniteur à 7h30 du matin

Ceci permet uniquement de mettre en veille le moniteur. Si vous souhaitez éteindre totalement votre Pi, vous devez remplacer les deux lignes ci-dessus par la ligne :

0 1 * * *       /sbin/shutdown -h now # éteint le PI à 1h du matin

Ceci aura pour effet d’éteindre proprement votre Pi. Il ne vous reste plus qu’à utiliser un programmateur horraire, pour couper l’alimentation et la rallumer le lendemain matin.

Installation terminée

Si vous avez bien suivi l’ensemble de ce qui est expliqué dans cet article, vous devriez voir votre page d’accueil, qui n’affiche pour le moment que « coucou », à chaque démarrage de votre Pi. A partir de maintenant, nous allons nous concentrer sur les différents modules à afficher C’est la partie la plus sympa

L’article 2 – Installation et configuration (màj le 07.07.2015) est apparu en premier sur MagdiBlog.

Cet article est réservé aux modules créés par la communauté.

Vous pouvez m’envoyer vos modules pour qu’ils soient disponibles sur cette page et téléchargeable par tous les lecteurs. Il vous suffit de me contacter via le formulaire de contact puis de m’envoyer par mail votre module sous forme d’archive zip portant le nom de votre module (ex : xplanet.zip) et contenant au moins les 4 fichiers suivants (ce qui facilitera leur intégration) :

• ajax.php
• inc.php
• javascript.js
• style.css

La présence d’un fichier readme.txt est vivement recommandée

Liste des modules créés par la communauté

1 – Module – Cadre photo (proposé par Sébastien)

• Description :Un module permettant de faire défiler des photos à l’instar des cadres photos numérique bien connus
• Sources : PiHomeDashScreen_Module-Cadre_Photo

2 – Module – Calendrier iCal (proposé par Jean-François)

• Description : Ce module très bien réalisé vous permet d’afficher le contenu de vos calendriers iCal
• Sources : PiHomeDashscreen_iCal
• Aperçu :

3 – Module – Lecteur de flux RSS (proposé par Jean-François)

• Description : Restez informé grâce à ce lecteur de flux RSS
• Sources : PiHomeDashScreen_Module-Rss
  
• Aperçu :
  

4 – Module – Email Checker (proposé par Ken)

• Description : Module d’affichage de mails non lus (module php5-imap nécessaire).
• Sources : PiHomeDashScreen_Module_EmailChecker

---

 

L’article PiHomeDashScreen – 11 – Modules créés par la communauté (màj) est apparu en premier sur MagdiBlog.

Dans mon précédent article « transformez votre Raspberry Pi en serveur domotique Z-Wave », je vous présentais le module Razberry de Z-Wave.me. Aujourd’hui, nous allons voir en détail comment utiliser cette carte d’extension pour contrôler l’allumage et l’extinction de lampes.

Module prise de courant On/Off : Everspring AN157-6

Parmi les nombreux modules Z-Wave existants, nous allons ici utiliser un module très basique qui se branche sur une prise de courant 220V standard. Doté d’une simple fonction On/Off, ce module Everspring AN157-6 est disponible presque partout : http://www.amazon.fr/gp/product/B00DMXQRJA/ref=as_li_tl?ie=UTF8&camp=1642&creative=6746&creativeASIN=B00DMXQRJA&linkCode=as2&tag=magdiblog-21&linkId=NY6FEVP5E6JTQIKV

D’une excellente qualité de fabrication et capable de supporter jusqu’à 3500W sur 16A, vous pourrez utiliser ce module pour piloter tous les appareils (ou presque) de votre maison (lampe, petit électroménager, appareil multimédia,…). Sur la face avant, il y a un bouton qui sert d’interrupteur manuel doté d’un témoin lumineux rouge qui s’allume lorsque la prise est en position « On« .

Bien que le boitier semble volumineux, il reste relativement discret comme vous pouvez le constater sur les photos ci-contre et ci-dessous.

A l’heure où j’écris cet article, je dispose de cinq de ces modules : lampe de la cuisine, lampe du bureau, lampe du séjour, lampes autour de la télé, et un pour le sapin de Noël

Razberry et Z-Way

Revenons en au module Razberry. Une fois enfiché sur le port GPIO du Pi, il ne vous reste plus qu’à booter et installer Z-Way, le soft proposé par Z-Wave.me.

Note : Z-Way est encore en béta, son aspect n’est donc pas aussi travaillé que ce dont on a l’habitude de nos jours, et les fonctionnalités restent limitées. Toujours est-il que les manques fonctionnels actuels peuvent être contournés facilement grâce à une API JSON

Vous pouvez acheter le module Razberry directement sur Amazon :

L’installation de Z-Way sur Raspbian se fait très simplement grâce au script mis à disposition sur le site du fabricant :

wget -q -O - razberry.z-wave.me/install | sudo bash

A la fin de l’installation, il suffit de rebooter le Pi. L’interface web de Z-Way est alors disponible directement sur le port TCP/8083 En vous connectant avec votre navigateur web, vous aurez le choix entre quatre interfaces.

Pour continuer, nous choisirons l’interface « Expert » qui est la plus complète (les autres interfaces étant plus des démonstrations, pour montrer le potentiel de Z-Way).

Association des modules

La première chose à faire, est d’associer (ou d’inclure pour coller ay langage Z-Wave ) nos modules « prise de courant » à notre contrôleur Z-Wave Razberry afin de créer un réseau Z-Wave. Pour cela, il suffit de se rendre dans le menu « Network->Network management » et de cliquer sur le bouton « include device« .

A ce moment là, Z-Way est à l’écoute d’un module désirant entrer dans le réseau. Sur les modules Everspring AN157-6, rien de bien compliqué, il suffit de maintenir le bouton appuyé quelques secondes jusqu’à ce que le témoin lumineux clignote (ce qui indique que le module est en mode « inclusion« ). Au besoin, voici le mode d’emploi du module : everspring_an157_doc.pdf

Note : Pour vous familiariser la technologie Z-Wave et son jargon, je vous propose de lire cet article http://domotique-info.fr/technologies-domotique/zwave/

Une fois les modules correctement ajoutés dans le réseau Z-Wave, on peut voir l’état de chacun d’eux, et les tester grâce aux boutons « On/Off » (notez bien les numéros ID des modules, nous en aurons besoin un peu plus tard)Jour ! Nuit ! Jour ! Nuit ! Jour ! Nuit ! Je vous vois rigoler, mais je vous garantis que vous ferez la même chose

Vous en conviendrez, cette interface web, bien que tout à fait fonctionnelle, n’est pas très sexy…

Nous allons maintenant créer notre propre interface web adaptée à un affichage sur smartphone

Prendre le contrôle grâce à l’API web de Z-Way

Je vous conseille de lire cette article très complet sur le sujet : http://www.openremote.org/display/docs/OpenRemote+2.0+How+To+-+Z-Wave+with+Razberry

Maintenant que vous savez tout à propos de cette fameuse API, nous allons créer une petite application web en HTML/PHP5/JavaScript.

Et voilà le résultat final sur mon smartphone

Note : Vous pouvez construire cette l’application web, soit directement sur le Pi qui détient le module Razberry, soit sur n’importe quelle autre machine Pour ma part, l’application web est exécutée sur un serveur tier

La première étape consiste à installer et configurer un serveur web Apache et PHP5. Je vous propose de suivre la procédure décrite dans cette article : PiHomeDashScreen – Installation et configuration

Une fois votre serveur web opérationnel, vous pouvez créer un répertoire « z-way » dans le répertoire par défaut d’Apache « /var/www », et y placer les fichiers décrits ci-après. L’idée est simple, il s’agit d’une simple page web qui représente chaque module par une image en forme d’ampoule (allumée ou éteinte). Lorsqu’on clique sur une ampoule, on envoie une requête AJAX qui enverra à son tour la requête HTTP GET à l’API Z-Way pour répercuter l’ordre donné

index.php

<?php
  header('Content-type: text/html; charset=utf-8');
  require_once('conf.php');
?>

<!DOCTYPE html>
<html>
  <head>
    <title>Z-Way - BOAs</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <meta http-equiv="Content-Language" content="Fr">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" media="screen" href="style.css">
  </head>
  <body>

    <?php foreach ($devices as $device_name => $device_id) { ?>
      <div onClick="zWave_AN157_set('<?php echo $device_id; ?>');">
        <img id="light_<?php echo $device_id; ?>" src="light_off.png">
        <p><?php echo $device_name; ?></p>
        <input style="width : 50px;" type="hidden" value="" id="status_<?php echo $device_id; ?>">
      </div>
    <?php } ?>

    <div onClick="zWave_AN157_set_all('on');">
      <img id="light_all_on" src="light_on.png">
      <p>All ON</p>
    </div>

    <div onClick="zWave_AN157_set_all('off');">
      <img id="light_all_off" src="light_off.png">
      <p>All OFF</p>
    </div>

    <script type="text/javascript" src="jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="main.js"></script>
    <script>
      $( document ).ready(function() {
        console.log( "ready!" );
        updateStatus ();
      });
    </script>

  </body>
</html>

 conf.php

<?php

// nom des modules ainsi que leur ID que vous trouverez dans l'interface web z-way

$devices = array(
                      'Cuisine' => 3,
                      'Salon'   => 6,
                      'Télé'    => 5,
                      'Bureau'  => 2,
                      'Sapin'   => 4
                  );

// adresse IP du Pi sur lequel Z-Way est installé

$pi_zway = "1.2.3.4";

?>

ajax.php

<?php

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

  function httpGet ($url) {
    $curl = curl_init();
    curl_setopt($curl, CURLOPT_URL, $url);
    curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
    $return = curl_exec($curl);
    curl_close($curl);
    return $return;
  }

  $cmd        = $_REQUEST['cmd'];
  $val        = $_REQUEST['val'];
  $device_id  = $_REQUEST['device_id'];
  if($val == 'on'){$val = 255;}else {$val = 0;}

  // permet de changer l'état d'un module
  if($cmd == 'set'){
    $url = "http://".$pi_zway.":8083/ZWaveAPI/Run/devices[".$device_id."].instances[0].commandClasses[0x25].Set(".$val.")";
    echo httpGet ($url);
  }

  // permet de récupérer l'état d'un module
  else if($cmd == 'get'){
    $url = "http://".$pi_zway.":8083/ZWaveAPI/Run/devices[".$device_id."].instances[0].commandClasses[37].Get()";
    echo httpGet ($url);
  }

  // permet de modifier l'état de  tous les modules
  else if($cmd == 'set_all'){
    foreach($devices as $device_name => $device_id) {
      $url = "http://".$pi_zway.":8083/ZWaveAPI/Run/devices[".$device_id."].instances[0].commandClasses[0x25].Set(".$val.")";
      echo httpGet ($url);
    }
  }

  // recupère le dernier statut
  else if($cmd == 'status'){
    $url = "http://".$pi_zway.":8083/ZWaveAPI/Data/".time();
    echo httpGet ($url);
  }

  // default
  else{
    return "";
  }

?>

main.js

Note : N’oubliez pas de télécharger la dernière version de jQuery

var status_timeout;

/* Z-Way */

function zWave_AN157_set_all (val) {
  $.ajax({
    async : false,
    type: "POST",
    url: "ajax.php",
    data: "cmd=set_all&val="+val,
    success: function(html){
      zWay_status_all ();
    }
  });
}

function zWave_AN157_set (device_id) {
  var status = $("#status_"+device_id).val();
  if(status == '255'){
    var val = 'off';
  }
  else{
    var val = 'on';
  }
  $.ajax({
    async : false,
    type: "POST",
    url: "ajax.php",
    data: "cmd=set&device_id="+device_id+"&val="+val,
    success: function(html){
      zWave_AN157_get (device_id);
    }
  });
}

function zWave_AN157_get (device_id) {
  $.ajax({
    async : false,
    type: "POST",
    url: "ajax.php",
    data: "cmd=get&device_id="+device_id,
    success: function(html){
      zWay_status (device_id);
    }
  });
}

function zWay_status (device_id) {
  $.ajax({
    async : false,
    dataType: "json",
    type: "POST",
    url: "ajax.php",
    data: "cmd=status",
    success: function(html){
      var updatetime = html['updateTime'];

      if(typeof html['devices.'+device_id+'.instances.0.commandClasses.37.data.level'] != 'undefined'){
        var level      = html['devices.'+device_id+'.instances.0.commandClasses.37.data.level']['value'];
        if(level == '255'){
          $("#light_"+device_id).attr('src', 'light_on.png');
        }
        else{
          $("#light_"+device_id).attr('src', 'light_off.png');
        }
        $("#status_"+device_id).val(level);
      }

      $("#status").html(updatetime);
    }
  });
}

function zWay_status_all () {
  $(".device_status").each(function (index) {
    var ds_id = $(this).attr('id').split("_");
    var d_id  = ds_id[1];
    zWave_AN157_get (d_id);
  });
}

function updateStatus () {
  zWay_status_all ();
  status_timeout = setTimeout("updateStatus()", 10000);
}

style.css

body {
  padding : 20px 5px;
  font-family : Arial, Helvetica;
  font-size : 14px;
  text-align : center;
  background-color : #000;
  color : #EEE;
}

div.dev {
  border : solid 1px #000;
  display : inline-block;
  text-align : center;
  padding : 5px;
  margin : 5px;
}

div.dev:active {
  border : solid 1px rgba(255,255,255,0.3);
}

div.dev:hover {
  cursor : pointer;
}

img.light {
  width : 100px;
  height : 100px;
  border : 0;
}

p.device_name {
  font-weight : bold;
  text-align : center;
}

 Enfin, voici les deux images d’ampoules utilisées :

Avertissement

Le code source ci-dessus est créer dans le cadre d’un exemple simple, il peut et doit être optimisé et sécurisé

Si vous souhaitez avoir accès à cette application web depuis l’extérieur de votre réseau local, je vous conseille fortement de mettre en place un contrôle d’accès afin d’éviter que n’importe qui ne prenne le contrôle de votre maison

Dans un prochain article, je décortiquerai une installation complète et sécurisé à double authentification : certificat client et mot de passe.

Programmer l’allumage et l’extinction des lumières à heure fixe

Il peut être intéressant de programmer l’allumage et l’extinction des lumières (ou tout autre appareil) à heure fixe. Pour cela, rien de plus simple, il suffit de lancer les requêtes HTTP GET à Z-Way en utilisant CRON

Voici ma crontab qui allume les lumières de mon séjour du lundi au vendredi de 7h à 8h, puis de 19h à 1h tous les jours de la semaine

# m h  dom mon dow   command

#########################
#  LIGHTS
#########################

 0  7 * * 1-5    /root/z-way_lights.sh on
 0  0 * * 1-5    /root/z-way_lights.sh off
 0 19 * * *      /root/z-way_lights.sh on
 0  1 * * *      /root/z-way_lights.sh off

Et voici le contenu du script /root/z-way_lights.sh :

#!/bin/bash

devices="2 3 5 6"

if [[ $# -eq 0 ]] ; then
  exit 1;
fi

if [ $1 == "off" ] ; then
  val=0
elif [ $1 == "on" ] ; then
  val=255
else
  exit 1;
fi

for n in $devices ; do
  wget -o ./z-way.api -O ./z-way.api http://127.0.0.1:8083/ZWaveAPI/Run/devices%5B$n%5D.instances%5B0%5D.commandClasses%5B0x25%5D.Set%28$val%29 
done

exit 0;

Tout cela fonctionne très bien depuis maintenant quelques semaines Il me tarde de faire l’acquisition d’autres modules Z-Wave Je pense notamment à des prises avec variateur telles que les Everspring AD142-6, pour allumer la lumière progressivement le matin dans la chambre lorsque le réveil sonne

Dans mon prochain article, je parlerai de vidéo surveillance A suivre…

L’article Contrôle de l’éclairage avec le module Z-Wave Razberry est apparu en premier sur MagdiBlog.

L’hiver arrive, et avec lui, espérons-le, la neige J’aime beaucoup la neige, c’est joli, et c’est très relaxant de regarder tomber les flocons dans le calme

Sur un écran, l’effet est le même J’utilise depuis longtemps Xsnow sur mon bureau. C’est old-school au niveau du design, mais c’est charmant de voir la neige s’amasser au desssus des fenêtres du bureau Je n’ai malheureusement pas trouvé le moyen de faire tomber les flocons de neige de Xsnow « au premier plan » c’est à dire devant la fenêtre du navigateur qui affiche les données du dashscreen.

J’ai testé de nombreuses lib javascript permetant de faire tomber de la neige sur des pages web. Certaines sont réellement très jolies : http://www.jqueryrain.com/2012/04/top-jquery-snow-falling-effect-plugin-tutorial-with-example/

En revanche, ces lib sont relativement gourmandes en ressource. Même si les scripts ne pèsent que quelques disaines de Ko pour les plus légères, leur exécution en demande beaucoup au petit processeur du Pi

Je vous propose donc aujourd’hui un tout petit module en JavaScript permettant de faire illusion sans mettre à genoux le Pi Pour l’activer sur votre dashscreen, vous devrez modifier les fichiers style.css et javascript.js comme suit :

style.css

La feuille de style permet de définir le style des <div> qui contiennent les flocons :

/* snow */

div.snow
{
  position          : absolute;
  width             : 1px;
  height            : 1px;
  font-weight       : bold;
  color             : #FFF;
  z-index           : 99999;
}

javascript.js

Inutil de créer une <div> dédiée dans la page index.php, nous utiliserons la div « main » comme conteneur.

/* snow */

var nb_flakes = 40;      // nombre de flocons
var speed     = 15000;   // vitesse en ms +- 5 secondes
var size      = 1;       // taille des flocons

function snowFall (id) {
  var duration = Math.floor((Math.random()*5)+1)*1000+speed;
  var left = Math.floor((Math.random()*200)+1);
  $("#"+id).animate({
    top: "+=760",
    left : "+="+left
  },
  duration,
  function() {
    var flake_size = Math.floor((Math.random()*20)+10*size);
    var left = Math.floor((Math.random()*1360)+1);
    $(this).css('top', -20).css('left', left).css('font-size', flake_size);
    snowFall(id);
  });
}

function snow () {
  for(var i=0;i<=nb_flakes;i++) {
    var left = Math.floor((Math.random()*1360)+1);
    var flake_size = Math.floor((Math.random()*20)+10*size);
    $("#main").append('<div class="snow" id="s'+i+'" style="left : '+left+'px; font-size : '+flake_size+'px; ">*</div>');
    snowFall("s"+i);
  }
}

La fonction snow() va créer des <div> contenant des « * » (pour représenter les flocons de neige) de tailles différentes et va les ajouter dans la div « main« . Puis pour chaque <div> « flocon« , la fonction snowFall() va les faire défiler de haut en bas a des vitesses différentes et selon des angles différents donnant l’illusion d’une véritable chute de neige

 

L’article PiHomeDashScreen – 13 – Faire tomber la neige est apparu en premier sur MagdiBlog.