Под КПП понимается Контрольно Пропускной Пункт. А приложение было написано между делом для самого себя с целью облегчить себе участь оказавшись на КПП со списком в ~200 автомобильных номеров. Приложение работает на в любом браузере в локальной сети или в Интернетах и просто показывает информацию о том есть ли данный номерной знак в списке разрешенных для въезда на территорию или нет. И ко всем прочему, если номер найден, то показывает сам номерной знак.
Само приложение не является пределом совершенства и ни на что не претендует, оно выложено на GitHub и может изменяться и дополняться кем и когда угодно. Сделал его в первую очередь для себя и решил поделиться им с общественностью — может быть кому-нибудь пригодиться.
Это приложение настолько простое, что его мог бы написать кто угодно за 2 минуты, а то и меньше. Хотелось бы применить куда более интересное решение с использованием OpenCV, хотя в эту сторону я буду смотреть при наличии удобно установленной камеры при въезде, а сейчас пока нет такой возможности.
Вот собственно само микро веб-приложение:
<!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>
Приложение одностраничное html5 страница с небольшим js скриптом выполняющим поиск и отображение найденной информации. В роли базы данных используется json-файл с простой структурой:
{
"numbers":
[
{
"number": "111",
"prefix": "A",
"suffix": "AA",
"region": "99"
},
{
"number": "111",
"prefix": "A",
"suffix": "AB",
"region": "99"
}
]
}
Когда еще только разрабатывал, то стоял выбор — формировать html-код, отображающий госномер или же показывать готовую картинку, пока выбрал готовую картинку, но конечно можно формировать номер для отображения на лету с использованием HTML и CSS, если что, пишите, доработаю этот момент.
Собственно исходники, для тех кто захочет забрать это себе: GitHub
Только зарегистрированные пользователи могут участвовать в опросе. Войдите, пожалуйста.
Комментарии (4)
paul_155
25.05.2015 01:15давайте подумаем как сделать чтобы оно и номер распознавало.
какое ж оно мини с jquery? без него никак что ли?
ArsenBespalov Автор
25.05.2015 06:51Чтобы номер распознавало мне нужен источник изображения — камера или кадр с камеры, у меня пока такого нет, но задача стоит в планах.
Можно кстати попробовать без jQuery сделать, просто с jQuery было проще пареной репы, но можно конечно переделать, возьму во внимание.
Ezhyg
«На 145% бесполезна»
146 же :)
ArsenBespalov Автор
Исправил. Спасибо ;)