2023-04-24 08:27:35 -04:00
|
|
|
const char MAIN_page[] PROGMEM = R"=====(
|
|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html>
|
|
|
|
|
<style>
|
2023-05-04 14:01:11 -04:00
|
|
|
.row {
|
|
|
|
|
width: 100%;
|
|
|
|
|
margin: 0 auto;
|
|
|
|
|
}
|
|
|
|
|
.box{
|
2023-04-24 08:27:35 -04:00
|
|
|
max-width: 500px;
|
2023-05-04 14:01:11 -04:00
|
|
|
min-width: 250px;
|
2023-05-08 12:49:10 -04:00
|
|
|
min-height: 300px;
|
2023-05-07 01:38:01 -04:00
|
|
|
background: #009879;
|
2023-04-24 08:27:35 -04:00
|
|
|
padding: 30px;
|
|
|
|
|
box-sizing: border-box;
|
2023-05-08 12:49:10 -04:00
|
|
|
vertical-align: top;
|
2023-04-24 08:27:35 -04:00
|
|
|
color: #FFF;
|
|
|
|
|
margin:20px;
|
|
|
|
|
box-shadow: 0px 2px 18px -4px rgba(0,0,0,0.75);
|
2023-05-04 14:01:11 -04:00
|
|
|
display: inline-block;
|
2023-04-24 08:27:35 -04:00
|
|
|
}
|
2023-05-07 01:38:01 -04:00
|
|
|
.redbox{
|
|
|
|
|
background: #FFAA79;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.whitebox{
|
|
|
|
|
background: #FFFFFF;
|
|
|
|
|
color: #009879;
|
|
|
|
|
border-style: solid;
|
|
|
|
|
border-color: #009879;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.button{background-color: #009879; border: none; color: white; padding: 5px 5px; text-align: center; text-decoration: none; display: inline-block; margin: 4px 2px; cursor: pointer; border-radius: 8px;}
|
2023-04-24 08:27:35 -04:00
|
|
|
|
|
|
|
|
</style>
|
|
|
|
|
<body>
|
|
|
|
|
|
2023-05-04 14:01:11 -04:00
|
|
|
<div class="row">
|
2023-05-07 01:38:01 -04:00
|
|
|
|
2023-05-08 15:21:12 -04:00
|
|
|
<div id="band_box" class="box whitebox">
|
2023-05-07 01:38:01 -04:00
|
|
|
<h1>Band</h1>
|
|
|
|
|
<h1><span id="BANDValue">0</span></h1>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div id="fwd_box" class="box">
|
2023-05-04 08:33:57 -04:00
|
|
|
<h1>FWD Power</h1>
|
2023-05-09 04:44:11 -04:00
|
|
|
<h1><span id="FWDWatt">0</span> </br><span id="FWDdBm">0</span> </br><span id="FWDVoltage">0</span></h1>
|
2023-04-24 08:27:35 -04:00
|
|
|
</div>
|
|
|
|
|
|
2023-05-08 15:21:12 -04:00
|
|
|
<div id="ref_box" class="box">
|
2023-05-04 08:33:57 -04:00
|
|
|
<h1>REF Power</h1>
|
2023-05-09 04:44:11 -04:00
|
|
|
<h1><span id="REFWatt">0</span> </br><span id="REFdBm">0</span> </br><span id="REFVoltage">0</span></h1>
|
2023-04-24 08:27:35 -04:00
|
|
|
</div>
|
|
|
|
|
|
2023-05-09 04:44:11 -04:00
|
|
|
<div id="vswr_box" class="box">
|
|
|
|
|
<h1>VSWR</h1>
|
|
|
|
|
<h1><span id="VSWRValue">0</span></br><span id="RLValue">0</span> dB</h1>
|
2023-05-04 14:01:11 -04:00
|
|
|
</div>
|
2023-04-24 08:27:35 -04:00
|
|
|
|
2023-05-07 01:38:01 -04:00
|
|
|
<form method='post' action='config'><button class='button' value='config' name='config' type='submit'>Configuration</button></form>
|
2023-05-04 03:58:54 -04:00
|
|
|
|
2023-04-24 08:27:35 -04:00
|
|
|
<script>
|
|
|
|
|
|
|
|
|
|
setInterval(function() {
|
2023-05-07 01:38:01 -04:00
|
|
|
// Call a function repetatively
|
|
|
|
|
getDATA();
|
|
|
|
|
}, 500); //1000mSeconds update rate
|
2023-04-24 08:27:35 -04:00
|
|
|
|
2023-05-07 01:38:01 -04:00
|
|
|
function getDATA() {
|
2023-04-24 08:27:35 -04:00
|
|
|
var xhttp = new XMLHttpRequest();
|
|
|
|
|
xhttp.onreadystatechange = function() {
|
|
|
|
|
if (this.readyState == 4 && this.status == 200) {
|
2023-05-08 12:49:10 -04:00
|
|
|
const data = this.responseText.split(";");
|
|
|
|
|
document.getElementById("FWDWatt").innerHTML = data[0];
|
|
|
|
|
document.getElementById("FWDdBm").innerHTML = data[1];
|
|
|
|
|
document.getElementById("FWDVoltage").innerHTML = data[2];
|
|
|
|
|
document.getElementById("REFWatt").innerHTML = data[3];
|
|
|
|
|
document.getElementById("REFdBm").innerHTML = data[4];
|
|
|
|
|
document.getElementById("REFVoltage").innerHTML = data[5];
|
2023-05-09 04:44:11 -04:00
|
|
|
document.getElementById("VSWRValue").innerHTML = data[6];
|
|
|
|
|
document.getElementById("RLValue").innerHTML = data[7];
|
|
|
|
|
document.getElementById("BANDValue").innerHTML = data[8];
|
|
|
|
|
if (data[6] == "-1") {
|
|
|
|
|
document.getElementById("VSWRValue").innerHTML = "0";
|
|
|
|
|
document.getElementById("vswr_box").className = "box redbox";
|
2023-05-07 01:38:01 -04:00
|
|
|
} else {
|
2023-05-09 04:44:11 -04:00
|
|
|
document.getElementById("VSWRValue").innerHTML = "1:" + data[6];
|
|
|
|
|
if (parseFloat(data[6]) >= parseFloat(data[9])) {
|
|
|
|
|
document.getElementById("vswr_box").className = "box redbox";
|
|
|
|
|
} else {
|
|
|
|
|
document.getElementById("vswr_box").className = "box";
|
|
|
|
|
}
|
2023-05-07 01:38:01 -04:00
|
|
|
}
|
2023-05-09 04:44:11 -04:00
|
|
|
|
|
|
|
|
//if (parseFloat(vswr) >= vswr_th || data[6] == "0") {
|
|
|
|
|
// document.getElementById("vswr_box").className = "box redbox";
|
|
|
|
|
//} else {
|
|
|
|
|
// document.getElementById("vswr_box").className = "box";
|
|
|
|
|
//}
|
2023-04-24 08:27:35 -04:00
|
|
|
}
|
|
|
|
|
};
|
2023-05-07 01:38:01 -04:00
|
|
|
xhttp.open("GET", "readDATA", true);
|
2023-04-24 08:27:35 -04:00
|
|
|
xhttp.send();
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
|
|
|
|
)=====";
|
