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>