diff --git a/ioBroker/DEV/NSPanelTs.ts b/ioBroker/DEV/NSPanelTs.ts index 933dab8f..2f30d274 100644 --- a/ioBroker/DEV/NSPanelTs.ts +++ b/ioBroker/DEV/NSPanelTs.ts @@ -1,6 +1,6 @@ /*----------------------------------------------------------------------- -TypeScript v4.5.2.1 zur Steuerung des SONOFF NSPanel mit dem ioBroker by @Armilar / @TT-Tom / @ticaki / @Britzelpuf / @Sternmiere / @ravenS0ne -- abgestimmt auf TFT 54 / v4.5.0 / BerryDriver 9 / Tasmota 14.5.0 +TypeScript v4.6.0.1 zur Steuerung des SONOFF NSPanel mit dem ioBroker by @Armilar / @TT-Tom / @ticaki / @Britzelpuf / @Sternmiere / @ravenS0ne +- abgestimmt auf TFT 55 / v4.6.0 / BerryDriver 9 / Tasmota 14.5.0 @joBr99 Projekt: https://github.com/joBr99/nspanel-lovelace-ui/tree/main/ioBroker NsPanelTs.ts (dieses TypeScript in ioBroker) Stable: https://github.com/joBr99/nspanel-lovelace-ui/blob/main/ioBroker/NsPanelTs.ts icon_mapping.ts: https://github.com/joBr99/nspanel-lovelace-ui/blob/main/ioBroker/icon_mapping.ts (TypeScript muss in global liegen) @@ -148,11 +148,15 @@ ReleaseNotes: - 03.02.2025 - v4.5.0.5 Bugfix InitDimmode by Gargano - 14.03.2025 - v4.5.2 Fix Bugs in HUE-Light, Fix Icon-Colors with interpolateColors (Color, ColorTemp, Brightness), Fix ON instead of ON_ACTUAL for writing DP - 15.03.2025 - v4.5.2.1 Add Functions to Calculate Colors of Icons (Darken and CT (Kelvin)) - - 15.03.2025 - v4.5.2.1 Remove New Sliders (popupLightNew), Fix TFT-Pictures in TFT --> with v4.5.3 + - 15.03.2025 - v4.5.2.1 Remove New Sliders (popupLightNew), Fix TFT-Pictures in TFT --> with v4.6.0 + - 16.03.2025 - v4.6.0 Fix Bugs in Channels Light and RGBsingle-Light, Fix Icon-Colors with interpolateColors (Color, ColorTemp, Brightness), Fix ON instead of ON_ACTUAL for writing DP + - 16.03.2025 - v4.6.0.1 Add Functions to Calculate Colors of RGBsingle Icons (Darken and CT (Kelvin/Mired)) + - 16.03.2025 - v4.6.0.1 Fix Light-Icons if Color-Temperature uses Mired instead of Kelvin (500 Mired - 153 Mired = 2000 K - 6536 K) + - 16.03.2025 - v4.6.0.1 Add icon2 to Lights + - 17.03.2025 - v4.6.0.1 Add Functions to Calculate Colors of RGB and CT Icons (Darken and CT (Kelvin/Mired)) + - 17.03.2025 - v4.6.0.1 Add function cie_to_rgb, Add CIE Channel to Lights Todo: - - Fix other Light Types - - Scale CT if Adapter has wrong CT Parameters (e.g. Zigbee.0, etc.) - XX.12.2024 - v5.0.0 ioBroker Adapter *************************************************************************************************************** @@ -248,10 +252,10 @@ Install/Upgrades in Konsole: Tasmota BerryDriver Install: Backlog UrlFetch https://raw.githubusercontent.com/joBr99/nspanel-lovelace-ui/main/tasmota/autoexec.be; Restart 1 Tasmota BerryDriver Update: Backlog UpdateDriverVersion https://raw.githubusercontent.com/joBr99/nspanel-lovelace-ui/main/tasmota/autoexec.be; Restart 1 - TFT EU STABLE Version: FlashNextion http://nspanel.de/nspanel-v4.5.2.tft + TFT EU STABLE Version: FlashNextion http://nspanel.de/nspanel-v4.6.0.tft - TFT US-L STABLE Version: FlashNextion http://nspanel.de/nspanel-us-l-v4.5.2.tft - TFT US-P STABLE Version: FlashNextion http://nspanel.de/nspanel-us-p-v4.5.2.tft + TFT US-L STABLE Version: FlashNextion http://nspanel.de/nspanel-us-l-v4.5.0.tft + TFT US-P STABLE Version: FlashNextion http://nspanel.de/nspanel-us-p-v4.5.0.tft --------------------------------------------------------------------------------------- */ @@ -1035,9 +1039,9 @@ export const config: Config = { // _________________________________ DE: Ab hier keine Konfiguration mehr _____________________________________ // _________________________________ EN: No more configuration from here _____________________________________ -const scriptVersion: string = 'v4.5.2.1'; -const tft_version: string = 'v4.5.0'; -const desired_display_firmware_version = 54; +const scriptVersion: string = 'v4.6.0.1'; +const tft_version: string = 'v4.6.0'; +const desired_display_firmware_version = 55; const berry_driver_version = 9; const tasmotaOtaUrl: string = 'http://ota.tasmota.com/tasmota32/release/'; @@ -1348,8 +1352,8 @@ CheckMQTTPorts(); * @since 4.4.0 */ async function Init_Release () { - const FWVersion = [0, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 52, 53, 54, 55, 56]; - const FWRelease = ['0', '3.3.1', '3.4.0', '3.5.0', '3.5.X', '3.6.0', '3.7.3', '3.8.0', '3.8.3', '3.9.4', '4.0.5', '4.1.4', '4.2.1', '4.4.0', '4.5.0', '4.6.0', '4.6.1']; + const FWVersion = [ 0, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 52, 53, 54, 55, 56]; + const FWRelease = ['0', '3.3.1', '3.4.0', '3.5.0', '3.5.X', '3.6.0', '3.7.3', '3.8.0', '3.8.3', '3.9.4', '4.0.5', '4.1.4', '4.2.1', '4.4.0', '4.5.0', '4.6.0', '4.7.0']; try { if (existsObject(NSPanel_Path + 'Display_Firmware.desiredVersion') == false) { await createStateAsync(NSPanel_Path + 'Display_Firmware.desiredVersion', desired_display_firmware_version, {type: 'number', write: false}); @@ -5292,7 +5296,7 @@ function CreateEntity (pageItem: PageItem, placeId: number, useColors: boolean = case 'light': type = 'light'; iconId = pageItem.icon !== undefined ? Icons.GetIcon(pageItem.icon) : role == 'socket' ? Icons.GetIcon('power-socket-de') : Icons.GetIcon('lightbulb'); - iconId2 = pageItem.icon2 !== undefined ? Icons.GetIcon(pageItem.icon2) : role == 'socket' ? Icons.GetIcon('power-socket-de') : Icons.GetIcon('lightbulb'); + iconId2 = pageItem.icon2 !== undefined ? Icons.GetIcon(pageItem.icon2) : role == 'socket' ? Icons.GetIcon('power-socket-de') : Icons.GetIcon('lightbulb-outline'); optVal = '0'; if (val === true || val === 'true') { @@ -5300,10 +5304,8 @@ function CreateEntity (pageItem: PageItem, placeId: number, useColors: boolean = iconColor = GetIconColor(pageItem, true, useColors); } else { iconColor = GetIconColor(pageItem, false, useColors); - if (pageItem.icon !== undefined) { - if (pageItem.icon2 !== undefined) { - iconId = iconId2; - } + if (pageItem.icon2 !== undefined) { + iconId = iconId2; } } @@ -5325,16 +5327,6 @@ function CreateEntity (pageItem: PageItem, placeId: number, useColors: boolean = iconId = iconId2; } } - - if (pageItem.interpolateColor != undefined && pageItem.interpolateColor == true /* && val */ ) { - if (existsState(pageItem.id + '.HUE')) { - if (getState(pageItem.id + '.HUE').val != null) { - let huecolor = hsv2rgb(getState(pageItem.id + '.HUE').val, 1, 1); - let rgb: RGB = {red: Math.round(huecolor[0]), green: Math.round(huecolor[1]), blue: Math.round(huecolor[2])}; - iconColor = rgb_dec565(pageItem.interpolateColor !== undefined ? rgb : config.defaultOnColor); - } - } - } //Calculate color for icon based on color, color temperature and brightness //Check last Change of DP HUE or CT for Icon in GUI @@ -5359,6 +5351,7 @@ function CreateEntity (pageItem: PageItem, placeId: number, useColors: boolean = case 'ct': type = 'light'; iconId = pageItem.icon !== undefined ? Icons.GetIcon(pageItem.icon) : Icons.GetIcon('lightbulb'); + iconId2 = pageItem.icon2 !== undefined ? Icons.GetIcon(pageItem.icon2) : Icons.GetIcon('lightbulb-outline'); optVal = '0'; if (val === true || val === 'true') { @@ -5366,10 +5359,22 @@ function CreateEntity (pageItem: PageItem, placeId: number, useColors: boolean = iconColor = GetIconColor(pageItem, existsState(pageItem.id + '.DIMMER') ? getState(pageItem.id + '.DIMMER').val : 100, useColors); } else { iconColor = GetIconColor(pageItem, false, useColors); - if (pageItem.icon !== undefined) { - if (pageItem.icon2 !== undefined) { - iconId = iconId2; - } + if (pageItem.icon2 !== undefined) { + iconId = iconId2; + } + } + + //Calculate color for icon based on color temperature and brightness + if (existsState(pageItem.id + '.TEMPERATURE') && existsState(pageItem.id + '.DIMMER') && pageItem.interpolateColor) { + let brightness = getState(pageItem.id + '.DIMMER').val; + if (getState(pageItem.id + '.TEMPERATURE').val > 1000) { + //Color-Temperatur in Kelvin + let rgb: RGB = kelvinToRGB(getState(pageItem.id + '.TEMPERATURE').val); + iconColor = rgb_dec565(lightenDarkenColor(ConvertRGBtoHex(rgb.red, rgb.green, rgb.blue), (100 - brightness) * -1)); + } else { + //Color-Temperatur in mired + let rgb: RGB = kelvinToRGB(1000000 / (getState(pageItem.id + '.TEMPERATURE').val)); + iconColor = rgb_dec565(lightenDarkenColor(ConvertRGBtoHex(rgb.red, rgb.green, rgb.blue), (100 - brightness) * -1)); } } @@ -5379,6 +5384,7 @@ function CreateEntity (pageItem: PageItem, placeId: number, useColors: boolean = case 'rgb': type = 'light'; iconId = pageItem.icon !== undefined ? Icons.GetIcon(pageItem.icon) : Icons.GetIcon('lightbulb'); + iconId2 = pageItem.icon2 !== undefined ? Icons.GetIcon(pageItem.icon2) : Icons.GetIcon('lightbulb-outline'); optVal = '0'; if (val === true || val === 'true') { @@ -5386,20 +5392,36 @@ function CreateEntity (pageItem: PageItem, placeId: number, useColors: boolean = iconColor = GetIconColor(pageItem, existsState(pageItem.id + '.DIMMER') ? getState(pageItem.id + '.DIMMER').val : 100, useColors); } else { iconColor = GetIconColor(pageItem, false, useColors); - if (pageItem.icon !== undefined) { - if (pageItem.icon2 !== undefined) { - iconId = iconId2; - } + if (pageItem.icon2 !== undefined) { + iconId = iconId2; } } - if (existsState(pageItem.id + '.RED') && existsState(pageItem.id + '.GREEN') && existsState(pageItem.id + '.BLUE') && val) { - if (getState(pageItem.id + '.RED').val != null && getState(pageItem.id + '.GREEN').val != null && getState(pageItem.id + '.BLUE').val != null) { - let rgbRed = getState(pageItem.id + '.RED').val; - let rgbGreen = getState(pageItem.id + '.GREEN').val; - let rgbBlue = getState(pageItem.id + '.BLUE').val; - let rgb: RGB = {red: Math.round(rgbRed), green: Math.round(rgbGreen), blue: Math.round(rgbBlue)}; - iconColor = rgb_dec565(pageItem.interpolateColor !== undefined ? rgb : config.defaultOnColor); + //Calculate color for icon based on color, color temperature and brightness + //Check last Change of DP RGB or CT for Icon in GUI + if (existsState(pageItem.id + '.RED') && existsState(pageItem.id + '.GREEN') && existsState(pageItem.id + '.BLUE') && existsState(pageItem.id + '.TEMPERATURE') && existsState(pageItem.id + '.DIMMER') && pageItem.interpolateColor) { + let brightness = getState(pageItem.id + '.DIMMER').val; + if (getState(pageItem.id + '.TEMPERATURE').ts < getState(pageItem.id + '.RED').ts) { + if (Debug) log('RED wurde zuletzt geändert - Lampe ist Color-Mode'); + if (getState(pageItem.id + '.RED').val != null) { + let rgbRed = getState(pageItem.id + '.RED').val; + let rgbGreen = getState(pageItem.id + '.GREEN').val; + let rgbBlue = getState(pageItem.id + '.BLUE').val; + let rgb: RGB = {red: Math.round(rgbRed), green: Math.round(rgbGreen), blue: Math.round(rgbBlue)}; + let cRGB: RGB = lightenDarkenColor(ConvertRGBtoHex(rgb.red, rgb.green, rgb.blue), (100 - brightness) * -1); + iconColor = rgb_dec565(pageItem.interpolateColor !== undefined ? cRGB : config.defaultOnColor); + } + } else { + if (Debug) log('TEMPERATURE wurde zuletzt geändert - Lampe ist CT-Mode'); + if (getState(pageItem.id + '.TEMPERATURE').val > 1000) { + //Color-Temperatur in Kelvin + let rgb: RGB = kelvinToRGB(getState(pageItem.id + '.TEMPERATURE').val); + iconColor = rgb_dec565(lightenDarkenColor(ConvertRGBtoHex(rgb.red, rgb.green, rgb.blue), (100 - brightness) * -1)); + } else { + //Color-Temperatur in mired + let rgb: RGB = kelvinToRGB(1000000 / (getState(pageItem.id + '.TEMPERATURE').val)); + iconColor = rgb_dec565(lightenDarkenColor(ConvertRGBtoHex(rgb.red, rgb.green, rgb.blue), (100 - brightness) * -1)); + } } } @@ -5407,9 +5429,9 @@ function CreateEntity (pageItem: PageItem, placeId: number, useColors: boolean = return '~' + type + '~' + placeId + '~' + iconId + '~' + iconColor + '~' + name + '~' + optVal; case 'cie': - case 'rgbSingle': type = 'light'; iconId = pageItem.icon !== undefined ? Icons.GetIcon(pageItem.icon) : Icons.GetIcon('lightbulb'); + iconId2 = pageItem.icon2 !== undefined ? Icons.GetIcon(pageItem.icon2) : Icons.GetIcon('lightbulb-outline'); optVal = '0'; if (val === true || val === 'true') { @@ -5417,30 +5439,93 @@ function CreateEntity (pageItem: PageItem, placeId: number, useColors: boolean = iconColor = GetIconColor(pageItem, existsState(pageItem.id + '.DIMMER') ? getState(pageItem.id + '.DIMMER').val : 100, useColors); } else { iconColor = GetIconColor(pageItem, false, useColors); - if (pageItem.icon !== undefined) { - if (pageItem.icon2 !== undefined) { - iconId = iconId2; + if (pageItem.icon2 !== undefined) { + iconId = iconId2; + } + } + + //Calculate color for icon based on color, color temperature and brightness + //Check last Change of DP CIE or CT for Icon in GUI + if (existsState(pageItem.id + '.CIE') && existsState(pageItem.id + '.TEMPERATURE') && existsState(pageItem.id + '.DIMMER') && pageItem.interpolateColor) { + let brightness = getState(pageItem.id + '.DIMMER').val; + if (getState(pageItem.id + '.TEMPERATURE').ts < getState(pageItem.id + '.CIE').ts) { + if (Debug) log('CIE wurde zuletzt geändert - Lampe ist Color-Mode'); + if (getState(pageItem.id + '.CIE').val != null) { + let cie: string = getState(pageItem.id + '.CIE').val; + let cieArray = (cie.substring(1, cie.length -1)).split(','); + let rgb: RGB = cie_to_rgb(parseFloat(cieArray[0]), parseFloat(cieArray[1]), 254); + let cRGB: RGB = lightenDarkenColor(ConvertRGBtoHex(rgb.red, rgb.green, rgb.blue), (100 - brightness) * -1); + iconColor = rgb_dec565(pageItem.interpolateColor !== undefined ? cRGB : config.defaultOnColor); + } + } else { + if (Debug) log('TEMPERATURE wurde zuletzt geändert - Lampe ist CT-Mode'); + if (getState(pageItem.id + '.TEMPERATURE').val > 1000) { + //Color-Temperatur in Kelvin + let rgb: RGB = kelvinToRGB(getState(pageItem.id + '.TEMPERATURE').val); + iconColor = rgb_dec565(lightenDarkenColor(ConvertRGBtoHex(rgb.red, rgb.green, rgb.blue), (100 - brightness) * -1)); + } else { + //Color-Temperatur in mired + let rgb: RGB = kelvinToRGB(1000000 / (getState(pageItem.id + '.TEMPERATURE').val)); + iconColor = rgb_dec565(lightenDarkenColor(ConvertRGBtoHex(rgb.red, rgb.green, rgb.blue), (100 - brightness) * -1)); } } } - if (existsState(pageItem.id + '.RGB') && val) { - if (getState(pageItem.id + '.RGB').val != null) { - let hex = getState(pageItem.id + '.RGB').val; - let hexRed = parseInt(hex[1] + hex[2], 16); - let hexGreen = parseInt(hex[3] + hex[4], 16); - let hexBlue = parseInt(hex[5] + hex[6], 16); - let rgb: RGB = {red: Math.round(hexRed), green: Math.round(hexGreen), blue: Math.round(hexBlue)}; - iconColor = rgb_dec565(pageItem.interpolateColor !== undefined ? rgb : config.defaultOnColor); + if (Debug) log('CreateEntity Icon role cie ~' + type + '~' + placeId + '~' + iconId + '~' + iconColor + '~' + name + '~' + optVal, 'info'); + return '~' + type + '~' + placeId + '~' + iconId + '~' + iconColor + '~' + name + '~' + optVal; + + case 'rgbSingle': + type = 'light'; + iconId = pageItem.icon !== undefined ? Icons.GetIcon(pageItem.icon) : Icons.GetIcon('lightbulb'); + iconId2 = pageItem.icon2 !== undefined ? Icons.GetIcon(pageItem.icon2) : Icons.GetIcon('lightbulb-outline'); + optVal = '0'; + + if (val === true || val === 'true') { + optVal = '1'; + iconColor = GetIconColor(pageItem, existsState(pageItem.id + '.DIMMER') ? getState(pageItem.id + '.DIMMER').val : 100, useColors); + } else { + iconColor = GetIconColor(pageItem, false, useColors); + if (pageItem.icon2 !== undefined) { + iconId = iconId2; } } - if (Debug) log('CreateEntity Icon role cie/rgbSingle ~' + type + '~' + placeId + '~' + iconId + '~' + iconColor + '~' + name + '~' + optVal, 'info'); + //Calculate color for icon based on color, color temperature and brightness + //Check last Change of DP RGB or CT for Icon in GUI + if (existsState(pageItem.id + '.RGB') && existsState(pageItem.id + '.TEMPERATURE') && existsState(pageItem.id + '.DIMMER') && pageItem.interpolateColor) { + let brightness = getState(pageItem.id + '.DIMMER').val; + if (getState(pageItem.id + '.TEMPERATURE').ts < getState(pageItem.id + '.RGB').ts) { + if (Debug) log('RGB wurde zuletzt geändert - Lampe ist Color-Mode'); + if (getState(pageItem.id + '.RGB').val != null) { + let hex = getState(pageItem.id + '.RGB').val; + let hexRed = parseInt(hex[1] + hex[2], 16); + let hexGreen = parseInt(hex[3] + hex[4], 16); + let hexBlue = parseInt(hex[5] + hex[6], 16); + let rgb: RGB = {red: Math.round(hexRed), green: Math.round(hexGreen), blue: Math.round(hexBlue)}; + let cRGB: RGB = lightenDarkenColor(ConvertRGBtoHex(rgb.red, rgb.green, rgb.blue), (100 - brightness) * -1); + iconColor = rgb_dec565(pageItem.interpolateColor !== undefined ? cRGB : config.defaultOnColor); + } + } else { + if (Debug) log('TEMPERATURE wurde zuletzt geändert - Lampe ist CT-Mode'); + if (getState(pageItem.id + '.TEMPERATURE').val > 1000) { + //Color-Temperatur in Kelvin + let rgb: RGB = kelvinToRGB(getState(pageItem.id + '.TEMPERATURE').val); + iconColor = rgb_dec565(lightenDarkenColor(ConvertRGBtoHex(rgb.red, rgb.green, rgb.blue), (100 - brightness) * -1)); + } else { + //Color-Temperatur in mired + let rgb: RGB = kelvinToRGB(1000000 / (getState(pageItem.id + '.TEMPERATURE').val)); + iconColor = rgb_dec565(lightenDarkenColor(ConvertRGBtoHex(rgb.red, rgb.green, rgb.blue), (100 - brightness) * -1)); + } + } + } + + if (Debug) log('CreateEntity Icon role rgbSingle ~' + type + '~' + placeId + '~' + iconId + '~' + iconColor + '~' + name + '~' + optVal, 'info'); return '~' + type + '~' + placeId + '~' + iconId + '~' + iconColor + '~' + name + '~' + optVal; case 'dimmer': type = 'light'; iconId = pageItem.icon !== undefined ? Icons.GetIcon(pageItem.icon) : Icons.GetIcon('lightbulb'); + iconId2 = pageItem.icon2 !== undefined ? Icons.GetIcon(pageItem.icon2) : Icons.GetIcon('lightbulb-outline'); optVal = '0'; if (val === true || val === 'true') { @@ -5448,10 +5533,8 @@ function CreateEntity (pageItem: PageItem, placeId: number, useColors: boolean = iconColor = GetIconColor(pageItem, existsState(pageItem.id + '.ACTUAL') ? getState(pageItem.id + '.ACTUAL').val : 100, useColors); } else { iconColor = GetIconColor(pageItem, false, useColors); - if (pageItem.icon !== undefined) { - if (pageItem.icon2 !== undefined) { - iconId = iconId2; - } + if (pageItem.icon2 !== undefined) { + iconId = iconId2; } } @@ -8662,6 +8745,7 @@ function HandleButtonEvent (words: any): void { break; case 'rgb': case 'rgbSingle': + case 'cie': case 'hue': setIfExists(id + '.ON', action); break; @@ -8717,6 +8801,7 @@ function HandleButtonEvent (words: any): void { break; case 'rgb': case 'rgbSingle': + case 'cie': case 'hue': toggleState(id + '.ON'); break; @@ -8904,6 +8989,7 @@ function HandleButtonEvent (words: any): void { case 'rgb': case 'ct': case 'rgbSingle': + case 'cie': case 'hue': if (pageItem.minValueBrightness != undefined && pageItem.maxValueBrightness != undefined) { let sliderPos = Math.trunc(scale(parseInt(words[4]), 0, 100, pageItem.minValueBrightness, pageItem.maxValueBrightness)); @@ -8952,6 +9038,8 @@ function HandleButtonEvent (words: any): void { setIfExists(id + '.GREEN', rgb.green); setIfExists(id + '.BLUE', rgb.blue); break; + case 'cie': + setIfExists(id + '.CIE', rgb_to_cie(rgb.red, rgb.green, rgb.blue)); case 'rgbSingle': let pageItem = findPageItem(id); if (pageItem.colormode == 'xy') { @@ -9758,11 +9846,12 @@ function GenerateDetailPage (type: NSPanel.PopupType, optional: NSPanel.mediaOpt icon = pageItem.icon !== undefined ? Icons.GetIcon(pageItem.icon) : role == 'socket' ? Icons.GetIcon('power-socket-de') : Icons.GetIcon('lightbulb'); - if (val) { + if (val === true) { + iconColor = GetIconColor(pageItem, 100, true); switchVal = '1'; - iconColor = GetIconColor(pageItem, true, true); } else { iconColor = GetIconColor(pageItem, false, true); + icon = icon2; } let effect_supported = 'disable'; @@ -9811,11 +9900,6 @@ function GenerateDetailPage (type: NSPanel.PopupType, optional: NSPanel.mediaOpt RegisterDetailEntityWatcher(id + '.ON_SET', pageItem, type, placeId); } - if (val === true) { - iconColor = GetIconColor(pageItem, val, false); - switchVal = '1'; - } - if (existsState(id + '.ACTUAL')) { if (pageItem.minValueBrightness != undefined && pageItem.maxValueBrightness != undefined) { brightness = Math.trunc(scale(getState(id + '.ACTUAL').val, pageItem.minValueBrightness, pageItem.maxValueBrightness, 100, 0)); @@ -9831,6 +9915,7 @@ function GenerateDetailPage (type: NSPanel.PopupType, optional: NSPanel.mediaOpt switchVal = '1'; } else { iconColor = GetIconColor(pageItem, false, true); + icon = icon2; } RegisterDetailEntityWatcher(id + '.ACTUAL', pageItem, type, placeId); @@ -9910,8 +9995,15 @@ function GenerateDetailPage (type: NSPanel.PopupType, optional: NSPanel.mediaOpt iconColor = rgb_dec565(pageItem.interpolateColor !== undefined ? cRGB : config.defaultOnColor); } else { if (Debug) log('TEMPERATURE wurde zuletzt geändert - Lampe ist CT-Mode'); - let rgb: RGB = kelvinToRGB(getState(id + '.TEMPERATURE').val); - iconColor = rgb_dec565(lightenDarkenColor(ConvertRGBtoHex(rgb.red, rgb.green, rgb.blue), (100 - brightness) * -1)) + if (getState(id + '.TEMPERATURE').val > 1000) { + //Color-Temperatur in Kelvin + let rgb: RGB = kelvinToRGB(getState(id + '.TEMPERATURE').val); + iconColor = rgb_dec565(lightenDarkenColor(ConvertRGBtoHex(rgb.red, rgb.green, rgb.blue), (100 - brightness) * -1)); + } else { + //Color-Temperatur in Mired + let rgb: RGB = kelvinToRGB(1000000 / (getState(id + '.TEMPERATURE').val)); + iconColor = rgb_dec565(lightenDarkenColor(ConvertRGBtoHex(rgb.red, rgb.green, rgb.blue), (100 - brightness) * -1)); + } } } @@ -9995,6 +10087,7 @@ function GenerateDetailPage (type: NSPanel.PopupType, optional: NSPanel.mediaOpt switchVal = '1'; } else { iconColor = GetIconColor(pageItem, false, true); + icon = icon2; } let colorMode = 'disable'; @@ -10005,12 +10098,37 @@ function GenerateDetailPage (type: NSPanel.PopupType, optional: NSPanel.mediaOpt iconColor = rgb_dec565(pageItem.interpolateColor !== undefined ? rgb : config.defaultOnColor); } } + + //Calculate color for icon based on color, color temperature and brightness + //Check last Change of DP RGB or CT for Icon in GUI + if (existsState(id + '.RED') && existsState(id + '.TEMPERATURE') && pageItem.interpolateColor) { + RegisterDetailEntityWatcher(id + '.RED', pageItem, type, placeId); + RegisterDetailEntityWatcher(id + '.TEMPERATURE', pageItem, type, placeId); + if (getState(id + '.TEMPERATURE').ts < getState(id + '.RED').ts) { + if (Debug) log('RGB wurde zuletzt geändert - Lampe ist Color-Mode') + let rgb: RGB = {red: Math.round(getState(id + '.RED').val), green: Math.round(getState(id + '.GREEN').val), blue: Math.round(getState(id + '.BLUE').val)}; + let cRGB: RGB = lightenDarkenColor(ConvertRGBtoHex(rgb.red, rgb.green, rgb.blue), (100 - brightness) * -1) + iconColor = rgb_dec565(pageItem.interpolateColor !== undefined ? cRGB : config.defaultOnColor); + } else { + if (Debug) log('TEMPERATURE wurde zuletzt geändert - Lampe ist CT-Mode'); + if (getState(id + '.TEMPERATURE').val > 1000) { + //Color-Temperatur in Kelvin + let rgb: RGB = kelvinToRGB(getState(id + '.TEMPERATURE').val); + iconColor = rgb_dec565(lightenDarkenColor(ConvertRGBtoHex(rgb.red, rgb.green, rgb.blue), (100 - brightness) * -1)); + } else { + //Color-Temperatur in Mired + let rgb: RGB = kelvinToRGB(1000000 / (getState(id + '.TEMPERATURE').val)); + iconColor = rgb_dec565(lightenDarkenColor(ConvertRGBtoHex(rgb.red, rgb.green, rgb.blue), (100 - brightness) * -1)); + } + } + } + let colorTemp: any; if (existsState(id + '.TEMPERATURE')) { colorTemp = 0; if (getState(id + '.TEMPERATURE').val != null) { if (pageItem.minValueColorTemp !== undefined && pageItem.maxValueColorTemp !== undefined) { - colorTemp = Math.trunc(scale(getState(id + '.TEMPERATURE').val, pageItem.minValueColorTemp, pageItem.maxValueColorTemp!, 100, 0)); + colorTemp = Math.trunc(scale(getState(id + '.TEMPERATURE').val, pageItem.maxValueColorTemp, pageItem.minValueColorTemp!, 100, 0)); } else { colorTemp = getState(id + '.TEMPERATURE').val; } @@ -10078,6 +10196,7 @@ function GenerateDetailPage (type: NSPanel.PopupType, optional: NSPanel.mediaOpt switchVal = '1'; } else { iconColor = GetIconColor(pageItem, false, true); + icon = icon2; } let colorMode = 'disable'; @@ -10093,12 +10212,40 @@ function GenerateDetailPage (type: NSPanel.PopupType, optional: NSPanel.mediaOpt } } + //Calculate color for icon based on color, color temperature and brightness + //Check last Change of DP RGB or CT for Icon in GUI + if (existsState(id + '.RGB') && existsState(id + '.TEMPERATURE') && pageItem.interpolateColor) { + RegisterDetailEntityWatcher(id + '.RGB', pageItem, type, placeId); + RegisterDetailEntityWatcher(id + '.TEMPERATURE', pageItem, type, placeId); + if (getState(id + '.TEMPERATURE').ts < getState(id + '.RGB').ts) { + if (Debug) log('RGB wurde zuletzt geändert - Lampe ist Color-Mode') + let hex = getState(id + '.RGB').val; + let hexRed = parseInt(hex[1] + hex[2], 16); + let hexGreen = parseInt(hex[3] + hex[4], 16); + let hexBlue = parseInt(hex[5] + hex[6], 16); + let rgb: RGB = {red: Math.round(hexRed), green: Math.round(hexGreen), blue: Math.round(hexBlue)}; + let cRGB: RGB = lightenDarkenColor(ConvertRGBtoHex(rgb.red, rgb.green, rgb.blue), (100 - brightness) * -1) + iconColor = rgb_dec565(pageItem.interpolateColor !== undefined ? cRGB : config.defaultOnColor); + } else { + if (Debug) log('TEMPERATURE wurde zuletzt geändert - Lampe ist CT-Mode'); + if (getState(id + '.TEMPERATURE').val > 1000) { + //Color-Temperatur in Kelvin + let rgb: RGB = kelvinToRGB(getState(id + '.TEMPERATURE').val); + iconColor = rgb_dec565(lightenDarkenColor(ConvertRGBtoHex(rgb.red, rgb.green, rgb.blue), (100 - brightness) * -1)); + } else { + //Color-Temperatur in Mired + let rgb: RGB = kelvinToRGB(1000000 / (getState(id + '.TEMPERATURE').val)); + iconColor = rgb_dec565(lightenDarkenColor(ConvertRGBtoHex(rgb.red, rgb.green, rgb.blue), (100 - brightness) * -1)); + } + } + } + let colorTemp: any; if (existsState(id + '.TEMPERATURE')) { colorTemp = 0; if (getState(id + '.TEMPERATURE').val != null) { if (pageItem.minValueColorTemp !== undefined && pageItem.maxValueColorTemp !== undefined) { - colorTemp = Math.trunc(scale(getState(id + '.TEMPERATURE').val, pageItem.minValueColorTemp, pageItem.maxValueColorTemp, 100, 0)); + colorTemp = Math.trunc(scale(getState(id + '.TEMPERATURE').val, pageItem.maxValueColorTemp, pageItem.minValueColorTemp, 100, 0)); } else { colorTemp = getState(id + '.TEMPERATURE').val; } @@ -10142,6 +10289,120 @@ function GenerateDetailPage (type: NSPanel.PopupType, optional: NSPanel.mediaOpt }); } break; + + //CIE (XY) + case 'cie': + { + if (existsState(id + '.ON')) { + val = getState(id + '.ON').val; + RegisterDetailEntityWatcher(id + '.ON', pageItem, type, placeId); + } + + if (existsState(id + '.DIMMER')) { + if (pageItem.minValueBrightness != undefined && pageItem.maxValueBrightness != undefined) { + brightness = Math.trunc(scale(getState(id + '.DIMMER').val, pageItem.minValueBrightness, pageItem.maxValueBrightness, 100, 0)); + } else { + brightness = getState(id + '.DIMMER').val; + } + RegisterDetailEntityWatcher(id + '.DIMMER', pageItem, type, placeId); + } else { + log('function GenerateDetailPage role:ct -> Alias-Datenpunkt: ' + id + '.DIMMER could not be read', 'warn'); + } + + if (val === true) { + iconColor = GetIconColor(pageItem, brightness, true); + switchVal = '1'; + } else { + iconColor = GetIconColor(pageItem, false, true); + icon = icon2; + } + + let colorMode = 'disable'; + if (existsState(id + '.CIE')) { + if (getState(id + '.CIE').val != null) { + colorMode = 'enable'; + let cie: string = getState(id + '.CIE').val; + let cieArray = (cie.substring(1, cie.length -1)).split(','); + let rgb: RGB = cie_to_rgb(parseFloat(cieArray[0]), parseFloat(cieArray[1]), 254); + iconColor = rgb_dec565(pageItem.interpolateColor !== undefined ? rgb : config.defaultOnColor); + log(iconColor) + } + } + + //Calculate color for icon based on color, color temperature and brightness + //Check last Change of DP CIE or CT for Icon in GUI + if (existsState(id + '.CIE') && existsState(id + '.TEMPERATURE') && pageItem.interpolateColor) { + RegisterDetailEntityWatcher(id + '.CIE', pageItem, type, placeId); + RegisterDetailEntityWatcher(id + '.TEMPERATURE', pageItem, type, placeId); + if (getState(id + '.TEMPERATURE').ts < getState(id + '.CIE').ts) { + if (Debug) log('CIE wurde zuletzt geändert - Lampe ist Color-Mode') + let cie: string = getState(id + '.CIE').val; + let cieArray = (cie.substring(1, cie.length -1)).split(','); + let rgb: RGB = cie_to_rgb(parseFloat(cieArray[0]), parseFloat(cieArray[1]), 254); + let cRGB: RGB = lightenDarkenColor(ConvertRGBtoHex(rgb.red, rgb.green, rgb.blue), (100 - brightness) * -1) + iconColor = rgb_dec565(pageItem.interpolateColor !== undefined ? cRGB : config.defaultOnColor); + } else { + if (Debug) log('TEMPERATURE wurde zuletzt geändert - Lampe ist CT-Mode'); + if (getState(id + '.TEMPERATURE').val > 1000) { + //Color-Temperatur in Kelvin + let rgb: RGB = kelvinToRGB(getState(id + '.TEMPERATURE').val); + iconColor = rgb_dec565(lightenDarkenColor(ConvertRGBtoHex(rgb.red, rgb.green, rgb.blue), (100 - brightness) * -1)); + } else { + //Color-Temperatur in Mired + let rgb: RGB = kelvinToRGB(1000000 / (getState(id + '.TEMPERATURE').val)); + iconColor = rgb_dec565(lightenDarkenColor(ConvertRGBtoHex(rgb.red, rgb.green, rgb.blue), (100 - brightness) * -1)); + } + } + } + + let colorTemp = 0; + if (existsState(id + '.TEMPERATURE')) { + if (getState(id + '.TEMPERATURE').val != null) { + if (pageItem.minValueColorTemp !== undefined && pageItem.maxValueColorTemp !== undefined) { + colorTemp = Math.trunc(scale(getState(id + '.TEMPERATURE').val, pageItem.maxValueColorTemp, pageItem.minValueColorTemp, 100, 0)); + } else { + colorTemp = getState(id + '.TEMPERATURE').val; + } + } + } else { + log('function GenerateDetailPage role:ct -> Alias-Datenpunkt: ' + id + '.TEMPERATURE could not be read', 'warn'); + } + + let effect_supported = 'disable'; + if (pageItem.modeList != undefined) { + effect_supported = 'enable'; + } + + let tempId = placeId != undefined ? placeId : id; + + out_msgs.push({ + payload: + 'entityUpdateDetail' + + '~' + //entityUpdateDetail + tempId + + '~' + + icon + + '~' + //iconId + iconColor + + '~' + //iconColor + switchVal + + '~' + //buttonState + brightness + + '~' + //sliderBrightnessPos + colorTemp + + '~' + //sliderColorTempPos + colorMode + + '~' + //colorMode (if hue-alias without hue-datapoint, then disable) + 'Color' + + '~' + //Color-identifier + findLocale('lights', 'Temperature') + + '~' + //Temperature-identifier + findLocale('lights', 'Brightness') + + '~' + //Brightness-identifier + effect_supported, + }); + } + break; // Farbtemperatur (CT) case 'ct': { @@ -10166,15 +10427,30 @@ function GenerateDetailPage (type: NSPanel.PopupType, optional: NSPanel.mediaOpt switchVal = '1'; } else { iconColor = GetIconColor(pageItem, false, true); + icon = icon2; } let colorMode = 'disable'; + //Calculate color for icon based on color temperature and brightness + if (existsState(id + '.TEMPERATURE') && pageItem.interpolateColor) { + RegisterDetailEntityWatcher(id + '.TEMPERATURE', pageItem, type, placeId); + if (getState(id + '.TEMPERATURE').val > 1000) { + //Color-Temperatur in Kelvin + let rgb: RGB = kelvinToRGB(getState(id + '.TEMPERATURE').val); + iconColor = rgb_dec565(lightenDarkenColor(ConvertRGBtoHex(rgb.red, rgb.green, rgb.blue), (100 - brightness) * -1)); + } else { + //Color-Temperatur in Mired + let rgb: RGB = kelvinToRGB(1000000 / (getState(id + '.TEMPERATURE').val)); + iconColor = rgb_dec565(lightenDarkenColor(ConvertRGBtoHex(rgb.red, rgb.green, rgb.blue), (100 - brightness) * -1)); + } + } + let colorTemp = 0; if (existsState(id + '.TEMPERATURE')) { if (getState(id + '.TEMPERATURE').val != null) { if (pageItem.minValueColorTemp !== undefined && pageItem.maxValueColorTemp !== undefined) { - colorTemp = Math.trunc(scale(getState(id + '.TEMPERATURE').val, pageItem.minValueColorTemp, pageItem.maxValueColorTemp, 100, 0)); + colorTemp = Math.trunc(scale(getState(id + '.TEMPERATURE').val, pageItem.maxValueColorTemp, pageItem.minValueColorTemp, 100, 0)); } else { colorTemp = getState(id + '.TEMPERATURE').val; } @@ -12368,6 +12644,61 @@ function rgb_to_cie (red: number, green: number, blue: number): string { return cie; } +function cie_to_rgb(x: number, y: number, brightness: number): RGB { + //Set to maximum brightness if no custom value was given (Not the slick ECMAScript 6 way for compatibility reasons) + if (brightness === undefined) { + brightness = 254; + } + + let z: number = 1.0 - x - y; + let Y: number = parseFloat((brightness / 254).toFixed(2)); + let X: number = (Y / y) * x; + let Z: number = (Y / y) * z; + + //Convert to RGB using Wide RGB D65 conversion + let red: number = X * 1.656492 - Y * 0.354851 - Z * 0.255038; + let green: number = -X * 0.707196 + Y * 1.655397 + Z * 0.036152; + let blue: number = X * 0.051713 - Y * 0.121364 + Z * 1.011530; + + //If red, green or blue is larger than 1.0 set it back to the maximum of 1.0 + if (red > blue && red > green && red > 1.0) { + green = green / red; + blue = blue / red; + red = 1.0; + } + else if (green > blue && green > red && green > 1.0) { + red = red / green; + blue = blue / green; + green = 1.0; + } + else if (blue > red && blue > green && blue > 1.0) { + red = red / blue; + green = green / blue; + blue = 1.0; + } + + //Reverse gamma correction + red = red <= 0.0031308 ? 12.92 * red : (1.0 + 0.055) * Math.pow(red, (1.0 / 2.4)) - 0.055; + green = green <= 0.0031308 ? 12.92 * green : (1.0 + 0.055) * Math.pow(green, (1.0 / 2.4)) - 0.055; + blue = blue <= 0.0031308 ? 12.92 * blue : (1.0 + 0.055) * Math.pow(blue, (1.0 / 2.4)) - 0.055; + + //Convert normalized decimal to decimal + red = Math.round(red * 255); + green = Math.round(green * 255); + blue = Math.round(blue * 255); + + if (isNaN(red)) + red = 0; + + if (isNaN(green)) + green = 0; + + if (isNaN(blue)) + blue = 0; + + return {red: red, green: green, blue: blue}; +} + /** * Determines the icon ID for a given page item based on the provided value thresholds. * If the icon3 property is missing or invalid, it immediately returns the fallback icon ID.