jules/photobooth
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Cadre impose visible en overlay sur live + preview + partage

Browse Source 
- Overlay cadre sur les 3 ecrans : live (capture), preview (filtres), partage
- chargerCadreImpose() au debut de chaque capture : affiche le cadre event
- Photos sauvegardees sans cadre, cadre applique uniquement a l'impression
- afficherCadreOverlay cherche d'abord dans les cadres evenement

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Jules
2026-06-23 00:36:57 +02:00
parent e5c73d4855
commit 77b1127816
4 changed files with 44 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
frontend/css/style.css
View File

@@ -574,6 +574,7 @@ html, body {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
overflow: hidden; overflow: hidden;
position: relative;
} }
.photo-miniature img { .photo-miniature img {

8
frontend/index.html
View File

@@ -7,7 +7,7 @@
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate"> <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
<meta name="google" content="notranslate"> <meta name="google" content="notranslate">
<meta http-equiv="Content-Language" content="fr"> <meta http-equiv="Content-Language" content="fr">
<link rel="stylesheet" href="/css/style.css?v=6"> <link rel="stylesheet" href="/css/style.css?v=7">
<link rel="stylesheet" href="/css/themes.css?v=2"> <link rel="stylesheet" href="/css/themes.css?v=2">
</head> </head>
<body> <body>
@@ -86,6 +86,7 @@
<section id="ecran-capture" class="ecran"> <section id="ecran-capture" class="ecran">
<div id="preview-live" class="preview-live"> <div id="preview-live" class="preview-live">
<img id="img-preview" src="" alt="Preview"> <img id="img-preview" src="" alt="Preview">
<img id="cadre-overlay-live" class="cadre-overlay cache" src="" alt="">
<div id="cadre-guide-recadrage" class="cadre-guide-recadrage cache"></div> <div id="cadre-guide-recadrage" class="cadre-guide-recadrage cache"></div>
<div id="preview-erreur-camera" class="preview-erreur-camera cache"> <div id="preview-erreur-camera" class="preview-erreur-camera cache">
<div class="preview-erreur-icon">&#128247;</div> <div class="preview-erreur-icon">&#128247;</div>
@@ -129,6 +130,7 @@
<h2>Partagez votre photo !</h2> <h2>Partagez votre photo !</h2>
<div class="photo-miniature"> <div class="photo-miniature">
<img id="photo-partage" src="" alt="Photo"> <img id="photo-partage" src="" alt="Photo">
<img id="cadre-overlay-partage" class="cadre-overlay cache" src="" alt="">
</div> </div>
<div class="grille-partage"> <div class="grille-partage">
<button class="btn-partage" id="btn-imprimer" onclick="ouvrirImpression()"> <button class="btn-partage" id="btn-imprimer" onclick="ouvrirImpression()">
@@ -759,8 +761,8 @@
<script src="/js/websocket.js?v=3"></script> <script src="/js/websocket.js?v=3"></script>
<script src="/js/app.js?v=5"></script> <script src="/js/app.js?v=5"></script>
<script src="/js/camera.js?v=11"></script> <script src="/js/camera.js?v=12"></script>
<script src="/js/effects.js?v=3"></script> <script src="/js/effects.js?v=4"></script>
<script src="/js/gallery.js?v=3"></script> <script src="/js/gallery.js?v=3"></script>
<script src="/js/share.js?v=7"></script> <script src="/js/share.js?v=7"></script>
<script src="/js/admin.js?v=6"></script> <script src="/js/admin.js?v=6"></script>

16
frontend/js/camera.js
View File

@@ -185,6 +185,7 @@ async function lancerCapture() {
document.getElementById('photo-resultat').src = ''; document.getElementById('photo-resultat').src = '';
document.getElementById('photo-partage').src = ''; document.getElementById('photo-partage').src = '';
await chargerCadreImpose();
majCompteurAccueil(); majCompteurAccueil();
// Verifier l'etat de la camera avant de commencer // Verifier l'etat de la camera avant de commencer
@@ -435,6 +436,21 @@ async function majBoutonImprimerCompteur() {
} }
} }
async function chargerCadreImpose() {
const fmt = (config.impression?.format || '15x20').replace('-2up', '');
const data = await apiGet(`/api/cadres-impression/${fmt}`).catch(() => null);
if (!data) { afficherCadreOverlay(null); return; }
if (data.event_mode === 'impose' && data.event_cadre) {
cadreChoisi = data.event_cadre;
afficherCadreOverlay(cadreChoisi);
} else if (data.event_mode === 'defaut' && data.event_cadre) {
cadreChoisi = data.event_cadre;
afficherCadreOverlay(cadreChoisi);
} else {
afficherCadreOverlay(null);
}
}
function pause(ms) { function pause(ms) {
return new Promise(resolve => setTimeout(resolve, ms)); return new Promise(resolve => setTimeout(resolve, ms));
} }

24
frontend/js/effects.js vendored
View File

@@ -78,17 +78,33 @@ async function appliquerFiltreStrip(filtre) {
} }
function afficherCadreOverlay(nom) { function afficherCadreOverlay(nom) {
const el = document.getElementById('cadre-overlay-preview'); const ids = ['cadre-overlay-preview', 'cadre-overlay-live', 'cadre-overlay-partage'];
if (!el) return;
if (!nom) { if (!nom) {
el.classList.add('cache'); ids.forEach(id => {
el.src = ''; const el = document.getElementById(id);
if (el) { el.classList.add('cache'); el.src = ''; }
});
return; return;
} }
const config_imp = config.impression || {}; const config_imp = config.impression || {};
const fmt = (config_imp.format || '15x20').replace('-2up', ''); const fmt = (config_imp.format || '15x20').replace('-2up', '');
const event_id = (config.evenement || {}).event_id;
let src = `/assets/cadres/${fmt}/${nom}`;
if (event_id) {
const eventSrc = `/data/evenements/${event_id}/cadres/${fmt}/${nom}`;
src = eventSrc;
}
ids.forEach(id => {
const el = document.getElementById(id);
if (el) {
el.src = src;
el.onerror = () => {
el.src = `/assets/cadres/${fmt}/${nom}`; el.src = `/assets/cadres/${fmt}/${nom}`;
el.onerror = null;
};
el.classList.remove('cache'); el.classList.remove('cache');
}
});
} }
async function chargerOverlays() { async function chargerOverlays() {