From 26d29bb3d012941c4ad56a4caa8b3da8b4c1288d Mon Sep 17 00:00:00 2001 From: Tomek Zebrowski Date: Thu, 22 Jan 2026 13:54:36 +0100 Subject: [PATCH 01/13] feat: add math channel --- index.html | 73 ++++++++++ src/mathchannels.js | 332 ++++++++++++++++++++++++++++++++++++++++++ src/palettemanager.js | 158 +++++++++++--------- src/ui.js | 66 +++++++-- 4 files changed, 548 insertions(+), 81 deletions(-) create mode 100644 src/mathchannels.js diff --git a/index.html b/index.html index 1153c9b..31db1e7 100644 --- a/index.html +++ b/index.html @@ -288,6 +288,27 @@

View Controls

+
+

Math Channels

+ +
+

+ Create virtual sensors using formulas (e.g. Boost, HP). +

+ + +
+
+

Anomaly Scanner

@@ -853,6 +874,57 @@

XY Scatter Analysis

+ +
@@ -892,5 +964,6 @@

XY Scatter Analysis

+ diff --git a/src/mathchannels.js b/src/mathchannels.js new file mode 100644 index 0000000..1b8aecb --- /dev/null +++ b/src/mathchannels.js @@ -0,0 +1,332 @@ +import { AppState } from './config.js'; +import { UI } from './ui.js'; + +class MathChannels { + #definitions; + + constructor() { + this.#definitions = this.#getDefinitions(); + this.#initWindowBindings(); + } + + #getDefinitions() { + return [ + { + id: 'est_power_kgh', + name: 'Estimated Power (HP) [Source: kg/h]', + description: + 'Converts kg/h to g/s, then estimates HP. (MAF / 3.6 * Factor)', + inputs: [ + { name: 'maf', label: 'Air Mass Flow (kg/h)' }, + { + name: 'factor', + label: 'Factor (Diesel ~1.35, Petrol ~1.25)', + isConstant: true, + defaultValue: 1.35, + }, + ], + formula: (values) => (values[0] / 3.6) * values[1], + }, + { + id: 'est_power_gs', + name: 'Estimated Power (HP) [Source: g/s]', + description: 'Direct g/s calculation. (MAF * Factor)', + inputs: [ + { name: 'maf', label: 'Air Mass Flow (g/s)' }, + { + name: 'factor', + label: 'Factor (Diesel ~1.35, Petrol ~1.25)', + isConstant: true, + defaultValue: 1.35, + }, + ], + formula: (values) => values[0] * values[1], + }, + { + id: 'boost', + name: 'Boost Pressure (Bar)', + description: 'MAP - Baro (Manifold - Atmospheric)', + inputs: [ + { name: 'map', label: 'Intake Manifold Pressure' }, + { name: 'baro', label: 'Atmospheric Pressure' }, + ], + formula: (values) => values[0] - values[1], + }, + { + id: 'afr_error', + name: 'AFR Error', + description: 'Commanded AFR - Measured AFR', + inputs: [ + { name: 'commanded', label: 'AFR Commanded' }, + { name: 'measured', label: 'AFR Measured' }, + ], + formula: (values) => values[0] - values[1], + }, + { + id: 'pressure_ratio', + name: 'Pressure Ratio', + description: 'MAP / Baro', + inputs: [ + { name: 'map', label: 'Intake Manifold Pressure' }, + { name: 'baro', label: 'Atmospheric Pressure' }, + ], + formula: (values) => (values[1] !== 0 ? values[0] / values[1] : 0), + }, + { + id: 'multiply_const', + name: 'Multiply by Constant', + description: 'Signal * Factor (Generic helper)', + inputs: [ + { name: 'source', label: 'Source Signal' }, + { + name: 'factor', + label: 'Factor', + isConstant: true, + defaultValue: 1.0, + }, + ], + formula: (values) => values[0] * values[1], + }, + ]; + } + + #initWindowBindings() { + window.openMathModal = () => this.#openModal(); + window.closeMathModal = () => this.#closeModal(); + window.onMathFormulaChange = () => this.#onFormulaChange(); + window.createMathChannel = () => this.#executeCreation(); + } + + createChannel(fileIndex, formulaId, inputMapping, newChannelName) { + const file = AppState.files[fileIndex]; + if (!file) throw new Error('No file selected or loaded.'); + + const definition = this.#definitions.find((d) => d.id === formulaId); + if (!definition) throw new Error('Invalid formula definition.'); + + const sourceSignals = []; + let masterTimeBase = null; + + definition.inputs.forEach((input, idx) => { + if (input.isConstant) { + const val = parseFloat(inputMapping[idx]); + if (isNaN(val)) + throw new Error(`Invalid constant value for ${input.label}`); + sourceSignals.push({ isConstant: true, value: val }); + } else { + const signalName = inputMapping[idx]; + const signalData = file.signals[signalName]; + + if (!signalData) + throw new Error(`Signal '${signalName}' not found in file.`); + + sourceSignals.push({ isConstant: false, data: signalData }); + + if (!masterTimeBase) masterTimeBase = signalData; + } + }); + + if (!masterTimeBase) + throw new Error('At least one input must be a signal.'); + + const resultData = []; + let min = Infinity; + let max = -Infinity; + + for (let i = 0; i < masterTimeBase.length; i++) { + const currentTime = masterTimeBase[i].x; + const currentValues = []; + + sourceSignals.forEach((source) => { + if (source.isConstant) { + currentValues.push(source.value); + } else { + const val = this.#interpolate(source.data, currentTime); + currentValues.push(val); + } + }); + + const calculatedY = definition.formula(currentValues); + + if (calculatedY < min) min = calculatedY; + if (calculatedY > max) max = calculatedY; + + resultData.push({ + x: currentTime, + y: calculatedY, + }); + } + + const finalName = newChannelName || `Math: ${definition.name}`; + + file.signals[finalName] = resultData; + + if (!file.metadata) file.metadata = {}; + file.metadata[finalName] = { + min: min, + max: max, + unit: 'Math', + }; + + if (!file.availableSignals.includes(finalName)) { + file.availableSignals.push(finalName); + file.availableSignals.sort(); + } + + return finalName; + } + + #interpolate(data, targetTime) { + if (!data || data.length === 0) return 0; + + if (targetTime <= data[0].x) return parseFloat(data[0].y); + if (targetTime >= data[data.length - 1].x) + return parseFloat(data[data.length - 1].y); + + let left = 0; + let right = data.length - 1; + + while (left <= right) { + const mid = Math.floor((left + right) / 2); + if (data[mid].x < targetTime) { + left = mid + 1; + } else { + right = mid - 1; + } + } + + const p1 = data[left - 1]; + const p2 = data[left]; + + if (!p1) return parseFloat(p2.y); + if (!p2) return parseFloat(p1.y); + + const t1 = p1.x; + const t2 = p2.x; + const y1 = parseFloat(p1.y); + const y2 = parseFloat(p2.y); + + if (t2 === t1) return y1; + + const fraction = (targetTime - t1) / (t2 - t1); + return y1 + (y2 - y1) * fraction; + } + + #openModal() { + const modal = document.getElementById('mathModal'); + if (modal) modal.style.display = 'flex'; + + const select = document.getElementById('mathFormulaSelect'); + if (!select) return; + + select.innerHTML = ''; + this.#definitions.forEach((def) => { + select.innerHTML += ``; + }); + + document.getElementById('mathInputsContainer').innerHTML = ''; + document.getElementById('mathChannelName').value = ''; + } + + #closeModal() { + const modal = document.getElementById('mathModal'); + if (modal) modal.style.display = 'none'; + } + + #onFormulaChange() { + const formulaId = document.getElementById('mathFormulaSelect').value; + const container = document.getElementById('mathInputsContainer'); + container.innerHTML = ''; + + const definition = this.#definitions.find((d) => d.id === formulaId); + if (!definition) return; + + document.getElementById('mathChannelName').value = + `Math: ${definition.name}`; + + if (AppState.files.length === 0) { + container.innerHTML = "

No log file loaded.

"; + return; + } + const file = AppState.files[0]; + const signalOptions = file.availableSignals + .map((s) => ``) + .join(''); + + definition.inputs.forEach((input, idx) => { + const wrapper = document.createElement('div'); + wrapper.style.marginBottom = '10px'; + + let inputHtml = ''; + if (input.isConstant) { + inputHtml = ``; + } else { + inputHtml = ``; + } + + wrapper.innerHTML = ` + + ${inputHtml} + `; + container.appendChild(wrapper); + + if (!input.isConstant) { + const sel = wrapper.querySelector('select'); + for (let opt of sel.options) { + if (opt.value.toLowerCase().includes(input.name.toLowerCase())) { + sel.value = opt.value; + break; + } + } + } + }); + } + + #executeCreation() { + const formulaId = document.getElementById('mathFormulaSelect').value; + const newName = document.getElementById('mathChannelName').value; + + if (!formulaId) { + alert('Please select a formula.'); + return; + } + + const definition = this.#definitions.find((d) => d.id === formulaId); + const inputMapping = []; + + for (let i = 0; i < definition.inputs.length; i++) { + const el = document.getElementById(`math-input-${i}`); + inputMapping.push(el.value); + } + + try { + const createdName = this.createChannel( + 0, + formulaId, + inputMapping, + newName + ); + + this.#closeModal(); + + if (typeof UI.renderSignalList === 'function') { + UI.renderSignalList(); + + setTimeout(() => { + const checkbox = document.querySelector( + `input[data-key="${createdName}"]` + ); + if (checkbox) { + checkbox.checked = true; + checkbox.dispatchEvent(new Event('change')); + } + }, 100); + } + } catch (e) { + console.error(e); + alert('Error creating channel: ' + e.message); + } + } +} + +export const mathChannels = new MathChannels(); diff --git a/src/palettemanager.js b/src/palettemanager.js index 2aacf46..193afd5 100644 --- a/src/palettemanager.js +++ b/src/palettemanager.js @@ -3,51 +3,47 @@ import { Preferences } from './preferences.js'; import { UI } from './ui.js'; import { AppState } from './config.js'; -/** - * PaletteManager Module - * Manages color assignment for chart signals, including custom palette overrides. - */ -export const PaletteManager = { - // Brand and vibrant palettes for dark mode - DARK_PALETTE: [ - '#e31837', - '#0051ba', - '#2dcc70', - '#f1c40f', - '#8e44ad', - '#e67e22', - '#00F2FF', - '#39FF14', - '#FF007F', - '#FFFF00', - '#BC13FE', - '#FF4D00', - '#00FF9F', - '#FFD700', - '#FF0000', - ], - - // Muted, high-contrast palettes for light mode - LIGHT_PALETTE: [ - '#1A73E8', - '#2E7D32', - '#C2185B', - '#F57C00', - '#7B1FA2', - '#D32F2F', - '#0097A7', - '#607D8B', - '#AFB42B', - ], - - DEFAULT_COLOR: '#888888', // Fallback for missing signals - - // --- Lifecycle --- +class PaletteManagerClass { + #DARK_PALETTE; + #LIGHT_PALETTE; + #DEFAULT_COLOR; + + constructor() { + this.#DARK_PALETTE = [ + '#e31837', + '#0051ba', + '#2dcc70', + '#f1c40f', + '#8e44ad', + '#e67e22', + '#00F2FF', + '#39FF14', + '#FF007F', + '#FFFF00', + '#BC13FE', + '#FF4D00', + '#00FF9F', + '#FFD700', + '#FF0000', + ]; + + this.#LIGHT_PALETTE = [ + '#1A73E8', + '#2E7D32', + '#C2185B', + '#F57C00', + '#7B1FA2', + '#D32F2F', + '#0097A7', + '#607D8B', + '#AFB42B', + ]; + + this.#DEFAULT_COLOR = '#888888'; + } init() { const customToggle = document.getElementById('pref-custom-palette'); - - // Use optional chaining and cleaner listener logic customToggle?.addEventListener('change', () => { Preferences.savePreferences(); UI.renderSignalList(); @@ -55,31 +51,43 @@ export const PaletteManager = { ChartManager.render(); } }); - }, - - // --- Color Logic --- + } - /** - * Generates a unique key for signal-specific color storage - */ getSignalKey(fileName, signalName) { return `${fileName}_${signalName}`; - }, + } + + hasColor(signalName, fileIdx = 0) { + return !!signalName; + } - /** - * Resolves the color for a signal based on index, file, and custom preferences. - */ getColorForSignal(fileIdx, sigIdx) { const fIdx = parseInt(fileIdx) || 0; const sIdx = parseInt(sigIdx) || 0; const file = AppState.files[fIdx]; - if (!file) return this.DEFAULT_COLOR; // + if (!file) return this.#DEFAULT_COLOR; + + const signalName = file.availableSignals[sIdx] || `Signal_${sIdx}`; + + return this.#resolveColor(file.name, signalName, fIdx, sIdx); + } - const signalName = file.availableSignals[sIdx]; - const key = this.getSignalKey(file.name, signalName); + getColor(signalName, fileIdx = 0) { + const file = AppState.files[fileIdx]; + if (!file) return this.#DEFAULT_COLOR; - // 1. Check for custom palette overrides + const idx = file.availableSignals.indexOf(signalName); + + if (idx !== -1) { + return this.getColorForSignal(fileIdx, idx); + } + + return this.#resolveColor(file.name, signalName, fileIdx, 999); + } + + #resolveColor(fileName, signalName, fIdx, sIdx) { + const key = this.getSignalKey(fileName, signalName); const { useCustomPalette } = Preferences.prefs; const customMap = Preferences.customPalette; @@ -87,17 +95,35 @@ export const PaletteManager = { return customMap[key]; } - // 2. Fallback to thematic rotation - const palette = this.getDefaultChartColors(); + if (signalName.startsWith('Math:')) { + return this.#generateHashColor(signalName); + } + + const palette = this.#getDefaultChartColors(); + if (sIdx === 999) { + let hash = 0; + for (let i = 0; i < signalName.length; i++) + hash = signalName.charCodeAt(i) + ((hash << 5) - hash); + return palette[Math.abs(hash) % palette.length]; + } + const colorIndex = (fIdx * 10 + sIdx) % palette.length; return palette[colorIndex]; - }, + } - /** - * Returns the active color palette based on current theme state - */ - getDefaultChartColors() { + #getDefaultChartColors() { const isDarkMode = document.body.classList.contains('pref-theme-dark'); - return isDarkMode ? this.DARK_PALETTE : this.LIGHT_PALETTE; - }, -}; + return isDarkMode ? this.#DARK_PALETTE : this.#LIGHT_PALETTE; + } + + #generateHashColor(str) { + let hash = 0; + for (let i = 0; i < str.length; i++) { + hash = str.charCodeAt(i) + ((hash << 5) - hash); + } + const c = (hash & 0x00ffffff).toString(16).toUpperCase(); + return '#' + '00000'.substring(0, 6 - c.length) + c; + } +} + +export const PaletteManager = new PaletteManagerClass(); diff --git a/src/ui.js b/src/ui.js index 0adea29..1561390 100644 --- a/src/ui.js +++ b/src/ui.js @@ -314,9 +314,15 @@ export const UI = { const container = UI.elements.signalList; if (!container) return; + if (!AppState.files || AppState.files.length === 0) { + container.innerHTML = + '
No signals available. Load a file first.
'; + return; + } + const isCustomEnabled = Preferences.prefs.useCustomPalette; - container.innerHTML = ` + const searchHtml = `
@@ -330,6 +336,8 @@ export const UI = {
`; + container.innerHTML = searchHtml; + const contentContainer = document.getElementById('signalListContent'); const fragment = document.createDocumentFragment(); @@ -342,16 +350,16 @@ export const UI = { fileHeader.style.cssText = `padding: 8px 5px; font-weight: bold; border-bottom: 1px solid var(--border-color); display: flex; justify-content: space-between; align-items: center; cursor: pointer; background: var(--sidebar-bg);`; fileHeader.innerHTML = ` - - - - ${file.name} - -
- - -
- `; + + + + ${file.name} + +
+ + +
+ `; const signalListContainer = document.createElement('div'); signalListContainer.id = `sig-list-f${fileIdx}`; @@ -366,7 +374,29 @@ export const UI = { }; file.availableSignals.forEach((signal, sigIdx) => { + const isMath = signal.startsWith('Math:'); const isImportant = DEFAULT_SIGNALS.some((k) => signal.includes(k)); + + let isCurrentlyVisible = false; + + if (ChartManager.viewMode === 'overlay') { + const chart = AppState.chartInstances[0]; + if (chart) { + const ds = chart.data.datasets.find( + (d) => d._fileIdx === fileIdx && d._signalKey === signal + ); + if (ds && !ds.hidden) isCurrentlyVisible = true; + } + } else { + const chart = AppState.chartInstances[fileIdx]; + if (chart) { + const ds = chart.data.datasets.find((d) => d.label === signal); + if (ds && !ds.hidden) isCurrentlyVisible = true; + } + } + + const isChecked = isCurrentlyVisible || isImportant; + const color = PaletteManager.getColorForSignal(fileIdx, sigIdx); const signalKey = PaletteManager.getSignalKey(file.name, signal); @@ -377,15 +407,18 @@ export const UI = { 'display: flex; align-items: center; gap: 8px; padding: 2px 5px;'; const uniqueId = `chk-f${fileIdx}-s${sigIdx}`; - const pickerStyle = `width: 18px; height: 18px; border: none; padding: 0; background: none; cursor: ${isCustomEnabled ? 'pointer' : 'default'}; opacity: ${isCustomEnabled ? '1' : '0.4'};`; + const labelStyle = isMath + ? 'font-size: 0.85em; flex-grow: 1; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #01804f; font-weight: bold;' + : 'font-size: 0.85em; flex-grow: 1; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;'; + signalItem.innerHTML = ` - - + + `; const picker = signalItem.querySelector('.signal-color-picker'); @@ -404,7 +437,6 @@ export const UI = { fragment.appendChild(fileGroup); }); - contentContainer.innerHTML = ''; contentContainer.appendChild(fragment); const searchInput = document.getElementById('signalSearchInput'); @@ -465,6 +497,8 @@ export const UI = { if (dataset) { dataset.hidden = !isVisible; chart.update('none'); + } else if (isVisible) { + ChartManager.render(); } } } else { @@ -474,6 +508,8 @@ export const UI = { if (dataset) { dataset.hidden = !isVisible; chart.update('none'); + } else if (isVisible) { + ChartManager.render(); } } } From 2e86c775b6067e005ee73c2d8eb3852cc72e270f Mon Sep 17 00:00:00 2001 From: Tomek Zebrowski Date: Thu, 22 Jan 2026 14:39:34 +0100 Subject: [PATCH 02/13] feat: update css --- src/style.css | 211 +++++++++++++++++++++++++++++++++----------------- 1 file changed, 139 insertions(+), 72 deletions(-) diff --git a/src/style.css b/src/style.css index 7cd5494..63e6019 100644 --- a/src/style.css +++ b/src/style.css @@ -1,18 +1,13 @@ :root { - /* Brand Color Palette */ --brand-green: #01804f; --brand-red: #c22636; --brand-blue: #1c3d72; - - /* Global Colors */ --dark-bg: #0a0a0a; --light-text: #f4f4f4; --gray-text: #a0a0a0; --bg-color: #fcfcfc; --sidebar-bg: #f8f9fa; --border-color: #ddd; - - /* Functional Variable Mappings */ --primary-red: var(--brand-red); --text-main: #333; --text-muted: #666; @@ -27,15 +22,22 @@ --nav-border: rgb(255 255 255 / 10%); --nav-text: #fff; --nav-shadow: 0 4px 30px rgb(0 0 0 / 10%); + --input-bg: #fff; + --input-border: #ddd; } body.dark-theme { --chart-canvas-bg: #1a1a1a; --text-main: #333; --text-muted: #666; + --card-bg: #1e1e1e; + --sidebar-bg: #252525; + --border-color: #333; + --input-bg: #2d2d2d; + --input-border: #444; + --text-color: #eee; } -/* Combined the duplicate sidebar selectors into one block */ body.dark-theme .sidebar-left, body.dark-theme .sidebar-right { font-weight: 500; @@ -69,7 +71,6 @@ canvas { border-radius: 4px; } -/* Base Layout */ body, html { margin: 0; @@ -163,7 +164,6 @@ body.docs-body.dark-theme .feature-card { user-select: none; } -/* Add a chevron icon using CSS */ .control-group h3::after { content: '\f107'; font-family: 'Font Awesome 6 Free'; @@ -753,38 +753,150 @@ input[type='range']::-webkit-slider-thumb { left: 0; width: 100%; height: 100%; - background: rgb(0 0 0 / 70%); - display: flex; - justify-content: center; + z-index: 10000; + display: none; align-items: center; - z-index: 2000; + justify-content: center; backdrop-filter: blur(4px); + background-color: rgb(0 0 0 / 50%); + transition: opacity 0.3s ease; } .modal-content { - background: white; - width: 90%; - max-width: 600px; + background: var(--card-bg, #fff); border-radius: 12px; - box-shadow: 0 20px 40px rgb(0 0 0 / 30%); - animation: slideUp 0.3s ease-out; + box-shadow: 0 20px 50px rgb(0 0 0 / 30%); + border: 1px solid rgb(255 255 255 / 10%); + width: 100%; + max-width: 480px; + overflow: hidden; + display: flex; + flex-direction: column; + animation: modalPopIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); +} + +#xyModal .modal-content { + max-width: 95vw !important; + height: 90vh !important; } .modal-header { - padding: 2px 20px; - border-bottom: 1px solid #eee; + background: var(--sidebar-bg, #f8f9fa); + padding: 15px 20px; + border-bottom: 1px solid var(--border-color, #eaeaea); display: flex; justify-content: space-between; align-items: center; } +.modal-header h2 { + font-size: 1.1rem; + font-weight: 600; + color: var(--text-color, #333); + margin: 0; + letter-spacing: 0.5px; +} + +.btn-close { + background: none; + border: none; + font-size: 1.5rem; + color: #999; + cursor: pointer; + transition: color 0.2s; + line-height: 1; + padding: 0 5px; +} + +.btn-close:hover { + color: var(--brand-red, #e31837); +} + .modal-body { + padding: 25px; + display: flex; + flex-direction: column; + gap: 15px; overflow-y: auto; max-height: calc(85vh - 120px); +} + +.modal-content .control-group label { + display: block; + margin-bottom: 8px; + font-size: 0.85rem; + font-weight: 600; + color: var(--text-muted, #666); + text-transform: uppercase; + letter-spacing: 0.5px; +} + +.template-select, +input[type='text'], +input[type='number'] { + width: 100%; + padding: 12px 15px; + border: 1px solid var(--border-color, #ddd); + border-radius: 8px; + background-color: var(--input-bg, #fff); + color: var(--text-color, #333); + font-size: 0.95rem; + transition: all 0.2s ease; + box-sizing: border-box; +} + +.template-select:focus, +input:focus { + outline: none; + border-color: var(--brand-red, #e31837); + box-shadow: 0 0 0 3px rgb(227 24 55 / 15%); +} + +.modal-footer { + padding: 15px 25px; + background: var(--sidebar-bg, #fff); + border-top: 1px solid var(--border-color, #eee); display: flex; - flex-direction: column; - height: 100%; - padding: 0; + justify-content: flex-end; +} + +.modal-footer .btn-primary { + background: linear-gradient( + 135deg, + var(--brand-red, #e31837) 0%, + #c0152e 100% + ); + color: white; + padding: 10px 24px; + border-radius: 6px; + font-weight: 600; + border: none; + cursor: pointer; + box-shadow: 0 4px 10px rgb(227 24 55 / 30%); + transition: + transform 0.1s, + box-shadow 0.2s; + width: auto; +} + +.modal-footer .btn-primary:hover { + transform: translateY(-1px); + box-shadow: 0 6px 15px rgb(227 24 55 / 40%); +} + +.modal-footer .btn-primary:active { + transform: translateY(1px); +} + +@keyframes modalPopIn { + 0% { + opacity: 0; + transform: scale(0.9) translateY(20px); + } + 100% { + opacity: 1; + transform: scale(1) translateY(0); + } } .app-description { @@ -904,7 +1016,6 @@ input[type='range']::-webkit-slider-thumb { .info-grid { display: grid; grid-template-columns: 1fr; - /* Stacked by default for mobile */ gap: 12px; margin-bottom: 15px; } @@ -1477,12 +1588,10 @@ body.analyzer-active .integrated-toolbar { display: none !important; } -/* Force the chart cards and canvases to be visible */ #chartContainer.has-data .chart-card-compact { display: flex; flex-direction: column; flex: 1; - /* Allow them to grow */ min-height: 300px; } @@ -1546,7 +1655,6 @@ a { font-weight: bold; } -/* --- Docs/Landing Page Specific Styles --- */ .docs-body { background-color: var(--dark-bg); color: var(--light-text); @@ -1665,7 +1773,6 @@ a { color: var(--text-muted); } -/* Modern Switch Toggle */ .switch { position: relative; display: inline-block; @@ -1843,7 +1950,6 @@ body.analyzer-active .nav-title { max-width: 280px; } -/* SPA Navigation Logic */ .analyzer-active .top-nav { position: static; background-color: var(--sidebar-bg); @@ -1918,7 +2024,6 @@ body.analyzer-active { padding: 0; } -/* Expand the scan results visibility */ #driveList { max-height: 450px !important; overflow-y: auto; @@ -2008,7 +2113,6 @@ body.analyzer-active { opacity: 0.7; } -/* Sidebar Source Container Polish */ .source-container { padding: 15px !important; background: #fff !important; @@ -2016,7 +2120,6 @@ body.analyzer-active { box-shadow: 0 4px 20px rgb(0 0 0 / 5%) !important; } -/* Modern Button Grid */ .source-button-grid { display: flex; gap: 10px; @@ -2049,7 +2152,6 @@ body.analyzer-active { font-size: 1.3em; } -/* Primary Style (Red) */ .source-btn.primary { background: #e31837; color: white; @@ -2062,7 +2164,6 @@ body.analyzer-active { box-shadow: 0 6px 18px rgb(227 24 55 / 35%); } -/* Secondary Style (Dark) */ .source-btn.secondary { background: #2c3e50; color: white; @@ -2181,40 +2282,6 @@ body.analyzer-active { background-color: #fff5f5; } -#xyModal .modal-content { - width: 95vw !important; - max-width: none !important; - height: 90vh !important; - display: flex; - flex-direction: column; -} - -#xyModal .modal-body { - flex: 1; - display: flex; - flex-direction: column; - overflow: hidden; - padding-bottom: 0; -} - -#chartContainer::-webkit-scrollbar { - width: 8px; -} - -#chartContainer::-webkit-scrollbar-track { - background: #f1f1f1; -} - -#chartContainer::-webkit-scrollbar-thumb { - background: #ccc; - border-radius: 4px; -} - -#chartContainer::-webkit-scrollbar-thumb:hover { - background: #999; -} - -/* --- Export & Annotation Controls --- */ .btn-xs { padding: 2px 6px; font-size: 0.7em; @@ -2240,9 +2307,9 @@ body.analyzer-active { .xy-legend-strip { position: relative; - width: 90px; /* Increased width to fit values */ + width: 90px; display: flex; - flex-direction: row; /* Side-by-side layout */ + flex-direction: row; align-items: stretch; padding: 10px 0; margin-left: 5px; @@ -2269,7 +2336,7 @@ body.analyzer-active { .legend-values { display: flex; flex-direction: column; - justify-content: space-between; /* Evenly spaces the numbers */ + justify-content: space-between; font-size: 0.75em; font-weight: bold; font-family: monospace; @@ -2280,7 +2347,7 @@ body.analyzer-active { .xy-legend-strip .gradient-bar { flex: 1; width: 12px; - margin: 5px 0 5px 15px; /* Add left margin to make room for text */ + margin: 5px 0 5px 15px; border-radius: 6px; border: 1px solid #ccc; background: linear-gradient(to top, blue, cyan, lime, yellow, red); @@ -2301,7 +2368,7 @@ body.analyzer-active { } .xy-panel-toolbar select { - min-width: 0; /* Flexbox fix */ + min-width: 0; } #analyzer-page { From ff73954bb09a5881e6164cf8f95bdea17f2b3b78 Mon Sep 17 00:00:00 2001 From: Tomek Zebrowski Date: Thu, 22 Jan 2026 15:31:07 +0100 Subject: [PATCH 03/13] feat: fix failing tests --- tests/palettemanager.test.js | 62 ++++++++++++++++++++++++++++++------ 1 file changed, 52 insertions(+), 10 deletions(-) diff --git a/tests/palettemanager.test.js b/tests/palettemanager.test.js index 9540677..eb37814 100644 --- a/tests/palettemanager.test.js +++ b/tests/palettemanager.test.js @@ -6,6 +6,38 @@ import { UI } from '../src/ui.js'; import { ChartManager } from '../src/chartmanager.js'; import { AppState } from '../src/config.js'; +// --- Replicate the palettes here for testing comparison --- +// We cannot access them from the instance anymore because they are private (#) +const EXPECTED_DARK_PALETTE = [ + '#e31837', + '#0051ba', + '#2dcc70', + '#f1c40f', + '#8e44ad', + '#e67e22', + '#00F2FF', + '#39FF14', + '#FF007F', + '#FFFF00', + '#BC13FE', + '#FF4D00', + '#00FF9F', + '#FFD700', + '#FF0000', +]; + +const EXPECTED_LIGHT_PALETTE = [ + '#1A73E8', + '#2E7D32', + '#C2185B', + '#F57C00', + '#7B1FA2', + '#D32F2F', + '#0097A7', + '#607D8B', + '#AFB42B', +]; + UI.setLoading = jest.fn(); UI.renderSignalList = jest.fn(); UI.updateDataLoadedState = jest.fn(); @@ -51,17 +83,26 @@ describe('PaletteManager', () => { expect(color).toBe('#FF00FF'); }); - test('getDefaultChartColors switches based on body class', () => { - // Test Light Mode (Default) - expect(PaletteManager.getDefaultChartColors()).toEqual( - PaletteManager.LIGHT_PALETTE - ); + test('returns correct color from active palette based on body theme', () => { + // Setup AppState so we can get a color + AppState.files = [{ name: 'log.csv', availableSignals: ['SignalA'] }]; + + Object.defineProperty(Preferences, 'prefs', { + get: jest.fn(() => ({ useCustomPalette: false })), + configurable: true, + }); + + // 1. Test Light Mode (Default) + document.body.classList.remove('pref-theme-dark'); + const lightColor = PaletteManager.getColorForSignal(0, 0); + // Should match the first color of the Light Palette + expect(lightColor).toBe(EXPECTED_LIGHT_PALETTE[0]); - // Test Dark Mode + // 2. Test Dark Mode document.body.classList.add('pref-theme-dark'); - expect(PaletteManager.getDefaultChartColors()).toEqual( - PaletteManager.DARK_PALETTE - ); + const darkColor = PaletteManager.getColorForSignal(0, 0); + // Should match the first color of the Dark Palette + expect(darkColor).toBe(EXPECTED_DARK_PALETTE[0]); }); test('getColorForSignal uses theme palette when custom is disabled', () => { @@ -79,7 +120,8 @@ describe('PaletteManager', () => { }); const color = PaletteManager.getColorForSignal(0, 0); - expect(color).toBe(PaletteManager.LIGHT_PALETTE[0]); + // Compare against our local constant instead of the private class field + expect(color).toBe(EXPECTED_LIGHT_PALETTE[0]); }); test('init attaches change listener to custom palette toggle', () => { From 62d993b19178e79071c636089867af9d19e7d426 Mon Sep 17 00:00:00 2001 From: Tomek Zebrowski Date: Thu, 22 Jan 2026 15:31:26 +0100 Subject: [PATCH 04/13] feat: disable matchannels when no chart is loaded --- index.html | 2 ++ src/ui.js | 18 +++++++++--------- 2 files changed, 11 insertions(+), 9 deletions(-) diff --git a/index.html b/index.html index 31db1e7..35bdb67 100644 --- a/index.html +++ b/index.html @@ -297,9 +297,11 @@

Math Channels

-
@@ -298,15 +294,13 @@

Math Channels

diff --git a/src/style.css b/src/style.css index b9c1f97..19cde63 100644 --- a/src/style.css +++ b/src/style.css @@ -24,6 +24,10 @@ --nav-shadow: 0 4px 30px rgb(0 0 0 / 10%); --input-bg: #fff; --input-border: #ddd; + --btn-radius: 8px; + --btn-shadow: 0 2px 5px rgb(0 0 0 / 10%); + --btn-hover-shadow: 0 4px 10px rgb(0 0 0 / 15%); + --btn-font-weight: 600; } body.dark-theme { @@ -255,15 +259,38 @@ input[type='number'] { } .btn { - background: white; - border: 1px solid #ccc; - padding: 6px 12px; + border-radius: var(--btn-radius); + padding: 10px 16px; + font-size: 0.9rem; + font-weight: var(--btn-font-weight); cursor: pointer; - border-radius: 4px; - font-weight: 600; - color: #333; - width: 100%; - transition: all 0.2s; + transition: all 0.2s ease; + display: inline-flex; + align-items: center; + justify-content: center; + gap: 8px; + background-color: #fff; + color: var(--text-main); + border: 1px solid var(--border-color); + box-shadow: var(--btn-shadow); +} + +.btn:hover:not(:disabled) { + transform: translateY(-1px); + box-shadow: var(--btn-hover-shadow); + background-color: #f8f9fa; +} + +.btn:active:not(:disabled) { + transform: translateY(0); +} + +.btn:disabled { + opacity: 0.5; + cursor: not-allowed; + box-shadow: none; + filter: grayscale(0.4); + pointer-events: none; } .btn:hover { @@ -271,19 +298,41 @@ input[type='number'] { } .btn-primary { - background: var(--brand-green); + background-color: var(--brand-green); color: white; border: none; } +.btn-primary:hover:not(:disabled) { + background-color: #016b42; +} + .btn-primary:hover { background: #01633d; } +.btn-add, +.btn-secondary { + background-color: var(--brand-blue); + color: white; + border: none; +} + +.btn-add:hover:not(:disabled), +.btn-secondary:hover:not(:disabled) { + background-color: #152e56; +} + +.btn-danger { + background-color: var(--brand-red); + color: white; + border: none; +} + .btn-sm { - width: auto; - padding: 2px 8px; - font-size: 0.8em; + padding: 4px 10px; + font-size: 0.8rem; + border-radius: 6px; } .btn-add { @@ -2127,15 +2176,13 @@ body.analyzer-active { margin-bottom: 15px; } -.source-btn { - flex: 1; - border: none; - border-radius: 10px; - padding: 12px 5px; - cursor: pointer; - transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); - position: relative; - overflow: hidden; + +.template-select, +input[type='text'], +input[type='number'] { + border-radius: var(--btn-radius) !important; + padding: 10px !important; + border: 1px solid var(--border-color); } .btn-content { @@ -2239,18 +2286,23 @@ body.analyzer-active { .view-mode-btn { flex: 1; padding: 10px; - font-size: 0.9rem; - font-weight: 500; + border-radius: var(--btn-radius); border: 1px solid var(--border-color); - background-color: white; + background: #fff; color: var(--text-muted); - border-radius: 6px; + font-weight: 500; cursor: pointer; + transition: all 0.2s; display: flex; align-items: center; justify-content: center; gap: 6px; - transition: all 0.2s ease; + box-shadow: var(--btn-shadow); +} + +.view-mode-btn:hover:not(.active) { + background-color: #f1f3f5; + color: var(--text-main); } .view-mode-btn:not(.active):hover { @@ -2264,7 +2316,7 @@ body.analyzer-active { color: white; border-color: var(--brand-blue); font-weight: 600; - box-shadow: 0 4px 6px rgb(28 61 114 / 20%); + box-shadow: 0 4px 8px rgb(28 61 114 / 30%); } .view-mode-btn.active i { From d182d85bcea1eae949a2cd2cec530dbb0466356a Mon Sep 17 00:00:00 2001 From: Tomek Zebrowski Date: Thu, 22 Jan 2026 17:20:28 +0100 Subject: [PATCH 09/13] feat: fix css formatting --- src/style.css | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/style.css b/src/style.css index 19cde63..b885e84 100644 --- a/src/style.css +++ b/src/style.css @@ -329,6 +329,12 @@ input[type='number'] { border: none; } +.btn-danger:hover:not(:disabled) { + background-color: #a01e2b; + color: white; + box-shadow: var(--btn-hover-shadow); +} + .btn-sm { padding: 4px 10px; font-size: 0.8rem; @@ -2176,7 +2182,6 @@ body.analyzer-active { margin-bottom: 15px; } - .template-select, input[type='text'], input[type='number'] { From 10a7d739bcc75ef8263ad8739da5f09ef16085cc Mon Sep 17 00:00:00 2001 From: Tomek Zebrowski Date: Thu, 22 Jan 2026 17:32:12 +0100 Subject: [PATCH 10/13] feat: add rule to calculate power from torque --- src/mathchannels.js | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) diff --git a/src/mathchannels.js b/src/mathchannels.js index f3911bf..2ac55bd 100644 --- a/src/mathchannels.js +++ b/src/mathchannels.js @@ -42,6 +42,17 @@ class MathChannels { ], formula: (values) => values[0] * values[1], }, + { + id: 'power_from_torque', + name: 'Calculated Power (HP) [Source: Torque]', + description: + 'Calculates HP from Torque (Nm) and RPM. (Torque * RPM / 7127)', + inputs: [ + { name: 'torque', label: 'Torque (Nm)' }, + { name: 'rpm', label: 'Engine RPM' }, + ], + formula: (values) => (values[0] * values[1]) / 7127, + }, { id: 'boost', name: 'Boost Pressure (Bar)', @@ -213,11 +224,12 @@ class MathChannels { } #openModal() { + if (AppState.files.length === 0) { alert('Please load a log file first.'); return; } - + const modal = document.getElementById('mathModal'); if (modal) modal.style.display = 'flex'; From d20dfb1db84470e23b081bd4ca38f388d88c22a8 Mon Sep 17 00:00:00 2001 From: Tomek Zebrowski Date: Thu, 22 Jan 2026 17:36:43 +0100 Subject: [PATCH 11/13] feat: add tests for power calculation --- src/mathchannels.js | 3 +-- tests/mathchannels.test.js | 38 ++++++++++++++++++++++++++++++++++++++ 2 files changed, 39 insertions(+), 2 deletions(-) diff --git a/src/mathchannels.js b/src/mathchannels.js index 2ac55bd..8f640ae 100644 --- a/src/mathchannels.js +++ b/src/mathchannels.js @@ -224,12 +224,11 @@ class MathChannels { } #openModal() { - if (AppState.files.length === 0) { alert('Please load a log file first.'); return; } - + const modal = document.getElementById('mathModal'); if (modal) modal.style.display = 'flex'; diff --git a/tests/mathchannels.test.js b/tests/mathchannels.test.js index 4639a3d..553c5cc 100644 --- a/tests/mathchannels.test.js +++ b/tests/mathchannels.test.js @@ -68,6 +68,44 @@ describe('MathChannels', () => { }).toThrow("Signal 'MissingSignal' not found"); }); + test('Calculated Power from Torque (Torque * RPM / 7127)', () => { + // Torque = 400 Nm, RPM = 5000 + // HP = (400 * 5000) / 7127 = 280.62... + const torqueData = [{ x: 100, y: 400 }]; + const rpmData = [{ x: 100, y: 5000 }]; + + AppState.files = [ + { + signals: { TQ: torqueData, RPM: rpmData }, + availableSignals: ['TQ', 'RPM'], + }, + ]; + + mathChannels.createChannel(0, 'power_from_torque', ['TQ', 'RPM'], 'HP'); + const result = AppState.files[0].signals['HP']; + + const expected = (400 * 5000) / 7127; + expect(result[0].y).toBeCloseTo(expected, 4); + }); + + test('Estimated Power from kg/h (MAF/3.6 * Factor)', () => { + // MAF = 360 kg/h -> 100 g/s. Factor = 1.35. Result should be 135. + const mafData = [{ x: 1, y: 360 }]; + + AppState.files = [ + { + signals: { MAF: mafData }, + availableSignals: ['MAF'], + }, + ]; + + // Input 0: Signal, Input 1: Constant + mathChannels.createChannel(0, 'est_power_kgh', ['MAF', '1.35'], 'EstHP'); + const result = AppState.files[0].signals['EstHP']; + + expect(result[0].y).toBeCloseTo(135, 1); + }); + test('successfully creates a channel with Multiply by Constant (Signal + Constant)', () => { const signalData = [ { x: 0, y: 10 }, From 6f38eb7307ad02ec01b30551030d0f70aef96333 Mon Sep 17 00:00:00 2001 From: Tomek Zebrowski Date: Thu, 22 Jan 2026 19:18:55 +0100 Subject: [PATCH 12/13] feat: seperate signals from math channels and regular signals --- src/style.css | 27 +++++++++++++++++++++++++++ src/ui.js | 47 +++++++++++++++++++++++++++++++++++++++++------ 2 files changed, 68 insertions(+), 6 deletions(-) diff --git a/src/style.css b/src/style.css index b885e84..07d391d 100644 --- a/src/style.css +++ b/src/style.css @@ -2445,3 +2445,30 @@ input[type='number'] { .empty-state-container { background: transparent !important; } + +.signal-separator { + display: flex; + align-items: center; + text-align: center; + margin: 10px 0 5px; + color: var(--text-muted); + font-size: 0.7em; + font-weight: bold; + text-transform: uppercase; + letter-spacing: 0.5px; +} + +.signal-separator::before, +.signal-separator::after { + content: ''; + flex: 1; + border-bottom: 1px dashed var(--border-color); +} + +.signal-separator::before { + margin-right: 0.5em; +} + +.signal-separator::after { + margin-left: 0.5em; +} diff --git a/src/ui.js b/src/ui.js index e3e31b2..9898ceb 100644 --- a/src/ui.js +++ b/src/ui.js @@ -373,12 +373,19 @@ export const UI = { : 'fas fa-chevron-right'; }; - file.availableSignals.forEach((signal, sigIdx) => { + const mathSignals = file.availableSignals + .filter((s) => s.startsWith('Math:')) + .sort(); + const regularSignals = file.availableSignals + .filter((s) => !s.startsWith('Math:')) + .sort(); + + const createSignalItem = (signal) => { + const sigIdx = file.availableSignals.indexOf(signal); const isMath = signal.startsWith('Math:'); const isImportant = DEFAULT_SIGNALS.some((k) => signal.includes(k)); let isCurrentlyVisible = false; - if (ChartManager.viewMode === 'overlay') { const chart = AppState.chartInstances[0]; if (chart) { @@ -396,9 +403,9 @@ export const UI = { } const isChecked = isCurrentlyVisible || isImportant; - const color = PaletteManager.getColorForSignal(fileIdx, sigIdx); const signalKey = PaletteManager.getSignalKey(file.name, signal); + const uniqueId = `chk-f${fileIdx}-s${sigIdx}`; const signalItem = document.createElement('div'); signalItem.className = 'signal-item'; @@ -406,7 +413,6 @@ export const UI = { signalItem.style.cssText = 'display: flex; align-items: center; gap: 8px; padding: 2px 5px;'; - const uniqueId = `chk-f${fileIdx}-s${sigIdx}`; const pickerStyle = `width: 18px; height: 18px; border: none; padding: 0; background: none; cursor: ${isCustomEnabled ? 'pointer' : 'default'}; opacity: ${isCustomEnabled ? '1' : '0.4'};`; const labelStyle = isMath @@ -419,7 +425,7 @@ export const UI = { data-signal-key="${signalKey}"> - `; + `; const picker = signalItem.querySelector('.signal-color-picker'); picker.onchange = (e) => { @@ -429,7 +435,31 @@ export const UI = { if (typeof ChartManager !== 'undefined') ChartManager.render(); }; - signalListContainer.appendChild(signalItem); + return signalItem; + }; + + if (mathSignals.length > 0) { + const mathSeparator = document.createElement('div'); + mathSeparator.className = 'signal-separator'; + mathSeparator.innerText = 'Math Channels'; + mathSeparator.setAttribute('data-type', 'separator'); + signalListContainer.appendChild(mathSeparator); + + mathSignals.forEach((signal) => { + signalListContainer.appendChild(createSignalItem(signal)); + }); + } + + if (mathSignals.length > 0 && regularSignals.length > 0) { + const separator = document.createElement('div'); + separator.className = 'signal-separator'; + separator.innerText = 'Log Data'; + separator.setAttribute('data-type', 'separator'); + signalListContainer.appendChild(separator); + } + + regularSignals.forEach((signal) => { + signalListContainer.appendChild(createSignalItem(signal)); }); fileGroup.appendChild(fileHeader); @@ -454,6 +484,7 @@ export const UI = { groups.forEach((group) => { let matchCount = 0; const items = group.querySelectorAll('.signal-item'); + const separators = group.querySelectorAll('.signal-separator'); items.forEach((item) => { const attr = item.getAttribute('data-signal-name'); @@ -462,6 +493,10 @@ export const UI = { if (isMatch) matchCount++; }); + separators.forEach((sep) => { + sep.style.display = term.length > 0 ? 'none' : 'flex'; + }); + group.style.display = matchCount > 0 ? 'block' : 'none'; const sigList = group.querySelector('[id^="sig-list-f"]'); if (term.length > 0 && matchCount > 0 && sigList) From 4ed996e3221a360f8189533f31c4685a56ae8557 Mon Sep 17 00:00:00 2001 From: Tomek Zebrowski Date: Thu, 22 Jan 2026 19:46:46 +0100 Subject: [PATCH 13/13] feat: add custom process for match channels --- src/mathchannels.js | 142 +++++++++++++++++++++++++++++++++++++ tests/mathchannels.test.js | 105 +++++++++++++++++++++++++++ 2 files changed, 247 insertions(+) diff --git a/src/mathchannels.js b/src/mathchannels.js index 8f640ae..4b01219 100644 --- a/src/mathchannels.js +++ b/src/mathchannels.js @@ -11,6 +11,79 @@ class MathChannels { #getDefinitions() { return [ + { + id: 'acceleration', + name: 'Acceleration (m/s²) [0-100 Logic]', + description: + 'Calculates acceleration from Speed. Use window to smooth noise.', + inputs: [ + { name: 'speed', label: 'Speed (km/h)' }, + { + name: 'window', + label: 'Smoothing Window (Samples)', + isConstant: true, + defaultValue: 4, + }, + ], + customProcess: (sourceData, constants) => { + const windowSize = Math.max(1, Math.round(constants[0])); + const result = []; + + for (let i = windowSize; i < sourceData.length; i++) { + const p1 = sourceData[i - windowSize]; + const p2 = sourceData[i]; + + const dt = (p2.x - p1.x) / 1000; + if (dt <= 0) continue; + + const dv = (p2.y - p1.y) / 3.6; + + const accel = dv / dt; + + result.push({ + x: p2.x, + y: accel, + }); + } + return result; + }, + }, + { + id: 'smoothing', + name: 'Smooth Signal (Moving Average)', + description: 'Reduces noise by averaging the last N samples.', + inputs: [ + { name: 'source', label: 'Signal to Smooth' }, + { + name: 'window', + label: 'Window Size (Samples)', + isConstant: true, + defaultValue: 5, + }, + ], + customProcess: (sourceData, constants) => { + const windowSize = Math.max(1, Math.round(constants[0])); + const smoothed = []; + + for (let i = 0; i < sourceData.length; i++) { + let sum = 0; + let count = 0; + + for (let j = 0; j < windowSize; j++) { + if (i - j >= 0) { + sum += sourceData[i - j].y; + count++; + } + } + + smoothed.push({ + x: sourceData[i].x, + y: sum / count, + }); + } + return smoothed; + }, + }, { id: 'est_power_kgh', name: 'Estimated Power (HP) [Source: kg/h]', @@ -115,6 +188,15 @@ class MathChannels { const definition = this.#definitions.find((d) => d.id === formulaId); if (!definition) throw new Error('Invalid formula definition.'); + if (definition.customProcess) { + return this.#executeCustomProcess( + file, + definition, + inputMapping, + newChannelName + ); + } + const sourceSignals = []; let masterTimeBase = null; @@ -187,6 +269,66 @@ class MathChannels { return finalName; } + #executeCustomProcess(file, definition, inputMapping, newChannelName) { + // Extract inputs strictly for custom processor + const signals = []; + const constants = []; + + definition.inputs.forEach((input, idx) => { + if (input.isConstant) { + const val = parseFloat(inputMapping[idx]); + if (isNaN(val)) + throw new Error(`Invalid constant value for ${input.label}`); + constants.push(val); + } else { + const signalName = inputMapping[idx]; + const signalData = file.signals[signalName]; + if (!signalData) throw new Error(`Signal '${signalName}' not found.`); + signals.push(signalData); + } + }); + + // For smoothing, we assume 1 signal input. + // Generalizing this would require more complex mapping, but for now: + if (signals.length === 0) + throw new Error('Custom process requires at least one signal.'); + + // Run the custom processor logic defined in #getDefinitions + const resultData = definition.customProcess(signals[0], constants); + + return this.#finalizeChannel( + file, + resultData, + newChannelName || `Math: ${definition.name}` + ); + } + + #finalizeChannel(file, resultData, finalName) { + let min = Infinity; + let max = -Infinity; + + for (const point of resultData) { + if (point.y < min) min = point.y; + if (point.y > max) max = point.y; + } + + file.signals[finalName] = resultData; + + if (!file.metadata) file.metadata = {}; + file.metadata[finalName] = { + min: min, + max: max, + unit: 'Math', + }; + + if (!file.availableSignals.includes(finalName)) { + file.availableSignals.push(finalName); + file.availableSignals.sort(); + } + + return finalName; + } + #interpolate(data, targetTime) { if (!data || data.length === 0) return 0; diff --git a/tests/mathchannels.test.js b/tests/mathchannels.test.js index 553c5cc..e0af074 100644 --- a/tests/mathchannels.test.js +++ b/tests/mathchannels.test.js @@ -106,6 +106,23 @@ describe('MathChannels', () => { expect(result[0].y).toBeCloseTo(135, 1); }); + test('Estimated Power from g/s (MAF * Factor)', () => { + // MAF = 100 g/s. Factor = 1.35. Result should be 135. + const mafData = [{ x: 1, y: 100 }]; + + AppState.files = [ + { + signals: { MAF: mafData }, + availableSignals: ['MAF'], + }, + ]; + + mathChannels.createChannel(0, 'est_power_gs', ['MAF', '1.35'], 'EstHP'); + const result = AppState.files[0].signals['EstHP']; + + expect(result[0].y).toBeCloseTo(135, 1); + }); + test('successfully creates a channel with Multiply by Constant (Signal + Constant)', () => { const signalData = [ { x: 0, y: 10 }, @@ -258,6 +275,94 @@ describe('MathChannels', () => { expect(res[0].y).toBe(10 - 20); // -10 }); + + test('Acceleration (m/s²) - Custom Process', () => { + // 0 to 100 km/h in 5 seconds linear acceleration. + // 100 km/h = 27.777 m/s + // Accel = 27.777 / 5 = 5.55 m/s^2 + + const speedData = [ + { x: 0, y: 0 }, + { x: 1000, y: 20 }, // 20 km/h + { x: 2000, y: 40 }, // 40 km/h + ]; + // At t=1000 (1s), deltaV = 20 km/h = 5.555... m/s. deltaT = 1s. + + AppState.files = [ + { + signals: { Speed: speedData }, + availableSignals: ['Speed'], + }, + ]; + + // Input 0: Speed, Input 1: Window Size (1) + mathChannels.createChannel(0, 'acceleration', ['Speed', '1'], 'Accel'); + const result = AppState.files[0].signals['Accel']; + + // The logic loop starts at i=windowSize (1) + expect(result.length).toBeGreaterThan(0); + + // Obliczamy oczekiwaną wartość dokładnie tak jak kod: (20 km/h w m/s) / 1s + const expectedValue = 20 / 3.6 / 1; + + expect(result[0].y).toBeCloseTo(expectedValue, 4); + }); + + test('Smoothing (Moving Average) - Custom Process', () => { + const noisySignal = [ + { x: 1, y: 10 }, + { x: 2, y: 20 }, + { x: 3, y: 10 }, + { x: 4, y: 20 }, + ]; + + AppState.files = [ + { + signals: { Noisy: noisySignal }, + availableSignals: ['Noisy'], + }, + ]; + + // Input 0: Signal, Input 1: Window Size (2) + mathChannels.createChannel(0, 'smoothing', ['Noisy', '2'], 'Smooth'); + const result = AppState.files[0].signals['Smooth']; + + // Index 0 (x=1): Avg(10) = 10 + expect(result[0].y).toBe(10); + + // Index 1 (x=2): Avg(10, 20) = 15 + expect(result[1].y).toBe(15); + + // Index 2 (x=3): Avg(20, 10) = 15 + expect(result[2].y).toBe(15); + }); + + test('Pressure Ratio (MAP / Baro) with Zero Division check', () => { + const mapData = [ + { x: 1, y: 2000 }, + { x: 2, y: 2000 }, + ]; + const baroData = [ + { x: 1, y: 1000 }, // Normal case + { x: 2, y: 0 }, // Edge case: Division by zero + ]; + + AppState.files = [ + { + signals: { MAP: mapData, Baro: baroData }, + availableSignals: ['MAP', 'Baro'], + }, + ]; + + mathChannels.createChannel(0, 'pressure_ratio', ['MAP', 'Baro'], 'PR'); + const result = AppState.files[0].signals['PR']; + + // Case 1: 2000 / 1000 = 2 + expect(result[0].y).toBe(2); + + // Case 2: 2000 / 0 -> Should be handled (returns 0 in formula) + expect(result[1].y).toBe(0); + }); }); describe('UI Interactions', () => {