Bonjour
Je suis en débian 12 et jeedom 4.5.
Difficulté: Moyen - Novice
Prérequis; - Maitriser un tant soit peu le fonctionnement design
- Savoir naviguer dans l’éditeur de fichier
- Savoir un tant soit peu comprendre la disposition de style html
- Maitriser un tant soit peu Fully kiosk
Ici je vous partage ma p’tit création d’un diaporama sur tablette qui affiche
mes designs car il est plus agréable d’avoir des photos que jeedom toute la journée…
J’ai préparé le terrain:
1 -Créé un dossier diaporama (pour moi ici: html/data/img/Perso/Diaporama)
2 - Créé un dossier scripts (pour moi ici: html/data/scripts)
3 - Créé un dossier desktop s’il n’existe pas (pour moi ici: html/core/php/desktop)
-
Dans le dossier Diaporama on y met les photos que l’on veut voir au format jpeg (en
paysage de préférence, c’est plus joli). -
Le dossier scripts pour y mettre le fichier PHP sauvegardé (voir plus loin)
-
Le dossier desktop car là sera automatiquement le fichier PHP même après une
mise à jour de jeedom (et oui à chaque mise à jour jeedom le fichier disparait)
J’ai créé une nouvelle page design: (Je ne rentre pas dans les détails de comment faire
et mettre en page les fonctions pour designs)
1 - Ajouter un composant TXT/HTML et coller ce code: (Vérifier et corrigé en fonction
de votre emplacement du dossier à la section: RÉCUPÉRATION DES IMAGES DE JEEDOM).
Dans la section CONTENEUR DU DIAPORAMA vous pouvez régler la hauteur et largeur
<!-- ================= CONTENEUR DU DIAPORAMA ================= -->
<!-- Tu peux changer ici la largeur et la hauteur du diaporama -->
<div style="width:1275px; height:795px; position:relative; overflow:hidden;">
<img id="imgA"
style="width:100%; height:100%; object-fit:cover; position:absolute; top:0; left:0; opacity:1;">
<img id="imgB"
style="width:100%; height:100%; object-fit:cover; position:absolute; top:0; left:0; opacity:0;">
</div>
<!-- ================= CSS : EFFET KEN BURNS ================= -->
<style>
/*
👉 ICI TU RÈGLES LE ZOOM LENT
- scale(1.15) = force du zoom (1.1 = doux / 1.25 = fort)
- translate = déplacement pendant le zoom
*/
@keyframes kenburns {
0% {
transform: scale(1) translate(0, 0);
}
100% {
transform: scale(1.15) translate(-3%, -3%);
}
}
/*
👉 ICI TU RÈGLES LA DURÉE DU ZOOM
- 10s = 10 secondes
- METS LA MÊME VALEUR QUE LE TEMPS DU DIAPORAMA (voir plus bas)
*/
.kenburns {
animation: kenburns 10s ease-in-out forwards;
}
</style>
<!-- ================= JAVASCRIPT : DIAPORAMA ================= -->
<script>
(function () {
/*
👉 FONCTION QUI MÉLANGE LES PHOTOS
(ordre aléatoire sans répétition)
*/
function shuffle(array) {
for (let i = array.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[array[i], array[j]] = [array[j], array[i]];
}
return array;
}
/*
👉 RÉCUPÉRATION DES IMAGES DE JEEDOM
(diaporama.php fournit la liste des photos)
*/
fetch('/core/php/desktop/diaporama.php')
.then(res => res.json())
.then(images => {
// Si aucune image, on arrête
if (!images || images.length === 0) return;
// Mélange initial des images
shuffle(images);
let index = 1; // Position dans la liste des images
let active = 'A'; // Image actuellement visible (A ou B)
const imgA = document.getElementById('imgA');
const imgB = document.getElementById('imgB');
/*
👉 RELANCE L'ANIMATION KEN BURNS À CHAQUE IMAGE
*/
function applyKenBurns(img) {
img.classList.remove('kenburns');
void img.offsetWidth; // Astuce technique pour forcer le redémarrage
img.classList.add('kenburns');
}
// ================= IMAGE DE DÉPART =================
imgA.src = images[0];
imgA.style.opacity = 1;
imgB.style.opacity = 0;
applyKenBurns(imgA);
// ================= BOUCLE DU DIAPORAMA =================
setInterval(() => {
/*
👉 ICI TU RÈGLES LE TEMPS D'AFFICHAGE D'UNE PHOTO
- 10000 = 10 secondes
- 15000 = 15 secondes
*/
const nextSrc = images[index] + '?v=' + Date.now();
index = (index + 1) % images.length;
// Quand toutes les photos sont passées, on remélange
if (index === 0) shuffle(images);
const preload = new Image();
preload.onload = function () {
/*
👉 EFFET DE FONDU ENTRE imgA ET imgB
(ne pas toucher sauf si tu veux changer la vitesse du fondu)
*/
if (active === 'A') {
imgB.src = nextSrc;
applyKenBurns(imgB);
imgB.style.transition = 'opacity 3s linear';
imgA.style.transition = 'opacity 4s linear';
imgB.style.opacity = 1;
imgA.style.opacity = 0;
active = 'B';
} else {
imgA.src = nextSrc;
applyKenBurns(imgA);
imgA.style.transition = 'opacity 3s linear';
imgB.style.transition = 'opacity 4s linear';
imgA.style.opacity = 1;
imgB.style.opacity = 0;
active = 'A';
}
};
preload.src = nextSrc;
}, 10000); // ⏱ TEMPS ENTRE CHAQUE PHOTO (à synchroniser avec le zoom)
});
})();
</script>
<!-- ================= RAFRAÎCHISSEMENT JEEDOM ================= -->
<script>
/*
👉 Recharge la page si on sort d'un plan Jeedom
(sécurité d'affichage)
*/
setInterval(() => {
if (window.location.href.indexOf('plan_id=') === -1) {
window.location.href = window.location.href;
}
}, 30000);
</script>
2 - Lors du diaporama pour revenir dans une page jeedom, j’ai:
Ajouter un lien vers un design (mettre la page du design que vous souhaité et bien mettre dans le paramètre profondeur niveau 2 et à rendre transparent et que la dimension du cadre occupe au moins 70% de la taille du diaporama et en 1 clic avec le
doigt à n’importe place de l’écran tactile puisse aller sur votre page design choisi.
3 - Mise automatique pour faire apparaitre le diaporama sur la tablette:
- Créer un fichier TXT dans le dossier scripts et renommer le diaporama.php
- Copier et coller le code suivant: (dans la section Dossier contenant les images vérifier
fonction de votre emplacement dossier Diaporama).
<?php
header('Content-Type: application/json');
// Dossier contenant les images
$dir = $_SERVER['DOCUMENT_ROOT'] . '/data/img/Perso/Diaporama/';
$images = [];
if (is_dir($dir)) {
$files = scandir($dir);
foreach ($files as $file) {
if (preg_match('/\.(jpg|jpeg|png|gif)$/i', $file)) {
$images[] = '/data/img/Perso/Diaporama/' . $file;
}
}
}
// Renvoie la liste en JSON
echo json_encode($images);
3 - Créer un scénario pour la mise en copie du fichier PHP dans le dossier html/core/php/desktop
- déclencheur: rechecher un truc qui ressemble à ça: #[MAISON][Info jeedom][Version jeedom:]#
- Créer un bloc code et mettre ceci: (Vérifier le chemin d’accès dans la section
Chemins
// ────────── Chemins ──────────
$source = '/var/www/html/data/scripts/diaporama.php';
$dest = '/var/www/html/core/php/desktop/diaporama.php';
// ────────── Début scénario ──────────
echo "🔹 Début scénario restauration diaporama\n";
// Vérifie que le fichier source existe
if (!file_exists($source)) {
echo "❌ Fichier source introuvable : $source\n";
echo "🔹 Fin scénario\n";
return;
}
// Vérifie si le fichier destination existe ou a été modifié
$needRestore = false;
if (!file_exists($dest)) {
echo "⚠️ Fichier desktop manquant → restauration nécessaire\n";
$needRestore = true;
} else {
// Vérifie l'intégrité avec hash MD5
$sourceHash = md5_file($source);
$destHash = md5_file($dest);
if ($sourceHash !== $destHash) {
echo "⚠️ Fichier desktop modifié → restauration nécessaire\n";
$needRestore = true;
}
}
// Copie si nécessaire
if ($needRestore) {
if (copy($source, $dest)) {
chmod($dest, 0644); // permissions correctes
echo "✅ Diaporama restauré avec succès dans $dest\n";
} else {
echo "❌ Erreur : impossible de copier le fichier vers $dest\n";
}
} else {
echo "ℹ️ Fichier desktop correct → aucune action nécessaire\n";
}
// ────────── Fin scénario ──────────
echo "🔹 Fin scénario restauration diaporama\n";
4 - Faire exécuter le scénario et normalement vous devriez avoir le fichier Diaporama.php dans le dossier desktop (/var/www/html/core/php/desktop/diaporama.php).
Dans les paramètres de fully kiosk vous pouvez donner un url qui correspondra à votre
page design diaporama et que cette page revienne au bout de x secondes ou minutes.
Lorsque vous pointer votre doigt sur l’écran tactile vous serez rediriger vers votre page
design que vous aurez choisi.
ici pour une bonne approche fully kiosk
Ici la doc fully kiosk en français aussi
Cela fait plus de 2 mois que cela fonctionne chez moi.
Bonne découverte