Implement custom colors for node tx lines (fix #208)

AllStarLink · Dec 26, 2023 · aa239a6 · aa239a6
1 parent c74bf16
commit aa239a6
Show file tree

Hide file tree

Showing 3 changed files with 77 additions and 6 deletions.
diff --git a/conf/custom.css b/conf/custom.css
@@ -41,4 +41,25 @@
 	/* Node connection table stats=Connecting colors */
 	--am3-conntable-conn-noconn-color: rgba(0,0,0,1);
 	--am3-conntable-conn-noconn-bg-color: rgba(255,255,255,1);
+
+   /* Node Tx Local */
+    --am3-node-tx-local-color: rgb(0, 0, 0);
+    --am3-node-tx-local-bg-color: rgb(245, 198, 203);
+
+    /* NOde Tx Network */
+    --am3-node-tx-network-color: rgb(0, 0, 0);
+    --am3-node-tx-network-bg-color: rgb(245, 198, 203);
+
+    /* Node Tx Telem */
+    --am3-node-tx-telemetry-color: rgb(0, 0, 0);
+    --am3-node-tx-telemetry-bg-color: rgb(245, 198, 203);
+
+    /* Node Tx Remote */
+    --am3-node-tx-playback-remote-color: rgb(0, 0, 0);
+    --am3-node-tx-playback-remote-bg-color: rgb(245, 198, 203);
+
+    /* Node No Tx */
+    --am3-node-no-tx-color: rgb(0, 0, 0);
+    --am3-node-no-tx-bg-color: rgb(195, 230, 203);
+
 }
diff --git a/web/css/main.css b/web/css/main.css
@@ -38,6 +38,31 @@
 		/* Node connection table stats=Connecting colors */
 		--am3-conntable-conn-noconn-color: rgba(0,0,0,1);
 		--am3-conntable-conn-noconn-bg-color: rgba(255,255,255,1);
+
+		/* Node Tx Local */
+		--am3-node-tx-local-color: rgb(0, 0, 0);
+		--am3-node-tx-local-bg-color: rgb(245, 198, 203);
+
+		/* Node Tx Network */
+		--am3-node-tx-network-color: rgb(0, 0, 0);
+		--am3-node-tx-network-bg-color: rgb(245, 198, 203);
+
+		/* Node Tx Telem */
+		--am3-node-tx-telemetry-color: rgb(0, 0, 0);
+		--am3-node-tx-telemetry-bg-color: rgb(245, 198, 203);
+
+		/* Node Tx Remote */
+		--am3-node-tx-playback-remote-color: rgb(0, 0, 0);
+		--am3-node-tx-playback-remote-bg-color: rgb(245, 198, 203);
+
+		/* Node No Tx */
+		--am3-node-no-tx-color: rgb(0, 0, 0);
+		--am3-node-no-tx-bg-color: rgb(195, 230, 203);
+
+}
+
+.am3-no-tx{
+
 }
 
 body {
@@ -113,6 +138,31 @@ body {
 	font-weight: bold;
 }
 
+.am3-tx-local{
+	color: var(--am3-node-tx-local-color);
+	background-color: var(--am3-node-tx-local-bg-color);
+}
+
+.am3-tx-network{
+	color: var(--am3-node-tx-network-color);
+	background-color: var(--am3-node-tx-network-bg-color);
+}
+
+.am3-tx-telemetry{
+	color: var(--am3-node-tx-telemetry-color);
+	background-color: var(--am3-node-tx-telemetry-bg-color);
+}
+
+.am3-tx-playback-remote {
+	color: var(--am3-node-tx-playback-remote-color);
+	background-color: var(--am3-node-tx-playback-remote-bg-color);
+}
+
+.am3-no-tx{
+	color: var(--am3-node-no-tx-color);
+	background-color: var(--am3-node-no-tx-bg-color);
+}
+
 .node-conn-keyed {
 	background-color: var(--am3-conntable-conn-keyed-bg-color) !important;
 	color: var(--am3-conntable-conn-keyed-color) !important;

diff --git a/web/js/index.js b/web/js/index.js
@@ -192,17 +192,17 @@ function nodeEntry(nodeid, nodeinfo){
 
     // update the tx line
     if(node.RXKEYED === true && node.TXKEYED === true ){    
-        divTxStat.innerHTML = "<div class=\"alert alert-warning am3-alert-keyed mx-3 py-0 nodetxline nodetxline-keyed\">Transmit - Local Source</div>";
+        divTxStat.innerHTML = "<div class=\"alert alert-warning mx-3 py-0 nodetxline am3-tx-local\">Transmit - Local Source</div>";
     } else if( node.RXKEYED === true && node.TXEKEYED === false && node.TXEKEYED === false ){
-        divTxStat.innerHTML = "<div class=\"alert alert-warning am3-alert-keyed mx-3 py-0 nodetxline nodetxline-keyed\">Transmit - Local Source</div>";
+        divTxStat.innerHTML = "<div class=\"alert alert-warning mx-3 py-0 nodetxline am3-tx-local\">Transmit - Local Source</div>";
     } else if( node.CONNKEYED === true && node.TXKEYED === true && node.RXKEYED === false ){
-        divTxStat.innerHTML = "<div class=\"alert alert-warning am3-alert-keyed mx-3 py-0 nodetxline nodetxline-keyed\">Transmit - Network Source</div>";
+        divTxStat.innerHTML = "<div class=\"alert alert-warning mx-3 py-0 nodetxline am3-tx-network\">Transmit - Network Source</div>";
     } else if( node.TXKEYED === true && node.RXKEYED === false && node.CONNKEYED === false ){
-        divTxStat.innerHTML = "<div class=\"alert alert-warning am3-alert-keyed mx-3 py-0 nodetxline nodetxline-keyed\">Transmit - Telemetry/Playback</div>";
+        divTxStat.innerHTML = "<div class=\"alert alert-warning mx-3 py-0 nodetxline am3-tx-telemetry\">Transmit - Telemetry/Playback</div>";
     } else if( node.TXKEYED === false && node.RXKEYED === false && node.TXEKEYED === false && node.CONNKEYED === true ){
-        divTxStat.innerHTML = `<div class="alert alert-warning am3-alert-keyed mx-3 py-0 nodetxline nodetxline-keyed">Transmit - Playback from Remote Node ${node.CONNKEYEDNODE}</div>`;
+        divTxStat.innerHTML = `<div class="alert alert-warning mx-3 py-0 nodetxline am3-tx-playback-remote">Transmit - Playback from Remote Node ${node.CONNKEYEDNODE}</div>`;
     } else {
-        divTxStat.innerHTML = "<div class=\"alert alert-success am3-alert-idle mx-3 py-0 nodetxline nodetxline-unkeyed\">Transmit - Idle</div>";
+        divTxStat.innerHTML = "<div class=\"alert alert-success am3-alert-idle mx-3 py-0 nodetxline am3-no-tx\">Transmit - Idle</div>";
     }
 
     // update the connection table