BOLO hits now make the plate flash for 3 seconds

This commit is contained in:
Dan
2020-02-22 11:21:42 +00:00
parent 16c59802fc
commit ab479eb3f3
3 changed files with 28 additions and 9 deletions

View File

@@ -719,6 +719,16 @@ button:focus { outline: none; }
color: rgb( 100, 100, 100 );
}
.plate_hit {
animation: plate_flash linear 0.75s infinite;
}
@keyframes plate_flash {
0% { opacity: 1.0; }
50% { opacity: 0.0; }
100% { opacity: 1.0; }
}
#plateReaderBox {
width: 225px;
height: 300px;

View File

@@ -172,8 +172,8 @@
</div>
<div class="plates">
<div class="plate_container">
<img id="frontPlate" class="plate" src="images/plates/0.png">
<div id="frontPlate" class="plate_container">
<img id="frontPlateImg" class="plate" src="images/plates/0.png">
<div id="frontPlateText" class="text_container">
<p id="frontPlateTextFill" class="plate_blue"></p>
@@ -183,8 +183,8 @@
</div>
</div>
<div class="plate_container">
<img id="rearPlate" class="plate" src="images/plates/0.png">
<div id="rearPlate" class="plate_container">
<img id="rearPlateImg" class="plate" src="images/plates/0.png">
<div id="rearPlateText" class="text_container">
<p id="rearPlateTextFill" class="plate_blue"></p>

View File

@@ -92,18 +92,20 @@ const elements =
plates: {
front: {
plate: $( "#frontPlate" ),
text: $( "#frontPlateText" ),
fill: $( "#frontPlateTextFill" ),
lolite: $( "#frontPlateTextLolite" ),
img: $( "#frontPlate" ),
img: $( "#frontPlateImg" ),
lock: $( "#frontPlateLock" )
},
rear: {
plate: $( "#rearPlate" ),
text: $( "#rearPlateText" ),
fill: $( "#rearPlateTextFill" ),
lolite: $( "#rearPlateTextLolite" ),
img: $( "#rearPlate" ),
img: $( "#rearPlateImg" ),
lock: $( "#rearPlateLock" )
}
},
@@ -305,13 +307,20 @@ function setAntennaDirs( ant, dir, fastDir )
function setPlateLock( cam, state )
{
// Get the plate reader lock object
let obj = elements.plates[cam].lock;
let obj = elements.plates[cam];
// Add or remove the active class
if ( state ) {
obj.addClass( "active" );
obj.lock.addClass( "active" );
// Make the hit plate flash for 3 seconds, acts as a visual aid
obj.plate.addClass( "plate_hit" );
setTimeout( function() {
obj.plate.removeClass( "plate_hit" );
}, 3000 );
} else {
obj.removeClass( "active" );
obj.lock.removeClass( "active" );
}
}