Add LED type detection, improve device card layout
Some checks failed
Validate / validate (push) Failing after 9s
Some checks failed
Validate / validate (push) Failing after 9s
- Detect LED chip type (WS2812B, SK6812, etc.) from WLED /json/cfg - Show RGBW/RGB channel indicator with colored squares on device card - Move version, display index, LED count to subtitle row under device name - Add remove button as × icon in top-right corner of card - Hide latency from card display (still visible in health dot tooltip) - Fix display layout overflow on narrow viewports - Add wled_rgbw and wled_led_type to ProcessingState API schema Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -327,9 +327,10 @@ function renderDisplayLayout(displays) {
|
||||
const totalWidth = maxX - minX;
|
||||
const totalHeight = maxY - minY;
|
||||
|
||||
// Scale factor to fit in canvas (600px wide max, maintain aspect ratio)
|
||||
const maxCanvasWidth = 600;
|
||||
const maxCanvasHeight = 350;
|
||||
// Scale factor to fit in canvas (respect available width, maintain aspect ratio)
|
||||
const availableWidth = canvas.clientWidth - 60; // account for padding
|
||||
const maxCanvasWidth = Math.min(600, availableWidth);
|
||||
const maxCanvasHeight = 450;
|
||||
const scaleX = maxCanvasWidth / totalWidth;
|
||||
const scaleY = maxCanvasHeight / totalHeight;
|
||||
const scale = Math.min(scaleX, scaleY, 0.3); // Max 0.3 scale to keep monitors reasonably sized
|
||||
@@ -489,8 +490,8 @@ function createDeviceCard(device) {
|
||||
healthTitle = `${t('device.health.online')}`;
|
||||
if (wledName) healthTitle += ` - ${wledName}`;
|
||||
if (wledVersion) healthTitle += ` v${wledVersion}`;
|
||||
healthLabel = wledLatency !== null && wledLatency !== undefined
|
||||
? `<span class="health-latency">${Math.round(wledLatency)}ms</span>` : '';
|
||||
if (wledLatency !== null && wledLatency !== undefined) healthTitle += ` (${Math.round(wledLatency)}ms)`;
|
||||
healthLabel = '';
|
||||
} else {
|
||||
healthClass = 'health-offline';
|
||||
healthTitle = t('device.health.offline');
|
||||
@@ -498,21 +499,27 @@ function createDeviceCard(device) {
|
||||
healthLabel = `<span class="health-latency offline">${t('device.health.offline')}</span>`;
|
||||
}
|
||||
|
||||
const displayIndex = settings.display_index !== undefined ? settings.display_index : 0;
|
||||
const ledCount = state.wled_led_count || device.led_count;
|
||||
|
||||
return `
|
||||
<div class="card" data-device-id="${device.id}">
|
||||
<button class="card-remove-btn" onclick="removeDevice('${device.id}')" title="${t('device.button.remove')}">✕</button>
|
||||
<div class="card-header">
|
||||
<div class="card-title">
|
||||
<span class="health-dot ${healthClass}" title="${healthTitle}"></span>
|
||||
${device.name || device.id}
|
||||
${wledVersion ? `<span class="wled-version">v${wledVersion}</span>` : ''}
|
||||
${healthLabel}
|
||||
</div>
|
||||
<div class="card-header-badges">
|
||||
<span class="display-badge" title="${t('device.display')} ${settings.display_index !== undefined ? settings.display_index : 0}">🖥️${settings.display_index !== undefined ? settings.display_index : 0}</span>
|
||||
${state.wled_led_count ? `<span class="led-count-badge" title="${t('device.led_count')} ${state.wled_led_count}">💡${state.wled_led_count}</span>` : ''}
|
||||
${isProcessing ? `<span class="badge processing">${t('device.status.processing')}</span>` : ''}
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-subtitle">
|
||||
${wledVersion ? `<span class="card-meta">v${wledVersion}</span>` : ''}
|
||||
<span class="card-meta" title="${t('device.display')}">🖥️ ${displayIndex}</span>
|
||||
${ledCount ? `<span class="card-meta" title="${t('device.led_count')}">💡 ${ledCount}</span>` : ''}
|
||||
${state.wled_led_type ? `<span class="card-meta">🔌 ${state.wled_led_type.replace(/ RGBW$/, '')}</span>` : ''}
|
||||
<span class="card-meta" title="${state.wled_rgbw ? 'RGBW' : 'RGB'}"><span class="channel-indicator"><span class="ch" style="background:#e53935"></span><span class="ch" style="background:#43a047"></span><span class="ch" style="background:#1e88e5"></span>${state.wled_rgbw ? '<span class="ch" style="background:#eee"></span>' : ''}</span></span>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="info-row">
|
||||
<span class="info-label">${t('device.url')}</span>
|
||||
@@ -565,9 +572,6 @@ function createDeviceCard(device) {
|
||||
<button class="btn btn-icon btn-secondary" onclick="showPixelPreview('${device.id}')" title="${t('preview.button')}">
|
||||
👁️
|
||||
</button>
|
||||
<button class="btn btn-icon btn-danger" onclick="removeDevice('${device.id}')" title="${t('device.button.remove')}">
|
||||
🗑️
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@@ -173,6 +173,7 @@ section {
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 8px;
|
||||
padding: 20px;
|
||||
position: relative;
|
||||
transition: transform 0.2s, box-shadow 0.2s;
|
||||
}
|
||||
|
||||
@@ -180,24 +181,35 @@ section {
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.card-remove-btn {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
background: none;
|
||||
border: none;
|
||||
color: #777;
|
||||
font-size: 1rem;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
border-radius: 4px;
|
||||
transition: color 0.2s, background 0.2s;
|
||||
}
|
||||
|
||||
.card-remove-btn:hover {
|
||||
color: var(--danger-color);
|
||||
background: rgba(244, 67, 54, 0.1);
|
||||
}
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.card-header-badges {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.display-badge,
|
||||
.led-count-badge {
|
||||
font-size: 0.8rem;
|
||||
color: var(--info-color);
|
||||
opacity: 0.8;
|
||||
margin-bottom: 4px;
|
||||
padding-right: 30px;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
@@ -206,16 +218,35 @@ section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.wled-version {
|
||||
font-size: 0.65rem;
|
||||
font-weight: 400;
|
||||
color: var(--text-secondary);
|
||||
background: var(--border-color);
|
||||
padding: 1px 6px;
|
||||
border-radius: 8px;
|
||||
letter-spacing: 0.03em;
|
||||
.card-subtitle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin-bottom: 15px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.card-meta {
|
||||
font-size: 0.8rem;
|
||||
color: #999;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.channel-indicator {
|
||||
display: inline-flex;
|
||||
gap: 2px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.channel-indicator .ch {
|
||||
width: 8px;
|
||||
height: 10px;
|
||||
border-radius: 1px;
|
||||
}
|
||||
|
||||
.badge {
|
||||
@@ -363,10 +394,11 @@ section {
|
||||
border: 2px dashed var(--border-color);
|
||||
border-radius: 8px;
|
||||
padding: 30px;
|
||||
min-height: 300px;
|
||||
min-height: 280px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.layout-container {
|
||||
|
||||
Reference in New Issue
Block a user