layout updates thx trip

This commit is contained in:
Max 2018-04-03 19:40:14 -04:00
parent 31e11e999d
commit 332a5968b9
4 changed files with 199 additions and 139 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.0 KiB

View File

@ -16,38 +16,21 @@
<!-- 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="Configuration" method="post" action="" onclick="javascript:f_select(&quot;settings&quot;);"></li>
<li id="li4" class="nav-li"><input id="b4" class="nav-button" type="button" name="B4" value="RX" method="post" action="" onclick="javascript:f_select(&quot;rx&quot;);"></li>
<li id="li5" class="nav-li"><input id="b5" class="nav-button" type="button" name="B5" value="About" method="post" action="" onclick="javascript:f_select(&quot;about&quot;);"></li>
<li id="li6"><span class="copyr"> &copy; 2017, 2018 Max H. Parke KA1RBI</span></li>
</ul>
<ul class="nav-ul">
<li id="li1" class="nav-li"><input id="b1" class="nav-button" type="button" name="B1" value="Home" 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" 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="Configuration" onclick="javascript:f_select(&quot;settings&quot;);"></li>
<li id="li4" class="nav-li"><input id="b4" class="nav-button" type="button" name="B4" value="RX" onclick="javascript:f_select(&quot;rx&quot;);"></li>
<li id="li5" class="nav-li"><input id="b5" class="nav-button" type="button" name="B5" value="About" onclick="javascript:f_select(&quot;about&quot;);"></li>
<li id="li6"><div class="copyr">&copy; 2017, 2018 Max H. Parke KA1RBI</div></li>
</ul>
</div>
<br>
<div id="div_debug" style="display: none;">
<br>
</div>
<!-- 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-->
<!-- copyright / about div-->
<div id="div_about" style="display:none;">
<div class="copyright-text">
@ -70,34 +53,48 @@
<div id="div_status" style="display: none;">
<div class="controlsDisplay">
<div id="controls" class="controls">
<div>
<input type="button" class="control-button" name="skip" value="SKIP" onclick="javascript:this.blur(); f_scan_button(&quot;skip&quot;);">
</div>
<div>
<input type="button" class="control-button" name="hold" value="HOLD" onclick="javascript:this.blur(); f_scan_button(&quot;hold&quot;);">
</div>
<div>
<input type="button" class="control-button" name="lockout" value="LOCKOUT" onclick="javascript:this.blur(); f_scan_button(&quot;lockout&quot;);">
</div>
</div>
<div class="statDisplay">
<div id="div_s2" class="s2" style="display: none;">
<!-- frequency, system, tg display -->
</div>
</div>
<div class="sysMsg"> <!-- hold / last command box w/ logo-->
<div id="holdIndicator" class="label-hold" style="display: none;"><br>TG HOLD ON</div>
<div id="lastCommand" class="label-lc"> &nbsp; </div>
</div>
</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> <!-- closing div for div_status -->
<div id="div_plot" style="display: none;">
<img src="1x1.png" id="img0" style="display:none;" alt="plot"><br>

View File

@ -2,7 +2,6 @@
background-color: LightGray;
font-family: Arial, Helvetica, sans-serif;
}
#div_status table {
@ -11,7 +10,6 @@
background-color: #336699;
border-collapse: collapse;
font-family: "Courier New", Courier, Monospace;
}
#div_status th {
@ -22,8 +20,7 @@
color: #000;
font-weight: bold;
background: #669999; /* For browsers that do not support gradients */
background: linear-gradient(#669999, #77AAAA);
background: linear-gradient(#31687e, #56a0bd);
}
#div_status td {
@ -39,84 +36,111 @@ hr {
padding: 0px;
}
/* the buttons */
hr.disp { /* hr in main display */
.scan-button {
/* background-color: #669999; */
border-color: black;
width: 97%;
position: absolute;
top: 50px;
}
.control-button { /* skip/hold/lockout buttons */
border-color: gray;
height: 38px;
color: white;
padding: 10px 10px;
text-decoration: none;
margin: 4px 2px;
margin: 1px 1px;
cursor: pointer;
width: 100px;
font-size: 14px;
font-weight: bold;
box-shadow: 0 1px 1px 0 rgba(0,0,0,0.2), 0 2px 5px 0 rgba(0,0,0,0.19);
background: #31687e; /* For browsers that do not support gradients */
background: linear-gradient(#31687e, #56a0bd);
/* background: linear-gradient(#669999, #82B0B0); --- the green */
}
.control-button:hover {
background: linear-gradient(#56a0bd, #31687e);
}
.controlsDisplay { /* holds buttons, and display */
width: 730px;
border: 0px solid #aaa;
vertical-align: top;
height: 122px;
padding: 2px;
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);
background: LightGray; /* For browsers that do not support gradients */
background: linear-gradient(White, Silver);
}
/* flex container for top buttons */
.controls { /* skip/hold/lockout buttons (1) */
/*
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;
border: 1px solid #aaa;
width: 104px;
float: left;
height: 100%;
text-align: center;
line-height: 75px;
font-size: 30px;
}
.statDisplay { /* main display - freq, sys, tgid (2) */
/* main info container for the two tables */
div.info {
padding: 0px;
width: 522px;
float: left;
position: relative;
display: inline-block;
border: 1px solid #aaa;
height: 100%;
background: LightGray; /* For browsers that do not support gradients */
background: linear-gradient(LightGray, White, LightGray);
}
.sysMsg { /* OP25 logo and message box on right (3) */
padding: 0px;
/* display: inline-block; */
float: right; /* works left or right, right gives margin in between this & 2*/
width: 95px;
height: 100%;
background-color:#f9f9f9;
background-image: url("op25.png");
background-repeat: no-repeat;
background-position: right;
border: 1px solid #aaa;
font-family: Arial, Helvetica, sans-serif;
color: #666;
font-size: 8pt;
}
div.info { /* main info container for the two tables */
/* min-height: 50px;
overflow: hidden;
position: relative; */
width: 730px;
height: auto;
border: 0px solid #000;
border: 0px solid #a00;
display: inline-block;
}
/* system frequencies container that holds the table */
.top {
div.system { /* system frequencies container that holds the table */
text-align: left;
border: 0px solid #000;
}
div.system {
position: absolute;
top: 10px;
left: 0;
float: left;
width: 48%;
height: auto;
border: 0px solid #d00
border: 0px solid #d00;
}
/* adjacent sites container that holds the table */
div.adjacent { /* adjacent sites container that holds the table */
div.adjacent {
position: relative;
top: 10px;
margin-left: 29px;
float: left;
width: 48%;
float: right;
height: auto;
border: 0px solid #00f;
}
@ -127,9 +151,10 @@ div.adjacent {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
padding: 20px;
color: #484848;
float: right;
margin-top: 22px;
margin-right: 4px;
}
.label {
@ -138,6 +163,34 @@ div.adjacent {
color: #484848;
}
.label-hold {
font-family: Arial, Helvetica, sans-serif;
color: #c00;
font-size: 8pt;
font-weight: bold;
text-align: center;
vertical-align: center;
height: 50%;
}
.label-sm {
font-family: Arial, Helvetica, sans-serif;
color: #444;
font-size: 8pt;
padding: 2px;
}
.label-lc { /* Last Command text */
font-family: Arial, Helvetica, sans-serif;
color: #444;
font-size: 8pt;
padding: 2px;
text-align: center;
}
.value {
font-family: Arial, Helvetica, sans-serif;
@ -158,9 +211,8 @@ div.adjacent {
text-align: left;
}
/* the whole NAC string... NAC, freq tsbks, etc. */
.nac {
.nac { /* the whole NAC string... NAC, freq tsbks, etc. */
font-family: Arial, Helvetica, sans-serif;
color: #000060;
@ -169,24 +221,18 @@ div.adjacent {
}
/* .s1 .s2 .s3 DIVs for the sections. see index.html */
.s1 {
/* empty */
}
.s2 {
border: 1px solid #999;
height: auto;
width: 720px;
border: 0px solid #999;
position: relative;
display: inline-block;
max-height: 112px;
width: 512px;
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 */
margin: 0 0 0 2px;
}
.copyright-text {
@ -238,8 +284,9 @@ div.adjacent {
.nav-button-active {
background-color: #9cc;
background: linear-gradient(#8bb, #9cc);
color: #000;
background: linear-gradient(#31687e, #56a0bd);
/* background: linear-gradient(#8bb, #9cc); */
color: #fff;
border: 0px;
padding: 20px;
display: block;
@ -249,12 +296,15 @@ div.adjacent {
.nav-button:hover {
background-color: #699;
background: linear-gradient(#588, #699);
/* background: linear-gradient(#588, #699); */
background: linear-gradient(#56a0bd, #31687e);
color: #fff;
}
.nav-button-active:hover {
background-color: #699;
background: linear-gradient(#588, #699);
/* background: linear-gradient(#588, #699); */
background: linear-gradient(#56a0bd, #31687e);
}
#div_settings table {
@ -292,7 +342,7 @@ div.adjacent {
#div_settings input[type=text] {
max-width: 75px;
border-top: none;
border-bottom-width: 1;
border-bottom-width: 1px;
border-bottom: dotted;
border-right: none;
border-left: none;
@ -336,7 +386,7 @@ div#cfg_list_area select {
#div_rx_opts input[type=text] {
max-width: 75px;
border-top: none;
border-bottom-width: 1;
border-bottom-width: 1px;
border-bottom: dotted;
border-right: none;
border-left: none;

View File

@ -255,30 +255,24 @@ function rx_update(d) {
function change_freq(d) {
var html = "<span class=\"label\">Frequency: </span><span class=\"value\">" + d['freq'] / 1000000.0;
html += "</span> <span class=\"systgid\"> &nbsp;" + d['system'] + " </span> ";
html += "</span> <span class=\"systgid\"> &nbsp;" + d['system'] + " </span><br><br><hr id=\"disphr\" class=\"disp\"><br>";
if (d['tgid'] != null) {
html += "<span class=\"label\">Talkgroup ID: </span><span class=\"value\"> " + d['tgid'];
html += "</span> <span class=\"systgid\"> &nbsp;" + d['tag'] + " </span>";
}
html += "<br>";
html += "";
var div_s2 = document.getElementById("div_s2");
div_s2.innerHTML = html;
div_s2.style["display"] = "";
if (d['tgid'] != null)
current_tgid = d['tgid'];
if (current_tgid != null) {
var div_s3 = document.getElementById("div_s3");
div_s3.style["display"] = "";
}
}
// adjacent sites table
function adjacent_data(d) {
if (Object.keys(d).length < 1) {
var html = "</div>";
return html;
}
if (Object.keys(d).length < 1)
return "";
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>";
@ -291,7 +285,8 @@ function adjacent_data(d) {
ct += 1;
html += "<tr style=\"background-color: " + color + ";\"><td>" + freq / 1000000.0 + "</td><td>" + d[freq]['sysid'].toString(16) + "</td><td>" + d[freq]["rfid"] + "</td><td>" + d[freq]["stid"] + "</td><td>" + (d[freq]["uplink"] / 1000000.0) + "</td></tr>";
}
html += "</table></div></div><br><br>";
html += "</table></div>";
// box br // end trunk_update HTML
// end adjacent sites table
@ -303,10 +298,11 @@ function adjacent_data(d) {
function trunk_update(d) {
var do_hex = {"syid":0, "sysid":0, "wacn": 0};
var do_float = {"rxchan":0, "txchan":0};
var html = "";
var html = ""; // begin trunk_update HTML
for (var nac in d) {
if (!is_digit(nac.charAt(0)))
continue;
html += "<div class=\"content\">";
html += "<span class=\"nac\">";
html += "NAC " + "0x" + parseInt(nac).toString(16) + " ";
html += d[nac]['rxchan'] / 1000000.0;
@ -333,8 +329,8 @@ function trunk_update(d) {
// 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 += "<br><div class=\"info\"><div class=\"system\">";
html += "<table border=1 borderwidth=0 cellpadding=0 cellspacing=0 width=100%>";
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</th><th>Count</th></tr>";
var ct = 0;
@ -348,14 +344,31 @@ 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></div>";
// end system freqencies table
html += "</table></div>"; // end system freqencies table
html += adjacent_data(d[nac]['adjacent_data']);
html += "</div><br></div><hr><br>";
}
var div_s1 = document.getElementById("div_s1");
div_s1.innerHTML = html;
// disply hold indicator
var x = document.getElementById("holdIndicator");
if (d['data']['hold_mode']) {
x.style.display = "block";
}
else {
x.style.display = "none";
}
// display last command unless it was more than 10 seconds ago
x2 = d['data']['last_command'];
if (x2 && d['data']['last_command_time'] > -10) {
document.getElementById("lastCommand").innerHTML = "Last Command<br><b>" + x2.toUpperCase() + "</b><br>" + " " + (d['data']['last_command_time'] * -1) + " secs ago";
}
else {
document.getElementById("lastCommand").innerHTML = "";
}
}
function config_list(d) {