mirror of
https://github.com/Michatec/wk_wars2x.git
synced 2026-04-01 00:16:27 +02:00
Plate reader locking and BOLO, config change, slight JS cleanup
This commit is contained in:
Dan
101
nui/radar.css
101
nui/radar.css
@@ -741,6 +741,97 @@ button:focus { outline: none; }
|
||||
color: rgb( 100, 100, 100 );
|
||||
}
|
||||
|
||||
#plateReaderBox {
|
||||
width: 225px;
|
||||
height: 300px;
|
||||
|
||||
position: absolute;
|
||||
margin: auto;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
|
||||
/* background-color: rgb( 50, 54, 45 ); */
|
||||
background: linear-gradient( to bottom, rgb( 70, 70, 70 ), rgb( 45, 45, 45 ) );
|
||||
border: 3px solid rgb( 0, 0, 0 );
|
||||
|
||||
/* for testing */
|
||||
z-index: 100;
|
||||
}
|
||||
#plateReaderBox .title {
|
||||
text-align: center;
|
||||
font-size: 20px;
|
||||
padding: 5px 0;
|
||||
margin: 0 auto;
|
||||
color: rgb( 255, 255, 255 );
|
||||
background-color: rgb( 20, 22, 18 );
|
||||
}
|
||||
|
||||
#plateReaderBox .header {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#plateReaderBox .container {
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
|
||||
display: grid;
|
||||
grid-template-rows: 60px 70px 60px;
|
||||
align-items: center;
|
||||
justify-items: center;
|
||||
}
|
||||
#plateReaderBox .container .btn {
|
||||
width: 140px;
|
||||
height: 35px;
|
||||
border-radius: 10px;
|
||||
font-size: 16px;
|
||||
border: none;
|
||||
}
|
||||
#plateReaderBox .container .btn:hover {
|
||||
background-color: rgb( 255, 255, 255 );
|
||||
}
|
||||
|
||||
#plateReaderBox .container .btn:active {
|
||||
background-color: rgb( 190, 190, 190 );
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#plateReaderBox .container .plate_input {
|
||||
width: 75%;
|
||||
height: 50px;
|
||||
font-family: "Plate-Font";
|
||||
text-align: center;
|
||||
font-size: 38px;
|
||||
padding: 0;
|
||||
padding-bottom: 15px;
|
||||
margin-bottom: -15px;
|
||||
border: 3px solid rgb( 0, 0, 0 );
|
||||
}
|
||||
|
||||
#plateReaderBox .close {
|
||||
width: 80px;
|
||||
height: 20px;
|
||||
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 10px;
|
||||
margin: auto;
|
||||
|
||||
border-radius: 10px;
|
||||
border: none;
|
||||
background-color: rgb( 225, 225, 225 );
|
||||
}
|
||||
#plateReaderBox .close:hover {
|
||||
background-color: rgb( 255, 255, 255 );
|
||||
}
|
||||
|
||||
#plateReaderBox .close:active {
|
||||
background-color: rgb( 190, 190, 190 );
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#uiSettingsBox {
|
||||
width: 250px;
|
||||
height: 375px;
|
||||
@@ -752,14 +843,8 @@ button:focus { outline: none; }
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
|
||||
/* background-color: rgb( 0, 255, 55 ); */
|
||||
/* background-color: transparent; */
|
||||
background-color: rgb( 50, 54, 45 );
|
||||
|
||||
/* display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 10px; */
|
||||
|
||||
z-index: 3;
|
||||
}
|
||||
#uiSettingsBox .title {
|
||||
@@ -771,14 +856,14 @@ button:focus { outline: none; }
|
||||
background-color: rgb( 20, 22, 18 );
|
||||
}
|
||||
|
||||
#uiSettingsBox .radar_settings {
|
||||
#uiSettingsBox .header {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#uiSettingsBox .scaling_container {
|
||||
height: 225px;
|
||||
display: grid;
|
||||
grid-template-rows: 1fr 1fr;
|
||||
grid-template-rows: 1fr 1fr 1fr;
|
||||
}
|
||||
|
||||
#uiSettingsBox .scaling {
|
||||
|
||||
@@ -114,7 +114,7 @@
|
||||
</div>
|
||||
|
||||
<div id="rc">
|
||||
<button id="toggleDisplay" data-nuitype="toggleDisplay" class="rounded_btn toggle_display">TOGGLE DISPLAY</button>
|
||||
<button id="toggleDisplay" data-nuitype="toggleRadarDisplay" class="rounded_btn toggle_display">TOGGLE DISPLAY</button>
|
||||
|
||||
<p class="label">FRONT ANTENNA</p>
|
||||
|
||||
@@ -196,14 +196,30 @@
|
||||
</div>
|
||||
|
||||
<div class="labels">
|
||||
<p>LOCKED</p>
|
||||
<p>LOCKED</p>
|
||||
<p id="frontPlateLock">LOCKED</p>
|
||||
<p id="rearPlateLock">LOCKED</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="plateReaderBox">
|
||||
<div class="header">
|
||||
<p class="title">Plate Reader</p>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<button id="togglePlateReader" data-nuitype="togglePlateReaderDisplay" class="btn">Toggle Display</button>
|
||||
|
||||
<input id="boloText" type="text" maxlength="8" placeholder="12ABC345" onkeypress="checkPlateInput(event)" class="plate_input"/>
|
||||
|
||||
<button id="setBoloPlate" class="btn">Set BOLO Plate</button>
|
||||
</div>
|
||||
|
||||
<button id="closePlateReaderSettings" class="close">CLOSE</button>
|
||||
</div>
|
||||
|
||||
<div id="uiSettingsBox">
|
||||
<div class="radar_settings">
|
||||
<div class="header">
|
||||
<p class="title">UI Settings</p>
|
||||
</div>
|
||||
|
||||
|
||||
95
nui/radar.js
95
nui/radar.js
@@ -50,12 +50,18 @@ const elements =
|
||||
remote: $( "#rc" ),
|
||||
plateReader: $( "#plateReaderFrame" ),
|
||||
|
||||
toggleDisplay: $( "#toggleDisplay" ),
|
||||
// toggleDisplay: $( "#toggleDisplay" ),
|
||||
pwrBtn: $( "#pwrBtn" ),
|
||||
|
||||
uiSettingsBtn: $( "#uiSettings" ),
|
||||
uiSettingsBox: $( "#uiSettingsBox" ),
|
||||
closeUiBtn: $( "#closeUiSettings" ),
|
||||
closeUiBtn: $( "#closeUiSettings" ),
|
||||
|
||||
plateReaderBtn: $( "#plateReaderBtn" ),
|
||||
plateReaderBox: $( "#plateReaderBox" ),
|
||||
boloText: $( "#boloText" ),
|
||||
setBoloBtn: $( "#setBoloPlate" ),
|
||||
closePrBtn: $( "#closePlateReaderSettings" ),
|
||||
|
||||
radarScaling: {
|
||||
increase: $( "#radarIncreaseScale" ),
|
||||
@@ -80,14 +86,16 @@ const elements =
|
||||
text: $( "#frontPlateText" ),
|
||||
fill: $( "#frontPlateTextFill" ),
|
||||
lolite: $( "#frontPlateTextLolite" ),
|
||||
img: $( "#frontPlate" )
|
||||
img: $( "#frontPlate" ),
|
||||
lock: $( "#frontPlateLock" )
|
||||
},
|
||||
|
||||
rear: {
|
||||
text: $( "#rearPlateText" ),
|
||||
fill: $( "#rearPlateTextFill" ),
|
||||
lolite: $( "#rearPlateTextLolite" ),
|
||||
img: $( "#rearPlate" )
|
||||
img: $( "#rearPlate" ),
|
||||
lock: $( "#rearPlateLock" )
|
||||
}
|
||||
},
|
||||
|
||||
@@ -171,12 +179,17 @@ const dirs =
|
||||
------------------------------------------------------------------------------------*/
|
||||
elements.radar.hide();
|
||||
elements.remote.hide();
|
||||
// elements.plateReader.hide();
|
||||
elements.plateReader.hide();
|
||||
elements.plateReaderBox.hide();
|
||||
elements.uiSettingsBox.hide();
|
||||
elements.keyLock.label.hide();
|
||||
|
||||
elements.uiSettingsBtn.click( function() {
|
||||
setUISettingsVisible( true, true );
|
||||
setEleVisible( elements.uiSettingsBox, true );
|
||||
} )
|
||||
|
||||
elements.plateReaderBtn.click( function() {
|
||||
setEleVisible( elements.plateReaderBox, true );
|
||||
} )
|
||||
|
||||
elements.pwrBtn.click( function() {
|
||||
@@ -187,19 +200,9 @@ elements.pwrBtn.click( function() {
|
||||
/*------------------------------------------------------------------------------------
|
||||
Setters
|
||||
------------------------------------------------------------------------------------*/
|
||||
function setRadarVisible( state )
|
||||
function setEleVisible( ele, state )
|
||||
{
|
||||
state ? elements.radar.fadeIn() : elements.radar.fadeOut();
|
||||
}
|
||||
|
||||
function setRemoteVisible( state )
|
||||
{
|
||||
state ? elements.remote.fadeIn() : elements.remote.fadeOut();
|
||||
}
|
||||
|
||||
function setPlateReaderVisible( state )
|
||||
{
|
||||
state ? elements.plateReader.fadeIn() : elements.plateReader.fadeOut();
|
||||
state ? ele.fadeIn() : ele.fadeOut();
|
||||
}
|
||||
|
||||
function setLight( ant, cat, item, state )
|
||||
@@ -251,6 +254,17 @@ function setAntennaDirs( ant, dir, fastDir )
|
||||
setLight( ant, "dirs", "bwdFast", fastDir == dirs.away );
|
||||
}
|
||||
|
||||
function setPlateLock( cam, state )
|
||||
{
|
||||
let obj = elements.plates[cam].lock;
|
||||
|
||||
if ( state ) {
|
||||
obj.addClass( "active" );
|
||||
} else {
|
||||
obj.removeClass( "active" );
|
||||
}
|
||||
}
|
||||
|
||||
function setPlate( cam, plate, index )
|
||||
{
|
||||
// Get the plate items
|
||||
@@ -516,6 +530,20 @@ function loadUiSettings( data )
|
||||
elements.safezoneSlider.trigger( "input" );
|
||||
}
|
||||
|
||||
elements.setBoloBtn.click( function() {
|
||||
let plate = elements.boloText.val();
|
||||
sendData( "setBoloPlate", plate );
|
||||
} )
|
||||
|
||||
function checkPlateInput( event )
|
||||
{
|
||||
let valid = /[A-Z0-9"?!£$%^&*()+\=\-_\[\]\{\};:'@#~,<.>/?|\\ ]/g.test( event.key );
|
||||
|
||||
if ( !valid ) {
|
||||
event.preventDefault();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*------------------------------------------------------------------------------------
|
||||
UI scaling and positioning
|
||||
@@ -538,7 +566,11 @@ var safezone = 0;
|
||||
|
||||
// Close the UI settings window when the 'Close' button is pressed
|
||||
elements.closeUiBtn.click( function() {
|
||||
setUISettingsVisible( false );
|
||||
setEleVisible( elements.uiSettingsBox, false );
|
||||
} )
|
||||
|
||||
elements.closePrBtn.click( function() {
|
||||
setEleVisible( elements.plateReaderBox, false );
|
||||
} )
|
||||
|
||||
// Set the remote scale buttons to change the remote's scale
|
||||
@@ -695,11 +727,6 @@ function getOffset( offset, x, y )
|
||||
]
|
||||
}
|
||||
|
||||
function setUISettingsVisible( state )
|
||||
{
|
||||
state ? elements.uiSettingsBox.fadeIn() : elements.uiSettingsBox.fadeOut();
|
||||
}
|
||||
|
||||
function hideUISettings()
|
||||
{
|
||||
if ( !elements.uiSettingsBox.is( ":hidden" ) ) {
|
||||
@@ -743,7 +770,8 @@ function clamp( num, min, max )
|
||||
Button click event assigning
|
||||
------------------------------------------------------------------------------------*/
|
||||
// This runs when the JS file is loaded, loops through all of the remote buttons and assigns them an onclick function
|
||||
elements.remote.find( "button" ).each( function( i, obj ) {
|
||||
// elements.remote.find( "button" ).each( function( i, obj ) {
|
||||
$( "body" ).find( "button" ).each( function( i, obj ) {
|
||||
if ( $( this ).attr( "data-nuitype" ) ) {
|
||||
$( this ).click( function() {
|
||||
let type = $( this ).data( "nuitype" );
|
||||
@@ -762,8 +790,9 @@ elements.remote.find( "button" ).each( function( i, obj ) {
|
||||
function closeRemote()
|
||||
{
|
||||
sendData( "closeRemote", null );
|
||||
setRemoteVisible( false );
|
||||
setUISettingsVisible( false );
|
||||
|
||||
setEleVisible( elements.remote, false );
|
||||
setEleVisible( elements.uiSettingsBox, false );
|
||||
|
||||
sendSaveData();
|
||||
}
|
||||
@@ -786,7 +815,7 @@ $( document ).contextmenu( function() {
|
||||
------------------------------------------------------------------------------------*/
|
||||
window.addEventListener( "message", function( event ) {
|
||||
var item = event.data;
|
||||
var type = event.data._type;
|
||||
var type = event.data._type;
|
||||
|
||||
switch ( type ) {
|
||||
case "updatePathName":
|
||||
@@ -796,11 +825,11 @@ window.addEventListener( "message", function( event ) {
|
||||
loadUiSettings( item.data );
|
||||
break;
|
||||
case "openRemote":
|
||||
setRemoteVisible( true );
|
||||
setEleVisible( elements.remote, true );
|
||||
setUiHasBeenEdited( false );
|
||||
break;
|
||||
case "setRadarDisplayState":
|
||||
setRadarVisible( item.state );
|
||||
setEleVisible( elements.radar, item.state );
|
||||
break;
|
||||
case "radarPower":
|
||||
radarPower( item.state );
|
||||
@@ -838,9 +867,15 @@ window.addEventListener( "message", function( event ) {
|
||||
case "displayKeyLock":
|
||||
displayKeyLock( item.state );
|
||||
break;
|
||||
case "setReaderDisplayState":
|
||||
setEleVisible( elements.plateReader, item.state );
|
||||
break;
|
||||
case "changePlate":
|
||||
setPlate( item.cam, item.plate, item.index );
|
||||
break;
|
||||
case "lockPlate":
|
||||
setPlateLock( item.cam, item.state );
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user