op25
/
op25
4
1
Fork 0
Code Issues Pull Requests Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
op25/gr-op25_repeater/www/images/op25.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.0 KiB

77
op25/gr-op25_repeater/www/www-static/index.html
View File

@ -16,38 +16,21 @@
<!-- nav bar --> <!-- nav bar -->
<div class="nav-bar"> <div class="nav-bar">
<ul class="nav-ul"> <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="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" method="post" action="" onclick="javascript:f_select(&quot;plot&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" method="post" action="" onclick="javascript:f_select(&quot;settings&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" method="post" action="" onclick="javascript:f_select(&quot;rx&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" method="post" action="" onclick="javascript:f_select(&quot;about&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"><span class="copyr"> &copy; 2017, 2018 Max H. Parke KA1RBI</span></li> <li id="li6"><div class="copyr">&copy; 2017, 2018 Max H. Parke KA1RBI</div></li>
</ul> </ul>
</div> </div>
<br> <br>
<div id="div_debug" style="display: none;"> <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> </div>
<!-- copyright div--> <!-- copyright / about div-->
<div id="div_about" style="display:none;"> <div id="div_about" style="display:none;">
<div class="copyright-text"> <div class="copyright-text">
@ -70,34 +53,48 @@
<div id="div_status" style="display: none;"> <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;"> <div id="div_s2" class="s2" style="display: none;">
<!-- frequency, system, tg display --> <!-- frequency, system, tg display -->
</div> </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> <br>
<div id="div_s1" class="s1"> <div id="div_s1" class="s1">
<!-- system freq and adjacent sites --> <!-- system freq and adjacent sites -->
Waiting for data... Waiting for data...
</div> </div>
<br><br><br>
<!-- div_s3 --> </div> <!-- closing div for div_status -->
<div id="div_s3" class="s3" style="display: none;">
<!-- old location of SKIP HOLD LOCKOUT controls -->
</div>
</div>
<div id="div_plot" style="display: none;"> <div id="div_plot" style="display: none;">
<img src="1x1.png" id="img0" style="display:none;" alt="plot"><br> <img src="1x1.png" id="img0" style="display:none;" alt="plot"><br>

200
op25/gr-op25_repeater/www/www-static/main.css
View File

@ -2,7 +2,6 @@
background-color: LightGray; background-color: LightGray;
font-family: Arial, Helvetica, sans-serif; font-family: Arial, Helvetica, sans-serif;
} }
#div_status table { #div_status table {
@ -11,7 +10,6 @@
background-color: #336699; background-color: #336699;
border-collapse: collapse; border-collapse: collapse;
font-family: "Courier New", Courier, Monospace; font-family: "Courier New", Courier, Monospace;
} }
#div_status th { #div_status th {
@ -22,8 +20,7 @@
color: #000; color: #000;
font-weight: bold; font-weight: bold;
background: #669999; /* For browsers that do not support gradients */ background: #669999; /* For browsers that do not support gradients */
background: linear-gradient(#669999, #77AAAA); background: linear-gradient(#31687e, #56a0bd);
} }
#div_status td { #div_status td {
@ -39,84 +36,111 @@ hr {
padding: 0px; padding: 0px;
} }
/* the buttons */ hr.disp { /* hr in main display */
.scan-button { width: 97%;
/* background-color: #669999; */ position: absolute;
border-color: black; top: 50px;
}
.control-button { /* skip/hold/lockout buttons */
border-color: gray;
height: 38px;
color: white; color: white;
padding: 10px 10px; padding: 10px 10px;
text-decoration: none; text-decoration: none;
margin: 4px 2px; margin: 1px 1px;
cursor: pointer; cursor: pointer;
width: 100px; width: 100px;
font-size: 14px; font-size: 14px;
font-weight: bold; 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); 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: LightGray; /* For browsers that do not support gradients */
background: linear-gradient(#669999, #82B0B0); background: linear-gradient(White, Silver);
} }
/* flex container for top buttons */ .controls { /* skip/hold/lockout buttons (1) */
/* border: 1px solid #aaa;
the flex properties are more useful when a variable-width is applied, width: 104px;
but can be safely left in place even when using a fixed width float: left;
*/ height: 100%;
.flex-container {
display: flex;
width: 730px;
justify-content: space-between;
}
.flex-container > div {
width: 100px;
margin: 0px;
text-align: center; text-align: center;
line-height: 75px;
font-size: 30px;
} }
.statDisplay { /* main display - freq, sys, tgid (2) */
/* main info container for the two tables */ padding: 0px;
width: 522px;
div.info { float: left;
position: relative; 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; width: 730px;
height: auto; border: 0px solid #a00;
border: 0px solid #000; display: inline-block;
} }
/* system frequencies container that holds the table */
.top { div.system { /* system frequencies container that holds the table */
text-align: left; float: left;
border: 0px solid #000;
}
div.system {
position: absolute;
top: 10px;
left: 0;
width: 48%; width: 48%;
height: auto; 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 { margin-left: 29px;
float: left;
position: relative;
top: 10px;
width: 48%; width: 48%;
float: right;
height: auto; height: auto;
border: 0px solid #00f; border: 0px solid #00f;
} }
@ -127,9 +151,10 @@ div.adjacent {
font-family: Arial, Helvetica, sans-serif; font-family: Arial, Helvetica, sans-serif;
font-size: 14px; font-size: 14px;
padding: 20px;
color: #484848; color: #484848;
float: right; float: right;
margin-top: 22px;
margin-right: 4px;
} }
.label { .label {
@ -138,6 +163,34 @@ div.adjacent {
color: #484848; 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 { .value {
font-family: Arial, Helvetica, sans-serif; font-family: Arial, Helvetica, sans-serif;
@ -158,9 +211,8 @@ div.adjacent {
text-align: left; 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; font-family: Arial, Helvetica, sans-serif;
color: #000060; color: #000060;
@ -169,24 +221,18 @@ div.adjacent {
} }
/* .s1 .s2 .s3 DIVs for the sections. see index.html */
.s1 { .s1 {
/* empty */ /* empty */
} }
.s2 { .s2 {
border: 1px solid #999; border: 0px solid #999;
height: auto; position: relative;
width: 720px; display: inline-block;
max-height: 112px;
width: 512px;
padding: 5px; padding: 5px;
background: LightGray; /* For browsers that do not support gradients */ margin: 0 0 0 2px;
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 { .copyright-text {
@ -238,8 +284,9 @@ div.adjacent {
.nav-button-active { .nav-button-active {
background-color: #9cc; background-color: #9cc;
background: linear-gradient(#8bb, #9cc); background: linear-gradient(#31687e, #56a0bd);
color: #000; /* background: linear-gradient(#8bb, #9cc); */
color: #fff;
border: 0px; border: 0px;
padding: 20px; padding: 20px;
display: block; display: block;
@ -249,12 +296,15 @@ div.adjacent {
.nav-button:hover { .nav-button:hover {
background-color: #699; background-color: #699;
background: linear-gradient(#588, #699); /* background: linear-gradient(#588, #699); */
background: linear-gradient(#56a0bd, #31687e);
color: #fff;
} }
.nav-button-active:hover { .nav-button-active:hover {
background-color: #699; background-color: #699;
background: linear-gradient(#588, #699); /* background: linear-gradient(#588, #699); */
background: linear-gradient(#56a0bd, #31687e);
} }
#div_settings table { #div_settings table {
@ -292,7 +342,7 @@ div.adjacent {
#div_settings input[type=text] { #div_settings input[type=text] {
max-width: 75px; max-width: 75px;
border-top: none; border-top: none;
border-bottom-width: 1; border-bottom-width: 1px;
border-bottom: dotted; border-bottom: dotted;
border-right: none; border-right: none;
border-left: none; border-left: none;
@ -336,7 +386,7 @@ div#cfg_list_area select {
#div_rx_opts input[type=text] { #div_rx_opts input[type=text] {
max-width: 75px; max-width: 75px;
border-top: none; border-top: none;
border-bottom-width: 1; border-bottom-width: 1px;
border-bottom: dotted; border-bottom: dotted;
border-right: none; border-right: none;
border-left: none; border-left: none;

47
op25/gr-op25_repeater/www/www-static/main.js
View File

@ -255,30 +255,24 @@ function rx_update(d) {
function change_freq(d) { function change_freq(d) {
var html = "<span class=\"label\">Frequency: </span><span class=\"value\">" + d['freq'] / 1000000.0; 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) { if (d['tgid'] != null) {
html += "<span class=\"label\">Talkgroup ID: </span><span class=\"value\"> " + d['tgid']; html += "<span class=\"label\">Talkgroup ID: </span><span class=\"value\"> " + d['tgid'];
html += "</span> <span class=\"systgid\"> &nbsp;" + d['tag'] + " </span>"; html += "</span> <span class=\"systgid\"> &nbsp;" + d['tag'] + " </span>";
} }
html += "<br>"; html += "";
var div_s2 = document.getElementById("div_s2"); var div_s2 = document.getElementById("div_s2");
div_s2.innerHTML = html; div_s2.innerHTML = html;
div_s2.style["display"] = ""; div_s2.style["display"] = "";
if (d['tgid'] != null) if (d['tgid'] != null)
current_tgid = d['tgid']; current_tgid = d['tgid'];
if (current_tgid != null) {
var div_s3 = document.getElementById("div_s3");
div_s3.style["display"] = "";
}
} }
// adjacent sites table // adjacent sites table
function adjacent_data(d) { function adjacent_data(d) {
if (Object.keys(d).length < 1) { if (Object.keys(d).length < 1)
var html = "</div>"; return "";
return html;
}
var html = "<div class=\"adjacent\">"; var html = "<div class=\"adjacent\">";
html += "<table border=1 borderwidth=0 cellpadding=0 cellspacing=0 width=100%>"; 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 colspan=99 style=\"align: center\">Adjacent Sites</th></tr>";
@ -291,7 +285,8 @@ function adjacent_data(d) {
ct += 1; 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 += "<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 // end adjacent sites table
@ -303,10 +298,11 @@ function adjacent_data(d) {
function trunk_update(d) { function trunk_update(d) {
var do_hex = {"syid":0, "sysid":0, "wacn": 0}; var do_hex = {"syid":0, "sysid":0, "wacn": 0};
var do_float = {"rxchan":0, "txchan":0}; var do_float = {"rxchan":0, "txchan":0};
var html = ""; var html = ""; // begin trunk_update HTML
for (var nac in d) { for (var nac in d) {
if (!is_digit(nac.charAt(0))) if (!is_digit(nac.charAt(0)))
continue; continue;
html += "<div class=\"content\">";
html += "<span class=\"nac\">"; html += "<span class=\"nac\">";
html += "NAC " + "0x" + parseInt(nac).toString(16) + " "; html += "NAC " + "0x" + parseInt(nac).toString(16) + " ";
html += d[nac]['rxchan'] / 1000000.0; html += d[nac]['rxchan'] / 1000000.0;
@ -333,8 +329,8 @@ function trunk_update(d) {
// system frequencies table // system frequencies table
html += "<p><div class=\"info\"><div class=\"system\">"; html += "<br><div class=\"info\"><div class=\"system\">";
html += "<table border=1 borderwidth=0 cellpadding=0 cellspacing=0 width=100%>"; // was width=350 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 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>"; html += "<tr><th>Frequency</th><th>Last Seen</th><th colspan=2>Talkgoup ID</th><th>Count</th></tr>";
var ct = 0; var ct = 0;
@ -348,14 +344,31 @@ function trunk_update(d) {
ct += 1; 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 += "<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>"; html += "</table></div>"; // end system freqencies table
// end system freqencies table
html += adjacent_data(d[nac]['adjacent_data']); html += adjacent_data(d[nac]['adjacent_data']);
html += "</div><br></div><hr><br>";
} }
var div_s1 = document.getElementById("div_s1"); var div_s1 = document.getElementById("div_s1");
div_s1.innerHTML = html; 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) { function config_list(d) {