From 6c63684929a8d9a039968d2a0390a6ce4a276d2d Mon Sep 17 00:00:00 2001
From: mvoelkel <mvoelkel@digitaldevices.de>
Date: Tue, 28 Jun 2016 20:35:41 +0200
Subject: [PATCH] Stream and tuner status converted to ajax

---
 octoserve/http.c                    |  10 +--
 octoserve/var/www/streamstatus.html | 116 ++++++++++++++-----------
 octoserve/var/www/tunerstatus.html  | 127 +++++++++++++++-------------
 3 files changed, 138 insertions(+), 115 deletions(-)
diff --git a/octoserve/http.c b/octoserve/http.c
index a7b6ad6..40083e5 100644
--- a/octoserve/http.c
+++ b/octoserve/http.c
@@ -373,10 +373,10 @@ void send_json_tunerstatus(struct os_ssdp *ss)
 		sendstr(fd, "{\"Input\":\"%u\"", i);
 		sendstr(fd, ",\"Status\":\"%s\"", fe->state ? "Active" : "Inactive");
 		sendstr(fd, ",\"Lock\":%s", fe->lock ? "true" : "false");
-		sendstr(fd, ",\"Strength\":\"%d\"", fe->strength);
-		sendstr(fd, ",\"SNR\":\"%d\"", fe->snr);
-		sendstr(fd, ",\"Quality\":\"%u\"", fe->quality);
-		sendstr(fd, ",\"Level\":\"%u\"", fe->level);
+		sendstr(fd, ",\"Strength\":%d", fe->strength);
+		sendstr(fd, ",\"SNR\":%d", fe->snr);
+		sendstr(fd, ",\"Quality\":%u", fe->quality);
+		sendstr(fd, ",\"Level\":%u", fe->level);
 		sendstr(fd, "}");
 	}
 	sendstr(fd, "\r\n]}\r\n");
@@ -455,7 +455,7 @@ static void send_json_streamstatus(struct os_ssdp *ss)
 	clock_gettime(CLOCK_MONOTONIC, &tp);
 	gettimeofday(&tval, NULL);
 	sendlen(fd, httpjson, sizeof(httpjson) - 1);
-	sendstr(fd, "{\"Timestamp\":%u,\r\n", (uint32_t) (tp.tv_sec * 1000 + tp.tv_nsec / 1000000));
+	sendstr(fd, "{\"TimeStamp\":%u,\r\n", (uint32_t) (tp.tv_sec * 1000 + tp.tv_nsec / 1000000));
 	sendstr(fd, "\"StreamList\":[\r\n");
 	for (i = 0; i < MAX_STREAM; i++) {
 		uint32_t ctrl = ddreg(dd, 0x400 + i*0x20);
diff --git a/octoserve/var/www/streamstatus.html b/octoserve/var/www/streamstatus.html
index 4fe059b..828d7da 100644
--- a/octoserve/var/www/streamstatus.html
+++ b/octoserve/var/www/streamstatus.html
@@ -1,4 +1,4 @@
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<!DOCTYPE HTML>
 <html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
@@ -7,13 +7,35 @@
 <link rel="stylesheet" type="text/css" href="/style.css">
 <script type="text/javascript" src="/menu.js"></script>
 <!--  Add additional scripts and settings here -->
-<script id=script1 type="text/javascript" src="/octoserve/streamstatus.js"></script>
 
 <!-- Add page scripts here -->
 <script type="text/javascript">
 
 var LastTimeStamp = 0;
-var LastBytes;
+var LastBytes = null;
+
+var xmlhttp = new XMLHttpRequest();
+var url = "/octoserve/streamstatus.json";
+
+xmlhttp.onreadystatechange=function()
+{
+    if (xmlhttp.readyState == 4 )
+    {
+      if( xmlhttp.status == 200 )
+         myFunction(xmlhttp.responseText);
+    }
+}
+
+function myFunction(response)
+{
+   try 
+   {
+      var js = JSON.parse(response);   
+      Show(js.StreamList,js.TimeStamp);
+   }
+   catch(err) {}
+   window.setTimeout(renew,1000);  
+}
 
 function Diff(a,b)
 {
@@ -25,34 +47,50 @@ function Diff(a,b)
     return b - a;
 }
 
-function Show()
+function Show(StreamList,TimeStamp)
 {
+   if( LastBytes == null )
+   {
+     LastBytes = new Array();
+     LastTimeStamp = TimeStamp;
+     for( var i = 0; i < StreamList.length; i++ )
+     {
+       LastBytes[i] = 0;
+       if( StreamList[i].Status == "Active" )
+       {
+         LastBytes[i] = StreamList[i].Bytes;
+       }
+       document.getElementById("trStream"+i).style.display = "table-row";    
+     }
+   }
+
+
   for(var i = 0; i < StreamList.length ; i++ )
   {    
     if( StreamList[i].Status == "Active" )
     {
-      document.getElementById("elStatus"+i).firstChild.nodeValue = "Running";
-      document.getElementById("elInput"+i).firstChild.nodeValue  = StreamList[i].Input + 1;
-      document.getElementById("elClient"+i).firstChild.nodeValue  = StreamList[i].Client;
-      document.getElementById("elPackets"+i).firstChild.nodeValue  = StreamList[i].Packets;
+      document.getElementById("tdStatus"+i).firstChild.nodeValue = "Running";
+      document.getElementById("tdInput"+i).firstChild.nodeValue  = StreamList[i].Input + 1;
+      document.getElementById("tdClient"+i).firstChild.nodeValue  = StreamList[i].Client;
+      document.getElementById("tdPackets"+i).firstChild.nodeValue  = StreamList[i].Packets;
       var TimeDiff = Diff(LastTimeStamp,TimeStamp);
       var BytesDiff = Diff(LastBytes[i],StreamList[i].Bytes);
       if( TimeDiff > 0 && BytesDiff > 0 )
       {
         var Speed = 8000 * BytesDiff / TimeDiff;
-        document.getElementById("elSpeed"+i).firstChild.nodeValue  = Speed.toFixed(0);
+        document.getElementById("tdSpeed"+i).firstChild.nodeValue  = Speed.toFixed(0);
         LastBytes[i] = StreamList[i].Bytes;
       }
       else
-        document.getElementById("elSpeed"+i).firstChild.nodeValue  = "";
+        document.getElementById("tdSpeed"+i).firstChild.nodeValue  = "";
     }
     else
     {
-      document.getElementById("elStatus"+i).firstChild.nodeValue = "Stopped";
-      document.getElementById("elInput"+i).firstChild.nodeValue  = "";
-      document.getElementById("elClient"+i).firstChild.nodeValue  = "";
-      document.getElementById("elPackets"+i).firstChild.nodeValue  = "";
-      document.getElementById("elSpeed"+i).firstChild.nodeValue  = "";
+      document.getElementById("tdStatus"+i).firstChild.nodeValue = "Stopped";
+      document.getElementById("tdInput"+i).firstChild.nodeValue  = "";
+      document.getElementById("tdClient"+i).firstChild.nodeValue  = "";
+      document.getElementById("tdPackets"+i).firstChild.nodeValue  = "";
+      document.getElementById("tdSpeed"+i).firstChild.nodeValue  = "";
       LastBytes[i] = 0;
     }
   }
@@ -61,34 +99,13 @@ function Show()
 
 function renew()
 {
-  
-  script = document.getElementById("script1");
-  head = document.getElementsByTagName('head')[0];
-  head.removeChild(script);
-  newscript = document.createElement('script');
-  newscript.id = "script1";
-  newscript.type = script.type;
-  newscript.src = script.src;
-  head.appendChild(newscript);
-  
-  Show();
-  window.setTimeout(renew,1000);  
+   xmlhttp.open("GET", url, true);
+   xmlhttp.send();
 }
 
 function OnLoad()
 {
-  LastBytes = new Array();
-  LastTimeStamp = TimeStamp;
-  for( var i = 0; i < StreamList.length; i++ )
-  {
-    LastBytes[i] = 0;
-    if( StreamList[i].Status == "Active" )
-    {
-      LastBytes[i] = StreamList[i].Bytes;
-    }
-  }
   
-  Show();
   window.setTimeout(renew,1000);  
 }
 
@@ -130,18 +147,17 @@ function OnLoad()
               <th>Speed</th>
             </tr>
             <script type="text/javascript">
-            for( i = 0; i < StreamList.length ; i++ )
-            {    
-              document.write('<tr>');
-              document.write('<td>' + (i+1) + '</td>');  
-              document.write('<td id="elStatus'+i+'">&nbsp;</td>');
-              document.write('<td id="elInput'+i+'">&nbsp;</td>');
-              document.write('<td id="elClient'+i+'">&nbsp;</td>');
-              document.write('<td id="elPackets'+i+'">&nbsp;</td>');    
-              document.write('<td id="elSpeed'+i+'">&nbsp;</td>');
-              document.write('</tr>');
-            }
-
+                for( var i = 0; i < 16 ; i++ )
+                {    
+                  document.write('<tr id="trStream'+i+'" style="display:none">');
+                  document.write('<td>' + (i+1) + '</td>');  
+                  document.write('<td id="tdStatus'+i+'">&nbsp;</td>');
+                  document.write('<td id="tdInput'+i+'">&nbsp;</td>');
+                  document.write('<td id="tdClient'+i+'">&nbsp;</td>');
+                  document.write('<td id="tdPackets'+i+'">&nbsp;</td>');    
+                  document.write('<td id="tdSpeed'+i+'">&nbsp;</td>');
+                  document.write('</tr>');
+                }
             </script>
 
           </table>
diff --git a/octoserve/var/www/tunerstatus.html b/octoserve/var/www/tunerstatus.html
index 8952e00..087459e 100644
--- a/octoserve/var/www/tunerstatus.html
+++ b/octoserve/var/www/tunerstatus.html
@@ -1,4 +1,4 @@
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<!DOCTYPE HTML>
 <html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
@@ -7,58 +7,75 @@
 <script type="text/javascript" src="/menu.js"></script>
 <!--  Add additional scripts and settings here -->
 <meta http-equiv="Pragma" content="no-cache" />
-<script id=script1 type="text/javascript" src="/octoserve/tunerstatus.js"></script>
 
 <!-- Add page scripts here -->
 <script type="text/javascript">
-function Show()
+
+
+var xmlhttp = new XMLHttpRequest();
+var url = "/octoserve/tunerstatus.json";
+
+xmlhttp.onreadystatechange=function()
 {
-  for( i = 0; i < TunerList.length ; i++ )
+    if (xmlhttp.readyState == 4 )
+    {
+      if( xmlhttp.status == 200 )
+         myFunction(xmlhttp.responseText);
+    }
+}
+
+function myFunction(response)
+{
+   try 
+   {
+      var tl = JSON.parse(response);   
+      Show(tl.TunerList);
+   }
+   catch(err) {}
+   window.setTimeout(renew,1000);  
+}
+
+
+function Show(TunerList)
+{
+  for( var i = 0; i < TunerList.length ; i++ )
   {
-    if( TunerList[i].Active )
+    if( TunerList[i].Status != "Inactive" )
     {
       if( TunerList[i].Lock )
       {
-        document.getElementById("elStatus"+i).firstChild.nodeValue  = "Locked";
-        document.getElementById("elStrength"+i).firstChild.nodeValue  = TunerList[i].Strength;
-        document.getElementById("elQuality"+i).firstChild.nodeValue  = TunerList[i].Quality;
+        document.getElementById("tdStatus"+i).firstChild.nodeValue  = "Locked";
+        document.getElementById("tdStrength"+i).firstChild.nodeValue  = (TunerList[i].Strength/1000+108.75).toFixed(1)+" dBµV";
+        document.getElementById("tdSNR"+i).firstChild.nodeValue  = (TunerList[i].SNR/1000).toFixed(1) + " dB";
+        document.getElementById("tdQuality"+i).firstChild.nodeValue  = TunerList[i].Quality.toFixed(0) + "%";
       }
       else
       {
-        document.getElementById("elStatus"+i).firstChild.nodeValue  = "No Signal";
-        document.getElementById("elStrength"+i).firstChild.nodeValue  = "";
-        document.getElementById("elQuality"+i).firstChild.nodeValue  = "";
+        document.getElementById("tdStatus"+i).firstChild.nodeValue  = "No Signal";
+        document.getElementById("tdStrength"+i).firstChild.nodeValue  = "";
+        document.getElementById("tdSNR"+i).firstChild.nodeValue  = "";
+        document.getElementById("tdQuality"+i).firstChild.nodeValue  = "";
       }
     }
-    else
-    {
-      document.getElementById("elStatus"+i).firstChild.nodeValue  = "";
-      document.getElementById("elStrength"+i).firstChild.nodeValue  = "";
-      document.getElementById("elQuality"+i).firstChild.nodeValue  = "";
-    }
-    
+    document.getElementById("trTuner"+i).style.display = "table-row";    
   }
 }
 
 function renew()
 {
-  script = document.getElementById("script1");
-  head = document.getElementsByTagName('head')[0];
-  head.removeChild(script);
-  newscript = document.createElement('script');
-  newscript.id = "script1";
-  newscript.type = script.type;
-  newscript.src = script.src;
-  head.appendChild(newscript);
-  
-  Show();
-  window.setTimeout(renew,1000);  
+   xmlhttp.open("GET", url, true);
+   xmlhttp.send();
+}
+
+function OnLoad()
+{
+   window.setTimeout(renew,1000);  
 }
 
 </script>
-</head>
-<body>
 
+</head>
+<body onload="OnLoad()">
 <table class="maintable" align="center">
   <colgroup>
     <col width="182px"/>
@@ -75,35 +92,25 @@ function renew()
         <!-- Begin Content -->
         
           <table id="tunerstatus" align="center">
-          <tr>
-          <th>
-          Tuner
-          </th>
-          <th>
-          Lock
-          </th>
-          <th>
-          Strength
-          </th>
-          <th>
-          Quality
-          </th>
-          </tr>
-          <script type="text/javascript">
-          for( i = 0; i < TunerList.length ; i++ )
-          {    
-            document.write('<tr>');
-            document.write('<td>' + (i+1) + '</td>');  
-            document.write('<td id="elStatus'+i+'">&nbsp;</td>');
-            document.write('<td id="elStrength'+i+'">&nbsp;</td>');
-            document.write('<td id="elQuality'+i+'">&nbsp;</td>');    
-            document.write('</tr>');
-          }
-
-          Show();
-          window.setTimeout(renew,1000);  
-          </script>
-
+             <tr>
+               <th>Tuner</th>
+               <th>Lock</th>
+               <th>Strength</th>
+               <th>SNR</th>
+               <th>Quality</th>
+             </tr>
+             <script type="text/javascript">
+                for( var i = 0; i < 12 ; i++ )
+                {    
+                  document.write('<tr id="trTuner'+i+'" style="display:none">');
+                  document.write('<td>' + (i+1) + '</td>');  
+                  document.write('<td id="tdStatus'+i+'">&nbsp;</td>');
+                  document.write('<td id="tdStrength'+i+'">&nbsp;</td>');
+                  document.write('<td id="tdSNR'+i+'">&nbsp;</td>');
+                  document.write('<td id="tdQuality'+i+'">&nbsp;</td>');    
+                  document.write('</tr>');
+                }
+             </script>
           </table>
         
         
