2023-08-29 22:33:32 +03:00
|
|
|
|
<!doctype html>
|
|
|
|
|
|
<html lang="ru" class="h-100" data-bs-theme="light">
|
|
|
|
|
|
<head>
|
|
|
|
|
|
<meta charset="utf-8" />
|
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
|
|
|
|
<title>Настройка модуля торможения</title>
|
|
|
|
|
|
<link rel="stylesheet" type="text/css" href="bootstrap-v5.3.1.min.css" />
|
|
|
|
|
|
<link rel="stylesheet" type="text/css" href="ubuntu-font.css" />
|
|
|
|
|
|
<link rel="stylesheet" type="text/css" href="styles.css" />
|
|
|
|
|
|
<script src="app.js"></script>
|
|
|
|
|
|
<script src="/webui.js"></script>
|
|
|
|
|
|
</head>
|
|
|
|
|
|
<body class="d-flex h-100 text-bg-dark">
|
|
|
|
|
|
<div class="d-flex h-100 mx-auto p-3">
|
2023-08-29 22:51:28 +03:00
|
|
|
|
<nav class="d-flex flex-column flex-shrink-0 p-3 text-bg-dark" style="width: 280px">
|
|
|
|
|
|
<p class="text-center fw-bold m-0">Настройка модуля<br />торможения</p>
|
2023-08-29 22:33:32 +03:00
|
|
|
|
<hr />
|
|
|
|
|
|
<ul class="nav nav-pills flex-column mb-auto">
|
|
|
|
|
|
<li class="nav-item">
|
|
|
|
|
|
<a
|
|
|
|
|
|
id="btnWindowDevice"
|
|
|
|
|
|
class="nav-link text-reset active link-pointer"
|
|
|
|
|
|
aria-current="page">
|
|
|
|
|
|
<svg
|
|
|
|
|
|
class="bi pe-none me-2"
|
|
|
|
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
|
|
|
|
width="24"
|
|
|
|
|
|
height="24"
|
|
|
|
|
|
viewBox="0 0 24 24"
|
|
|
|
|
|
fill="none"
|
|
|
|
|
|
stroke="currentColor"
|
|
|
|
|
|
stroke-width="2"
|
|
|
|
|
|
stroke-linecap="round"
|
|
|
|
|
|
stroke-linejoin="round">
|
|
|
|
|
|
<line x1="22" y1="12" x2="2" y2="12" />
|
|
|
|
|
|
<path
|
|
|
|
|
|
d="M5.45 5.11L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z" />
|
|
|
|
|
|
<line x1="6" y1="16" x2="6.01" y2="16" />
|
|
|
|
|
|
<line x1="10" y1="16" x2="10.01" y2="16" />
|
|
|
|
|
|
</svg>
|
|
|
|
|
|
Устройство
|
|
|
|
|
|
</a>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
<li class="nav-item">
|
|
|
|
|
|
<a
|
|
|
|
|
|
id="btnWindowTesting"
|
|
|
|
|
|
class="nav-link text-reset link-pointer"
|
|
|
|
|
|
aria-current="page">
|
|
|
|
|
|
<svg
|
|
|
|
|
|
class="bi pe-none me-2"
|
|
|
|
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
|
|
|
|
width="24"
|
|
|
|
|
|
height="24"
|
|
|
|
|
|
viewBox="0 0 24 24"
|
|
|
|
|
|
fill="none"
|
|
|
|
|
|
stroke="currentColor"
|
|
|
|
|
|
stroke-width="2"
|
|
|
|
|
|
stroke-linecap="round"
|
|
|
|
|
|
stroke-linejoin="round">
|
|
|
|
|
|
<line x1="4" y1="21" x2="4" y2="14" />
|
|
|
|
|
|
<line x1="4" y1="10" x2="4" y2="3" />
|
|
|
|
|
|
<line x1="12" y1="21" x2="12" y2="12" />
|
|
|
|
|
|
<line x1="12" y1="8" x2="12" y2="3" />
|
|
|
|
|
|
<line x1="20" y1="21" x2="20" y2="16" />
|
|
|
|
|
|
<line x1="20" y1="12" x2="20" y2="3" />
|
|
|
|
|
|
<line x1="1" y1="14" x2="7" y2="14" />
|
|
|
|
|
|
<line x1="9" y1="8" x2="15" y2="8" />
|
|
|
|
|
|
<line x1="17" y1="16" x2="23" y2="16" />
|
|
|
|
|
|
</svg>
|
|
|
|
|
|
Тестирование
|
|
|
|
|
|
</a>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
<li class="nav-item">
|
|
|
|
|
|
<a
|
|
|
|
|
|
id="btnWindowSettings"
|
|
|
|
|
|
class="nav-link text-reset link-pointer"
|
|
|
|
|
|
aria-current="page">
|
|
|
|
|
|
<svg
|
|
|
|
|
|
class="bi pe-none me-2"
|
|
|
|
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
|
|
|
|
width="24"
|
|
|
|
|
|
height="24"
|
|
|
|
|
|
viewBox="0 0 24 24"
|
|
|
|
|
|
fill="none"
|
|
|
|
|
|
stroke="currentColor"
|
|
|
|
|
|
stroke-width="2"
|
|
|
|
|
|
stroke-linecap="round"
|
|
|
|
|
|
stroke-linejoin="round">
|
|
|
|
|
|
<path
|
|
|
|
|
|
d="M18 3a3 3 0 0 0-3 3v12a3 3 0 0 0 3 3 3 3 0 0 0 3-3 3 3 0 0 0-3-3H6a3 3 0 0 0-3 3 3 3 0 0 0 3 3 3 3 0 0 0 3-3V6a3 3 0 0 0-3-3 3 3 0 0 0-3 3 3 3 0 0 0 3 3h12a3 3 0 0 0 3-3 3 3 0 0 0-3-3z" />
|
|
|
|
|
|
</svg>
|
|
|
|
|
|
Настройка
|
|
|
|
|
|
</a>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
<li class="nav-item">
|
|
|
|
|
|
<a
|
|
|
|
|
|
id="btnWindowFirmwareUpdate"
|
|
|
|
|
|
class="nav-link text-reset link-pointer"
|
|
|
|
|
|
aria-current="page">
|
|
|
|
|
|
<svg
|
|
|
|
|
|
class="bi pe-none me-2"
|
|
|
|
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
|
|
|
|
width="24"
|
|
|
|
|
|
height="24"
|
|
|
|
|
|
viewBox="0 0 24 24"
|
|
|
|
|
|
fill="none"
|
|
|
|
|
|
stroke="currentColor"
|
|
|
|
|
|
stroke-width="2"
|
|
|
|
|
|
stroke-linecap="round"
|
|
|
|
|
|
stroke-linejoin="round">
|
|
|
|
|
|
<rect x="4" y="4" width="16" height="16" rx="2" ry="2" />
|
|
|
|
|
|
<rect x="9" y="9" width="6" height="6" />
|
|
|
|
|
|
<line x1="9" y1="1" x2="9" y2="4" />
|
|
|
|
|
|
<line x1="15" y1="1" x2="15" y2="4" />
|
|
|
|
|
|
<line x1="9" y1="20" x2="9" y2="23" />
|
|
|
|
|
|
<line x1="15" y1="20" x2="15" y2="23" />
|
|
|
|
|
|
<line x1="20" y1="9" x2="23" y2="9" />
|
|
|
|
|
|
<line x1="20" y1="14" x2="23" y2="14" />
|
|
|
|
|
|
<line x1="1" y1="9" x2="4" y2="9" />
|
|
|
|
|
|
<line x1="1" y1="14" x2="4" y2="14" />
|
|
|
|
|
|
</svg>
|
|
|
|
|
|
|
|
|
|
|
|
Обновление прошивки
|
|
|
|
|
|
</a>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
<li>
|
|
|
|
|
|
<a
|
|
|
|
|
|
id="btnWindowLog"
|
|
|
|
|
|
class="nav-link text-reset link-pointer"
|
|
|
|
|
|
aria-current="page">
|
|
|
|
|
|
<svg
|
|
|
|
|
|
class="bi pe-none me-2"
|
|
|
|
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
|
|
|
|
width="24"
|
|
|
|
|
|
height="24"
|
|
|
|
|
|
viewBox="0 0 24 24"
|
|
|
|
|
|
fill="none"
|
|
|
|
|
|
stroke="currentColor"
|
|
|
|
|
|
stroke-width="2"
|
|
|
|
|
|
stroke-linecap="round"
|
|
|
|
|
|
stroke-linejoin="round">
|
|
|
|
|
|
<line x1="21" y1="10" x2="3" y2="10" />
|
|
|
|
|
|
<line x1="21" y1="6" x2="3" y2="6" />
|
|
|
|
|
|
<line x1="21" y1="14" x2="3" y2="14" />
|
|
|
|
|
|
<line x1="21" y1="18" x2="3" y2="18" />
|
|
|
|
|
|
</svg>
|
|
|
|
|
|
Лог
|
|
|
|
|
|
</a>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
<li class="nav-item">
|
|
|
|
|
|
<a
|
|
|
|
|
|
id="btnWindowAbout"
|
|
|
|
|
|
class="nav-link text-reset link-pointer"
|
|
|
|
|
|
aria-current="page">
|
|
|
|
|
|
<svg
|
|
|
|
|
|
class="bi pe-none me-2"
|
|
|
|
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
|
|
|
|
width="24"
|
|
|
|
|
|
height="24"
|
|
|
|
|
|
viewBox="0 0 24 24"
|
|
|
|
|
|
fill="none"
|
|
|
|
|
|
stroke="currentColor"
|
|
|
|
|
|
stroke-width="2"
|
|
|
|
|
|
stroke-linecap="round"
|
|
|
|
|
|
stroke-linejoin="round">
|
|
|
|
|
|
<circle cx="12" cy="12" r="10" />
|
|
|
|
|
|
<line x1="12" y1="8" x2="12" y2="12" />
|
|
|
|
|
|
<line x1="12" y1="16" x2="12.01" y2="16" />
|
|
|
|
|
|
</svg>
|
|
|
|
|
|
О программе
|
|
|
|
|
|
</a>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
</ul>
|
|
|
|
|
|
<hr />
|
|
|
|
|
|
<div class="btn-group-vertical btn-group-sm">
|
|
|
|
|
|
<button id="btn_theme_switch" class="btn btn-outline-success">
|
|
|
|
|
|
Изменить тему
|
|
|
|
|
|
</button>
|
|
|
|
|
|
<button id="btn_app_close" type="button" class="btn btn-outline-danger">
|
|
|
|
|
|
Закрыть
|
|
|
|
|
|
</button>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<hr />
|
|
|
|
|
|
<p class="text-center m-0">Версия: 1.0.0</p>
|
|
|
|
|
|
</nav>
|
|
|
|
|
|
<main class="d-flex flex-fill" style="width: 600px">
|
|
|
|
|
|
<!-- Device -->
|
|
|
|
|
|
<div id="appWindowDevice" class="flex-fill card shadow p-3">
|
2023-08-29 22:51:28 +03:00
|
|
|
|
<p class="text-center">Порт для подключения</p>
|
2023-08-29 22:33:32 +03:00
|
|
|
|
<div class="input-group mb-3">
|
|
|
|
|
|
<select id="port_selector" class="form-select">
|
|
|
|
|
|
<option value="null" selected>Выберите порт...</option>
|
|
|
|
|
|
</select>
|
|
|
|
|
|
<button id="btn_port_refresh" class="btn btn-primary" type="button">
|
|
|
|
|
|
Обновить
|
|
|
|
|
|
</button>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="d-grid gap-2 col-6 mx-auto">
|
|
|
|
|
|
<button id="btn_device_connect" class="btn btn-primary">
|
|
|
|
|
|
Подключиться
|
|
|
|
|
|
</button>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<hr />
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- Testing -->
|
|
|
|
|
|
<div id="appWindowTesting" class="d-none flex-fill card shadow p-3">
|
2023-09-11 23:51:39 +03:00
|
|
|
|
<!-- Статус режимов -->
|
|
|
|
|
|
<!--
|
|
|
|
|
|
Отображает в реальном времени состоянии активации
|
|
|
|
|
|
аварийного режима и реверса
|
|
|
|
|
|
-->
|
|
|
|
|
|
<p class="text-center">Статус режимов</p>
|
|
|
|
|
|
<div class="mb-3">
|
|
|
|
|
|
<div class="input-group">
|
|
|
|
|
|
<div class="input-group-text rounded-bottom-0">
|
|
|
|
|
|
<input
|
|
|
|
|
|
id="mode_status_emergency"
|
|
|
|
|
|
class="form-check-input mt-0"
|
|
|
|
|
|
type="checkbox"
|
|
|
|
|
|
onclick="return false;" />
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<input
|
|
|
|
|
|
type="text"
|
|
|
|
|
|
class="form-control rounded-bottom-0"
|
|
|
|
|
|
value="Аварийный режим"
|
|
|
|
|
|
readonly />
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="input-group">
|
|
|
|
|
|
<div class="input-group-text border-top-0 rounded-top-0">
|
|
|
|
|
|
<input
|
|
|
|
|
|
id="mode_status_reverse"
|
|
|
|
|
|
class="form-check-input mt-0"
|
|
|
|
|
|
type="checkbox"
|
|
|
|
|
|
onclick="return false;" />
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<input
|
|
|
|
|
|
type="text"
|
|
|
|
|
|
class="form-control border-top-0 rounded-top-0"
|
|
|
|
|
|
value="Реверс"
|
|
|
|
|
|
readonly />
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- Активация аварийного режима и реверса -->
|
2023-08-29 22:51:28 +03:00
|
|
|
|
<p class="text-center">Активация режимов</p>
|
2023-08-29 22:33:32 +03:00
|
|
|
|
<div class="d-flex btn-group mb-3">
|
|
|
|
|
|
<input
|
|
|
|
|
|
type="checkbox"
|
|
|
|
|
|
class="btn-check"
|
|
|
|
|
|
id="check_toggle_emergency"
|
|
|
|
|
|
autocomplete="off" />
|
|
|
|
|
|
<label class="btn btn-outline-danger" for="check_toggle_emergency">
|
|
|
|
|
|
АВАРИЙНЫЙ
|
|
|
|
|
|
</label>
|
|
|
|
|
|
<input
|
|
|
|
|
|
type="checkbox"
|
|
|
|
|
|
class="btn-check"
|
|
|
|
|
|
id="check_toggle_reverse"
|
|
|
|
|
|
autocomplete="off" />
|
|
|
|
|
|
<label class="btn btn-outline-success" for="check_toggle_reverse">
|
|
|
|
|
|
РЕВЕРС
|
|
|
|
|
|
</label>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- zone switchers -->
|
2023-08-29 22:51:28 +03:00
|
|
|
|
<p class="text-center">Переключатели зон</p>
|
2023-08-29 22:33:32 +03:00
|
|
|
|
<div class="d-flex btn-group mb-3">
|
|
|
|
|
|
<input
|
|
|
|
|
|
type="radio"
|
|
|
|
|
|
class="btn-check"
|
|
|
|
|
|
name="option-zone"
|
|
|
|
|
|
id="option_zone_warning"
|
|
|
|
|
|
autocomplete="off" />
|
|
|
|
|
|
<label class="btn btn-outline-primary" for="option_zone_warning">
|
|
|
|
|
|
ПРЕДУПРЕЖДЕНИЕ
|
|
|
|
|
|
</label>
|
|
|
|
|
|
<input
|
|
|
|
|
|
type="radio"
|
|
|
|
|
|
class="btn-check"
|
|
|
|
|
|
name="option-zone"
|
|
|
|
|
|
id="option_zone_alert"
|
|
|
|
|
|
autocomplete="off" />
|
|
|
|
|
|
<label class="btn btn-outline-primary" for="option_zone_alert">
|
|
|
|
|
|
ГОТОВНОСТЬ
|
|
|
|
|
|
</label>
|
|
|
|
|
|
<input
|
|
|
|
|
|
type="radio"
|
|
|
|
|
|
class="btn-check"
|
|
|
|
|
|
name="option-zone"
|
|
|
|
|
|
id="option_zone_danger"
|
|
|
|
|
|
autocomplete="off" />
|
|
|
|
|
|
<label class="btn btn-outline-primary" for="option_zone_danger">
|
|
|
|
|
|
ОПАСНОСТЬ
|
|
|
|
|
|
</label>
|
2023-08-29 22:51:28 +03:00
|
|
|
|
<button class="btn btn-warning" id="option_zone_reset">СБРОС</button>
|
2023-08-29 22:33:32 +03:00
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- command sender -->
|
2023-08-29 22:51:28 +03:00
|
|
|
|
<p class="text-center">Отправить команду</p>
|
2023-08-29 22:33:32 +03:00
|
|
|
|
<div class="input-group mb-3">
|
|
|
|
|
|
<span class="input-group-text">Команда</span>
|
|
|
|
|
|
<input id="input_command" type="text" class="form-control" />
|
|
|
|
|
|
<button id="btn_send_command" class="btn btn-primary">Отправить</button>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- Settings -->
|
|
|
|
|
|
<div id="appWindowSettings" class="d-none flex-fill card shadow p-3">
|
2023-08-29 22:51:28 +03:00
|
|
|
|
<div class="alert alert-danger text-center">В разработке</div>
|
2023-08-29 22:33:32 +03:00
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- FirmwareUpdate -->
|
|
|
|
|
|
<div id="appWindowFirmwareUpdate" class="d-none flex-fill card shadow p-3">
|
2023-08-29 22:51:28 +03:00
|
|
|
|
<div class="alert alert-danger text-center">В разработке</div>
|
2023-08-29 22:33:32 +03:00
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- Log -->
|
|
|
|
|
|
<div id="appWindowLog" class="d-none flex-fill card shadow p-3">
|
2023-08-29 22:51:28 +03:00
|
|
|
|
<p class="text-center">Лог работы программы</p>
|
2023-08-29 22:45:10 +03:00
|
|
|
|
<textarea
|
|
|
|
|
|
id="connection_log_console"
|
|
|
|
|
|
class="form-control h-100 font-monospace bg-dark text-bg-dark"
|
|
|
|
|
|
placeholder="Лог подключения"
|
|
|
|
|
|
autocomplete="off"
|
|
|
|
|
|
readonly></textarea>
|
|
|
|
|
|
<div class="form-check form-switch mt-3">
|
|
|
|
|
|
<input
|
|
|
|
|
|
class="form-check-input"
|
|
|
|
|
|
type="checkbox"
|
|
|
|
|
|
role="switch"
|
|
|
|
|
|
id="sw_connection_log_autoscroll"
|
|
|
|
|
|
checked />
|
|
|
|
|
|
<label class="form-check-label" for="sw_connection_log_autoscroll">
|
|
|
|
|
|
Автоматическая прокрутка
|
|
|
|
|
|
</label>
|
2023-08-29 22:33:32 +03:00
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- About -->
|
|
|
|
|
|
<div id="appWindowAbout" class="d-none flex-fill card shadow p-3">
|
2023-08-29 22:51:28 +03:00
|
|
|
|
<p class="text-center">О программе</p>
|
2023-08-29 22:33:32 +03:00
|
|
|
|
<div class="alert alert-info text-center">
|
|
|
|
|
|
Программа для настройки
|
2023-08-29 22:52:30 +03:00
|
|
|
|
<span class="fw-bold">модуля торможения</span>
|
2023-08-29 22:33:32 +03:00
|
|
|
|
</div>
|
|
|
|
|
|
<div class="alert alert-warning text-center">
|
|
|
|
|
|
Разработано специально для
|
2023-08-29 22:52:30 +03:00
|
|
|
|
<span class="fw-bold">НК-Сервис</span>
|
2023-08-29 22:33:32 +03:00
|
|
|
|
</div>
|
|
|
|
|
|
<div class="alert alert-dark text-center">2023 by Alexander Popov</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</main>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</body>
|
|
|
|
|
|
</html>
|
