Timer en mode delta time

Salut à toutes et tous,
Je coache des sportifs et je cherche à créer un timer qui fonctionnerait comme le "delta time" des Formule 1.
En gros, par exemple, on prévoit un entraînement avec un enchaînement de 5 séquences de 30 secondes pour une activité physique.
A chaque début de série, le sportif déclenche son timer. Le timer défile et compte de 0 à 30s. En fin de chaque série, le sportif appuie sur un bouton pour valider sa fin de séquence. Ca redéclenche un timer de 30s pour la série suivante mais ça lui indique si il est en avance ou en retard cumulé.
Prenons un exemple : le sportif démarre sa série, il lance le timer de 30s. Le timer démarre à 0s puis s'incrémente de seconde en seconde. Le sportif finit sa série au bout de 28s et lance la suivante. Le timer redémarre à 0s et commence à compter jusqu'à 30s, mais affiche à côté ou en dessous l'indication "-2s" en vert pour lui indiquer qu'il a 2s d'avance. Il finit de nouveau avec une seconde d'avance. Le nouveau timer démarre à 0s et compte mais en dessous ça affiche "-3s". Et ainsi de suite.
Je veux pouvoir programmer le nombre de série et la longueur de chacune comme je le souhaite, et aussi avoir la possibilité qu'un logiciel externe communique avec le système pour déclencher le départ du premier timer (comme par exemple un logiciel de chronométrage).
Merci de vos conseils et n'hésitez pas à questionner si je n'ai pas été clair.

la première partie n'est pas très compliquée pour le fonctionnement de base

Pour la partie configuration ce n'est pas très compliqué non plus, faut juste un peu de hardware en plus pour régler le nombre de série et la longueur de chacune (un encodeur par exemple) ou alors vous prenez un arduino qui peut faire du wifi et il présente un page web pour rentrer une configuration et vous vous connectez à l'appareil depuis votre smartphone. L'interface utilisateur sera plus "sympa" peut-être

il existe des petits arduinos sous diverses formes, y compris sous forme de montre si ça doit être portable (LILYGO TTGO T-Watch par exemple)

ou alors des petits trucs comme le M5StickC

ça permet d'avoir un produit "fini" avec un bouton et un écran

là il faudrait savoir comment les logiciels de chronométrage fonctionnent et comment ils discutent avec des appareils externes

Si tu peux dépasser le timer, ce n'est plus vraiment un timer ?
Ou alors le chronomètre commence à -30s ? avec le delta cumulé entre parenthèse
-30s (0s)

Je partage les propositions de @J-M-L sur le format et la possibilité de configuration par un écran.
Sauf que je trouve une page WEB, un peu désuet et pas forcément pratique.
J'aurais plus vu une application pour smartphone ou montre connecté(plus compliqué).

c'est quand même plus simple et on peut faire un truc fonctionnel assez rapidement...

par exemple avec ce HTML, vous créez le tableau des cycles, vous pouvez les réordonner et soumettre les données ... ça s'écrit rapidement et on peut servir simplement cette page depuis un ESP32

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tableau Drag & Drop</title>
    <style>
        table { width: 100%; border-collapse: collapse; }
        th, td { border: 1px solid #ddd; padding: 8px; text-align: center; }
        .dragging { background-color: #f1f1f1; opacity: 0.7; }
        button { margin: 10px 0; padding: 8px 16px; cursor: pointer; }
    </style>
</head>
<body>
    <button id="addRowBtn">Ajouter une ligne</button>
    <table id="dynamicTable">
        <thead>
            <tr><th>N°</th><th>Description</th><th>Durée (secondes)</th></tr>
        </thead>
        <tbody></tbody>
    </table>
    <button id="submitBtn">Envoyer</button>
    <script>
        const tableBody = document.querySelector('#dynamicTable tbody');
        let counter = 1;

        addRowBtn.onclick = () => {
            const row = document.createElement('tr');
            row.draggable = true;
            row.innerHTML = `<td>${counter}</td><td><input value="Cycle ${counter}" /></td><td><input value="30" /></td>`;
            counter++;
            tableBody.appendChild(row);

            row.ondragstart = () => row.classList.add('dragging');
            row.ondragend = () => row.classList.remove('dragging');
        };

        tableBody.ondragover = (e) => {
            e.preventDefault();
            const draggingRow = document.querySelector('.dragging');
            const afterElement = getDragAfterElement(tableBody, e.clientY);
            tableBody.insertBefore(draggingRow, afterElement || null);
        };

        function getDragAfterElement(container, y) {
            return [...container.querySelectorAll('tr:not(.dragging)')]
                .reduce((closest, child) => {
                    const offset = y - child.getBoundingClientRect().top - child.offsetHeight / 2;
                    return offset < 0 && offset > closest.offset ? { offset, element: child } : closest;
                }, { offset: -Infinity }).element;
        }

        submitBtn.onclick = () => {
            const data = [...tableBody.querySelectorAll('tr')].map(row => {
                const cells = row.querySelectorAll('td');
                return {
                    num: cells[0].textContent,
                    description: cells[1].querySelector('input').value,
                    duration: cells[2].querySelector('input').value
                };
            });
            console.log(data);
            alert('Données envoyées : ' + JSON.stringify(data));
        };
    </script>
</body>
</html>

pas la peine de se prendre la tête pour écrire des apps iOS et Android :slight_smile:

Merci pour ces conseils @J-M-L !
Si je résume, et vu que j'aimerais qu'on puisse afficher le timer et son delta time en gros sur une télé, il me faudrait :

  • 1 ESP32 (dans lequel le programme de base serait stocké et qui assurerait le dialogue entre le M5StickC)
  • 1 M5StickC
  • 1 écran LCD pour l'affichage
    A l'aide du M5StickC on définit le nombre et la durée de chaque séquence, on donne le top départ et on valide chaque séquence via le bouton principal. L'ESP32, via son programme HTML, gère le timer, le delta time et envoie tout ça en affichage sur l'écran LCD.
    J'ai bon ?
  • 1 M5StickC

Un arduino n’est pas adapté pour afficher sur une TV - donc le plus simple serait un ordinateur (Mac ou PC ou alors un RPi) connecté à la TV et discutant en sans fil avec vos chronomètres.

Cependant c’est une nouvelle contrainte - si vous voulez voir en temps réel sur la télé et l’appareil le temps qui défile et être précis (à quel niveau ? Centième / millième de seconde ?) vous rajoutez de la complexité.

Est-ce en salle ? Sur un stade ? Sur un parcours en forêt ?


Donc plutôt par exemple

Un Mac connecté à une TV
Un réseau radio - peut être du WiFi avec un routeur privé
Un arduino avec ESP32 et écran lcd intégré
Du développement et des tests pour gérer la latence inhérente aux communications radio type WiFi et voir si c’est compatible avec la précision attendue

C'est très relatif plus simple que quoi ?
Je ne suis pas sûre que tout le monde trouve ça plus simple de devoir écrire le HTML que tu as fait, qu'une application AppInventor, avec du glisser/déposer?
Pas la peine de se prendre la tête à écrire du HTML :rofl:

Rien à titre personnel, et je ne pense pas être un débutant, je préfère largement faire une application Android(IOS, je ne peux pas, mais on ne va pas relancer le débat :slight_smile: )
que de devoir écrire le HTML/CSS/javascript.
Et une fois l'application écrite, je préfère mille fois, une application, qu'une page WEB, au niveau pratique.

Mais si @desmozoll est plus à l'aise avec le HTML, ca fait très bien l'affaire.

Sauf, si c'est une télé pas trop veille et qu'elle embarde un "smart" OS.

Le code HTML est tellement simple :wink:
Je n’ai pas suivi ce fil mais je sursaute en voyant cette affirmation…
On apprend pas le code HTLM, on le lit et on comprend en même temps :wink:

Si tu le dis :slight_smile:
Je suis alors étonné que seul @J-M-L est fournis la page HTML interactive.
De plus avant de lire, faudrait il qu'il soit écrit, donc que tu connaisses le vocabulaire que tu n'a pas appris :see_no_evil:.

C'est en salle, et en terme de précision on va avoir besoin d'être bons à 5/10s près, ça suffira, le but c'est qu'ils sachent si ils sont en avance ou en retard sur leur temps idéal de manière à ce qu'ils gèrent leur effort. L'idée est de leur apprendre à doser et canaliser.
J'ai regardé les mini PC et il en existe avec écran tactile intégré :

https://www.amazon.fr/HEIGAOLAPC-Windows-Processeur-Celeron-Ordinateur/dp/B0C6KHT4BN

Du coup on pourrait se servir du mini PC comme cerveau et écran tactile pour valider chaque session, et on relie ça en filaire HDMI à une télé pour avoir l'affichage du chrono et basta.
Ca + une télé et même pas besoin d'arduino ça se trouve non ?

Bon c’est une métaphore juste pour dire que le code HTML est simple :wink:

Les "minis PC" sont assez chers, tu devrais regarder du coté des Raspberry, il y a des écran tactile en options, cela devrais diviser le prix par deux.

Effectivement si tu passes par l'écran tactile pour lancer/définir les séries, l'Arduino est inutile et inapproprié.

J'ai bien compris l'idée général :slight_smile: et effectivement par rapport à du C++, on peut se dire que le HTML est simple.
Mais dans les faits, ce n'est pas vraiment vrai, car une page HTML, embarque souvent du CSS et du javascript, ce qui est le cas de la page de @J-M-L.
Déjà, avoir une page HTML, qui reste bien affiché suivant les différents supports, n'est pas toujours simple, mais en plus si tu rajoute la manipulation du DOM en javascript, cela complexifie les choses.

Si le développement WEB est une compétence assez recherchée et il y a peu de polyvalent, ce n'est pas pour rien.
Après je ne veux pas relancer un débat sur l'utilité des différents catégorie de travailleur :slight_smile:

Excellents ces petits Raspberry, effectivement avec un écran tactile pour valider les sessions et une diffusion du chrono sur une télé via une sortie HDMI ça sera grandement suffisant !
Reste plus qu'à trouver comment faire un programme pour gérer tout ça.
Question : le Raspberry est livré avec un système d'exploitation ? Je suppose que non...
Du coup, c'est quoi le plus simple et le moins cher à mettre dessus ? Linux ?

Ca dépends je crois, ca fait longtemps que je n'ai pas suivi et je ne trouves pas vraiment d'intérêt de prendre une carte pré-enregistré.
Le plus simple est de mettre un linux, je crois que le plus répandu est une distribution Debian.

Je n'ai pas vraiment suivi, sur ce qui existe simple d'utilisation pour faire une interface WEB.
Moi j'aurais pris surement Qt, en C++, mais il est aussi disponible sous python.

La carte est livrée nue mais sur le site de Raspberry Pi tu peux charger leur OS
https://www.raspberrypi.com/software/
C'est une Debian avec un environnement graphique complet et des outils pour le développement.
Il y a des portages d'autres distributions comme Ubuntu par exemple.

1 Like

Les bons sportifs utilisent un iPhone bien sûr donc il faut iOS :slight_smile:

Sinon App inventor ça ne fait pas des apps super sympa non plus. Essayez de faire une liste dynamique comme mon HTML où on peut échanger des lignes par drag&drop pour ordonner les séries par exemple. Pas sûr que ça soit dispo

1 Like

Surement, encore un argument, pour ne pas faire trop de sport alors :slight_smile:

Tu parles du lookfeel par rapport à ton HTML?

Il y a forcément plus de limitation, puisqu'il faut moins de connaissance, c'est effectivement indéniable.
Cela le rend t-il plus simple, puisqu'il faut une certaine connaissance?
Mais surtout, ce qui est rédhibitoires pour moi, il faut passer par un navigateur WEB.
Je le répète, plus simple est très relatif.

On peut faire des apps “web” sur mobile en rajoutant le raccourci de l’URL sur l’écran (au moins sur iOS - je suppose aussi sur Android) et on peut même les rendre très proches d’une app native.

Mais faire une vraie app native est mieux bien sûr (pas un truc bidouillé avec un générateur de code cross OS)

Oui surement, je n'ai jamais testé, mais cela reste une application dans un navigateur.
Après c'est une question de ressenti surtout.

Cela dépends ce que tu appels bidouiller, mais effectivement des solutions pro, pour faire du code portable est sympa sur le papier, mais pour avoir un résultat satisfaisant ce n'est pas toujours des plus simples.