From 8eb7ae6f1a0d05120823f8aa6f30e0bc75bcf321 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Tue, 21 Oct 2025 17:12:00 +0000
Subject: [PATCH 1/4] Rework cropping system with dual-image interface for
 better UX
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This commit completely reworks the image cropping functionality to address
several UX issues:

**Problems Fixed:**
- Users were confused when the preview showed a cropped image but the overlay
  referenced the original dimensions
- Cropping was blocked after first crop, requiring reset to adjust
- Users could only crop from one position without resetting
- Input fields were disabled after cropping, preventing adjustments

**New Dual-Image Cropping System:**
- Top image: Source/original image with interactive crop overlay
- Bottom image: Live preview of cropped result (auto-updating with 100ms debounce)
- Users can now adjust cropping multiple times without resetting
- All crop inputs remain enabled for continuous adjustments
- Reset button always visible when crop is enabled for easy reset
- No separate "Preview" button needed - updates happen automatically

**Technical Changes:**
- Added sourceImageData variable to store original image for canvas rendering
- Created updateCropPreview() and drawCropPreview() for live crop preview
- Updated updateCropVisibility() to toggle between dual-image and single-image modes
- Removed blocking logic from updateCropInteractionState()
- Updated all crop interaction functions to use source-image instead of preview-image
- Added auto-update triggers in drag/resize mousemove handlers
- Added CSS for crop section titles and canvas preview styling

Files modified:
- panel.html: New dual-image layout structure
- panel.js: Crop preview logic and interaction updates
- styles.css: Styling for new crop sections

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../frontend/panel.html                       |  32 ++--
 .../frontend/panel.js                         | 158 ++++++++++++------
 .../frontend/styles.css                       |  26 ++-
 3 files changed, 153 insertions(+), 63 deletions(-)

diff --git a/custom_components/camera_snapshot_processor/frontend/panel.html b/custom_components/camera_snapshot_processor/frontend/panel.html
index 0df96e6..007915b 100644
--- a/custom_components/camera_snapshot_processor/frontend/panel.html
+++ b/custom_components/camera_snapshot_processor/frontend/panel.html
@@ -304,20 +304,32 @@ <h3>Live Preview</h3>
                                 <div class="spinner"></div>
                                 <p>Loading preview...</p>
                             </div>
-                            <div id="preview-image-wrapper" class="preview-image-wrapper">
-                                <img id="preview-image" alt="Preview">
-                                <div id="crop-overlay" class="crop-overlay" style="display: none;">
-                                    <div class="crop-box">
-                                        <div class="crop-handle nw"></div>
-                                        <div class="crop-handle ne"></div>
-                                        <div class="crop-handle sw"></div>
-                                        <div class="crop-handle se"></div>
+                            <!-- Original/Source Image with Crop Overlay -->
+                            <div id="source-image-section" style="display: none;">
+                                <h4 class="crop-section-title">Source Image (adjust crop area)</h4>
+                                <div id="source-image-wrapper" class="preview-image-wrapper">
+                                    <img id="source-image" alt="Source Image">
+                                    <div id="crop-overlay" class="crop-overlay" style="display: none;">
+                                        <div class="crop-box">
+                                            <div class="crop-handle nw"></div>
+                                            <div class="crop-handle ne"></div>
+                                            <div class="crop-handle sw"></div>
+                                            <div class="crop-handle se"></div>
+                                        </div>
                                     </div>
                                 </div>
-                                <div id="crop-message" class="crop-message" style="display: none;">
-                                    To change cropping - use 🔄 Reset button
+                            </div>
+                            <!-- Cropped Preview Image -->
+                            <div id="cropped-preview-section" style="display: none;">
+                                <h4 class="crop-section-title">Cropped Result Preview</h4>
+                                <div id="cropped-preview-wrapper" class="preview-image-wrapper">
+                                    <canvas id="cropped-preview-canvas"></canvas>
                                 </div>
                             </div>
+                            <!-- Main Preview Image (shown when not cropping) -->
+                            <div id="preview-image-wrapper" class="preview-image-wrapper">
+                                <img id="preview-image" alt="Preview">
+                            </div>
                         </div>
                         <div class="preview-info">
                             <p id="preview-dimensions"></p>
diff --git a/custom_components/camera_snapshot_processor/frontend/panel.js b/custom_components/camera_snapshot_processor/frontend/panel.js
index 76bb0da..fe7fee1 100644
--- a/custom_components/camera_snapshot_processor/frontend/panel.js
+++ b/custom_components/camera_snapshot_processor/frontend/panel.js
@@ -18,6 +18,8 @@
     let cropStartX = 0;
     let cropStartY = 0;
     let currentTab = 'dimensions';
+    let sourceImageData = null; // Store the source image for cropping
+    let cropPreviewDebounceTimer = null;
 
     // ==================== Custom Notification System ====================
 
@@ -1261,6 +1263,22 @@
             const blob = await response.blob();
             sourceImageSize = blob.size;
 
+            // Store source image for cropping
+            const imageUrl = URL.createObjectURL(blob);
+            const img = new Image();
+            img.onload = () => {
+                sourceImageData = img;
+                // Update source image element
+                const sourceImg = document.getElementById('source-image');
+                if (sourceImg) {
+                    sourceImg.src = imageUrl;
+                }
+                // Update crop preview if crop is enabled
+                updateCropVisibility();
+                updateCropPreview();
+            };
+            img.src = imageUrl;
+
             const sourceDim = document.getElementById('source-dimensions');
             if (sourceDim) {
                 sourceDim.textContent = `Source: ${width} × ${height}px`;
@@ -1309,6 +1327,45 @@
         }
     }
 
+    function updateCropPreview() {
+        // Debounced update of crop preview
+        clearTimeout(cropPreviewDebounceTimer);
+        cropPreviewDebounceTimer = setTimeout(() => {
+            drawCropPreview();
+        }, 100); // 100ms debounce
+    }
+
+    function drawCropPreview() {
+        if (!sourceImageData || !document.getElementById('crop_enabled').checked || currentTab !== 'crop') {
+            return;
+        }
+
+        const canvas = document.getElementById('cropped-preview-canvas');
+        const ctx = canvas.getContext('2d');
+
+        const cropX = parseInt(document.getElementById('crop_x').value) || 0;
+        const cropY = parseInt(document.getElementById('crop_y').value) || 0;
+        const cropWidth = parseInt(document.getElementById('crop_width').value) || sourceImageDimensions.width;
+        const cropHeight = parseInt(document.getElementById('crop_height').value) || sourceImageDimensions.height;
+
+        // Validate crop boundaries
+        const validCropX = Math.max(0, Math.min(cropX, sourceImageDimensions.width));
+        const validCropY = Math.max(0, Math.min(cropY, sourceImageDimensions.height));
+        const validCropWidth = Math.min(cropWidth, sourceImageDimensions.width - validCropX);
+        const validCropHeight = Math.min(cropHeight, sourceImageDimensions.height - validCropY);
+
+        // Set canvas size to crop dimensions
+        canvas.width = validCropWidth;
+        canvas.height = validCropHeight;
+
+        // Draw the cropped portion
+        ctx.drawImage(
+            sourceImageData,
+            validCropX, validCropY, validCropWidth, validCropHeight,
+            0, 0, validCropWidth, validCropHeight
+        );
+    }
+
     function isCropped() {
         // Check if current crop settings differ from source dimensions
         if (!sourceImageDimensions.width || !sourceImageDimensions.height) {
@@ -1332,16 +1389,16 @@
         if (cropEnabled && isCropped()) {
             // Image is cropped - show reset button
             resetBtn.style.display = 'inline-block';
-
-            // Disable crop input fields
-            ['crop_x', 'crop_y', 'crop_width', 'crop_height'].forEach(id => {
-                document.getElementById(id).disabled = true;
-            });
         } else if (cropEnabled) {
-            // Crop enabled but not yet cropped - hide reset button
+            // Crop enabled but not yet cropped - show reset button (always visible for easy reset)
+            resetBtn.style.display = 'inline-block';
+        } else {
+            // Crop not enabled - hide reset button
             resetBtn.style.display = 'none';
+        }
 
-            // Enable crop input fields
+        // Always enable crop input fields when crop is enabled (allow multiple adjustments)
+        if (cropEnabled) {
             ['crop_x', 'crop_y', 'crop_width', 'crop_height'].forEach(id => {
                 document.getElementById(id).disabled = false;
             });
@@ -1351,29 +1408,31 @@
     function updateCropVisibility() {
         const cropEnabled = document.getElementById('crop_enabled').checked;
         const cropOverlay = document.getElementById('crop-overlay');
-        const cropMessage = document.getElementById('crop-message');
-        const cropBox = cropOverlay.querySelector('.crop-box');
         const onCropTab = currentTab === 'crop';
 
-        // Only show crop-related UI when on crop tab
-        if (!onCropTab || !cropEnabled) {
-            cropOverlay.style.display = 'none';
-            cropMessage.style.display = 'none';
-            return;
-        }
+        const sourceImageSection = document.getElementById('source-image-section');
+        const croppedPreviewSection = document.getElementById('cropped-preview-section');
+        const previewImageWrapper = document.getElementById('preview-image-wrapper');
 
-        // On crop tab with crop enabled
-        if (isCropped()) {
-            // Image is already cropped - hide overlay, show message
-            cropOverlay.style.display = 'none';
-            cropMessage.style.display = 'flex';
-        } else {
-            // Image not cropped - show overlay for interactive cropping
+        // Show dual-image layout only when on crop tab and crop enabled
+        if (onCropTab && cropEnabled && sourceImageData) {
+            // Show dual-image cropping interface
+            sourceImageSection.style.display = 'block';
+            croppedPreviewSection.style.display = 'block';
+            previewImageWrapper.style.display = 'none';
             cropOverlay.style.display = 'block';
-            cropMessage.style.display = 'none';
-            cropBox.style.pointerEvents = 'auto';
-            cropBox.style.opacity = '1';
-            cropBox.style.cursor = 'move';
+
+            // Update crop box position
+            updateCropBox();
+
+            // Update cropped preview
+            updateCropPreview();
+        } else {
+            // Show regular preview image
+            sourceImageSection.style.display = 'none';
+            croppedPreviewSection.style.display = 'none';
+            previewImageWrapper.style.display = 'block';
+            cropOverlay.style.display = 'none';
         }
     }
 
@@ -1434,7 +1493,7 @@
     // ==================== Interactive Crop ====================
 
     function setupCropInteraction() {
-        const previewImage = document.getElementById('preview-image');
+        const sourceImage = document.getElementById('source-image');
         const cropOverlay = document.getElementById('crop-overlay');
         const cropBox = cropOverlay.querySelector('.crop-box');
 
@@ -1459,21 +1518,17 @@
             });
         });
 
-        // Update crop box when preview loads
-        previewImage.addEventListener('load', updateCropBox);
+        // Update crop box when source image loads
+        sourceImage.addEventListener('load', updateCropBox);
     }
 
     function startDragCrop(e) {
-        // Don't allow dragging if image is already cropped
-        if (isCropped()) {
-            return;
-        }
-
         e.preventDefault();
         cropDragging = true;
 
-        const previewImage = document.getElementById('preview-image');
-        const rect = previewImage.getBoundingClientRect();
+        // Use source image for crop interaction
+        const sourceImage = document.getElementById('source-image');
+        const rect = sourceImage.getBoundingClientRect();
 
         cropStartX = e.clientX;
         cropStartY = e.clientY;
@@ -1488,8 +1543,9 @@
             const deltaY = e.clientY - cropStartY;
 
             // Convert pixel delta to source image coordinates
-            const scaleX = sourceImageDimensions.width / previewImage.clientWidth;
-            const scaleY = sourceImageDimensions.height / previewImage.clientHeight;
+            const sourceImage = document.getElementById('source-image');
+            const scaleX = sourceImageDimensions.width / sourceImage.clientWidth;
+            const scaleY = sourceImageDimensions.height / sourceImage.clientHeight;
 
             const newX = Math.max(0, Math.min(sourceImageDimensions.width - parseInt(document.getElementById('crop_width').value), currentX + deltaX * scaleX));
             const newY = Math.max(0, Math.min(sourceImageDimensions.height - parseInt(document.getElementById('crop_height').value), currentY + deltaY * scaleY));
@@ -1497,13 +1553,13 @@
             setInputValue('crop_x', Math.round(newX));
             setInputValue('crop_y', Math.round(newY));
             updateCropBox();
+            updateCropPreview(); // Update crop preview immediately
         };
 
         const mouseup = () => {
             cropDragging = false;
             document.removeEventListener('mousemove', mousemove);
             document.removeEventListener('mouseup', mouseup);
-            schedulePreviewUpdate();
         };
 
         document.addEventListener('mousemove', mousemove);
@@ -1511,15 +1567,10 @@
     }
 
     function startResizeCrop(e, handlePosition) {
-        // Don't allow resizing if image is already cropped
-        if (isCropped()) {
-            return;
-        }
-
         e.preventDefault();
         cropResizing = true;
 
-        const previewImage = document.getElementById('preview-image');
+        const sourceImage = document.getElementById('source-image');
         cropStartX = e.clientX;
         cropStartY = e.clientY;
 
@@ -1535,8 +1586,9 @@
             const deltaY = e.clientY - cropStartY;
 
             // Convert pixel delta to source image coordinates
-            const scaleX = sourceImageDimensions.width / previewImage.clientWidth;
-            const scaleY = sourceImageDimensions.height / previewImage.clientHeight;
+            const sourceImage = document.getElementById('source-image');
+            const scaleX = sourceImageDimensions.width / sourceImage.clientWidth;
+            const scaleY = sourceImageDimensions.height / sourceImage.clientHeight;
 
             let newX = startX;
             let newY = startY;
@@ -1573,13 +1625,13 @@
             setInputValue('crop_width', Math.round(newWidth));
             setInputValue('crop_height', Math.round(newHeight));
             updateCropBox();
+            updateCropPreview(); // Update crop preview immediately
         };
 
         const mouseup = () => {
             cropResizing = false;
             document.removeEventListener('mousemove', mousemove);
             document.removeEventListener('mouseup', mouseup);
-            schedulePreviewUpdate();
         };
 
         document.addEventListener('mousemove', mousemove);
@@ -1587,11 +1639,13 @@
     }
 
     function updateCropBox() {
-        const previewImage = document.getElementById('preview-image');
         const cropOverlay = document.getElementById('crop-overlay');
         const cropBox = cropOverlay.querySelector('.crop-box');
 
-        if (!previewImage.complete || !sourceImageDimensions.width) return;
+        // Use source image when in dual-image crop mode
+        const sourceImage = document.getElementById('source-image');
+
+        if (!sourceImage || !sourceImage.complete || !sourceImageDimensions.width) return;
 
         const cropX = parseInt(document.getElementById('crop_x').value) || 0;
         const cropY = parseInt(document.getElementById('crop_y').value) || 0;
@@ -1600,8 +1654,8 @@
 
         // Calculate position and size based on the actual rendered image dimensions
         // The image is rendered with natural aspect ratio maintained
-        const scaleX = previewImage.clientWidth / sourceImageDimensions.width;
-        const scaleY = previewImage.clientHeight / sourceImageDimensions.height;
+        const scaleX = sourceImage.clientWidth / sourceImageDimensions.width;
+        const scaleY = sourceImage.clientHeight / sourceImageDimensions.height;
 
         const left = cropX * scaleX;
         const top = cropY * scaleY;
diff --git a/custom_components/camera_snapshot_processor/frontend/styles.css b/custom_components/camera_snapshot_processor/frontend/styles.css
index 1a2b9c2..5dc6d5a 100644
--- a/custom_components/camera_snapshot_processor/frontend/styles.css
+++ b/custom_components/camera_snapshot_processor/frontend/styles.css
@@ -548,7 +548,7 @@ body {
     display: block;
 }
 
-#preview-image {
+#preview-image, #source-image {
     max-width: 100%;
     max-height: 100%;
     border-radius: 8px;
@@ -640,6 +640,30 @@ body {
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
 }
 
+/* Crop Section Titles */
+.crop-section-title {
+    margin: 15px 0 10px 0;
+    font-size: 0.95em;
+    font-weight: 600;
+    color: #667eea;
+    text-align: center;
+}
+
+#source-image-section {
+    margin-bottom: 20px;
+}
+
+#cropped-preview-section {
+    margin-bottom: 20px;
+}
+
+#cropped-preview-canvas {
+    max-width: 100%;
+    height: auto;
+    display: block;
+    border-radius: 8px;
+}
+
 /* State Icons List */
 #state-icons-list {
     margin-bottom: 20px;

From 0bb33d71058b00fa01480488d6d20fde12112965 Mon Sep 17 00:00:00 2001
From: Patras3 <patrykdadas@gmail.com>
Date: Wed, 22 Oct 2025 00:51:06 +0200
Subject: [PATCH 2/4] Add opacity support for all text and background colors
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Changes:
Frontend (UI):
- Add opacity sliders (0.0-1.0, step 0.1) to Overlays tab for text color and background color
- Add opacity slider to State Icons tab for global background color
- Add opacity sliders to state-icon-manager.js for individual state rule icon and text colors
- Update panel.js to save/load opacity values in getFormData() and populateForm()
- Add event listeners for opacity sliders to update value displays
- Style opacity sliders to match existing UI

Backend (Python):
- Add opacity constants: CONF_OVERLAY_COLOR_OPACITY, CONF_OVERLAY_BACKGROUND_OPACITY, CONF_STATE_ICON_BACKGROUND_OPACITY
- Update _hex_to_rgba() to accept optional opacity parameter that multiplies with alpha channel
- Update _draw_text() to apply overlay color and background opacity values
- Update _draw_multicolor_text() to apply state icon background opacity
- Update _draw_state_icon() to extract icon_opacity and text_opacity from state rules
- Pass opacity values through parts list to _draw_multicolor_text() for rendering

This allows users to configure transparency for:
- Overlay text color (datetime, custom text)
- Overlay background
- State icon global background
- State icon rule-specific icon color
- State icon rule-specific text color

All opacity values default to 1.0 (fully opaque) for backward compatibility.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../camera_snapshot_processor/const.py        |   3 +
 .../frontend/panel.html                       |  42 ++++++-
 .../frontend/panel.js                         | 117 ++++++++++++++----
 .../frontend/state-icon-manager.js            |  27 ++++
 .../image_processor.py                        |  46 +++++--
 5 files changed, 201 insertions(+), 34 deletions(-)

diff --git a/custom_components/camera_snapshot_processor/const.py b/custom_components/camera_snapshot_processor/const.py
index e50b131..988aeb3 100644
--- a/custom_components/camera_snapshot_processor/const.py
+++ b/custom_components/camera_snapshot_processor/const.py
@@ -30,8 +30,11 @@
 CONF_TEXT_FONT_SIZE = "text_font_size"
 CONF_STATE_ICON_FONT_SIZE = "state_icon_font_size"
 CONF_OVERLAY_COLOR = "overlay_color"
+CONF_OVERLAY_COLOR_OPACITY = "overlay_color_opacity"
 CONF_OVERLAY_BACKGROUND = "overlay_background"
+CONF_OVERLAY_BACKGROUND_OPACITY = "overlay_background_opacity"
 CONF_STATE_ICON_BACKGROUND = "state_icon_background"
+CONF_STATE_ICON_BACKGROUND_OPACITY = "state_icon_background_opacity"
 
 # State icons configuration (multiple icons supported)
 CONF_STATE_ICONS = "state_icons"
diff --git a/custom_components/camera_snapshot_processor/frontend/panel.html b/custom_components/camera_snapshot_processor/frontend/panel.html
index 007915b..5b29905 100644
--- a/custom_components/camera_snapshot_processor/frontend/panel.html
+++ b/custom_components/camera_snapshot_processor/frontend/panel.html
@@ -68,8 +68,8 @@ <h1 id="camera-title">Camera Configuration</h1>
                     <!-- Left: Configuration Tabs -->
                     <div class="config-panel">
                         <div class="tabs">
-                            <button class="tab active" data-tab="dimensions">📐 Dimensions</button>
-                            <button class="tab" data-tab="crop">✂️ Crop</button>
+                            <button class="tab active" data-tab="crop">✂️ Crop</button>
+                            <button class="tab" data-tab="dimensions">📐 Dimensions</button>
                             <button class="tab" data-tab="overlays">🎨 Overlays</button>
                             <button class="tab" data-tab="state-icons">💡 State Icons</button>
                             <button class="tab" data-tab="stream">📡 Stream</button>
@@ -77,17 +77,23 @@ <h1 id="camera-title">Camera Configuration</h1>
 
                         <div class="tab-content">
                             <!-- Dimensions Tab -->
-                            <div class="tab-pane active" id="tab-dimensions">
+                            <div class="tab-pane" id="tab-dimensions">
                                 <h3>Image Dimensions & Quality</h3>
 
                                 <!-- Info tip at top -->
                                 <div class="info-tip">
                                     <span class="info-icon">ℹ️</span>
                                     <span class="info-text">
-                                        For custom values or upscaling, type directly in the input fields.
+                                        <strong>Step 2:</strong> Resize the image to these dimensions.<br>
+                                        If cropping is enabled, the cropped area will be resized. Otherwise, the full camera image will be resized.
                                     </span>
                                 </div>
 
+                                <!-- Source dimensions display -->
+                                <div id="source-size-info" style="background: #e8f5e9; border: 2px solid #4caf50; border-radius: 8px; padding: 12px; margin-bottom: 20px; font-size: 14px;">
+                                    <strong>Source Image Size:</strong> <span id="effective-source-dimensions">Loading...</span>
+                                </div>
+
                                 <div class="form-group checkbox-group">
                                     <label>
                                         <input type="checkbox" id="keep_ratio" checked>
@@ -128,9 +134,17 @@ <h3>Image Dimensions & Quality</h3>
                             </div>
 
                             <!-- Crop Tab -->
-                            <div class="tab-pane" id="tab-crop">
+                            <div class="tab-pane active" id="tab-crop">
                                 <h3>Crop Settings</h3>
 
+                                <!-- Info tip at top -->
+                                <div class="info-tip">
+                                    <span class="info-icon">ℹ️</span>
+                                    <span class="info-text">
+                                        <strong>Optional Step 1:</strong> Crop a specific area from the camera image. If enabled, cropping happens before resizing (Dimensions tab).
+                                    </span>
+                                </div>
+
                                 <div class="form-group checkbox-group">
                                     <label>
                                         <input type="checkbox" id="crop_enabled">
@@ -245,6 +259,12 @@ <h4>Overlay Styling</h4>
                                         <input type="hidden" id="overlay_color" value="#ffffff">
                                     </div>
 
+                                    <div class="form-group">
+                                        <label for="overlay_color_opacity">Text Opacity</label>
+                                        <input type="range" id="overlay_color_opacity" min="0" max="1" step="0.1" value="1.0">
+                                        <span class="value-display" id="overlay_color_opacity-value">1.0</span>
+                                    </div>
+
                                     <div class="form-group">
                                         <label for="overlay_background">Background Color</label>
                                         <div style="display: flex; align-items: center; gap: 10px;">
@@ -254,6 +274,12 @@ <h4>Overlay Styling</h4>
                                         <input type="hidden" id="overlay_background" value="#00000000">
                                         <small class="help-text">Click "Clear" for no background</small>
                                     </div>
+
+                                    <div class="form-group">
+                                        <label for="overlay_background_opacity">Background Opacity</label>
+                                        <input type="range" id="overlay_background_opacity" min="0" max="1" step="0.1" value="1.0">
+                                        <span class="value-display" id="overlay_background_opacity-value">1.0</span>
+                                    </div>
                                 </div>
                             </div>
 
@@ -280,6 +306,12 @@ <h4>State Icon Background</h4>
                                         <input type="hidden" id="state_icon_background" value="#00000000">
                                         <small class="help-text">Background color for all state icons. Click "Clear" for no background</small>
                                     </div>
+
+                                    <div class="form-group">
+                                        <label for="state_icon_background_opacity">Background Opacity</label>
+                                        <input type="range" id="state_icon_background_opacity" min="0" max="1" step="0.1" value="1.0">
+                                        <span class="value-display" id="state_icon_background_opacity-value">1.0</span>
+                                    </div>
                                 </div>
                             </div>
 
diff --git a/custom_components/camera_snapshot_processor/frontend/panel.js b/custom_components/camera_snapshot_processor/frontend/panel.js
index fe7fee1..6ab43d0 100644
--- a/custom_components/camera_snapshot_processor/frontend/panel.js
+++ b/custom_components/camera_snapshot_processor/frontend/panel.js
@@ -17,7 +17,7 @@
     let cropResizing = false;
     let cropStartX = 0;
     let cropStartY = 0;
-    let currentTab = 'dimensions';
+    let currentTab = 'crop';
     let sourceImageData = null; // Store the source image for cropping
     let cropPreviewDebounceTimer = null;
 
@@ -347,10 +347,16 @@
 
         // Tab switching
         document.querySelectorAll('.tab').forEach(tab => {
-            tab.addEventListener('click', () => {
+            tab.addEventListener('click', async () => {
                 currentTab = tab.dataset.tab;
                 switchTab(currentTab);
-                updateCropVisibility();
+                await updateCropVisibility();
+
+                // Refresh preview when switching away from crop tab
+                // This ensures overlays/state icons show on the cropped result
+                if (currentTab !== 'crop') {
+                    schedulePreviewUpdate();
+                }
             });
         });
 
@@ -371,13 +377,14 @@
         });
 
         // Crop toggle
-        document.getElementById('crop_enabled').addEventListener('change', (e) => {
+        document.getElementById('crop_enabled').addEventListener('change', async (e) => {
             const isEnabled = e.target.checked;
             document.getElementById('crop-controls').style.display = isEnabled ? 'block' : 'none';
 
             // Enable or disable interactive cropping based on whether image is already cropped
             updateCropInteractionState();
-            updateCropVisibility();
+            await updateCropVisibility();
+            updateEffectiveSourceSize();
         });
 
         // Reset crop button
@@ -465,6 +472,31 @@
             }
         });
 
+        // Opacity sliders - update value display
+        const overlayColorOpacitySlider = document.getElementById('overlay_color_opacity');
+        const overlayColorOpacityValue = document.getElementById('overlay_color_opacity-value');
+        if (overlayColorOpacitySlider && overlayColorOpacityValue) {
+            overlayColorOpacitySlider.addEventListener('input', (e) => {
+                overlayColorOpacityValue.textContent = e.target.value;
+            });
+        }
+
+        const overlayBackgroundOpacitySlider = document.getElementById('overlay_background_opacity');
+        const overlayBackgroundOpacityValue = document.getElementById('overlay_background_opacity-value');
+        if (overlayBackgroundOpacitySlider && overlayBackgroundOpacityValue) {
+            overlayBackgroundOpacitySlider.addEventListener('input', (e) => {
+                overlayBackgroundOpacityValue.textContent = e.target.value;
+            });
+        }
+
+        const stateIconBackgroundOpacitySlider = document.getElementById('state_icon_background_opacity');
+        const stateIconBackgroundOpacityValue = document.getElementById('state_icon_background_opacity-value');
+        if (stateIconBackgroundOpacitySlider && stateIconBackgroundOpacityValue) {
+            stateIconBackgroundOpacitySlider.addEventListener('input', (e) => {
+                stateIconBackgroundOpacityValue.textContent = e.target.value;
+            });
+        }
+
         // Setup interactive crop
         setupCropInteraction();
 
@@ -1033,11 +1065,14 @@
                 overlayColorPickr.setColor(hexColor);
             }
         }
+        setInputValue('overlay_color_opacity', config.overlay_color_opacity !== undefined ? config.overlay_color_opacity : 1.0);
+
         const bgColor = config.overlay_background || '#00000000';
         setInputValue('overlay_background', bgColor);
         if (overlayBackgroundPickr) {
             overlayBackgroundPickr.setColor(bgColor);
         }
+        setInputValue('overlay_background_opacity', config.overlay_background_opacity !== undefined ? config.overlay_background_opacity : 1.0);
 
         // State icon background
         const stateIconBgColor = config.state_icon_background || '#00000000';
@@ -1045,6 +1080,7 @@
         if (stateIconBackgroundPickr) {
             stateIconBackgroundPickr.setColor(stateIconBgColor);
         }
+        setInputValue('state_icon_background_opacity', config.state_icon_background_opacity !== undefined ? config.state_icon_background_opacity : 1.0);
 
         // Stream
         setInputValue('rtsp_url', config.rtsp_url || '');
@@ -1092,8 +1128,11 @@
             text_position: document.getElementById('text_position').value,
             text_font_size: parseInt(document.getElementById('text_font_size').value),
             overlay_color: hexToRgb(document.getElementById('overlay_color').value),
+            overlay_color_opacity: parseFloat(document.getElementById('overlay_color_opacity').value),
             overlay_background: document.getElementById('overlay_background').value,
+            overlay_background_opacity: parseFloat(document.getElementById('overlay_background_opacity').value),
             state_icon_background: document.getElementById('state_icon_background').value,
+            state_icon_background_opacity: parseFloat(document.getElementById('state_icon_background_opacity').value),
             rtsp_url: document.getElementById('rtsp_url').value,
             state_icons: stateIcons,
             source_width: currentConfig.source_width,
@@ -1228,7 +1267,7 @@
 
                 // Update interaction state
                 updateCropInteractionState();
-                updateCropVisibility();
+                updateCropVisibility(); // Don't await here as it's in an onload callback
             };
 
             previewImage.src = imageUrl;
@@ -1405,7 +1444,7 @@
         }
     }
 
-    function updateCropVisibility() {
+    async function updateCropVisibility() {
         const cropEnabled = document.getElementById('crop_enabled').checked;
         const cropOverlay = document.getElementById('crop-overlay');
         const onCropTab = currentTab === 'crop';
@@ -1415,18 +1454,31 @@
         const previewImageWrapper = document.getElementById('preview-image-wrapper');
 
         // Show dual-image layout only when on crop tab and crop enabled
-        if (onCropTab && cropEnabled && sourceImageData) {
-            // Show dual-image cropping interface
-            sourceImageSection.style.display = 'block';
-            croppedPreviewSection.style.display = 'block';
-            previewImageWrapper.style.display = 'none';
-            cropOverlay.style.display = 'block';
-
-            // Update crop box position
-            updateCropBox();
+        if (onCropTab && cropEnabled) {
+            // Ensure source image is loaded
+            if (!sourceImageData && currentCameraId) {
+                await loadSourceImage();
+            }
 
-            // Update cropped preview
-            updateCropPreview();
+            if (sourceImageData) {
+                // Show dual-image cropping interface
+                sourceImageSection.style.display = 'block';
+                croppedPreviewSection.style.display = 'block';
+                previewImageWrapper.style.display = 'none';
+                cropOverlay.style.display = 'block';
+
+                // Update crop box position
+                updateCropBox();
+
+                // Update cropped preview
+                updateCropPreview();
+            } else {
+                // Fallback to regular preview if source image failed to load
+                sourceImageSection.style.display = 'none';
+                croppedPreviewSection.style.display = 'none';
+                previewImageWrapper.style.display = 'block';
+                cropOverlay.style.display = 'none';
+            }
         } else {
             // Show regular preview image
             sourceImageSection.style.display = 'none';
@@ -1459,7 +1511,7 @@
 
         // Re-enable interactive cropping
         updateCropInteractionState();
-        updateCropVisibility();
+        updateCropVisibility(); // Don't await in sync function
 
         // Update dimensions display
         updateDimensionsDisplay();
@@ -1488,6 +1540,28 @@
                 previewDim.style.fontWeight = '600';
             }
         }
+
+        // Update effective source dimensions display
+        updateEffectiveSourceSize();
+    }
+
+    function updateEffectiveSourceSize() {
+        const effectiveSizeEl = document.getElementById('effective-source-dimensions');
+        if (!effectiveSizeEl || !sourceImageDimensions.width) return;
+
+        const formData = getFormData();
+
+        if (formData.crop_enabled) {
+            // Crop enabled - show cropped dimensions
+            const cropWidth = formData.crop_width;
+            const cropHeight = formData.crop_height;
+            effectiveSizeEl.textContent = `${cropWidth} × ${cropHeight}px (cropped from ${sourceImageDimensions.width} × ${sourceImageDimensions.height}px)`;
+            effectiveSizeEl.style.color = '#ff9800';
+        } else {
+            // No crop - show original dimensions
+            effectiveSizeEl.textContent = `${sourceImageDimensions.width} × ${sourceImageDimensions.height}px (original camera resolution)`;
+            effectiveSizeEl.style.color = '#4caf50';
+        }
     }
 
     // ==================== Interactive Crop ====================
@@ -1511,10 +1585,11 @@
 
         // Update crop box when crop inputs change
         ['crop_x', 'crop_y', 'crop_width', 'crop_height'].forEach(id => {
-            document.getElementById(id).addEventListener('input', () => {
+            document.getElementById(id).addEventListener('input', async () => {
                 updateCropBox();
                 updateCropInteractionState();
-                updateCropVisibility();
+                await updateCropVisibility();
+                updateEffectiveSourceSize();
             });
         });
 
diff --git a/custom_components/camera_snapshot_processor/frontend/state-icon-manager.js b/custom_components/camera_snapshot_processor/frontend/state-icon-manager.js
index 3a55b67..a27c195 100644
--- a/custom_components/camera_snapshot_processor/frontend/state-icon-manager.js
+++ b/custom_components/camera_snapshot_processor/frontend/state-icon-manager.js
@@ -611,12 +611,24 @@
                         <input type="hidden" class="rule-icon-color" value="${this.rgbToHex(rule.icon_color)}">
                     </div>
 
+                    <div>
+                        <label>Icon Opacity:</label>
+                        <input type="range" class="rule-icon-opacity" min="0" max="1" step="0.1" value="${rule.icon_opacity !== undefined ? rule.icon_opacity : 1.0}">
+                        <span class="value-display rule-icon-opacity-value">${rule.icon_opacity !== undefined ? rule.icon_opacity : 1.0}</span>
+                    </div>
+
                     <div>
                         <label>Text Color:</label>
                         <div class="pickr-container rule-text-color-picker"></div>
                         <input type="hidden" class="rule-text-color" value="${this.rgbToHex(rule.text_color)}">
                     </div>
 
+                    <div>
+                        <label>Text Opacity:</label>
+                        <input type="range" class="rule-text-opacity" min="0" max="1" step="0.1" value="${rule.text_opacity !== undefined ? rule.text_opacity : 1.0}">
+                        <span class="value-display rule-text-opacity-value">${rule.text_opacity !== undefined ? rule.text_opacity : 1.0}</span>
+                    </div>
+
                     <div>
                         <label>Display Order:</label>
                         <select class="rule-display-order">
@@ -745,6 +757,19 @@
             textColorPickr.on('hide', () => {
                 textColorPickr.applyColor(true);
             });
+
+            // Opacity sliders - update value display
+            const iconOpacitySlider = body.querySelector('.rule-icon-opacity');
+            const iconOpacityValue = body.querySelector('.rule-icon-opacity-value');
+            iconOpacitySlider.addEventListener('input', (e) => {
+                iconOpacityValue.textContent = e.target.value;
+            });
+
+            const textOpacitySlider = body.querySelector('.rule-text-opacity');
+            const textOpacityValue = body.querySelector('.rule-text-opacity-value');
+            textOpacitySlider.addEventListener('input', (e) => {
+                textOpacityValue.textContent = e.target.value;
+            });
         }
 
         async testTemplate(body) {
@@ -861,6 +886,8 @@
             rule.text_template = body.querySelector('.rule-text-template').checked;
             rule.icon_color = this.hexToRgb(body.querySelector('.rule-icon-color').value);
             rule.text_color = this.hexToRgb(body.querySelector('.rule-text-color').value);
+            rule.icon_opacity = parseFloat(body.querySelector('.rule-icon-opacity').value);
+            rule.text_opacity = parseFloat(body.querySelector('.rule-text-opacity').value);
             rule.display_order = body.querySelector('.rule-display-order').value;
             rule.icon_background = body.querySelector('.rule-icon-background').checked;
 
diff --git a/custom_components/camera_snapshot_processor/image_processor.py b/custom_components/camera_snapshot_processor/image_processor.py
index 771af1a..9e44481 100644
--- a/custom_components/camera_snapshot_processor/image_processor.py
+++ b/custom_components/camera_snapshot_processor/image_processor.py
@@ -25,11 +25,14 @@
     CONF_HEIGHT,
     CONF_KEEP_RATIO,
     CONF_OVERLAY_BACKGROUND,
+    CONF_OVERLAY_BACKGROUND_OPACITY,
     CONF_OVERLAY_COLOR,
+    CONF_OVERLAY_COLOR_OPACITY,
     CONF_OVERLAY_FONT_SIZE,
     CONF_QUALITY,
     CONF_RESIZE_ALGORITHM,
     CONF_STATE_ICON_BACKGROUND,
+    CONF_STATE_ICON_BACKGROUND_OPACITY,
     CONF_STATE_ICONS,
     CONF_TEXT_ENABLED,
     CONF_TEXT_FONT_SIZE,
@@ -337,13 +340,17 @@ def _draw_text(
         )
         bg_color = self.config.get(CONF_OVERLAY_BACKGROUND, DEFAULT_OVERLAY_BACKGROUND)
 
+        # Get opacity values (default to 1.0 = fully opaque)
+        color_opacity = float(self.config.get(CONF_OVERLAY_COLOR_OPACITY, 1.0))
+        bg_opacity = float(self.config.get(CONF_OVERLAY_BACKGROUND_OPACITY, 1.0))
+
         # Normalize colors (convert RGB lists to hex strings if needed)
         color = self._normalize_color(color)
         bg_color = self._normalize_color(bg_color)
 
-        # Convert hex colors to RGBA
-        text_color = self._hex_to_rgba(color)
-        background_color = self._hex_to_rgba(bg_color)
+        # Convert hex colors to RGBA and apply opacity
+        text_color = self._hex_to_rgba(color, opacity=color_opacity)
+        background_color = self._hex_to_rgba(bg_color, opacity=bg_opacity)
 
         # Get text bounding box - bbox gives us the actual visual bounds of the text
         # bbox[0], bbox[1] = left, top offset from anchor point (can be negative)
@@ -547,6 +554,8 @@ async def _draw_state_icon(
         text_template = matched_rule.get("text_template", False)
         icon_color = matched_rule.get("icon_color", [255, 255, 255])
         text_color = matched_rule.get("text_color", [255, 255, 255])
+        icon_opacity = float(matched_rule.get("icon_opacity", 1.0))
+        text_opacity = float(matched_rule.get("text_opacity", 1.0))
         icon_background = matched_rule.get("icon_background", False)
 
         _LOGGER.debug(
@@ -635,12 +644,18 @@ async def _draw_state_icon(
             icon_part = {
                 "text": icon,
                 "color": icon_color,
+                "opacity": icon_opacity,
                 "font": icon_font,
                 "icon_background": icon_background,
             }
 
         if text:
-            text_part = {"text": text, "color": text_color, "font": text_font}
+            text_part = {
+                "text": text,
+                "color": text_color,
+                "opacity": text_opacity,
+                "font": text_font,
+            }
 
         # Add icon and text in the specified order
         if display_order == "text_first":
@@ -680,12 +695,15 @@ def _draw_multicolor_text(
             bg_color = self.config.get(
                 CONF_STATE_ICON_BACKGROUND, DEFAULT_STATE_ICON_BACKGROUND
             )
+            bg_opacity = float(self.config.get(CONF_STATE_ICON_BACKGROUND_OPACITY, 1.0))
         else:
             bg_color = self.config.get(
                 CONF_OVERLAY_BACKGROUND, DEFAULT_OVERLAY_BACKGROUND
             )
+            bg_opacity = float(self.config.get(CONF_OVERLAY_BACKGROUND_OPACITY, 1.0))
+
         bg_color = self._normalize_color(bg_color)
-        background_color = self._hex_to_rgba(bg_color)
+        background_color = self._hex_to_rgba(bg_color, opacity=bg_opacity)
 
         # Calculate total dimensions - each part uses its own font
         # We need to track bbox offsets to align the background properly
@@ -798,7 +816,8 @@ def _draw_multicolor_text(
                 continue
 
             color = self._normalize_color(part["color"])
-            rgba_color = self._hex_to_rgba(color)
+            opacity = part.get("opacity", 1.0)  # Default to fully opaque
+            rgba_color = self._hex_to_rgba(color, opacity=opacity)
 
             # Draw icon background if requested
             if part.get("icon_background", False):
@@ -872,8 +891,16 @@ def _normalize_color(color: str | list) -> str:
         return color  # Already a string
 
     @staticmethod
-    def _hex_to_rgba(hex_color: str) -> tuple[int, int, int, int]:
-        """Convert hex color to RGBA tuple."""
+    def _hex_to_rgba(hex_color: str, opacity: float = 1.0) -> tuple[int, int, int, int]:
+        """Convert hex color to RGBA tuple with optional opacity override.
+
+        Args:
+            hex_color: Hex color string (e.g., "#RRGGBB" or "#RRGGBBAA")
+            opacity: Opacity value from 0.0 to 1.0 (multiplied with existing alpha)
+
+        Returns:
+            RGBA tuple (r, g, b, a) where each value is 0-255
+        """
         hex_color = hex_color.lstrip("#")
 
         if len(hex_color) == 8:
@@ -896,4 +923,7 @@ def _hex_to_rgba(hex_color: str) -> tuple[int, int, int, int]:
             # Default to white
             r, g, b, a = 255, 255, 255, 255
 
+        # Apply opacity multiplier to alpha channel
+        a = int(a * opacity)
+
         return (r, g, b, a)

From 457a43352dd2ac8d65f5ab16b5938220ba0a6f52 Mon Sep 17 00:00:00 2001
From: Patras3 <patrykdadas@gmail.com>
Date: Wed, 22 Oct 2025 01:10:52 +0200
Subject: [PATCH 3/4] Remove text/icon opacity controls, keep only background
 opacity
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Changes:
- Remove overlay_color_opacity slider from Overlays tab in panel.html
- Remove icon_opacity and text_opacity sliders from State Icons modal
- Remove text opacity event listeners and form handling from panel.js
- Remove CONF_OVERLAY_COLOR_OPACITY constant from const.py
- Remove text/icon opacity handling from image_processor.py
- Text and icon colors are now always fully opaque (opacity = 1.0)
- Background opacity controls remain fully functional

This simplifies the UI by removing non-functional text opacity controls
while preserving the working background opacity feature for both overlay
backgrounds and state icon backgrounds.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../camera_snapshot_processor/const.py        |  1 -
 .../frontend/panel.html                       |  6 -----
 .../frontend/panel.js                         | 11 --------
 .../frontend/state-icon-manager.js            | 27 -------------------
 .../image_processor.py                        | 15 +++--------
 5 files changed, 4 insertions(+), 56 deletions(-)

diff --git a/custom_components/camera_snapshot_processor/const.py b/custom_components/camera_snapshot_processor/const.py
index 988aeb3..9c6e1ec 100644
--- a/custom_components/camera_snapshot_processor/const.py
+++ b/custom_components/camera_snapshot_processor/const.py
@@ -30,7 +30,6 @@
 CONF_TEXT_FONT_SIZE = "text_font_size"
 CONF_STATE_ICON_FONT_SIZE = "state_icon_font_size"
 CONF_OVERLAY_COLOR = "overlay_color"
-CONF_OVERLAY_COLOR_OPACITY = "overlay_color_opacity"
 CONF_OVERLAY_BACKGROUND = "overlay_background"
 CONF_OVERLAY_BACKGROUND_OPACITY = "overlay_background_opacity"
 CONF_STATE_ICON_BACKGROUND = "state_icon_background"
diff --git a/custom_components/camera_snapshot_processor/frontend/panel.html b/custom_components/camera_snapshot_processor/frontend/panel.html
index 5b29905..5358115 100644
--- a/custom_components/camera_snapshot_processor/frontend/panel.html
+++ b/custom_components/camera_snapshot_processor/frontend/panel.html
@@ -259,12 +259,6 @@ <h4>Overlay Styling</h4>
                                         <input type="hidden" id="overlay_color" value="#ffffff">
                                     </div>
 
-                                    <div class="form-group">
-                                        <label for="overlay_color_opacity">Text Opacity</label>
-                                        <input type="range" id="overlay_color_opacity" min="0" max="1" step="0.1" value="1.0">
-                                        <span class="value-display" id="overlay_color_opacity-value">1.0</span>
-                                    </div>
-
                                     <div class="form-group">
                                         <label for="overlay_background">Background Color</label>
                                         <div style="display: flex; align-items: center; gap: 10px;">
diff --git a/custom_components/camera_snapshot_processor/frontend/panel.js b/custom_components/camera_snapshot_processor/frontend/panel.js
index 6ab43d0..fb2e34c 100644
--- a/custom_components/camera_snapshot_processor/frontend/panel.js
+++ b/custom_components/camera_snapshot_processor/frontend/panel.js
@@ -473,14 +473,6 @@
         });
 
         // Opacity sliders - update value display
-        const overlayColorOpacitySlider = document.getElementById('overlay_color_opacity');
-        const overlayColorOpacityValue = document.getElementById('overlay_color_opacity-value');
-        if (overlayColorOpacitySlider && overlayColorOpacityValue) {
-            overlayColorOpacitySlider.addEventListener('input', (e) => {
-                overlayColorOpacityValue.textContent = e.target.value;
-            });
-        }
-
         const overlayBackgroundOpacitySlider = document.getElementById('overlay_background_opacity');
         const overlayBackgroundOpacityValue = document.getElementById('overlay_background_opacity-value');
         if (overlayBackgroundOpacitySlider && overlayBackgroundOpacityValue) {
@@ -1065,8 +1057,6 @@
                 overlayColorPickr.setColor(hexColor);
             }
         }
-        setInputValue('overlay_color_opacity', config.overlay_color_opacity !== undefined ? config.overlay_color_opacity : 1.0);
-
         const bgColor = config.overlay_background || '#00000000';
         setInputValue('overlay_background', bgColor);
         if (overlayBackgroundPickr) {
@@ -1128,7 +1118,6 @@
             text_position: document.getElementById('text_position').value,
             text_font_size: parseInt(document.getElementById('text_font_size').value),
             overlay_color: hexToRgb(document.getElementById('overlay_color').value),
-            overlay_color_opacity: parseFloat(document.getElementById('overlay_color_opacity').value),
             overlay_background: document.getElementById('overlay_background').value,
             overlay_background_opacity: parseFloat(document.getElementById('overlay_background_opacity').value),
             state_icon_background: document.getElementById('state_icon_background').value,
diff --git a/custom_components/camera_snapshot_processor/frontend/state-icon-manager.js b/custom_components/camera_snapshot_processor/frontend/state-icon-manager.js
index a27c195..3a55b67 100644
--- a/custom_components/camera_snapshot_processor/frontend/state-icon-manager.js
+++ b/custom_components/camera_snapshot_processor/frontend/state-icon-manager.js
@@ -611,24 +611,12 @@
                         <input type="hidden" class="rule-icon-color" value="${this.rgbToHex(rule.icon_color)}">
                     </div>
 
-                    <div>
-                        <label>Icon Opacity:</label>
-                        <input type="range" class="rule-icon-opacity" min="0" max="1" step="0.1" value="${rule.icon_opacity !== undefined ? rule.icon_opacity : 1.0}">
-                        <span class="value-display rule-icon-opacity-value">${rule.icon_opacity !== undefined ? rule.icon_opacity : 1.0}</span>
-                    </div>
-
                     <div>
                         <label>Text Color:</label>
                         <div class="pickr-container rule-text-color-picker"></div>
                         <input type="hidden" class="rule-text-color" value="${this.rgbToHex(rule.text_color)}">
                     </div>
 
-                    <div>
-                        <label>Text Opacity:</label>
-                        <input type="range" class="rule-text-opacity" min="0" max="1" step="0.1" value="${rule.text_opacity !== undefined ? rule.text_opacity : 1.0}">
-                        <span class="value-display rule-text-opacity-value">${rule.text_opacity !== undefined ? rule.text_opacity : 1.0}</span>
-                    </div>
-
                     <div>
                         <label>Display Order:</label>
                         <select class="rule-display-order">
@@ -757,19 +745,6 @@
             textColorPickr.on('hide', () => {
                 textColorPickr.applyColor(true);
             });
-
-            // Opacity sliders - update value display
-            const iconOpacitySlider = body.querySelector('.rule-icon-opacity');
-            const iconOpacityValue = body.querySelector('.rule-icon-opacity-value');
-            iconOpacitySlider.addEventListener('input', (e) => {
-                iconOpacityValue.textContent = e.target.value;
-            });
-
-            const textOpacitySlider = body.querySelector('.rule-text-opacity');
-            const textOpacityValue = body.querySelector('.rule-text-opacity-value');
-            textOpacitySlider.addEventListener('input', (e) => {
-                textOpacityValue.textContent = e.target.value;
-            });
         }
 
         async testTemplate(body) {
@@ -886,8 +861,6 @@
             rule.text_template = body.querySelector('.rule-text-template').checked;
             rule.icon_color = this.hexToRgb(body.querySelector('.rule-icon-color').value);
             rule.text_color = this.hexToRgb(body.querySelector('.rule-text-color').value);
-            rule.icon_opacity = parseFloat(body.querySelector('.rule-icon-opacity').value);
-            rule.text_opacity = parseFloat(body.querySelector('.rule-text-opacity').value);
             rule.display_order = body.querySelector('.rule-display-order').value;
             rule.icon_background = body.querySelector('.rule-icon-background').checked;
 
diff --git a/custom_components/camera_snapshot_processor/image_processor.py b/custom_components/camera_snapshot_processor/image_processor.py
index 9e44481..3295f7e 100644
--- a/custom_components/camera_snapshot_processor/image_processor.py
+++ b/custom_components/camera_snapshot_processor/image_processor.py
@@ -27,7 +27,6 @@
     CONF_OVERLAY_BACKGROUND,
     CONF_OVERLAY_BACKGROUND_OPACITY,
     CONF_OVERLAY_COLOR,
-    CONF_OVERLAY_COLOR_OPACITY,
     CONF_OVERLAY_FONT_SIZE,
     CONF_QUALITY,
     CONF_RESIZE_ALGORITHM,
@@ -340,16 +339,15 @@ def _draw_text(
         )
         bg_color = self.config.get(CONF_OVERLAY_BACKGROUND, DEFAULT_OVERLAY_BACKGROUND)
 
-        # Get opacity values (default to 1.0 = fully opaque)
-        color_opacity = float(self.config.get(CONF_OVERLAY_COLOR_OPACITY, 1.0))
+        # Get opacity value for background (default to 1.0 = fully opaque)
         bg_opacity = float(self.config.get(CONF_OVERLAY_BACKGROUND_OPACITY, 1.0))
 
         # Normalize colors (convert RGB lists to hex strings if needed)
         color = self._normalize_color(color)
         bg_color = self._normalize_color(bg_color)
 
-        # Convert hex colors to RGBA and apply opacity
-        text_color = self._hex_to_rgba(color, opacity=color_opacity)
+        # Convert hex colors to RGBA (text is always fully opaque, background uses opacity)
+        text_color = self._hex_to_rgba(color)
         background_color = self._hex_to_rgba(bg_color, opacity=bg_opacity)
 
         # Get text bounding box - bbox gives us the actual visual bounds of the text
@@ -554,8 +552,6 @@ async def _draw_state_icon(
         text_template = matched_rule.get("text_template", False)
         icon_color = matched_rule.get("icon_color", [255, 255, 255])
         text_color = matched_rule.get("text_color", [255, 255, 255])
-        icon_opacity = float(matched_rule.get("icon_opacity", 1.0))
-        text_opacity = float(matched_rule.get("text_opacity", 1.0))
         icon_background = matched_rule.get("icon_background", False)
 
         _LOGGER.debug(
@@ -644,7 +640,6 @@ async def _draw_state_icon(
             icon_part = {
                 "text": icon,
                 "color": icon_color,
-                "opacity": icon_opacity,
                 "font": icon_font,
                 "icon_background": icon_background,
             }
@@ -653,7 +648,6 @@ async def _draw_state_icon(
             text_part = {
                 "text": text,
                 "color": text_color,
-                "opacity": text_opacity,
                 "font": text_font,
             }
 
@@ -816,8 +810,7 @@ def _draw_multicolor_text(
                 continue
 
             color = self._normalize_color(part["color"])
-            opacity = part.get("opacity", 1.0)  # Default to fully opaque
-            rgba_color = self._hex_to_rgba(color, opacity=opacity)
+            rgba_color = self._hex_to_rgba(color)
 
             # Draw icon background if requested
             if part.get("icon_background", False):

From 9cece763892d4f3cb9a339dafce4ff352aa8bc7f Mon Sep 17 00:00:00 2001
From: Patras3 <patrykdadas@gmail.com>
Date: Wed, 22 Oct 2025 18:50:33 +0200
Subject: [PATCH 4/4] Remove unused 'rect' variable in startDragCrop function
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 custom_components/camera_snapshot_processor/frontend/panel.js | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/custom_components/camera_snapshot_processor/frontend/panel.js b/custom_components/camera_snapshot_processor/frontend/panel.js
index fb2e34c..5f7e7a5 100644
--- a/custom_components/camera_snapshot_processor/frontend/panel.js
+++ b/custom_components/camera_snapshot_processor/frontend/panel.js
@@ -1590,10 +1590,6 @@
         e.preventDefault();
         cropDragging = true;
 
-        // Use source image for crop interaction
-        const sourceImage = document.getElementById('source-image');
-        const rect = sourceImage.getBoundingClientRect();
-
         cropStartX = e.clientX;
         cropStartY = e.clientY;