터치 디스플레이 밝기 제어 추가

public/assets/app.js

@@ -205,6 +205,11 @@
             touchDisplayConnected: 'Connected',
             touchDisplayMode: 'Mode',
             touchDisplayFramebuffer: 'Framebuffer',
+            touchBacklight: 'Backlight',
+            touchBrightness: 'Brightness',
+            touchBacklightEnabled: 'Backlight power',
+            touchRuntimeSave: 'Apply brightness now',
+            touchRuntimeSaved: 'Brightness applied.',
             touchDisplayOverlay: 'Manual overlay',
             touchDisplayAutoDetect: 'Auto detect',
             touchDisplayEnabled: 'LCD output',
@@ -376,6 +381,11 @@
             touchDisplayConnected: '연결',
             touchDisplayMode: '모드',
             touchDisplayFramebuffer: '프레임버퍼',
+            touchBacklight: '백라이트',
+            touchBrightness: '밝기',
+            touchBacklightEnabled: '백라이트 전원',
+            touchRuntimeSave: '밝기 즉시 적용',
+            touchRuntimeSaved: '밝기를 적용했습니다.',
             touchDisplayOverlay: '수동 overlay',
             touchDisplayAutoDetect: '자동 감지',
             touchDisplayEnabled: 'LCD 출력',
@@ -699,6 +709,7 @@
             [t('touchDisplayConnected'), `${display.status || 'unknown'} / ${display.enabled_state || 'unknown'} / ${display.dpms || 'unknown'}`],
             [t('touchDisplayMode'), display.current_mode || '-'],
             [t('touchDisplayFramebuffer'), display.framebuffer || '-'],
+            [t('touchBacklight'), display.backlight?.available ? `${display.backlight.brightness ?? '-'} / ${display.backlight.max_brightness ?? '-'} (${display.backlight.percent ?? '-'}%)` : '-'],
             [t('touchDisplayAutoDetect'), boolLabel(!!config.display_auto_detect)],
             [t('touchDisplayOverlay'), boolLabel(!!config.manual_overlay)],
         ];
@@ -725,6 +736,9 @@
                 </span>
             </div>
         `;
+        const backlight = display.backlight || {};
+        const maxBrightness = Number(backlight.max_brightness || 255);
+        const brightness = Number(backlight.brightness ?? maxBrightness);
 
         return `
             <section class="settings-group touch-display-settings">
@@ -758,6 +772,24 @@
                     <button id="touchDisplaySave" class="btn" type="button">${escapeHtml(t('touchDisplaySave'))}</button>
                     <span class="settings-note">/boot/firmware/config.txt, /boot/firmware/cmdline.txt</span>
                 </div>
+                ${backlight.available ? `
+                    <div class="touch-runtime-box">
+                        <h4>${escapeHtml(t('touchBacklight'))}</h4>
+                        <div class="settings-grid">
+                            <div class="settings-field">
+                                <span class="settings-label"><span>${escapeHtml(t('touchBrightness'))}</span><span id="touchBrightnessValue">${escapeHtml(brightness)} / ${escapeHtml(maxBrightness)}</span></span>
+                                <span class="settings-control">
+                                    <input data-display-runtime-key="brightness" type="range" min="0" max="${escapeHtml(maxBrightness)}" step="1" autocomplete="off" value="${escapeHtml(brightness)}" class="slider">
+                                </span>
+                            </div>
+                            ${checkboxField('backlight_enabled', t('touchBacklightEnabled'), backlight.enabled !== false).replaceAll('data-display-key', 'data-display-runtime-key')}
+                        </div>
+                        <div class="settings-inline-actions">
+                            <button id="touchRuntimeSave" class="btn secondary" type="button">${escapeHtml(t('touchRuntimeSave'))}</button>
+                            <span class="settings-note">${escapeHtml(backlight.path || '')}</span>
+                        </div>
+                    </div>
+                ` : ''}
             </section>
         `;
     }
@@ -875,6 +907,14 @@
             });
         });
         $('#touchDisplaySave', els.settingsBody)?.addEventListener('click', saveTouchDisplaySettings);
+        $('#touchRuntimeSave', els.settingsBody)?.addEventListener('click', saveTouchDisplayRuntime);
+        const brightnessSlider = els.settingsBody.querySelector('[data-display-runtime-key="brightness"]');
+        const brightnessValue = $('#touchBrightnessValue', els.settingsBody);
+        brightnessSlider?.addEventListener('input', () => {
+            if (brightnessValue) {
+                brightnessValue.textContent = `${brightnessSlider.value} / ${brightnessSlider.max}`;
+            }
+        });
     }
 
     function settingByKey(key, fallback = null) {
@@ -925,6 +965,16 @@
         return values;
     }
 
+    function currentTouchDisplayRuntimeValues() {
+        const values = {};
+        els.settingsBody?.querySelectorAll('[data-display-runtime-key]').forEach(input => {
+            values[input.dataset.displayRuntimeKey] = input.type === 'checkbox'
+                ? (input.checked ? '1' : '0')
+                : input.value;
+        });
+        return values;
+    }
+
     async function saveTouchDisplaySettings() {
         if (!await window.customConfirm('디스플레이 부팅 설정을 저장할까요? 저장 후 재부팅해야 적용됩니다.', { title: t('touchDisplaySettings') })) {
             return;
@@ -944,6 +994,21 @@
         }
     }
 
+    async function saveTouchDisplayRuntime() {
+        try {
+            const data = await api('touch_display_runtime_save', {
+                runtime: JSON.stringify(currentTouchDisplayRuntimeValues()),
+            });
+            state.settingsDirty = false;
+            render(data);
+            renderSettings(data.settings, { force: true });
+            notice(t('touchRuntimeSaved'), 'success');
+        } catch (e) {
+            console.error(e);
+            notice(e.message || t('settingsSaveFailed'), 'error');
+        }
+    }
+
     async function saveSettings() {
         try {
             const data = await api('settings_save', {