brakeconf/gui/index.html

425 lines
13 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!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="/webui.js"></script>
<script src="/app.js"></script>
</head>
<body class="d-flex h-100 text-bg-dark">
<div class="d-flex h-100 mx-auto p-3">
<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>
<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">
<p class="text-center">Порт для подключения</p>
<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">
<!-- Статус режимов -->
<!--
Отображает в реальном времени состоянии активации
аварийного режима и реверса
-->
<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>
<!-- Активация аварийного режима и реверса -->
<p class="text-center">Активация режимов</p>
<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 -->
<p class="text-center">Переключатели зон</p>
<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>
<button class="btn btn-warning" id="option_zone_reset">СБРОС</button>
</div>
<!-- command sender -->
<p class="text-center">Отправить команду</p>
<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>
<!-- Окно `Настройка` -->
<div id="appWindowSettings" class="d-none flex-fill card shadow p-3">
<div class="form-check form-switch">
<input
class="form-check-input"
type="checkbox"
id="setting_buzzer"
checked />
<label class="form-check-label" for="setting_buzzer">Включить зуммер</label>
</div>
<div class="form-check form-switch">
<input
class="form-check-input"
type="checkbox"
id="setting_zones_by_analog"
checked />
<label class="form-check-label" for="setting_zones_by_analog">
Активация зоны аналоговым методом
</label>
</div>
<hr />
<p class="text-center">Настройка времени работы штока актуатора</p>
<div class="row mb-1">
<label for="setting_rod_full_push" class="col-6 col-form-label">
Полное освобождение педали
</label>
<div class="col-6">
<input
type="number"
class="form-control"
id="setting_rod_full_push"
min="200"
max="4000" />
</div>
</div>
<div class="row mb-1">
<label for="setting_rod_pre_brake" class="col-6 col-form-label">
Предварительное торможение
</label>
<div class="col-6">
<input
type="number"
class="form-control"
id="setting_rod_pre_brake"
min="200"
max="4000" />
</div>
</div>
<div class="row mb-1">
<label for="setting_rod_full_brake" class="col-6 col-form-label">
Полное торможение
</label>
<div class="col-6">
<input
type="number"
class="form-control"
id="setting_rod_full_brake"
min="200"
max="4000" />
</div>
</div>
<hr />
<div class="d-grid gap-2">
<button class="btn btn-primary">Записать параметры</button>
<button class="btn btn-outline-success">Прочитать параметры</button>
</div>
</div>
<!-- FirmwareUpdate -->
<div id="appWindowFirmwareUpdate" class="d-none flex-fill card shadow p-3">
<div class="alert alert-danger text-center">В разработке</div>
</div>
<!-- Log -->
<div id="appWindowLog" class="d-none flex-fill card shadow p-3">
<p class="text-center">Лог работы программы</p>
<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>
</div>
</div>
<!-- About -->
<div id="appWindowAbout" class="d-none flex-fill card shadow p-3">
<p class="text-center">О программе</p>
<div class="alert alert-info text-center">
Программа для настройки
<span class="fw-bold">модуля торможения</span>
</div>
<div class="alert alert-warning text-center">
Разработано специально для
<span class="fw-bold">НК-Сервис</span>
</div>
<div class="alert alert-dark text-center">2023 by Alexander Popov</div>
</div>
</main>
</div>
</body>
</html>