welcome: please sign in
location: Modifications de « application timer »
Modifications entre les versions 1 et 2
Version 1 à la date du 2018-04-11 14:30:31
Taille: 39
Éditeur: PhilippeOrth
Commentaire:
Version 2 à la date du 2018-04-11 14:32:52
Taille: 8289
Éditeur: PhilippeOrth
Commentaire:
Texte supprimé. Texte ajouté.
Ligne 1: Ligne 1:
Rédiger « application timer » ici. {{{#!highlight html
<!doctype html>
<html lang="fr">
<head>
    <title>Chrono Capitoul</title>
    <meta charset="utf-8">
    <style>
        html, body, div {
            /* Height and width fallback for older browsers. */
            height: 80%;
            width: 100%;
            height: 80vh;
            width: 100vw;
            margin: 0;
        }

        #timer {
            font-family: Arial, sans-serif;
            font-size: 35vw;
            text-align: center;
            color: white;
            background-color: green;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
  
  meter {
   width: 100%;
   height: 20%;
   height: 19vh;
   margin: 0;
  }
    </style>
</head>
<body>
    <div id="timer">
        00:00
    </div>
 <meter min="0" max="100" id="jauge">jauge</meter>
<script>
/* Application de chronométrage (décompte) pour les présentations capitoul
    usage des touches au clavier:
            CLAVIER ASCII AZERTY:
            AZerTYuIop
             QSdfGHjklm
              wxcvbn
            
   I : initialise le chrono à la valeur de <temps par défaut> (celle du programme ou celle modifiée par les touches suivantes et passe le fond en vert)
   S : décrémente la valeur du chrono en cours de 1s (limite inférieure = 0)
 espace : démarre ou arrête le chrono en cours
   T : augmente la valeur du <temps par défaut> de 1mn et initialise le chrono (fond bleu pour indiquer une modif du <temps par défaut>)
   G : décrémente la valeur du <temps par défaut> de 1mn et initialise le chrono (fond bleu pour indiquer une modif du <temps par défaut>)
   Y : augmente la valeur du <temps par défaut> de 1s et initialise le chrono (fond bleu pour indiquer une modif du <temps par défaut>)
   H : décrémente la valeur du <temps par défaut> de 1s et initialise le chrono (fond bleu pour indiquer une modif du <temps par défaut>)

   A : augmente la valeur du chrono en cours de 1mn (limite supérieure = temps par défaut)
   Q : décrémente la valeur du chrono en cours de 1mn (limite inférieure = 0)
   Z : augmente la valeur du chrono en cours de 1s (limite supérieure = temps par défaut)
   x : augmente la valeur du chrono en cours de 1s (limite supérieure = temps par défaut)

 
 valeur du chrono couleur du fond de l'écran
    de <temps par défaut> à 5mn => vert
 de 5mn à 3mn => jaune
 de 3mn à 1mn => orange
 de 1mn à 0 => rouge
 
 Contributeurs:
 Jérôme Bousquié (IUT Rodez) 20170611 : conception initiale en juin 2017
 Philippe Orth (UT1 Capitole) 20180314 : ajout des fonctionnalités de modification du chrono et du <temps par défaut>
 Philippe Orth (UT1 Capitole) 20180411 : ajout de la jauge bargraph
*/

 

    // Paramètres conférence
    var duration = 20 *60; // temps par défaut (en secondes)
    var limits = [ 5 *60 // i=0, seuil entre vert et jaune (en secondes)
    , 3 *60 // i=1, seuil entre jaune et orange (en secondes)
    , 1 *60]; // i=2, seuil entre orange et rouge (en secondes)


    var limitColors = ["DarkGoldenRod", "DarkOrange", "red"]; // couleurs des seuils : https://www.w3schools.com/colors/colors_names.asp
    var period = 1000 ; // periode en ms : 1000 = 1 s

    var chrono = duration ;
    var timeDiv = document.querySelector("#timer");

    // formatage d'un nombre sous la forme "00"
    var format = function(n) {
        return (n > 9) ? "" + n : "0" + n;
    };

    // retourne le chrono formatté pour l'affichage mm:ss
    var chronoFormat = function(chrono) {
        var min = (chrono / 60)|0;
        var sec = chrono % 60;
        return format(min) + ":" + format(sec);
    };


    // tic-tac
    var tick = function() {
        if (started) {
            chrono--;
            if (chrono < 0) {
                chrono = 0;
                started = false;
            }
            else {
                timeDiv.innerHTML = chronoFormat(chrono);
    jaugeupdate();
    if (chrono > limits[0]) {
            timeDiv.style.backgroundColor = "green";
    }
                else {
     for (var i = 0; i < limits.length; i++) {
      if (chrono <= limits[i]) {
       timeDiv.style.backgroundColor = limitColors[i];
      }
     }
                }
            }
        }
    };

 // mise à jour de la jauge (bargraph)
 var jaugeupdate = function() {
  var pourcent = chrono * 100 / duration;
  bargraph.setAttribute("value",pourcent);

  // limite "jaune"
  var high = Math.min((limits[1] * 100 / duration),(30/100 * duration));
  bargraph.setAttribute("high",high);

  // limite "rouge"
  var low = Math.min((limits[2] * 100 / duration),(10/100 * duration));
  bargraph.setAttribute("low",low);

 }


 
    // traitement des entrées clavier
    var keyboard = function(e) {
        switch (e.keyCode) {
            // touche "i" : initialise le chrono à la valeur de départ
            case 73:
                chrono = duration;
                started = false;
                timeDiv.innerHTML = chronoFormat(chrono);
                timeDiv.style.backgroundColor = "green";
    jaugeupdate();
                break;
            
            // touche "SPACE" : arrêt / démarrage du chrono
            case 32:
                e.preventDefault();
                started = !started;
    jaugeupdate();
                break;

   // touche "a" : ajoute 1mn au temps en cours
            case 65:
                chrono = Math.min((chrono + 60),duration);
                timeDiv.innerHTML = chronoFormat(chrono);
    jaugeupdate();
                break;

   // touche "q" : enlève 1mn au temps en cours
            case 81:
                chrono = Math.max((chrono - 60),0);
                timeDiv.innerHTML = chronoFormat(chrono);
                break;

   // touche "z" : ajoute 1s au temps en cours
            case 90:
                chrono = Math.min((chrono + 1),duration);
                timeDiv.innerHTML = chronoFormat(chrono);
    jaugeupdate();
                break;

   // touche "s" : enlève 1s au temps en cours
            case 83:
                chrono = Math.max((chrono - 1),0);
                timeDiv.innerHTML = chronoFormat(chrono);
                break;
    
   // touche "t" : ajoute 1mn au temps de départ et initialise le chrono
            case 84:
                duration = duration + 60;
                chrono = duration;
    started = false;
                timeDiv.innerHTML = chronoFormat(chrono);
                timeDiv.style.backgroundColor = "blue";
    jaugeupdate();
                break;

   // touche "y" : ajoute 1s au temps de départ et initialise le chrono
            case 89:
                duration = duration + 1;
                chrono = duration;
    started = false;
                timeDiv.innerHTML = chronoFormat(chrono);
                timeDiv.style.backgroundColor = "blue";
    jaugeupdate();
                break;

   // touche "g" : enlève 1mn au temps de départ et initialise le chrono
            case 71:
    duration = Math.max((duration - 60),0);
                chrono = duration;
                started = false;
                timeDiv.innerHTML = chronoFormat(chrono);
                timeDiv.style.backgroundColor = "blue";
    jaugeupdate();
                break;
    
   // touche "h" : enlève 1mn au temps de départ et initialise le chrono
            case 72:
    duration = Math.max((duration - 1),0);
                chrono = duration;
                started = false;
                timeDiv.innerHTML = chronoFormat(chrono);
                timeDiv.style.backgroundColor = "blue";
    jaugeupdate();
                break;

        }
    };


    // Initialisation
    timeDiv.innerHTML = chronoFormat(chrono);
    var started = false;
 var bargraph = document.getElementById('jauge');
 jaugeupdate();
    document.addEventListener("keydown", keyboard, false);
    window.setInterval(tick, period);


</script>


</body>
</html>

}}}

   1 <!doctype html>
   2 <html lang="fr">
   3 <head>
   4     <title>Chrono Capitoul</title>
   5     <meta charset="utf-8">
   6     <style>
   7         html, body, div {
   8             /* Height and width fallback for older browsers. */
   9             height: 80%;
  10             width: 100%;
  11             height: 80vh;
  12             width: 100vw;
  13             margin: 0;
  14         }
  15 
  16         #timer {
  17             font-family: Arial, sans-serif;
  18             font-size: 35vw;
  19             text-align: center;
  20             color: white;
  21             background-color: green;
  22             display: flex;
  23             flex-direction: column;
  24             justify-content: center;
  25         }
  26                 
  27                 meter {
  28                         width: 100%;
  29                         height: 20%;
  30                         height: 19vh;
  31                         margin: 0;
  32                 }
  33     </style>
  34 </head>
  35 <body>
  36     <div id="timer">
  37         00:00
  38     </div>
  39         <meter min="0" max="100" id="jauge">jauge</meter>
  40 <script>
  41 /*      Application de chronométrage (décompte) pour les présentations capitoul
  42     usage des touches au clavier:
  43                                                                                                 CLAVIER ASCII AZERTY:
  44                                                                                          AZerTYuIop
  45                                                                                           QSdfGHjklm
  46                                                                                            wxcvbn
  47                                                                                                 
  48           I : initialise le chrono à la valeur de <temps par défaut> (celle du programme ou celle modifiée par les touches suivantes et passe le fond en vert)
  49           S : décrémente la valeur du chrono en cours de 1s (limite inférieure = 0)
  50  espace : démarre ou arrête le chrono en cours
  51           T : augmente la valeur du <temps par défaut> de 1mn et initialise le chrono (fond bleu pour indiquer une modif du <temps par défaut>)
  52           G : décrémente la valeur du <temps par défaut> de 1mn et initialise le chrono (fond bleu pour indiquer une modif du <temps par défaut>) 
  53           Y : augmente la valeur du <temps par défaut> de 1s et initialise le chrono (fond bleu pour indiquer une modif du <temps par défaut>)
  54           H : décrémente la valeur du <temps par défaut> de 1s et initialise le chrono (fond bleu pour indiquer une modif du <temps par défaut>)
  55 
  56           A : augmente la valeur du chrono en cours de 1mn (limite supérieure = temps par défaut)
  57           Q : décrémente la valeur du chrono en cours de 1mn (limite inférieure = 0)
  58           Z : augmente la valeur du chrono en cours de 1s (limite supérieure = temps par défaut)
  59           x : augmente la valeur du chrono en cours de 1s (limite supérieure = temps par défaut)
  60 
  61  
  62         valeur du chrono                           couleur du fond de l'écran
  63     de <temps par défaut> à 5mn => vert
  64         de 5mn à 3mn                            => jaune
  65         de 3mn à 1mn                            => orange
  66         de 1mn à 0                                      => rouge
  67         
  68         Contributeurs:
  69         Jérôme Bousquié (IUT Rodez)             20170611 : conception initiale en juin 2017
  70         Philippe Orth (UT1 Capitole)            20180314 : ajout des fonctionnalités de modification du chrono et du <temps par défaut>
  71         Philippe Orth (UT1 Capitole)            20180411 : ajout de la jauge bargraph
  72 */
  73 
  74         
  75 
  76     // Paramètres conférence
  77     var duration = 20 *60;                                              // temps par défaut                                     (en secondes)
  78     var limits = [ 5  *60                                               // i=0, seuil entre vert et jaune               (en secondes)
  79                                 ,  3  *60                                               // i=1, seuil entre jaune et orange     (en secondes)
  80                                 ,  1  *60];                             // i=2, seuil entre orange et rouge     (en secondes)
  81 
  82 
  83     var limitColors = ["DarkGoldenRod", "DarkOrange", "red"];  // couleurs des seuils : https://www.w3schools.com/colors/colors_names.asp
  84     var period = 1000 ;                                                // periode en ms : 1000 = 1 s
  85 
  86     var chrono = duration ;
  87     var timeDiv = document.querySelector("#timer");
  88 
  89     // formatage d'un nombre sous la forme "00"
  90     var format = function(n) {
  91         return (n > 9) ? "" + n : "0" + n;
  92     };
  93 
  94     // retourne le chrono formatté pour l'affichage mm:ss
  95     var chronoFormat = function(chrono) {
  96         var min = (chrono / 60)|0;
  97         var sec = chrono % 60;   
  98         return format(min) + ":" + format(sec); 
  99     };
 100 
 101 
 102     // tic-tac
 103     var tick = function() {
 104         if (started) {
 105             chrono--;
 106             if (chrono < 0) {
 107                 chrono = 0;
 108                 started = false;
 109             }
 110             else {
 111                 timeDiv.innerHTML = chronoFormat(chrono);
 112                                 jaugeupdate();
 113                                 if (chrono > limits[0]) {
 114                                         timeDiv.style.backgroundColor = "green";
 115                                 }
 116                 else {
 117                                         for (var i = 0; i < limits.length; i++) {
 118                                                 if (chrono <= limits[i]) {
 119                                                         timeDiv.style.backgroundColor = limitColors[i];
 120                                                 }
 121                                         }
 122                 }
 123             }
 124         }
 125     };
 126 
 127         // mise à jour de la jauge (bargraph)
 128         var jaugeupdate = function() {
 129                 var pourcent = chrono * 100 / duration;
 130                 bargraph.setAttribute("value",pourcent);
 131 
 132                 // limite "jaune"
 133                 var high = Math.min((limits[1] * 100 / duration),(30/100 * duration));
 134                 bargraph.setAttribute("high",high);
 135 
 136                 // limite "rouge"
 137                 var low = Math.min((limits[2] * 100 / duration),(10/100 * duration));
 138                 bargraph.setAttribute("low",low);
 139 
 140         }
 141 
 142 
 143         
 144     // traitement des entrées clavier
 145     var keyboard = function(e) {
 146         switch (e.keyCode) {
 147             // touche "i" :  initialise le chrono à la valeur de départ
 148             case 73:
 149                 chrono = duration;
 150                 started = false;
 151                 timeDiv.innerHTML = chronoFormat(chrono);
 152                 timeDiv.style.backgroundColor = "green";
 153                                 jaugeupdate();
 154                 break;
 155             
 156             // touche "SPACE" : arrêt / démarrage du chrono
 157             case 32:
 158                 e.preventDefault();
 159                 started = !started;
 160                                 jaugeupdate();
 161                 break;
 162 
 163                         // touche "a" : ajoute 1mn au temps en cours
 164             case 65:
 165                 chrono = Math.min((chrono + 60),duration);
 166                 timeDiv.innerHTML = chronoFormat(chrono);
 167                                 jaugeupdate();
 168                 break;
 169 
 170                         // touche "q" : enlève 1mn au temps en cours
 171             case 81:
 172                 chrono = Math.max((chrono - 60),0);
 173                 timeDiv.innerHTML = chronoFormat(chrono);
 174                 break;
 175 
 176                         // touche "z" : ajoute 1s au temps en cours
 177             case 90:
 178                 chrono = Math.min((chrono + 1),duration);
 179                 timeDiv.innerHTML = chronoFormat(chrono);
 180                                 jaugeupdate();
 181                 break;
 182 
 183                         // touche "s" : enlève 1s au temps en cours
 184             case 83:
 185                 chrono = Math.max((chrono - 1),0);
 186                 timeDiv.innerHTML = chronoFormat(chrono);
 187                 break;
 188                                 
 189                         // touche "t" : ajoute 1mn au temps de départ et initialise le chrono
 190             case 84:
 191                 duration = duration + 60;
 192                 chrono = duration;
 193                                 started = false;
 194                 timeDiv.innerHTML = chronoFormat(chrono);
 195                 timeDiv.style.backgroundColor = "blue";
 196                                 jaugeupdate();
 197                 break;
 198 
 199                         // touche "y" : ajoute 1s au temps de départ et initialise le chrono
 200             case 89:
 201                 duration = duration + 1;
 202                 chrono = duration;
 203                                 started = false;
 204                 timeDiv.innerHTML = chronoFormat(chrono);
 205                 timeDiv.style.backgroundColor = "blue";
 206                                 jaugeupdate();
 207                 break;
 208 
 209                         // touche "g" : enlève 1mn au temps de départ et initialise le chrono
 210             case 71:
 211                                 duration = Math.max((duration - 60),0);
 212                 chrono = duration;
 213                 started = false;
 214                 timeDiv.innerHTML = chronoFormat(chrono);
 215                 timeDiv.style.backgroundColor = "blue";
 216                                 jaugeupdate();
 217                 break;
 218                                 
 219                         // touche "h" : enlève 1mn au temps de départ et initialise le chrono
 220             case 72:
 221                                 duration = Math.max((duration - 1),0);
 222                 chrono = duration;
 223                 started = false;
 224                 timeDiv.innerHTML = chronoFormat(chrono);
 225                 timeDiv.style.backgroundColor = "blue";
 226                                 jaugeupdate();
 227                 break;
 228 
 229         }
 230     };
 231 
 232 
 233     // Initialisation
 234     timeDiv.innerHTML = chronoFormat(chrono);
 235     var started = false;
 236         var bargraph = document.getElementById('jauge');
 237         jaugeupdate();
 238     document.addEventListener("keydown", keyboard, false);
 239     window.setInterval(tick, period);
 240 
 241 
 242 </script>
 243 
 244 
 245 </body>
 246 </html>

application timer (dernière édition le 2018-04-11 14:32:52 par PhilippeOrth)