ui additions thx Trip
This commit is contained in:
parent
3c50b3c54b
commit
384c8c28d0
|
@ -104,6 +104,51 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="div_settings" class="div_settings" style="display: none;">
|
<div id="div_settings" class="div_settings" style="display: none;">
|
||||||
|
|
||||||
|
<!-- Main Display Settings -->
|
||||||
|
<div id = "displaySettings" class="displaySettings">
|
||||||
|
<span class="nac"><b>Display Settings</b></span><br><br>
|
||||||
|
<span class="label">System Font Size: </span>
|
||||||
|
<select name="valSystemFont" id="valSystemFont" style="width: 50px;">
|
||||||
|
<option value="28">28</option>
|
||||||
|
<option value="26">26</option>
|
||||||
|
<option value="24" selected>24</option>
|
||||||
|
<option value="20">20</option>
|
||||||
|
<option value="18">18</option>
|
||||||
|
<option value="16">16</option>
|
||||||
|
<option value="14">14</option>
|
||||||
|
<option value="12">12</option>
|
||||||
|
</select> <span class="label">px (default = 24)</span><br><br>
|
||||||
|
|
||||||
|
<span class="label">Talkgroup Tag Font Size: </span>
|
||||||
|
<select name="valTagFont" id="valTagFont" style="width: 50px;">
|
||||||
|
<option value="28">28</option>
|
||||||
|
<option value="26">26</option>
|
||||||
|
<option value="24" selected>24</option>
|
||||||
|
<option value="20">20</option>
|
||||||
|
<option value="18">18</option>
|
||||||
|
<option value="16">16</option>
|
||||||
|
<option value="14">14</option>
|
||||||
|
<option value="12">12</option>
|
||||||
|
</select> <span class="label">px (default = 24)</span><br><br>
|
||||||
|
|
||||||
|
<span class="label">Truncate display strings to:
|
||||||
|
|
||||||
|
|
||||||
|
<input name="firstname" type="text" id="valTruncate" style="width: 30px; text-align: center;" value="30"> characters (default = 30)<br><br>
|
||||||
|
Font Style:
|
||||||
|
<select name="valFontStyle" id="valFontStyle" style="width: 70px;">
|
||||||
|
<option value="normal">Normal</option>
|
||||||
|
<option value="bold" selected>Bold</option>
|
||||||
|
</select>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- End Main Display Settings -->
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<img src="temp.png"><br>
|
<img src="temp.png"><br>
|
||||||
<form method="post" action="#" id="form_settings">
|
<form method="post" action="#" id="form_settings">
|
||||||
<div id="cfg_list_area">
|
<div id="cfg_list_area">
|
||||||
|
@ -193,7 +238,7 @@
|
||||||
<tr id="devrow" class="dynrow" style="display: none">
|
<tr id="devrow" class="dynrow" style="display: none">
|
||||||
<td><input type="checkbox" name="active" checked></input></td>
|
<td><input type="checkbox" name="active" checked></input></td>
|
||||||
<td><input type="text" name="name" value="Device1"></td>
|
<td><input type="text" name="name" value="Device1"></td>
|
||||||
<td><input type="text" name="args" value="rtl:0"></td>
|
<td><input type="text" name="args" value="rtl"></td>
|
||||||
<td><input type="text" name="frequency" value="500.0"></td>
|
<td><input type="text" name="frequency" value="500.0"></td>
|
||||||
<td><input type="text" name="gains" value="lna:45"></td>
|
<td><input type="text" name="gains" value="lna:45"></td>
|
||||||
<td><input type="text" name="offset" value="0"></td>
|
<td><input type="text" name="offset" value="0"></td>
|
||||||
|
|
|
@ -1,3 +1,26 @@
|
||||||
|
/*
|
||||||
|
|
||||||
|
Copyright 2017, 2018 Max H. Parke KA1RBI
|
||||||
|
|
||||||
|
This file is part of OP25
|
||||||
|
|
||||||
|
OP25 is free software; you can redistribute it and/or modify it
|
||||||
|
under the terms of the GNU General Public License as published by
|
||||||
|
the Free Software Foundation; either version 3, or (at your option)
|
||||||
|
any later version.
|
||||||
|
|
||||||
|
OP25 is distributed in the hope that it will be useful, but WITHOUT
|
||||||
|
ANY WARRANTY; without even the implied warranty of MERCHANTABILITY
|
||||||
|
or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public
|
||||||
|
License for more details.
|
||||||
|
|
||||||
|
You should have received a copy of the GNU General Public License
|
||||||
|
along with OP25; see the file COPYING. If not, write to the Free
|
||||||
|
Software Foundation, Inc., 51 Franklin Street, Boston, MA
|
||||||
|
02110-1301, USA.
|
||||||
|
|
||||||
|
*/
|
||||||
|
|
||||||
#div_status body {
|
#div_status body {
|
||||||
|
|
||||||
background-color: LightGray;
|
background-color: LightGray;
|
||||||
|
@ -6,8 +29,6 @@
|
||||||
|
|
||||||
#div_status table {
|
#div_status table {
|
||||||
|
|
||||||
border-style: solid;
|
|
||||||
background-color: #336699;
|
|
||||||
border-collapse: collapse;
|
border-collapse: collapse;
|
||||||
font-family: "Courier New", Courier, Monospace;
|
font-family: "Courier New", Courier, Monospace;
|
||||||
}
|
}
|
||||||
|
@ -25,24 +46,27 @@
|
||||||
|
|
||||||
#div_status td {
|
#div_status td {
|
||||||
|
|
||||||
border-style: solid;
|
border: 1px solid #666;
|
||||||
padding: 3px;
|
padding: 3px;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#div_s2 td {
|
||||||
|
|
||||||
|
border-bottom: 1px solid #888;
|
||||||
|
border-top: 1px solid #888;
|
||||||
|
border-left: 0px;
|
||||||
|
border-right: 0px;
|
||||||
|
padding: 3px;
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
hr {
|
hr {
|
||||||
width: 730px;
|
width: 730px;
|
||||||
float: left;
|
float: left;
|
||||||
padding: 0px;
|
padding: 0px;
|
||||||
}
|
}
|
||||||
|
|
||||||
hr.disp { /* hr in main display */
|
|
||||||
|
|
||||||
width: 97%;
|
|
||||||
position: absolute;
|
|
||||||
top: 50px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.control-button { /* skip/hold/lockout buttons */
|
.control-button { /* skip/hold/lockout buttons */
|
||||||
|
|
||||||
border-color: gray;
|
border-color: gray;
|
||||||
|
@ -58,7 +82,6 @@ hr.disp { /* hr in main display */
|
||||||
box-shadow: 0 1px 1px 0 rgba(0,0,0,0.2), 0 2px 5px 0 rgba(0,0,0,0.19);
|
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: #31687e; /* For browsers that do not support gradients */
|
||||||
background: linear-gradient(#31687e, #56a0bd);
|
background: linear-gradient(#31687e, #56a0bd);
|
||||||
/* background: linear-gradient(#669999, #82B0B0); --- the green */
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.control-button:hover {
|
.control-button:hover {
|
||||||
|
@ -87,6 +110,14 @@ hr.disp { /* hr in main display */
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.displaySettings {
|
||||||
|
|
||||||
|
border: 1px solid #000;
|
||||||
|
padding: 5px;
|
||||||
|
width: 720px;
|
||||||
|
|
||||||
|
}
|
||||||
.statDisplay { /* main display - freq, sys, tgid (2) */
|
.statDisplay { /* main display - freq, sys, tgid (2) */
|
||||||
|
|
||||||
padding: 0px;
|
padding: 0px;
|
||||||
|
@ -104,7 +135,7 @@ hr.disp { /* hr in main display */
|
||||||
|
|
||||||
padding: 0px;
|
padding: 0px;
|
||||||
/* display: inline-block; */
|
/* display: inline-block; */
|
||||||
float: right; /* works left or right, right gives margin in between this & 2*/
|
float: right; /* works left or right, right gives margin in between this & 2 */
|
||||||
width: 95px;
|
width: 95px;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
background-color:#f9f9f9;
|
background-color:#f9f9f9;
|
||||||
|
@ -119,9 +150,6 @@ hr.disp { /* hr in main display */
|
||||||
|
|
||||||
div.info { /* main info container for the two tables */
|
div.info { /* main info container for the two tables */
|
||||||
|
|
||||||
/* min-height: 50px;
|
|
||||||
overflow: hidden;
|
|
||||||
position: relative; */
|
|
||||||
width: 730px;
|
width: 730px;
|
||||||
border: 0px solid #a00;
|
border: 0px solid #a00;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
|
@ -198,7 +226,7 @@ div.adjacent { /* adjacent sites container that holds the table */
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
.systgid {
|
.systgid { /* System and Talkgroup Text */
|
||||||
|
|
||||||
font-family: Arial, Helvetica, sans-serif;
|
font-family: Arial, Helvetica, sans-serif;
|
||||||
color: #000060;
|
color: #000060;
|
||||||
|
@ -285,7 +313,6 @@ div.adjacent { /* adjacent sites container that holds the table */
|
||||||
.nav-button-active {
|
.nav-button-active {
|
||||||
background-color: #9cc;
|
background-color: #9cc;
|
||||||
background: linear-gradient(#31687e, #56a0bd);
|
background: linear-gradient(#31687e, #56a0bd);
|
||||||
/* background: linear-gradient(#8bb, #9cc); */
|
|
||||||
color: #fff;
|
color: #fff;
|
||||||
border: 0px;
|
border: 0px;
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
|
@ -296,14 +323,12 @@ div.adjacent { /* adjacent sites container that holds the table */
|
||||||
|
|
||||||
.nav-button:hover {
|
.nav-button:hover {
|
||||||
background-color: #699;
|
background-color: #699;
|
||||||
/* background: linear-gradient(#588, #699); */
|
|
||||||
background: linear-gradient(#56a0bd, #31687e);
|
background: linear-gradient(#56a0bd, #31687e);
|
||||||
color: #fff;
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-button-active:hover {
|
.nav-button-active:hover {
|
||||||
background-color: #699;
|
background-color: #699;
|
||||||
/* background: linear-gradient(#588, #699); */
|
|
||||||
background: linear-gradient(#56a0bd, #31687e);
|
background: linear-gradient(#56a0bd, #31687e);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -253,27 +253,56 @@ function rx_update(d) {
|
||||||
|
|
||||||
// frequency, system, and talkgroup display
|
// frequency, system, and talkgroup display
|
||||||
|
|
||||||
function change_freq(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><br><br><hr id=\"disphr\" class=\"disp\"><br>";
|
var displayTgid = "—";
|
||||||
if (d['tgid'] != null) {
|
var displayTag = " ";
|
||||||
html += "<span class=\"label\">Talkgroup ID: </span><span class=\"value\"> " + d['tgid'];
|
|
||||||
html += "</span> <span class=\"systgid\"> " + d['tag'] + " </span>";
|
var doTruncate = document.getElementById("valTruncate").value; // get truncate value from Configuration
|
||||||
}
|
|
||||||
html += "";
|
if (d['tgid'] != null) {
|
||||||
var div_s2 = document.getElementById("div_s2");
|
displayTgid = d['tgid'];
|
||||||
div_s2.innerHTML = html;
|
displayTag = d['tag'].substring(0,doTruncate);
|
||||||
div_s2.style["display"] = "";
|
}
|
||||||
if (d['tgid'] != null)
|
|
||||||
current_tgid = d['tgid'];
|
var html = "<table style=\"width: 512px; height: 112px;\">";
|
||||||
|
html += "<tr>";
|
||||||
|
html += "<td style=\"width: 422px;\"><span class=\"systgid\" id=\"dSys\">" + d['system'].substring(0,doTruncate) + "</span></td>";
|
||||||
|
html += "<td align=\"center\" style=\"width: 88px;\">";
|
||||||
|
html += "<span class=\"label-sm\">Frequency</span><br><span class=\"value\">" + d['freq'] / 1000000.0 + "</span></td>";
|
||||||
|
html += "</tr>";
|
||||||
|
html += "<tr>";
|
||||||
|
html += "<td style=\"width: 422px;\"><span class=\"systgid\" id=\"dTag\">" + displayTag + "</span></td>";
|
||||||
|
html += "<td align=\"center\" style=\"width: 88px;\">";
|
||||||
|
html += "<span class=\"label-sm\">Talkgroup ID</span><br><span class=\"value\">" + displayTgid + "</span>";
|
||||||
|
html += "</td>";
|
||||||
|
html += "</tr></table>";
|
||||||
|
|
||||||
|
var div_s2 = document.getElementById("div_s2");
|
||||||
|
div_s2.innerHTML = html;
|
||||||
|
div_s2.style["display"] = "";
|
||||||
|
|
||||||
|
if (d['tgid'] != null) {
|
||||||
|
current_tgid = d['tgid'];
|
||||||
|
}
|
||||||
|
var fstyle = document.getElementById("valFontStyle").value;
|
||||||
|
var z1 = document.getElementById("valTagFont").value; // set font size of TG Tag
|
||||||
|
var z = document.getElementById("dTag");
|
||||||
|
z.style = "font-size: " + z1 + "px; " + "font-weight: " + fstyle + ";";
|
||||||
|
|
||||||
|
var z1 = document.getElementById("valSystemFont").value; // set font size of System
|
||||||
|
var z = document.getElementById("dSys");
|
||||||
|
z.style = "font-size: " + z1 + "px; " + "font-weight: " + fstyle + ";";
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
// 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)
|
||||||
return "";
|
return "";
|
||||||
var html = "<div class=\"adjacent\">";
|
var html = "<div class=\"adjacent\">"; // open div-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>";
|
||||||
html += "<tr><th>Frequency</th><th>Sys ID</th><th>RFSS</th><th>Site</th><th>Uplink</th></tr>";
|
html += "<tr><th>Frequency</th><th>Sys ID</th><th>RFSS</th><th>Site</th><th>Uplink</th></tr>";
|
||||||
|
@ -285,8 +314,7 @@ 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>";
|
html += "</table></div>"; // close div-adjacent // end trunk_update HTML
|
||||||
// box br // end trunk_update HTML
|
|
||||||
|
|
||||||
// end adjacent sites table
|
// end adjacent sites table
|
||||||
|
|
||||||
|
@ -302,7 +330,7 @@ function trunk_update(d) {
|
||||||
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 += "<div class=\"content\">"; // open div-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;
|
||||||
|
@ -329,7 +357,7 @@ function trunk_update(d) {
|
||||||
|
|
||||||
// system frequencies table
|
// system frequencies table
|
||||||
|
|
||||||
html += "<br><div class=\"info\"><div class=\"system\">";
|
html += "<br><div class=\"info\"><div class=\"system\">"; // open div-info open div-system
|
||||||
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\">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>";
|
||||||
|
@ -344,10 +372,10 @@ 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>"; // end system freqencies table
|
html += "</table></div>"; // close div-system // end system freqencies table
|
||||||
|
|
||||||
html += adjacent_data(d[nac]['adjacent_data']);
|
html += adjacent_data(d[nac]['adjacent_data']);
|
||||||
html += "</div><br></div><hr><br>";
|
html += "</div><br></div><hr><br>"; // close div-content close div-info box-br hr-separating each NAC
|
||||||
}
|
}
|
||||||
var div_s1 = document.getElementById("div_s1");
|
var div_s1 = document.getElementById("div_s1");
|
||||||
div_s1.innerHTML = html;
|
div_s1.innerHTML = html;
|
||||||
|
|
Loading…
Reference in New Issue