Power button on UI works, added simulated startup, extra ray trace

nui/radar.css

@@ -154,12 +154,20 @@ button:focus { outline: none; }
             background: linear-gradient( to bottom, rgba( 230, 230, 230, 0.8 ), rgb( 40, 168, 40 ) 10%, rgb( 0, 134, 0 ) );
             box-shadow: 0px 0px 3px 0px rgb( 80, 80, 80 );
             text-align: center;
-            font-family: 'Heebo-Regular';
+            /* font-family: 'Heebo-Regular'; */
             font-size: 14px;
             color: rgb( 34, 34, 34 );
             line-height: 45px;
             border-radius: 10px;
         }
+            #radar .pwr_button_container .pwr_button:hover {
+                background: linear-gradient( to bottom, rgba( 240, 240, 240, 0.8 ), rgb( 50, 178, 50 ) 10%, rgb( 0, 144, 0 ) );
+            }
+
+            #radar .pwr_button_container .pwr_button:active {
+                background: linear-gradient( to bottom, rgba( 220, 220, 220, 0.8 ), rgb( 30, 158, 30 ) 10%, rgb( 0, 124, 0 ) );
+                box-shadow: inset 0px 0px 3px 0px rgb( 80, 80, 80 );
+            }
 
     #radar .modes_container {
         display: grid;

nui/radar.html

@@ -15,7 +15,7 @@
 					<div class="label label_top">FRONT ANTENNA</div>
 
 					<div class="pwr_button_container">
-						<div class="pwr_button">PWR</div>
+						<div id="pwrBtn" class="pwr_button">PWR</div>
 					</div>
 
 					<div class="modes_container">

nui/radar.js

@@ -17,6 +17,7 @@ const elements =
 {
     radar: $( "#radarFrame" ),
     remote: $( "#rc" ), 
+    pwrBtn: $( "#pwrBtn" ), 
 
     patrolSpeed: $( "#patrolSpeed" ),
 
@@ -116,6 +117,10 @@ remoteButtons.toggleDisplay.click( function() {
     toggleRadar();
 } )
 
+elements.pwrBtn.click( function() {
+    togglePower();
+} )
+
 function toggleRadar()
 {
     elements.radar.fadeToggle();
@@ -126,12 +131,35 @@ function toggleRemote()
     elements.remote.toggle();
 }
 
+function togglePower()
+{
+    sendData( "togglePower", null ); 
+}
+
+function setLight( ant, cat, item, state )
+{
+    let obj = elements.antennas[ant][cat][item]; 
+
+    if ( state ) {
+        // if ( cat == "dirs" ) { obj.addClass( "active_arrow" ) } else { obj.addClass( "active" ) }; 
+        cat == "dirs" ? obj.addClass( "active_arrow" ) : obj.addClass( "active" ); 
+    } else {
+        // if ( cat == "dirs" ) { obj.removeClass( "active_arrow" ) } else { obj.removeClass( "active" ) }; 
+        cat == "dirs" ? obj.removeClass( "active_arrow" ) : obj.removeClass( "active" ); 
+    }
+}
+
 function clearModes( ant )
 {
     for ( let i in elements.antennas[ant].modes )
     {
         elements.antennas[ant].modes[i].removeClass( "active" ); 
     }
+
+    for ( let a in elements.antennas[ant].fast )
+    {
+        elements.antennas[ant].fast[a].removeClass( "active" ); 
+    }
 }
 
 function clearDirs( ant )
@@ -151,16 +179,13 @@ function clearAntenna( ant )
     elements.antennas[ant].fastSpeed.html( "¦¦¦" );
 }
 
-function setLight( ant, cat, item, state )
+function clearEverything()
 {
-    let obj = elements.antennas[ant][cat][item]; 
+    elements.patrolSpeed.html( "¦¦¦" ); 
 
-    if ( state ) {
-        // if ( cat == "dirs" ) { obj.addClass( "active_arrow" ) } else { obj.addClass( "active" ) }; 
-        cat == "dirs" ? obj.addClass( "active_arrow" ) : obj.addClass( "active" ); 
-    } else {
-        // if ( cat == "dirs" ) { obj.removeClass( "active_arrow" ) } else { obj.removeClass( "active" ) }; 
-        cat == "dirs" ? obj.removeClass( "active_arrow" ) : obj.removeClass( "active" ); 
+    for ( let i in elements.antennas ) 
+    {
+        clearAntenna( i ); 
     }
 }
 
@@ -209,6 +234,45 @@ function updateDisplays( ps, ants )
     }
 }
 
+// Simulation of the system powering up
+function poweringUp()
+{
+    elements.patrolSpeed.html( "888" ); 
+
+    for ( let i of [ "front", "rear" ] )
+    {
+        let e = elements.antennas[i];
+
+        e.targetSpeed.html( "888" ); 
+        e.fastSpeed.html( "888" ); 
+
+        for ( let a of [ "dirs", "modes", "fast" ] )
+        {
+            for ( let obj in e[a] )
+            {
+                a == "dirs" ? e[a][obj].addClass( "active_arrow" ) : e[a][obj].addClass( "active" ); 
+            }
+        }
+    }
+} 
+
+function poweredUp()
+{
+    clearEverything(); 
+
+    setAntennaXmit( "front", false );
+    setAntennaXmit( "rear", false );
+}
+
+function radarPower( state )
+{
+    if ( state ) {
+        poweringUp()
+    } else {
+        clearEverything();
+    }
+}
+
 // This function is used to send data back through to the LUA side 
 function sendData( name, data ) {
     $.post( "http://" + resourceName + "/" + name, JSON.stringify( data ), function( datab ) {
@@ -253,6 +317,12 @@ window.addEventListener( "message", function( event ) {
         case "openRemote":
             toggleRemote();
             break; 
+        case "radarPower":
+            radarPower( item.state );
+            break; 
+        case "poweredUp":
+            poweredUp();
+            break;
         case "update":
             updateDisplays( item.speed, item.antennas );
             break;