108 lines
2.6 KiB
HTML
108 lines
2.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<title>LiveU-Status</title>
|
|
<link href="//cdn.materialdesignicons.com/3.7.95/css/materialdesignicons.min.css" rel="stylesheet" />
|
|
<script src="//code.jquery.com/jquery-3.4.1.min.js"></script>
|
|
<script>
|
|
$(document).ready(function() {
|
|
setInterval(function(){
|
|
$.ajax({
|
|
url: '/data.py',
|
|
cache: false,
|
|
success: function(result) {
|
|
var bitrate = result.bitrate;
|
|
var connectionText = result.connection;
|
|
|
|
if (typeof connectionText != 'undefined') {
|
|
$('#status').text(connectionText);
|
|
} else {
|
|
$('#status').text('');
|
|
}
|
|
|
|
if (typeof bitrate !== 'undefined') {
|
|
switch(true) {
|
|
case (bitrate >= 4000):
|
|
$('#icon').addClass('mdi-signal-cellular-3').removeClass('mdi-signal-cellular-outline').removeClass('mdi-signal-cellular-1').removeClass('mdi-signal-cellular-2');
|
|
break;
|
|
case (bitrate >= 3000):
|
|
$('#icon').addClass('mdi-signal-cellular-2').removeClass('mdi-signal-cellular-outline').removeClass('mdi-signal-cellular-1').removeClass('mdi-signal-cellular-3');
|
|
break;
|
|
case (bitrate >= 2000):
|
|
$('#icon').addClass('mdi-signal-cellular-1').removeClass('mdi-signal-cellular-outline').removeClass('mdi-signal-cellular-2').removeClass('mdi-signal-cellular-3');
|
|
break;
|
|
default:
|
|
$('#icon').addClass('mdi-signal-cellular-outline').removeClass('mdi-signal-cellular-1').removeClass('mdi-signal-cellular-2').removeClass('mdi-signal-cellular-3');
|
|
break;
|
|
}
|
|
}
|
|
},
|
|
error: function(xhr, ajaxOptions, thrownError) {
|
|
console.log('Error');
|
|
console.log(xhr.status);
|
|
console.log(thrownError);
|
|
}
|
|
});
|
|
}, 1000);
|
|
});
|
|
</script>
|
|
|
|
<style>
|
|
body {
|
|
background-color: transparent;
|
|
margin: 0px;
|
|
padding: 0px;
|
|
font-family: sans-serif;
|
|
color: #000;
|
|
overflow: hidden;
|
|
}
|
|
|
|
h1 {
|
|
margin: 0px;
|
|
padding: 0px;
|
|
color: #ddd;
|
|
font-size: 12pt;
|
|
font-weight: bold;
|
|
text-shadow: 1px 1px #333;
|
|
}
|
|
|
|
#main {
|
|
text-align:center;
|
|
}
|
|
|
|
.mdi {
|
|
font-size: 50pt;
|
|
background-color:rgba(196, 196, 196, 0.25);
|
|
border-radius: 8px;
|
|
padding-left:16px;
|
|
padding-right:16px;
|
|
text-shadow: 1px 1px #333;
|
|
}
|
|
|
|
.mdi-signal-cellular-outline {
|
|
color: red !important;
|
|
}
|
|
|
|
.mdi-signal-cellular-1 {
|
|
color: orange !important;
|
|
}
|
|
|
|
.mdi-signal-cellular-2 {
|
|
color: olive !important;
|
|
}
|
|
|
|
.mdi-signal-cellular-3 {
|
|
color: green !important;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div id="main">
|
|
<i id="icon" class="mdi mdi-signal-cellular-outline"></i>
|
|
<h1 id="status">Connecting...</h1>
|
|
</div>
|
|
</body>
|
|
|
|
</html>
|