TBScreen

Tableau blanc personnel à widgets pour la classe, dans l'esprit de Digiscreen. Vanilla HTML/CSS/JS, zéro dépendance, CSP stricte, licence GPL v3.

Version : 0.23.3

Ce que fait TBScreen

• Une scène 16/9 (1920×1080) qui s'adapte à tous les écrans, TBI compris.
• Plusieurs écrans par séance, dans une colonne translucide sur le bord droit (▲ / ▼ ou Page précédente / Page suivante, ＋ pour ajouter, ⋯ pour renommer, dupliquer ou supprimer ; petite croix × sur chaque numéro pour supprimer l'écran, comme les onglets de Firefox ; double-clic sur un numéro pour renommer). On change leur ordre en glissant un numéro vers le haut ou le bas (souris, doigt ou stylet). Ils sont numérotés selon leur place (« Écran 1, Écran 2… », copies comprises) ; un nom choisi à la main est gardé.
• Mode présentation (🎬 ou touche P) : la barre d'outils se cache pour laisser toute la place à la scène, et revient en approchant le haut de l'écran.
• Un fond par écran : uni, quadrillage, lignes Seyès, points ou image, avec une palette de 28 couleurs et un sélecteur libre.
• Un calque de dessin sur tout l'écran (stylo, surligneur, gomme, annuler) : on annote par-dessus les widgets, photos et PDF. Touche D pour l'activer, Échap pour le couper.
• Un menu Widget par thème, avec un champ Rechercher (sans tenir compte des accents ; Entrée ajoute le premier résultat) et un thème 🕘 Récents (mémorisé dans le navigateur).
• Des widgets déplaçables, réductibles et redimensionnables par tous les bords et les coins (le curseur devient une flèche au survol). Aimantation : en déplaçant ou en agrandissant, les bords se collent à ceux de la scène et des autres widgets, avec une ligne repère ; deux widgets accolés gardent une gouttière de 10 px (jamais de chevauchement), marquée par un petit joint coloré ; maintenir Alt pour la couper.
• Les minuteurs (Minuteur, Minuteur visuel, Quoi de neuf) et le Chronomètre continuent de tourner quand on change d'écran, et sonnent quand même.
• Une page d'aide (bouton ❓, touche ? ou F1) : fonctionnement et raccourcis clavier.
• Des modèles d'écran (menu ⋯ de la colonne des écrans) : enregistrer l'écran affiché comme modèle, créer un nouvel écran à partir d'un modèle (trois modèles fournis : Rituel du matin, Atelier de maths, Quoi de neuf ?), échanger ses modèles par fichier. Ils sont gardés dans le navigateur (IndexedDB), hors de la séance.
• Une couleur de fond par widget (bouton 🎨 de la barre de titre).
• Capture d'écran (bouton 📷) : l'écran affiché (fond, widgets, dessin) est enregistré en image PNG. Dans Electron, c'est une image exacte de la fenêtre. Dans le navigateur, la scène est redessinée : les pages intégrées, PDF et vidéos en ligne y apparaissent comme des blocs gris, et les polices de TBScreen n'y figurent que si la page est servie par un serveur web (pas en ouvrant index.html comme simple fichier).
• Copier ou déplacer un widget vers un autre écran (bouton ⧉ de la barre de titre) : choisir un écran existant ou « ＋ Nouvel écran ». La copie garde son contenu et ses réglages ; « (ici) » duplique le widget sur l'écran affiché.
• Un plein écran par widget (bouton ⛶ de la barre de titre, ou de la mini-barre en mode épuré) : le widget et son contenu s'agrandissent pour remplir la page, les barres de TBScreen et les autres widgets sont cachés. Re-cliquer sur ⛶ ou appuyer sur Échap pour revenir. Rien n'est modifié dans la séance.
• Un mode épuré façon post-it : l'épingle 📌 de la barre de titre enlève la barre et les menus, le contenu prend toute la place. Quand la souris est dans le widget (ou après un appui au doigt), une mini-barre apparaît en haut à droite : ✥ pour déplacer le widget, 📌 pour remettre les contours. Les bords restent redimensionnables. Le bouton 📌 Épuré de la barre du haut (touche E) épure ou rétablit tous les widgets de l'écran.
• Export / import JSON fidèle : le fichier importé redonne exactement la séance exportée. Le menu Fichier → Vérifier l'export / import le contrôle.
• Sauvegarde automatique locale (IndexedDB) : on retrouve sa séance en rouvrant TBScreen.

Widgets

Le menu « ＋ Widget » les range par thèmes : survoler (ou toucher) un thème affiche ses widgets à droite.

Temps

Widget	Rôle
⏱️ Minuteur	Compte à rebours, barre de couleur, sonnerie
⏳ Minuteur visuel	Disque coloré qui diminue (façon Time Timer), sur 60 minutes
⏲️ Chronomètre	Temps écoulé et temps intermédiaires
🕒 Horloge	Aiguilles et/ou chiffres, date du jour
📅 Date du jour	« Aujourd'hui, nous sommes… », avec hier et demain
🎯 Compte à rebours	« Plus que 12 jours avant les vacances » ; tous les jours ou jours de classe seulement
🗓️ Emploi du temps	Créneaux par jour, moment en cours surligné avec le temps restant ; glisser une activité pour la déplacer : les horaires s'enchaînent (durées conservées, début de journée inchangé)
🗓️ Calendrier du mois	Jours passés barrés, jour entouré, jours fériés calculés, vacances scolaires de la zone choisie (A, B ou C), événements (sur un ou plusieurs jours) et anniversaires de la classe

Vie de classe

Widget	Rôle
🙋 Tirage au sort	Tire un nom dans une liste, avec ou sans remise ; import .txt
👥 Groupes	Groupes équilibrés au hasard, nombre de groupes réglable (− N +) ; import .txt
🚦 Feu tricolore	Un clic allume une couleur et affiche son texte
🔊 Sonomètre	Niveau sonore au micro (en décibels), seuil, sensibilité, calibrage sur le calme, carillon ou son personnel avec volume
🔢 Compteur	Un grand nombre avec − et +
✅ Liste	Programme ou consignes à cocher
☁️ Nuage de mots	Les propositions s'affichent d'autant plus gros qu'elles reviennent souvent
🤝 Conseil de coopérative	« Je critique / Je félicite / Je propose », sujets marqués traités
📣 Quoi de neuf ?	Inscriptions (prénoms de la classe en puces), ordre de passage, temps de parole
🧹 Métiers de la classe	Responsabilités attribuées aux élèves, rotation d'un cran
🆘 File d'aide	Élèves qui attendent l'enseignant, dans l'ordre d'arrivée
🗳️ Vote	Une question, des choix, des barres ; résultats cachables

Maths

Widget	Rôle
🎲 Dés	1 à 6 dés, de 4 à 20 faces, avec le total
📏 Droite numérique	Nombres écrits au début et à la fin seulement (bouton « 123 » pour tous) ; graduations réglables (décimaux compris), points marqués qui révèlent leur nombre, sauts dessinés avec l'écart
🧩 Problème du jour	Problèmes classés selon Vergnaud (composition, transformation, comparaison, composition de transformations ; proportionnalité, comparaison multiplicative, produit de mesures), banque CE1 → CM1 et problèmes de l'enseignant ; énoncé, question, schéma (Vergnaud ou modèle en barres), calcul et réponse dévoilés pas à pas ; mes problèmes gardés dans le navigateur et échangeables par fichier
🧮 Boulier	Boulier 10 × 10 (compter jusqu'à 100, couleurs par 5) ou boulier de numération (2 à 6 tiges, échanges 10 contre 1 automatiques, nombre écrit et décomposé)
🧮 Tableau de numération	Jetons par colonne (C D U → centaines de mille, dixièmes, centièmes), échanges 10 contre 1
🕐 Horloge à manipuler	On déplace les aiguilles ; heure en chiffres et en lettres (« midi moins le quart »)
💶 Monnaie	Pièces et billets à glisser, total calculé (cachable)
🍕 Fractions	Disques ou barres partagés, parts à colorier, fraction écrite
⚡ Calcul flash	+, −, ×, ÷ ; l'opération s'affiche quelques secondes puis la réponse
✖️ Table de Pythagore	Cases à cacher ou révéler, table surlignée
🌞 Nombre du jour	Le nombre en lettres (orthographe 1990 ou traditionnelle), décomposé, ± 1 / ± 10 / ± 100, double et moitié… sur des fiches dévoilées une à une
🔁 Tableau de conversion	Longueurs, masses, contenances : on touche l'unité visée, les zéros ajoutés apparaissent, et la virgule seulement si elle est nécessaire
📐 Instruments de géométrie	Règle, équerre, rapporteur à déplacer et tourner (↻) ; un trait du stylo commencé près d'un bord le suit en ligne droite
📍 Géoplan	Élastiques de couleur tendus entre des clous ; deux planches côte à côte pour reproduire un modèle
📏 Droite numérique à étiquettes	Droite graduée (bornes et pas réglables) où l'on glisse des étiquettes-nombres aimantées aux unités ; double-clic pour poser une étiquette sur la droite
📐 Rapporteur	Angle à deux côtés mobiles, arc et valeur affichée ou masquée (auto-évaluation), angle au hasard, angle droit ; rapporteur gradué à poser sur le côté bleu ou à retirer
🦋 Symétrie	Cases à colorier de part et d'autre d'un axe (vertical, horizontal, diagonal), vérification et révélation
🗺️ Repérage	Quadrillage A1, B2… : coder des cases, « Trouve la case C4 », bataille navale
📊 Diagramme	Données « Pomme : 7 » en barres, barres horizontales ou pictogramme ; comptage en direct avec + et −
🧊 Matériel base 10	Plaques, barres, cubes : toucher une pièce la casse en 10, « Grouper 10 » fait l'échange inverse ; jusqu'à 99 pièces par colonne, qui rapetissent pour tenir
➗ Opération posée	Addition, soustraction, multiplication (jusqu'à 3 chiffres), division (potence) ; entiers ou nombres à virgule ; retenues en couleur ; soustraction au choix : « je casse » (on barre à gauche) ou « +10 en haut, +1 en bas » ; pas à pas expliqué ou cases à compléter par les élèves avec vérification
💯 Tableau des nombres	Grille de 100 nombres (1 à 100, 101 à 200, de 10 en 10…), cases à colorier, multiples, cases cachées à retrouver
🔟 Cadre à dix	1 à 4 cadres de 10 cases, jetons rouges et bleus : « 7 = 4 + 3, il manque 3 pour faire 10 »
🃏 Le compte est bon	Plaques et nombre cible (3 niveaux), calculs des élèves au toucher, solution trouvée par TBScreen
🦦 Suites et furet	Compter de n en n (décimaux, à rebours), nombres dévoilés un à un ou en automatique, trous à retrouver
🟦 Disposition rectangulaire	Points en lignes et colonnes ; toucher pour couper : 4 × 6 = 4 × 4 + 4 × 2
🧱 Schéma en barres	Modéliser un problème : parties et tout, comparaison, partage ; « ? » pour l'inconnue, réponse dévoilée
⚖️ Balance	Masses marquées et objets de masse cachée sur deux plateaux ; la balance penche ou s'équilibre ; catalogue de plus de 100 objets du quotidien par thèmes (jusqu'à 12 sur la balance), masses réalistes précises ou arrondies
🌡️ Lecture d'instruments	Thermomètre, verre doseur, règle, balance à aiguille ; graduations réglables, mesure à lire et à vérifier
⌛ Durées	Frise du temps avec des bonds jusqu'à l'heure ronde : de 9 h 15 à 10 h 40 = 45 min + 40 min
🟩 Aires et périmètres	Carreaux à colorier (une couleur par figure), aire et périmètre calculés, contour tracé
🧩 Tangram et pentominos	Pièces à glisser, tourner, retourner ; silhouette à reproduire (on peut garder sa propre forme comme modèle)
🔷 Solides	Cube, pavé, pyramide, prisme, tétraèdre, cylindre, cône, boule à faire tourner ; faces, arêtes, sommets à compter ; patron

Français

Widget	Rôle
📓 Cahier Seyès	Texte enrichi calé sur les lignes Seyès, 10 tailles
🏷️ Étiquettes-mots	Phrase découpée en étiquettes mélangées, à remettre dans l'ordre en les glissant
👁️ Mot éclair	Un mot s'affiche brièvement puis disparaît ; import .txt
🕳️ Texte à trous	Mots entre [crochets] masqués : à révéler d'un appui, ou à compléter avec vérification (2 / 3 réponses justes) ; trous au hasard
🗂️ Tableau de tri	Étiquettes à glisser dans 2 à 10 colonnes (sur deux rangées au-delà de 6) ; ↺ Recommencer remet toutes les étiquettes sous le tableau ; édition : les colonnes à gauche, le texte à droite, puis un clic sur chaque mot pour choisir sa colonne dans une petite fenêtre (ses deux premières lettres s'affichent au-dessus du mot) ; les mots sans colonne sont des étiquettes pièges ; Ctrl + clic / Maj + clic pour choisir plusieurs mots : 🔗 les regrouper en une étiquette (mots voisins) ou leur donner la même colonne, ✂️ séparer une étiquette
🗣️ Lecture à voix haute	Texte lu par une voix Piper de votre serveur de voix (projet serveur-voix sur YunoHost) ou par une voix installée sur l'ordinateur ; jamais par un service en ligne (Google, Microsoft) ; mot en cours surligné ; si le serveur ne répond pas, la voix de l'ordinateur prend le relais
🖍️ Phrase du jour	Mots coloriés selon leur nature ou leur fonction (légende servant de pinceau), couleurs cachables
🔍 Chasse aux sons	Les 36 phonèmes du français, rangés en voyelles, voyelles nasales, semi-voyelles et consonnes (plus le x [ks]) : toutes les écritures d'un son (on/om, an/am/en/em…) surlignées, ou trouvées par les élèves puis vérifiées ; « Autre son » pour ses propres graphies
🌈 Syllabes	Découpage automatique en syllabes colorées ou en arcs, lettres muettes en gris ; correction à la main (cho-co-la(t))
🔤 Ordre alphabétique	Mots à ranger en les glissant, 3 niveaux ou liste personnelle, vérification
📖 Dés à histoires	Personnage, lieu, objet, moment tirés au sort, en emoji et/ou en mots ; faces modifiables
🕸️ Carte de mots	Un mot au centre et ses branches (famille, synonymes…), branches cachables
🔠 Conjugaison	Verbe et temps au choix (présent, imparfait, futur, passé composé, passé simple, conditionnel, impératif), 3 groupes et verbes irréguliers courants ; terminaisons en couleur ; dévoilé personne par personne ou à compléter par les élèves
🏃 Fluence	Lecture chronométrée : mots mal lus touchés pendant la lecture, dernier mot lu, mots correctement lus par minute ; mesures gardées
💬 Mot du jour	Un mot et ses fiches à dévoiler : nature, définition, phrase, famille, synonymes, contraires, syllabes
🔀 Transformations de phrases	Groupes à déplacer, supprimer, remplacer (pronom) ; forme négative ; versions gardées
🔗 Chaînes d'accord	Flèches du nom vers les mots qui s'accordent ; phrase transformée avec les marques d'accord en couleur
👂 Homophones	a/à, et/est, son/sont, on/ont, ces/ses, ou/où, ce/se, la/l'a/là, ou votre série ; vérification et astuce
❗ Ponctuation	Texte sans ponctuation ni majuscules : signes et majuscules à poser, comparaison avec l'original ; un toucher entre deux mots ouvre le menu des signes (. , ? ! : ; … « » —), ou on tape le signe au clavier
🏭 Fabrique de mots	Préfixe + radical + suffixe (in → im devant p), le widget dit si le mot existe
🟥 Mot mystère	Deviner un mot en 6 essais (lettres bien ou mal placées), avec vos mots
🔎 Mots mêlés	Grille fabriquée avec vos mots, mots à entourer d'un glissé du doigt
🔡 Lettres mélangées	Les lettres d'un mot à remettre dans l'ordre, aide lettre par lettre
✏️ Mise au point du texte	Texte libre retravaillé ensemble : corriger, insérer, barrer, souligner (orthographe, sens) ; premier jet et version finale côte à côte

Géographie

Widget	Rôle
🗺️ Carte muette	France (régions, départements avec numéros), Europe, monde (pays, continents, océans) ; Explorer (toucher → nom), Colorier, Noms, Villes / capitales, point « École », Quiz « Où est… ? » (limitable à un groupe, ex. l'Occitanie), zoom et déplacement
🌓 Jour et nuit	Planisphère avec la nuit calculée selon la date et l'heure, animation, « Quelle heure est-il à… ? » (heure d'été comprise), fuseaux théoriques
🧭 Rose des vents	4, 8 ou 16 directions, noms ou abréviations, rose qu'on fait tourner pour orienter une carte, jeu « Dans quelle direction ? »
🏞️ Paysages à comparer	Deux photos, titre et lieu, grille d'observation commune (relief, eau, végétation, habitat, activités, voies de communication, ressemblances, différences), photo en grand avec zoom

Histoire

Widget	Rôle
🏛️ Frise chronologique	Les 5 grandes périodes, siècles en chiffres romains, repères du programme et événements de la classe, zoom par période, échelle réelle ou agrandie, étiquettes cachées, mode « à placer »
👪 Générations	Moi, mes parents, grands-parents, arrière-grands-parents sur une frise ; « quand ils avaient mon âge » ; repères modifiables
⏳ Il y a combien de temps ?	Durée entre deux années (av. / ap. J.-C., sans année 0), siècle d'une année, chiffres romains (1 à 3 999), défis
📜 Document historique	Image ou texte source, zoom, grille d'étude (nature, auteur, date, lieu, ce que j'apprends, question)

Sciences

Widget	Rôle
🏷️ Schéma à légender	Corps humain, squelette, plante, fleur, cycle de l'eau, insecte (dessins originaux) ou image de l'enseignant ; étiquettes à glisser, vérification, solution
🪐 Système solaire	Tailles et distances à l'échelle, fiche de chaque planète, planètes à ranger dans l'ordre, phrase pour retenir
🔬 Démarche d'investigation	Question, hypothèses (validées / invalidées), expérience, observations (dessin ou photo), conclusion
🌦️ Relevés météo	Température, pluie, ciel et vent jour après jour, graphiques de la semaine ou du mois, moyenne / min / max, export CSV

Documents

Widget	Rôle
📝 Texte	Post-it en texte enrichi
📹 Visualiseur (webcam)	La caméra filme un cahier ou un objet : choix de la caméra, zoom et déplacement, quart de tour, miroir, image figée, photo ajoutée à l'écran
🖼️ Photo	Image intégrée à la séance
📄 PDF	PDF intégré, visionneuse du navigateur
🎬 Vidéo	Lien Digiview ou fichier vidéo intégré ; bouton 🌐 Digiview pour ouvrir Digiview dans un nouvel onglet et y préparer une vidéo ; pour un fichier, ✂ Passage : ne lire que de m:ss à m:ss, en boucle ou non
🎵 Audio	Fichier son intégré à la séance (chant, écoute, dictée), grand bouton lecture, boucle
🔳 QR code	Une adresse ou un texte transformé en QR code pour les tablettes (encodeur intégré, sans service en ligne)
🌐 Site web	Page https dans un cadre isolé

Lecture à voix haute sous Linux : il faut une voix installée (paquets speech-dispatcher et espeak-ng, ou une voix française de meilleure qualité). Les voix « en ligne » du navigateur sont volontairement ignorées.

Importer une liste (.txt)

Les widgets Tirage au sort et Groupes acceptent un fichier texte de prénoms ou de mots séparés par des virgules (les points-virgules, tabulations et retours à la ligne marchent aussi) :

Léa, Tom, Inès, Noé, Chloé, Maël

Le fichier peut être en UTF-8 ou venir d'un ancien Bloc-notes Windows : les accents sont conservés. L'import remplace la liste actuelle, après confirmation si elle n'était pas vide.

Texte enrichi (Texte et Cahier Seyès)

• Sélectionner des mots puis utiliser G, I, S ou le bouton A de couleur (il ouvre la palette ; son trait montre la dernière couleur utilisée).
• Les boutons ⇤ ⇔ ⇥ alignent la ligne où se trouve le curseur (ou les lignes sélectionnées).
• Les raccourcis Ctrl+B, Ctrl+I et Ctrl+U sont désactivés ; un collage n'apporte que du texte brut.
• Le contenu est enregistré en HTML dans etat.html (et en texte brut dans etat.texte). À l'affichage, il est nettoyé : seuls le gras, l'italique, le souligné, la couleur et l'alignement sont gardés ; tout le reste (scripts, images, liens, autres styles) est retiré.

Polices du widget Texte

Toutes sont libres (licence OFL) et fournies dans public/polices/, sans appel extérieur : Andika, Atkinson Hyperlegible, OpenDyslexic, Playwrite France Traditionnelle (cursive).

Marelle et Marelle 2 (police cursive de l'Éducation nationale, https://marelle.forge.apps.education.fr/) : TBScreen utilise d'abord la police installée sur l'ordinateur. Sinon, déposer les fichiers dans public/polices/marelle/ sous les noms Marelle.woff2 et Marelle2.woff2 (ou .woff, .otf, .ttf). Voir public/polices/marelle/LISEZMOI.txt.

Vidéos

• Liens : seuls les liens Digiview (https://ladigitale.dev/digiview/…) sont acceptés. Ajouter un autre fournisseur = une entrée dans FOURNISSEURS (public/widgets/video.js) et son domaine dans frame-src de la CSP (public/index.html).
• Fichiers : la vidéo est intégrée au JSON. Avertissement au-delà de 50 Mo, confirmation au-delà de 150 Mo.
• Dans Electron, le bouton « ↗ Ouvrir » ouvre le lien dans le navigateur du système.

Utilisation

• Version web : ouvrir public/index.html dans Firefox ou Chromium, ou passer par GitLab Pages.
• Version Electron :

  npm install --save-dev electron electron-builder
  npm start
  

• AppImage Linux (quand tu en as besoin) :

  npm run appimage
  

  Le fichier est créé dans dist/.

Ajouter un widget

1. Créer public/widgets/mon-widget.js (en mode épuré, la barre w-barre et les éléments portant la classe w-commande sont cachés) :

   // TBScreen — widget Exemple : ce qu'il fait en une ligne
   (function () {
     'use strict';
     window.TBScreen.registre.enregistrer({
       type: 'exemple',              // identifiant unique, écrit dans le JSON
       nom: 'Exemple',               // nom affiché
       icone: '⭐',                  // icône du menu et de la barre de titre
       categorie: 'Autres',          // thème du menu : Temps, Vie de classe, Maths, Français, Documents ou Autres
       taille: { l: 400, h: 300 },   // taille à la création
       creer(corps, etat, api) {
         // Valeurs par défaut : ne remplace jamais une clé déjà présente
         window.TBScreen.outils.defauts(etat, { compteur: 0 });
         const bouton = api.el('button', { class: 'w-bouton principal', text: String(etat.compteur) });
         // On modifie l'état directement puis on prévient le socle
         bouton.addEventListener('click', () => { etat.compteur++; bouton.textContent = etat.compteur; api.changer(); });
         corps.append(bouton);
         // Lancer les minuteries à la fin de creer() : si creer() plante avant, rien ne pourra les arrêter
         // Facultatif : libérer minuteries, micro, etc. à la fermeture ;
         // options.changementEcran vaut vrai quand on change seulement d'écran (voir api.continuerEnFond)
         return { detruire(options) {} };
       }
     });
   })();
   

2. Ajouter dans public/index.html, avec les autres widgets :

   <script src="widgets/mon-widget.js" defer></script>
   

Règles pour garder l'aller-retour JSON exact :

• l'état d'un widget ne contient que des données simples (texte, nombres, booléens, tableaux, objets) ;
• creer() ne modifie jamais une clé existante de l'état, il complète seulement avec defauts() ;
• ce qui est temporaire (minuteur en marche, micro allumé) n'est pas mis dans l'état ; un décompte qui doit continuer sur un autre écran passe par api.continuerEnFond(donnees, fin, aLaFin) dans detruire(), puis api.reprendre() dans creer() (voir le Minuteur) ;
• un réglage ajouté dans une version ultérieure se lit avec une valeur de secours (etat.police || 'systeme') et ne s'écrit qu'au premier changement par l'utilisateur, sinon les anciennes séances ne seraient plus réexportées à l'identique.

Format du fichier JSON

{
  "format": "tbscreen",
  "versionFormat": 1,
  "creeAvec": "TBScreen 0.1.0",
  "ecranActif": 0,
  "ecrans": [
    {
      "id": "…",
      "nom": "Écran 1",
      "fond": { "type": "seyes", "couleur": "#ffffff" },
      "widgets": [
        { "id": "…", "type": "minuteur", "x": 700, "y": 120, "l": 460, "h": 340, "z": 1, "reduit": false,
          "etat": { "duree": 300, "restant": 300, "son": true } }
      ],
      "traits": [
        { "outil": "stylo", "couleur": "#1d3557", "epaisseur": 6, "points": [[100, 200], [140, 230.5]] }
      ]
    }
  ]
}

• Positions et tailles en pixels de la scène 1920×1080.
• Photos et PDF intégrés en base64 : le fichier est autonome mais peut être lourd.
• Un widget inconnu (fichier venant d'une autre version) est affiché comme « inconnu » et réexporté sans perte.

Sécurité (CSP)

• script-src 'self' : aucun script extérieur ni en ligne.
• style-src 'self' 'unsafe-inline' : nécessaire pour la visionneuse PDF de Chromium/Electron, qui hérite de la politique de la page et utilise des styles en ligne.
• object-src blob: et frame-src blob: : uniquement pour afficher les PDF intégrés.
• frame-src https: : sites en https uniquement dans des cadres isolés (sandbox), pour Digiview et le widget Site web. Un site intégré ne peut ni lire ni modifier TBScreen.
• font-src 'self' : polices locales uniquement.
• connect-src 'self' https://tts.toutalamaison.ynh.fr : la seule adresse extérieure contactée est votre serveur de voix (texte envoyé, son WAV reçu). Pour un autre serveur, changer l'adresse dans public/js/voix.js et dans cette directive ; pour n'utiliser que les voix de l'ordinateur, vider SERVEUR.
• Electron : contextIsolation, sandbox, pas de Node dans la page, navigation et nouvelles fenêtres bloquées ; seuls le micro, la caméra (visualiseur) et le plein écran sont autorisés, et seulement pour la page TBScreen elle-même (jamais pour un site ou une vidéo intégrés).

Historique

• 0.23.3 : Rapporteur — l'instrument ne déborde plus jamais de la fenêtre, quelle que soit l'orientation : sa taille est calculée d'après la vraie étendue du demi-disque tourné, et le sommet de l'angle se rapproche du centre autant qu'il faut pour laisser la place à l'instrument (comme on décalerait son angle pour poser son rapporteur sur une feuille).

• 0.23.2 : Rapporteur instrument fidèle au matériel de classe — bande courbe graduée avec cœur évidé (comme un vrai rapporteur), règle centimétrique le long de la base, sommet de l'angle placé par défaut au tiers supérieur de la fenêtre pour que l'instrument ait toujours la place de s'afficher entier.

• 0.23.1 : Rapporteur instrument redessiné — il se retourne comme le vrai matériel quand l'angle s'ouvre de l'autre côté, les chiffres restent toujours à l'endroit, et sa taille s'adapte pour ne jamais être coupée par la fenêtre.

• 0.23.0 : Rapporteur — un vrai rapporteur gradué (demi-disque, double graduation 0–180) à poser sur le côté bleu d'un clic, ou à retirer ; il tourne avec le côté et suit le déplacement de l'angle, pour lire la mesure sur les graduations comme avec l'instrument.

• 0.22.1 : Rapporteur — le glissement ne bloque plus au premier degré (les écouteurs sont posés sur le dessin entier, qui survit aux redessins), l'angle se déplace dans la fenêtre par son sommet, l'arc s'arrondit dans l'angle et l'angle droit porte le carré mathématique officiel.

• 0.22.0 : quatre nouveaux widgets. Alphabet mobile (lettres-aimants à glisser pour écrire des mots), Je lis, tu lis (deux colonnes pour la lecture à deux voix), Droite numérique à étiquettes (étiquettes-nombres à placer sur une droite graduée) et Rapporteur (mesurer des angles en manipulant les côtés, valeur masquable). Test de non-régression ajouté (smoke-test.cjs) : il charge l'application et crée les 99 widgets.

• 0.21.4 : Sonomètre — plus de fausse alerte « Ce micro n'envoie aucun son » quand la classe est calme : beaucoup de micros (casques, réduction de bruit) envoient un silence absolu au calme ; l'alerte ne s'affiche plus que si le micro n'a jamais rien capté depuis son démarrage (5 s) ; analyse relancée si le navigateur l'a mise en pause ; calibrage possible avec ces micros.

• 0.21.3 : Chasse aux sons — tous les phonèmes du français (36) : ajout de [a], [i], [u], [e] (le, petit), [un], [oin], [ui], [p], [b], [t], [d], [v], [m], [n], [l], [r], [ng] et du x [ks] ; menu rangé par familles ; règles affinées (ville, chorale, mer…).

• 0.21.2 : Ponctuation — un toucher entre deux mots ouvre un menu avec tous les signes (point, virgule, ?, !, deux-points, point-virgule, points de suspension, guillemets, tiret de dialogue, aucun) au lieu de les faire défiler ; on peut aussi taper le signe au clavier.

• 0.21.1 : page d'aide complétée : rideau 🎭 (baisser, tirer, figer), double-clic sur le bandeau, Ctrl + clic et Maj + clic dans les raccourcis, Échap (lève le rideau, vide la sélection).

• 0.21.0 : ergonomie.

  • Barres d'outils des widgets : quand elles ne tiennent plus sur une ligne, les boutons secondaires passent dans un menu ⋯ (Vérifier, Recommencer… restent visibles) et reviennent à leur place quand on agrandit.
  • Aperçu des écrans : au survol d'un numéro, un plan de l'écran (fond, widgets avec leur icône et leur nom).
  • Rideau 🎭 : B baisse un rideau avec un message en grand (modifiable), R un rideau à tirer pour dévoiler l'écran petit à petit (du haut ou du côté), F fige l'écran (plus rien ne réagit au toucher, un élève ne peut pas le libérer au tableau).

• 0.20.1 : double-clic sur le bandeau d'un widget pour le passer en plein écran (et double-clic à nouveau pour revenir).

• 0.20.0 : sélection multiple au clavier — Ctrl + clic ajoute ou retire un mot, une case ou un objet, Maj + clic prend une suite (un rectangle dans les grilles), puis l'action choisie s'applique à toute la sélection ; Échap la vide ; au doigt rien ne change. Dans 17 widgets : Tableau de tri (regrouper des mots voisins en une étiquette, même colonne pour plusieurs mots, séparer une étiquette), Phrase du jour, Chaînes d'accord, Texte à trous (et nouveau « 👆 Choisir au clic » des mots à cacher), Sons, Homophones, Texte libre, Transformations, Étiquettes-mots, Tableau des nombres, Aires, Symétrie, Repérage, Pythagore, Cadre à dix, Monnaie, Carte muette.

• 0.19.0 : bouton ↺ Recommencer dans 44 widgets à manipuler (Tableau de tri, Frise, Schéma à légender, Étiquettes-mots, Ordre alphabétique, Monnaie, Tangram, Géoplan, Carte muette, Repérage, Symétrie, Tableau des nombres, Mots mêlés…) : tout revient comme au départ en un clic, sans toucher au contenu préparé (les boutons équivalents existants sont harmonisés sous ce nom). Tableau de tri : nouvel éditeur — colonnes à gauche, texte à droite, un clic sur un mot ouvre la liste des colonnes, l'abréviation de la colonne choisie s'affiche au-dessus du mot.

• 0.18.1 : Vidéo — écran de choix redessiné en deux cartes : « Vidéo en ligne (Digiview) » en deux étapes (ouvrir Digiview, coller le lien) et « Fichier de l'ordinateur ».

• 0.18.0 : grande relecture du code (95 widgets).

  • Fenêtre de saisie propre à TBScreen à la place de window.prompt, qui ne fonctionne pas dans l'application Electron (renommer un écran, enregistrer un modèle, titres du Conseil, Base 10, Fluence, Syllabes, Tableau des nombres, Texte libre, Transformations).
  • Bugs corrigés : Conjugaison à l'impératif, Anagrammes qui gelait avec un mot en double, caméra du Visualiseur qui pouvait rester allumée, Lecture d'instruments (division par zéro), Mots mêlés à deux doigts, « C'est aujourd'hui » erroné du Compte à rebours, Droite graduée, Diagramme au-delà de 16 lignes, points des Dés invisibles, minuterie et écouteurs non libérés.
  • Les ~95 widgets lisent prudemment un fichier JSON abîmé ou modifié à la main : plus de « Erreur dans ce widget », de NaN ni de « null » affichés.
  • Contenu : apercevoir et verbes en -cevoir, familles -venir/-tenir/-prendre…, verbes inconnus signalés ; singuliers (1 dizaine, 1 ligne, 1 proposition) ; « cœur » dans Mots mêlés ; « contentement » ; « ne se lave pas » ; patron du prisme qui se replie ; son [é] « er » sans mer, fer, hiver ; se(p)t.
  • Sécurité : le widget Site refuse une adresse du même site que TBScreen ; couleurs des Aires appliquées sans attribut style.
  • Rangement : exports de test inutilisés, classes et branches mortes retirés ; classes d'état préfixées ; plus de classe réservée « actif » dans les widgets.
  • Vidéo : bouton 🌐 Digiview qui ouvre Digiview dans un nouvel onglet.

• 0.17.9 : Balance — masses marquées et objets séparés en deux rangées titrées (« Masses » en gris, « Objets » en jaune).

• 0.17.8 : ligne repère d'alignement en pointillés.

• 0.17.7 : joints entre widgets accolés plus discrets (trait plus fin et transparent, sans halo).

• 0.17.6 : retrait de la poussée des widgets collés (0.17.2) : elle rendait le placement des widgets trop difficile ; l'aimantation et les joints restent comme avant.

• 0.17.5 : Balance plus réaliste — l'aiguille est solidaire du fléau (toujours perpendiculaire au bras) et un cadran gradué fixe porte un repère central : aiguille sur le repère = plateaux à la même hauteur.

• 0.17.4 : Balance — catalogue de 113 objets à peser en 6 thèmes (fruits et légumes, cuisine, école, maison, jeux et sport, animaux), masses réalistes au choix précises ou arrondies, jusqu'à 12 objets sur la balance, nom des objets au survol ; les masses de plus d'un kilo s'écrivent « 1 kg 250 g ».

• 0.17.3 : Tableau de tri jusqu'à 10 colonnes (une rangée jusqu'à 6, puis deux rangées), avec 10 couleurs.

• 0.17.2 : les widgets collés se poussent — en descendant celui du haut, ceux du dessous descendent avec lui (aussi vers le haut, la droite, la gauche et en agrandissant un bord) ; un déplacement dans une autre direction les décolle ; Alt coupe la poussée.

• 0.17.1 : Système solaire avec de vraies images des planètes (Solar System Scope, d'après les données NASA) ; Relevés météo repensés (7 cartes-jours, ciel en grand emoji, − / + pour la température et la pluie, calendrier du mois, graphique en dessous, plus de débordement) ; Frise : pointe de visée sur les étiquettes à placer, avec l'année visée en direct ; Jour et nuit sans le dessin du Soleil.

• 0.17.0 : trois nouveaux thèmes et 12 widgets — Géographie (Carte muette, Jour et nuit, Rose des vents, Paysages à comparer), Histoire (Frise chronologique, Générations, Il y a combien de temps ?, Document historique), Sciences (Schéma à légender, Système solaire, Démarche d'investigation, Relevés météo).

• 0.16.2 : widgets rangés par ordre alphabétique dans chaque thème du menu (et dans les résultats de recherche) ; sur deux colonnes, l'ordre descend la première colonne puis la seconde.

• 0.16.1 : voix du serveur plus réactive — la première phrase est envoyée seule (le son démarre plus vite), puis une phrase par demande, préparée pendant la lecture de la précédente.

• 0.16.0 : Lecture à voix haute avec les voix Piper (Siwis, Tom) du serveur de voix sur YunoHost (tts.toutalamaison.ynh.fr, réglable dans public/js/voix.js), lecture phrase par phrase avec mot surligné, repli automatique sur la voix de l'ordinateur ; CSP : connect-src ouvert à ce seul serveur.

• 0.15.2 : Lecture à voix haute — les voix de speech-dispatcher (Piper installé avec Pied, espeak) sont reconnues dans Firefox sous Linux, Piper est choisie avant les voix robotiques, et la phrase n'est plus avalée quand on relance une lecture ; les voix en ligne (Google, Microsoft…) restent écartées.

• 0.15.1 : les joints d'aimantation ne restent plus affichés après une nouvelle séance, un import ou le passage à un écran vide.

• 0.15.0 : widgets Calendrier du mois, Problème du jour (Vergnaud, avec vos problèmes), Boulier (10 × 10 et numération) et Visualiseur (webcam) ; modèles d'écran ; caméra autorisée dans Electron (page TBScreen seulement).

• 0.14.1 : aimantation plus soignée — deux widgets accolés gardent une gouttière de 10 px sans se chevaucher, et un petit joint coloré montre qu'ils sont attachés.

• 0.14.0 : recherche et « Récents » dans le menu Widget ; page d'aide (❓, ? ou F1) ; aimantation des widgets (Alt pour la couper) ; minuteurs et chronomètre qui continuent sur un autre écran. Relecture du code : outils du dessin qui modifiaient les boutons de certains widgets, sauvegarde automatique toujours rétablie après un import, fichiers JSON aux identifiants en double ou aux traits invalides refusés clairement, redessin d'Accords libéré, cadres intégrés sans accès à la liste des micros (Electron), CSS de l'ancienne barre des écrans et règles en double retirés, icônes et fonctions inutilisées retirées, fichier LICENSE ajouté.

• 0.13.3 : petite croix × sur les numéros d'écrans pour les supprimer (visible sur l'écran affiché, au survol pour les autres).

• 0.13.2 : menus sombres (Widget, Fond, Fichier, ⋯ des écrans) qui se détachent du tableau blanc ; Date du jour : menu « ✏️ Modifier » pour afficher la date seule (sans « Aujourd’hui, nous sommes… »), avec ou sans l’année, avec ou sans hier et demain.

• 0.13.1 : colonne des écrans plus discrète au repos et pleinement opaque (fond plein, ombre) au survol.

• 0.13.0 : plus de place pour la scène — la barre des écrans du bas devient une colonne translucide sur le bord droit (menu ⋯ pour renommer, dupliquer, supprimer) ; mode présentation 🎬 (touche P) qui cache la barre d'outils.

• 0.12.6 : icône de l’application « Tableau à widgets » (onglet du navigateur, fenêtre et AppImage Electron).

• 0.12.5 : sonomètre — le décalage continu de certains micros (qui bloquait la jauge) est retiré de la mesure ; écran de diagnostic (forme du signal, micro, état du son) ; option « traitement du son » par l’ordinateur.

• 0.12.4 : sonomètre — après calibrage, la jauge va du calme mesuré (0) au brouhaha (100), même avec un micro faible ; plus de valeurs en décibels trompeuses.

• 0.12.3 : sonomètre — le micro est vraiment écouté (son activé dès le clic, entrée audio gardée), jauge plus sensible aux sons faibles, choix du micro, alerte si le micro n’envoie aucun son.

• 0.12.2 : mise au point du texte — en version finale cursive (Marelle, Playwrite), les lignes ne se chevauchent plus.

• 0.12.1 : solides — bouton « Arêtes » (surlignées, cachées en pointillés) ; sonomètre — mesure en décibels (ne sature plus), sensibilité efficace, calibrage sur le calme de la classe, volume du son d’alerte.

• 0.12.0 : 12 widgets de français : Conjugaison, Fluence, Mot du jour, Transformations de phrases, Chaînes d'accord, Homophones, Ponctuation, Fabrique de mots, Mot mystère, Mots mêlés, Lettres mélangées, Mise au point du texte libre. Le menu Français s'affiche lui aussi sur deux colonnes.

• 0.11.0 : 13 widgets de maths : Opération posée (4 opérations, 2 méthodes de soustraction, retenues visuelles, pas à pas ou à compléter), Tableau des nombres, Cadre à dix, Le compte est bon, Suites et furet, Disposition rectangulaire, Schéma en barres, Balance, Lecture d'instruments, Durées, Aires et périmètres, Tangram et pentominos, Solides. Le menu Maths s'affiche sur deux colonnes.

• 0.10.3 : plein écran — le widget couvre toute la page (son cadre s’étire), quelles que soient ses proportions ; étiquettes-mots en cursive : les jambages restent dans l’étiquette.

• 0.10.2 : matériel base 10 — jusqu’à 99 pièces par colonne ; les pièces rapetissent pour tenir dans la colonne.

• 0.10.1 : tableau de conversion — une seule virgule, affichée seulement quand le nombre a des chiffres après elle.

• 0.10.0 : 14 nouveaux widgets. Français : Phrase du jour, Chasse aux sons, Syllabes, Ordre alphabétique, Dés à histoires, Carte de mots. Maths : Nombre du jour, Tableau de conversion, Instruments de géométrie (le stylo suit la règle), Géoplan, Symétrie, Repérage, Diagramme, Matériel base 10.

• 0.9.1 : emploi du temps — glisser-déposer des activités, horaires recalculés à la suite.

• 0.9.0 : widgets Texte à trous, Nuage de mots, Tableau de tri, Audio et QR code ; passage d'une vidéo (début / fin) ; capture d'écran en PNG (bouton 📷).

• 0.8.0 : copier ou déplacer un widget vers un autre écran (bouton ⧉).

• 0.7.2 : droite numérique avec les nombres aux extrémités seulement ; relecture du code : figures des Fractions visibles en plein écran, ouverture d'un widget qui ne modifie plus jamais les données, vérification d'aller-retour sur tous les écrans et contrôle à l'import, micro du Sonomètre et voix de la Lecture mieux libérés, Site web sans fenêtres surgissantes, fond et couleurs importés validés, découpage des listes de prénoms commun à tous les widgets (« Léa, Tom » = deux prénoms), code mort retiré.

• 0.7.1 : menu « ＋ Widget » à deux niveaux (thèmes à gauche, widgets à droite).

• 0.7.0 : 18 nouveaux widgets (minuteur visuel, emploi du temps, compte à rebours, conseil, quoi de neuf, métiers, file d'aide, vote, droite numérique, numération, horloge à manipuler, monnaie, fractions, calcul flash, table de Pythagore, étiquettes-mots, mot éclair, lecture à voix haute) ; menu des widgets par catégories.

• 0.6.0 : plein écran par widget (⛶, Échap pour sortir).

• 0.5.4 : glisser-déposer des onglets pour changer l'ordre des écrans.

• 0.5.3 : couleur du texte regroupée derrière un seul bouton « A » qui ouvre la palette.

• 0.5.2 : numéro de version affiché à côté du titre.

• 0.5.1 : Groupes — choix du nombre de groupes directement dans la barre (− N +).

• 0.5.0 : texte enrichi dans Texte et Cahier Seyès, widget Site web, numérotation automatique des écrans.

• 0.4.3 : Cahier Seyès — taille de l'écriture et des lignes réglable (A− / A+) pour les textes longs.

• 0.4.2 : mode épuré revu — mini-barre au survol (✥ déplacer, 📌 remettre les contours), plus de barre qui réapparaît au clic.

• 0.4.1 : correction du mode épuré (l'épingle cache la barre immédiatement ; le survol du contenu ne la fait plus revenir).

• 0.4.0 : import de listes .txt (Tirage au sort, Groupes), groupes formés automatiquement.

• 0.3.0 : mode épuré par widget et général, palette de couleurs (écran et widgets), widgets Cahier Seyès, Dés, Groupes, Chronomètre, Date du jour, Compteur et Liste.

• 0.2.0 : redimensionnement par tous les bords, polices libres (dont Marelle), widgets Feu tricolore et Vidéo, son du sonomètre.

• 0.1.0 : socle, écrans, fonds, calque de dessin, 7 widgets, export/import JSON fidèle.

Licence

GPL v3 ou ultérieure. Données des cartes : Natural Earth (domaine public) ; contours de la France : IGN Admin Express et INSEE, Licence Ouverte Etalab (via france-geojson). Le script outils/cartes/generer.py régénère public/js/cartes-donnees.js à partir de ces sources. Images des planètes (public/images/planetes/) : rendues par outils/planetes/generer.py à partir des cartes photographiques de Solar System Scope (CC BY 4.0, d'après les données NASA). Les polices de public/polices/ sont sous licence OFL (fichiers OFL-*.txt). Le texte complet de la licence est dans le fichier LICENSE.