Skip to content

Commit

Permalink
some fixes working quite well
Browse files Browse the repository at this point in the history
  • Loading branch information
@Unreal-Dan
Unreal-Dan committed Feb 6, 2025
1 parent da3e837 commit 27c9f64
Show file tree
Hide file tree
Showing 5 changed files with 266 additions and 20 deletions.
90 changes: 88 additions & 2 deletions css/modal.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,16 @@
text-align: center;
}

.modal-content ul {
padding-left: 15px;
list-style-type: square;
}

.modal-content ul li {
margin-bottom: 5px;
color: #d8d4cf;
}

.modal-title {
font-size: 18px;
font-weight: bold;
Expand Down Expand Up @@ -57,8 +67,8 @@
}

.modal-button {
width: 50px;
height: 50px;
width: auto;
height: auto;
display: flex;
justify-content: center;
align-items: center;
Expand Down Expand Up @@ -89,3 +99,79 @@
border-color: #218838;
}


.modal-device-container {
display: flex;
justify-content: space-between;
align-items: flex-start; /* Align content at the top for balance */
text-align: center;
gap: 40px; /* More spacing between the two devices */
padding: 20px 10px; /* Adds space above & below */
}

.modal-device {
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
width: 50%; /* Ensure equal space for both sides */
}

.modal-device-title {
font-size: 16px;
font-weight: bold;
margin-bottom: 8px;
color: #d8d4cf;
}

.modal-device img {
width: 100px; /* Slightly larger for better visibility */
height: auto;
margin-bottom: 10px;
border-radius: 5px;
border: 1px solid #3e4446;
}

.modal-device-info {
font-size: 14px;
color: #d8d4cf;
margin-bottom: 10px;
}

.modal-buttons {
display: flex;
justify-content: center;
gap: 40px; /* Keep buttons balanced */
margin-top: 30px; /* More vertical spacing */
width: 100%;
max-width: 100%;
}


.primary-button {
background-color: #218838;
color: white;
}

.primary-button:hover {
background-color: #1a6d2d;
}

.switch-button {
background-color: #0066cc;
color: white;
}

.switch-button:hover {
background-color: #005bb5;
}

.secondary-button {
background-color: #b02a37;
color: white;
}

.secondary-button:hover {
background-color: #8f1f2a;
}

2 changes: 1 addition & 1 deletion js/CommunityBrowserPanel.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -144,7 +144,7 @@ export default class CommunityBrowserPanel extends Panel {
num_leds: num_leds,
single_pats: single_pats
};
this.editor.modesPanel.importModeFromData(vortexMode, false);
this.editor.modesPanel.importModeFromData(vortexMode, true);
}

renderPage(pageData) {
Expand Down
10 changes: 7 additions & 3 deletions js/Modal.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -127,11 +127,15 @@ export default class Modal {
}

populateButtons(buttonConfigs) {
this.modalButtons.innerHTML = '';
this.clearButtons(); // Clear previous buttons

buttonConfigs.forEach(config => {
const button = this.createButton(config);
const button = document.createElement('button'); // Use <button> element
button.textContent = config.label;
button.className = `modal-button ${config.class || ''}`; // Apply button class
button.addEventListener('click', config.onClick);

this.modalButtons.appendChild(button);
});
}
}

176 changes: 162 additions & 14 deletions js/ModesPanel.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -233,15 +233,8 @@ export default class ModesPanel extends Panel {
maxModes = 14;
break;
case 'Duo':
// default duo max is 5
maxModes = 5;
if (this.editor && this.editor.chromalinkPanel) {
const clPanel = this.editor.chromalinkPanel;
if (clPanel.duoHeader && clPanel.duoHeader.vMinor >= 4) {
// allow 9 modes after 1.4.x duo
maxModes = 9;
}
}
// default duo max is 9
maxModes = 9;
break;
case 'Chromadeck':
case 'Spark':
Expand Down Expand Up @@ -359,7 +352,7 @@ export default class ModesPanel extends Panel {
}

// Import mode
this.importModeFromData(modeJson);
this.importModeFromData(modeJson, true);
Notification.success("Successfully imported mode from link.");
} catch (error) {
Notification.failure("Failed to import mode from link.");
Expand Down Expand Up @@ -425,6 +418,162 @@ export default class ModesPanel extends Panel {
return this.importModeFromData(modeData, addNew);
}

showImportModeModal(importedDevice, currentDevice, modeData, addNew) {
const importedDeviceData = this.editor.devices[importedDevice] || {};
const currentDeviceData = this.editor.devices[currentDevice] || {};

// Extract mode name
const modeName = modeData.name || "Unnamed Mode";

// Extract pattern set details (if available)
const patternSets = modeData.single_pats || (modeData.multi_pat ? [modeData.multi_pat] : []);
const patternDetails = patternSets.length
? patternSets.map((pat, index) => `<li><strong>Pattern ${index + 1}:</strong> ${pat?.data?.colorset ? pat.data.colorset.length + " Colors" : "No Color Data"}</li>`).join("")
: "<li>No Patterns</li>";

// Create modal content with proper side-by-side layout
const modalBlurb = `
<div class="modal-device-container">
<div class="modal-device">
<img src="/${importedDeviceData.iconBig}" alt="${importedDevice}">
<div>
<strong>LED Count:</strong> ${modeData.num_leds}
</div>
</div>
<div class="modal-device">
<img src="/${currentDeviceData.iconBig}" alt="${currentDevice}">
<div>
<strong>LED Count:</strong> ${this.editor.devices[currentDevice]?.ledCount || 'Unknown'}
</div>
</div>
</div>
`;

// Determine which buttons to show
const buttons = [];

if (currentDevice === 'None' || importedDevice === currentDevice) {
// Single "Import Mode" button when devices match
buttons.push({
label: 'Import Mode',
class: 'modal-button primary-button',
onClick: () => {
this.deviceSelectionModal.hide();
this.finalizeModeImport(modeData, addNew);
}
});
} else {
// Two options when devices don't match
buttons.push({
label: `Switch to ${importedDevice}`,
class: 'modal-button switch-button',
onClick: async () => {
this.deviceSelectionModal.hide();
this.editor.lightshow.setLedCount(modeData.num_leds);
await this.editor.devicePanel.updateSelectedDevice(importedDevice, true);
this.finalizeModeImport(modeData, addNew);
}
});

buttons.push({
label: `Convert to ${currentDevice}`,
class: 'modal-button secondary-button',
onClick: () => {
this.deviceSelectionModal.hide();
this.finalizeModeImport(modeData, addNew);
}
});
}

// Show the modal
this.deviceSelectionModal.show({
title: `Change to ${importedDevice}?`,
blurb: modalBlurb,
buttons: buttons
});
}


finalizeModeImport(modeData, addNew) {
//this.lightshow.setLedCount(modeData.num_leds);
const modeCount = this.lightshow.vortex.numModes();
let curSel;
if (addNew) {
curSel = this.lightshow.vortex.engine().modes().curModeIndex();
const device = this.editor.devicePanel.selectedDevice;
const maxModes = this.getMaxModes(device);
if (modeCount >= maxModes) {
Notification.failure(`The ${device} can only hold ${maxModes} modes`);
return;
}
if (!this.lightshow.vortex.addNewMode(false)) {
Notification.failure("Failed to add another mode");
return;
}
this.lightshow.vortex.setCurMode(modeCount, false);
}

let cur = this.lightshow.vortex.engine().modes().curMode();
if (!cur) {
console.log("cur empty!");
return;
}
cur.init();

const patterns = modeData.single_pats || [modeData.multi_pat];
if (!patterns) {
console.log("Patterns empty!");
return;
}

patterns.forEach((pat, index) => {
if (!pat) return;

let patData = pat.data || pat;
if (!patData.colorset) {
Notification.failure("Invalid pattern data: " + JSON.stringify(pat));
return;
}

const set = new this.lightshow.vortexLib.Colorset();
patData.colorset.forEach(hexCode => {
const normalizedHex = hexCode.replace('0x', '#');
const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(normalizedHex);
if (result) {
set.addColor(new this.lightshow.vortexLib.RGBColor(
parseInt(result[1], 16),
parseInt(result[2], 16),
parseInt(result[3], 16)
));
}
});

const patID = this.lightshow.vortexLib.intToPatternID(patData.pattern_id);
const args = new this.lightshow.vortexLib.PatternArgs();
patData.args.forEach(arg => args.addArgs(arg));

cur = this.lightshow.vortex.engine().modes().curMode();
cur.setPattern(patID, index, args, set);
this.lightshow.vortex.setPatternArgs(index, args, true);
});

cur = this.lightshow.vortex.engine().modes().curMode();
cur.init();
this.lightshow.vortex.engine().modes().saveCurMode();

if (addNew) {
this.lightshow.vortex.setCurMode(curSel, false);
}

this.refreshModeList();
this.editor.ledSelectPanel.renderLedIndicators(this.editor.devicePanel.selectedDevice);
this.editor.ledSelectPanel.handleLedSelectionChange();
this.selectMode(addNew ? modeCount : curSel);
this.refreshPatternControlPanel();
this.refresh();
Notification.success("Successfully imported mode");
}

importModeFromData(modeData, addNew = true) {
if (!modeData) {
Notification.failure("No mode data");
Expand All @@ -437,11 +586,12 @@ export default class ModesPanel extends Panel {
const selectedDevice = this.editor.devicePanel.selectedDevice;

// If the imported mode has a different device, ask the user to choose
if (initialDevice && selectedDevice !== initialDevice) {
this.showDeviceSelectionModal(initialDevice, selectedDevice, modeData, addNew);
if (initialDevice && selectedDevice !== initialDevice && selectedDevice !== 'None') {
this.showImportModeModal(initialDevice, selectedDevice, modeData, addNew);
return;
}
this.lightshow.setLedCount(modeData.num_leds);
this.editor.devicePanel.updateSelectedDevice(initialDevice, true);
const modeCount = this.lightshow.vortex.numModes();
let curSel;
if (addNew) {
Expand Down Expand Up @@ -520,8 +670,6 @@ export default class ModesPanel extends Panel {
}

this.refreshModeList();
this.editor.ledSelectPanel.renderLedIndicators(initialDevice);
this.editor.ledSelectPanel.handleLedSelectionChange();
this.selectMode(addNew ? modeCount : curSel);
this.refreshPatternControlPanel();
this.refresh();
Expand Down
Loading

0 comments on commit 27c9f64

Please sign in to comment.