Skip to content

Commit

Permalink
Daniel/led select panel refactor (#77)
Browse files Browse the repository at this point in the history 
* huge refactor and cleanup of a lot of features
  • Loading branch information
@Unreal-Dan
Unreal-Dan authored Dec 21, 2024
1 parent b7492ec commit 97e5404
Show file tree
Hide file tree
Showing 13 changed files with 1,373 additions and 795 deletions.
138 changes: 112 additions & 26 deletions css/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,8 @@ canvas {
}

/* Panels */
#updatePanel, #modesPanel, #welcomePanel, #aboutPanel, #animationPanel, #colorsetPanel, #patternPanel, #colorPickerPanel {
#updatePanel, #modesPanel, #welcomePanel, #aboutPanel, #animationPanel,
#colorsetPanel, #patternPanel, #colorPickerPanel, #ledSelectPanel, #devicePanel {
background-color: #181a1b;
border: 1px solid #3e4446;
border-radius: 5px;
Expand All @@ -62,7 +63,11 @@ canvas {
#updatePanel {
top: 5px;
right: 615px;
z-index: 3;
}

#ledSelectPanel {
top: 438px;
right: 5px;
}

.device-update-labels {
Expand Down Expand Up @@ -238,9 +243,15 @@ canvas {
justify-content: space-between;
}

#modesPanel {
#devicePanel {
top: 5px;
right: 5px;
z-index: 5;
}

#modesPanel {
top: 113px;
right: 5px;
}

#modesPanel .flex-container {
Expand All @@ -251,7 +262,7 @@ canvas {

#deviceConnectionSection {
display: flex;
flex-direction: column;
flex-direction: row;
justify-content: space-between; /* Adjusts button positioning */
align-items: center;
}
Expand All @@ -265,7 +276,7 @@ canvas {
}

/* Connection Buttons */
.mode-list-btn {
.mode-list-btn, .device-control-btn {
background-color: #202020;
color: #d8d4cf;
border: 1px solid #454545;
Expand All @@ -277,6 +288,19 @@ canvas {
width: 52px;
}

.device-control-btn {
margin-left: 10px;
}

.device-control-btn.disconnect {
background-color: #ff4d4d; /* Red background for disconnect */
color: #fff; /* White text */
}

.device-control-btn.disconnect:hover {
background-color: #e63939; /* Darker red on hover */
}

.mode-list-btn:hover {
background-color: #3e4446;
}
Expand Down Expand Up @@ -477,15 +501,14 @@ legend {

#modesListScrollContainer {
height: 200px;
overflow-y: auto;
overflow-y: scroll;
overflow-x: hidden;
border: 1px solid #454545;
border-radius: 4px;
padding-left: 5px;
}

#modesListContainer {
height: 398px;
width: 95%;
}

Expand Down Expand Up @@ -869,6 +892,7 @@ legend {
width: 100%; /* Optional: making the select box full width */
height: auto; /* Adjust height as needed */
user-select: none;
margin-top: 5px;
}

/* Styling for options */
Expand Down Expand Up @@ -994,20 +1018,32 @@ legend {
position: relative;
display: inline-block;
width: 100%;
margin-top: 10px;
}

.custom-dropdown-selected {
.custom-dropdown-select {
cursor: pointer;
padding: 10px;
height: 20px;
line-height: 20px;
border: 1px solid #454545;
border-radius: 4px;
background-color: #181a1b;
color: #d8d4cf;
display: flex;
align-items: center;
transition: background-color 0.2s, color 0.2s;
}

.custom-dropdown-selected img {
.custom-dropdown-select:hover {
background-color: #3e4446;
color: #ffffff;
}

.custom-dropdown-select:active {
background-color: #2e3436;
}

.custom-dropdown-select img {
width: 24px;
height: 24px;
margin-right: 10px;
Expand All @@ -1018,7 +1054,7 @@ legend {
position: absolute;
background-color: #121212;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
z-index: 5;
z-index: 10;
width: 100%;
}

Expand Down Expand Up @@ -1811,6 +1847,9 @@ i {
height: 40px; /* Fixed height */
box-sizing: border-box; /* Include padding in size */
overflow: none;

transition: transform 0.2s ease;
position: relative;
}

.color-box.empty {
Expand All @@ -1821,6 +1860,40 @@ i {
overflow: none;
}

.color-box.empty:hover {
background: #222; /* Slightly darker on hover */
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}

.color-box .color-hex-input:focus {
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}

.color-box .color-entry:hover {
flex: 0 0 50%;
}

.color-box.dragging {
margin-top: 50px;
position: static;
pointer-events: none;
border: 1px solid gray;
}

.color-box.placeholder {
background: rgba(0, 0, 0, 0.1);
border: 2px dashed #ccc;
height: 50px; /* Match the color box height */
}

.color-box.over {
transform: translateY(10px); /* Example visual cue */
}



.color-entry {
width: 50px;
display: inline-block;
Expand All @@ -1844,21 +1917,6 @@ i {
text-align: center;
}

.color-box.empty:hover {
background: #222; /* Slightly darker on hover */
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}

.color-box .color-hex-input:focus {
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}

.color-box .color-entry:hover {
flex: 0 0 50%;
}



/* draggable panels */
Expand Down Expand Up @@ -1961,3 +2019,31 @@ i {
width: 0;
transition: width 0.3s ease;
}




/* Add this at the bottom of your existing CSS */

/* Container for the selected LEDs bar */
#colorset-selected-leds {
display: flex;
flex-wrap: wrap;
align-items: center;
padding: 5px;
margin-bottom: 5px;
border-bottom: 1px solid #3e4446;
}

/* Individual LED dots */
.led-dot {
width: 10px;
height: 10px;
background: #444;
border-radius: 50%;
margin: 2px;
}

.led-dot.selected {
background: #00ff00; /* Green for selected */
}
4 changes: 4 additions & 0 deletions js/AnimationPanel.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,6 +73,9 @@ export default class AnimationPanel extends Panel {
<button class="animation-button" id="renderBoxButton" title="Box">
<i class="fa fa-square"></i>
</button>
<button class="animation-button" id="renderCursorButton" title="Cursor">
<i class="fa-solid fa-arrow-pointer"></i>
</button>
</div>
<div id="animationControls">
${AnimationPanel.generateControlsContent(controls)}
Expand Down Expand Up @@ -129,6 +132,7 @@ export default class AnimationPanel extends Panel {
{ id: 'renderInfinityButton', shape: 'figure8', label: 'Infinity' },
{ id: 'renderHeartButton', shape: 'heart', label: 'Heart' },
{ id: 'renderBoxButton', shape: 'box', label: 'Box' },
{ id: 'renderCursorButton', shape: 'cursor', label: 'Cursor' },
];

shapes.forEach(({ id, shape, label }) => {
Expand Down
31 changes: 11 additions & 20 deletions js/ChromalinkPanel.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,15 +15,15 @@ export default class ChromalinkPanel extends Panel {
<p id="deviceLatestVersionLabel"><strong>Modes:</strong> <span id="duoModes"></span></p>
</div>
</div>
<button id="chromalinkFlash" class="chromalink-button" disabled>Flash Custom Firmware</button>
<button id="chromalinkUpdate" class="chromalink-button" disabled>Update Firmware</button>
<div class="progress-container">
<div id="firmwareProgress" class="progress-bar">
<div id="firmwareProgressBar"></div>
</div>
</div>
<button id="chromalinkFlash" class="chromalink-button">Flash Custom Firmware</button>
<button id="chromalinkUpdate" class="chromalink-button">Update Firmware</button>
<div class="progress-container">
<div id="firmwareProgress" class="progress-bar">
<div id="firmwareProgressBar"></div>
</div>
<input type="file" id="firmwareFileInput" style="display:none;" />
</div>
<input type="file" id="firmwareFileInput" style="display:none;" />
</div>
`;
super('chromalinkPanel', content, 'Chromalink Duo');
Expand Down Expand Up @@ -102,20 +102,15 @@ export default class ChromalinkPanel extends Panel {
}
this.editor.lightshow.vortex.clearModes();
this.editor.lightshow.setLedCount(2);
this.editor.modesPanel.updateSelectedDevice('Duo', true);
//this.editor.modesPanel.renderLedIndicators('Duo');
this.editor.modesPanel.selectAllLeds();
this.editor.devicePanel.updateSelectedDevice('Duo', true);
this.editor.modesPanel.refreshModeList();
// update ui
document.getElementById('duoIcon').style.display = 'block';
document.getElementById('duoInfo').style.display = 'block';
document.getElementById('duoVersion').textContent = this.duoHeader.version;
document.getElementById('duoModes').textContent = this.duoHeader.numModes;
const chromalinkDetails = document.getElementById('chromalinkDetails');
chromalinkDetails.style.display = 'block';
const flashButton = document.getElementById('chromalinkFlash');
const updateButton = document.getElementById('chromalinkUpdate');
flashButton.disabled = false;
updateButton.disabled = false;
// give a notification
Notification.success('Successfully Chromalinked Duo v' + this.duoHeader.version);
} catch (error) {
Expand All @@ -134,15 +129,11 @@ export default class ChromalinkPanel extends Panel {
if (!this.editor.lightshow.vortex.setModes(this.oldModes, false)) {
throw new Error('Failed to restore old modes');
}
this.editor.modesPanel.refreshModeList();
this.oldModes = null;
this.editor.modesPanel.updateSelectedDevice('Chromadeck', true);
this.editor.modesPanel.selectAllLeds();
this.editor.devicePanel.updateSelectedDevice('Chromadeck', true);
const chromalinkDetails = document.getElementById('chromalinkDetails');
chromalinkDetails.style.display = 'none';
const flashButton = document.getElementById('chromalinkFlash');
const updateButton = document.getElementById('chromalinkUpdate');
flashButton.disabled = true;
updateButton.disabled = true;
document.getElementById('duoIcon').style.display = 'none';
document.getElementById('duoInfo').style.display = 'none';
Notification.success('Successfully Disconnected Chromalink');
Expand Down
6 changes: 6 additions & 0 deletions js/ColorPickerPanel.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,11 @@ export default class ColorPickerPanel extends Panel {
this.initHueCircle(h);
}

hide() {
this.editor.demoModeOnDevice();
super.hide();
}

rgbToHsv(r, g, b) {
const RGBCol = new this.lightshow.vortexLib.RGBColor(r, g, b);
const HSVCol = this.lightshow.vortexLib.rgb_to_hsv_generic(RGBCol);
Expand Down Expand Up @@ -301,6 +306,7 @@ export default class ColorPickerPanel extends Panel {
document.removeEventListener('mousemove', moveEventHandler);
document.removeEventListener('mouseup', stopDragging);
updateColorUI(false); // Final update after dragging ends
this.editor.demoModeOnDevice();
};

moveHandler(event, isDragging);
Expand Down
Loading

0 comments on commit 97e5404

Please sign in to comment.