layout updates thx trip
This commit is contained in:
parent
31e11e999d
commit
332a5968b9
Binary file not shown.
After Width: | Height: | Size: 2.0 KiB |
|
@ -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("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="Configuration" method="post" action="" onclick="javascript:f_select("settings");"></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("rx");"></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("about");"></li>
|
||||
<li id="li6"><span class="copyr"> © 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("status");"></li>
|
||||
<li id="li2" class="nav-li"><input id="b2" class="nav-button" type="button" name="B2" value="Plot" onclick="javascript:f_select("plot");"></li>
|
||||
<li id="li3" class="nav-li"><input id="b3" class="nav-button" type="button" name="B3" value="Configuration" onclick="javascript:f_select("settings");"></li>
|
||||
<li id="li4" class="nav-li"><input id="b4" class="nav-button" type="button" name="B4" value="RX" onclick="javascript:f_select("rx");"></li>
|
||||
<li id="li5" class="nav-li"><input id="b5" class="nav-button" type="button" name="B5" value="About" onclick="javascript:f_select("about");"></li>
|
||||
<li id="li6"><div class="copyr">© 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("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-->
|
||||
<!-- 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("skip");">
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<input type="button" class="control-button" name="hold" value="HOLD" onclick="javascript:this.blur(); f_scan_button("hold");">
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<input type="button" class="control-button" name="lockout" value="LOCKOUT" onclick="javascript:this.blur(); f_scan_button("lockout");">
|
||||
</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"> </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>
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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\"> " + d['system'] + " </span> ";
|
||||
html += "</span> <span class=\"systgid\"> " + 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\"> " + 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) {
|
||||
|
|
Loading…
Reference in New Issue