Geekly Articles each Day
📜 ⬆️ ⬇️

Micro web application for PPC



A checkpoint is a checkpoint. And the application was written in between cases for himself with the aim of alleviating his fate when he was at the checkpoint with a list of ~ 200 license plates. The application runs on any browser on the local network or on the Internet and simply shows whether the license plate is on the list of allowed to enter the territory or not. And to all other things, if the number is found, then the license plate itself shows.

The application itself is not the limit of perfection and does not pretend to anything, it is posted on GitHub and can be changed and supplemented by anyone anytime. He made it primarily for himself and decided to share it with the public - maybe someone will come in handy.

This application is so simple that anyone could write it in 2 minutes or less. I would like to apply a much more interesting solution using OpenCV, although I’ll look in this direction if there is a conveniently installed camera at the entrance, but now there is no such possibility.
')
Here is the micro web application itself:

<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>    </title> <link rel="stylesheet" href="assets/css/bootstrap.min.css"> <link rel="stylesheet" href="assets/css/cover.css"> </head> <body> <div class="site-wrapper"> <div class="site-wrapper-inner"> <div class="cover-container"> <div class="masthead clearfix"> <div class="inner"> <div class="masthead-brand">  —    </div> <nav> <ul class="nav masthead-nav"> <li class="active"><a href="#."></a></li> </ul> </nav> </div> </div> <div class="inner cover"> <h1 class="cover-heading"> </h1> <p class="lead"> 3  :</p> <div class="form-group"> <div class="row"> <div class="col-xs-2 col-xs-offset-5"> <input type="text" class="form-control input-lg text-center" id="gosNumber" placeholder="123" maxlength="3" autofocus> </div> </div> </div> <div class="row"> <div class="col-xs-12" id="images"> <img src="assets/images/dot.gif" width="400" height="81"> </div> </div> </div> <div class="mastfoot"> <div class="inner"> <p>        <a href="http://arsen.pw/" target="_blank">@ArsenBespalov</a>.</p> </div> </div> </div> </div> </div> <script src="assets/js/jquery-1.11.3.min.js"></script> <script src="assets/js/bootstrap.min.js"></script> <script> $(function () { var gosNumber = (function() { var json = null; $.ajax({ 'async': false, 'global': false, 'url': 'gosNumber.json', 'dataType': 'json', 'success': function (data) { json = data; } }); return json; })(); $('#gosNumber').keyup(function(event) { var $this = $(this) if ($this.val().length == 3) { $this.select(); $('#images').empty(); gosNumber.numbers.forEach(function(entity) { if (entity.number == $this.val()) { $('.cover-heading').text('  '); $('#images').append('<img src="assets/images/auto_numbers/'+entity.prefix+entity.number+entity.suffix+entity.region+'.png"> '); } }); } else { $('.cover-heading').html(' '); $('#images').empty().append('<img src="assets/images/dot.gif" width="400" height="81">'); } }); }); </script> </body> </html>


A one-page application html5 page with a small js script that searches and displays the information found. The json file with a simple structure is used as a database:

 { "numbers": [ { "number": "111", "prefix": "A", "suffix": "AA", "region": "99" }, { "number": "111", "prefix": "A", "suffix": "AB", "region": "99" } ] }


When I was still developing, there was a choice - to generate an html-code displaying the license number or show the finished picture, while I chose the finished picture, but of course you can generate a number to display on the fly using HTML and CSS, if that, write, I will finalize this point .

Actually the source code, for those who want to take it for themselves: GitHub

Source: https://habr.com/ru/post/367177/

More articles:


All Articles