В процессе работы
This commit is contained in:
@@ -1,8 +1,8 @@
|
||||
// app.ts - Оркестратор приложения
|
||||
|
||||
import {
|
||||
fetchHealth,
|
||||
fetchHistory
|
||||
fetchHealth,
|
||||
fetchHistory
|
||||
} from "./data.js";
|
||||
import {
|
||||
state,
|
||||
@@ -22,6 +22,7 @@ import {
|
||||
setAudioIndicator,
|
||||
DOM,
|
||||
setChannelValue,
|
||||
setChannelCurrentValue,
|
||||
channelElements
|
||||
} from "./ui.js";
|
||||
import { initAccordion } from "./accordion.js";
|
||||
@@ -159,7 +160,8 @@ async function update(): Promise<void> {
|
||||
// ===== НАХОДИМ МАКСИМУМ ИЗ БУФЕРА =====
|
||||
let maxSignal = 0;
|
||||
let maxLevel = 0;
|
||||
let lastSignal = 0;
|
||||
let currentSignal = 0;
|
||||
let currentLevel = 0;
|
||||
|
||||
if (isOnline && arr.length > 0) {
|
||||
for (const byte of arr) {
|
||||
@@ -174,7 +176,8 @@ async function update(): Promise<void> {
|
||||
}
|
||||
}
|
||||
|
||||
lastSignal = raw & 0x3F;
|
||||
currentSignal = raw & 0x3F;
|
||||
currentLevel = (raw >> 6) & 0x3;
|
||||
}
|
||||
|
||||
const percent = (maxSignal / 63) * 100;
|
||||
@@ -182,9 +185,11 @@ async function update(): Promise<void> {
|
||||
// ===== ОБНОВЛЯЕМ КАНАЛЫ =====
|
||||
if (isOnline && arr.length > 0) {
|
||||
setChannelValue(0, maxSignal, maxLevel);
|
||||
setChannelCurrentValue(0, currentSignal, currentLevel);
|
||||
|
||||
for (let i = 1; i < 8; i++) {
|
||||
setChannelValue(i, 0, 0);
|
||||
setChannelCurrentValue(i, 0, 0);
|
||||
if (channelElements[i]) {
|
||||
channelElements[i].item.classList.remove('channel-active');
|
||||
}
|
||||
@@ -195,11 +200,12 @@ async function update(): Promise<void> {
|
||||
}
|
||||
|
||||
if (DOM.lastByte) {
|
||||
DOM.lastByte.textContent = lastSignal.toString();
|
||||
DOM.lastByte.textContent = currentSignal.toString();
|
||||
}
|
||||
} else {
|
||||
for (let i = 0; i < 8; i++) {
|
||||
setChannelValue(i, 0, 0);
|
||||
setChannelCurrentValue(i, 0, 0);
|
||||
if (channelElements[i]) {
|
||||
channelElements[i].item.classList.remove('channel-active');
|
||||
}
|
||||
@@ -228,10 +234,22 @@ async function update(): Promise<void> {
|
||||
|
||||
setMeta(`Работа: ${uptime}s | Буфер: ${filled} | Приём: ${Bps} B/s`);
|
||||
|
||||
// ===== ИСТОРИЯ: НОВЫЕ СВЕРХУ =====
|
||||
if (DOM.history) {
|
||||
DOM.history.innerHTML = arr
|
||||
.map((b, i) => `[${i}] ${(b & 0xFF).toString(2).padStart(8, "0")} = ${b & 0xFF}`)
|
||||
.join("<br>");
|
||||
if (arr.length === 0) {
|
||||
DOM.history.innerHTML = 'Нет данных';
|
||||
} else {
|
||||
// Разворачиваем массив для отображения новых сверху
|
||||
const reversed = [...arr].reverse();
|
||||
DOM.history.innerHTML = reversed
|
||||
.map((b, i) => {
|
||||
const originalIndex = arr.length - 1 - i;
|
||||
// Форматируем: индекс, бинарное представление, десятичное значение
|
||||
const binary = (b & 0xFF).toString(2).padStart(8, "0");
|
||||
return `[${originalIndex}] ${binary} = ${b & 0xFF}`;
|
||||
})
|
||||
.join("<br>");
|
||||
}
|
||||
}
|
||||
|
||||
const now = performance.now();
|
||||
@@ -257,6 +275,10 @@ async function update(): Promise<void> {
|
||||
|
||||
if (DOM.lastByte) DOM.lastByte.textContent = "--";
|
||||
|
||||
if (DOM.history) {
|
||||
DOM.history.innerHTML = "Ошибка загрузки данных";
|
||||
}
|
||||
|
||||
if (consecutiveErrors >= MAX_ERRORS && pollTimer) {
|
||||
clearInterval(pollTimer);
|
||||
}
|
||||
|
||||
@@ -556,13 +556,13 @@ function initDataPaginationControls(): void {
|
||||
<div class="pagination-controls">
|
||||
<button id="dataFirstPage" class="pagination-btn" title="Первая страница (самые новые)">⏮</button>
|
||||
<button id="dataPrevPage" class="pagination-btn" title="Предыдущая страница (более новые)">◀</button>
|
||||
<span id="dataPageInfo" class="pagination-info">Страница 1 из 1</span>
|
||||
<button id="dataNextPage" class="pagination-btn" title="Следующая страница (более старые)">▶</button>
|
||||
<button id="dataLastPage" class="pagination-btn" title="Последняя страница (самые старые)">⏭</button>
|
||||
<span class="pagination-goto">
|
||||
<input type="number" id="dataPageInput" min="1" value="1" class="pagination-input">
|
||||
<button id="dataGoToPage" class="pagination-btn pagination-goto-btn">Перейти</button>
|
||||
</span>
|
||||
<span id="dataPageInfo" class="pagination-info">Страница 1 из 1</span>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@@ -618,13 +618,13 @@ function initEventsPaginationControls(): void {
|
||||
<div class="pagination-controls">
|
||||
<button id="firstPage" class="pagination-btn" title="Первая страница (самые новые)">⏮</button>
|
||||
<button id="prevPage" class="pagination-btn" title="Предыдущая страница (более новые)">◀</button>
|
||||
<span id="pageInfo" class="pagination-info">Страница 1 из 1</span>
|
||||
<button id="nextPage" class="pagination-btn" title="Следующая страница (более старые)">▶</button>
|
||||
<button id="lastPage" class="pagination-btn" title="Последняя страница (самые старые)">⏭</button>
|
||||
<span class="pagination-goto">
|
||||
<input type="number" id="pageInput" min="1" value="1" class="pagination-input">
|
||||
<button id="goToPage" class="pagination-btn pagination-goto-btn">Перейти</button>
|
||||
</span>
|
||||
<span id="pageInfo" class="pagination-info">Страница 1 из 1</span>
|
||||
</div>
|
||||
`;
|
||||
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
// state.ts - Peak Holder с сбросом до текущего максимума
|
||||
// state.ts - Peak Holder с фиксированным временем удержания
|
||||
|
||||
interface AppState {
|
||||
maxPoints: number;
|
||||
@@ -10,12 +10,14 @@ interface AppState {
|
||||
currentValue: number; // Текущий максимум из буфера
|
||||
peakTimer: number | null; // Таймер для сброса пика амплитуды
|
||||
peakHoldTime: number; // Время удержания пика в миллисекундах
|
||||
peakLocked: boolean; // Заблокирован ли пик (не сбрасывается до таймера)
|
||||
|
||||
// Peak Holder для уровня сигнала
|
||||
peakSignalLevel: number;
|
||||
currentSignalLevel: number; // Текущий максимум уровня из буфера
|
||||
currentSignalLevel: number;
|
||||
signalPeakTimer: number | null;
|
||||
signalPeakHoldTime: number;
|
||||
signalPeakLocked: boolean;
|
||||
|
||||
hasPeak: boolean;
|
||||
lastMaxSignal: number;
|
||||
@@ -32,11 +34,13 @@ export const state: AppState = {
|
||||
currentValue: 0,
|
||||
peakTimer: null,
|
||||
peakHoldTime: 3000,
|
||||
peakLocked: false,
|
||||
|
||||
peakSignalLevel: 0,
|
||||
currentSignalLevel: 0,
|
||||
signalPeakTimer: null,
|
||||
signalPeakHoldTime: 3000,
|
||||
signalPeakLocked: false,
|
||||
|
||||
hasPeak: false,
|
||||
lastMaxSignal: 0,
|
||||
@@ -67,14 +71,22 @@ export function updatePeakHolder(currentMax: number): number {
|
||||
state.currentValue = currentMax;
|
||||
state.lastMaxSignal = currentMax;
|
||||
|
||||
if (currentMax >= state.peakValue) {
|
||||
// Если пик заблокирован - ничего не меняем, только обновляем currentValue
|
||||
if (state.peakLocked) {
|
||||
return state.peakValue;
|
||||
}
|
||||
|
||||
// Если новое значение БОЛЬШЕ текущего пика - обновляем пик и блокируем
|
||||
if (currentMax > state.peakValue) {
|
||||
state.peakValue = currentMax;
|
||||
state.hasPeak = true;
|
||||
state.peakLocked = true;
|
||||
scheduleAmplitudePeakRelease();
|
||||
notifyPeakHolderChange();
|
||||
return state.peakValue;
|
||||
}
|
||||
|
||||
// Если новое значение МЕНЬШЕ или РАВНО - ничего не делаем
|
||||
return state.peakValue;
|
||||
}
|
||||
|
||||
@@ -86,9 +98,14 @@ export function updatePeakHolder(currentMax: number): number {
|
||||
export function updateSignalPeakHolder(currentMaxLevel: number): number {
|
||||
state.currentSignalLevel = currentMaxLevel;
|
||||
|
||||
if (currentMaxLevel >= state.peakSignalLevel) {
|
||||
if (state.signalPeakLocked) {
|
||||
return state.peakSignalLevel;
|
||||
}
|
||||
|
||||
if (currentMaxLevel > state.peakSignalLevel) {
|
||||
state.peakSignalLevel = currentMaxLevel;
|
||||
state.hasPeak = true;
|
||||
state.signalPeakLocked = true;
|
||||
scheduleSignalPeakRelease();
|
||||
notifyPeakHolderChange();
|
||||
return state.peakSignalLevel;
|
||||
@@ -108,9 +125,11 @@ function scheduleAmplitudePeakRelease(): void {
|
||||
}
|
||||
|
||||
state.peakTimer = window.setTimeout(() => {
|
||||
// Сбрасываем пик до текущего значения
|
||||
state.peakValue = state.currentValue;
|
||||
state.peakTimer = null;
|
||||
state.hasPeak = false;
|
||||
state.peakLocked = false;
|
||||
notifyPeakHolderChange();
|
||||
}, state.peakHoldTime);
|
||||
}
|
||||
@@ -125,6 +144,7 @@ function scheduleSignalPeakRelease(): void {
|
||||
state.peakSignalLevel = state.currentSignalLevel;
|
||||
state.signalPeakTimer = null;
|
||||
state.hasPeak = false;
|
||||
state.signalPeakLocked = false;
|
||||
notifyPeakHolderChange();
|
||||
}, state.signalPeakHoldTime);
|
||||
}
|
||||
@@ -161,6 +181,7 @@ export function forceResetSignalPeak(): void {
|
||||
state.currentSignalLevel = 0;
|
||||
state.hasPeak = false;
|
||||
state.lastMaxSignal = 0;
|
||||
state.signalPeakLocked = false;
|
||||
notifyPeakHolderChange();
|
||||
}
|
||||
|
||||
@@ -173,6 +194,7 @@ export function forceResetPeak(): void {
|
||||
state.currentValue = 0;
|
||||
state.hasPeak = false;
|
||||
state.lastMaxSignal = 0;
|
||||
state.peakLocked = false;
|
||||
forceResetSignalPeak();
|
||||
notifyPeakHolderChange();
|
||||
}
|
||||
|
||||
@@ -169,14 +169,18 @@ export function setHeightLevel(level: number): void {
|
||||
|
||||
// ===== 8 КАНАЛОВ =====
|
||||
export interface ChannelState {
|
||||
value: number;
|
||||
strength: number;
|
||||
value: number; // Максимальное значение (для прогресс-бара)
|
||||
currentValue: number; // Текущее значение (для отображения)
|
||||
strength: number; // Максимальный уровень
|
||||
currentStrength: number; // Текущий уровень
|
||||
expanded: boolean;
|
||||
}
|
||||
|
||||
export const channels: ChannelState[] = Array(8).fill(null).map(() => ({
|
||||
value: 0,
|
||||
currentValue: 0,
|
||||
strength: 0,
|
||||
currentStrength: 0,
|
||||
expanded: true
|
||||
}));
|
||||
|
||||
@@ -260,6 +264,10 @@ export function getChannelElement(index: number) {
|
||||
return channelElements[index] || null;
|
||||
}
|
||||
|
||||
/**
|
||||
* Установка МАКСИМАЛЬНОГО значения для прогресс-бара
|
||||
* (используется для отображения пика)
|
||||
*/
|
||||
export function setChannelValue(index: number, value: number, strength: number) {
|
||||
if (index < 0 || index > 7) return;
|
||||
|
||||
@@ -273,6 +281,7 @@ export function setChannelValue(index: number, value: number, strength: number)
|
||||
const maxValue = 63;
|
||||
const percent = (value / maxValue) * 100;
|
||||
|
||||
// Обновляем прогресс-бар
|
||||
if (el.bar) {
|
||||
el.bar.style.width = `${Math.min(100, percent)}%`;
|
||||
el.bar.style.background = '#e6852d';
|
||||
@@ -280,10 +289,7 @@ export function setChannelValue(index: number, value: number, strength: number)
|
||||
el.bar.style.backgroundImage = 'none';
|
||||
}
|
||||
|
||||
if (el.value) {
|
||||
el.value.textContent = value.toString();
|
||||
}
|
||||
|
||||
// Обновляем индикатор сигнала (уровень)
|
||||
const bars = el.signal?.querySelectorAll('.sig-bar');
|
||||
if (bars) {
|
||||
bars.forEach((bar: Element, i: number) => {
|
||||
@@ -292,9 +298,10 @@ export function setChannelValue(index: number, value: number, strength: number)
|
||||
});
|
||||
}
|
||||
|
||||
// Обновляем статистику
|
||||
const strengthNames = ['Отсутствует', 'Низкая', 'Средняя', 'Высокая'];
|
||||
if (el.stats) {
|
||||
el.stats.textContent = `${value}/${maxValue} | ${strengthNames[strength] || '---'}`;
|
||||
el.stats.textContent = `${ch.currentValue}/${maxValue} | ${strengthNames[ch.currentStrength] || '---'} (пик: ${value})`;
|
||||
}
|
||||
|
||||
if (el.item) {
|
||||
@@ -302,9 +309,53 @@ export function setChannelValue(index: number, value: number, strength: number)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Установка ТЕКУЩЕГО значения для отображения в цифрах
|
||||
* (используется для показа реального состояния)
|
||||
*/
|
||||
export function setChannelCurrentValue(index: number, value: number, strength: number) {
|
||||
if (index < 0 || index > 7) return;
|
||||
|
||||
const ch = channels[index];
|
||||
const el = channelElements[index];
|
||||
if (!el) return;
|
||||
|
||||
ch.currentValue = value;
|
||||
ch.currentStrength = strength;
|
||||
|
||||
// Обновляем числовое значение
|
||||
if (el.value) {
|
||||
el.value.textContent = value.toString();
|
||||
}
|
||||
|
||||
// Обновляем статистику (показываем текущее значение и пик)
|
||||
const maxValue = 63;
|
||||
const strengthNames = ['Отсутствует', 'Низкая', 'Средняя', 'Высокая'];
|
||||
if (el.stats) {
|
||||
el.stats.textContent = `${value}/${maxValue} | ${strengthNames[strength] || '---'} (пик: ${ch.value})`;
|
||||
}
|
||||
|
||||
// Обновляем индикатор сигнала (текущий уровень)
|
||||
const bars = el.signal?.querySelectorAll('.sig-bar');
|
||||
if (bars) {
|
||||
bars.forEach((bar: Element, i: number) => {
|
||||
const isActive = i < strength;
|
||||
// Если текущий уровень меньше максимального - добавляем класс dim
|
||||
if (isActive) {
|
||||
(bar as HTMLElement).classList.remove('dim');
|
||||
(bar as HTMLElement).classList.add('active-' + (i + 1));
|
||||
} else {
|
||||
(bar as HTMLElement).classList.add('dim');
|
||||
(bar as HTMLElement).classList.remove('active-' + (i + 1));
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
export function updateAllChannels(rawData?: number[]) {
|
||||
for (let i = 0; i < 8; i++) {
|
||||
setChannelValue(i, 0, 0);
|
||||
setChannelCurrentValue(i, 0, 0);
|
||||
if (channelElements[i]) {
|
||||
channelElements[i].item.classList.remove('channel-active');
|
||||
}
|
||||
@@ -316,6 +367,7 @@ export function updateAllChannels(rawData?: number[]) {
|
||||
const strength = (lastByte >> 6) & 0x3;
|
||||
|
||||
setChannelValue(0, value, strength);
|
||||
setChannelCurrentValue(0, value, strength);
|
||||
if (channelElements[0]) {
|
||||
channelElements[0].item.classList.add('channel-active');
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user