timer.html 9.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Timer</title>
  5. <link rel="stylesheet" href="../script/semantic/semantic.min.css">
  6. <script src="../script/jquery.min.js"></script>
  7. <script src="../script/ao_module.js"></script>
  8. <style>
  9. body{
  10. padding-top:40px;
  11. padding-bottom:50px;
  12. background-color:rgba(242, 242, 242, 0.85);
  13. backdrop-filter: blur(4px) !important;
  14. overflow: hidden;
  15. }
  16. </style>
  17. </head>
  18. <body>
  19. <div class="ui container" style="position:absolute;left:0;right:0;width:100%;" align="center">
  20. <div class="ui grid" style="margin-top: -30px;">
  21. <div class="five wide column">
  22. <div class="ui statistic">
  23. <div id="hour" class="value">00</div>
  24. <div class="label">Hours</div>
  25. </div><br>
  26. <div class="ui icon tiny buttons">
  27. <button class="ui button" onClick="adjustValue('hour',-1);"><i class="minus icon"></i></button>
  28. <button class="ui button" onClick="resetTimer('hour');"><i class="undo icon"></i></button>
  29. <button class="ui button"onClick="adjustValue('hour',1);"><i class="plus icon"></i></button>
  30. </div>
  31. </div>
  32. <div class="five wide column">
  33. <div class="ui statistic">
  34. <div id="min" class="value">00</div>
  35. <div class="label">Minutes</div>
  36. </div><br>
  37. <div class="ui icon tiny buttons">
  38. <button class="ui button" onClick="adjustValue('min',-1);"><i class="minus icon"></i></button>
  39. <button class="ui button" onClick="resetTimer('min');"><i class="undo icon"></i></button>
  40. <button class="ui button"onClick="adjustValue('min',1);"><i class="plus icon"></i></button>
  41. </div>
  42. </div>
  43. <div class="five wide column">
  44. <div class="ui statistic">
  45. <div id="sec" class="value">00</div>
  46. <div class="label">Seconds</div>
  47. </div><br>
  48. <div class="ui icon tiny buttons">
  49. <button class="ui button" onClick="adjustValue('sec',-1);"><i class="minus icon"></i></button>
  50. <button class="ui button" onClick="resetTimer('sec');"><i class="undo icon"></i></button>
  51. <button class="ui button"onClick="adjustValue('sec',1);"><i class="plus icon"></i></button>
  52. </div>
  53. </div>
  54. <div class="one wide column">
  55. <button id="startbtn" class="ui positive tiny icon button" onClick="startCountDown();" style="position:fixed;top:3px;right:3px;">
  56. <i class="play icon"></i>
  57. </button>
  58. <button id="pausebtn" class="ui basic tiny icon button disabled" onClick="pauseCountDown();" style="position:fixed;top:40px;right:3px;">
  59. <i class="pause icon"></i>
  60. </button>
  61. <button id="stopalarm" class="ui negative tiny icon button disabled" onClick="stopAlarm();" style="position:fixed;top:80px;right:3px;">
  62. <i class="alarm mute icon"></i>
  63. </button>
  64. </div>
  65. </div>
  66. </div>
  67. <script>
  68. //Init the timer window
  69. ao_module_setFixedWindowSize();
  70. ao_module_setWindowSize(380,190);
  71. ao_module_setWindowTitle("Countdown Timer - Ready");
  72. if (ao_module_windowID == false){
  73. $("body").append("<div style='position:fixed;bottom:10px;left:10px;'>[Warning] Seems you are not opening this module under virtual desktop mode. Some functions might be limited or not fully supported.</div>");
  74. }
  75. //Global variable
  76. var countingDown = false;
  77. var counter;
  78. setInterval(timerTick,1000);
  79. var alarmStartTime = 0;
  80. var volIncreaseInterval;
  81. var audio;
  82. //Handle button pressed
  83. function adjustValue(target,offset){
  84. if ($("#" + target).length == 0){
  85. return;
  86. }
  87. var currentSec = parseInt($("#" + target).text());
  88. if (target == "sec" || target == "min"){
  89. if (currentSec == 0 && offset < 0){
  90. currentSec = 60;
  91. }else if (currentSec == 59 && offset > 0){
  92. currentSec = -1;
  93. }
  94. currentSec += offset;
  95. updateCounterValue(target,currentSec);
  96. }else{
  97. //This logic loop controls the hour counter
  98. if (currentSec == 0 && offset < 0){
  99. currentSec = 24;
  100. }else if (currentSec == 23 && offset > 0){
  101. currentSec = -1;
  102. }
  103. currentSec += offset;
  104. updateCounterValue(target,currentSec);
  105. }
  106. }
  107. function resetTimer(target){
  108. $("#" + target).text("00");
  109. }
  110. function updateCounterValue(target,num){
  111. $("#" + target).text(fillZero(num));
  112. }
  113. function fillZero(value){
  114. if (value < 10){
  115. return "0" + value;
  116. }else{
  117. return value + "";
  118. }
  119. }
  120. function startCountDown(){
  121. countingDown = true;
  122. ao_module_setWindowTitle("Countdown Timer - Counting");
  123. }
  124. function pauseCountDown(){
  125. countingDown = false;
  126. ao_module_setWindowTitle("Countdown Timer - Ready");
  127. }
  128. function resetAllTimer(){
  129. updateCounterValue("sec",0);
  130. updateCounterValue("min",0);
  131. updateCounterValue("hour",0);
  132. }
  133. //Looping functions for timer ticks
  134. function timerTick(){
  135. //This function should be running every 1 second
  136. if (countingDown == true){
  137. $("#startbtn").addClass("disabled");
  138. $("#pausebtn").removeClass("disabled");
  139. var sec = parseInt($("#sec").text());
  140. var min = parseInt($("#min").text());
  141. var hour = parseInt($("#hour").text());
  142. //console.log("Coutning down");
  143. if (sec > 0){
  144. sec = sec - 1;
  145. }else if (sec == 0){
  146. sec = 59;
  147. if (min > 0){
  148. min = min -1;
  149. }else if (min == 0){
  150. min = 59;
  151. if (hour > 0){
  152. hour = hour -1;
  153. }else if (hour == 0){
  154. countingDown = false;
  155. //parent.msgbox("Timeout!","Timer Notification");
  156. startTimeoutEvents();
  157. resetAllTimer();
  158. return;
  159. }
  160. }
  161. }
  162. updateCounterValue("sec",sec);
  163. updateCounterValue("min",min);
  164. updateCounterValue("hour",hour);
  165. }else{
  166. $("#startbtn").removeClass("disabled");
  167. $("#pausebtn").addClass("disabled");
  168. }
  169. }
  170. function startTimeoutEvents(){
  171. if (alarmStartTime != 0){
  172. stopAlarm();
  173. }
  174. audio = new Audio('sound/imuslab_theme.mp3');
  175. audio.volume = 0.02;
  176. audio.play();
  177. alarmStartTime = time();
  178. volIncreaseInterval = setInterval( increaseVolumeALittleBit, 5000);
  179. $("#stopalarm").removeClass("disabled");
  180. ao_module_setWindowTitle("Countdown Timer - Time Out!");
  181. }
  182. function stopAlarm(){
  183. $("#stopalarm").addClass("disabled");
  184. clearInterval(volIncreaseInterval);
  185. audio.pause();
  186. audio.currentTime = 0;
  187. ao_module_setWindowTitle("Countdown Timer - Ready");
  188. alarmStartTime = 0;
  189. }
  190. function increaseVolumeALittleBit(){
  191. audio.volume += 0.02;
  192. console.log("[Timer] Alarm volume increased to: " + audio.volume);
  193. }
  194. function time(){
  195. return Math.floor(Date.now() / 1000);
  196. }
  197. </script>
  198. </body>
  199. </html>