From 384c8c28d0812486a49dfd45a982c67a3e374264 Mon Sep 17 00:00:00 2001
From: Max <ikj1234i@yahoo.com>
Date: Fri, 27 Apr 2018 10:02:33 -0400
Subject: [PATCH] ui additions thx Trip

---
 .../www/www-static/index.html                 | 47 ++++++++++++-
 op25/gr-op25_repeater/www/www-static/main.css | 63 +++++++++++------
 op25/gr-op25_repeater/www/www-static/main.js  | 68 +++++++++++++------
 3 files changed, 138 insertions(+), 40 deletions(-)

diff --git a/op25/gr-op25_repeater/www/www-static/index.html b/op25/gr-op25_repeater/www/www-static/index.html
index e35902a..0d754e1 100644
--- a/op25/gr-op25_repeater/www/www-static/index.html
+++ b/op25/gr-op25_repeater/www/www-static/index.html
@@ -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>
diff --git a/op25/gr-op25_repeater/www/www-static/main.css b/op25/gr-op25_repeater/www/www-static/main.css
index ae6b845..2ce30a9 100644
--- a/op25/gr-op25_repeater/www/www-static/main.css
+++ b/op25/gr-op25_repeater/www/www-static/main.css
@@ -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);
 }
 
diff --git a/op25/gr-op25_repeater/www/www-static/main.js b/op25/gr-op25_repeater/www/www-static/main.js
index 85fecad..15f421c 100644
--- a/op25/gr-op25_repeater/www/www-static/main.js
+++ b/op25/gr-op25_repeater/www/www-static/main.js
@@ -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;