welcome: please sign in
location: application timer

   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 (last edited 2018-04-11 14:32:52 by PhilippeOrth)