ui additions thx Trip

max
Max 5 years ago
parent 3c50b3c54b
commit 384c8c28d0
  1. 47
      op25/gr-op25_repeater/www/www-static/index.html
  2. 63
      op25/gr-op25_repeater/www/www-static/main.css
  3. 68
      op25/gr-op25_repeater/www/www-static/main.js

@ -104,6 +104,51 @@
</div>
<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:&nbsp;&nbsp;</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>&nbsp;&nbsp;<span class="label">px (default = 24)</span><br><br>
<span class="label">Talkgroup Tag Font Size:&nbsp;&nbsp;</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>&nbsp;&nbsp;<span class="label">px (default = 24)</span><br><br>
<span class="label">Truncate display strings to:&nbsp;&nbsp;
<input name="firstname" type="text" id="valTruncate" style="width: 30px; text-align: center;" value="30"> characters (default = 30)<br><br>
Font Style:&nbsp;
<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>
<form method="post" action="#" id="form_settings">
<div id="cfg_list_area">
@ -193,7 +238,7 @@
<tr id="devrow" class="dynrow" style="display: none">
<td><input type="checkbox" name="active" checked></input></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="gains" value="lna:45"></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 {
background-color: LightGray;
@ -6,8 +29,6 @@
#div_status table {
border-style: solid;
background-color: #336699;
border-collapse: collapse;
font-family: "Courier New", Courier, Monospace;
}
@ -25,24 +46,27 @@
#div_status td {
border-style: solid;
border: 1px solid #666;
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 {
width: 730px;
float: left;
padding: 0px;
}
hr.disp { /* hr in main display */
width: 97%;
position: absolute;
top: 50px;
}
.control-button { /* skip/hold/lockout buttons */
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);
background: #31687e; /* For browsers that do not support gradients */
background: linear-gradient(#31687e, #56a0bd);
/* background: linear-gradient(#669999, #82B0B0); --- the green */
}
.control-button:hover {
@ -87,6 +110,14 @@ hr.disp { /* hr in main display */
text-align: center;
}
.displaySettings {
border: 1px solid #000;
padding: 5px;
width: 720px;
}
.statDisplay { /* main display - freq, sys, tgid (2) */
padding: 0px;
@ -104,7 +135,7 @@ hr.disp { /* hr in main display */
padding: 0px;
/* 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;
height: 100%;
background-color:#f9f9f9;
@ -119,9 +150,6 @@ hr.disp { /* hr in main display */
div.info { /* main info container for the two tables */
/* min-height: 50px;
overflow: hidden;
position: relative; */
width: 730px;
border: 0px solid #a00;
display: inline-block;
@ -198,7 +226,7 @@ div.adjacent { /* adjacent sites container that holds the table */
font-weight: bold;
}
.systgid {
.systgid { /* System and Talkgroup Text */
font-family: Arial, Helvetica, sans-serif;
color: #000060;
@ -285,7 +313,6 @@ div.adjacent { /* adjacent sites container that holds the table */
.nav-button-active {
background-color: #9cc;
background: linear-gradient(#31687e, #56a0bd);
/* background: linear-gradient(#8bb, #9cc); */
color: #fff;
border: 0px;
padding: 20px;
@ -296,14 +323,12 @@ div.adjacent { /* adjacent sites container that holds the table */
.nav-button:hover {
background-color: #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(#56a0bd, #31687e);
}

@ -253,27 +253,56 @@ function rx_update(d) {
// frequency, system, and talkgroup display
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><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 += "";
var div_s2 = document.getElementById("div_s2");
div_s2.innerHTML = html;
div_s2.style["display"] = "";
if (d['tgid'] != null)
current_tgid = d['tgid'];
function change_freq(d) {
var displayTgid = "&mdash;";
var displayTag = "&nbsp;";
var doTruncate = document.getElementById("valTruncate").value; // get truncate value from Configuration
if (d['tgid'] != null) {
displayTgid = d['tgid'];
displayTag = d['tag'].substring(0,doTruncate);
}
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
function adjacent_data(d) {
if (Object.keys(d).length < 1)
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 += "<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>";
@ -285,8 +314,7 @@ 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>";
// box br // end trunk_update HTML
html += "</table></div>"; // close div-adjacent // end trunk_update HTML
// end adjacent sites table
@ -302,7 +330,7 @@ function trunk_update(d) {
for (var nac in d) {
if (!is_digit(nac.charAt(0)))
continue;
html += "<div class=\"content\">";
html += "<div class=\"content\">"; // open div-content
html += "<span class=\"nac\">";
html += "NAC " + "0x" + parseInt(nac).toString(16) + " ";
html += d[nac]['rxchan'] / 1000000.0;
@ -329,7 +357,7 @@ function trunk_update(d) {
// 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 += "<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>";
@ -344,10 +372,10 @@ 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>"; // close div-system // end system freqencies table
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");
div_s1.innerHTML = html;

Loading…
Cancel
Save