localhorst/LiXX_Cell_Pack_Matcher
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

live results

Browse Source
This commit is contained in:
Hendrik Schutter
2025-12-20 20:46:51 +01:00
parent eaf90b42e6
commit d7557635ee
4 changed files with 474 additions and 523 deletions
Download Patch File Download Diff File Expand all files Collapse all files

478
js/app.js
View File

@ -1,8 +1,6 @@
/**
* LiXX Cell Pack Matcher - Main Application
*
* A web application for optimal matching of lithium battery cells.
* Supports capacity and internal resistance matching with multiple algorithms.
* Uses Web Workers for non-blocking computation.
*/
// =============================================================================
@ -12,7 +10,7 @@
const AppState = {
cells: [],
cellIdCounter: 0,
currentAlgorithm: null,
worker: null,
isRunning: false,
results: null
};
@ -22,13 +20,10 @@ const AppState = {
// =============================================================================
const DOM = {
// Configuration
cellsSerial: document.getElementById('cells-serial'),
cellsParallel: document.getElementById('cells-parallel'),
configDisplay: document.getElementById('config-display'),
totalCellsNeeded: document.getElementById('total-cells-needed'),
// Cell input
cellTbody: document.getElementById('cell-tbody'),
btnAddCell: document.getElementById('btn-add-cell'),
btnLoadExample: document.getElementById('btn-load-example'),
@ -36,27 +31,24 @@ const DOM = {
statCount: document.getElementById('stat-count'),
statAvgCap: document.getElementById('stat-avg-cap'),
statAvgIr: document.getElementById('stat-avg-ir'),
// Settings
weightCapacity: document.getElementById('weight-capacity'),
weightIr: document.getElementById('weight-ir'),
weightCapValue: document.getElementById('weight-cap-value'),
weightIrValue: document.getElementById('weight-ir-value'),
algorithmSelect: document.getElementById('algorithm-select'),
maxIterations: document.getElementById('max-iterations'),
// Matching
btnStartMatching: document.getElementById('btn-start-matching'),
btnStopMatching: document.getElementById('btn-stop-matching'),
// Progress
progressSection: document.getElementById('progress-section'),
progressFill: document.getElementById('progress-fill'),
progressIteration: document.getElementById('progress-iteration'),
progressCombinations: document.getElementById('progress-combinations'),
progressScore: document.getElementById('progress-score'),
progressTime: document.getElementById('progress-time'),
// Results
progressSpeed: document.getElementById('progress-speed'),
progressEta: document.getElementById('progress-eta'),
livePreview: document.getElementById('live-preview'),
livePreviewContent: document.getElementById('live-preview-content'),
resultsSection: document.getElementById('results-section'),
resultScore: document.getElementById('result-score'),
resultCapVariance: document.getElementById('result-cap-variance'),
@ -66,32 +58,48 @@ const DOM = {
resultsTbody: document.getElementById('results-tbody'),
excludedCellsSection: document.getElementById('excluded-cells-section'),
excludedCellsList: document.getElementById('excluded-cells-list'),
// Export
btnExportJson: document.getElementById('btn-export-json'),
btnExportCsv: document.getElementById('btn-export-csv'),
btnCopyResults: document.getElementById('btn-copy-results'),
// Dialog
shortcutsDialog: document.getElementById('shortcuts-dialog'),
btnCloseShortcuts: document.getElementById('btn-close-shortcuts')
};
// =============================================================================
// Utility Functions
// =============================================================================
function formatDuration(ms) {
if (ms < 1000) return `${Math.round(ms)}ms`;
if (ms < 60000) return `${(ms / 1000).toFixed(1)}s`;
if (ms < 3600000) {
const mins = Math.floor(ms / 60000);
const secs = Math.round((ms % 60000) / 1000);
return `${mins}m ${secs}s`;
}
const hours = Math.floor(ms / 3600000);
const mins = Math.round((ms % 3600000) / 60000);
return `${hours}h ${mins}m`;
}
function formatNumber(num) {
if (num === Infinity) return '∞';
if (num >= 1e9) return `${(num / 1e9).toFixed(1)}B`;
if (num >= 1e6) return `${(num / 1e6).toFixed(1)}M`;
if (num >= 1e3) return `${(num / 1e3).toFixed(1)}K`;
return num.toLocaleString();
}
// =============================================================================
// Configuration Management
// =============================================================================
/**
* Update the configuration display.
*/
function updateConfigDisplay() {
const serial = parseInt(DOM.cellsSerial.value) || 1;
const parallel = parseInt(DOM.cellsParallel.value) || 1;
const total = serial * parallel;
DOM.configDisplay.textContent = `${serial}S${parallel}P`;
DOM.totalCellsNeeded.textContent = total;
updateMatchingButtonState();
}
@ -99,10 +107,6 @@ function updateConfigDisplay() {
// Cell Management
// =============================================================================
/**
* Add a new cell row to the table.
* @param {Object} cellData - Optional initial data
*/
function addCell(cellData = null) {
const id = AppState.cellIdCounter++;
const label = cellData?.label || `C${String(AppState.cells.length + 1).padStart(2, '0')}`;
@ -116,76 +120,48 @@ function addCell(cellData = null) {
row.dataset.cellId = id;
row.innerHTML = `
<td>${AppState.cells.length}</td>
<td>
<input type="text" class="cell-label-input" value="${label}"
aria-label="Cell label" data-field="label">
</td>
<td>
<input type="number" min="0" max="99999" value="${capacity}"
aria-label="Capacity in mAh" data-field="capacity" placeholder="mAh">
</td>
<td>
<input type="number" min="0" max="9999" step="0.1" value="${ir}"
aria-label="Internal resistance in milliohms" data-field="ir" placeholder="optional">
</td>
<td>
<button type="button" class="btn-remove" aria-label="Remove cell" data-remove="${id}">
✕
</button>
</td>
<td><input type="text" class="cell-label-input" value="${label}" aria-label="Cell label" data-field="label"></td>
<td><input type="number" min="0" max="99999" value="${capacity}" aria-label="Capacity in mAh" data-field="capacity" placeholder="mAh"></td>
<td><input type="number" min="0" max="9999" step="0.1" value="${ir}" aria-label="Internal resistance in milliohms" data-field="ir" placeholder="optional"></td>
<td><button type="button" class="btn-remove" aria-label="Remove cell" data-remove="${id}">✕</button></td>
`;
DOM.cellTbody.appendChild(row);
// Add event listeners
row.querySelectorAll('input').forEach(input => {
input.addEventListener('change', () => updateCellData(id, input.dataset.field, input.value));
input.addEventListener('input', () => updateCellData(id, input.dataset.field, input.value));
});
row.querySelector('.btn-remove').addEventListener('click', () => removeCell(id));
updateCellStats();
updateMatchingButtonState();
// Focus the capacity input of the new row
if (!cellData) {
row.querySelector('input[data-field="capacity"]').focus();
}
}
/**
* Update cell data when input changes.
*/
function updateCellData(id, field, value) {
const cell = AppState.cells.find(c => c.id === id);
if (!cell) return;
if (field === 'label') {
cell.label = value || `C${id}`;
} else if (field === 'capacity') {
cell.capacity = value ? parseFloat(value) : null;
} else if (field === 'ir') {
cell.ir = value ? parseFloat(value) : null;
}
if (field === 'label') cell.label = value || `C${id}`;
else if (field === 'capacity') cell.capacity = value ? parseFloat(value) : null;
else if (field === 'ir') cell.ir = value ? parseFloat(value) : null;
updateCellStats();
updateMatchingButtonState();
}
/**
* Remove a cell from the table.
*/
function removeCell(id) {
const index = AppState.cells.findIndex(c => c.id === id);
if (index === -1) return;
AppState.cells.splice(index, 1);
const row = DOM.cellTbody.querySelector(`tr[data-cell-id="${id}"]`);
if (row) row.remove();
// Update row numbers
DOM.cellTbody.querySelectorAll('tr').forEach((row, idx) => {
row.querySelector('td:first-child').textContent = idx + 1;
});
@ -194,23 +170,15 @@ function removeCell(id) {
updateMatchingButtonState();
}
/**
* Clear all cells.
*/
function clearAllCells() {
if (AppState.cells.length > 0 && !confirm('Clear all cells?')) return;
AppState.cells = [];
AppState.cellIdCounter = 0;
DOM.cellTbody.innerHTML = '';
updateCellStats();
updateMatchingButtonState();
}
/**
* Update cell statistics display.
*/
function updateCellStats() {
const count = AppState.cells.length;
DOM.statCount.textContent = count;
@ -224,50 +192,28 @@ function updateCellStats() {
const capacities = AppState.cells.filter(c => c.capacity).map(c => c.capacity);
const irs = AppState.cells.filter(c => c.ir).map(c => c.ir);
if (capacities.length > 0) {
const avgCap = capacities.reduce((a, b) => a + b, 0) / capacities.length;
DOM.statAvgCap.textContent = `${Math.round(avgCap)} mAh`;
} else {
DOM.statAvgCap.textContent = '-';
}
if (irs.length > 0) {
const avgIr = irs.reduce((a, b) => a + b, 0) / irs.length;
DOM.statAvgIr.textContent = `${avgIr.toFixed(1)} mΩ`;
} else {
DOM.statAvgIr.textContent = '-';
}
DOM.statAvgCap.textContent = capacities.length > 0
? `${Math.round(capacities.reduce((a, b) => a + b, 0) / capacities.length)} mAh` : '-';
DOM.statAvgIr.textContent = irs.length > 0
? `${(irs.reduce((a, b) => a + b, 0) / irs.length).toFixed(1)} mΩ` : '-';
}
/**
* Load example cell data.
*/
function loadExampleData() {
if (AppState.cells.length > 0 && !confirm('Replace current cells with example data?')) return;
// Clear without confirmation since we just asked
AppState.cells = [];
AppState.cellIdCounter = 0;
DOM.cellTbody.innerHTML = '';
// Example: 14 cells for a 6S2P pack (2 spare)
const exampleCells = [
{ label: 'B01', capacity: 3330, ir: 42 },
{ label: 'B02', capacity: 3360, ir: 38 },
{ label: 'B03', capacity: 3230, ir: 45 },
{ label: 'B04', capacity: 3390, ir: 41 },
{ label: 'B05', capacity: 3280, ir: 44 },
{ label: 'B06', capacity: 3350, ir: 39 },
{ label: 'B07', capacity: 3350, ir: 40 },
{ label: 'B08', capacity: 3490, ir: 36 },
{ label: 'B09', capacity: 3280, ir: 43 },
{ label: 'B10', capacity: 3420, ir: 37 },
{ label: 'B11', capacity: 3350, ir: 41 },
{ label: 'B12', capacity: 3420, ir: 38 },
{ label: 'B13', capacity: 3150, ir: 52 }, // Spare - lower quality
{ label: 'B14', capacity: 3380, ir: 40 } // Spare
{ label: 'B01', capacity: 3330, ir: 42 }, { label: 'B02', capacity: 3360, ir: 38 },
{ label: 'B03', capacity: 3230, ir: 45 }, { label: 'B04', capacity: 3390, ir: 41 },
{ label: 'B05', capacity: 3280, ir: 44 }, { label: 'B06', capacity: 3350, ir: 39 },
{ label: 'B07', capacity: 3350, ir: 40 }, { label: 'B08', capacity: 3490, ir: 36 },
{ label: 'B09', capacity: 3280, ir: 43 }, { label: 'B10', capacity: 3420, ir: 37 },
{ label: 'B11', capacity: 3350, ir: 41 }, { label: 'B12', capacity: 3420, ir: 38 },
{ label: 'B13', capacity: 3150, ir: 52 }, { label: 'B14', capacity: 3380, ir: 40 }
];
exampleCells.forEach(cell => addCell(cell));
}
@ -275,51 +221,32 @@ function loadExampleData() {
// Weight Sliders
// =============================================================================
/**
* Update weight slider displays and keep them summing to 100%.
*/
function updateWeights(source) {
const capWeight = parseInt(DOM.weightCapacity.value);
const irWeight = parseInt(DOM.weightIr.value);
if (source === 'capacity') {
DOM.weightIr.value = 100 - capWeight;
} else {
DOM.weightCapacity.value = 100 - irWeight;
}
if (source === 'capacity') DOM.weightIr.value = 100 - capWeight;
else DOM.weightCapacity.value = 100 - parseInt(DOM.weightIr.value);
DOM.weightCapValue.textContent = `${DOM.weightCapacity.value}%`;
DOM.weightIrValue.textContent = `${DOM.weightIr.value}%`;
}
// =============================================================================
// Matching Control
// Matching Control (Web Worker)
// =============================================================================
/**
* Update the state of the matching button.
*/
function updateMatchingButtonState() {
const serial = parseInt(DOM.cellsSerial.value) || 1;
const parallel = parseInt(DOM.cellsParallel.value) || 1;
const needed = serial * parallel;
const validCells = AppState.cells.filter(c => c.capacity && c.capacity > 0);
const canStart = validCells.length >= needed && !AppState.isRunning;
DOM.btnStartMatching.disabled = !canStart;
if (validCells.length < needed) {
DOM.btnStartMatching.title = `Need at least ${needed} cells with capacity data`;
} else {
DOM.btnStartMatching.title = '';
}
DOM.btnStartMatching.title = validCells.length < needed
? `Need at least ${needed} cells with capacity data` : '';
}
/**
* Start the matching process.
*/
async function startMatching() {
function startMatching() {
if (AppState.isRunning) return;
const serial = parseInt(DOM.cellsSerial.value) || 1;
@ -335,96 +262,120 @@ async function startMatching() {
DOM.progressSection.hidden = false;
DOM.resultsSection.hidden = true;
DOM.btnStartMatching.disabled = true;
DOM.progressFill.style.width = '0%';
DOM.progressIteration.textContent = '0';
DOM.progressCombinations.textContent = '-';
DOM.progressScore.textContent = '-';
DOM.progressTime.textContent = '0s';
DOM.progressSpeed.textContent = '-';
DOM.progressEta.textContent = '-';
DOM.livePreview.hidden = true;
const algorithmType = DOM.algorithmSelect.value;
const maxIterations = parseInt(DOM.maxIterations.value) || 5000;
const capacityWeight = parseInt(DOM.weightCapacity.value) / 100;
const irWeight = parseInt(DOM.weightIr.value) / 100;
const options = {
maxIterations,
capacityWeight,
irWeight,
onProgress: updateProgress
AppState.worker = new Worker('js/matching-worker.js');
AppState.worker.onmessage = function (e) {
const { type, data } = e.data;
if (type === 'progress') updateProgress(data);
else if (type === 'complete') handleComplete(data);
else if (type === 'error') handleError(data);
};
// Create algorithm instance
const { GeneticAlgorithm, SimulatedAnnealing, ExhaustiveSearch } = window.CellMatchingAlgorithms;
AppState.worker.onerror = function (error) {
console.error('Worker error:', error);
handleError(error.message);
};
switch (algorithmType) {
case 'genetic':
AppState.currentAlgorithm = new GeneticAlgorithm(validCells, serial, parallel, options);
break;
case 'simulated-annealing':
AppState.currentAlgorithm = new SimulatedAnnealing(validCells, serial, parallel, options);
break;
case 'exhaustive':
AppState.currentAlgorithm = new ExhaustiveSearch(validCells, serial, parallel, options);
break;
}
try {
const results = await AppState.currentAlgorithm.run();
AppState.results = results;
displayResults(results);
} catch (error) {
console.error('Matching error:', error);
alert('An error occurred during matching. See console for details.');
} finally {
AppState.isRunning = false;
AppState.currentAlgorithm = null;
DOM.progressSection.hidden = true;
DOM.btnStartMatching.disabled = false;
updateMatchingButtonState();
}
AppState.worker.postMessage({
type: 'start',
data: {
cells: validCells.map(c => ({ label: c.label, capacity: c.capacity, ir: c.ir })),
serial, parallel,
algorithm: algorithmType,
options: { maxIterations, capacityWeight, irWeight }
}
});
}
/**
* Stop the matching process.
*/
function stopMatching() {
if (AppState.currentAlgorithm) {
AppState.currentAlgorithm.stop();
}
if (AppState.worker) AppState.worker.postMessage({ type: 'stop' });
}
/**
* Update progress display.
*/
function updateProgress(progress) {
const percent = (progress.iteration / progress.maxIterations) * 100;
DOM.progressFill.style.width = `${percent}%`;
DOM.progressIteration.textContent = progress.iteration.toLocaleString();
DOM.progressIteration.textContent = formatNumber(progress.iteration);
DOM.progressCombinations.textContent = progress.totalCombinations
? `${formatNumber(progress.evaluatedCombinations)} / ${formatNumber(progress.totalCombinations)}`
: formatNumber(progress.evaluatedCombinations || progress.iteration);
DOM.progressScore.textContent = progress.bestScore.toFixed(4);
DOM.progressTime.textContent = `${(progress.elapsedTime / 1000).toFixed(1)}s`;
DOM.progressTime.textContent = formatDuration(progress.elapsedTime);
if (progress.iterationsPerSecond > 0) {
DOM.progressSpeed.textContent = `${formatNumber(Math.round(progress.iterationsPerSecond))}/s`;
}
if (progress.eta > 0 && progress.eta < Infinity) {
DOM.progressEta.textContent = formatDuration(progress.eta);
} else if (progress.iteration >= progress.maxIterations * 0.9) {
DOM.progressEta.textContent = 'Almost done...';
}
if (progress.currentBest && progress.currentBest.config) {
renderLivePreview(progress.currentBest.config);
}
}
function renderLivePreview(config) {
DOM.livePreview.hidden = false;
DOM.livePreviewContent.innerHTML = config.map((group, idx) => {
const cells = group.map(c => c.label).join('+');
const totalCap = group.reduce((sum, c) => sum + c.capacity, 0);
return `<div class="live-preview-group"><span class="group-label">S${idx + 1}:</span><span class="group-cells">${cells}</span><span class="group-cap">${totalCap}</span></div>`;
}).join('');
}
function handleComplete(results) {
AppState.isRunning = false;
AppState.results = results;
if (AppState.worker) { AppState.worker.terminate(); AppState.worker = null; }
DOM.progressSection.hidden = true;
DOM.btnStartMatching.disabled = false;
updateMatchingButtonState();
displayResults(results);
}
function handleError(errorMessage) {
AppState.isRunning = false;
if (AppState.worker) { AppState.worker.terminate(); AppState.worker = null; }
DOM.progressSection.hidden = true;
DOM.btnStartMatching.disabled = false;
updateMatchingButtonState();
alert('An error occurred during matching: ' + errorMessage);
}
// =============================================================================
// Results Display
// =============================================================================
/**
* Display the matching results.
*/
function displayResults(results) {
DOM.resultsSection.hidden = false;
// Summary metrics
DOM.resultScore.textContent = results.score.toFixed(3);
DOM.resultCapVariance.textContent = `${results.capacityCV.toFixed(2)}%`;
DOM.resultIrVariance.textContent = results.irCV ? `${results.irCV.toFixed(2)}%` : 'N/A';
// Calculate pack capacity (limited by smallest parallel group)
const packCapacity = Math.min(...results.groupCapacities);
DOM.resultPackCapacity.textContent = `${packCapacity} mAh`;
// Visualize pack layout
renderPackVisualization(results);
// Results table
renderResultsTable(results);
// Excluded cells
if (results.excludedCells.length > 0) {
DOM.excludedCellsSection.hidden = false;
DOM.excludedCellsList.textContent = results.excludedCells.map(c => c.label).join(', ');
@ -432,13 +383,9 @@ function displayResults(results) {
DOM.excludedCellsSection.hidden = true;
}
// Scroll to results
DOM.resultsSection.scrollIntoView({ behavior: 'smooth', block: 'start' });
}
/**
* Render the pack visualization.
*/
function renderPackVisualization(results) {
const config = results.configuration;
const allCapacities = config.flat().map(c => c.capacity);
@ -463,18 +410,10 @@ function renderPackVisualization(results) {
group.forEach(cell => {
const cellEl = document.createElement('div');
cellEl.className = 'pack-cell';
// Color based on relative capacity
const normalized = (cell.capacity - minCap) / range;
const hue = normalized * 120; // 0 = red, 60 = yellow, 120 = green
const hue = normalized * 120;
cellEl.style.backgroundColor = `hsl(${hue}, 70%, 45%)`;
cellEl.innerHTML = `
<span class="cell-label">${cell.label}</span>
<span class="cell-capacity">${cell.capacity} mAh</span>
${cell.ir ? `<span class="cell-ir">${cell.ir} mΩ</span>` : ''}
`;
cellEl.innerHTML = `<span class="cell-label">${cell.label}</span><span class="cell-capacity">${cell.capacity} mAh</span>${cell.ir ? `<span class="cell-ir">${cell.ir} mΩ</span>` : ''}`;
cellsContainer.appendChild(cellEl);
});
@ -483,36 +422,23 @@ function renderPackVisualization(results) {
});
}
/**
* Render the results table.
*/
function renderResultsTable(results) {
const config = results.configuration;
const avgCapacity = results.groupCapacities.reduce((a, b) => a + b, 0) / results.groupCapacities.length;
DOM.resultsTbody.innerHTML = '';
config.forEach((group, idx) => {
const groupCapacity = group.reduce((sum, c) => sum + c.capacity, 0);
const deviation = ((groupCapacity - avgCapacity) / avgCapacity * 100);
const irsWithValues = group.filter(c => c.ir);
const avgIr = irsWithValues.length > 0
? irsWithValues.reduce((sum, c) => sum + c.ir, 0) / irsWithValues.length
: null;
const avgIr = irsWithValues.length > 0 ? irsWithValues.reduce((sum, c) => sum + c.ir, 0) / irsWithValues.length : null;
let deviationClass = 'deviation-good';
if (Math.abs(deviation) > 2) deviationClass = 'deviation-warning';
if (Math.abs(deviation) > 5) deviationClass = 'deviation-bad';
const row = document.createElement('tr');
row.innerHTML = `
<td>S${idx + 1}</td>
<td>${group.map(c => c.label).join(' + ')}</td>
<td>${groupCapacity} mAh</td>
<td>${avgIr ? avgIr.toFixed(1) + ' mΩ' : '-'}</td>
<td class="${deviationClass}">${deviation >= 0 ? '+' : ''}${deviation.toFixed(2)}%</td>
`;
row.innerHTML = `<td>S${idx + 1}</td><td>${group.map(c => c.label).join(' + ')}</td><td>${groupCapacity} mAh</td><td>${avgIr ? avgIr.toFixed(1) + ' mΩ' : '-'}</td><td class="${deviationClass}">${deviation >= 0 ? '+' : ''}${deviation.toFixed(2)}%</td>`;
DOM.resultsTbody.appendChild(row);
});
}
@ -521,12 +447,8 @@ function renderResultsTable(results) {
// Export Functions
// =============================================================================
/**
* Export results as JSON.
*/
function exportJson() {
if (!AppState.results) return;
const data = {
configuration: `${DOM.cellsSerial.value}S${DOM.cellsParallel.value}P`,
timestamp: new Date().toISOString(),
@ -538,82 +460,46 @@ function exportJson() {
cells: group.map(c => ({ label: c.label, capacity: c.capacity, ir: c.ir })),
totalCapacity: group.reduce((sum, c) => sum + c.capacity, 0)
})),
excludedCells: AppState.results.excludedCells.map(c => ({
label: c.label,
capacity: c.capacity,
ir: c.ir
}))
excludedCells: AppState.results.excludedCells.map(c => ({ label: c.label, capacity: c.capacity, ir: c.ir }))
};
downloadFile(JSON.stringify(data, null, 2), 'cell-matching-results.json', 'application/json');
}
/**
* Export results as CSV.
*/
function exportCsv() {
if (!AppState.results) return;
const lines = ['Group,Cell Label,Capacity (mAh),IR (mΩ),Group Total'];
AppState.results.configuration.forEach((group, idx) => {
const groupTotal = group.reduce((sum, c) => sum + c.capacity, 0);
group.forEach((cell, cellIdx) => {
lines.push(`S${idx + 1},${cell.label},${cell.capacity},${cell.ir || ''},${cellIdx === 0 ? groupTotal : ''}`);
});
});
if (AppState.results.excludedCells.length > 0) {
lines.push('');
lines.push('Excluded Cells');
AppState.results.excludedCells.forEach(cell => {
lines.push(`-,${cell.label},${cell.capacity},${cell.ir || ''}`);
});
lines.push('', 'Excluded Cells');
AppState.results.excludedCells.forEach(cell => lines.push(`-,${cell.label},${cell.capacity},${cell.ir || ''}`));
}
downloadFile(lines.join('\n'), 'cell-matching-results.csv', 'text/csv');
}
/**
* Copy results to clipboard.
*/
async function copyResults() {
if (!AppState.results) return;
const config = AppState.results.configuration;
const lines = [
`Cell Matching Results - ${DOM.cellsSerial.value}S${DOM.cellsParallel.value}P`,
`Score: ${AppState.results.score.toFixed(3)}`,
`Capacity CV: ${AppState.results.capacityCV.toFixed(2)}%`,
'',
'Pack Configuration:'
];
const lines = [`Cell Matching Results - ${DOM.cellsSerial.value}S${DOM.cellsParallel.value}P`, `Score: ${AppState.results.score.toFixed(3)}`, `Capacity CV: ${AppState.results.capacityCV.toFixed(2)}%`, '', 'Pack Configuration:'];
config.forEach((group, idx) => {
const cells = group.map(c => `${c.label} (${c.capacity}mAh)`).join(' + ');
const total = group.reduce((sum, c) => sum + c.capacity, 0);
lines.push(` S${idx + 1}: ${cells} = ${total}mAh`);
});
if (AppState.results.excludedCells.length > 0) {
lines.push('');
lines.push(`Excluded: ${AppState.results.excludedCells.map(c => c.label).join(', ')}`);
lines.push('', `Excluded: ${AppState.results.excludedCells.map(c => c.label).join(', ')}`);
}
try {
await navigator.clipboard.writeText(lines.join('\n'));
DOM.btnCopyResults.textContent = 'Copied!';
setTimeout(() => {
DOM.btnCopyResults.textContent = 'Copy to Clipboard';
}, 2000);
} catch (err) {
console.error('Failed to copy:', err);
}
setTimeout(() => { DOM.btnCopyResults.textContent = 'Copy to Clipboard'; }, 2000);
} catch (err) { console.error('Failed to copy:', err); }
}
/**
* Helper function to download a file.
*/
function downloadFile(content, filename, mimeType) {
const blob = new Blob([content], { type: mimeType });
const url = URL.createObjectURL(blob);
@ -627,80 +513,32 @@ function downloadFile(content, filename, mimeType) {
}
// =============================================================================
// Keyboard Navigation
// Keyboard Navigation & Event Listeners
// =============================================================================
/**
* Setup keyboard shortcuts.
*/
function setupKeyboardShortcuts() {
document.addEventListener('keydown', (e) => {
// Alt + A: Add cell
if (e.altKey && e.key === 'a') {
e.preventDefault();
addCell();
}
// Alt + S: Start matching
if (e.altKey && e.key === 's') {
e.preventDefault();
if (!DOM.btnStartMatching.disabled) {
startMatching();
}
}
// Alt + E: Load example
if (e.altKey && e.key === 'e') {
e.preventDefault();
loadExampleData();
}
// Escape: Stop matching or close dialog
if (e.key === 'Escape') {
if (AppState.isRunning) {
stopMatching();
}
if (DOM.shortcutsDialog.open) {
DOM.shortcutsDialog.close();
}
}
// ?: Show shortcuts
if (e.key === '?' && !e.target.matches('input, textarea')) {
e.preventDefault();
DOM.shortcutsDialog.showModal();
}
if (e.altKey && e.key === 'a') { e.preventDefault(); addCell(); }
if (e.altKey && e.key === 's') { e.preventDefault(); if (!DOM.btnStartMatching.disabled) startMatching(); }
if (e.altKey && e.key === 'e') { e.preventDefault(); loadExampleData(); }
if (e.key === 'Escape') { if (AppState.isRunning) stopMatching(); if (DOM.shortcutsDialog.open) DOM.shortcutsDialog.close(); }
if (e.key === '?' && !e.target.matches('input, textarea')) { e.preventDefault(); DOM.shortcutsDialog.showModal(); }
});
}
// =============================================================================
// Event Listeners
// =============================================================================
function initEventListeners() {
// Configuration
DOM.cellsSerial.addEventListener('input', updateConfigDisplay);
DOM.cellsParallel.addEventListener('input', updateConfigDisplay);
// Cell management
DOM.btnAddCell.addEventListener('click', () => addCell());
DOM.btnLoadExample.addEventListener('click', loadExampleData);
DOM.btnClearAll.addEventListener('click', clearAllCells);
// Weight sliders
DOM.weightCapacity.addEventListener('input', () => updateWeights('capacity'));
DOM.weightIr.addEventListener('input', () => updateWeights('ir'));
// Matching
DOM.btnStartMatching.addEventListener('click', startMatching);
DOM.btnStopMatching.addEventListener('click', stopMatching);
// Export
DOM.btnExportJson.addEventListener('click', exportJson);
DOM.btnExportCsv.addEventListener('click', exportCsv);
DOM.btnCopyResults.addEventListener('click', copyResults);
// Dialog
DOM.btnCloseShortcuts.addEventListener('click', () => DOM.shortcutsDialog.close());
}
@ -714,16 +552,8 @@ function init() {
updateConfigDisplay();
updateWeights('capacity');
updateMatchingButtonState();
// Add a few empty cell rows to start
for (let i = 0; i < 3; i++) {
addCell();
}
for (let i = 0; i < 3; i++) addCell();
}
// Start the application when DOM is ready
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', init);
} else {
init();
}
if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', init);
else init();