feat: add overlay, soft light, hard light, difference, exclusion blend modes to composite

Integer-math implementations with pre-allocated scratch buffers.
IconSelect picker updated with 10 blend modes. i18n for en/ru/zh.

server/src/wled_controller/static/js/features/color-strips-composite.ts

@@ -51,11 +51,16 @@ export function compositeDestroyEntitySelects() {
 
 function _getCompositeBlendItems() {
     return [
-        { value: 'normal',   icon: _icon(P.square),   label: t('color_strip.composite.blend_mode.normal'),   desc: t('color_strip.composite.blend_mode.normal.desc') },
-        { value: 'add',      icon: _icon(P.sun),      label: t('color_strip.composite.blend_mode.add'),      desc: t('color_strip.composite.blend_mode.add.desc') },
-        { value: 'multiply', icon: _icon(P.eye),      label: t('color_strip.composite.blend_mode.multiply'), desc: t('color_strip.composite.blend_mode.multiply.desc') },
-        { value: 'screen',   icon: _icon(P.monitor),  label: t('color_strip.composite.blend_mode.screen'),   desc: t('color_strip.composite.blend_mode.screen.desc') },
-        { value: 'override', icon: _icon(P.zap),      label: t('color_strip.composite.blend_mode.override'), desc: t('color_strip.composite.blend_mode.override.desc') },
+        { value: 'normal',     icon: _icon(P.square),      label: t('color_strip.composite.blend_mode.normal'),     desc: t('color_strip.composite.blend_mode.normal.desc') },
+        { value: 'add',        icon: _icon(P.sun),          label: t('color_strip.composite.blend_mode.add'),        desc: t('color_strip.composite.blend_mode.add.desc') },
+        { value: 'multiply',   icon: _icon(P.moon),         label: t('color_strip.composite.blend_mode.multiply'),   desc: t('color_strip.composite.blend_mode.multiply.desc') },
+        { value: 'screen',     icon: _icon(P.monitor),      label: t('color_strip.composite.blend_mode.screen'),     desc: t('color_strip.composite.blend_mode.screen.desc') },
+        { value: 'overlay',    icon: _icon(P.copy),          label: t('color_strip.composite.blend_mode.overlay'),    desc: t('color_strip.composite.blend_mode.overlay.desc') },
+        { value: 'soft_light', icon: _icon(P.sunDim),       label: t('color_strip.composite.blend_mode.soft_light'), desc: t('color_strip.composite.blend_mode.soft_light.desc') },
+        { value: 'hard_light', icon: _icon(P.zap),          label: t('color_strip.composite.blend_mode.hard_light'), desc: t('color_strip.composite.blend_mode.hard_light.desc') },
+        { value: 'difference', icon: _icon(P.activity),     label: t('color_strip.composite.blend_mode.difference'), desc: t('color_strip.composite.blend_mode.difference.desc') },
+        { value: 'exclusion',  icon: _icon(P.circleOff),    label: t('color_strip.composite.blend_mode.exclusion'),  desc: t('color_strip.composite.blend_mode.exclusion.desc') },
+        { value: 'override',   icon: _icon(P.eye),          label: t('color_strip.composite.blend_mode.override'),   desc: t('color_strip.composite.blend_mode.override.desc') },
     ];
 }
 
@@ -127,11 +132,9 @@ export function compositeRenderList() {
                     <div class="composite-layer-row">
                         <select class="composite-layer-source" data-idx="${i}">${srcOptions}</select>
                         <select class="composite-layer-blend" data-idx="${i}">
-                            <option value="normal"${layer.blend_mode === 'normal' ? ' selected' : ''}>${t('color_strip.composite.blend_mode.normal')}</option>
-                            <option value="add"${layer.blend_mode === 'add' ? ' selected' : ''}>${t('color_strip.composite.blend_mode.add')}</option>
-                            <option value="multiply"${layer.blend_mode === 'multiply' ? ' selected' : ''}>${t('color_strip.composite.blend_mode.multiply')}</option>
-                            <option value="screen"${layer.blend_mode === 'screen' ? ' selected' : ''}>${t('color_strip.composite.blend_mode.screen')}</option>
-                            <option value="override"${layer.blend_mode === 'override' ? ' selected' : ''}>${t('color_strip.composite.blend_mode.override')}</option>
+                            ${_getCompositeBlendItems().map(b =>
+                                `<option value="${b.value}"${layer.blend_mode === b.value ? ' selected' : ''}>${b.label}</option>`
+                            ).join('')}
                         </select>
                     </div>
                     <div class="composite-layer-row">

server/src/wled_controller/static/locales/en.json

@@ -1183,6 +1183,16 @@
     "color_strip.composite.blend_mode.screen": "Screen",
     "color_strip.composite.blend_mode.screen.desc": "Brightens, inverse of multiply",
     "color_strip.composite.blend_mode.override": "Override",
+    "color_strip.composite.blend_mode.overlay": "Overlay",
+    "color_strip.composite.blend_mode.overlay.desc": "Multiply darks, screen lights",
+    "color_strip.composite.blend_mode.soft_light": "Soft Light",
+    "color_strip.composite.blend_mode.soft_light.desc": "Gentle contrast adjustment",
+    "color_strip.composite.blend_mode.hard_light": "Hard Light",
+    "color_strip.composite.blend_mode.hard_light.desc": "Strong contrast, vivid colors",
+    "color_strip.composite.blend_mode.difference": "Difference",
+    "color_strip.composite.blend_mode.difference.desc": "Absolute color difference",
+    "color_strip.composite.blend_mode.exclusion": "Exclusion",
+    "color_strip.composite.blend_mode.exclusion.desc": "Like difference, lower contrast",
     "color_strip.composite.blend_mode.override.desc": "Black = transparent, bright = opaque",
     "color_strip.composite.opacity": "Opacity",
     "color_strip.composite.brightness": "Brightness",

server/src/wled_controller/static/locales/ru.json

@@ -1148,6 +1148,16 @@
     "color_strip.composite.blend_mode.screen": "Экран",
     "color_strip.composite.blend_mode.screen.desc": "Осветляет, обратное умножение",
     "color_strip.composite.blend_mode.override": "Замена",
+    "color_strip.composite.blend_mode.overlay": "Наложение",
+    "color_strip.composite.blend_mode.overlay.desc": "Умножение тёмных, осветление светлых",
+    "color_strip.composite.blend_mode.soft_light": "Мягкий свет",
+    "color_strip.composite.blend_mode.soft_light.desc": "Мягкая коррекция контраста",
+    "color_strip.composite.blend_mode.hard_light": "Жёсткий свет",
+    "color_strip.composite.blend_mode.hard_light.desc": "Сильный контраст, яркие цвета",
+    "color_strip.composite.blend_mode.difference": "Разница",
+    "color_strip.composite.blend_mode.difference.desc": "Абсолютная разница цветов",
+    "color_strip.composite.blend_mode.exclusion": "Исключение",
+    "color_strip.composite.blend_mode.exclusion.desc": "Как разница, но мягче",
     "color_strip.composite.blend_mode.override.desc": "Чёрный = прозрачный, яркий = непрозрачный",
     "color_strip.composite.opacity": "Непрозрачность",
     "color_strip.composite.brightness": "Яркость",

server/src/wled_controller/static/locales/zh.json

@@ -1148,6 +1148,16 @@
     "color_strip.composite.blend_mode.screen": "滤色",
     "color_strip.composite.blend_mode.screen.desc": "提亮，正片叠底的反转",
     "color_strip.composite.blend_mode.override": "覆盖",
+    "color_strip.composite.blend_mode.overlay": "叠加",
+    "color_strip.composite.blend_mode.overlay.desc": "暗部相乘，亮部滤色",
+    "color_strip.composite.blend_mode.soft_light": "柔光",
+    "color_strip.composite.blend_mode.soft_light.desc": "柔和对比度调整",
+    "color_strip.composite.blend_mode.hard_light": "强光",
+    "color_strip.composite.blend_mode.hard_light.desc": "强对比度，鲜艳色彩",
+    "color_strip.composite.blend_mode.difference": "差值",
+    "color_strip.composite.blend_mode.difference.desc": "绝对颜色差异",
+    "color_strip.composite.blend_mode.exclusion": "排除",
+    "color_strip.composite.blend_mode.exclusion.desc": "类似差值，对比度更低",
     "color_strip.composite.blend_mode.override.desc": "黑色=透明，亮色=不透明",
     "color_strip.composite.opacity": "不透明度",
     "color_strip.composite.brightness": "亮度",