Как стать автором
Обновить

Микро веб-приложение для КПП

Время на прочтение 4 мин
Количество просмотров 3.2K


Под КПП понимается Контрольно Пропускной Пункт. А приложение было написано между делом для самого себя с целью облегчить себе участь оказавшись на КПП со списком в ~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
Только зарегистрированные пользователи могут участвовать в опросе. Войдите, пожалуйста.
На сколько эта статья бесполезна?
14.77% Мне была полезна 26
17.61% На 100% бесполезна 31
67.61% На 146% бесполезна 119
Проголосовали 176 пользователей. Воздержались 129 пользователей.
Теги:
Хабы:
Если эта публикация вас вдохновила и вы хотите поддержать автора — не стесняйтесь нажать на кнопку
-4
Комментарии 4
Комментарии Комментарии 4

Публикации

Истории

Ближайшие события

Московский туристический хакатон
Дата 23 марта – 7 апреля
Место
Москва Онлайн
Геймтон «DatsEdenSpace» от DatsTeam
Дата 5 – 6 апреля
Время 17:00 – 20:00
Место
Онлайн
PG Bootcamp 2024
Дата 16 апреля
Время 09:30 – 21:00
Место
Минск Онлайн
EvaConf 2024
Дата 16 апреля
Время 11:00 – 16:00
Место
Москва Онлайн