css updates many thx triptolemus

This commit is contained in:
Max 2018-03-01 20:10:19 -05:00
parent 6b45a95754
commit 2ff4ae5a38
3 changed files with 409 additions and 60 deletions

View File

@ -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(&quot;status&quot;);" href=""></input>
&nbsp;&nbsp;|&nbsp;&nbsp;
<input type="button" name="plot" value="PLOT" onclick="javascript:f_select(&quot;plot&quot;);"></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(&quot;skip&quot;);"></input>
<input type="button" name="hold" value="HOLD" onclick="javascript:f_scan_button(&quot;hold&quot;);"></input>
<input type="button" name="lockout" value="LOCKOUT" onclick="javascript:f_scan_button(&quot;lockout&quot;);"></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(&quot;status&quot;);"></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(&quot;plot&quot;);"></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(&quot;about&quot;);"></li>
<li id="li4"><span class="copyr"> &copy; 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(&quot;skip&quot;);">
</div>
<div>
<input type="button" class="scan-button" name="hold" value="HOLD" onclick="javascript:f_scan_button(&quot;hold&quot;);">
</div>
<div>
<input type="button" class="scan-button" name="lockout" value="LOCKOUT" onclick="javascript:f_scan_button(&quot;lockout&quot;);">
</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>
&copy;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>

View File

@ -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);
}

View File

@ -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\"> &nbsp;" + 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\"> &nbsp;" + 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() {