Boutons de contrôle

• menu Menu : Ouvre le panneau de paramètres complet
• fullscreen Plein écran : Active le mode plein écran (F11)
• info Infos : Affiche cette documentation
• edit_note Devlog : Affiche l'historique des versions

Astuce : Les boutons du coin supérieur droit n’apparaissent qu’au survol de la souris (toujours visibles sur écran tactile). Le Devlog se charge automatiquement depuis devlog.json.

Zones d'affichage

• Grille d'horloges : Affichage dynamique de 1 à 10 horloges avec adaptation automatique des colonnes
• Logo : Logo personnalisable en haut à gauche (optionnel)
• Météo / auditeurs / now-playing : overlays Infos (coin haut gauche / bandeau)
• Studio : lamps, AIR, FSLAMP, NOW/NEXT, delay (onglet Studio)
• Ticker Haut : Bandeau d'informations défilant en haut (optionnel)
• Cart News : Carte d'actualité intégrée dans la grille (optionnel)
• Ticker Bas : Ticker d'actualités en bas de l'écran (optionnel)

Nombre d'horloges

Vous pouvez afficher de 1 à 10 horloges simultanément. Le nombre d'horloges est configurable dans le menu des paramètres.

Fuseaux horaires

Chaque horloge peut être configurée avec un fuseau horaire indépendant :

• Sélection par ville : Recherche automatique avec autocomplétion (ex: Paris, Tokyo, New York)
• Sélection par fuseau horaire : Format IANA (ex: Europe/Paris, Asia/Tokyo, America/New_York)
• Plus de 400 villes disponibles dans la base de données

Options d'affichage par horloge

• Millisecondes : Affiche les millisecondes (format HH:MM:SS.mmm)
• Secondes : Affiche les secondes (format HH:MM:SS)
• Date : Affiche la date sous l'horloge
• Fuseau horaire : Affiche le nom du fuseau horaire
• Dernière synchronisation : Affiche l'heure de la dernière synchronisation NTP
• Delta NTP : Affiche l'offset de synchronisation et le RTT

Grille dynamique

La grille d'horloges s'adapte automatiquement au nombre d'horloges et à la taille de l'écran :

• Calcul optimal du nombre de colonnes (1 à 8) selon l'écran
• Remplissage optimal de l'écran disponible
• Adaptation responsive pour mobile, tablette et desktop
• Prise en compte de la carte actualités et du ticker bas dans le calcul

Principe

La synchronisation utilise le protocole NTP (Network Time Protocol) pour garantir une précision atomique entre toutes les horloges. Toutes les horloges affichent exactement le même temps, même si elles sont configurées avec des fuseaux horaires différents.

Calcul du délai réseau

• Mesure du temps aller-retour (RTT) avec performance.now() pour une précision sub-milliseconde
• Estimation du délai réseau : délai = RTT / 2
• Le serveur envoie son temps au moment de la réception de la requête

Calcul de l'offset NTP

• Le serveur PHP enregistre le temps de réception de la requête HTTP et ajuste le temps NTP pour compenser le délai UDP
• Formule : offset = temps_serveur_ajusté - (temps_client_fin - RTT/2)
• Filtrage par moyenne mobile sur les 5 dernières mesures
• Lissage exponentiel (70% ancien, 30% nouveau) pour éviter les sauts brusques

Synchronisation atomique

• Un seul timestamp partagé calculé par frame avec Date.now() pour garantir la précision
• Toutes les horloges utilisent le même timestamp atomique
• Application de l'offset NTP au timestamp partagé pour synchronisation précise
• Mise à jour toutes les 2 minutes pour maintenir la précision
• Le serveur PHP ajuste automatiquement le temps NTP pour compenser le délai de requête UDP

Serveurs NTP disponibles

Vous pouvez choisir parmi 23 serveurs NTP mondiaux :

• pool.ntp.org (Global)
• time.google.com (Google)
• time.cloudflare.com (Cloudflare)
• time.windows.com (Microsoft)
• time.apple.com (Apple)
• time.nist.gov (NIST USA)
• ntp1.hetzner.de (Hetzner DE)
• ntp2.hetzner.de (Hetzner DE 2)
• ntp1.inria.fr (INRIA FR)
• ntp2.inria.fr (INRIA FR 2)
• ntp.univ-lyon1.fr (Lyon FR)
• ntp.obspm.fr (Observatoire Paris FR)
• time1-4.google.com (Google 1-4)
• 0-3.pool.ntp.org (Pool 0-3)
• europe.pool.ntp.org (Europe)
• north-america.pool.ntp.org (Amérique du Nord)
• asia.pool.ntp.org (Asie)
• oceania.pool.ntp.org (Océanie)

Résultat : Synchronisation sub-milliseconde garantie entre toutes les horloges, même avec des fuseaux horaires différents.

monitoring État de synchronisation en temps réel

Sauvegarde de preset

1. Configurez tous les paramètres souhaités (couleurs, horloges, fuseaux horaires, etc.)
2. Entrez un nom pour votre preset dans le champ "Nom du preset"
3. Cliquez sur Save pour sauvegarder
4. Le preset est sauvegardé côté serveur au format XML

Chargement de preset

1. Sélectionnez un preset dans la liste déroulante
2. Le preset est automatiquement chargé et appliqué
3. Tous les paramètres sont restaurés (couleurs, horloges, fuseaux, etc.)

Suppression de preset

1. Sélectionnez le preset à supprimer dans la liste
2. Cliquez sur Delete
3. Confirmez la suppression

Paramètres sauvegardés

Les presets sauvegardent tous les paramètres suivants :

• Couleurs (minutes, marqueurs, texte, fond)
• Police de caractères
• Taille de police
• Nombre d'horloges
• Fuseaux horaires de toutes les horloges
• Noms de villes de toutes les horloges
• Options d'affichage (millisecondes, date, etc.)
• Configuration RSS
• Logo personnalisé
• Serveur NTP
• Mode BBC/France

Sources disponibles

Plusieurs flux RSS sont disponibles :

• France Info - Sports : Actualités sportives
• France Info - Cinéma : Actualités cinématographiques
• France Info - Politique : Actualités politiques
• France Info - Les Titres : Titres de l'actualité
• France Info - Élections : Actualités électorales
• BFMTV - Titres : Actualités en continu
• CNEWS : Informations générales
• France Bleu - Infos : Actualités locales et nationales
• RMC Sport - Jeux Olympiques : Actualités sportives
• Le Monde - Politique : Actualités politiques

Modes d'affichage

• Ticker Haut : Bandeau défilant en haut de l'écran avec titre et extrait (police FranceTVBrownTT-Regular)
• Cart News : Carte intégrée dans la grille d'horloges avec titre, extrait, date/heure et emoji (police FranceTVBrownTT-Regular)
• Ticker Bas : Ticker en bas de l'écran style CNBC avec titre en majuscules et extrait sur 2 lignes. Background utilise la couleur LED désactivée (color_minutes avec opacité 0.2) et texte en couleur personnalisée (police FranceTVBrownTT-Regular)

Fonctionnalités

• Mise à jour automatique toutes les minutes
• Détection automatique d'emojis pertinents selon le contenu
• Transitions en fondu pour les changements de nouvelles
• Affichage de la date et de l'heure pour chaque nouvelle

Couleurs

• Couleur des minutes : Couleur des marqueurs de minutes (LED)
• Couleur des 5 minutes : Couleur des marqueurs de 5 minutes
• Couleur des marqueurs : Couleur des marqueurs principaux
• Couleur du texte : Couleur du texte de l'horloge
• Couleur de fond : Couleur de fond de l'horloge

Polices

• Police par défaut : FranceTVBrownTT-Regular utilisée partout dans l'interface (menus, tickers, documentation)
• Police des horloges : Plusieurs polices disponibles (MiniSystem, LED, Digital, etc.) incluant FranceTVBrownTT-Regular
• Dates et villes : Toujours affichées en FranceTVBrownTT-Regular dans les horloges, indépendamment de la police de l'heure
• Taille de police : Ajustable via un slider (0.5x à 2.0x)

Logo

• Upload de logo : Téléchargez votre propre logo (PNG/JPG)
• Redimensionnement automatique : Le logo est automatiquement redimensionné
• Affichage conditionnel : Option pour afficher/masquer le logo

Mode BBC/France

Switch pour basculer entre les marqueurs de style wharton (BBC) et gorgy (France TV).

Taille de l'heure

Le curseur taille heure (Apparence) contrôle directement la fonte. L'heure est recentrée horizontalement selon l'encre réelle (utile pour polices 7-seg / italiques). Les contrôles UI n'apparaissent qu'au survol.

Le bouton Devlog (icône notes, coin supérieur droit) ouvre le journal des versions. Le contenu est chargé automatiquement depuis devlog.json (pas de HTML figé).

• Versions groupées (ex. 2.1 — Août 2026) avec liste de nouveautés
• La version courante est mise en avant (current: true)
• Rechargement à chaque ouverture du popup (cache-busting)
• Même source que le changelog cité en bas de la documentation

Pour publier une mise à jour côté front : éditer devlog.json — l’UI se met à jour sans redeploy JS.

Onglets Studio et Minuteurs du panneau de paramètres.

• Lamps LED 1–4 : Voyants MIC / PHONE / ON AIR / DOOR (labels et couleurs personnalisables)
• AIR / timers : Chronos AIR, Top of Hour, competition countdown
• FSLAMP : Lampe plein écran (ex. DUMPED) avec timeout / blink
• NOW / NEXT / WARN : Lignes de conduite affichées sous / autour de l'horloge
• Delay : Barre de retard (pourcentage)
• Silence / VU : Détection audio navigateur → alerte / FSLAMP
• Conduite : Import CSV / iCal pour alimenter NOW/NEXT

Modes URL

• ?view=display — vue affichage (plateau)
• ?lock=1 / ?kiosk=1 — verrouille l'interface
• ?follow=1 — mode esclave (suit le maître via SSE)
• ?peer=salle — esclave PeerJS P2P (voir Réseau)

Télécommande tactile : remote.html (bouton « Copier l'URL de la télécommande » dans Réseau → API).

Onglet Infos du panneau de paramètres.

Météo

• Jusqu'à 3 villes via Open-Meteo (pas de clé API)
• Si la ville 1 est vide → suit la ville de l'horloge
• Affiche température, ressenti, humidité, vent, prévision 3 jours

Auditeurs

• URL de statut Icecast (/status-json.xsl) ou Shoutcast (/stats?json=1)
• Affiche le nombre d'auditeurs (rafraîchi ~60 s)

Now playing

• Sources : Icecast / Shoutcast, ICY StreamTitle, URL JSON, ou push API NOW:
• Option Appliquer sur NOW / NEXT pour alimenter les lignes studio

API / télécommande

Exemple : api_production.php?action=command&cmd=LAMP1:ON

• Commandes : LAMP1-4, AIR, FSLAMP:…, NOW:…, DELAY:n, PROFILE:nom…
• Temps réel : SSE (api_events.php) ; polling en secours
• Clé API optionnelle : champ dans Réseau → API (header X-Api-Key)

Multi-écrans (SSE)

• Maître : publie l'état (status_push)
• Esclave : case « Mode esclave » ou ?follow=1
• Bouton « Ouvrir une vue esclave »

PeerJS (P2P)

1. Sur l'écran régie : activer PeerJS, choisir une salle (ex. studio), rôle Maître (ou Auto)
2. Sur le plateau : Copier URL esclave P2P → ?peer=studio&follow=1&view=display
3. L'état (lamps, NOW/NEXT, timers…) est diffusé en WebRTC, sans passer par le PHP

Signalling cloud par défaut (0.peerjs.com) ; serveur PeerJS custom possible dans les options avancées.

Passerelles UDP / MQTT

• UDP port 3310 (consoles Axia / Wheatstone…) — udp-gateway.php
• MQTT + discovery Home Assistant — config UI Gateways + mqtt-bridge.php

• F11 : Basculer en mode plein écran
• ESC : Fermer les popups (paramètres, infos, devlog)
• menu (Menu) : Ouvrir/fermer le menu des paramètres
• Ctrl+P / Cmd+P : Exporter la page en PDF (voir section Export PDF ci-dessous)

Export de la documentation

Vous pouvez exporter la documentation cybersécurité au format PDF pour archivage ou partage avec votre équipe de sécurité.

Méthode 1 : Export via navigateur

1. Ouvrez cette popup d'information (bouton info)
2. Utilisez le raccourci clavier Ctrl+P (Windows/Linux) ou Cmd+P (Mac)
3. Dans la fenêtre d'impression, sélectionnez "Enregistrer au format PDF" comme destination
4. Configurez les options d'impression si nécessaire (marges, orientation, etc.)
5. Cliquez sur "Enregistrer" pour générer le fichier PDF

Méthode 2 : Export de la documentation cybersécurité

Pour exporter la documentation cybersécurité complète au format PDF :

1. Accédez au fichier DOCUMENTATION_CYBERSECURITE.html sur le serveur
2. Ouvrez-le dans votre navigateur
3. Utilisez Ctrl+P / Cmd+P et sélectionnez "Enregistrer au format PDF"
4. Ou utilisez le script Python fourni : python3 generate_pdf.py

Fichiers disponibles pour export

• DOCUMENTATION_CYBERSECURITE.md : Documentation complète (12 pages)
• RESUME_CYBERSECURITE.md : Résumé exécutif (2 pages)
• MATRICE_FLUX_RESEAU.csv : Matrice des flux réseau (format CSV)
• REGLES_PAREFEU.txt : Règles de pare-feu (format texte)

Made with favorite by Arnaud GOSSET @ STUDIOTOOLS.FR -

EventClock a obtenu les meilleures certifications de sécurité disponibles, garantissant une protection optimale des données et une conformité aux standards de sécurité web.