OH3 Widget: Heizung/Klima

GUI Relevanten, PaperUI, BasicUI, HabPanel ...

Moderatoren: seppy, udo1toni

Antworten
ma37c4
Beiträge: 9
Registriert: 25. Jul 2021 22:17

OH3 Widget: Heizung/Klima

Beitrag von ma37c4 »

Hallo openHABforum.de,

bei der schnellen Eingabe von mehreren Temperaturänderungen (Schritt: 0,5°C), bis die gewünschte Soll-Tempatur erreicht war, konnte mein Funk-Thermostat nicht schnell genug folgen.

Aus diesem Grund habe ich ein eigenes Widget zusammengebastelt.

Anzeige mit temperaturabhängigem Farbverlauf:
01.JPG

Soll-Temperatur Schnellauswahl:
02.JPG

Einstellbarer Modus:
03.JPG


Code zu freien Verfügung:
Version 1.0

Code: Alles auswählen

uid: HeatingHM
tags:
  - Heizung
  - Homematic
  - HomematicIP
  - eQ-3
props:
  parameters:
    - context: item
      label: Aktuelle Temperatur (number)
      name: iTpCur
      required: true
      type: TEXT
      groupName: mainItems
    - context: item
      label: Aktuelle rel. Luftfeuchtigkeit (number)
      name: iHmCur
      required: false
      type: TEXT
      groupName: mainItems
    - context: item
      label: Soll Temperatur (number)
      name: iTpSet
      required: true
      type: TEXT
      groupName: mainItems
    - context: item
      label: Kontoll Modus (string)
      name: iMod
      required: false
      type: TEXT
      groupName: mainItems
    - description: Standort bzw. Beschreibung z.B. Küche
      label: Standort
      name: loc
      required: true
      type: TEXT
      groupName: generalSettings
    - description: Einstellbare Maximal-Temperatur (keine Angabe = 30,5)
      label: Maximal-Temperatur
      name: TpMax
      required: false
      groupName: generalSettings
    - description: Einstellbare Minimal-Temperatur (kA = 4,5)
      label: Minimal-Temperatur
      name: TpMin
      required: false
      type: TEXT
      groupName: generalSettings
    - context: item
      label: Automatik Modus (switch [ON/OFF])
      name: iAut
      required: false
      type: TEXT
      groupName: advancedItems
      advanced: true
    - context: item
      label: Manueller Modus (number [Temperatur])
      name: iMan
      required: false
      type: TEXT
      groupName: advancedItems
      advanced: true
    - context: item
      label: Boost Modus (switch)
      name: iBst
      required: false
      type: TEXT
      groupName: advancedItems
      advanced: true
    - context: item
      label: Boost Status (number [Restzeit in Minuten])
      name: iBsTim
      required: false
      type: TEXT
      groupName: advancedItems
      advanced: true
    - context: item
      label: Fenster Zustand (contact [OPEN/CLOSED])
      name: iWin
      required: false
      type: TEXT
      groupName: advancedItems
      advanced: true
    - description: Temperatur Schritt (kA = 0,5)
      label: Temperatur Schritt
      name: TpStp
      required: false
      groupName: advancedSettings
      advanced: true
    - description: Standard Temperatur für manuellen Modus (kA = 21,0)
      label: Standard-Temperatur
      name: TpDef
      required: false
      groupName: advancedSettings
      advanced: true
    - description: Temperatur zum ausschalten der Heizung (kA = 4,5)
      label: Temperatur für Heizung aus
      name: TpHtOff
      required: false
      groupName: advancedSettings
      advanced: true
    - description: Höhe z.B. 160px (kA = auto)
      label: Höhe
      name: WgHgt
      required: false
      type: TEXT
      groupName: advancedSettings
      advanced: true
    - description: Maximale Spaltenanzahl bei Soll-Temperatur-Auswahl (kA = 10)
      label: Max. Spaltenanzahl Soll-Temperatur-Auswahl
      name: ClCnt
      required: false
      groupName: advancedSettings
      advanced: true
    - description: Spaltenbreite bei Soll-Temperatur-Auswahl (kA = 45px)
      label: Spaltenbreite Soll-Temperatur-Auswahl
      name: ClWdt
      required: false
      groupName: advancedSettings
      advanced: true
    - description: Farbverlauf für Warm (kA = <strong style='color:#ff9933'>#ff9933</strong> [Nur Hexadezimal])
      label: Farbe für Warm
      name: CgClHot
      required: false
      type: TEXT
      groupName: advancedSettings
      advanced: true
    - description: Temperatur Farbverlauf für Warm (kA = 30,0)
      label: Temperatur für Warm
      name: CgTpHot
      required: false
      type: TEXT
      groupName: advancedSettings
      advanced: true
    - description: Farbverlauf für Kalt (kA = <strong style='color:#3366ff'>#3366ff</strong> [Nur Hexadezimal])
      label: Farbe für Kalt
      name: CgClCld
      required: false
      type: TEXT
      groupName: advancedSettings
      advanced: true
    - description: Temperatur Farbverlauf für Kalt (kA = 10,0)
      label: Temperatur für Kalt
      name: CgTpCld
      required: false
      type: TEXT
      groupName: advancedSettings
      advanced: true
    - description: "Widget Hintergrund z.B. <strong style='color:CornflowerBlue'>CornflowerBlue</strong>, <strong style='color:#34568b'>#34568b</strong>, <strong style='color:rgb(155, 183, 212)'>rgb(155, 183, 212)</strong>, <strong style='color:hsl(129, 44%, 74%)'>hsl(129, 44%, 74%)</strong>,</br><strong style='background:linear-gradient(to bottom right, #6b5b95 0%, #f7cac9 100%);color:black'>linear-gradient(to bottom right, #6b5b95 0%, #f7cac9 100%)</strong>, usw.</br>(kA = Temperaturabhängiger Farbverlauf) <a 'https://www.w3schools.com/colors/default.asp'>https://www.w3schools.com/colors/default.asp</a>"
      label: Widget Hintergrund
      name: WgBkg
      required: false
      type: TEXT
      groupName: advancedSettings
      advanced: true
    - description: Sprach- & Region-Code (kA = de-DE [deutsch/Deutschland])
      label: ISO-Code
      name: LgCod
      required: false
      type: TEXT
      groupName: advancedSettings
      advanced: true
  parameterGroups:
    - name: mainItems
      label: Items
    - name: generalSettings
      label: Einstellungen
    - name: advancedItems
      label: Zusätzliche Items
    - name: advancedSettings
      label: Erweiterte Einstellungen
timestamp: Oct 26, 2022, 5:06:32 PM
component: f7-card
config:
  class:
    - padding
  style:
    overflow: hidden
    height: "=(props.WgHgt ? props.WgHgt : 'auto')"
    -ms-user-select: none
    -moz-user-select: none
    -webkit-user-select: none
    user-select: none
    background: "=(props.WgBkg ? props.WgBkg : ('linear-gradient(to bottom, ' + (props.CgClHot ? props.CgClHot : '#ff9933') + ' ' + (items[props.iTpCur].state.split(' ')[0] < (props.CgTpCld ? Number(props.CgTpCld.replace(',', '.')) : 10)+((props.CgTpHot ? Number(props.CgTpHot.replace(',', '.')) : 30)-(props.CgTpCld ? Number(props.CgTpCld.replace(',', '.')) : 10))/2 ? '0' : items[props.iTpCur].state.split(' ')[0] > (props.CgTpHot ? Number(props.CgTpHot.replace(',', '.')) : 30) ? '100' : Math.round((items[props.iTpCur].state.split(' ')[0] - ((props.CgTpCld ? Number(props.CgTpCld.replace(',', '.')) : 10)+((props.CgTpHot ? Number(props.CgTpHot.replace(',', '.')) : 30)-(props.CgTpCld ? Number(props.CgTpCld.replace(',', '.')) : 10))/2)) * 10)) + '%, ' + (props.CgClCld ? props.CgClCld : '#3366ff') + ' ' + (items[props.iTpCur].state.split(' ')[0] < (props.CgTpCld ? Number(props.CgTpCld.replace(',', '.')) : 10) ? '0' : items[props.iTpCur].state.split(' ')[0] > (props.CgTpCld ? Number(props.CgTpCld.replace(',', '.')) : 10)+((props.CgTpHot ? Number(props.CgTpHot.replace(',', '.')) : 30)-(props.CgTpCld ? Number(props.CgTpCld.replace(',', '.')) : 10))/2 ? '100' : Math.round((items[props.iTpCur].state.split(' ')[0] - (props.CgTpCld ? Number(props.CgTpCld.replace(',', '.')) : 10)) * 10)) + '%)'))"
    --ht-card-color: 255,255,255
    --ht-card-text-shadow-color: 0,0,0
    --ht-card-text-color: rgba(var(--ht-card-color),1)
    color: var(--ht-card-text-color)
    --ht-card-border-radius: 20px
    border-radius: var(--ht-card-border-radius)
    --ht-font-size-xxsmall: 12px
    --ht-font-size-xsmall: 14px
    --ht-font-size-small: 16px
    --ht-font-size-normal: 18px
    --ht-font-size-large: 26px
    --ht-font-size-xlarge: 60px
    --ht-font-size-xxlarge: 70px
    --ht-font-letter-spacing: 0.75px
    --ht-font-weight-normal: 400
    --ht-font-weight-semibold: 600
    --ht-text-shadow-light: 2px 2px rgba(var(--ht-card-text-shadow-color),.15)
    --ht-text-shadow-strong: 2px 2px rgba(var(--ht-card-text-shadow-color),.35)
    --ht-button-height-normal: 36px
    --ht-button-hover-bg-color: "#ffffff20"
    --ht-button-transition-duration: 0.4s
slots:
  default:
    - component: f7-block
      config:
        class:
          - no-margin
          - no-padding
        style:
          height: 100%
          left: 0
          position: absolute
          top: 0
          width: 100%
    - component: f7-row
      slots:
        default:
          - component: f7-col
            config:
              style:
                z-index: 1
            slots:
              default:
                - component: f7-row
                  config:
                    style:
                      flex-wrap: nowrap
                  slots:
                    default:
                      - component: f7-col
                        config:
                          class:
                            - text-align-left
                        slots:
                          default:
                            - component: Label
                              config:
                                style:
                                  color: var(--ht-card-text-color)
                                  font-size: var(--ht-font-size-large)
                                  font-weight: var(--ht-font-weight-semibold)
                                  letter-spacing: var(--ht-font-letter-spacing)
                                  line-height: var(--ht-font-size-large)
                                  overflow: hidden
                                  text-overflow: ellipsis
                                  text-shadow: var(--ht-text-shadow-strong)
                                  text-transform: none
                                  white-space: nowrap
                                text: "=(props.loc ? props.loc : 'Standort')"
                            - component: Label
                              config:
                                style:
                                  color: var(--ht-card-text-color)
                                  font-size: var(--ht-font-size-small)
                                  font-weight: var(--ht-font-weight-normal)
                                  letter-spacing: var(--ht-font-letter-spacing)
                                  line-height: var(--ht-font-size-small)
                                  overflow: hidden
                                  position: relative
                                  text-overflow: ellipsis
                                  text-shadow: var(--ht-text-shadow-light)
                                  text-transform: none
                                  top: 9px
                                  white-space: nowrap
                                  width: 150%
                                text: "='Rel. Luftfeuchtigkeit ' + Number(items[props.iHmCur].state.split(' ')[0]).toLocaleString(props.LgCod ? props.LgCod : 'de-DE') + ' %'"
                                visible: "=(props.iHmCur ? true : false)"
                      - component: f7-col
                        config:
                          class:
                            - text-align-right
                        slots:
                          default:
                            - component: Label
                              config:
                                style:
                                  font-size: var(--ht-font-size-xlarge)
                                  font-weight: var(--ht-font-weight-semibold)
                                  letter-spacing: var(--ht-font-letter-spacing)
                                  left: -50%
                                  line-height: var(--ht-font-size-xlarge)
                                  overflow: hidden
                                  position: relative
                                  text-overflow: ellipsis
                                  text-shadow: var(--ht-text-shadow-strong)
                                  text-transform: none
                                  top: -10px
                                  white-space: nowrap
                                  width: 150%
                                text: "=Number(items[props.iTpCur].state.split(' ')[0]).toLocaleString(props.LgCod ? props.LgCod : 'de-DE') + '°C'"
                - component: f7-row
                  config:
                    style:
                      flex-wrap: nowrap
                      padding-bottom: 10px
                      padding-top: 10px
                  slots:
                    default:
                      - component: f7-col
                        slots:
                          default:
                            - component: oh-button
                              config:
                                action: popover
                                active: false
                                popoverOpen: ='.popover.ht-pop-settemp-' + props.loc
                                style:
                                  --f7-button-hover-bg-color: var(--ht-button-hover-bg-color)
                                  border-radius: 18px
                                  color: var(--ht-card-text-color)
                                  font-size: var(--ht-font-size-large)
                                  font-weight: var(--ht-font-weight-semibold)
                                  height: var(--ht-button-height-normal)
                                  letter-spacing: var(--ht-font-letter-spacing)
                                  line-height: var(--ht-button-height-normal)
                                  overflow: hidden
                                  text-overflow: ellipsis
                                  text-shadow: var(--ht-text-shadow-strong)
                                  text-transform: none
                                  transition-duration: var(--ht-button-transition-duration)
                                  white-space: nowrap
                                text: "='SOLL Temperatur '+Number(items[props.iTpSet].state.split(' ')[0]).toLocaleString(props.LgCod ? props.LgCod : 'de-DE')"
                - component: f7-row
                  config:
                    class:
                      - no-margin
                      - no-padding
                    style:
                      flex-wrap: nowrap
                  slots:
                    default:
                      - component: f7-col
                        config:
                          class:
                            - no-padding
                            - no-margin
                          style:
                            height: 36px
                            width: calc(100% - 60px)
                        slots:
                          default:
                            - component: oh-button
                              config:
                                class:
                                  - text-align-center
                                action: popover
                                disabled: "=(!(props.iAut || props.iMan) ? true : false)"
                                popoverOpen: ='.popover.ht-pop-mode-' + props.loc
                                style:
                                  --f7-button-hover-bg-color: var(--ht-button-hover-bg-color)
                                  border-radius: 18px
                                  color: var(--ht-card-text-color)
                                  float: left
                                  font-size: var(--ht-font-size-normal)
                                  font-weight: var(--ht-font-weight-semibold)
                                  height: var(--ht-button-height-normal)
                                  letter-spacing: var(--ht-font-letter-spacing)
                                  line-height: var(--ht-button-height-normal)
                                  overflow: hidden
                                  text-overflow: ellipsis
                                  text-shadow: var(--ht-text-shadow-strong)
                                  text-transform: none
                                  transition-duration: var(--ht-button-transition-duration)
                                  white-space: nowrap
                                  width: 200px
                                text: "=(Number(items[props.iTpSet].state.split(' ')[0]) === (Number.parseFloat((props.TpMin ? props.TpMin.replace(',', '.') : 4.5))) ? 'Heizung aus' : (items[props.iMod].state === 'AUTO-MODE' ? 'Automatik' : (items[props.iMod].state === 'MANU-MODE' ? 'Manuell' : (items[props.iMod].state === 'BOOST-MODE' ? 'Aufheizen' + (props.iBsTim ? (' ' + (Number.parseFloat(items[props.iBsTim].state) + (Number.parseFloat(items[props.iBsTim].state) === 0 ? 1 : 0)) + ' min.') : '') : 'Modus unbekannt'))))"
                                visible: "=(props.iMod ? true : false)"
                      - component: f7-col
                        config:
                          class:
                            - no-margin
                            - no-padding
                            - text-align-right
                          visible: "=props.iWin ? true : false"
                          style:
                            height: var(--ht-button-height-normal)
                            width: 60px
                        slots:
                          default:
                            - component: oh-icon
                              config:
                                icon: "=(items[props.iWin].state === 'OPEN') ? 'window-open' : 'window-closed'"
                                style:
                                  height: 60px
                                  position: relative
                                  top: -12px
                                  width: 60px
                                visible: "=props.iWin ? true : false"
    - component: f7-popover
      config:
        class: ="ht-pop-settemp-" + props.loc
        closeByBackdropClick: true
        closeByOutsideClick: true
        closeOnEscape: true
        style:
          --f7-popover-border-radius: 15px
          background-color: rgba(0,0,0,.8)
          max-width: 92%
          padding: 10px
          width: "='calc('+(props.ClWdt ? props.ClWdt : '45px')+' * '+(props.ClCnt ? props.ClCnt : '10')+')'"
      slots:
        default:
          - component: oh-repeater
            config:
              for: i
              rangeStart: "=-((Number((props.TpMin ? props.TpMin.replace(',', '.') : 4.5)) < 0 ? (props.ClCnt ? props.ClCnt : 10) : 0)+(Number((props.TpMin ? props.TpMin.replace(',', '.') : 4.5))/(props.TpStp ? Number(props.TpStp.replace(',', '.')) : 0.5))%(props.ClCnt ? props.ClCnt : 10))"
              rangeStep: 1
              rangeStop: "=(Number((props.TpMax ? props.TpMax.replace(',', '.') : 30.5))-Number((props.TpMin ? props.TpMin.replace(',', '.') : 4.5)))/(props.TpStp ? Number(props.TpStp.replace(',', '.')) : 0.5)"
              sourceType: range
            slots:
              default:
                - component: Label
                  config:
                    class:
                      - no-margin
                      - no-padding
                    style:
                      float: left
                      height: 36px
                      min-width: "=(props.ClWdt ? props.ClWdt : '45px')"
                      width: "=Number(100/(props.ClCnt ? props.ClCnt : 10)).toFixed(0)+'%'"
                    text: ""
                    visible: "=(loop.i < 0 ? true : false)"
                - component: oh-button
                  config:
                    class:
                      - no-margin
                      - no-padding
                    action: command
                    actionCommand: "=Math.round((Number((props.TpMin ? props.TpMin.replace(',', '.') : 4.5))+(props.TpStp ? Number(props.TpStp.replace(',', '.')) : 0.5)*loop.i)*10)/10"
                    actionItem: =props.iTpSet
                    active: false
                    popupClose: =".popover.ht-pop-settemp-" + props.loc
                    style:
                      --f7-button-border-width: "=(Math.round((Number((props.TpMin ? props.TpMin.replace(',', '.') : 4.5))+(props.TpStp ? Number(props.TpStp.replace(',', '.')) : 0.5)*loop.i)*10)/10 === Number(items[props.iTpSet].state.split(' ')[0]) ? '3px' : '')"
                      --f7-button-font-size: 18px
                      --f7-button-text-color: rgba(255,255,255,1)
                      background-color: "=((props.TpMin ? Number(props.TpMin.replace(',', '.')) : 4.5)+(props.TpStp ? Number(props.TpStp.replace(',', '.')) : 0.5)*loop.i < (props.CgTpCld ? Number(props.CgTpCld.replace(',', '.')) : 10) ? (props.CgClCld ? props.CgClCld : '#3366ff') : ((props.TpMin ? Number(props.TpMin.replace(',', '.')) : 4.5)+(props.TpStp ? Number(props.TpStp.replace(',', '.')) : 0.5)*loop.i > (props.CgTpHot ? Number(props.CgTpHot.replace(',', '.')) : 30) ? (props.CgClHot ? props.CgClHot : '#ff9933') : ''))"
                      background-image: "=((props.TpMin ? Number(props.TpMin.replace(',', '.')) : 4.5)+(props.TpStp ? Number(props.TpStp.replace(',', '.')) : 0.5)*loop.i < (props.CgTpCld ? Number(props.CgTpCld.replace(',', '.')) : 10) || (props.TpMin ? Number(props.TpMin.replace(',', '.')) : 4.5)+(props.TpStp ? Number(props.TpStp.replace(',', '.')) : 0.5)*loop.i > (props.CgTpHot ? Number(props.CgTpHot.replace(',', '.')) : 30) ? '' : 'linear-gradient(to right,'+'rgb('+Number(Number.parseInt(props.CgClCld ? props.CgClCld.substring(1,3) : '33',16)+(Number.parseInt(props.CgClHot ? props.CgClHot.substring(1,3) : 'ff',16)-Number.parseInt(props.CgClCld ? props.CgClCld.substring(1,3) : '33',16))/((props.CgTpHot ? Number(props.CgTpHot.replace(',', '.')) : 30)-(props.CgTpCld ? Number(props.CgTpCld.replace(',', '.')) : 10))*((props.TpMin ? Number(props.TpMin.replace(',', '.')) : 4.5)+(props.TpStp ? Number(props.TpStp.replace(',', '.')) : 0.5)*loop.i-(props.CgTpCld ? Number(props.CgTpCld.replace(',', '.')) : 10))).toFixed(0)+','+Number(Number.parseInt(props.CgClCld ? props.CgClCld.substring(3,5) : '66',16)+(Number.parseInt(props.CgClHot ? props.CgClHot.substring(3,5) : '99',16)-Number.parseInt(props.CgClCld ? props.CgClCld.substring(3,5) : '66',16))/((props.CgTpHot ? Number(props.CgTpHot.replace(',', '.')) : 30)-(props.CgTpCld ? Number(props.CgTpCld.replace(',', '.')) : 10))*((props.TpMin ? Number(props.TpMin.replace(',', '.')) : 4.5)+(props.TpStp ? Number(props.TpStp.replace(',', '.')) : 0.5)*loop.i-(props.CgTpCld ? Number(props.CgTpCld.replace(',', '.')) : 10))).toFixed(0)+','+Number(Number.parseInt(props.CgClCld ? props.CgClCld.substring(5,7) : 'ff',16)+(Number.parseInt(props.CgClHot ? props.CgClHot.substring(5,7) : '33',16)-Number.parseInt(props.CgClCld ? props.CgClCld.substring(5,7) : 'ff',16))/((props.CgTpHot ? Number(props.CgTpHot.replace(',', '.')) : 30)-(props.CgTpCld ? Number(props.CgTpCld.replace(',', '.')) : 10))*((props.TpMin ? Number(props.TpMin.replace(',', '.')) : 4.5)+(props.TpStp ? Number(props.TpStp.replace(',', '.')) : 0.5)*loop.i-(props.CgTpCld ? Number(props.CgTpCld.replace(',', '.')) : 10))).toFixed(0)+'),'+'rgb('+Number(Number.parseInt(props.CgClCld ? props.CgClCld.substring(1,3) : '33',16)+(Number.parseInt(props.CgClHot ? props.CgClHot.substring(1,3) : 'ff',16)-Number.parseInt(props.CgClCld ? props.CgClCld.substring(1,3) : '33',16))/((props.CgTpHot ? Number(props.CgTpHot.replace(',', '.')) : 30)-(props.CgTpCld ? Number(props.CgTpCld.replace(',', '.')) : 10))*((props.TpMin ? Number(props.TpMin.replace(',', '.')) : 4.5)+(props.TpStp ? Number(props.TpStp.replace(',', '.')) : 0.5)*(loop.i+1)-(props.CgTpCld ? Number(props.CgTpCld.replace(',', '.')) : 10))).toFixed(0)+','+Number(Number.parseInt(props.CgClCld ? props.CgClCld.substring(3,5) : '66',16)+(Number.parseInt(props.CgClHot ? props.CgClHot.substring(3,5) : '99',16)-Number.parseInt(props.CgClCld ? props.CgClCld.substring(3,5) : '66',16))/((props.CgTpHot ? Number(props.CgTpHot.replace(',', '.')) : 30)-(props.CgTpCld ? Number(props.CgTpCld.replace(',', '.')) : 10))*((props.TpMin ? Number(props.TpMin.replace(',', '.')) : 4.5)+(props.TpStp ? Number(props.TpStp.replace(',', '.')) : 0.5)*(loop.i+1)-(props.CgTpCld ? Number(props.CgTpCld.replace(',', '.')) : 10))).toFixed(0)+','+Number(Number.parseInt(props.CgClCld ? props.CgClCld.substring(5,7) : 'ff',16)+(Number.parseInt(props.CgClHot ? props.CgClHot.substring(5,7) : '33',16)-Number.parseInt(props.CgClCld ? props.CgClCld.substring(5,7) : 'ff',16))/((props.CgTpHot ? Number(props.CgTpHot.replace(',', '.')) : 30)-(props.CgTpCld ? Number(props.CgTpCld.replace(',', '.')) : 10))*((props.TpMin ? Number(props.TpMin.replace(',', '.')) : 4.5)+(props.TpStp ? Number(props.TpStp.replace(',', '.')) : 0.5)*(loop.i+1)-(props.CgTpCld ? Number(props.CgTpCld.replace(',', '.')) : 10))).toFixed(0)+')'+')')"
                      border-radius: "=(loop.i === 0 ? '20px 0 0 20px': (loop.i === loop.i_source[loop.i_source.length-1] ? '0 20px 20px 0' : '0'))"
                      float: left
                      font-weight: 400
                      height: 36px
                      letter-spacing: 0.75px
                      line-height: "=(Math.round((Number((props.TpMin ? props.TpMin.replace(',', '.') : 4.5))+(props.TpStp ? Number(props.TpStp.replace(',', '.')) : 0.5)*loop.i)*10)/10 === Number(items[props.iTpSet].state.split(' ')[0]) ? '30px' : '36px')"
                      min-width: "=(props.ClWdt ? props.ClWdt : '45px')"
                      overflow: hidden
                      text-overflow: ellipsis
                      text-shadow: 2px 2px rgba(0,0,0,.15)
                      text-transform: none
                      white-space: nowrap
                      width: "=Number(100/(props.ClCnt ? props.ClCnt : 10)).toFixed(0)+'%'"
                    text: "=Number(Number((props.TpMin ? props.TpMin.replace(',', '.') : 4.5))+(props.TpStp ? Number(props.TpStp.replace(',', '.')) : 0.5)*loop.i).toLocaleString(props.LgCod ? props.LgCod : 'de-DE')"
                    visible: "=(loop.i < 0 ? false : true)"
    - component: f7-popover
      config:
        class: ="ht-pop-mode-" + props.loc
        closeByBackdropClick: true
        closeByOutsideClick: true
        closeOnEscape: true
        style:
          --f7-popover-border-radius: 15px
          background-color: rgba(0,0,0,.8)
          padding: 10px
          width: 200px
      slots:
        default:
          - component: oh-button
            config:
              action: command
              actionCommand: ON
              actionItem: =props.iAut
              active: false
              popupClose: =".popover.ht-pop-mode-" + props.loc
              style:
                --f7-button-font-size: 18px
                --f7-button-hover-bg-color: "#ffffff20"
                --f7-button-text-color: rgba(255,255,255,1)
                border-radius: 18px
                font-weight: 400
                height: 36px
                letter-spacing: 0.75px
                line-height: 36px
                overflow: hidden
                text-overflow: ellipsis
                text-shadow: 2px 2px rgba(255,255,0,.35)
                text-transform: none
                transition-duration: 0.4s
                white-space: nowrap
              text: Automatik
              visible: "=(props.iAut ? true : false)"
          - component: oh-button
            config:
              action: command
              actionCommand: "=((Number(items[props.iTpSet].state.split(' ')[0]) === (Number.parseFloat((props.TpMin ? props.TpMin.replace(',', '.') : 4.5)))) ? (props.TpDef ? Number.parseFloat(props.TpDef.replace(',', '.')) : 21) : Number(items[props.iTpSet].state.split(' ')[0]))"
              actionItem: =props.iMan
              active: false
              popupClose: =".popover.ht-pop-mode-" + props.loc
              style:
                --f7-button-font-size: 18px
                --f7-button-hover-bg-color: "#ffffff20"
                --f7-button-text-color: rgba(255,255,255,1)
                border-radius: 18px
                font-weight: 400
                height: 36px
                letter-spacing: 0.75px
                line-height: 36px
                overflow: hidden
                text-overflow: ellipsis
                text-shadow: 2px 2px rgba(255,255,0,.35)
                text-transform: none
                transition-duration: 0.4s
                white-space: nowrap
              text: Manuell
              visible: "=(props.iMan ? true : false)"
          - component: oh-button
            config:
              action: command
              actionCommand: ON
              actionItem: =props.iBst
              active: false
              popupClose: =".popover.ht-pop-mode-" + props.loc
              style:
                --f7-button-font-size: 18px
                --f7-button-hover-bg-color: "#ffffff20"
                --f7-button-text-color: rgba(255,255,255,1)
                border-radius: 18px
                font-weight: 400
                height: 36px
                letter-spacing: 0.75px
                line-height: 36px
                overflow: hidden
                text-overflow: ellipsis
                text-shadow: 2px 2px rgba(255,255,0,.35)
                text-transform: none
                transition-duration: 0.4s
                white-space: nowrap
              text: Aufheizen (Boost)
              visible: "=(props.iBst ? true : false)"
          - component: oh-button
            config:
              action: command
              actionCommand: "=(props.TpHtOff ? props.TpHtOff.replace(',', '.') : 4.5)"
              actionItem: =props.iMan
              active: false
              popupClose: =".popover.ht-pop-mode-" + props.loc
              style:
                --f7-button-font-size: 18px
                --f7-button-hover-bg-color: "#ffffff20"
                --f7-button-text-color: rgba(255,255,255,1)
                border-radius: 18px
                font-weight: 400
                height: 36px
                letter-spacing: 0.75px
                line-height: 36px
                overflow: hidden
                text-overflow: ellipsis
                text-shadow: 2px 2px rgba(255,255,0,.35)
                text-transform: none
                transition-duration: 0.4s
                white-space: nowrap
              text: Heizung aus
              visible: "=(props.iMan ? true : false)"
lg
Matthias
Du hast keine ausreichende Berechtigung, um die Dateianhänge dieses Beitrags anzusehen.
Nach oben
ma37c4
Beiträge: 9
Registriert: 25. Jul 2021 22:17

OH3 Widget: Heizung/Klima - Update 1.1

Beitrag von ma37c4 »

Die Implementierung von HomematicIP-Thermostat erforderte eine zusätzliches Variablen-Item und eine Rule.

Neues Item (Add Point):
01.JPG

Neue Rule:
02.JPG

Rule-Skript:

Code: Alles auswählen

// Debug
var Log = Java.type('org.openhab.core.model.script.actions.Log');
var Debug = false;
if (Debug) {Log.logInfo('','Rule Thermostat-Steuerung '+ir.getItem('VarThermostate').getState().toString());}

// Parameter zerlegen
var aParam = ir.getItem('VarThermostate').getState().toString().split('|');

// Debug
if (Debug) {Log.logInfo('','aParam.length: '+aParam.length);}

if (aParam.length > 1) {
  
  // Item sofort zurücksetzen
  events.sendCommand('VarThermostate', '');
  
  // Debug
  if (Debug) {
    Log.logInfo('','aParam[0] = '+aParam[0]);
    Log.logInfo('','aParam[1] = '+aParam[1]);
  }
  
  
  // aParam:
  //    0               1               2       3      4      5      6      7        8
  // Hm/HmIP | Auto/Manu/Boost/Off | iTpSet | iMod | iAut | iMan | iBst | TpDef | TpHtOff
  
  
  // Homematic
  
  if ((aParam[0] == 'Hm') && (aParam.length = 9)) {
    if ((aParam[1] == 'Auto') && (aParam[4] != '')) {
      if (Debug) {Log.logInfo('','Hm Automatik: '+aParam[4]+' ON');}
      events.sendCommand(aParam[4], ON);
    }
    if ((aParam[1] == 'Manu') && (aParam[5] != '') && (aParam[7] != '')) {
      if (Debug) {Log.logInfo('','Hm Manuell: '+aParam[5]+' '+aParam[7]);}
      events.sendCommand(aParam[5], aParam[7]);
    }
    if ((aParam[1] == 'Boost') && (aParam[6] != '')) {
      // Falls Heizung Aus vorher auf manuell schalten
      if ((aParam[2] != '') && (aParam[8] != '') && (items[aParam[2]].floatValue().toString() == aParam[8]) && (aParam[5] != '')  && (aParam[7] != '')) {
        if (Debug) {Log.logInfo('','Hm Boost Heizung einschalten: '+aParam[5]+' '+aParam[7]);}
        events.sendCommand(aParam[5], aParam[7]);
      }
      if (Debug) {Log.logInfo('','Hm Aufheizen (Boost): '+aParam[6]+' ON');}
      events.sendCommand(aParam[6], ON);
    }
    if ((aParam[1] == 'Off') && (aParam[5] != '') && (aParam[8] != '')) {
      if (Debug) {Log.logInfo('','Hm Heizung Aus: '+aParam[5]+' '+aParam[8]);}
      events.sendCommand(aParam[5], aParam[8]);
    }
  }
  
  
  // HomematicIP
  
  if ((aParam[0] == 'HmIP') && (aParam.length = 9)) {
    
    // Evtl. Boost vorher ausschalten
    if ((aParam[1] != 'Boost') && (aParam[6] != '') && (ir.getItem(aParam[6]).getState() == ON)) {
      if (Debug) {Log.logInfo('','HmIP Boost ausschalten: '+aParam[6]+' OFF');}
      events.sendCommand(aParam[6], OFF);
    }
    
    if ((aParam[1] == 'Auto') && (aParam[3] != '')) {
      if (Debug) {Log.logInfo('','HmIP Automatik: '+aParam[3]+' 0');}
      events.sendCommand(aParam[3], 0);
    }
    if ((aParam[1] == 'Manu') && (aParam[3] != '') && (aParam[2] != '') && (aParam[7] != '')) {
      if (Debug) {
        Log.logInfo('','HmIP Manuell: '+aParam[3]+' 1');
        Log.logInfo('','HmIP Manuell: '+aParam[2]+' '+aParam[7]);
      }
      events.sendCommand(aParam[3], 1);
      events.sendCommand(aParam[2], aParam[7]);
    }
    if ((aParam[1] == 'Boost') && (aParam[6] != '')) {
      // Falls Heizung Aus vorher auf manuell schalten
      if ((aParam[2] != '') && (aParam[8] != '') && (items[aParam[2]].floatValue().toString() == aParam[8]) && (aParam[2] != '')  && (aParam[7] != '')) {
        if (Debug) {Log.logInfo('','HmIP Boost Heizung einschalten: '+aParam[2]+' '+aParam[7]);}
        events.sendCommand(aParam[2], aParam[7]);
      }
      if (Debug) {Log.logInfo('','HmIP Aufheizen (Boost): '+aParam[6]+' ON');}
      events.sendCommand(aParam[6], ON);
    }
    if ((aParam[1] == 'Off') && (aParam[3] != '') && (aParam[2] != '') && (aParam[8] != '')) {
      if (Debug) {Log.logInfo('','HmIP Heizung Aus: '+aParam[3]+' 1');}
      if (Debug) {Log.logInfo('','HmIP Heizung Aus: '+aParam[2]+' '+aParam[8]);}
      events.sendCommand(aParam[3], 1);
      events.sendCommand(aParam[2], aParam[8]);
    }
  }
}


// Debug
if (Debug) {Log.logInfo('','Rule Thermostat-Steuerung END');}

Widget-Verbindung zur Variable:
03.JPG

Zusätzliche Angabe des Gerätekürzels (Hm oder HmIP) im Widget.

Version 1.1

Code: Alles auswählen

uid: HeatingHM
tags:
  - Heizung
  - Homematic
  - HomematicIP
  - eQ-3
props:
  parameters:
    - context: item
      description: Aktuelle Temperatur (number)
      label: Aktuelle Temperatur
      name: iTpCur
      required: true
      type: TEXT
      groupName: mainItems
    - context: item
      description: Aktuelle rel. Luftfeuchtigkeit (number)
      label: Rel. Luftfeuchtigkeit
      name: iHmCur
      required: false
      type: TEXT
      groupName: mainItems
    - context: item
      description: Soll Temperatur (number)
      label: Soll Temperatur
      name: iTpSet
      required: true
      type: TEXT
      groupName: mainItems
    - context: item
      description: "Kontoll-Modus ( Homematic: CONTROL_MODE [string] | HmIP: CONTROL_MODE [number] )"
      label: Kontoll-Modus
      name: iMod
      required: false
      type: TEXT
      groupName: mainItems
    - description: Standort bzw. Beschreibung z.B. Küche
      label: Standort
      name: loc
      required: true
      type: TEXT
      groupName: generalSettings
    - description: Einstellbare Maximal-Temperatur (keine Angabe = 30,5)
      label: Maximal-Temperatur
      name: TpMax
      required: false
      groupName: generalSettings
    - description: Einstellbare Minimal-Temperatur (kA = 4,5)
      label: Minimal-Temperatur
      name: TpMin
      required: false
      type: TEXT
      groupName: generalSettings
    - context: item
      description: Item zur Parameter-Übergabe zur Thermostat-Steuerung über eine Rule
      label: Variable Thermostat
      name: iRul
      required: false
      type: TEXT
      groupName: advancedItems
      advanced: true
    - context: item
      description: "Automatik Modus ( Hm: AUTO_MODE [switch] | HmIP: keine Angabe )"
      label: Automatik Modus
      name: iAut
      required: false
      type: TEXT
      groupName: advancedItems
      advanced: true
    - context: item
      description: "Manueller Modus ( Hm: MANU_MODE [number] | HmIP: SET_POINT_TEMPERATURE [number] )"
      label: Manueller Modus
      name: iMan
      required: false
      type: TEXT
      groupName: advancedItems
      advanced: true
    - context: item
      description: "Boost Modus ( Hm & HmIP: BOOST_MODE [switch ON/OFF] )"
      label: Boost Modus
      name: iBst
      required: false
      type: TEXT
      groupName: advancedItems
      advanced: true
    - context: item
      description: "Boost Status ( Hm: BOOST_STATE [number Minuten] | HmIP: BOOST_TIME [number Sekunden] )"
      label: Boost Status
      name: iBsTim
      required: false
      type: TEXT
      groupName: advancedItems
      advanced: true
    - context: item
      description: Fenster Zustand ( contact OPEN/CLOSED )
      label: Fenster Zustand
      name: iWin
      required: false
      type: TEXT
      groupName: advancedItems
      advanced: true
    - description: "Kürzel für Thermostat-Steuerung über eine Rule ( kA = Hm [Hm: Homematic | HmIP: HomematicIP]"
      label: Gerätekategorie-Kürzel
      name: DvNam
      required: false
      groupName: advancedSettings
      advanced: true
    - description: Temperatur Schritt (kA = 0,5)
      label: Temperatur Schritt
      name: TpStp
      required: false
      groupName: advancedSettings
      advanced: true
    - description: Standard Temperatur für manuellen Modus (kA = 21,0)
      label: Standard-Temperatur
      name: TpDef
      required: false
      groupName: advancedSettings
      advanced: true
    - description: Temperatur zum ausschalten der Heizung (kA = 4,5)
      label: Temperatur für Heizung aus
      name: TpHtOff
      required: false
      groupName: advancedSettings
      advanced: true
    - description: Höhe z.B. 160px (kA = auto)
      label: Höhe
      name: WgHgt
      required: false
      type: TEXT
      groupName: advancedSettings
      advanced: true
    - description: Maximale Spaltenanzahl bei Soll-Temperatur-Auswahl (kA = 10)
      label: Max. Spaltenanzahl Soll-Temperatur-Auswahl
      name: ClCnt
      required: false
      groupName: advancedSettings
      advanced: true
    - description: Spaltenbreite bei Soll-Temperatur-Auswahl (kA = 45px)
      label: Spaltenbreite Soll-Temperatur-Auswahl
      name: ClWdt
      required: false
      groupName: advancedSettings
      advanced: true
    - description: Farbverlauf für Warm (kA = <strong style='color:#ff9933'>#ff9933</strong> [Nur Hexadezimal])
      label: Farbe für Warm
      name: CgClHot
      required: false
      type: TEXT
      groupName: advancedSettings
      advanced: true
    - description: Temperatur Farbverlauf für Warm (kA = 30,0)
      label: Temperatur für Warm
      name: CgTpHot
      required: false
      type: TEXT
      groupName: advancedSettings
      advanced: true
    - description: Farbverlauf für Kalt (kA = <strong style='color:#3366ff'>#3366ff</strong> [Nur Hexadezimal])
      label: Farbe für Kalt
      name: CgClCld
      required: false
      type: TEXT
      groupName: advancedSettings
      advanced: true
    - description: Temperatur Farbverlauf für Kalt (kA = 10,0)
      label: Temperatur für Kalt
      name: CgTpCld
      required: false
      type: TEXT
      groupName: advancedSettings
      advanced: true
    - description: "Widget Hintergrund z.B. <strong style='color:CornflowerBlue'>CornflowerBlue</strong>, <strong style='color:#34568b'>#34568b</strong>, <strong style='color:rgb(155, 183, 212)'>rgb(155, 183, 212)</strong>, <strong style='color:hsl(129, 44%, 74%)'>hsl(129, 44%, 74%)</strong>,</br><strong style='background:linear-gradient(to bottom right, #6b5b95 0%, #f7cac9 100%);color:black'>linear-gradient(to bottom right, #6b5b95 0%, #f7cac9 100%)</strong>, usw.</br>(kA = Temperaturabhängiger Farbverlauf) <a 'https://www.w3schools.com/colors/default.asp'>https://www.w3schools.com/colors/default.asp</a>"
      label: Widget Hintergrund
      name: WgBkg
      required: false
      type: TEXT
      groupName: advancedSettings
      advanced: true
    - description: Sprach- & Region-Code (kA = de-DE [deutsch/Deutschland])
      label: ISO-Code
      name: LgCod
      required: false
      type: TEXT
      groupName: advancedSettings
      advanced: true
  parameterGroups:
    - name: mainItems
      label: Items
    - name: generalSettings
      label: Einstellungen
    - name: advancedItems
      label: Zusätzliche Items
    - name: advancedSettings
      label: Erweiterte Einstellungen
timestamp: Oct 27, 2022, 11:36:34 PM
component: f7-card
config:
  class:
    - padding
  style:
    overflow: hidden
    height: "=(props.WgHgt ? props.WgHgt : 'auto')"
    -ms-user-select: none
    -moz-user-select: none
    -webkit-user-select: none
    user-select: none
    background: "=(props.WgBkg ? props.WgBkg : ('linear-gradient(to bottom, ' + (props.CgClHot ? props.CgClHot : '#ff9933') + ' ' + (items[props.iTpCur].state.split(' ')[0] < (props.CgTpCld ? Number(props.CgTpCld.replace(',', '.')) : 10)+((props.CgTpHot ? Number(props.CgTpHot.replace(',', '.')) : 30)-(props.CgTpCld ? Number(props.CgTpCld.replace(',', '.')) : 10))/2 ? '0' : items[props.iTpCur].state.split(' ')[0] > (props.CgTpHot ? Number(props.CgTpHot.replace(',', '.')) : 30) ? '100' : Math.round((items[props.iTpCur].state.split(' ')[0] - ((props.CgTpCld ? Number(props.CgTpCld.replace(',', '.')) : 10)+((props.CgTpHot ? Number(props.CgTpHot.replace(',', '.')) : 30)-(props.CgTpCld ? Number(props.CgTpCld.replace(',', '.')) : 10))/2)) * 10)) + '%, ' + (props.CgClCld ? props.CgClCld : '#3366ff') + ' ' + (items[props.iTpCur].state.split(' ')[0] < (props.CgTpCld ? Number(props.CgTpCld.replace(',', '.')) : 10) ? '0' : items[props.iTpCur].state.split(' ')[0] > (props.CgTpCld ? Number(props.CgTpCld.replace(',', '.')) : 10)+((props.CgTpHot ? Number(props.CgTpHot.replace(',', '.')) : 30)-(props.CgTpCld ? Number(props.CgTpCld.replace(',', '.')) : 10))/2 ? '100' : Math.round((items[props.iTpCur].state.split(' ')[0] - (props.CgTpCld ? Number(props.CgTpCld.replace(',', '.')) : 10)) * 10)) + '%)'))"
    --ht-card-color: 255,255,255
    --ht-card-text-shadow-color: 0,0,0
    --ht-card-text-color: rgba(var(--ht-card-color),1)
    color: var(--ht-card-text-color)
    --ht-card-border-radius: 20px
    border-radius: var(--ht-card-border-radius)
    --ht-font-size-xxsmall: 12px
    --ht-font-size-xsmall: 14px
    --ht-font-size-small: 16px
    --ht-font-size-normal: 18px
    --ht-font-size-large: 26px
    --ht-font-size-xlarge: 60px
    --ht-font-size-xxlarge: 70px
    --ht-font-letter-spacing: 0.75px
    --ht-font-weight-normal: 400
    --ht-font-weight-semibold: 600
    --ht-text-shadow-light: 2px 2px rgba(var(--ht-card-text-shadow-color),.15)
    --ht-text-shadow-strong: 2px 2px rgba(var(--ht-card-text-shadow-color),.35)
    --ht-button-height-normal: 36px
    --ht-button-hover-bg-color: "#ffffff20"
    --ht-button-transition-duration: 0.4s
slots:
  default:
    - component: f7-block
      config:
        class:
          - no-margin
          - no-padding
        style:
          height: 100%
          left: 0
          position: absolute
          top: 0
          width: 100%
    - component: f7-row
      slots:
        default:
          - component: f7-col
            config:
              style:
                z-index: 1
            slots:
              default:
                - component: f7-row
                  config:
                    style:
                      flex-wrap: nowrap
                  slots:
                    default:
                      - component: f7-col
                        config:
                          class:
                            - text-align-left
                        slots:
                          default:
                            - component: Label
                              config:
                                style:
                                  color: var(--ht-card-text-color)
                                  font-size: var(--ht-font-size-large)
                                  font-weight: var(--ht-font-weight-semibold)
                                  letter-spacing: var(--ht-font-letter-spacing)
                                  line-height: var(--ht-font-size-large)
                                  overflow: hidden
                                  text-overflow: ellipsis
                                  text-shadow: var(--ht-text-shadow-strong)
                                  text-transform: none
                                  white-space: nowrap
                                text: "=(props.loc ? props.loc : 'Standort')"
                            - component: Label
                              config:
                                style:
                                  color: var(--ht-card-text-color)
                                  font-size: var(--ht-font-size-small)
                                  font-weight: var(--ht-font-weight-normal)
                                  letter-spacing: var(--ht-font-letter-spacing)
                                  line-height: var(--ht-font-size-small)
                                  overflow: hidden
                                  position: relative
                                  text-overflow: ellipsis
                                  text-shadow: var(--ht-text-shadow-light)
                                  text-transform: none
                                  top: 20px
                                  white-space: nowrap
                                  width: 150%
                                text: "='Rel. Luftfeuchtigkeit ' + Number(items[props.iHmCur].state.split(' ')[0]).toLocaleString(props.LgCod ? props.LgCod : 'de-DE') + ' %'"
                                visible: "=(props.iHmCur ? true : false)"
                      - component: f7-col
                        config:
                          class:
                            - text-align-right
                        slots:
                          default:
                            - component: Label
                              config:
                                style:
                                  font-size: var(--ht-font-size-xlarge)
                                  font-weight: var(--ht-font-weight-semibold)
                                  letter-spacing: var(--ht-font-letter-spacing)
                                  left: -50%
                                  line-height: var(--ht-font-size-xlarge)
                                  overflow: hidden
                                  position: relative
                                  text-overflow: ellipsis
                                  text-shadow: var(--ht-text-shadow-strong)
                                  text-transform: none
                                  top: -14px
                                  white-space: nowrap
                                  width: 150%
                                text: "=Number(items[props.iTpCur].state.split(' ')[0]).toLocaleString(props.LgCod ? props.LgCod : 'de-DE') + '°C'"
                - component: f7-row
                  config:
                    style:
                      flex-wrap: nowrap
                      padding-bottom: 10px
                      padding-top: 10px
                  slots:
                    default:
                      - component: f7-col
                        slots:
                          default:
                            - component: oh-button
                              config:
                                action: popover
                                active: false
                                popoverOpen: ='.popover.ht-pop-settemp-' + props.loc
                                style:
                                  --f7-button-hover-bg-color: var(--ht-button-hover-bg-color)
                                  border-radius: 18px
                                  color: var(--ht-card-text-color)
                                  font-size: var(--ht-font-size-large)
                                  font-weight: var(--ht-font-weight-semibold)
                                  height: var(--ht-button-height-normal)
                                  letter-spacing: var(--ht-font-letter-spacing)
                                  line-height: var(--ht-button-height-normal)
                                  overflow: hidden
                                  text-overflow: ellipsis
                                  text-shadow: var(--ht-text-shadow-strong)
                                  text-transform: none
                                  transition-duration: var(--ht-button-transition-duration)
                                  white-space: nowrap
                                text: "='SOLL Temperatur '+Number(items[props.iTpSet].state.split(' ')[0]).toLocaleString(props.LgCod ? props.LgCod : 'de-DE')"
                - component: f7-row
                  config:
                    class:
                      - no-margin
                      - no-padding
                    style:
                      flex-wrap: nowrap
                  slots:
                    default:
                      - component: f7-col
                        config:
                          class:
                            - no-padding
                            - no-margin
                          style:
                            height: 36px
                            width: calc(100% - 60px)
                        slots:
                          default:
                            - component: oh-button
                              config:
                                class:
                                  - text-align-center
                                action: popover
                                disabled: "=(!(props.iAut || props.iMan) ? true : false)"
                                popoverOpen: ='.popover.ht-pop-mode-' + props.loc
                                style:
                                  --f7-button-hover-bg-color: var(--ht-button-hover-bg-color)
                                  border-radius: 18px
                                  color: var(--ht-card-text-color)
                                  float: left
                                  font-size: var(--ht-font-size-normal)
                                  font-weight: var(--ht-font-weight-semibold)
                                  height: var(--ht-button-height-normal)
                                  letter-spacing: var(--ht-font-letter-spacing)
                                  line-height: var(--ht-button-height-normal)
                                  max-width: 100%
                                  overflow: hidden
                                  text-overflow: ellipsis
                                  text-shadow: var(--ht-text-shadow-strong)
                                  text-transform: none
                                  transition-duration: var(--ht-button-transition-duration)
                                  white-space: nowrap
                                  width: 200px
                                text: "=Number(items[props.iTpSet].state.split(' ')[0]) === (Number.parseFloat((props.TpMin ? props.TpMin.replace(',', '.') : 4.5))) ? 'Heizung aus' : (props.iAut ? (items[props.iMod].state === 'AUTO-MODE' ? 'Automatik' : (items[props.iMod].state === 'MANU-MODE' ? 'Manuell' : (items[props.iMod].state === 'BOOST-MODE' ? 'Aufheizen' + (props.iBsTim ? (' ' + (Number.parseFloat(items[props.iBsTim].state) + (Number.parseFloat(items[props.iBsTim].state) === 0 ? 1 : 0)) + ' min.') : '') : 'Modus unbekannt'))) : (items[props.iBst].state === 'ON' ? 'Aufheizen' + (props.iBsTim ? (' ' + Number.parseFloat(items[props.iBsTim].state) + ' sec.') : '') : (items[props.iMod].state === '0' ? 'Automatik' : (items[props.iMod].state === '1' ? 'Manuell' : 'Modus unbekannt'))))"
                                visible: "=(props.iMod ? true : false)"
                      - component: f7-col
                        config:
                          class:
                            - no-margin
                            - no-padding
                            - text-align-right
                          visible: "=props.iWin ? true : false"
                          style:
                            height: var(--ht-button-height-normal)
                            width: 60px
                        slots:
                          default:
                            - component: oh-icon
                              config:
                                icon: "=(items[props.iWin].state === 'OPEN') ? 'window-open' : 'window-closed'"
                                style:
                                  height: 60px
                                  position: relative
                                  top: -12px
                                  width: 60px
                                visible: "=props.iWin ? true : false"
    - component: f7-popover
      config:
        class: ="ht-pop-settemp-" + props.loc
        closeByBackdropClick: true
        closeByOutsideClick: true
        closeOnEscape: true
        style:
          --f7-popover-border-radius: 15px
          background-color: rgba(0,0,0,.8)
          max-width: 92%
          padding: 10px
          width: "='calc('+(props.ClWdt ? props.ClWdt : '45px')+' * '+(props.ClCnt ? props.ClCnt : '10')+')'"
      slots:
        default:
          - component: oh-repeater
            config:
              for: i
              rangeStart: "=-((Number((props.TpMin ? props.TpMin.replace(',', '.') : 4.5)) < 0 ? (props.ClCnt ? props.ClCnt : 10) : 0)+(Number((props.TpMin ? props.TpMin.replace(',', '.') : 4.5))/(props.TpStp ? Number(props.TpStp.replace(',', '.')) : 0.5))%(props.ClCnt ? props.ClCnt : 10))"
              rangeStep: 1
              rangeStop: "=(Number((props.TpMax ? props.TpMax.replace(',', '.') : 30.5))-Number((props.TpMin ? props.TpMin.replace(',', '.') : 4.5)))/(props.TpStp ? Number(props.TpStp.replace(',', '.')) : 0.5)"
              sourceType: range
            slots:
              default:
                - component: Label
                  config:
                    class:
                      - no-margin
                      - no-padding
                    style:
                      float: left
                      height: 36px
                      min-width: "=(props.ClWdt ? props.ClWdt : '45px')"
                      width: "=Number(100/(props.ClCnt ? props.ClCnt : 10)).toFixed(0)+'%'"
                    text: ""
                    visible: "=(loop.i < 0 ? true : false)"
                - component: oh-button
                  config:
                    class:
                      - no-margin
                      - no-padding
                    action: command
                    actionCommand: "=Math.round((Number((props.TpMin ? props.TpMin.replace(',', '.') : 4.5))+(props.TpStp ? Number(props.TpStp.replace(',', '.')) : 0.5)*loop.i)*10)/10"
                    actionItem: =props.iTpSet
                    active: false
                    popupClose: =".popover.ht-pop-settemp-" + props.loc
                    style:
                      --f7-button-border-width: "=(Math.round((Number((props.TpMin ? props.TpMin.replace(',', '.') : 4.5))+(props.TpStp ? Number(props.TpStp.replace(',', '.')) : 0.5)*loop.i)*10)/10 === Number(items[props.iTpSet].state.split(' ')[0]) ? '3px' : '')"
                      --f7-button-font-size: 18px
                      --f7-button-text-color: rgba(255,255,255,1)
                      background-color: "=((props.TpMin ? Number(props.TpMin.replace(',', '.')) : 4.5)+(props.TpStp ? Number(props.TpStp.replace(',', '.')) : 0.5)*loop.i < (props.CgTpCld ? Number(props.CgTpCld.replace(',', '.')) : 10) ? (props.CgClCld ? props.CgClCld : '#3366ff') : ((props.TpMin ? Number(props.TpMin.replace(',', '.')) : 4.5)+(props.TpStp ? Number(props.TpStp.replace(',', '.')) : 0.5)*loop.i > (props.CgTpHot ? Number(props.CgTpHot.replace(',', '.')) : 30) ? (props.CgClHot ? props.CgClHot : '#ff9933') : ''))"
                      background-image: "=((props.TpMin ? Number(props.TpMin.replace(',', '.')) : 4.5)+(props.TpStp ? Number(props.TpStp.replace(',', '.')) : 0.5)*loop.i < (props.CgTpCld ? Number(props.CgTpCld.replace(',', '.')) : 10) || (props.TpMin ? Number(props.TpMin.replace(',', '.')) : 4.5)+(props.TpStp ? Number(props.TpStp.replace(',', '.')) : 0.5)*loop.i > (props.CgTpHot ? Number(props.CgTpHot.replace(',', '.')) : 30) ? '' : 'linear-gradient(to right,'+'rgb('+Number(Number.parseInt(props.CgClCld ? props.CgClCld.substring(1,3) : '33',16)+(Number.parseInt(props.CgClHot ? props.CgClHot.substring(1,3) : 'ff',16)-Number.parseInt(props.CgClCld ? props.CgClCld.substring(1,3) : '33',16))/((props.CgTpHot ? Number(props.CgTpHot.replace(',', '.')) : 30)-(props.CgTpCld ? Number(props.CgTpCld.replace(',', '.')) : 10))*((props.TpMin ? Number(props.TpMin.replace(',', '.')) : 4.5)+(props.TpStp ? Number(props.TpStp.replace(',', '.')) : 0.5)*loop.i-(props.CgTpCld ? Number(props.CgTpCld.replace(',', '.')) : 10))).toFixed(0)+','+Number(Number.parseInt(props.CgClCld ? props.CgClCld.substring(3,5) : '66',16)+(Number.parseInt(props.CgClHot ? props.CgClHot.substring(3,5) : '99',16)-Number.parseInt(props.CgClCld ? props.CgClCld.substring(3,5) : '66',16))/((props.CgTpHot ? Number(props.CgTpHot.replace(',', '.')) : 30)-(props.CgTpCld ? Number(props.CgTpCld.replace(',', '.')) : 10))*((props.TpMin ? Number(props.TpMin.replace(',', '.')) : 4.5)+(props.TpStp ? Number(props.TpStp.replace(',', '.')) : 0.5)*loop.i-(props.CgTpCld ? Number(props.CgTpCld.replace(',', '.')) : 10))).toFixed(0)+','+Number(Number.parseInt(props.CgClCld ? props.CgClCld.substring(5,7) : 'ff',16)+(Number.parseInt(props.CgClHot ? props.CgClHot.substring(5,7) : '33',16)-Number.parseInt(props.CgClCld ? props.CgClCld.substring(5,7) : 'ff',16))/((props.CgTpHot ? Number(props.CgTpHot.replace(',', '.')) : 30)-(props.CgTpCld ? Number(props.CgTpCld.replace(',', '.')) : 10))*((props.TpMin ? Number(props.TpMin.replace(',', '.')) : 4.5)+(props.TpStp ? Number(props.TpStp.replace(',', '.')) : 0.5)*loop.i-(props.CgTpCld ? Number(props.CgTpCld.replace(',', '.')) : 10))).toFixed(0)+'),'+'rgb('+Number(Number.parseInt(props.CgClCld ? props.CgClCld.substring(1,3) : '33',16)+(Number.parseInt(props.CgClHot ? props.CgClHot.substring(1,3) : 'ff',16)-Number.parseInt(props.CgClCld ? props.CgClCld.substring(1,3) : '33',16))/((props.CgTpHot ? Number(props.CgTpHot.replace(',', '.')) : 30)-(props.CgTpCld ? Number(props.CgTpCld.replace(',', '.')) : 10))*((props.TpMin ? Number(props.TpMin.replace(',', '.')) : 4.5)+(props.TpStp ? Number(props.TpStp.replace(',', '.')) : 0.5)*(loop.i+1)-(props.CgTpCld ? Number(props.CgTpCld.replace(',', '.')) : 10))).toFixed(0)+','+Number(Number.parseInt(props.CgClCld ? props.CgClCld.substring(3,5) : '66',16)+(Number.parseInt(props.CgClHot ? props.CgClHot.substring(3,5) : '99',16)-Number.parseInt(props.CgClCld ? props.CgClCld.substring(3,5) : '66',16))/((props.CgTpHot ? Number(props.CgTpHot.replace(',', '.')) : 30)-(props.CgTpCld ? Number(props.CgTpCld.replace(',', '.')) : 10))*((props.TpMin ? Number(props.TpMin.replace(',', '.')) : 4.5)+(props.TpStp ? Number(props.TpStp.replace(',', '.')) : 0.5)*(loop.i+1)-(props.CgTpCld ? Number(props.CgTpCld.replace(',', '.')) : 10))).toFixed(0)+','+Number(Number.parseInt(props.CgClCld ? props.CgClCld.substring(5,7) : 'ff',16)+(Number.parseInt(props.CgClHot ? props.CgClHot.substring(5,7) : '33',16)-Number.parseInt(props.CgClCld ? props.CgClCld.substring(5,7) : 'ff',16))/((props.CgTpHot ? Number(props.CgTpHot.replace(',', '.')) : 30)-(props.CgTpCld ? Number(props.CgTpCld.replace(',', '.')) : 10))*((props.TpMin ? Number(props.TpMin.replace(',', '.')) : 4.5)+(props.TpStp ? Number(props.TpStp.replace(',', '.')) : 0.5)*(loop.i+1)-(props.CgTpCld ? Number(props.CgTpCld.replace(',', '.')) : 10))).toFixed(0)+')'+')')"
                      border-radius: "=(loop.i === 0 ? '20px 0 0 20px': (loop.i === loop.i_source[loop.i_source.length-1] ? '0 20px 20px 0' : '0'))"
                      float: left
                      font-weight: 400
                      height: 36px
                      letter-spacing: 0.75px
                      line-height: "=(Math.round((Number((props.TpMin ? props.TpMin.replace(',', '.') : 4.5))+(props.TpStp ? Number(props.TpStp.replace(',', '.')) : 0.5)*loop.i)*10)/10 === Number(items[props.iTpSet].state.split(' ')[0]) ? '30px' : '36px')"
                      min-width: "=(props.ClWdt ? props.ClWdt : '45px')"
                      overflow: hidden
                      text-overflow: ellipsis
                      text-shadow: 2px 2px rgba(0,0,0,.15)
                      text-transform: none
                      white-space: nowrap
                      width: "=Number(100/(props.ClCnt ? props.ClCnt : 10)).toFixed(0)+'%'"
                    text: "=Number(Number((props.TpMin ? props.TpMin.replace(',', '.') : 4.5))+(props.TpStp ? Number(props.TpStp.replace(',', '.')) : 0.5)*loop.i).toLocaleString(props.LgCod ? props.LgCod : 'de-DE')"
                    visible: "=(loop.i < 0 ? false : true)"
    - component: f7-popover
      config:
        class: ="ht-pop-mode-" + props.loc
        closeByBackdropClick: true
        closeByOutsideClick: true
        closeOnEscape: true
        style:
          --f7-popover-border-radius: 15px
          background-color: rgba(0,0,0,.8)
          padding: 10px
          width: 200px
      slots:
        default:
          - component: oh-button
            config:
              action: command
              actionCommand: "=(props.DvNam ? props.DvNam : 'Hm')+'|'+'Auto'+'|'+props.iTpSet+'|'+props.iMod+'|'+props.iAut+'|'+props.iMan+'|'+props.iBst+'|'+(props.TpDef ? props.TpDef.replace(',', '.') : '21')+'|'+(props.TpHtOff ? props.TpHtOff.replace(',', '.') : '4.5')"
              actionItem: =props.iRul
              active: false
              popupClose: =".popover.ht-pop-mode-" + props.loc
              style:
                --f7-button-font-size: 18px
                --f7-button-hover-bg-color: "#ffffff20"
                --f7-button-text-color: rgba(255,255,255,1)
                border-radius: 18px
                font-weight: 400
                height: 36px
                letter-spacing: 0.75px
                line-height: 36px
                overflow: hidden
                text-overflow: ellipsis
                text-shadow: 2px 2px rgba(255,255,0,.35)
                text-transform: none
                transition-duration: 0.4s
                white-space: nowrap
              text: Automatik
              visible: "=props.iRul ? true : false"
          - component: oh-button
            config:
              action: command
              actionCommand: "=(props.DvNam ? props.DvNam : 'Hm')+'|'+'Manu'+'|'+props.iTpSet+'|'+props.iMod+'|'+props.iAut+'|'+props.iMan+'|'+props.iBst+'|'+(props.TpDef ? props.TpDef.replace(',', '.') : '21')+'|'+(props.TpHtOff ? props.TpHtOff.replace(',', '.') : '4.5')"
              actionItem: =props.iRul
              active: false
              popupClose: =".popover.ht-pop-mode-" + props.loc
              style:
                --f7-button-font-size: 18px
                --f7-button-hover-bg-color: "#ffffff20"
                --f7-button-text-color: rgba(255,255,255,1)
                border-radius: 18px
                font-weight: 400
                height: 36px
                letter-spacing: 0.75px
                line-height: 36px
                overflow: hidden
                text-overflow: ellipsis
                text-shadow: 2px 2px rgba(255,255,0,.35)
                text-transform: none
                transition-duration: 0.4s
                white-space: nowrap
              text: Manuell
              visible: "=props.iRul ? true : false"
          - component: oh-button
            config:
              action: command
              actionCommand: "=(props.DvNam ? props.DvNam : 'Hm') + '|' + 'Boost'+'|'+props.iTpSet+'|'+props.iMod+'|'+props.iAut+'|'+props.iMan+'|'+props.iBst+'|'+(props.TpDef ? props.TpDef.replace(',', '.') : '21')+'|'+(props.TpHtOff ? props.TpHtOff.replace(',', '.') : '4.5')"
              actionItem: =props.iRul
              active: false
              popupClose: =".popover.ht-pop-mode-" + props.loc
              style:
                --f7-button-font-size: 18px
                --f7-button-hover-bg-color: "#ffffff20"
                --f7-button-text-color: rgba(255,255,255,1)
                border-radius: 18px
                font-weight: 400
                height: 36px
                letter-spacing: 0.75px
                line-height: 36px
                overflow: hidden
                text-overflow: ellipsis
                text-shadow: 2px 2px rgba(255,255,0,.35)
                text-transform: none
                transition-duration: 0.4s
                white-space: nowrap
              text: Aufheizen (Boost)
              visible: "=props.iRul ? true : false"
          - component: oh-button
            config:
              action: command
              actionCommand: "=(props.DvNam ? props.DvNam : 'Hm') + '|' + 'Off'+'|'+props.iTpSet+'|'+props.iMod+'|'+props.iAut+'|'+props.iMan+'|'+props.iBst+'|'+(props.TpDef ? props.TpDef.replace(',', '.') : '21')+'|'+(props.TpHtOff ? props.TpHtOff.replace(',', '.') : '4.5')"
              actionItem: =props.iRul
              active: false
              popupClose: =".popover.ht-pop-mode-" + props.loc
              style:
                --f7-button-font-size: 18px
                --f7-button-hover-bg-color: "#ffffff20"
                --f7-button-text-color: rgba(255,255,255,1)
                border-radius: 18px
                font-weight: 400
                height: 36px
                letter-spacing: 0.75px
                line-height: 36px
                overflow: hidden
                text-overflow: ellipsis
                text-shadow: 2px 2px rgba(255,255,0,.35)
                text-transform: none
                transition-duration: 0.4s
                white-space: nowrap
              text: Heizung aus
              visible: "=props.iRul ? true : false"
Du hast keine ausreichende Berechtigung, um die Dateianhänge dieses Beitrags anzusehen.
Nach oben
ma37c4
Beiträge: 9
Registriert: 25. Jul 2021 22:17

OH3 Widget: Heizung/Klima - Update 1.2

Beitrag von ma37c4 »

Schönheitskorrekturen.
01.JPG

Version 1.2

Code: Alles auswählen

uid: HeatingHM
tags:
  - Heizung
  - Homematic
  - HomematicIP
  - eQ-3
props:
  parameters:
    - context: item
      description: Aktuelle Temperatur (number)
      label: Aktuelle Temperatur
      name: iTpCur
      required: true
      type: TEXT
      groupName: mainItems
    - context: item
      description: Aktuelle rel. Luftfeuchtigkeit (number)
      label: Rel. Luftfeuchtigkeit
      name: iHmCur
      required: false
      type: TEXT
      groupName: mainItems
    - context: item
      description: Soll Temperatur (number)
      label: Soll Temperatur
      name: iTpSet
      required: true
      type: TEXT
      groupName: mainItems
    - context: item
      description: "Kontoll-Modus ( Homematic: CONTROL_MODE [string] | HmIP: CONTROL_MODE [number] )"
      label: Kontoll-Modus
      name: iMod
      required: false
      type: TEXT
      groupName: mainItems
    - description: Standort bzw. Beschreibung z.B. Küche
      label: Standort
      name: loc
      required: true
      type: TEXT
      groupName: generalSettings
    - description: Einstellbare Maximal-Temperatur (keine Angabe = 30,5)
      label: Maximal-Temperatur
      name: TpMax
      required: false
      groupName: generalSettings
    - description: Einstellbare Minimal-Temperatur (kA = 4,5)
      label: Minimal-Temperatur
      name: TpMin
      required: false
      type: TEXT
      groupName: generalSettings
    - context: item
      description: Item zur Parameter-Übergabe zur Thermostat-Steuerung über eine Rule
      label: Variable Thermostat
      name: iRul
      required: false
      type: TEXT
      groupName: advancedItems
      advanced: true
    - context: item
      description: "Automatik Modus ( Hm: AUTO_MODE [switch] | HmIP: keine Angabe )"
      label: Automatik Modus
      name: iAut
      required: false
      type: TEXT
      groupName: advancedItems
      advanced: true
    - context: item
      description: "Manueller Modus ( Hm: MANU_MODE [number] | HmIP: SET_POINT_TEMPERATURE [number] )"
      label: Manueller Modus
      name: iMan
      required: false
      type: TEXT
      groupName: advancedItems
      advanced: true
    - context: item
      description: "Boost Modus ( Hm & HmIP: BOOST_MODE [switch ON/OFF] )"
      label: Boost Modus
      name: iBst
      required: false
      type: TEXT
      groupName: advancedItems
      advanced: true
    - context: item
      description: "Boost Status ( Hm: BOOST_STATE [number Minuten] | HmIP: BOOST_TIME [number Sekunden] )"
      label: Boost Status
      name: iBsTim
      required: false
      type: TEXT
      groupName: advancedItems
      advanced: true
    - context: item
      description: Fenster Zustand ( contact OPEN/CLOSED )
      label: Fenster Zustand
      name: iWin
      required: false
      type: TEXT
      groupName: advancedItems
      advanced: true
    - description: "Kürzel für Thermostat-Steuerung über eine Rule ( kA = Hm [Hm: Homematic | HmIP: HomematicIP]"
      label: Gerätekategorie-Kürzel
      name: DvNam
      required: false
      groupName: advancedSettings
      advanced: true
    - description: Temperatur Schritt (kA = 0,5)
      label: Temperatur Schritt
      name: TpStp
      required: false
      groupName: advancedSettings
      advanced: true
    - description: Standard Temperatur für manuellen Modus (kA = 21,0)
      label: Standard-Temperatur
      name: TpDef
      required: false
      groupName: advancedSettings
      advanced: true
    - description: Temperatur zum ausschalten der Heizung (kA = 4,5)
      label: Temperatur für Heizung aus
      name: TpHtOff
      required: false
      groupName: advancedSettings
      advanced: true
    - description: Höhe z.B. 160px (kA = auto)
      label: Höhe
      name: WgHgt
      required: false
      type: TEXT
      groupName: advancedSettings
      advanced: true
    - description: Maximale Spaltenanzahl bei Soll-Temperatur-Auswahl (kA = 10)
      label: Max. Spaltenanzahl Soll-Temperatur-Auswahl
      name: ClCnt
      required: false
      groupName: advancedSettings
      advanced: true
    - description: Spalten-Einzug bei Soll-Temperatur-Auswahl (kA = 0)
      label: Spalten-Einzug bei Soll-Temperatur-Auswahl
      name: ClIdt
      required: false
      groupName: advancedSettings
      advanced: true
    - description: Spaltenbreite bei Soll-Temperatur-Auswahl (kA = 45px)
      label: Spaltenbreite Soll-Temperatur-Auswahl
      name: ClWdt
      required: false
      groupName: advancedSettings
      advanced: true
    - description: Farbverlauf für Warm (kA = <strong style='color:#ff9933'>#ff9933</strong> [Nur Hexadezimal])
      label: Farbe für Warm
      name: CgClHot
      required: false
      type: TEXT
      groupName: advancedSettings
      advanced: true
    - description: Temperatur Farbverlauf für Warm (kA = 30,0)
      label: Temperatur für Warm
      name: CgTpHot
      required: false
      type: TEXT
      groupName: advancedSettings
      advanced: true
    - description: Farbverlauf für Kalt (kA = <strong style='color:#3366ff'>#3366ff</strong> [Nur Hexadezimal])
      label: Farbe für Kalt
      name: CgClCld
      required: false
      type: TEXT
      groupName: advancedSettings
      advanced: true
    - description: Temperatur Farbverlauf für Kalt (kA = 10,0)
      label: Temperatur für Kalt
      name: CgTpCld
      required: false
      type: TEXT
      groupName: advancedSettings
      advanced: true
    - description: "Widget Hintergrund z.B. <strong style='color:CornflowerBlue'>CornflowerBlue</strong>, <strong style='color:#34568b'>#34568b</strong>, <strong style='color:rgb(155, 183, 212)'>rgb(155, 183, 212)</strong>, <strong style='color:hsl(129, 44%, 74%)'>hsl(129, 44%, 74%)</strong>,</br><strong style='background:linear-gradient(to bottom right, #6b5b95 0%, #f7cac9 100%);color:black'>linear-gradient(to bottom right, #6b5b95 0%, #f7cac9 100%)</strong>, usw.</br>(kA = Temperaturabhängiger Farbverlauf) <a 'https://www.w3schools.com/colors/default.asp'>https://www.w3schools.com/colors/default.asp</a>"
      label: Widget Hintergrund
      name: WgBkg
      required: false
      type: TEXT
      groupName: advancedSettings
      advanced: true
    - description: Sprach- & Region-Code (kA = de-DE [deutsch/Deutschland])
      label: ISO-Code
      name: LgCod
      required: false
      type: TEXT
      groupName: advancedSettings
      advanced: true
  parameterGroups:
    - name: mainItems
      label: Items
    - name: generalSettings
      label: Einstellungen
    - name: advancedItems
      label: Zusätzliche Items
    - name: advancedSettings
      label: Erweiterte Einstellungen
timestamp: Oct 29, 2022, 3:19:24 PM
component: f7-card
config:
  class:
    - padding
  style:
    overflow: hidden
    height: "=(props.WgHgt ? props.WgHgt : 'auto')"
    -ms-user-select: none
    -moz-user-select: none
    -webkit-user-select: none
    user-select: none
    background: "=(props.WgBkg ? props.WgBkg : ('linear-gradient(to bottom, ' + (props.CgClHot ? props.CgClHot : '#ff9933') + ' ' + (items[props.iTpCur].state.split(' ')[0] < (props.CgTpCld ? Number(props.CgTpCld.replace(',', '.')) : 10)+((props.CgTpHot ? Number(props.CgTpHot.replace(',', '.')) : 30)-(props.CgTpCld ? Number(props.CgTpCld.replace(',', '.')) : 10))/2 ? '0' : items[props.iTpCur].state.split(' ')[0] > (props.CgTpHot ? Number(props.CgTpHot.replace(',', '.')) : 30) ? '100' : Math.round((items[props.iTpCur].state.split(' ')[0] - ((props.CgTpCld ? Number(props.CgTpCld.replace(',', '.')) : 10)+((props.CgTpHot ? Number(props.CgTpHot.replace(',', '.')) : 30)-(props.CgTpCld ? Number(props.CgTpCld.replace(',', '.')) : 10))/2)) * 10)) + '%, ' + (props.CgClCld ? props.CgClCld : '#3366ff') + ' ' + (items[props.iTpCur].state.split(' ')[0] < (props.CgTpCld ? Number(props.CgTpCld.replace(',', '.')) : 10) ? '0' : items[props.iTpCur].state.split(' ')[0] > (props.CgTpCld ? Number(props.CgTpCld.replace(',', '.')) : 10)+((props.CgTpHot ? Number(props.CgTpHot.replace(',', '.')) : 30)-(props.CgTpCld ? Number(props.CgTpCld.replace(',', '.')) : 10))/2 ? '100' : Math.round((items[props.iTpCur].state.split(' ')[0] - (props.CgTpCld ? Number(props.CgTpCld.replace(',', '.')) : 10)) * 10)) + '%)'))"
    --ht-card-color: 255,255,255
    --ht-card-text-shadow-color: 0,0,0
    --ht-card-text-color: rgba(var(--ht-card-color),1)
    color: var(--ht-card-text-color)
    --ht-card-border-radius: 20px
    border-radius: var(--ht-card-border-radius)
    --ht-font-size-xxsmall: 12px
    --ht-font-size-xsmall: 14px
    --ht-font-size-small: 16px
    --ht-font-size-normal: 18px
    --ht-font-size-large: 26px
    --ht-font-size-xlarge: 60px
    --ht-font-size-xxlarge: 70px
    --ht-font-letter-spacing: 0.75px
    --ht-font-weight-normal: 400
    --ht-font-weight-semibold: 600
    --ht-text-shadow-light: 2px 2px rgba(var(--ht-card-text-shadow-color),.15)
    --ht-text-shadow-strong: 2px 2px rgba(var(--ht-card-text-shadow-color),.35)
    --ht-button-height-normal: 36px
    --ht-button-hover-bg-color: "#ffffff20"
    --ht-button-transition-duration: 0.4s
slots:
  default:
    - component: f7-block
      config:
        class:
          - no-margin
          - no-padding
        style:
          height: 100%
          left: 0
          position: absolute
          top: 0
          width: 100%
    - component: f7-row
      slots:
        default:
          - component: f7-col
            config:
              style:
                z-index: 1
            slots:
              default:
                - component: f7-row
                  config:
                    style:
                      flex-wrap: nowrap
                      height: 65px
                  slots:
                    default:
                      - component: f7-col
                        config:
                          class:
                            - text-align-left
                        slots:
                          default:
                            - component: Label
                              config:
                                style:
                                  color: var(--ht-card-text-color)
                                  font-size: var(--ht-font-size-large)
                                  font-weight: var(--ht-font-weight-semibold)
                                  letter-spacing: var(--ht-font-letter-spacing)
                                  line-height: var(--ht-font-size-large)
                                  overflow: hidden
                                  text-overflow: ellipsis
                                  text-shadow: var(--ht-text-shadow-strong)
                                  text-transform: none
                                  white-space: nowrap
                                text: "=(props.loc ? props.loc : 'Standort')"
                            - component: Label
                              config:
                                style:
                                  color: var(--ht-card-text-color)
                                  font-size: var(--ht-font-size-small)
                                  font-weight: var(--ht-font-weight-normal)
                                  height: 22px
                                  letter-spacing: var(--ht-font-letter-spacing)
                                  line-height: var(--ht-font-size-small)
                                  overflow: hidden
                                  position: relative
                                  text-overflow: ellipsis
                                  text-shadow: var(--ht-text-shadow-light)
                                  text-transform: none
                                  top: 24px
                                  white-space: nowrap
                                  vertical-align: text-bottom
                                  width: 150%
                                text: "='Rel. Luftfeuchtigkeit ' + Number(items[props.iHmCur].state.split(' ')[0]).toLocaleString(props.LgCod ? props.LgCod : 'de-DE') + ' %'"
                                visible: "=(props.iHmCur ? true : false)"
                      - component: f7-col
                        config:
                          class:
                            - text-align-right
                        slots:
                          default:
                            - component: Label
                              config:
                                style:
                                  font-size: var(--ht-font-size-xlarge)
                                  font-weight: var(--ht-font-weight-semibold)
                                  height: 64px
                                  letter-spacing: var(--ht-font-letter-spacing)
                                  left: -50%
                                  line-height: var(--ht-font-size-xlarge)
                                  overflow: hidden
                                  position: relative
                                  text-overflow: ellipsis
                                  text-shadow: var(--ht-text-shadow-strong)
                                  text-transform: none
                                  top: -10px
                                  white-space: nowrap
                                  width: 150%
                                text: "=Number(items[props.iTpCur].state.split(' ')[0]).toLocaleString(props.LgCod ? props.LgCod : 'de-DE') + '°C'"
                - component: f7-row
                  config:
                    style:
                      flex-wrap: nowrap
                      padding-bottom: 10px
                      padding-top: 10px
                  slots:
                    default:
                      - component: f7-col
                        slots:
                          default:
                            - component: oh-button
                              config:
                                action: popover
                                active: false
                                popoverOpen: ='.popover.ht-pop-settemp-' + props.loc
                                style:
                                  --f7-button-hover-bg-color: var(--ht-button-hover-bg-color)
                                  border-radius: 18px
                                  color: var(--ht-card-text-color)
                                  font-size: var(--ht-font-size-large)
                                  font-weight: var(--ht-font-weight-semibold)
                                  height: var(--ht-button-height-normal)
                                  letter-spacing: var(--ht-font-letter-spacing)
                                  line-height: var(--ht-button-height-normal)
                                  overflow: hidden
                                  text-overflow: ellipsis
                                  text-shadow: var(--ht-text-shadow-strong)
                                  text-transform: none
                                  transition-duration: var(--ht-button-transition-duration)
                                  white-space: nowrap
                                text: "='SOLL Temperatur '+Number(items[props.iTpSet].state.split(' ')[0]).toLocaleString(props.LgCod ? props.LgCod : 'de-DE')"
                - component: f7-row
                  config:
                    class:
                      - no-margin
                      - no-padding
                    style:
                      flex-wrap: nowrap
                  slots:
                    default:
                      - component: f7-col
                        config:
                          class:
                            - no-padding
                            - no-margin
                          style:
                            height: 36px
                            width: calc(100% - 60px)
                        slots:
                          default:
                            - component: oh-button
                              config:
                                class:
                                  - text-align-center
                                action: popover
                                disabled: "=props.iRul ? false : true"
                                popoverOpen: ='.popover.ht-pop-mode-' + props.loc
                                style:
                                  --f7-button-hover-bg-color: var(--ht-button-hover-bg-color)
                                  border-radius: 18px
                                  color: var(--ht-card-text-color)
                                  float: left
                                  font-size: var(--ht-font-size-normal)
                                  font-weight: var(--ht-font-weight-semibold)
                                  height: var(--ht-button-height-normal)
                                  letter-spacing: var(--ht-font-letter-spacing)
                                  line-height: var(--ht-button-height-normal)
                                  max-width: 100%
                                  overflow: hidden
                                  text-overflow: ellipsis
                                  text-shadow: var(--ht-text-shadow-strong)
                                  text-transform: none
                                  transition-duration: var(--ht-button-transition-duration)
                                  white-space: nowrap
                                  width: 200px
                                text: "=Number(items[props.iTpSet].state.split(' ')[0]) === (Number.parseFloat((props.TpHtOff ? props.TpHtOff.replace(',', '.') : 4.5))) ? 'Heizung aus' : (props.iAut ? (items[props.iMod].state === 'AUTO-MODE' ? 'Automatik' : (items[props.iMod].state === 'MANU-MODE' ? 'Manuell' : (items[props.iMod].state === 'BOOST-MODE' ? 'Aufheizen' + (props.iBsTim ? (' ' + (Number.parseFloat(items[props.iBsTim].state) + (Number.parseFloat(items[props.iBsTim].state) === 0 ? 1 : 0)) + ' min.') : '') : 'Modus unbekannt'))) : (items[props.iBst].state === 'ON' ? 'Aufheizen' + (props.iBsTim ? (' ' + Number.parseFloat(items[props.iBsTim].state) + ' sec.') : '') : (items[props.iMod].state === '0' ? 'Automatik' : (items[props.iMod].state === '1' ? 'Manuell' : 'Modus unbekannt'))))"
                                visible: "=(props.iMod ? true : false)"
                      - component: f7-col
                        config:
                          class:
                            - no-margin
                            - no-padding
                            - text-align-right
                          visible: "=props.iWin ? true : false"
                          style:
                            height: var(--ht-button-height-normal)
                            width: 60px
                        slots:
                          default:
                            - component: oh-icon
                              config:
                                icon: "=(items[props.iWin].state === 'OPEN') ? 'window-open' : 'window-closed'"
                                style:
                                  height: 60px
                                  position: relative
                                  top: -12px
                                  width: 60px
                                visible: "=props.iWin ? true : false"
    - component: f7-popover
      config:
        class: ="ht-pop-settemp-" + props.loc
        closeByBackdropClick: true
        closeByOutsideClick: true
        closeOnEscape: true
        style:
          --f7-popover-border-radius: "=(((props.TpMax ? props.TpMax.replace(',', '.') : 30.5)-(props.TpMin ? props.TpMin.replace(',', '.') : 4.5))/(props.TpStp ? props.TpStp.replace(',', '.') : 0.5)+(props.ClIdt ? props.ClIdt : 0) < (props.ClCnt ? props.ClCnt : 10) ? '30px' : '15px')"
          background-color: rgba(0,0,0,.8)
          max-width: 92%
          padding: 10px
          width: "='calc(' + (props.ClWdt ? props.ClWdt : '45px') + ' * ' + (Number(((props.TpMax ? props.TpMax.replace(',', '.') : 30.5)-(props.TpMin ? props.TpMin.replace(',', '.') : 4.5))/(props.TpStp ? props.TpStp.replace(',', '.') : 0.5))+Number(props.ClIdt ? props.ClIdt : 0) < (props.ClCnt ? props.ClCnt : 10) ? (Number(((props.TpMax ? props.TpMax.replace(',', '.') : 30.5)-(props.TpMin ? props.TpMin.replace(',', '.') : 4.5))/(props.TpStp ? props.TpStp.replace(',', '.') : 0.5))+Number(props.ClIdt ? props.ClIdt : 0)+1) : (props.ClCnt ? props.ClCnt : 10)) + ')'"
      slots:
        default:
          - component: oh-repeater
            config:
              for: i
              rangeStart: "=(props.ClIdt ? -props.ClIdt : 0)"
              rangeStep: 1
              rangeStop: "=((props.TpMax ? props.TpMax.replace(',', '.') : 30.5)-(props.TpMin ? props.TpMin.replace(',', '.') : 4.5))/(props.TpStp ? props.TpStp.replace(',', '.') : 0.5)"
              sourceType: range
            slots:
              default:
                - component: Label
                  config:
                    class:
                      - no-margin
                      - no-padding
                    style:
                      float: left
                      height: 36px
                      min-width: "=(props.ClWdt ? props.ClWdt : '45px')"
                      width: "=(props.ClWdt ? props.ClWdt : '45px')"
                    text: ""
                    visible: "=(loop.i < 0 ? true : false)"
                - component: oh-button
                  config:
                    class:
                      - no-margin
                      - no-padding
                    action: command
                    actionCommand: "=Math.round((Number((props.TpMin ? props.TpMin.replace(',', '.') : 4.5))+(props.TpStp ? Number(props.TpStp.replace(',', '.')) : 0.5)*loop.i)*10)/10"
                    actionItem: =props.iTpSet
                    active: false
                    popupClose: =".popover.ht-pop-settemp-" + props.loc
                    style:
                      --f7-button-border-width: "=(Math.round((Number((props.TpMin ? props.TpMin.replace(',', '.') : 4.5))+(props.TpStp ? Number(props.TpStp.replace(',', '.')) : 0.5)*loop.i)*10)/10 === Number(items[props.iTpSet].state.split(' ')[0]) ? '3px' : '')"
                      --f7-button-font-size: 18px
                      --f7-button-text-color: rgba(255,255,255,1)
                      background-color: "=((props.TpMin ? Number(props.TpMin.replace(',', '.')) : 4.5)+(props.TpStp ? Number(props.TpStp.replace(',', '.')) : 0.5)*loop.i < (props.CgTpCld ? Number(props.CgTpCld.replace(',', '.')) : 10) ? (props.CgClCld ? props.CgClCld : '#3366ff') : ((props.TpMin ? Number(props.TpMin.replace(',', '.')) : 4.5)+(props.TpStp ? Number(props.TpStp.replace(',', '.')) : 0.5)*loop.i > (props.CgTpHot ? Number(props.CgTpHot.replace(',', '.')) : 30) ? (props.CgClHot ? props.CgClHot : '#ff9933') : ''))"
                      background-image: "=((props.TpMin ? Number(props.TpMin.replace(',', '.')) : 4.5)+(props.TpStp ? Number(props.TpStp.replace(',', '.')) : 0.5)*loop.i < (props.CgTpCld ? Number(props.CgTpCld.replace(',', '.')) : 10) || (props.TpMin ? Number(props.TpMin.replace(',', '.')) : 4.5)+(props.TpStp ? Number(props.TpStp.replace(',', '.')) : 0.5)*loop.i > (props.CgTpHot ? Number(props.CgTpHot.replace(',', '.')) : 30) ? '' : 'linear-gradient(to right,'+'rgb('+Number(Number.parseInt(props.CgClCld ? props.CgClCld.substring(1,3) : '33',16)+(Number.parseInt(props.CgClHot ? props.CgClHot.substring(1,3) : 'ff',16)-Number.parseInt(props.CgClCld ? props.CgClCld.substring(1,3) : '33',16))/((props.CgTpHot ? Number(props.CgTpHot.replace(',', '.')) : 30)-(props.CgTpCld ? Number(props.CgTpCld.replace(',', '.')) : 10))*((props.TpMin ? Number(props.TpMin.replace(',', '.')) : 4.5)+(props.TpStp ? Number(props.TpStp.replace(',', '.')) : 0.5)*loop.i-(props.CgTpCld ? Number(props.CgTpCld.replace(',', '.')) : 10))).toFixed(0)+','+Number(Number.parseInt(props.CgClCld ? props.CgClCld.substring(3,5) : '66',16)+(Number.parseInt(props.CgClHot ? props.CgClHot.substring(3,5) : '99',16)-Number.parseInt(props.CgClCld ? props.CgClCld.substring(3,5) : '66',16))/((props.CgTpHot ? Number(props.CgTpHot.replace(',', '.')) : 30)-(props.CgTpCld ? Number(props.CgTpCld.replace(',', '.')) : 10))*((props.TpMin ? Number(props.TpMin.replace(',', '.')) : 4.5)+(props.TpStp ? Number(props.TpStp.replace(',', '.')) : 0.5)*loop.i-(props.CgTpCld ? Number(props.CgTpCld.replace(',', '.')) : 10))).toFixed(0)+','+Number(Number.parseInt(props.CgClCld ? props.CgClCld.substring(5,7) : 'ff',16)+(Number.parseInt(props.CgClHot ? props.CgClHot.substring(5,7) : '33',16)-Number.parseInt(props.CgClCld ? props.CgClCld.substring(5,7) : 'ff',16))/((props.CgTpHot ? Number(props.CgTpHot.replace(',', '.')) : 30)-(props.CgTpCld ? Number(props.CgTpCld.replace(',', '.')) : 10))*((props.TpMin ? Number(props.TpMin.replace(',', '.')) : 4.5)+(props.TpStp ? Number(props.TpStp.replace(',', '.')) : 0.5)*loop.i-(props.CgTpCld ? Number(props.CgTpCld.replace(',', '.')) : 10))).toFixed(0)+'),'+'rgb('+Number(Number.parseInt(props.CgClCld ? props.CgClCld.substring(1,3) : '33',16)+(Number.parseInt(props.CgClHot ? props.CgClHot.substring(1,3) : 'ff',16)-Number.parseInt(props.CgClCld ? props.CgClCld.substring(1,3) : '33',16))/((props.CgTpHot ? Number(props.CgTpHot.replace(',', '.')) : 30)-(props.CgTpCld ? Number(props.CgTpCld.replace(',', '.')) : 10))*((props.TpMin ? Number(props.TpMin.replace(',', '.')) : 4.5)+(props.TpStp ? Number(props.TpStp.replace(',', '.')) : 0.5)*(loop.i+1)-(props.CgTpCld ? Number(props.CgTpCld.replace(',', '.')) : 10))).toFixed(0)+','+Number(Number.parseInt(props.CgClCld ? props.CgClCld.substring(3,5) : '66',16)+(Number.parseInt(props.CgClHot ? props.CgClHot.substring(3,5) : '99',16)-Number.parseInt(props.CgClCld ? props.CgClCld.substring(3,5) : '66',16))/((props.CgTpHot ? Number(props.CgTpHot.replace(',', '.')) : 30)-(props.CgTpCld ? Number(props.CgTpCld.replace(',', '.')) : 10))*((props.TpMin ? Number(props.TpMin.replace(',', '.')) : 4.5)+(props.TpStp ? Number(props.TpStp.replace(',', '.')) : 0.5)*(loop.i+1)-(props.CgTpCld ? Number(props.CgTpCld.replace(',', '.')) : 10))).toFixed(0)+','+Number(Number.parseInt(props.CgClCld ? props.CgClCld.substring(5,7) : 'ff',16)+(Number.parseInt(props.CgClHot ? props.CgClHot.substring(5,7) : '33',16)-Number.parseInt(props.CgClCld ? props.CgClCld.substring(5,7) : 'ff',16))/((props.CgTpHot ? Number(props.CgTpHot.replace(',', '.')) : 30)-(props.CgTpCld ? Number(props.CgTpCld.replace(',', '.')) : 10))*((props.TpMin ? Number(props.TpMin.replace(',', '.')) : 4.5)+(props.TpStp ? Number(props.TpStp.replace(',', '.')) : 0.5)*(loop.i+1)-(props.CgTpCld ? Number(props.CgTpCld.replace(',', '.')) : 10))).toFixed(0)+')'+')')"
                      border-radius: "=(loop.i === 0 ? '20px 0 0 20px': (loop.i === loop.i_source[loop.i_source.length-1] ? '0 20px 20px 0' : '0'))"
                      float: left
                      font-weight: 400
                      height: 36px
                      letter-spacing: 0.75px
                      line-height: "=(Math.round((Number((props.TpMin ? props.TpMin.replace(',', '.') : 4.5))+(props.TpStp ? Number(props.TpStp.replace(',', '.')) : 0.5)*loop.i)*10)/10 === Number(items[props.iTpSet].state.split(' ')[0]) ? '30px' : '36px')"
                      min-width: "=(props.ClWdt ? props.ClWdt : '45px')"
                      overflow: hidden
                      text-overflow: ellipsis
                      text-shadow: 2px 2px rgba(0,0,0,.15)
                      text-transform: none
                      white-space: nowrap
                      width: "=(props.ClWdt ? props.ClWdt : '45px')"
                    text: "=Number(Number((props.TpMin ? props.TpMin.replace(',', '.') : 4.5))+(props.TpStp ? Number(props.TpStp.replace(',', '.')) : 0.5)*loop.i).toLocaleString(props.LgCod ? props.LgCod : 'de-DE')"
                    visible: "=(loop.i < 0 ? false : true)"
    - component: f7-popover
      config:
        class: ="ht-pop-mode-" + props.loc
        closeByBackdropClick: true
        closeByOutsideClick: true
        closeOnEscape: true
        style:
          --f7-popover-border-radius: 15px
          background-color: rgba(0,0,0,.8)
          padding: 10px
          width: 200px
      slots:
        default:
          - component: oh-button
            config:
              action: command
              actionCommand: "=(props.DvNam ? props.DvNam : 'Hm')+'|'+'Auto'+'|'+props.iTpSet+'|'+props.iMod+'|'+props.iAut+'|'+props.iMan+'|'+props.iBst+'|'+(props.TpDef ? props.TpDef.replace(',', '.') : '21')+'|'+(props.TpHtOff ? props.TpHtOff.replace(',', '.') : '4.5')"
              actionItem: =props.iRul
              active: false
              popupClose: =".popover.ht-pop-mode-" + props.loc
              style:
                --f7-button-font-size: 18px
                --f7-button-hover-bg-color: "#ffffff20"
                --f7-button-text-color: rgba(255,255,255,1)
                border-radius: 18px
                font-weight: 400
                height: 36px
                letter-spacing: 0.75px
                line-height: 36px
                overflow: hidden
                text-overflow: ellipsis
                text-shadow: 2px 2px rgba(255,255,0,.35)
                text-transform: none
                transition-duration: 0.4s
                white-space: nowrap
              text: Automatik
              visible: "=props.iRul ? true : false"
          - component: oh-button
            config:
              action: command
              actionCommand: "=(props.DvNam ? props.DvNam : 'Hm')+'|'+'Manu'+'|'+props.iTpSet+'|'+props.iMod+'|'+props.iAut+'|'+props.iMan+'|'+props.iBst+'|'+(props.TpDef ? props.TpDef.replace(',', '.') : '21')+'|'+(props.TpHtOff ? props.TpHtOff.replace(',', '.') : '4.5')"
              actionItem: =props.iRul
              active: false
              popupClose: =".popover.ht-pop-mode-" + props.loc
              style:
                --f7-button-font-size: 18px
                --f7-button-hover-bg-color: "#ffffff20"
                --f7-button-text-color: rgba(255,255,255,1)
                border-radius: 18px
                font-weight: 400
                height: 36px
                letter-spacing: 0.75px
                line-height: 36px
                overflow: hidden
                text-overflow: ellipsis
                text-shadow: 2px 2px rgba(255,255,0,.35)
                text-transform: none
                transition-duration: 0.4s
                white-space: nowrap
              text: Manuell
              visible: "=props.iRul ? true : false"
          - component: oh-button
            config:
              action: command
              actionCommand: "=(props.DvNam ? props.DvNam : 'Hm') + '|' + 'Boost'+'|'+props.iTpSet+'|'+props.iMod+'|'+props.iAut+'|'+props.iMan+'|'+props.iBst+'|'+(props.TpDef ? props.TpDef.replace(',', '.') : '21')+'|'+(props.TpHtOff ? props.TpHtOff.replace(',', '.') : '4.5')"
              actionItem: =props.iRul
              active: false
              popupClose: =".popover.ht-pop-mode-" + props.loc
              style:
                --f7-button-font-size: 18px
                --f7-button-hover-bg-color: "#ffffff20"
                --f7-button-text-color: rgba(255,255,255,1)
                border-radius: 18px
                font-weight: 400
                height: 36px
                letter-spacing: 0.75px
                line-height: 36px
                overflow: hidden
                text-overflow: ellipsis
                text-shadow: 2px 2px rgba(255,255,0,.35)
                text-transform: none
                transition-duration: 0.4s
                white-space: nowrap
              text: Aufheizen (Boost)
              visible: "=props.iRul ? true : false"
          - component: oh-button
            config:
              action: command
              actionCommand: "=(props.DvNam ? props.DvNam : 'Hm') + '|' + 'Off'+'|'+props.iTpSet+'|'+props.iMod+'|'+props.iAut+'|'+props.iMan+'|'+props.iBst+'|'+(props.TpDef ? props.TpDef.replace(',', '.') : '21')+'|'+(props.TpHtOff ? props.TpHtOff.replace(',', '.') : '4.5')"
              actionItem: =props.iRul
              active: false
              popupClose: =".popover.ht-pop-mode-" + props.loc
              style:
                --f7-button-font-size: 18px
                --f7-button-hover-bg-color: "#ffffff20"
                --f7-button-text-color: rgba(255,255,255,1)
                border-radius: 18px
                font-weight: 400
                height: 36px
                letter-spacing: 0.75px
                line-height: 36px
                overflow: hidden
                text-overflow: ellipsis
                text-shadow: 2px 2px rgba(255,255,0,.35)
                text-transform: none
                transition-duration: 0.4s
                white-space: nowrap
              text: Heizung aus
              visible: "=props.iRul ? true : false"
Du hast keine ausreichende Berechtigung, um die Dateianhänge dieses Beitrags anzusehen.
Nach oben
Antworten

Zurück zu „Oberflächen“