css updates many thx triptolemus
This commit is contained in:
parent
6b45a95754
commit
2ff4ae5a38
|
@ -1,44 +1,106 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>OP25</title>
|
||||
<link rel="stylesheet" type="text/css" href="main.css">
|
||||
<script src="main.js"></script>
|
||||
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
|
||||
<meta http-equiv="Content-Language" content="en" />
|
||||
|
||||
<title>OP25</title>
|
||||
<link rel="stylesheet" type="text/css" href="main.css">
|
||||
<script src="main.js"></script>
|
||||
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
|
||||
</head>
|
||||
|
||||
<body onload="javascript:do_onload();">
|
||||
<input type="button" name="status" value="STATUS" onclick="javascript:f_select("status");" href=""></input>
|
||||
|
|
||||
<input type="button" name="plot" value="PLOT" onclick="javascript:f_select("plot");"></input>
|
||||
<br><hr>
|
||||
<div id="div_status" style="display: none;">
|
||||
<div id="div_s1">
|
||||
Waiting for data
|
||||
</div>
|
||||
<div id="div_s2" style="display: none;">
|
||||
</div>
|
||||
<div id="div_s3" style="display: none;">
|
||||
|
||||
<form method="post" action="#" id="form_scan">
|
||||
<input type="button" name="skip" value="SKIP" onclick="javascript:f_scan_button("skip");"></input>
|
||||
<input type="button" name="hold" value="HOLD" onclick="javascript:f_scan_button("hold");"></input>
|
||||
<input type="button" name="lockout" value="LOCKOUT" onclick="javascript:f_scan_button("lockout");"></input>
|
||||
|
||||
<!-- nav bar -->
|
||||
|
||||
<div class="nav-bar">
|
||||
<ul class="nav-ul">
|
||||
<li id="li1" class="nav-li"><input id="b1" class="nav-button" type="button" name="B1" value="Home" method="post" action="" onclick="javascript:f_select("status");"></li>
|
||||
<li id="li2" class="nav-li"><input id="b2" class="nav-button" type="button" name="B2" value="Plot" method="post" action="" onclick="javascript:f_select("plot");"></li>
|
||||
<li id="li3" class="nav-li"><input id="b3" class="nav-button" type="button" name="B3" value="About" method="post" action="" onclick="javascript:f_select("about");"></li>
|
||||
<li id="li4"><span class="copyr"> © 2017, 2018 Max H. Parke KA1RBI</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
<br>
|
||||
<!-- control buttons -->
|
||||
|
||||
<div id="controls" class="flex-container">
|
||||
|
||||
<div>
|
||||
<input type="button" class="scan-button" name="skip" value="SKIP" onclick="javascript:f_scan_button("skip");">
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<input type="button" class="scan-button" name="hold" value="HOLD" onclick="javascript:f_scan_button("hold");">
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<input type="button" class="scan-button" name="lockout" value="LOCKOUT" onclick="javascript:f_scan_button("lockout");">
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- copyright div-->
|
||||
|
||||
<div id="div_about" style="display:none;">
|
||||
<div class="copyright-text">
|
||||
This program comes with ABSOLUTELY NO WARRANTY.<br>
|
||||
OP25 is free software, and you are welcome to redistribute it<br>
|
||||
under certain conditions. For further details refer to the "License"
|
||||
link (below).<p>
|
||||
<table border=0>
|
||||
<tr><td>License:</td><td><a href="https://www.gnu.org/licenses/gpl-3.0.en.html" target="_blank">https://www.gnu.org/licenses/gpl-3.0.en.html</a></td></tr>
|
||||
<tr><td>Mailing list:</td><td><a href="https://groups.yahoo.com/neo/groups/op25-dev" target="_blank2">https://groups.yahoo.com/neo/groups/op25-dev</a></td></tr>
|
||||
<tr><td>Download:</td><td><tt>git clone https://git.osmocom.org/op25</tt></td></tr>
|
||||
<tr><td>Web site:</td><td><a href="http://op25.osmocom.org" target="_blank3">http://op25.osmocom.org</a></td></tr>
|
||||
</table>
|
||||
</div>
|
||||
<br>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
|
||||
|
||||
<div id="div_status" style="display: none;">
|
||||
|
||||
|
||||
|
||||
<div id="div_s2" class="s2" style="display: none;">
|
||||
<!-- frequency, system, tg display -->
|
||||
</div>
|
||||
|
||||
|
||||
<br>
|
||||
|
||||
|
||||
|
||||
<div id="div_s1" class="s1">
|
||||
<!-- system freq and adjacent sites -->
|
||||
|
||||
Waiting for data...
|
||||
</div>
|
||||
<br><br><br>
|
||||
|
||||
<!-- div_s3 -->
|
||||
|
||||
<div id="div_s3" class="s3" style="display: none;">
|
||||
|
||||
<!-- old location of SKIP HOLD LOCKOUT controls -->
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="div_plot" style="display: none;">
|
||||
<img src="1x1.png" id="img0" style="display:none;"><br>
|
||||
<img src="1x1.png" id="img1" style="display:none;"><br>
|
||||
<img src="1x1.png" id="img2" style="display:none;"><br>
|
||||
<img src="1x1.png" id="img3" style="display:none;"><br>
|
||||
<img src="1x1.png" id="img0" style="display:none;" alt="plot"><br>
|
||||
<img src="1x1.png" id="img1" style="display:none;" alt="plot"><br>
|
||||
<img src="1x1.png" id="img2" style="display:none;" alt="plot"><br>
|
||||
<img src="1x1.png" id="img3" style="display:none;" alt="plot"><br>
|
||||
</div>
|
||||
<br><hr>
|
||||
©Copyright 2017, 2018 Max H. Parke KA1RBI<p>
|
||||
<font size="-1">
|
||||
This program comes with ABSOLUTELY NO WARRANTY.<br>
|
||||
OP25 is free software, and you are welcome to redistribute it<br>
|
||||
under certain conditions. For further details refer to this link:
|
||||
<a href="https://www.gnu.org/licenses/gpl-3.0.en.html" target="_blank">LICENSE</a>
|
||||
</font>
|
||||
|
||||
<br>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
@ -1,5 +1,253 @@
|
|||
body {background-color: yellow;}
|
||||
table { border-style: solid; background-color: #00c000; border-collapse: collapse}
|
||||
th {border-style: solid;}
|
||||
td {border-style: solid;}
|
||||
input#s_table_nac {text-align: right;}
|
||||
#div_status body {
|
||||
|
||||
background-color: LightGray;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
|
||||
}
|
||||
|
||||
#div_status table {
|
||||
|
||||
border-style: solid;
|
||||
background-color: #336699;
|
||||
border-collapse: collapse;
|
||||
font-family: "Courier New", Courier, Monospace;
|
||||
|
||||
}
|
||||
|
||||
#div_status th {
|
||||
|
||||
border-style: solid;
|
||||
padding: 3px;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
color: #000;
|
||||
font-weight: bold;
|
||||
background: #669999; /* For browsers that do not support gradients */
|
||||
background: linear-gradient(#669999, #77AAAA);
|
||||
|
||||
}
|
||||
|
||||
#div_status td {
|
||||
|
||||
border-style: solid;
|
||||
padding: 3px;
|
||||
|
||||
}
|
||||
|
||||
hr {
|
||||
width: 730px;
|
||||
float: left;
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
/* the buttons */
|
||||
|
||||
.scan-button {
|
||||
/* background-color: #669999; */
|
||||
border-color: black;
|
||||
color: white;
|
||||
padding: 10px 10px;
|
||||
text-decoration: none;
|
||||
margin: 4px 2px;
|
||||
cursor: pointer;
|
||||
width: 100px;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 3px 10px 0 rgba(0,0,0,0.19);
|
||||
background: #669999; /* For browsers that do not support gradients */
|
||||
background: linear-gradient(#669999, #82B0B0);
|
||||
}
|
||||
|
||||
/* flex container for top buttons */
|
||||
|
||||
/*
|
||||
the flex properties are more useful when a variable-width is applied,
|
||||
but can be safely left in place even when using a fixed width
|
||||
*/
|
||||
|
||||
.flex-container {
|
||||
display: flex;
|
||||
width: 730px;
|
||||
justify-content: space-between;
|
||||
|
||||
}
|
||||
|
||||
.flex-container > div {
|
||||
width: 100px;
|
||||
margin: 0px;
|
||||
text-align: center;
|
||||
line-height: 75px;
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
|
||||
/* main info container for the two tables */
|
||||
|
||||
div.info {
|
||||
|
||||
position: relative;
|
||||
width: 730px;
|
||||
height: auto;
|
||||
border: 0px solid #000;
|
||||
}
|
||||
|
||||
/* system frequencies container that holds the table */
|
||||
|
||||
.top {
|
||||
|
||||
text-align: left;
|
||||
border: 0px solid #000;
|
||||
|
||||
}
|
||||
|
||||
div.system {
|
||||
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 0;
|
||||
width: 48%;
|
||||
height: auto;
|
||||
border: 0px solid #d00
|
||||
}
|
||||
|
||||
/* adjacent sites container that holds the table */
|
||||
|
||||
div.adjacent {
|
||||
|
||||
position: relative;
|
||||
top: 10px;
|
||||
width: 48%;
|
||||
float: right;
|
||||
height: auto;
|
||||
border: 0px solid #00f;
|
||||
}
|
||||
|
||||
/* labels, values, system and tg text */
|
||||
|
||||
.copyr {
|
||||
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
font-size: 14px;
|
||||
padding: 20px;
|
||||
color: #484848;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.label {
|
||||
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
color: #484848;
|
||||
}
|
||||
|
||||
.value {
|
||||
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
color: #000000;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.systgid {
|
||||
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
color: #000060;
|
||||
font-weight: bold;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
/* the whole NAC string... NAC, freq tsbks, etc. */
|
||||
|
||||
.nac {
|
||||
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
color: #000060;
|
||||
font-weight: bold;
|
||||
font-size: 20px;
|
||||
|
||||
}
|
||||
|
||||
/* .s1 .s2 .s3 DIVs for the sections. see index.html */
|
||||
|
||||
.s1 {
|
||||
/* empty */
|
||||
}
|
||||
|
||||
.s2 {
|
||||
border: 1px solid #999;
|
||||
height: auto;
|
||||
width: 720px;
|
||||
padding: 5px;
|
||||
background: LightGray; /* For browsers that do not support gradients */
|
||||
background: linear-gradient(White, Silver);
|
||||
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 3px 10px 0 rgba(0,0,0,0.19);
|
||||
}
|
||||
|
||||
.s3 {
|
||||
/* empty */
|
||||
}
|
||||
|
||||
.copyright-text {
|
||||
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
color: #000060;
|
||||
font-size: 10pt;
|
||||
}
|
||||
|
||||
.nav-ul {
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
background-color: #bbb;
|
||||
background: linear-gradient(#bbbbbb, #cccccc);
|
||||
}
|
||||
|
||||
.nav-li {
|
||||
float: left;
|
||||
border-right: 1px solid #000;
|
||||
background: linear-gradient(#bbbbbb, #cccccc);
|
||||
}
|
||||
|
||||
.nav-li-active {
|
||||
float: left;
|
||||
background-color: #c0c0c0;
|
||||
color: #0080c0;
|
||||
border-right: 1px solid #000;
|
||||
}
|
||||
|
||||
.nav-bar {
|
||||
width: 730px;
|
||||
padding: 0;
|
||||
border: 1px solid #000;
|
||||
}
|
||||
|
||||
.nav-button {
|
||||
background-color: #bbb;
|
||||
background: linear-gradient(#bbbbbb, #cccccc);
|
||||
color: #000;
|
||||
border: 0px;
|
||||
padding: 20px;
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
|
||||
.nav-button-active {
|
||||
background-color: #9cc;
|
||||
background: linear-gradient(#8bb, #9cc);
|
||||
color: #000;
|
||||
border: 0px;
|
||||
padding: 20px;
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.nav-button:hover {
|
||||
background-color: #699;
|
||||
background: linear-gradient(#588, #699);
|
||||
}
|
||||
|
||||
.nav-button-active:hover {
|
||||
background-color: #699;
|
||||
background: linear-gradient(#588, #699);
|
||||
}
|
||||
|
|
|
@ -54,8 +54,22 @@ function f_command(ele, command) {
|
|||
}
|
||||
}
|
||||
|
||||
function nav_update(command) {
|
||||
var names = ["b1", "b2", "b3"];
|
||||
var bmap = { "status": "b1", "plot": "b2", "about": "b3" };
|
||||
var id = bmap[command];
|
||||
for (var id1 in names) {
|
||||
b = document.getElementById(names[id1]);
|
||||
if (names[id1] == id) {
|
||||
b.className = "nav-button-active";
|
||||
} else {
|
||||
b.className = "nav-button";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function f_select(command) {
|
||||
var div_list = ["status", "plot"];
|
||||
var div_list = ["status", "plot", "about"];
|
||||
for (var i=0; i<div_list.length; i++) {
|
||||
var ele = document.getElementById("div_" + div_list[i]);
|
||||
if (command == div_list[i])
|
||||
|
@ -63,6 +77,12 @@ function f_select(command) {
|
|||
else
|
||||
ele.style['display'] = "none";
|
||||
}
|
||||
var ctl = document.getElementById("controls");
|
||||
if (command == "status")
|
||||
ctl.style['display'] = "";
|
||||
else
|
||||
ctl.style['display'] = "none";
|
||||
nav_update(command);
|
||||
}
|
||||
|
||||
var http_req = new XMLHttpRequest();
|
||||
|
@ -91,12 +111,14 @@ function rx_update(d) {
|
|||
error_val = d["error"];
|
||||
}
|
||||
|
||||
// frequency, system, and talkgroup display
|
||||
|
||||
function change_freq(d) {
|
||||
var html = "Frequency: " + d['freq'] / 1000000.0;
|
||||
html += " <font size=\"+2\"><b>(" + d['system'] + ")</b></font> ";
|
||||
var html = "<span class=\"label\">Frequency: </span><span class=\"value\">" + d['freq'] / 1000000.0;
|
||||
html += "</span> <span class=\"systgid\"> " + d['system'] + " </span> ";
|
||||
if (d['tgid'] != null) {
|
||||
html += "Talkgroup ID " + d['tgid'];
|
||||
html += " <font size=\"+2\"><b>(" + d['tag'] + ")</b></font>";
|
||||
html += "<span class=\"label\">Talkgroup ID: </span><span class=\"value\"> " + d['tgid'];
|
||||
html += "</span> <span class=\"systgid\"> " + d['tag'] + " </span>";
|
||||
}
|
||||
html += "<br>";
|
||||
var div_s2 = document.getElementById("div_s2");
|
||||
|
@ -110,15 +132,17 @@ function change_freq(d) {
|
|||
}
|
||||
}
|
||||
|
||||
// adjacent sites table
|
||||
|
||||
function adjacent_data(d) {
|
||||
if (Object.keys(d).length < 1) {
|
||||
var html = "";
|
||||
var html = "</div>";
|
||||
return html;
|
||||
}
|
||||
var html = "<p>";
|
||||
html += "<table border=1 borderwidth=0 cellpadding=0 cellspacing=0>";
|
||||
var html = "<div class=\"adjacent\">";
|
||||
html += "<table border=1 borderwidth=0 cellpadding=0 cellspacing=0 width=100%>";
|
||||
html += "<tr><th colspan=99 style=\"align: center\">Adjacent Sites</th></tr>";
|
||||
html += "<tr><th>Frequency</th><th>RF Id</th><th>Site Id</th><th>Uplink</th></tr>";
|
||||
html += "<tr><th>Frequency</th><th>RFSS</th><th>Site</th><th>Uplink</th></tr>";
|
||||
var ct = 0;
|
||||
for (var freq in d) {
|
||||
var color = "#d0d0d0";
|
||||
|
@ -127,10 +151,15 @@ function adjacent_data(d) {
|
|||
ct += 1;
|
||||
html += "<tr style=\"background-color: " + color + ";\"><td>" + freq / 1000000.0 + "</td><td>" + d[freq]["rfid"] + "</td><td>" + d[freq]["stid"] + "</td><td>" + (d[freq]["uplink"] / 1000000.0) + "</td></tr>";
|
||||
}
|
||||
html += "</table>";
|
||||
html += "</table></div></div><br><br>";
|
||||
|
||||
// end adjacent sites table
|
||||
|
||||
return html;
|
||||
}
|
||||
|
||||
// additional system info: wacn, sysID, rfss, site id, secondary control channels, freq error
|
||||
|
||||
function trunk_update(d) {
|
||||
var do_hex = {"syid":0, "sysid":0, "wacn": 0};
|
||||
var do_float = {"rxchan":0, "txchan":0};
|
||||
|
@ -138,32 +167,36 @@ function trunk_update(d) {
|
|||
for (var nac in d) {
|
||||
if (!is_digit(nac.charAt(0)))
|
||||
continue;
|
||||
html += "<font size=\"+2\"><b>";
|
||||
html += "<span class=\"nac\">";
|
||||
html += "NAC " + "0x" + parseInt(nac).toString(16) + " ";
|
||||
html += d[nac]['rxchan'] / 1000000.0;
|
||||
html += " / ";
|
||||
html += d[nac]['txchan'] / 1000000.0;
|
||||
html += " tsbks " + d[nac]['tsbks'];
|
||||
html += "</b></font><br>";
|
||||
html += "WACN " + "0x" + parseInt(d[nac]['wacn']).toString(16) + " ";
|
||||
html += "System ID " + "0x" + parseInt(d[nac]['sysid']).toString(16) + " ";
|
||||
html += "RF ID " + d[nac]['rfid'] + " ";
|
||||
html += "Site ID " + d[nac]['stid'] + "<br>";
|
||||
html += "</span><br>";
|
||||
|
||||
html += "<span class=\"label\">WACN: </span>" + "<span class=\"value\">0x" + parseInt(d[nac]['wacn']).toString(16) + " </span>";
|
||||
html += "<span class=\"label\">System ID: </span>" + "<span class=\"value\">0x" + parseInt(d[nac]['sysid']).toString(16) + " </span>";
|
||||
html += "<span class=\"label\">RFSS ID: </span><span class=\"value\">" + d[nac]['rfid'] + " </span>";
|
||||
html += "<span class=\"label\">Site ID: </span><span class=\"value\">" + d[nac]['stid'] + "</span><br>";
|
||||
if (d[nac]["secondary"].length) {
|
||||
html += "Secondary control channel(s): ";
|
||||
html += "<span class=\"label\">Secondary control channel(s): </span><span class=\"value\"> ";
|
||||
for (i=0; i<d[nac]["secondary"].length; i++) {
|
||||
html += d[nac]["secondary"][i] / 1000000.0;
|
||||
html += " ";
|
||||
}
|
||||
html += "<br>";
|
||||
html += "</span><br>";
|
||||
}
|
||||
if (error_val != null) {
|
||||
html += "Frequency error " + error_val + " Hz. (approx)";
|
||||
html += "<span class=\"label\">Frequency error: </span><span class=\"value\">" + error_val + " Hz. (approx) </span>";
|
||||
}
|
||||
html += "<p>";
|
||||
html += "<table border=1 borderwidth=0 cellpadding=0 cellspacing=0>";
|
||||
|
||||
// system frequencies table
|
||||
|
||||
html += "<p><div class=\"info\"><div class=\"system\">";
|
||||
html += "<table border=1 borderwidth=0 cellpadding=0 cellspacing=0 width=100%>"; // was width=350
|
||||
html += "<tr><th colspan=99 style=\"align: center\">System Frequencies</th></tr>";
|
||||
html += "<tr><th>Frequency</th><th>Last Seen</th><th colspan=2>Talkgoup ID(s)</th><th>Count</th></tr>";
|
||||
html += "<tr><th>Frequency</th><th>Last Seen</th><th colspan=2>Talkgoup ID</th><th>Count</th></tr>";
|
||||
var ct = 0;
|
||||
for (var freq in d[nac]['frequency_data']) {
|
||||
tg2 = d[nac]['frequency_data'][freq]['tgids'][1];
|
||||
|
@ -175,13 +208,17 @@ function trunk_update(d) {
|
|||
ct += 1;
|
||||
html += "<tr style=\"background-color: " + color + ";\"><td>" + parseInt(freq) / 1000000.0 + "</td><td>" + d[nac]['frequency_data'][freq]['last_activity'] + "</td><td>" + d[nac]['frequency_data'][freq]['tgids'][0] + "</td><td>" + tg2 + "</td><td>" + d[nac]['frequency_data'][freq]['counter'] + "</td></tr>";
|
||||
}
|
||||
html += "</table>";
|
||||
html += "</table></div>";
|
||||
|
||||
// end system freqencies table
|
||||
|
||||
html += adjacent_data(d[nac]['adjacent_data']);
|
||||
}
|
||||
var div_s1 = document.getElementById("div_s1");
|
||||
div_s1.innerHTML = html;
|
||||
}
|
||||
|
||||
|
||||
function http_req_cb() {
|
||||
s = http_req.readyState;
|
||||
if (s != 4)
|
||||
|
@ -204,6 +241,8 @@ function do_onload() {
|
|||
var ele = document.getElementById("div_status");
|
||||
ele.style["display"] = "";
|
||||
setInterval(do_update, 1000);
|
||||
b = document.getElementById("b1");
|
||||
b.className = "nav-button-active";
|
||||
}
|
||||
|
||||
function do_update() {
|
||||
|
|
Loading…
Reference in New Issue