Added messaging

README.MD

@@ -4,5 +4,5 @@
 - [X] Pausing functions
 - [X] Presets
 - [ ] Progress bar
-- [ ] time on countdown page
+- [X] time on countdown page
-- [ ] one-way messaging
+- [X] one-way messaging

index.js

@@ -22,7 +22,11 @@ currentState = {
   defaultFullScreen: true,
   timeAmountInital: 0,
   timerRunState: true,
-  pauseMoment: 0
+  pauseMoment: 0,
+  showTimeOnCountdown: true,
+  message: "",
+  showMessage: false,
+  messageAppearTime: 0
 };
 
 app.get("/", function (req, res) {
@@ -77,4 +81,21 @@ app.get("/api/v1/ctrl/timer/restart", function (req, res) {
   res.json({ status: "ok" });
 });
 
+app.get("/api/v1/set/showTime", function (req, res) {
+  currentState.showTimeOnCountdown = (req.query.show === 'true');
+  res.json({ status: "ok" });
+});
+
+app.get("/api/v1/ctrl/message/show", function (req, res) {
+  currentState.message = req.query.msg
+  currentState.showMessage = true
+  currentState.messageAppearTime = new Date().getTime()
+  res.json({ status: "ok" });
+});
+
+app.get("/api/v1/ctrl/message/hide", function (req, res) {
+  currentState.showMessage = false
+  res.json({ status: "ok" });
+});
+
 app.listen(3005);

static/css/styles.css

@@ -19,7 +19,7 @@ html, body {
   position: relative;
   justify-content: center;
   align-items: center;
-  
+  flex-direction: column;
 }
 
 .timer {
@@ -27,6 +27,17 @@ html, body {
   text-align: center;
   font-variant-numeric: tabular-nums;
   font-family: sans-serif;
+  order: 1;
+}
+
+.clockSec {
+  padding: 5%;
+  font-size: 10em;
+  color: grey;
+  text-align: center;
+  font-variant-numeric: tabular-nums;
+  font-family: sans-serif;
+  order: 1;
 }
 
 .testImg{
@@ -34,3 +45,44 @@ html, body {
   width: 100%;
 }
 
+
+
+#overlay {
+  position: fixed;
+  font-family: sans-serif;
+  display: none;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 2;
+}
+
+#text{
+  position: absolute;
+  top: 70%;
+  left: 50%;
+  font-size: 50px;
+  color: white;
+  transform: translate(-50%,-50%);
+  -ms-transform: translate(-50%,-50%);
+}
+
+@keyframes fade {
+  from { opacity: 1.0; }
+  50% { opacity: 0.5; }
+  to { opacity: 1.0; }
+}                                                                                                                                                                                                                                  
+
+@-webkit-keyframes fade {
+  from { opacity: 1.0; }
+  50% { opacity: 0.5; }
+  to { opacity: 1.0; }
+}
+
+.blink {
+animation:fade 1000ms infinite;
+-webkit-animation:fade 1000ms infinite;
+}

static/js/interface.js

@@ -2,7 +2,3 @@ function convertTimeOffset(){
     selTime = new Date().getTime() + document.getElementById('time2').valueAsNumber
     document.getElementById("time").value = selTime
 }
-
-function updateHiddenForm2(){
-    document.getElementById("time4").value = document.getElementById('time3').value
-}

static/js/script.js

@@ -1,6 +1,8 @@
 var newDateObj = new Date();
 newDateObj =  new Date(newDateObj.getTime() + 1000*20)
 
+allowFullscreen = true
+
 function enterFullscreen(element) {
   if(element.requestFullscreen) {
     element.requestFullscreen();
@@ -12,7 +14,7 @@ function enterFullscreen(element) {
 }
 
 function updateFullscreen(){
-  if(JSON.parse(document.getElementById("incomeData").innerHTML).defaultFullScreen){
+  if(JSON.parse(document.getElementById("incomeData").innerHTML).defaultFullScreen && allowFullscreen){
     enterFullscreen(document.documentElement)
   }
 }
@@ -44,16 +46,33 @@ function msToTime(s, data) {
 }
 
 function handleUpdate() {
-  resp = httpGet("/api/v1/data?markRead=mark");
+  resp = httpGet("/api/v1/data");
 
   var data = JSON.parse(resp);
   document.getElementById("incomeData").innerHTML = JSON.stringify(data)
 
-  if(data.defaultFullScreen && document.getElementById("initalDate").innerHTML.includes("true")){
+  if(data.defaultFullScreen && document.getElementById("initalDate").innerHTML.includes("true") && allowFullscreen){
     enterFullscreen(document.documentElement);  
     document.getElementById("initalDate").innerHTML = "false"
   }
 
+  if(data.showMessage) {
+    document.getElementById("overlay").style.display = "block";
+    document.getElementById("text").innerHTML = data.message
+  }else{
+    off()
+  }
+
+  if(new Date().getTime() - data.messageAppearTime < 5000) {
+    if (! document.getElementById("text").classList.contains('blink') ){
+      document.getElementById("text").classList.add("blink")
+    }
+  }else{
+    if ( document.getElementById("text").classList.contains('blink') ){
+      document.getElementById("text").classList.remove("blink")
+    }
+  }
+
 
   if (data.mode == "clock") {
     document.getElementById("timer").innerHTML = getTime();
@@ -66,6 +85,11 @@ function handleUpdate() {
       document.getElementById("timer").innerHTML = msToTime(diff, data);
       document.getElementById("testImg").style.display = "none";
     }
+    if(data.showTimeOnCountdown){
+      document.getElementById("clockSec").innerHTML = getTime();
+    } else {
+      document.getElementById("clockSec").innerHTML = "";
+    }
 
   } else if (data.mode == "black") {
     document.getElementById("timer").innerHTML = "";
@@ -98,6 +122,14 @@ function getTime() {
   return time;
 }
 
+function on() {
+  document.getElementById("overlay").style.display = "block";
+}
+
+function off() {
+  document.getElementById("overlay").style.display = "none";
+}
+
 setInterval(handleUpdate, 200);
 
 let temp = new URLSearchParams(window.location.search).get("smaller");
@@ -106,4 +138,5 @@ let temp = new URLSearchParams(window.location.search).get("smaller");
 if (temp == "true") {
   var cssURL = '/css/smallerTextMod.css';
   document.head.innerHTML +='<link rel="stylesheet" href="' + cssURL + '"/>'
+  allowFullscreen = false
 }

templates/adminPanel.html

@@ -25,6 +25,7 @@
     </select>
     <button type="submit">Submit</button>
   </form>
+
   <br>
   <form action="/api/v1/set/showMillis" target="hiddenFrame">
     <select id="show" name="show">
@@ -34,6 +35,14 @@
     <button type="submit">Submit</button>
   </form>
 
+  <form action="/api/v1/set/showTime" target="hiddenFrame">
+    <select id="show" name="show">
+      <option value="true">Show Clock on Countdown page</option>
+      <option value="false">Do not show Clock on Countdown page</option>
+    </select>
+    <button type="submit">Submit</button>
+  </form>
+
   <form action="/api/v1/set/addMillisToTimer" target="hiddenFrame">
     <input type="time" step="0.001" name="time2" id="time2" onchange="updateHiddenForm()"></input>
     <input type="hidden" step="0.001" name="time" id="time"></input>
@@ -55,6 +64,7 @@
     <button type="submit">Submit</button>
   </form>
 
+  Play controls:
   <form action="/api/v1/ctrl/timer/play" target="hiddenFrame">
     <button type="submit">Play</button>
   </form>
@@ -65,6 +75,14 @@
     <button type="submit">Restart</button>
   </form>
   
+  Message: 
+  <form action="/api/v1/ctrl/message/show" target="hiddenFrame">
+    <input type="text" name="msg">
+    <button type="submit">Submit</button>
+  </form>
+  <form action="/api/v1/ctrl/message/hide" target="hiddenFrame">
+    <button type="submit">Hide</button>
+  </form>
   <iframe name="hiddenFrame" style="display: none"></iframe>
 
 

templates/timerPage.html

@@ -14,17 +14,26 @@
 </head>
 
 <body onclick="updateFullscreen()">
+
+    <div id="overlay" onclick="off()">
+        <div id="text">Message here</div>
+    </div>
+
     <img src='SMPTE_Color_Bars.svg' class='testImg' id="testImg" style="display: none;">
-</img>
+    </img>
-<valueStore style="display: none;">
+    <valueStore style="display: none;">
-    <value id="initalDate">true</value>
+        <value id="initalDate">true</value>
-    <value id="incomeData"></value>
+        <value id="incomeData"></value>
-</valueStore>
+    </valueStore>
 
     <div class="container">
         <div class="timer" id="timer">
             00:00:00
         </div>
+        <div class="clockSec" id="clockSec">
+
+        </div>
+
     </div>
     <script src="js/countdown.js"></script>
     <script src="js/script.js"></script>