Cadre photo sur DashScreen Cadre photo sur DashScreen
Menu










Cadre photo sur DashScreen

28 janvier 2015 - DashScreen DashBoard

Comme je n’avais pas de cadre photo chez moi j’ai trouvé sympa d’en mettre un sur mon DashScreen. 🙂

J’ai repris le module de Sébastien de cette page !  Que j’ai un peu modifié car il ne fonctionnait pas chez moi.

En plus j’ai créé un petit programme qui me permet de rajouter une photo directement de mon téléphone 🙂 Comme cela j’ai des photo à jour.

Sur le fichier index.php: juste le DIV

<br />
<div id="photo"></div>
<p>

Sur le style.css: 

div#photo
{
right : 200px;
top : 250px;
position : absolute;
width : 200px;
height : 200px;
background-color : rgba(0, 0, 0, 0);
}

Je place par rapport à la droite et le haut. J’ai choisi  de limiter le DIV a 200px par 200px car si l’image est trop grande et grosse le temps de chargement est trop long il y aura de long moment sans photo et c’est pas très jolie pour un cadre photo.

Le javascript.js :

var photo_timeout;

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

meteo_timeout = setTimeout("photo()", 10000);
}

J’appelle la fonction du fichier ajax.php toutes les 10 secondes pour changer la photo.

Le fichier ajax.php :

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

On écrit « echo » le retour de la fonction photo()

Le fichier inc.php :

function photo () {
$dir = "photodiaporama/";
session_start();
$_SESSION['photos']= array();
$i=0;
if (is_dir($dir)) {
if ($dh = opendir($dir)) {
while (($file = readdir($dh)) !== false) {
$a = $dir."/".$file;
if(is_file($a)) {$_SESSION['photos'][$i++]=$dir.$file;}
}
closedir($dh);
}
}
if (!isset($_SESSION['countPhoto'])) { $_SESSION['countPhoto'] = 0;}
else{
if($_SESSION['countPhoto'] < count($_SESSION['photos'])-1)
$_SESSION['countPhoto']++;
else{
$_SESSION['countPhoto'] = 0;
}
$r ='<img heiht = "100%" width="100%" src="'; $r .= $_SESSION['photos'][$_SESSION['countPhoto']]; $r .='"/>';
return $r;
}
}

Pour cette fonction il faut utiliser les fonctions SESSION pour ne pas avoir toujours la même photo d’afficher :(Toutes les photos sont placées dans un répertoire, on les comptes, si c’est le début de la SESSION ou si toutes les photos on été affiché l’incrémentation est mise à 0 sinon on augmente de 1 ++.

La fonction retourne la BALISE IMG avec la prochaine photo.

Étiquettes :

  • Bonjour,
    Je souhaite intégrer le cadre photo dans le Dashscreen, j’ai utilisé vos codes mais n’ayant aucune connaissance dans le Javascripts je ne m’en sors pas. Pouvez vous me faire parvenir vos codes de façon à ne pas avoir de problème quant à la syntax.
    Pour info j’ai utilisé une dalle d’un pc portable et que j’ai logé avec le raspberry, dans un cadre photo.
    Merci d’avance , cordialement

  • michelgard

    Bonjour,
    Oui la partie cadre photo de mon DashScreen n’a pas été la plus facile à intégrer et à comprendre.
    Il faut avec l’ajax en javascript relancer la fonction à intervalle régulier (10 seconds) et en plus faire défiler les photos d’un répertoire pour ne pas avoir la même…
    Sur cette article il n’y a que les bouts de code correspondant à la fonction cadre photo il faut bien avoir sur le fichier index le lien sur le fichier CSS pour le placement et la taille des photos mais aussi le lien sur jquery.js pour l’AJAX et pour finir le lien sur le fichier javascript.

    L’ensemble des fichiers sur ce lien : https://github.com/Michelgard/Dash_Screen

  • Altviller ASCA

    Bonjour,
    J’ai découvert Raspberry il y a juste quelques semaines donc grand débutant. Pour apprendre, j’ai installé le Dashscreen de Magdiblog. Après quelques déboire (faut bien apprendre ! ) tout fonctionne bien. Je suis en train de rajouter votre diaporama photo. Tout est en place mais ça ne fonctionne pas. A l’affichage, j’ai juste un petit carré avec quelque chose dessus. J’ai utilisé Inspecteur, la ligne id= photo apparaît bien, le changement de photo à l’air de se faire, mais pas l’affichage. Un droit inapproprié ou autres choses ? Bref je ne trouve pas, c’est dommage, je ne dois pas être loin. A l’aide SVP ! Je joint une copie d’écran. https://uploads.disquscdn.com/images/30c966463585d7fc4cb5ae63514c6960722b2380864fbaa1e0909cd6a0e1f009.png

  • Bonjour, Oui effectivement tu ne dois pas être loin. Et comme tu le dis je pense que c’est un problème de droit.
    Je vois que tes images sont dans un dossier dans le répertoire /home/pi et je ne pense que l’utilisateur web qui doit être www-data n’a pas accès à ces images.
    Donc je te conseil de faire un essai avec le répertoire image dans le même répertoire que tes fichiers WEB (.php, .js …)

  • Feanand

    Woua, quelle rapidité ! Effectivement, avec les droits www-data dans un dossier et les photos dans www ça marche impec. Si je peux me permettre, comment faire pour accéder aux photo dans home/pi/Pictures (droits ou chemin précis, ou mettre les / par exemple) ? à 62 ans on n’est pas toujours au point !! C’est plus difficile d’apprendre ! Et encore Merci pour la solution.

    • Pas de soucis toujours pret à aider.
      Vous voulez mettre les images du cadres photo dans /home/pi/Pictures ? Je ne suis pas un spécialiste des droits mais il faut peut être mettre l’utilisateur pi dans le groupe http://www.data avec : sudo usermod -a -G www-data pi