Event handler changes
This commit is contained in:
parent
b7acec2c40
commit
bb42bd4e5e
2 changed files with 48 additions and 141 deletions
|
|
@ -340,123 +340,21 @@ function convertComponentsDataToConfig() {
|
||||||
* Attach event listeners to the UI elements
|
* Attach event listeners to the UI elements
|
||||||
*/
|
*/
|
||||||
function attachEventListeners() {
|
function attachEventListeners() {
|
||||||
// Board selection handler
|
// BOARD SELECTION HANDLER HAS BEEN REMOVED
|
||||||
document.getElementById('board-select').addEventListener('change', function() {
|
// The duplicate event handler from load-wippersnapper-data.js has been removed
|
||||||
const boardId = this.value;
|
// to prevent conflicts with the handler in wippersnapper-config-builder.js
|
||||||
if (!boardId) {
|
|
||||||
document.getElementById('board-details').classList.add('hidden');
|
|
||||||
//TODO: consider pop up to reset configurator, or just hide all sections
|
|
||||||
// clean up purchase/docs links
|
|
||||||
document.getElementById('board-purchase').innerHTML = '';
|
|
||||||
document.getElementById('board-help').innerHTML = '';
|
|
||||||
hideSubsequentSections();
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Convert board data to config format
|
|
||||||
const boardConfig = convertBoardDataToConfig(boardId);
|
|
||||||
appState.selectedBoard = {
|
|
||||||
id: boardId,
|
|
||||||
...boardConfig
|
|
||||||
};
|
|
||||||
|
|
||||||
// Update board details display
|
|
||||||
document.getElementById('ref-voltage').textContent = boardConfig.referenceVoltage;
|
|
||||||
document.getElementById('total-gpio').textContent = boardConfig.totalGPIOPins;
|
|
||||||
document.getElementById('total-analog').textContent = boardConfig.totalAnalogPins;
|
|
||||||
document.getElementById('default-SCL').textContent = boardConfig.defaultI2C.SCL;
|
|
||||||
document.getElementById('default-SDA').textContent = boardConfig.defaultI2C.SDA;
|
|
||||||
document.getElementById('board-details').classList.remove('hidden');
|
|
||||||
|
|
||||||
if ("productURL" in boardConfig && boardConfig.productURL) {
|
|
||||||
document.getElementById('board-purchase').innerHTML = `<a href="${boardConfig.productURL}" style="padding: 0 10px 0 30px;" target="_blank" title="Product page">Buy 🛒</a> `;
|
|
||||||
} else {
|
|
||||||
document.getElementById('board-purchase').innerHTML = '';
|
|
||||||
}
|
|
||||||
if ("documentationURL" in boardConfig && boardConfig.documentationURL) {
|
|
||||||
document.getElementById('board-help').innerHTML = ` <a href="${boardConfig.documentationURL}" style="padding: 0 10px;" target="_blank" title="Board Documentation">📃Docs❓</a>`;
|
|
||||||
} else {
|
|
||||||
document.getElementById('board-help').innerHTML = '';
|
|
||||||
}
|
|
||||||
|
|
||||||
// If there's a board image, show it
|
|
||||||
const boardImageElem = document.getElementById('board-image');
|
|
||||||
if (boardImageElem) {
|
|
||||||
if (boardConfig.image) {
|
|
||||||
if (!boardConfig.image.startsWith('http')) {
|
|
||||||
boardImageElem.src = "https://raw.githubusercontent.com/adafruit/Wippersnapper_Boards/refs/heads/rp2040_datalogger_feather/" + boardConfig.image;
|
|
||||||
} else {
|
|
||||||
boardImageElem.src = boardConfig.image;
|
|
||||||
}
|
|
||||||
boardImageElem.classList.remove('hidden');
|
|
||||||
} else {
|
|
||||||
boardImageElem.classList.add('hidden');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Set up default I2C bus
|
|
||||||
appState.i2cBuses = [{
|
|
||||||
id: 'default',
|
|
||||||
SCL: boardConfig.defaultI2C.SCL,
|
|
||||||
SDA: boardConfig.defaultI2C.SDA
|
|
||||||
}];
|
|
||||||
|
|
||||||
// Update default I2C bus display
|
|
||||||
document.getElementById('default-i2c-SCL').textContent = boardConfig.defaultI2C.SCL;
|
|
||||||
document.getElementById('default-i2c-SDA').textContent = boardConfig.defaultI2C.SDA;
|
|
||||||
|
|
||||||
// Mark default I2C pins as used
|
|
||||||
appState.usedPins.add(boardConfig.defaultI2C.SCL);
|
|
||||||
appState.usedPins.add(boardConfig.defaultI2C.SDA);
|
|
||||||
|
|
||||||
// Show companion board section
|
|
||||||
document.getElementById('companion-board-section').classList.remove('hidden');
|
|
||||||
|
|
||||||
// Reset subsequent sections
|
|
||||||
resetSubsequentSelections();
|
|
||||||
|
|
||||||
document.getElementById('manual-config-section').classList.remove('hidden');
|
|
||||||
document.getElementById('i2c-bus-section').classList.remove('hidden');
|
|
||||||
document.getElementById('components-section').classList.remove('hidden');
|
|
||||||
document.getElementById('selected-components-section').classList.remove('hidden');
|
|
||||||
document.getElementById('generate-section').classList.remove('hidden');
|
|
||||||
|
|
||||||
// Reset companion board selection but keep sections visible
|
|
||||||
document.getElementById('companion-board-select').value = '';
|
|
||||||
document.getElementById('companion-details').classList.add('hidden');
|
|
||||||
|
|
||||||
|
|
||||||
// Initialize SD and RTC sections based on board
|
|
||||||
initializeManualConfig(boardConfig);
|
|
||||||
|
|
||||||
// update firmware download url to use installBoardName or fall back to releases page
|
|
||||||
// collect the asset names, split on '.' after removing wippersnapper. and take first part.
|
|
||||||
const firmwareFile = document.getElementById('firmware_file');
|
|
||||||
const firmwareData = window['FIRMWARE_DATA'];
|
|
||||||
// TODO: remove once W-variant board targets have assets, and non-w variants exist in boards repo
|
|
||||||
const boardInstallName = (boardConfig.installBoardName || "").replaceAll('-','_').replace('picow','pico');
|
|
||||||
const assets = firmwareData.firmwareFiles.map(asset => { return {"name":asset.name.replace('wippersnapper.', '').split('.')[0], "url":asset.url}; });
|
|
||||||
const asset = assets.find(asset => asset.name === boardInstallName);
|
|
||||||
if (asset) {
|
|
||||||
firmwareFile.href = asset.url;
|
|
||||||
} else {
|
|
||||||
firmwareFile.href = firmwareData.releaseInfo.url;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Initialize pins lists for SD and I2C configuration
|
|
||||||
populatePinsLists();
|
|
||||||
|
|
||||||
// Convert component data to config format
|
|
||||||
const componentsConfig = convertComponentsDataToConfig();
|
|
||||||
|
|
||||||
// Initialize components sections with the loaded data
|
|
||||||
populateComponentLists(componentsConfig);
|
|
||||||
|
|
||||||
updateMuxList();
|
|
||||||
});
|
|
||||||
|
|
||||||
// Remaining event listeners should be added here or in the original script
|
// Instead, we'll prepare the data in the format expected by wippersnapper-config-builder.js
|
||||||
// ...
|
console.log('Data loading complete, board selection handler is in wippersnapper-config-builder.js');
|
||||||
|
|
||||||
|
// Convert component data to config format
|
||||||
|
const componentsConfig = convertComponentsDataToConfig();
|
||||||
|
console.log('not using Components data converted to config format:', componentsConfig);
|
||||||
|
// Update the components data in appState with the converted format
|
||||||
|
// so it's ready for use in the other script
|
||||||
|
// appState.componentsData = componentsConfig;
|
||||||
|
|
||||||
|
// No other event listeners needed here as they are handled in wippersnapper-config-builder.js
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
|
||||||
|
|
@ -204,7 +204,9 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||||
// Hide loading indicator once data is loaded
|
// Hide loading indicator once data is loaded
|
||||||
document.getElementById('loading-indicator').classList.add('hidden');
|
document.getElementById('loading-indicator').classList.add('hidden');
|
||||||
|
|
||||||
// Board selection handler
|
// PRIMARY BOARD SELECTION HANDLER
|
||||||
|
// This is the central event handler for board selection that should be maintained
|
||||||
|
// The duplicate handler in load-wippersnapper-data.js has been removed to prevent conflicts
|
||||||
document.getElementById('board-select').addEventListener('change', function() {
|
document.getElementById('board-select').addEventListener('change', function() {
|
||||||
const boardId = this.value;
|
const boardId = this.value;
|
||||||
if (!boardId) {
|
if (!boardId) {
|
||||||
|
|
@ -303,6 +305,9 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||||
// Initialize pins lists for SD and I2C configuration
|
// Initialize pins lists for SD and I2C configuration
|
||||||
populatePinsLists();
|
populatePinsLists();
|
||||||
|
|
||||||
|
convertComponentsDataToConfig();
|
||||||
|
|
||||||
|
|
||||||
// Initialize components sections
|
// Initialize components sections
|
||||||
populateComponentLists();
|
populateComponentLists();
|
||||||
|
|
||||||
|
|
@ -605,6 +610,8 @@ function resetSubsequentSelections() {
|
||||||
// Reset manual config
|
// Reset manual config
|
||||||
document.getElementById('add-sd-card').checked = false;
|
document.getElementById('add-sd-card').checked = false;
|
||||||
document.getElementById('sd-card-pin-select').classList.add('hidden');
|
document.getElementById('sd-card-pin-select').classList.add('hidden');
|
||||||
|
document.getElementById('alt-SCL-pin').textContent = '';
|
||||||
|
document.getElementById('alt-SDA-pin').textContent = '';
|
||||||
document.getElementById('rtc-select').value = 'soft';
|
document.getElementById('rtc-select').value = 'soft';
|
||||||
document.getElementById('led-brightness').value = 0.5;
|
document.getElementById('led-brightness').value = 0.5;
|
||||||
document.getElementById('brightness-value').textContent = '0.5';
|
document.getElementById('brightness-value').textContent = '0.5';
|
||||||
|
|
@ -672,10 +679,10 @@ function populatePinsLists() {
|
||||||
sdPinsList.innerHTML = '';
|
sdPinsList.innerHTML = '';
|
||||||
pins.forEach(pin => {
|
pins.forEach(pin => {
|
||||||
const pinElem = document.createElement('div');
|
const pinElem = document.createElement('div');
|
||||||
pinElem.className = 'pin' + (appState.usedPins.has(pin) ? ' used' : '');
|
pinElem.className = 'pin' + (appState.usedPins.has(pin.number) ? ' used' : '');
|
||||||
pinElem.textContent = pin;
|
pinElem.textContent = `${pin.displayName} [Pin ${pin.number}]`;
|
||||||
|
|
||||||
if (!appState.usedPins.has(pin)) {
|
if (!appState.usedPins.has(pin.number)) {
|
||||||
pinElem.addEventListener('click', function() {
|
pinElem.addEventListener('click', function() {
|
||||||
// Deselect any previously selected SD CS pin
|
// Deselect any previously selected SD CS pin
|
||||||
if (appState.sdCardCS !== null) {
|
if (appState.sdCardCS !== null) {
|
||||||
|
|
@ -684,12 +691,12 @@ function populatePinsLists() {
|
||||||
|
|
||||||
// Set new SD CS pin
|
// Set new SD CS pin
|
||||||
appState.sdCardCS = pin;
|
appState.sdCardCS = pin;
|
||||||
appState.usedPins.add(pin);
|
appState.usedPins.add(pin.number);
|
||||||
|
|
||||||
// Update pin selection UI
|
// Update pin selection UI
|
||||||
const allPins = sdPinsList.querySelectorAll('.pin');
|
const allPins = sdPinsList.querySelectorAll('.pin');
|
||||||
allPins.forEach(p => p.classList.remove('selected'));
|
allPins.forEach(p => p.classList.remove('used'));
|
||||||
pinElem.classList.add('selected');
|
pinElem.classList.add('used');
|
||||||
|
|
||||||
// Refresh other pin lists
|
// Refresh other pin lists
|
||||||
populatePinsLists();
|
populatePinsLists();
|
||||||
|
|
@ -704,10 +711,10 @@ function populatePinsLists() {
|
||||||
SCLPinsList.innerHTML = '';
|
SCLPinsList.innerHTML = '';
|
||||||
pins.forEach(pin => {
|
pins.forEach(pin => {
|
||||||
const pinElem = document.createElement('div');
|
const pinElem = document.createElement('div');
|
||||||
pinElem.className = 'pin' + (appState.usedPins.has(pin) ? ' used' : '');
|
pinElem.className = 'pin' + (appState.usedPins.has(pin.number) ? ' used' : '');
|
||||||
pinElem.textContent = pin;
|
pinElem.textContent = `${pin.displayName} [Pin ${pin.number}]`;
|
||||||
|
|
||||||
if (!appState.usedPins.has(pin)) {
|
if (!appState.usedPins.has(pin.number)) {
|
||||||
pinElem.addEventListener('click', function() {
|
pinElem.addEventListener('click', function() {
|
||||||
// Find additional I2C bus or create it
|
// Find additional I2C bus or create it
|
||||||
let additionalBus = appState.i2cBuses.find(bus => bus.id !== 'default');
|
let additionalBus = appState.i2cBuses.find(bus => bus.id !== 'default');
|
||||||
|
|
@ -718,24 +725,25 @@ function populatePinsLists() {
|
||||||
}
|
}
|
||||||
|
|
||||||
// Set new SCL pin
|
// Set new SCL pin
|
||||||
additionalBus.SCL = pin;
|
additionalBus.SCL = pin.number;
|
||||||
} else {
|
} else {
|
||||||
// Create new additional bus
|
// Create new additional bus
|
||||||
additionalBus = {
|
additionalBus = {
|
||||||
id: 'additional',
|
id: 'additional',
|
||||||
SCL: pin,
|
SCL: pin.number,
|
||||||
SDA: undefined
|
SDA: undefined
|
||||||
};
|
};
|
||||||
appState.i2cBuses.push(additionalBus);
|
appState.i2cBuses.push(additionalBus);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Mark pin as used
|
// Mark pin as used
|
||||||
appState.usedPins.add(pin);
|
appState.usedPins.add(pin.number);
|
||||||
|
document.getElementById('alt-SCL-pin').textContent = pin.number;
|
||||||
|
|
||||||
// Update pin selection UI
|
// Update pin selection UI
|
||||||
const allPins = SCLPinsList.querySelectorAll('.pin');
|
const allPins = SCLPinsList.querySelectorAll('.pin');
|
||||||
allPins.forEach(p => p.classList.remove('selected'));
|
allPins.forEach(p => p.classList.remove('used'));
|
||||||
pinElem.classList.add('selected');
|
pinElem.classList.add('used');
|
||||||
|
|
||||||
// Refresh other pin lists
|
// Refresh other pin lists
|
||||||
populatePinsLists();
|
populatePinsLists();
|
||||||
|
|
@ -755,10 +763,10 @@ function populatePinsLists() {
|
||||||
SDAPinsList.innerHTML = '';
|
SDAPinsList.innerHTML = '';
|
||||||
pins.forEach(pin => {
|
pins.forEach(pin => {
|
||||||
const pinElem = document.createElement('div');
|
const pinElem = document.createElement('div');
|
||||||
pinElem.className = 'pin' + (appState.usedPins.has(pin) ? ' used' : '');
|
pinElem.className = 'pin' + (appState.usedPins.has(pin.number) ? ' used' : '');
|
||||||
pinElem.textContent = pin;
|
pinElem.textContent = `${pin.displayName} [Pin ${pin.number}]`;
|
||||||
|
|
||||||
if (!appState.usedPins.has(pin)) {
|
if (!appState.usedPins.has(pin.number)) {
|
||||||
pinElem.addEventListener('click', function() {
|
pinElem.addEventListener('click', function() {
|
||||||
// Find additional I2C bus or create it
|
// Find additional I2C bus or create it
|
||||||
let additionalBus = appState.i2cBuses.find(bus => bus.id !== 'default');
|
let additionalBus = appState.i2cBuses.find(bus => bus.id !== 'default');
|
||||||
|
|
@ -769,24 +777,25 @@ function populatePinsLists() {
|
||||||
}
|
}
|
||||||
|
|
||||||
// Set new SDA pin
|
// Set new SDA pin
|
||||||
additionalBus.SDA = pin;
|
additionalBus.SDA = pin.number;
|
||||||
} else {
|
} else {
|
||||||
// Create new additional bus
|
// Create new additional bus
|
||||||
additionalBus = {
|
additionalBus = {
|
||||||
id: 'additional',
|
id: 'additional',
|
||||||
SCL: undefined,
|
SCL: undefined,
|
||||||
SDA: pin
|
SDA: pin.number
|
||||||
};
|
};
|
||||||
appState.i2cBuses.push(additionalBus);
|
appState.i2cBuses.push(additionalBus);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Mark pin as used
|
// Mark pin as used
|
||||||
appState.usedPins.add(pin);
|
appState.usedPins.add(pin.number);
|
||||||
|
document.getElementById('alt-SDA-pin').textContent = pin.number;
|
||||||
|
|
||||||
// Update pin selection UI
|
// Update pin selection UI
|
||||||
const allPins = SDAPinsList.querySelectorAll('.pin');
|
const allPins = SDAPinsList.querySelectorAll('.pin');
|
||||||
allPins.forEach(p => p.classList.remove('selected'));
|
allPins.forEach(p => p.classList.remove('used'));
|
||||||
pinElem.classList.add('selected');
|
pinElem.classList.add('used');
|
||||||
|
|
||||||
// Refresh other pin lists
|
// Refresh other pin lists
|
||||||
populatePinsLists();
|
populatePinsLists();
|
||||||
|
|
@ -1176,7 +1185,7 @@ function showComponentConfigModal(component, type) {
|
||||||
<option value="9">9-bit</option>
|
<option value="9">9-bit</option>
|
||||||
<option value="10">10-bit</option>
|
<option value="10">10-bit</option>
|
||||||
<option value="11">11-bit</option>
|
<option value="11">11-bit</option>
|
||||||
<option value="12">12-bit</option>
|
<option value="12" selected>12-bit</option>
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
`;
|
`;
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue