❓ Qu'est-ce qu'une PWA ?
Une Progressive Web App (PWA) est une application web qui peut être installée comme une application native sur votre appareil. Klipper Overlay est une PWA, ce qui signifie:
⚡
Rapide
Chargement instantané et réactif
📴
Hors ligne
Fonctionne sans connexion Internet
🔔
Notifications
Alertes en temps réel
🏠
Accueil
Icône sur l'écran d'accueil
📱 Installation sur Mobile (iOS/Android)
Android (Chrome, Firefox, etc.)
1. Ouvrez http://your-printer-ip:8080/webcam sur votre téléphone
2. Appuyez sur le menu (⋮) en haut à droite
3. Sélectionnez "Installer l'application" ou "Ajouter à l'écran d'accueil"
4. Confirmez en appuyant sur "Installer"
✅ L'application apparaît maintenant sur votre écran d'accueil !
iPhone/iPad (Safari)
1. Ouvrez http://your-printer-ip:8080/webcam sur Safari
2. Appuyez sur Partager (carré avec flèche)
3. Sélectionnez "Sur l'écran d'accueil"
4. Entrez un nom et appuyez sur "Ajouter"
✅ L'application est maintenant accessible depuis votre écran d'accueil !
💻 Installation sur Desktop
Chrome / Edge / Brave
1. Ouvrez http://your-printer-ip:8080/webcam
2. Regardez la barre d'adresse - une icône d'installation (⊞↓) devrait s'afficher
3. Cliquez sur l'icône d'installation
4. Confirmez le nom de l'application et cliquez "Installer"
Alternativement : Menu ⋮ → "Installer Klipper Overlay"
✅ L'application s'ouvre maintenant dans sa propre fenêtre !
Firefox
Firefox supporte les PWA via le menu. Menu ☰ → "Installer Klipper Overlay"
✨ Fonctionnalités Disponibles
✅ Fonctionne Hors Ligne
Les pages suivantes sont cachées automatiquement pour fonctionner sans Internet :
- 📺 Page webcam (/webcam)
- 📊 Overlay de status (/overlay)
- 🎨 Feuilles de styles (CSS)
- ⚙️ Scripts JavaScript
⚠️ Attention : Le flux vidéo en direct et les données de statut en temps réel nécessitent une connexion Internet active.
💾 Sauvegarde Locale
Les données suivantes sont sauvegardées sur votre appareil :
- 📜 Historique des impressions
- ⚙️ Paramètres de l'overlay
- 🎨 Préférences d'affichage
🔔 Notifications
Recevez des notifications quand :
- L'impression se termine ✓
- Une erreur se produit ✕
- L'imprimante se connecte/déconnecte
🎮 Comment Utiliser
Navigation
Une fois installée, l'application fonctionne comme une app native :
- Pas de barre d'adresse (interface épurée)
- Accès rapide depuis l'écran d'accueil
- Boutons back/forward du système
- Gestes tactiles natifs (pinch-zoom, swipe)
Historique des Impressions
1. Cliquez sur 📜 Historique dans l'overlay
2. Consultez vos statistiques (total, taux de réussite, temps total)
3. Visualisez la liste complète de vos impressions passées
💡 Les données d'historique sont sauvegardées localement sur votre appareil
Zoom et Affichage
- 🔍 Zoom : Pinch sur mobile, ou boutons + / -
- ⛶ Plein écran : Cliquez le bouton 🔲
- 📐 Paramètres : Menu de configuration disponible
🔧 Dépannage
❌ L'app ne s'installe pas
Assurez-vous que :
- ✓ Vous utilisez HTTPS ou localhost
- ✓ Le navigateur supporte les PWA
- ✓ La page manifest.json est valide
- ✓ Les icônes d'app sont présentes
❌ Les données d'historique ne se sauvegardent pas
- ✓ Vérifiez que localStorage n'est pas désactivé
- ✓ Vérifiez l'espace disponible sur l'appareil
- ✓ En mode privé/incognito, les données ne sont pas persistantes
❌ Le webcam/status ne charge pas hors ligne
C'est normal ! Les données en temps réel nécessitent Internet. Seules les pages statiques fonctionnent hors ligne.
Réinitialiser l'Application
1. Supprimez l'application (écran d'accueil ou paramètres)
2. Videz le cache du navigateur ou le cache de l'application
3. Réinstallez depuis http://your-printer-ip:8080/webcam
🎨 Personnalisation
Vous pouvez personnaliser votre PWA en éditant le fichier manifest.json :
{
"name": "Klipper Overlay",
"theme_color": "#22d3ee",
"background_color": "#0a0e27",
"icons": [
{ "src": "/icon-192.png", "sizes": "192x192" },
{ "src": "/icon-512.png", "sizes": "512x512" }
]
}
Changer la Couleur Thème
Modifiez theme_color pour changer la couleur d'en-tête :
- Cyan actuel :
#22d3ee
- Rouge :
#f43f5e
- Vert :
#34d399
- Orange :
#f59e0b
Changer les Icônes
Remplacez les fichiers /public/icon-192.png et /public/icon-512.png par vos propres icônes.
⌨️ Raccourcis Clavier
| Escape |
Fermer la modal d'historique |
| H |
Afficher/Masquer la sidebar |
| F |
Plein écran (Fullscreen) |
| +/- |
Zoomer / Dézommer |