From 34d850a27838842855d166aaff9bc747c7ae91d0 Mon Sep 17 00:00:00 2001 From: Dan Date: Fri, 6 Dec 2019 09:30:47 +0000 Subject: [PATCH] UI can be scaled, changed some of the JS toggles to states --- nui/radar.css | 57 +++++++++++++++++++++++++++++++++++++++--- nui/radar.html | 29 ++++++++++++++------- nui/radar.js | 68 +++++++++++++++++++++++++++++++++++--------------- 3 files changed, 122 insertions(+), 32 deletions(-) diff --git a/nui/radar.css b/nui/radar.css index f762c9d..24810f9 100644 --- a/nui/radar.css +++ b/nui/radar.css @@ -19,6 +19,10 @@ box-sizing: border-box; } +body { + overflow: hidden; +} + /* Removes the outline when buttons have been clicked */ button:focus { outline: none; } @@ -41,6 +45,10 @@ button:focus { outline: none; } background-image: url( "frame.png" ); + /* Settings for scaling */ + transform: scale( 1.0 ); + transform-origin: bottom right; + z-index: 1; } @@ -572,7 +580,7 @@ button:focus { outline: none; } #uiSettingsBox { width: 200px; - height: 300px; + height: 350px; position: absolute; margin: auto; @@ -617,7 +625,7 @@ button:focus { outline: none; } } #uiSettingsBox .radar_settings { - /* background-color: rgb( 50, 54, 45 ); */ + width: 100%; } #uiSettingsBox .radar_settings .alignment { height: 200px; @@ -648,6 +656,10 @@ button:focus { outline: none; } position: relative; } + + #uiSettingsBox .radar_settings .alignment .aligner:active { + background-color: rgb( 190, 190, 190 ); + } #uiSettingsBox .radar_settings .alignment .aligner .arrow { width: 45px; height: 45px; @@ -694,6 +706,45 @@ button:focus { outline: none; } height: 55px; background-color: transparent; } + + #uiSettingsBox .scaling { + height: 70px; + + display: flex; + justify-content: space-evenly; + align-items: center; + } + #uiSettingsBox .scaling p { + font-size: 18px; + margin: 0 auto; + text-align: center; + color: rgb( 255, 255, 255 ); + } + #uiSettingsBox .scaling .multiplier { + font-size: 16px; + } + + #uiSettingsBox .scaling .symbol { + width: 45px; + height: 45px; + + background-color: rgb( 225, 225, 225 ); + } + #uiSettingsBox .scaling .symbol:hover { + background-color: rgb( 255, 255, 255 ); + } + + #uiSettingsBox .scaling .symbol:active { + background-color: rgb( 190, 190, 190 ); + } + + #uiSettingsBox .scaling .minus { + clip-path: polygon( 0 35%, 100% 35%, 100% 65%, 0 65% ); + } + + #uiSettingsBox .scaling .plus { + clip-path: polygon( 0 35%, 35% 35%, 35% 0, 65% 0, 65% 35%, 100% 35%, 100% 65%, 65% 65%, 65% 100%, 35% 100%, 35% 65%, 0 65% ); + } #uiSettingsBox .close { width: 80px; @@ -701,7 +752,7 @@ button:focus { outline: none; } display: block; - margin: 20px auto; + margin: 5px auto; border-radius: 10px; border: none; diff --git a/nui/radar.html b/nui/radar.html index 172f60f..25e374a 100644 --- a/nui/radar.html +++ b/nui/radar.html @@ -173,53 +173,64 @@ -->
-

Radar Position

+

Radar UI Settings

- +
- +
- +
- +
- +
- +
- +
- +
+
+
+ +
+

Scale

+

1.00x

+
+ +
+
+ diff --git a/nui/radar.js b/nui/radar.js index 18bed84..306f909 100644 --- a/nui/radar.js +++ b/nui/radar.js @@ -32,6 +32,12 @@ const elements = uiSettingsBox: $( "#uiSettingsBox" ), closeUiBtn: $( "#closeUiSettings" ), + scale: { + increase: $( "#increaseScale" ), + decrease: $( "#decreaseScale" ), + display: $( "#scaleDisplay" ) + }, + patrolSpeed: $( "#patrolSpeed" ), antennas: { @@ -104,22 +110,22 @@ elements.remote.hide(); elements.uiSettingsBox.hide(); elements.uiSettingsBtn.click( function() { - toggleUISettings(); + setUISettingsVisible( true, true ); } ) elements.pwrBtn.click( function() { togglePower(); } ) -function toggleRadar( state ) +function setRadarVisible( state ) { - // state ? elements.radar.fadeIn() : elements.radar.fadeOut(); - elements.radar.fadeToggle(); + state ? elements.radar.fadeIn() : elements.radar.fadeOut(); } -function toggleRemote() +function setRemoteVisible( state ) { - elements.remote.toggle(); + // elements.remote.toggle(); + state ? elements.remote.fadeIn() : elements.remote.fadeOut(); } function togglePower() @@ -311,13 +317,24 @@ function sendData( name, data ) { } // UI stuff +var scale = 1.0 + elements.closeUiBtn.click( function() { - toggleUISettings(); + setUISettingsVisible( false, true ); } ) -function toggleUISettings() +elements.scale.increase.click( function() { + changeScale( 0.05 ); +} ) + +elements.scale.decrease.click( function() { + changeScale( -0.05 ); +} ) + +function setUISettingsVisible( state, remote ) { - elements.uiSettingsBox.fadeToggle(); + state ? elements.uiSettingsBox.fadeIn() : elements.uiSettingsBox.fadeOut(); + if ( remote ) { setRemoteVisible( !state ); } } function hideUISettings() @@ -327,11 +344,26 @@ function hideUISettings() } } +function changeScale( amount ) +{ + scale = clamp( scale + amount, 0.25, 2.5 ); + elements.radar.css( "transform", "scale(" + scale + ")" ); + elements.scale.display.html( scale.toFixed( 2 ) + "x" ); +} + +function clamp( num, min, max ) +{ + return num < min ? min : num > max ? max : num; +} + elements.uiSettingsBox.find( "button" ).each( function( i, obj ) { - if ( $( this ).attr( "data-value" ) ) { + if ( $( this ).attr( "data-value" ) && $( this ).attr( "data-scale" ) ) { $( this ).click( function() { let align = $( this ).data( "value" ); + let origin = $( this ).data( "scale" ); + elements.radar.removeClass().addClass( align ); + elements.radar.css( "transform-origin", origin ); } ) } } ); @@ -355,16 +387,16 @@ document.onkeyup = function( event ) if ( event.keyCode == 27 ) { sendData( "closeRemote", null ); - toggleRemote(); - hideUISettings(); + setRemoteVisible( false ); + setUISettingsVisible( false, false ); } } window.oncontextmenu = function() { sendData( "closeRemote", null ); - toggleRemote(); - hideUISettings(); + setRemoteVisible( false ); + setUISettingsVisible( false, false ); } // The main event listener, this is what the NUI messages sent by the LUA side arrive at, they are @@ -378,13 +410,10 @@ window.addEventListener( "message", function( event ) { resourceName = item.pathName break; case "openRemote": - toggleRemote(); + setRemoteVisible( true ); break; case "toggleDisplay": - toggleRadar( item.state ); - break; - case "hideDisplay": - item.state ? elements.radar.fadeOut() : elements.radar.fadeIn(); + setRadarVisible( item.state ); break; case "radarPower": radarPower( item.state ); @@ -396,7 +425,6 @@ window.addEventListener( "message", function( event ) { updateDisplays( item.speed, item.antennas ); break; case "antennaXmit": - // setAntennaXmit( item.ant, item.on, item.on ? item.mode : 0 ); setAntennaXmit( item.ant, item.on ); break; case "antennaMode":