2016-06-28 20:35:41 +02:00
|
|
|
<!DOCTYPE HTML>
|
2015-08-05 22:22:06 +02:00
|
|
|
<html>
|
|
|
|
|
<head>
|
2015-09-09 19:39:12 +02:00
|
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
2015-08-05 22:22:06 +02:00
|
|
|
<meta http-equiv="Pragma" content="no-cache" />
|
|
|
|
|
<title>OctopusNet</title>
|
|
|
|
|
<link rel="stylesheet" type="text/css" href="/style.css">
|
|
|
|
|
<script type="text/javascript" src="/menu.js"></script>
|
|
|
|
|
<!-- Add additional scripts and settings here -->
|
|
|
|
|
|
|
|
|
|
<!-- Add page scripts here -->
|
|
|
|
|
<script type="text/javascript">
|
|
|
|
|
|
|
|
|
|
var LastTimeStamp = 0;
|
2016-06-28 20:35:41 +02:00
|
|
|
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);
|
|
|
|
|
}
|
2015-08-05 22:22:06 +02:00
|
|
|
|
|
|
|
|
function Diff(a,b)
|
|
|
|
|
{
|
|
|
|
|
if( b < 0 && a > 0 )
|
|
|
|
|
{
|
|
|
|
|
return b - a + 4294967296;
|
|
|
|
|
}
|
|
|
|
|
else
|
|
|
|
|
return b - a;
|
|
|
|
|
}
|
|
|
|
|
|
2016-06-28 20:35:41 +02:00
|
|
|
function Show(StreamList,TimeStamp)
|
2015-08-05 22:22:06 +02:00
|
|
|
{
|
2016-06-28 20:35:41 +02:00
|
|
|
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";
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
2015-08-05 22:22:06 +02:00
|
|
|
for(var i = 0; i < StreamList.length ; i++ )
|
|
|
|
|
{
|
|
|
|
|
if( StreamList[i].Status == "Active" )
|
|
|
|
|
{
|
2016-06-28 20:35:41 +02:00
|
|
|
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;
|
2015-08-05 22:22:06 +02:00
|
|
|
var TimeDiff = Diff(LastTimeStamp,TimeStamp);
|
|
|
|
|
var BytesDiff = Diff(LastBytes[i],StreamList[i].Bytes);
|
|
|
|
|
if( TimeDiff > 0 && BytesDiff > 0 )
|
|
|
|
|
{
|
|
|
|
|
var Speed = 8000 * BytesDiff / TimeDiff;
|
2016-06-28 20:35:41 +02:00
|
|
|
document.getElementById("tdSpeed"+i).firstChild.nodeValue = Speed.toFixed(0);
|
2015-08-05 22:22:06 +02:00
|
|
|
LastBytes[i] = StreamList[i].Bytes;
|
|
|
|
|
}
|
|
|
|
|
else
|
2016-06-28 20:35:41 +02:00
|
|
|
document.getElementById("tdSpeed"+i).firstChild.nodeValue = "";
|
2015-08-05 22:22:06 +02:00
|
|
|
}
|
|
|
|
|
else
|
|
|
|
|
{
|
2016-06-28 20:35:41 +02:00
|
|
|
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 = "";
|
2015-08-05 22:22:06 +02:00
|
|
|
LastBytes[i] = 0;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
LastTimeStamp = TimeStamp;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function renew()
|
|
|
|
|
{
|
2016-06-28 20:35:41 +02:00
|
|
|
xmlhttp.open("GET", url, true);
|
|
|
|
|
xmlhttp.send();
|
2015-08-05 22:22:06 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function OnLoad()
|
|
|
|
|
{
|
|
|
|
|
|
|
|
|
|
window.setTimeout(renew,1000);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
</head>
|
|
|
|
|
|
|
|
|
|
<body onload="OnLoad()">
|
|
|
|
|
|
2016-06-30 18:25:11 +02:00
|
|
|
<table class="maintable">
|
2015-08-05 22:22:06 +02:00
|
|
|
<colgroup>
|
2016-06-30 18:25:11 +02:00
|
|
|
<col style="width:182px"/>
|
|
|
|
|
<col style="width:728px"/>
|
2015-08-05 22:22:06 +02:00
|
|
|
</colgroup>
|
|
|
|
|
<tr><td class="maintd" colspan="2">
|
|
|
|
|
<a href="http://www.digitaldevices.de"><img src="/BannerDD.jpg" alt="DD" width="910" height="130" /></a>
|
|
|
|
|
</td></tr>
|
|
|
|
|
<tr><td class="maintd" colspan="2"> </td></tr>
|
|
|
|
|
<tr>
|
|
|
|
|
<td class="maintd"><script type="text/javascript">CreateMenu();</script></td>
|
|
|
|
|
<td class="maintd">
|
|
|
|
|
<div class="content">
|
|
|
|
|
<!-- Begin Content -->
|
2016-06-30 18:25:11 +02:00
|
|
|
<table id="streamstatus" style="margin:auto">
|
2015-08-05 22:22:06 +02:00
|
|
|
<colgroup>
|
2016-06-30 18:25:11 +02:00
|
|
|
<col style="width:80px"/>
|
|
|
|
|
<col style="width:80px"/>
|
|
|
|
|
<col style="width:80px"/>
|
|
|
|
|
<col style="width:100px"/>
|
|
|
|
|
<col style="width:130px"/>
|
|
|
|
|
<col style="width:170px"/>
|
2015-08-05 22:22:06 +02:00
|
|
|
</colgroup>
|
|
|
|
|
<tr>
|
|
|
|
|
<th>Stream</th>
|
|
|
|
|
<th>Status</th>
|
|
|
|
|
<th>Input</th>
|
|
|
|
|
<th>Client</th>
|
|
|
|
|
<th>RTP Packets</th>
|
|
|
|
|
<th>Speed</th>
|
|
|
|
|
</tr>
|
|
|
|
|
<script type="text/javascript">
|
2016-06-28 20:35:41 +02:00
|
|
|
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+'"> </td>');
|
|
|
|
|
document.write('<td id="tdInput'+i+'"> </td>');
|
|
|
|
|
document.write('<td id="tdClient'+i+'"> </td>');
|
|
|
|
|
document.write('<td id="tdPackets'+i+'"> </td>');
|
|
|
|
|
document.write('<td id="tdSpeed'+i+'"> </td>');
|
|
|
|
|
document.write('</tr>');
|
|
|
|
|
}
|
2015-08-05 22:22:06 +02:00
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
</table>
|
|
|
|
|
<!-- End Content -->
|
|
|
|
|
</div>
|
|
|
|
|
</td>
|
|
|
|
|
</tr>
|
|
|
|
|
<tr><td colspan="2"> </td></tr>
|
|
|
|
|
</table>
|
|
|
|
|
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
