mirror of
https://github.com/ok-home/ota_ws_update.git
synced 2025-11-13 22:03:27 +03:00
new html
This commit is contained in:
ok-home
1
.gitignore
vendored
1
.gitignore
vendored
@@ -19,3 +19,4 @@ example_ota_ws/managed_components/espressif__esp_encrypted_img/test/test.c
|
|||||||
example_ota_ws/managed_components/espressif__esp_encrypted_img/test/certs/test_rsa_private_key.pem
|
example_ota_ws/managed_components/espressif__esp_encrypted_img/test/certs/test_rsa_private_key.pem
|
||||||
example_ota_ws/managed_components/espressif__esp_encrypted_img/tools/esp_enc_img_gen.py
|
example_ota_ws/managed_components/espressif__esp_encrypted_img/tools/esp_enc_img_gen.py
|
||||||
example_ota_ws/dependencies.lock
|
example_ota_ws/dependencies.lock
|
||||||
|
example_ota_ws/.clangd
|
||||||
|
|||||||
@@ -1,9 +1,10 @@
|
|||||||
dependencies:
|
dependencies:
|
||||||
idf:
|
idf:
|
||||||
component_hash: null
|
|
||||||
source:
|
source:
|
||||||
type: idf
|
type: idf
|
||||||
version: 5.2.0
|
version: 5.5.0
|
||||||
manifest_hash: 2ac596d0d5a708817329b21531cbf3574c7c8daaf36dca979b5dd32a78fc2857
|
direct_dependencies:
|
||||||
target: esp32c3
|
- idf
|
||||||
version: 1.0.0
|
manifest_hash: 34aecadf98bf836e73683541d87743fff6a6d5b284a8f8c275b5535a00208c94
|
||||||
|
target: esp32s3
|
||||||
|
version: 2.0.0
|
||||||
|
|||||||
@@ -1,156 +1,534 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
|
|
||||||
<html lang="ru">
|
<html lang="ru">
|
||||||
|
|
||||||
<head>
|
<head>
|
||||||
<title>ОTA UPDATE</title>
|
<title>OTA UPDATE - Обновление прошивки</title>
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
|
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
|
||||||
<style>
|
<style>
|
||||||
.column {
|
/* Стили для SVG иконок */
|
||||||
float: left;
|
.icon {
|
||||||
|
display: inline-block;
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
vertical-align: middle;
|
||||||
|
margin-right: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Основные стили */
|
||||||
|
:root {
|
||||||
|
--primary: #4361ee;
|
||||||
|
--primary-dark: #3a56d4;
|
||||||
|
--secondary: #6c757d;
|
||||||
|
--success: #28a745;
|
||||||
|
--warning: #ffc107;
|
||||||
|
--danger: #dc3545;
|
||||||
|
--info: #17a2b8;
|
||||||
|
--light: #f8f9fa;
|
||||||
|
--dark: #343a40;
|
||||||
|
--background: #f5f7fa;
|
||||||
|
--card-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||||||
|
--transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
background-color: var(--background);
|
||||||
|
color: var(--dark);
|
||||||
|
line-height: 1.6;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
min-height: 100vh;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin-top: 2px;
|
max-width: 800px;
|
||||||
margin-bottom: 2px;
|
margin: 0 auto;
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header {
|
||||||
|
background: linear-gradient(135deg, var(--primary), var(--primary-dark));
|
||||||
|
color: white;
|
||||||
|
padding: 20px;
|
||||||
|
text-align: center;
|
||||||
|
border-radius: 10px;
|
||||||
|
margin-bottom: 25px;
|
||||||
|
box-shadow: var(--card-shadow);
|
||||||
|
}
|
||||||
|
|
||||||
|
.header h1 {
|
||||||
|
font-size: 1.8rem;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header p {
|
||||||
|
font-size: 1rem;
|
||||||
|
opacity: 0.9;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card {
|
||||||
|
background-color: white;
|
||||||
|
border-radius: 10px;
|
||||||
|
padding: 25px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
box-shadow: var(--card-shadow);
|
||||||
|
transition: var(--transition);
|
||||||
|
}
|
||||||
|
|
||||||
|
.card:hover {
|
||||||
|
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn {
|
.btn {
|
||||||
float: left;
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 8px;
|
||||||
|
padding: 14px 20px;
|
||||||
|
border: none;
|
||||||
|
border-radius: 8px;
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 600;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: var(--transition);
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin: 2px;
|
margin-bottom: 12px;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.cl1 {
|
.btn-primary {
|
||||||
float: left;
|
background-color: var(--primary);
|
||||||
width: 100%;
|
|
||||||
margin: 2px;
|
|
||||||
margin-top: 2px;
|
|
||||||
margin-bottom: 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cl01 {
|
|
||||||
float: left;
|
|
||||||
width: 100%;
|
|
||||||
text-align: center;
|
|
||||||
margin-top: 2px;
|
|
||||||
margin-bottom: 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cl02 {
|
|
||||||
float: left;
|
|
||||||
width: 100%;
|
|
||||||
text-align: center;
|
|
||||||
margin-top: 2px;
|
|
||||||
margin-bottom: 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hdr {
|
|
||||||
float: left;
|
|
||||||
width: 100%;
|
|
||||||
text-align: center;
|
|
||||||
color: white;
|
color: white;
|
||||||
background-color: blue;
|
|
||||||
padding: 5px;
|
|
||||||
margin: 5px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.logstr {
|
.btn-primary:hover {
|
||||||
width: 100%;
|
background-color: var(--primary-dark);
|
||||||
float: left;
|
transform: translateY(-2px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-success {
|
||||||
|
background-color: var(--success);
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-success:hover {
|
||||||
|
background-color: #218838;
|
||||||
|
transform: translateY(-2px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-warning {
|
||||||
|
background-color: var(--warning);
|
||||||
|
color: var(--dark);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-warning:hover {
|
||||||
|
background-color: #e0a800;
|
||||||
|
transform: translateY(-2px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-danger {
|
||||||
|
background-color: var(--danger);
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-danger:hover {
|
||||||
|
background-color: #c82333;
|
||||||
|
transform: translateY(-2px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-secondary {
|
||||||
|
background-color: var(--secondary);
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-secondary:hover {
|
||||||
|
background-color: #5a6268;
|
||||||
|
transform: translateY(-2px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn:disabled {
|
||||||
|
opacity: 0.6;
|
||||||
|
cursor: not-allowed;
|
||||||
|
transform: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-container {
|
||||||
|
margin: 20px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-info {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
font-size: 14px;
|
||||||
|
color: var(--secondary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-bar {
|
||||||
|
height: 20px;
|
||||||
|
background-color: #e9ecef;
|
||||||
|
border-radius: 10px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress {
|
||||||
|
height: 100%;
|
||||||
|
background: linear-gradient(90deg, var(--primary), var(--info));
|
||||||
|
border-radius: 10px;
|
||||||
|
transition: width 0.3s ease;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
color: white;
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-card {
|
||||||
|
background-color: #f8f9fa;
|
||||||
|
border-left: 4px solid var(--info);
|
||||||
|
padding: 15px;
|
||||||
|
border-radius: 8px;
|
||||||
|
margin: 15px 0;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-success {
|
||||||
|
border-left-color: var(--success);
|
||||||
|
background-color: rgba(40, 167, 69, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-error {
|
||||||
|
border-left-color: var(--danger);
|
||||||
|
background-color: rgba(220, 53, 69, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-warning {
|
||||||
|
border-left-color: var(--warning);
|
||||||
|
background-color: rgba(255, 193, 7, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.connection-status {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 10px;
|
||||||
|
border-radius: 6px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
background-color: #f8f9fa;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.connected {
|
||||||
|
color: var(--success);
|
||||||
|
background-color: rgba(40, 167, 69, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.disconnected {
|
||||||
|
color: var(--danger);
|
||||||
|
background-color: rgba(220, 53, 69, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-indicator {
|
||||||
|
width: 12px;
|
||||||
|
height: 12px;
|
||||||
|
border-radius: 50%;
|
||||||
|
margin-right: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.connected .status-indicator {
|
||||||
|
background-color: var(--success);
|
||||||
|
}
|
||||||
|
|
||||||
|
.disconnected .status-indicator {
|
||||||
|
background-color: var(--danger);
|
||||||
|
}
|
||||||
|
|
||||||
|
.file-info {
|
||||||
|
background-color: #e9ecef;
|
||||||
|
padding: 12px;
|
||||||
|
border-radius: 8px;
|
||||||
|
margin: 15px 0;
|
||||||
|
font-size: 14px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-title {
|
||||||
|
font-size: 18px;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
color: var(--dark);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hidden {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer {
|
||||||
|
text-align: center;
|
||||||
|
margin-top: auto;
|
||||||
|
padding: 20px;
|
||||||
|
color: var(--secondary);
|
||||||
|
font-size: 0.9rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
.btn-container {
|
||||||
|
display: flex;
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-container .btn {
|
||||||
|
width: 50%;
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header h1 {
|
||||||
|
font-size: 2.2rem;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<div class="hdr">OTA UPDATE</div>
|
<!-- SVG иконки -->
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
|
||||||
|
<!-- Иконка синхронизации -->
|
||||||
|
<symbol id="sync-icon" viewBox="0 0 24 24">
|
||||||
|
<path fill="currentColor" d="M12 4V1L8 5l4 4V6c3.31 0 6 2.69 6 6c0 1.01-.25 1.97-.7 2.8l1.46 1.46A7.93 7.93 0 0020 12c0-4.42-3.58-8-8-8zm0 14c-3.31 0-6-2.69-6-6c0-1.01.25-1.97.7-2.8L5.24 7.74A7.93 7.93 0 004 12c0 4.42 3.58 8 8 8v3l4-4l-4-4v3z"/>
|
||||||
|
</symbol>
|
||||||
|
|
||||||
<div class="column">
|
<!-- Иконка предупреждения -->
|
||||||
<button class="btn" id="goHome">Home Page</button>
|
<symbol id="warning-icon" viewBox="0 0 24 24">
|
||||||
</div>
|
<path fill="currentColor" d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"/>
|
||||||
<div id="rollback" style="display:none">
|
</symbol>
|
||||||
<div class="column">
|
|
||||||
<button class="btn" id="otaVerifyApp">Click to confirm and commit OTA update</button>
|
<!-- Иконка загрузки файла -->
|
||||||
</div>
|
<symbol id="upload-icon" viewBox="0 0 24 24">
|
||||||
<div class="column">
|
<path fill="currentColor" d="M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM14 13v4h-4v-4H7l5-5 5 5h-3z"/>
|
||||||
<button class="btn" id="otaRollback">Cancel OTA. Click to rollback update and restart</button>
|
</symbol>
|
||||||
</div>
|
|
||||||
</div>
|
<!-- Иконка папки -->
|
||||||
<div id="update" style="display:block">
|
<symbol id="folder-icon" viewBox="0 0 24 24">
|
||||||
<div class="cl1" style="display:none">
|
<path fill="currentColor" d="M20 6h-8l-2-2H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm0 12H4V6h5.17l2 2H20v10z"/>
|
||||||
<label class="cl01" for="otaFile">Select the new OTA firmware file</label>
|
</symbol>
|
||||||
<input class="cl02" type="file" id="otaFile" placeholder="select file" onchange="readOtaFile(this)">
|
|
||||||
</div>
|
<!-- Иконка файла кода -->
|
||||||
<div class="column" style="display:block" id="otaFileSelectVisible">
|
<symbol id="file-code-icon" viewBox="0 0 24 24">
|
||||||
<button class="btn" id="otaFileSelect" onclick="document.getElementById('otaFile').click()">File
|
<path fill="currentColor" d="M13 9h5.5L13 3.5V9M6 2h8l6 6v12a2 2 0 01-2 2H6a2 2 0 01-2-2V4a2 2 0 012-2zm4.5 12.5l-1.77-1.77L10.23 12 8.73 10.5l1.77-1.77L12 10.23l1.5-1.5 1.77 1.77L13.77 12l1.5 1.5-1.77 1.77L12 13.77l-1.5 1.5z"/>
|
||||||
Select</button>
|
</symbol>
|
||||||
|
|
||||||
|
<!-- Иконка воспроизведения -->
|
||||||
|
<symbol id="play-icon" viewBox="0 0 24 24">
|
||||||
|
<path fill="currentColor" d="M8 5v14l11-7z"/>
|
||||||
|
</symbol>
|
||||||
|
|
||||||
|
<!-- Иконка отмены -->
|
||||||
|
<symbol id="cancel-icon" viewBox="0 0 24 24">
|
||||||
|
<path fill="currentColor" d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z"/>
|
||||||
|
</symbol>
|
||||||
|
|
||||||
|
<!-- Иконка подтверждения -->
|
||||||
|
<symbol id="check-icon" viewBox="0 0 24 24">
|
||||||
|
<path fill="currentColor" d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/>
|
||||||
|
</symbol>
|
||||||
|
|
||||||
|
<!-- Иконка отката -->
|
||||||
|
<symbol id="undo-icon" viewBox="0 0 24 24">
|
||||||
|
<path fill="currentColor" d="M12.5 8c-2.65 0-5.05.99-6.9 2.6L2 7v9h9l-3.62-3.62c1.39-1.16 3.16-1.88 5.12-1.88 3.54 0 6.55 2.31 7.6 5.5l2.37-.78C21.08 11.03 17.15 8 12.5 8z"/>
|
||||||
|
</symbol>
|
||||||
|
|
||||||
|
<!-- Иконка питания -->
|
||||||
|
<symbol id="power-icon" viewBox="0 0 24 24">
|
||||||
|
<path fill="currentColor" d="M13 3h-2v10h2V3zm4.83 2.17l-1.42 1.42C17.99 7.86 19 9.81 19 12c0 3.87-3.13 7-7 7s-7-3.13-7-7c0-2.19 1.01-4.14 2.58-5.42L6.17 5.17C4.23 6.82 3 9.26 3 12c0 4.97 4.03 9 9 9s9-4.03 9-9c0-2.74-1.23-5.18-3.17-6.83z"/>
|
||||||
|
</symbol>
|
||||||
|
|
||||||
|
<!-- Иконка дома -->
|
||||||
|
<symbol id="home-icon" viewBox="0 0 24 24">
|
||||||
|
<path fill="currentColor" d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/>
|
||||||
|
</symbol>
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
<div class="container">
|
||||||
|
<div class="header">
|
||||||
|
<h1><svg class="icon" style="width: 24px; height: 24px;"><use href="#sync-icon"></use></svg> OTA UPDATE</h1>
|
||||||
|
<p>Обновление прошивки устройства по воздуху</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="column" style="display:none" id="otaStartVisible">
|
<div class="connection-status disconnected">
|
||||||
<button class="btn" id="otaStartCancel">Start OTA update</button>
|
<span class="status-indicator"></span>
|
||||||
|
<span id="status-text">Не подключено</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="column" style="display:none" id="otaReStartVisible">
|
|
||||||
<button class="btn" id="otaReStart">Reboot with new OTA firmware</button>
|
<div id="rollback" class="card hidden">
|
||||||
|
<h2 class="section-title"><svg class="icon"><use href="#warning-icon"></use></svg> Подтверждение обновления</h2>
|
||||||
|
<div class="status-card status-warning">
|
||||||
|
<p>Обновление было загружено, но не подтверждено. Пожалуйста, подтвердите установку новой прошивки или откатитесь к предыдущей версии.</p>
|
||||||
</div>
|
</div>
|
||||||
<div id="otaProgressVisible" style="display:none">
|
|
||||||
<div class="cl1">
|
<button class="btn btn-success" id="otaVerifyApp">
|
||||||
<progress class="cl02" id="otaPogress" max=100 value=0>
|
<svg class="icon"><use href="#check-icon"></use></svg> Подтвердить и установить обновление
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button class="btn btn-danger" id="otaRollback">
|
||||||
|
<svg class="icon"><use href="#undo-icon"></use></svg> Отменить обновление и откатиться
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="update" class="card">
|
||||||
|
<h2 class="section-title"><svg class="icon"><use href="#upload-icon"></use></svg> Загрузка прошивки</h2>
|
||||||
|
|
||||||
|
<input type="file" id="otaFile" class="hidden" accept=".bin" onchange="readOtaFile(this)">
|
||||||
|
|
||||||
|
<button class="btn btn-primary" id="otaFileSelect" onclick="document.getElementById('otaFile').click()">
|
||||||
|
<svg class="icon"><use href="#folder-icon"></use></svg> Выбрать файл прошивки
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<div id="fileInfo" class="file-info hidden">
|
||||||
|
<svg class="icon"><use href="#file-code-icon"></use></svg>
|
||||||
|
<span id="fileName">Файл не выбран</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="otaProgressVisible" class="hidden">
|
||||||
|
<div class="progress-container">
|
||||||
|
<div class="progress-info">
|
||||||
|
<span id="progressStatus">Загрузка...</span>
|
||||||
|
<span id="progressPercent">0%</span>
|
||||||
|
</div>
|
||||||
|
<div class="progress-bar">
|
||||||
|
<div class="progress" id="otaProgress" style="width: 0%">0%</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="btn-container">
|
||||||
|
<button class="btn btn-warning" id="otaStartCancel">
|
||||||
|
<svg class="icon"><use href="#play-icon"></use></svg> Начать обновление
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button class="btn btn-success hidden" id="otaReStart">
|
||||||
|
<svg class="icon"><use href="#power-icon"></use></svg> Перезагрузить с новой прошивкой
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button class="btn btn-secondary" id="goHome">
|
||||||
|
<svg class="icon"><use href="#home-icon"></use></svg> Вернуться на главную
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="footer">
|
||||||
|
<p>NVS Device Management © 2023</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
||||||
let otaData;
|
let otaData;
|
||||||
let otaSetChunkSize = 0;
|
let otaSetChunkSize = 0;
|
||||||
let otaStartsegment = 0;
|
let otaStartsegment = 0;
|
||||||
let otaStarted = 0;
|
let otaStarted = 0;
|
||||||
|
|
||||||
function readOtaFile(input) {
|
function readOtaFile(input) {
|
||||||
|
if (!input.files.length) return;
|
||||||
|
|
||||||
let reader = new FileReader();
|
let reader = new FileReader();
|
||||||
let file = input.files[0];
|
let file = input.files[0];
|
||||||
document.getElementById('otaFileSelect').innerHTML = "Selected firmware file: " + file.name;
|
|
||||||
|
// Показываем информацию о файле
|
||||||
|
document.getElementById('fileInfo').classList.remove('hidden');
|
||||||
|
document.getElementById('fileName').textContent = `${file.name} (${formatFileSize(file.size)})`;
|
||||||
|
document.getElementById('otaFileSelect').innerHTML = `<svg class="icon"><use href="#check-icon"></use></svg> Файл выбран: ${file.name}`;
|
||||||
|
|
||||||
reader.readAsArrayBuffer(file);
|
reader.readAsArrayBuffer(file);
|
||||||
input.value = null;
|
input.value = null;
|
||||||
|
|
||||||
reader.onload = function () {
|
reader.onload = function () {
|
||||||
otaData = new Uint8Array(reader.result);
|
otaData = new Uint8Array(reader.result);
|
||||||
document.getElementById("otaStartVisible").style.display = "block";
|
document.getElementById("otaStartCancel").classList.remove('hidden');
|
||||||
document.getElementById("otaProgressVisible").style.display = "none";
|
document.getElementById("otaProgressVisible").classList.add('hidden');
|
||||||
document.getElementById("otaReStartVisible").style.display = "none";
|
document.getElementById("otaReStart").classList.add('hidden');
|
||||||
};
|
};
|
||||||
|
|
||||||
reader.onerror = function () {
|
reader.onerror = function () {
|
||||||
console.log(reader.error);
|
console.log(reader.error);
|
||||||
|
showStatus("Ошибка чтения файла", "error");
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
</script>
|
|
||||||
<script>
|
|
||||||
document.getElementById("otaStartCancel").addEventListener("click", function (e) {
|
|
||||||
if (otaData.length > 0 && otaStarted == 0) {
|
|
||||||
|
|
||||||
|
function formatFileSize(bytes) {
|
||||||
|
if (bytes < 1024) return bytes + " байт";
|
||||||
|
else if (bytes < 1048576) return (bytes / 1024).toFixed(2) + " КБ";
|
||||||
|
else return (bytes / 1048576).toFixed(2) + " МБ";
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateProgress(value, max) {
|
||||||
|
const percent = Math.round((value / max) * 100);
|
||||||
|
const progressBar = document.getElementById("otaProgress");
|
||||||
|
progressBar.style.width = percent + "%";
|
||||||
|
progressBar.textContent = percent + "%";
|
||||||
|
document.getElementById("progressPercent").textContent = percent + "%";
|
||||||
|
document.getElementById("progressStatus").textContent = `Загружено: ${formatFileSize(value)} из ${formatFileSize(max)}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
function showStatus(message, type = "info") {
|
||||||
|
// Здесь можно реализовать отображение статусных сообщений
|
||||||
|
console.log(`${type}: ${message}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Обработчики событий
|
||||||
|
document.getElementById("otaStartCancel").addEventListener("click", function (e) {
|
||||||
|
if (otaData && otaData.length > 0 && otaStarted == 0) {
|
||||||
socket.send(JSON.stringify({ name: "otaSize", value: otaData.length }));
|
socket.send(JSON.stringify({ name: "otaSize", value: otaData.length }));
|
||||||
otaStarted = 1;
|
otaStarted = 1;
|
||||||
this.innerHTML = "Click to Cancel";
|
this.innerHTML = "<svg class='icon'><use href='#cancel-icon'></use></svg> Отменить загрузку";
|
||||||
document.getElementById("otaFileSelect").disabled = true;
|
document.getElementById("otaFileSelect").disabled = true;
|
||||||
document.getElementById("otaProgressVisible").style.display = "block";
|
document.getElementById("otaProgressVisible").classList.remove("hidden");
|
||||||
document.getElementById("otaPogress").max = otaData.length;
|
updateProgress(0, otaData.length);
|
||||||
}
|
} else {
|
||||||
else {
|
|
||||||
otaStarted = 0;
|
otaStarted = 0;
|
||||||
socket.send(JSON.stringify({ name: "otaCancel", value: "Cancel" }));
|
socket.send(JSON.stringify({ name: "otaCancel", value: "Cancel" }));
|
||||||
|
this.innerHTML = "<svg class='icon'><use href='#play-icon'></use></svg> Начать обновление";
|
||||||
|
document.getElementById("otaFileSelect").disabled = false;
|
||||||
}
|
}
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
||||||
document.getElementById("goHome").addEventListener("click", function (e) {
|
document.getElementById("goHome").addEventListener("click", function (e) {
|
||||||
//onclick="window.location.href = '/'"
|
|
||||||
socket.close();
|
socket.close();
|
||||||
window.location.href = '/';
|
window.location.href = '/';
|
||||||
});
|
});
|
||||||
|
|
||||||
document.getElementById("otaReStart").addEventListener("click", function (e) {
|
document.getElementById("otaReStart").addEventListener("click", function (e) {
|
||||||
socket.send(JSON.stringify({ name: "otaRestartEsp", value: "restart" }));
|
socket.send(JSON.stringify({ name: "otaRestartEsp", value: "restart" }));
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// Rollback handlers
|
||||||
|
document.getElementById("otaVerifyApp").addEventListener("click", function (e) {
|
||||||
|
socket.send(JSON.stringify({ name: "otaProcessRollback", value: "false" }));
|
||||||
|
document.getElementById("rollback").classList.add("hidden");
|
||||||
|
document.getElementById("update").classList.remove("hidden");
|
||||||
|
});
|
||||||
|
|
||||||
|
document.getElementById("otaRollback").addEventListener("click", function (e) {
|
||||||
|
socket.send(JSON.stringify({ name: "otaProcessRollback", value: "true" }));
|
||||||
|
document.getElementById("rollback").classList.add("hidden");
|
||||||
|
document.getElementById("update").classList.remove("hidden");
|
||||||
|
});
|
||||||
|
|
||||||
function receiveWsData(data) {
|
function receiveWsData(data) {
|
||||||
try {
|
try {
|
||||||
let obj = JSON.parse(data);
|
let obj = JSON.parse(data);
|
||||||
@@ -160,88 +538,79 @@
|
|||||||
break;
|
break;
|
||||||
case "otaGetChunk":
|
case "otaGetChunk":
|
||||||
let otaDataSend = otaData.subarray(obj.value, obj.value + otaSetChunkSize);
|
let otaDataSend = otaData.subarray(obj.value, obj.value + otaSetChunkSize);
|
||||||
document.getElementById("otaPogress").value = obj.value;
|
updateProgress(obj.value, otaData.length);
|
||||||
document.getElementById("otaStartCancel").innerHTML = "Ota download. Size = " + otaData.length + " Segment = " + obj.value + " Click to Cancel";
|
document.getElementById("otaStartCancel").innerHTML = `<svg class='icon'><use href='#cancel-icon'></use></svg> Загрузка: ${formatFileSize(obj.value)} из ${formatFileSize(otaData.length)}`;
|
||||||
socket.send(otaDataSend);
|
socket.send(otaDataSend);
|
||||||
break;
|
break;
|
||||||
case "otaEnd":
|
case "otaEnd":
|
||||||
otaStartsegment = 0;
|
otaStartsegment = 0;
|
||||||
otaStarted = 0;
|
otaStarted = 0;
|
||||||
document.getElementById("otaStartVisible").style.display = "none";
|
document.getElementById("otaStartCancel").classList.add("hidden");
|
||||||
document.getElementById("otaStartCancel").innerHTML = "Start OTA update";
|
document.getElementById("otaStartCancel").innerHTML = "<svg class='icon'><use href='#play-icon'></use></svg> Начать обновление";
|
||||||
document.getElementById("otaPogress").value = otaData.length;
|
updateProgress(otaData.length, otaData.length);
|
||||||
document.getElementById("otaFileSelect").disabled = false;
|
document.getElementById("otaFileSelect").disabled = false;
|
||||||
document.getElementById("otaReStartVisible").style.display = "block";
|
document.getElementById("otaReStart").classList.remove("hidden");
|
||||||
document.getElementById("otaReStart").innerHTML = "The firmware is loaded. Click to reboot with new OTA firmware";
|
document.getElementById("otaReStart").innerHTML = "<svg class='icon'><use href='#power-icon'></use></svg> Прошивка загружена. Перезагрузить устройство";
|
||||||
document.getElementById("otaReStart").disabled = false;
|
document.getElementById("otaReStart").disabled = false;
|
||||||
|
showStatus("Прошивка успешно загружена", "success");
|
||||||
break;
|
break;
|
||||||
case "otaError":
|
case "otaError":
|
||||||
case "otaCancel":
|
case "otaCancel":
|
||||||
otaStartsegment = 0;
|
otaStartsegment = 0;
|
||||||
otaStarted = 0;
|
otaStarted = 0;
|
||||||
document.getElementById("otaStartVisible").style.display = "none";
|
document.getElementById("otaStartCancel").classList.remove("hidden");
|
||||||
document.getElementById("otaStartCancel").innerHTML = "Start OTA update";
|
document.getElementById("otaStartCancel").innerHTML = "<svg class='icon'><use href='#play-icon'></use></svg> Начать обновление";
|
||||||
document.getElementById("otaPogress").value = otaData.length;
|
|
||||||
document.getElementById("otaFileSelect").disabled = false;
|
document.getElementById("otaFileSelect").disabled = false;
|
||||||
document.getElementById("otaReStartVisible").style.display = "block";
|
document.getElementById("otaReStart").classList.remove("hidden");
|
||||||
document.getElementById("otaReStart").innerHTML = "ОТА firmware download canceled " + obj.value;
|
document.getElementById("otaReStart").innerHTML = "Загрузка отменена: " + obj.value;
|
||||||
document.getElementById("otaReStart").disabled = true;
|
document.getElementById("otaReStart").disabled = true;
|
||||||
|
showStatus("Загрузка отменена: " + obj.value, "error");
|
||||||
break;
|
break;
|
||||||
case "otaCheckRollback":
|
case "otaCheckRollback":
|
||||||
document.getElementById("rollback").style.display = "block";
|
document.getElementById("rollback").classList.remove("hidden");
|
||||||
document.getElementById("update").style.display = "none";
|
document.getElementById("update").classList.add("hidden");
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
}
|
} catch {
|
||||||
catch
|
|
||||||
{
|
|
||||||
console.log(data + "Error msg");
|
console.log(data + "Error msg");
|
||||||
}
|
}
|
||||||
};
|
}
|
||||||
</script>
|
|
||||||
|
|
||||||
<script> // rollback
|
// WebSocket connection
|
||||||
document.getElementById("otaVerifyApp").addEventListener("click", function (e) {
|
let protocol = "ws:";
|
||||||
socket.send(JSON.stringify({ name: "otaProcessRollback", value: "false" }));
|
if (document.location.protocol == "https:") protocol = "wss:";
|
||||||
document.getElementById("rollback").style.display = "none";
|
|
||||||
document.getElementById("update").style.display = "block";
|
|
||||||
});
|
|
||||||
|
|
||||||
document.getElementById("otaRollback").addEventListener("click", function (e) {
|
|
||||||
socket.send(JSON.stringify({ name: "otaProcessRollback", value: "true" }));
|
|
||||||
document.getElementById("rollback").style.display = "none";
|
|
||||||
document.getElementById("update").style.display = "block";
|
|
||||||
});
|
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<script> // основной старт скрипта, открыть сокет
|
|
||||||
// создать сокет по адресу
|
|
||||||
let protocol = "ws:"
|
|
||||||
if(document.location.protocol == "https:") protocol = "wss:"
|
|
||||||
let wsHostStr = protocol + "//" + document.location.host + document.location.pathname;
|
let wsHostStr = protocol + "//" + document.location.host + document.location.pathname;
|
||||||
wsHostStr += (document.location.pathname == '/') ? "ws" : "/ws";
|
wsHostStr += (document.location.pathname == '/') ? "ws" : "/ws";
|
||||||
var socket = new WebSocket(wsHostStr);
|
var socket = new WebSocket(wsHostStr);
|
||||||
socket.binaryType = "arraybuffer";
|
socket.binaryType = "arraybuffer";
|
||||||
</script>
|
|
||||||
|
|
||||||
<script> // события WS
|
// WebSocket events
|
||||||
socket.onopen = function () {
|
socket.onopen = function () {
|
||||||
console.log("connect ws");
|
console.log("connect ws");
|
||||||
|
document.getElementById("status-text").textContent = "Подключено";
|
||||||
|
document.querySelector(".connection-status").classList.remove("disconnected");
|
||||||
|
document.querySelector(".connection-status").classList.add("connected");
|
||||||
};
|
};
|
||||||
|
|
||||||
socket.onclose = function (event) {
|
socket.onclose = function (event) {
|
||||||
console.log("close ws - reload");
|
console.log("close ws - reload");
|
||||||
|
document.getElementById("status-text").textContent = "Не подключено";
|
||||||
|
document.querySelector(".connection-status").classList.remove("connected");
|
||||||
|
document.querySelector(".connection-status").classList.add("disconnected");
|
||||||
setTimeout(() => document.location.reload(), 2000);
|
setTimeout(() => document.location.reload(), 2000);
|
||||||
};
|
};
|
||||||
|
|
||||||
socket.onerror = function () {
|
socket.onerror = function () {
|
||||||
console.log("error ws");
|
console.log("error ws");
|
||||||
|
document.getElementById("status-text").textContent = "Ошибка подключения";
|
||||||
|
document.querySelector(".connection-status").classList.remove("connected");
|
||||||
|
document.querySelector(".connection-status").classList.add("disconnected");
|
||||||
setTimeout(() => document.location.reload(), 2000);
|
setTimeout(() => document.location.reload(), 2000);
|
||||||
};
|
};
|
||||||
|
|
||||||
socket.onmessage = function (event) {
|
socket.onmessage = function (event) {
|
||||||
receiveWsData(event.data);
|
receiveWsData(event.data);
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
247
source/ota_ws_update_.html
Normal file
247
source/ota_ws_update_.html
Normal file
@@ -0,0 +1,247 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
|
||||||
|
<html lang="ru">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<title>OTA UPDATE</title>
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
|
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
|
||||||
|
<style>
|
||||||
|
.column {
|
||||||
|
float: left;
|
||||||
|
width: 100%;
|
||||||
|
margin-top: 2px;
|
||||||
|
margin-bottom: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
float: left;
|
||||||
|
width: 100%;
|
||||||
|
margin: 2px;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.cl1 {
|
||||||
|
float: left;
|
||||||
|
width: 100%;
|
||||||
|
margin: 2px;
|
||||||
|
margin-top: 2px;
|
||||||
|
margin-bottom: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cl01 {
|
||||||
|
float: left;
|
||||||
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
|
margin-top: 2px;
|
||||||
|
margin-bottom: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cl02 {
|
||||||
|
float: left;
|
||||||
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
|
margin-top: 2px;
|
||||||
|
margin-bottom: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hdr {
|
||||||
|
float: left;
|
||||||
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
|
color: white;
|
||||||
|
background-color: blue;
|
||||||
|
padding: 5px;
|
||||||
|
margin: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logstr {
|
||||||
|
width: 100%;
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div class="hdr">OTA UPDATE</div>
|
||||||
|
|
||||||
|
<div class="column">
|
||||||
|
<button class="btn" id="goHome">Home Page</button>
|
||||||
|
</div>
|
||||||
|
<div id="rollback" style="display:none">
|
||||||
|
<div class="column">
|
||||||
|
<button class="btn" id="otaVerifyApp">Click to confirm and commit OTA update</button>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<button class="btn" id="otaRollback">Cancel OTA. Click to rollback update and restart</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div id="update" style="display:block">
|
||||||
|
<div class="cl1" style="display:none">
|
||||||
|
<label class="cl01" for="otaFile">Select the new OTA firmware file</label>
|
||||||
|
<input class="cl02" type="file" id="otaFile" placeholder="select file" onchange="readOtaFile(this)">
|
||||||
|
</div>
|
||||||
|
<div class="column" style="display:block" id="otaFileSelectVisible">
|
||||||
|
<button class="btn" id="otaFileSelect" onclick="document.getElementById('otaFile').click()">File
|
||||||
|
Select</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="column" style="display:none" id="otaStartVisible">
|
||||||
|
<button class="btn" id="otaStartCancel">Start OTA update</button>
|
||||||
|
</div>
|
||||||
|
<div class="column" style="display:none" id="otaReStartVisible">
|
||||||
|
<button class="btn" id="otaReStart">Reboot with new OTA firmware</button>
|
||||||
|
</div>
|
||||||
|
<div id="otaProgressVisible" style="display:none">
|
||||||
|
<div class="cl1">
|
||||||
|
<progress class="cl02" id="otaPogress" max=100 value=0>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<script>
|
||||||
|
|
||||||
|
let otaData;
|
||||||
|
let otaSetChunkSize = 0;
|
||||||
|
let otaStartsegment = 0;
|
||||||
|
let otaStarted = 0;
|
||||||
|
|
||||||
|
function readOtaFile(input) {
|
||||||
|
let reader = new FileReader();
|
||||||
|
let file = input.files[0];
|
||||||
|
document.getElementById('otaFileSelect').innerHTML = "Selected firmware file: " + file.name;
|
||||||
|
reader.readAsArrayBuffer(file);
|
||||||
|
input.value = null;
|
||||||
|
|
||||||
|
reader.onload = function () {
|
||||||
|
otaData = new Uint8Array(reader.result);
|
||||||
|
document.getElementById("otaStartVisible").style.display = "block";
|
||||||
|
document.getElementById("otaProgressVisible").style.display = "none";
|
||||||
|
document.getElementById("otaReStartVisible").style.display = "none";
|
||||||
|
};
|
||||||
|
|
||||||
|
reader.onerror = function () {
|
||||||
|
console.log(reader.error);
|
||||||
|
};
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<script>
|
||||||
|
document.getElementById("otaStartCancel").addEventListener("click", function (e) {
|
||||||
|
if (otaData.length > 0 && otaStarted == 0) {
|
||||||
|
|
||||||
|
socket.send(JSON.stringify({ name: "otaSize", value: otaData.length }));
|
||||||
|
otaStarted = 1;
|
||||||
|
this.innerHTML = "Click to Cancel";
|
||||||
|
document.getElementById("otaFileSelect").disabled = true;
|
||||||
|
document.getElementById("otaProgressVisible").style.display = "block";
|
||||||
|
document.getElementById("otaPogress").max = otaData.length;
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
otaStarted = 0;
|
||||||
|
socket.send(JSON.stringify({ name: "otaCancel", value: "Cancel" }));
|
||||||
|
}
|
||||||
|
|
||||||
|
});
|
||||||
|
document.getElementById("goHome").addEventListener("click", function (e) {
|
||||||
|
//onclick="window.location.href = '/'"
|
||||||
|
socket.close();
|
||||||
|
window.location.href = '/';
|
||||||
|
});
|
||||||
|
document.getElementById("otaReStart").addEventListener("click", function (e) {
|
||||||
|
socket.send(JSON.stringify({ name: "otaRestartEsp", value: "restart" }));
|
||||||
|
});
|
||||||
|
|
||||||
|
function receiveWsData(data) {
|
||||||
|
try {
|
||||||
|
let obj = JSON.parse(data);
|
||||||
|
switch (obj.name) {
|
||||||
|
case "otaSetChunkSize":
|
||||||
|
otaSetChunkSize = obj.value;
|
||||||
|
break;
|
||||||
|
case "otaGetChunk":
|
||||||
|
let otaDataSend = otaData.subarray(obj.value, obj.value + otaSetChunkSize);
|
||||||
|
document.getElementById("otaPogress").value = obj.value;
|
||||||
|
document.getElementById("otaStartCancel").innerHTML = "Ota download. Size = " + otaData.length + " Segment = " + obj.value + " Click to Cancel";
|
||||||
|
socket.send(otaDataSend);
|
||||||
|
break;
|
||||||
|
case "otaEnd":
|
||||||
|
otaStartsegment = 0;
|
||||||
|
otaStarted = 0;
|
||||||
|
document.getElementById("otaStartVisible").style.display = "none";
|
||||||
|
document.getElementById("otaStartCancel").innerHTML = "Start OTA update";
|
||||||
|
document.getElementById("otaPogress").value = otaData.length;
|
||||||
|
document.getElementById("otaFileSelect").disabled = false;
|
||||||
|
document.getElementById("otaReStartVisible").style.display = "block";
|
||||||
|
document.getElementById("otaReStart").innerHTML = "The firmware is loaded. Click to reboot with new OTA firmware";
|
||||||
|
document.getElementById("otaReStart").disabled = false;
|
||||||
|
break;
|
||||||
|
case "otaError":
|
||||||
|
case "otaCancel":
|
||||||
|
otaStartsegment = 0;
|
||||||
|
otaStarted = 0;
|
||||||
|
document.getElementById("otaStartVisible").style.display = "none";
|
||||||
|
document.getElementById("otaStartCancel").innerHTML = "Start OTA update";
|
||||||
|
document.getElementById("otaPogress").value = otaData.length;
|
||||||
|
document.getElementById("otaFileSelect").disabled = false;
|
||||||
|
document.getElementById("otaReStartVisible").style.display = "block";
|
||||||
|
document.getElementById("otaReStart").innerHTML = "ОТА firmware download canceled " + obj.value;
|
||||||
|
document.getElementById("otaReStart").disabled = true;
|
||||||
|
break;
|
||||||
|
case "otaCheckRollback":
|
||||||
|
document.getElementById("rollback").style.display = "block";
|
||||||
|
document.getElementById("update").style.display = "none";
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
catch
|
||||||
|
{
|
||||||
|
console.log(data + "Error msg");
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<script> // rollback
|
||||||
|
document.getElementById("otaVerifyApp").addEventListener("click", function (e) {
|
||||||
|
socket.send(JSON.stringify({ name: "otaProcessRollback", value: "false" }));
|
||||||
|
document.getElementById("rollback").style.display = "none";
|
||||||
|
document.getElementById("update").style.display = "block";
|
||||||
|
});
|
||||||
|
|
||||||
|
document.getElementById("otaRollback").addEventListener("click", function (e) {
|
||||||
|
socket.send(JSON.stringify({ name: "otaProcessRollback", value: "true" }));
|
||||||
|
document.getElementById("rollback").style.display = "none";
|
||||||
|
document.getElementById("update").style.display = "block";
|
||||||
|
});
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<script> // основной старт скрипта, открыть сокет
|
||||||
|
// создать сокет по адресу
|
||||||
|
let protocol = "ws:"
|
||||||
|
if(document.location.protocol == "https:") protocol = "wss:"
|
||||||
|
let wsHostStr = protocol + "//" + document.location.host + document.location.pathname;
|
||||||
|
wsHostStr += (document.location.pathname == '/') ? "ws" : "/ws";
|
||||||
|
var socket = new WebSocket(wsHostStr);
|
||||||
|
socket.binaryType = "arraybuffer";
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<script> // события WS
|
||||||
|
socket.onopen = function () {
|
||||||
|
console.log("connect ws");
|
||||||
|
};
|
||||||
|
socket.onclose = function (event) {
|
||||||
|
console.log("close ws - reload");
|
||||||
|
setTimeout(() => document.location.reload(), 2000);
|
||||||
|
};
|
||||||
|
socket.onerror = function () {
|
||||||
|
console.log("error ws");
|
||||||
|
setTimeout(() => document.location.reload(), 2000);
|
||||||
|
};
|
||||||
|
socket.onmessage = function (event) {
|
||||||
|
receiveWsData(event.data);
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
@@ -1,616 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="ru">
|
|
||||||
<head>
|
|
||||||
<title>OTA UPDATE - Обновление прошивки</title>
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
||||||
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
|
|
||||||
<style>
|
|
||||||
/* Стили для SVG иконок */
|
|
||||||
.icon {
|
|
||||||
display: inline-block;
|
|
||||||
width: 16px;
|
|
||||||
height: 16px;
|
|
||||||
vertical-align: middle;
|
|
||||||
margin-right: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Основные стили */
|
|
||||||
:root {
|
|
||||||
--primary: #4361ee;
|
|
||||||
--primary-dark: #3a56d4;
|
|
||||||
--secondary: #6c757d;
|
|
||||||
--success: #28a745;
|
|
||||||
--warning: #ffc107;
|
|
||||||
--danger: #dc3545;
|
|
||||||
--info: #17a2b8;
|
|
||||||
--light: #f8f9fa;
|
|
||||||
--dark: #343a40;
|
|
||||||
--background: #f5f7fa;
|
|
||||||
--card-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
|
||||||
--transition: all 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
* {
|
|
||||||
box-sizing: border-box;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
background-color: var(--background);
|
|
||||||
color: var(--dark);
|
|
||||||
line-height: 1.6;
|
|
||||||
padding: 0;
|
|
||||||
margin: 0;
|
|
||||||
min-height: 100vh;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
.container {
|
|
||||||
width: 100%;
|
|
||||||
max-width: 800px;
|
|
||||||
margin: 0 auto;
|
|
||||||
padding: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.header {
|
|
||||||
background: linear-gradient(135deg, var(--primary), var(--primary-dark));
|
|
||||||
color: white;
|
|
||||||
padding: 20px;
|
|
||||||
text-align: center;
|
|
||||||
border-radius: 10px;
|
|
||||||
margin-bottom: 25px;
|
|
||||||
box-shadow: var(--card-shadow);
|
|
||||||
}
|
|
||||||
|
|
||||||
.header h1 {
|
|
||||||
font-size: 1.8rem;
|
|
||||||
margin-bottom: 5px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
gap: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.header p {
|
|
||||||
font-size: 1rem;
|
|
||||||
opacity: 0.9;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card {
|
|
||||||
background-color: white;
|
|
||||||
border-radius: 10px;
|
|
||||||
padding: 25px;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
box-shadow: var(--card-shadow);
|
|
||||||
transition: var(--transition);
|
|
||||||
}
|
|
||||||
|
|
||||||
.card:hover {
|
|
||||||
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn {
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
gap: 8px;
|
|
||||||
padding: 14px 20px;
|
|
||||||
border: none;
|
|
||||||
border-radius: 8px;
|
|
||||||
font-size: 16px;
|
|
||||||
font-weight: 600;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: var(--transition);
|
|
||||||
width: 100%;
|
|
||||||
margin-bottom: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-primary {
|
|
||||||
background-color: var(--primary);
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-primary:hover {
|
|
||||||
background-color: var(--primary-dark);
|
|
||||||
transform: translateY(-2px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-success {
|
|
||||||
background-color: var(--success);
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-success:hover {
|
|
||||||
background-color: #218838;
|
|
||||||
transform: translateY(-2px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-warning {
|
|
||||||
background-color: var(--warning);
|
|
||||||
color: var(--dark);
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-warning:hover {
|
|
||||||
background-color: #e0a800;
|
|
||||||
transform: translateY(-2px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-danger {
|
|
||||||
background-color: var(--danger);
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-danger:hover {
|
|
||||||
background-color: #c82333;
|
|
||||||
transform: translateY(-2px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-secondary {
|
|
||||||
background-color: var(--secondary);
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-secondary:hover {
|
|
||||||
background-color: #5a6268;
|
|
||||||
transform: translateY(-2px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn:disabled {
|
|
||||||
opacity: 0.6;
|
|
||||||
cursor: not-allowed;
|
|
||||||
transform: none !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.progress-container {
|
|
||||||
margin: 20px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.progress-info {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
margin-bottom: 8px;
|
|
||||||
font-size: 14px;
|
|
||||||
color: var(--secondary);
|
|
||||||
}
|
|
||||||
|
|
||||||
.progress-bar {
|
|
||||||
height: 20px;
|
|
||||||
background-color: #e9ecef;
|
|
||||||
border-radius: 10px;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.progress {
|
|
||||||
height: 100%;
|
|
||||||
background: linear-gradient(90deg, var(--primary), var(--info));
|
|
||||||
border-radius: 10px;
|
|
||||||
transition: width 0.3s ease;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
color: white;
|
|
||||||
font-size: 12px;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
.status-card {
|
|
||||||
background-color: #f8f9fa;
|
|
||||||
border-left: 4px solid var(--info);
|
|
||||||
padding: 15px;
|
|
||||||
border-radius: 8px;
|
|
||||||
margin: 15px 0;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.status-success {
|
|
||||||
border-left-color: var(--success);
|
|
||||||
background-color: rgba(40, 167, 69, 0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.status-error {
|
|
||||||
border-left-color: var(--danger);
|
|
||||||
background-color: rgba(220, 53, 69, 0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.status-warning {
|
|
||||||
border-left-color: var(--warning);
|
|
||||||
background-color: rgba(255, 193, 7, 0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.connection-status {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
padding: 10px;
|
|
||||||
border-radius: 6px;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
background-color: #f8f9fa;
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
|
|
||||||
.connected {
|
|
||||||
color: var(--success);
|
|
||||||
background-color: rgba(40, 167, 69, 0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.disconnected {
|
|
||||||
color: var(--danger);
|
|
||||||
background-color: rgba(220, 53, 69, 0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.status-indicator {
|
|
||||||
width: 12px;
|
|
||||||
height: 12px;
|
|
||||||
border-radius: 50%;
|
|
||||||
margin-right: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.connected .status-indicator {
|
|
||||||
background-color: var(--success);
|
|
||||||
}
|
|
||||||
|
|
||||||
.disconnected .status-indicator {
|
|
||||||
background-color: var(--danger);
|
|
||||||
}
|
|
||||||
|
|
||||||
.file-info {
|
|
||||||
background-color: #e9ecef;
|
|
||||||
padding: 12px;
|
|
||||||
border-radius: 8px;
|
|
||||||
margin: 15px 0;
|
|
||||||
font-size: 14px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.section-title {
|
|
||||||
font-size: 18px;
|
|
||||||
margin-bottom: 15px;
|
|
||||||
color: var(--dark);
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hidden {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer {
|
|
||||||
text-align: center;
|
|
||||||
margin-top: auto;
|
|
||||||
padding: 20px;
|
|
||||||
color: var(--secondary);
|
|
||||||
font-size: 0.9rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 768px) {
|
|
||||||
.btn-container {
|
|
||||||
display: flex;
|
|
||||||
gap: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-container .btn {
|
|
||||||
width: 50%;
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.header h1 {
|
|
||||||
font-size: 2.2rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
<!-- SVG иконки -->
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
|
|
||||||
<!-- Иконка синхронизации -->
|
|
||||||
<symbol id="sync-icon" viewBox="0 0 24 24">
|
|
||||||
<path fill="currentColor" d="M12 4V1L8 5l4 4V6c3.31 0 6 2.69 6 6c0 1.01-.25 1.97-.7 2.8l1.46 1.46A7.93 7.93 0 0020 12c0-4.42-3.58-8-8-8zm0 14c-3.31 0-6-2.69-6-6c0-1.01.25-1.97.7-2.8L5.24 7.74A7.93 7.93 0 004 12c0 4.42 3.58 8 8 8v3l4-4l-4-4v3z"/>
|
|
||||||
</symbol>
|
|
||||||
|
|
||||||
<!-- Иконка предупреждения -->
|
|
||||||
<symbol id="warning-icon" viewBox="0 0 24 24">
|
|
||||||
<path fill="currentColor" d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"/>
|
|
||||||
</symbol>
|
|
||||||
|
|
||||||
<!-- Иконка загрузки файла -->
|
|
||||||
<symbol id="upload-icon" viewBox="0 0 24 24">
|
|
||||||
<path fill="currentColor" d="M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM14 13v4h-4v-4H7l5-5 5 5h-3z"/>
|
|
||||||
</symbol>
|
|
||||||
|
|
||||||
<!-- Иконка папки -->
|
|
||||||
<symbol id="folder-icon" viewBox="0 0 24 24">
|
|
||||||
<path fill="currentColor" d="M20 6h-8l-2-2H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm0 12H4V6h5.17l2 2H20v10z"/>
|
|
||||||
</symbol>
|
|
||||||
|
|
||||||
<!-- Иконка файла кода -->
|
|
||||||
<symbol id="file-code-icon" viewBox="0 0 24 24">
|
|
||||||
<path fill="currentColor" d="M13 9h5.5L13 3.5V9M6 2h8l6 6v12a2 2 0 01-2 2H6a2 2 0 01-2-2V4a2 2 0 012-2zm4.5 12.5l-1.77-1.77L10.23 12 8.73 10.5l1.77-1.77L12 10.23l1.5-1.5 1.77 1.77L13.77 12l1.5 1.5-1.77 1.77L12 13.77l-1.5 1.5z"/>
|
|
||||||
</symbol>
|
|
||||||
|
|
||||||
<!-- Иконка воспроизведения -->
|
|
||||||
<symbol id="play-icon" viewBox="0 0 24 24">
|
|
||||||
<path fill="currentColor" d="M8 5v14l11-7z"/>
|
|
||||||
</symbol>
|
|
||||||
|
|
||||||
<!-- Иконка отмены -->
|
|
||||||
<symbol id="cancel-icon" viewBox="0 0 24 24">
|
|
||||||
<path fill="currentColor" d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z"/>
|
|
||||||
</symbol>
|
|
||||||
|
|
||||||
<!-- Иконка подтверждения -->
|
|
||||||
<symbol id="check-icon" viewBox="0 0 24 24">
|
|
||||||
<path fill="currentColor" d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/>
|
|
||||||
</symbol>
|
|
||||||
|
|
||||||
<!-- Иконка отката -->
|
|
||||||
<symbol id="undo-icon" viewBox="0 0 24 24">
|
|
||||||
<path fill="currentColor" d="M12.5 8c-2.65 0-5.05.99-6.9 2.6L2 7v9h9l-3.62-3.62c1.39-1.16 3.16-1.88 5.12-1.88 3.54 0 6.55 2.31 7.6 5.5l2.37-.78C21.08 11.03 17.15 8 12.5 8z"/>
|
|
||||||
</symbol>
|
|
||||||
|
|
||||||
<!-- Иконка питания -->
|
|
||||||
<symbol id="power-icon" viewBox="0 0 24 24">
|
|
||||||
<path fill="currentColor" d="M13 3h-2v10h2V3zm4.83 2.17l-1.42 1.42C17.99 7.86 19 9.81 19 12c0 3.87-3.13 7-7 7s-7-3.13-7-7c0-2.19 1.01-4.14 2.58-5.42L6.17 5.17C4.23 6.82 3 9.26 3 12c0 4.97 4.03 9 9 9s9-4.03 9-9c0-2.74-1.23-5.18-3.17-6.83z"/>
|
|
||||||
</symbol>
|
|
||||||
|
|
||||||
<!-- Иконка дома -->
|
|
||||||
<symbol id="home-icon" viewBox="0 0 24 24">
|
|
||||||
<path fill="currentColor" d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/>
|
|
||||||
</symbol>
|
|
||||||
</svg>
|
|
||||||
|
|
||||||
<div class="container">
|
|
||||||
<div class="header">
|
|
||||||
<h1><svg class="icon" style="width: 24px; height: 24px;"><use href="#sync-icon"></use></svg> OTA UPDATE</h1>
|
|
||||||
<p>Обновление прошивки устройства по воздуху</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="connection-status disconnected">
|
|
||||||
<span class="status-indicator"></span>
|
|
||||||
<span id="status-text">Не подключено</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="rollback" class="card hidden">
|
|
||||||
<h2 class="section-title"><svg class="icon"><use href="#warning-icon"></use></svg> Подтверждение обновления</h2>
|
|
||||||
<div class="status-card status-warning">
|
|
||||||
<p>Обновление было загружено, но не подтверждено. Пожалуйста, подтвердите установку новой прошивки или откатитесь к предыдущей версии.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<button class="btn btn-success" id="otaVerifyApp">
|
|
||||||
<svg class="icon"><use href="#check-icon"></use></svg> Подтвердить и установить обновление
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<button class="btn btn-danger" id="otaRollback">
|
|
||||||
<svg class="icon"><use href="#undo-icon"></use></svg> Отменить обновление и откатиться
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="update" class="card">
|
|
||||||
<h2 class="section-title"><svg class="icon"><use href="#upload-icon"></use></svg> Загрузка прошивки</h2>
|
|
||||||
|
|
||||||
<input type="file" id="otaFile" class="hidden" accept=".bin" onchange="readOtaFile(this)">
|
|
||||||
|
|
||||||
<button class="btn btn-primary" id="otaFileSelect" onclick="document.getElementById('otaFile').click()">
|
|
||||||
<svg class="icon"><use href="#folder-icon"></use></svg> Выбрать файл прошивки
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<div id="fileInfo" class="file-info hidden">
|
|
||||||
<svg class="icon"><use href="#file-code-icon"></use></svg>
|
|
||||||
<span id="fileName">Файл не выбран</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="otaProgressVisible" class="hidden">
|
|
||||||
<div class="progress-container">
|
|
||||||
<div class="progress-info">
|
|
||||||
<span id="progressStatus">Загрузка...</span>
|
|
||||||
<span id="progressPercent">0%</span>
|
|
||||||
</div>
|
|
||||||
<div class="progress-bar">
|
|
||||||
<div class="progress" id="otaProgress" style="width: 0%">0%</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="btn-container">
|
|
||||||
<button class="btn btn-warning" id="otaStartCancel">
|
|
||||||
<svg class="icon"><use href="#play-icon"></use></svg> Начать обновление
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<button class="btn btn-success hidden" id="otaReStart">
|
|
||||||
<svg class="icon"><use href="#power-icon"></use></svg> Перезагрузить с новой прошивкой
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<button class="btn btn-secondary" id="goHome">
|
|
||||||
<svg class="icon"><use href="#home-icon"></use></svg> Вернуться на главную
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="footer">
|
|
||||||
<p>NVS Device Management © 2023</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
let otaData;
|
|
||||||
let otaSetChunkSize = 0;
|
|
||||||
let otaStartsegment = 0;
|
|
||||||
let otaStarted = 0;
|
|
||||||
|
|
||||||
function readOtaFile(input) {
|
|
||||||
if (!input.files.length) return;
|
|
||||||
|
|
||||||
let reader = new FileReader();
|
|
||||||
let file = input.files[0];
|
|
||||||
|
|
||||||
// Показываем информацию о файле
|
|
||||||
document.getElementById('fileInfo').classList.remove('hidden');
|
|
||||||
document.getElementById('fileName').textContent = `${file.name} (${formatFileSize(file.size)})`;
|
|
||||||
document.getElementById('otaFileSelect').innerHTML = `<svg class="icon"><use href="#check-icon"></use></svg> Файл выбран: ${file.name}`;
|
|
||||||
|
|
||||||
reader.readAsArrayBuffer(file);
|
|
||||||
input.value = null;
|
|
||||||
|
|
||||||
reader.onload = function () {
|
|
||||||
otaData = new Uint8Array(reader.result);
|
|
||||||
document.getElementById("otaStartCancel").classList.remove('hidden');
|
|
||||||
document.getElementById("otaProgressVisible").classList.add('hidden');
|
|
||||||
document.getElementById("otaReStart").classList.add('hidden');
|
|
||||||
};
|
|
||||||
|
|
||||||
reader.onerror = function () {
|
|
||||||
console.log(reader.error);
|
|
||||||
showStatus("Ошибка чтения файла", "error");
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
function formatFileSize(bytes) {
|
|
||||||
if (bytes < 1024) return bytes + " байт";
|
|
||||||
else if (bytes < 1048576) return (bytes / 1024).toFixed(2) + " КБ";
|
|
||||||
else return (bytes / 1048576).toFixed(2) + " МБ";
|
|
||||||
}
|
|
||||||
|
|
||||||
function updateProgress(value, max) {
|
|
||||||
const percent = Math.round((value / max) * 100);
|
|
||||||
const progressBar = document.getElementById("otaProgress");
|
|
||||||
progressBar.style.width = percent + "%";
|
|
||||||
progressBar.textContent = percent + "%";
|
|
||||||
document.getElementById("progressPercent").textContent = percent + "%";
|
|
||||||
document.getElementById("progressStatus").textContent = `Загружено: ${formatFileSize(value)} из ${formatFileSize(max)}`;
|
|
||||||
}
|
|
||||||
|
|
||||||
function showStatus(message, type = "info") {
|
|
||||||
// Здесь можно реализовать отображение статусных сообщений
|
|
||||||
console.log(`${type}: ${message}`);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Обработчики событий
|
|
||||||
document.getElementById("otaStartCancel").addEventListener("click", function (e) {
|
|
||||||
if (otaData && otaData.length > 0 && otaStarted == 0) {
|
|
||||||
socket.send(JSON.stringify({ name: "otaSize", value: otaData.length }));
|
|
||||||
otaStarted = 1;
|
|
||||||
this.innerHTML = "<svg class='icon'><use href='#cancel-icon'></use></svg> Отменить загрузку";
|
|
||||||
document.getElementById("otaFileSelect").disabled = true;
|
|
||||||
document.getElementById("otaProgressVisible").classList.remove("hidden");
|
|
||||||
updateProgress(0, otaData.length);
|
|
||||||
} else {
|
|
||||||
otaStarted = 0;
|
|
||||||
socket.send(JSON.stringify({ name: "otaCancel", value: "Cancel" }));
|
|
||||||
this.innerHTML = "<svg class='icon'><use href='#play-icon'></use></svg> Начать обновление";
|
|
||||||
document.getElementById("otaFileSelect").disabled = false;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
document.getElementById("goHome").addEventListener("click", function (e) {
|
|
||||||
socket.close();
|
|
||||||
window.location.href = '/';
|
|
||||||
});
|
|
||||||
|
|
||||||
document.getElementById("otaReStart").addEventListener("click", function (e) {
|
|
||||||
socket.send(JSON.stringify({ name: "otaRestartEsp", value: "restart" }));
|
|
||||||
});
|
|
||||||
|
|
||||||
// Rollback handlers
|
|
||||||
document.getElementById("otaVerifyApp").addEventListener("click", function (e) {
|
|
||||||
socket.send(JSON.stringify({ name: "otaProcessRollback", value: "false" }));
|
|
||||||
document.getElementById("rollback").classList.add("hidden");
|
|
||||||
document.getElementById("update").classList.remove("hidden");
|
|
||||||
});
|
|
||||||
|
|
||||||
document.getElementById("otaRollback").addEventListener("click", function (e) {
|
|
||||||
socket.send(JSON.stringify({ name: "otaProcessRollback", value: "true" }));
|
|
||||||
document.getElementById("rollback").classList.add("hidden");
|
|
||||||
document.getElementById("update").classList.remove("hidden");
|
|
||||||
});
|
|
||||||
|
|
||||||
function receiveWsData(data) {
|
|
||||||
try {
|
|
||||||
let obj = JSON.parse(data);
|
|
||||||
switch (obj.name) {
|
|
||||||
case "otaSetChunkSize":
|
|
||||||
otaSetChunkSize = obj.value;
|
|
||||||
break;
|
|
||||||
case "otaGetChunk":
|
|
||||||
let otaDataSend = otaData.subarray(obj.value, obj.value + otaSetChunkSize);
|
|
||||||
updateProgress(obj.value, otaData.length);
|
|
||||||
document.getElementById("otaStartCancel").innerHTML = `<svg class='icon'><use href='#cancel-icon'></use></svg> Загрузка: ${formatFileSize(obj.value)} из ${formatFileSize(otaData.length)}`;
|
|
||||||
socket.send(otaDataSend);
|
|
||||||
break;
|
|
||||||
case "otaEnd":
|
|
||||||
otaStartsegment = 0;
|
|
||||||
otaStarted = 0;
|
|
||||||
document.getElementById("otaStartCancel").classList.add("hidden");
|
|
||||||
document.getElementById("otaStartCancel").innerHTML = "<svg class='icon'><use href='#play-icon'></use></svg> Начать обновление";
|
|
||||||
updateProgress(otaData.length, otaData.length);
|
|
||||||
document.getElementById("otaFileSelect").disabled = false;
|
|
||||||
document.getElementById("otaReStart").classList.remove("hidden");
|
|
||||||
document.getElementById("otaReStart").innerHTML = "<svg class='icon'><use href='#power-icon'></use></svg> Прошивка загружена. Перезагрузить устройство";
|
|
||||||
document.getElementById("otaReStart").disabled = false;
|
|
||||||
showStatus("Прошивка успешно загружена", "success");
|
|
||||||
break;
|
|
||||||
case "otaError":
|
|
||||||
case "otaCancel":
|
|
||||||
otaStartsegment = 0;
|
|
||||||
otaStarted = 0;
|
|
||||||
document.getElementById("otaStartCancel").classList.remove("hidden");
|
|
||||||
document.getElementById("otaStartCancel").innerHTML = "<svg class='icon'><use href='#play-icon'></use></svg> Начать обновление";
|
|
||||||
document.getElementById("otaFileSelect").disabled = false;
|
|
||||||
document.getElementById("otaReStart").classList.remove("hidden");
|
|
||||||
document.getElementById("otaReStart").innerHTML = "Загрузка отменена: " + obj.value;
|
|
||||||
document.getElementById("otaReStart").disabled = true;
|
|
||||||
showStatus("Загрузка отменена: " + obj.value, "error");
|
|
||||||
break;
|
|
||||||
case "otaCheckRollback":
|
|
||||||
document.getElementById("rollback").classList.remove("hidden");
|
|
||||||
document.getElementById("update").classList.add("hidden");
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
} catch {
|
|
||||||
console.log(data + "Error msg");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// WebSocket connection
|
|
||||||
let protocol = "ws:";
|
|
||||||
if (document.location.protocol == "https:") protocol = "wss:";
|
|
||||||
let wsHostStr = protocol + "//" + document.location.host + document.location.pathname;
|
|
||||||
wsHostStr += (document.location.pathname == '/') ? "ws" : "/ws";
|
|
||||||
var socket = new WebSocket(wsHostStr);
|
|
||||||
socket.binaryType = "arraybuffer";
|
|
||||||
|
|
||||||
// WebSocket events
|
|
||||||
socket.onopen = function () {
|
|
||||||
console.log("connect ws");
|
|
||||||
document.getElementById("status-text").textContent = "Подключено";
|
|
||||||
document.querySelector(".connection-status").classList.remove("disconnected");
|
|
||||||
document.querySelector(".connection-status").classList.add("connected");
|
|
||||||
};
|
|
||||||
|
|
||||||
socket.onclose = function (event) {
|
|
||||||
console.log("close ws - reload");
|
|
||||||
document.getElementById("status-text").textContent = "Не подключено";
|
|
||||||
document.querySelector(".connection-status").classList.remove("connected");
|
|
||||||
document.querySelector(".connection-status").classList.add("disconnected");
|
|
||||||
setTimeout(() => document.location.reload(), 2000);
|
|
||||||
};
|
|
||||||
|
|
||||||
socket.onerror = function () {
|
|
||||||
console.log("error ws");
|
|
||||||
document.getElementById("status-text").textContent = "Ошибка подключения";
|
|
||||||
document.querySelector(".connection-status").classList.remove("connected");
|
|
||||||
document.querySelector(".connection-status").classList.add("disconnected");
|
|
||||||
setTimeout(() => document.location.reload(), 2000);
|
|
||||||
};
|
|
||||||
|
|
||||||
socket.onmessage = function (event) {
|
|
||||||
receiveWsData(event.data);
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
Reference in New Issue
Block a user