Cell Thermostat

Cell_Thermostat

Widget to Control the Thermostat mode and temperature and see batterystate and room- and outside temperature as graph

Changelog

Version 0.1

  • initial release

Resources

uid: Cell_Thermostat
tags: []
props:
  parameters:
    - description: Header on top of the card
      label: Header
      name: header
      required: false
      type: TEXT
    - description: in rgba() or HEX or empty
      label: Foreground Color
      name: fgcolor
      required: false
      type: TEXT
    - context: item
      label: Current Temperature
      name: temperature
      required: false
      type: TEXT
    - context: item
      label: Set Temperature
      name: targetTemperature
      required: false
      type: TEXT
    - context: item
      label: Battery state
      name: batteryState
      required: false
      type: TEXT
    - context: item
      label: Radiator mode
      name: radiatorMode
      required: false
      type: TEXT
    - context: item
      label: Outside temperature
      name: outsideTemperature
      required: false
      type: TEXT
  parameterGroups: []
timestamp: Aug 7, 2022, 10:52:44 AM
component: f7-card
config:
  style:
    border-radius: var(--f7-card-expandable-border-radius)
    box-shadow: 5px 5px 10px 1px rgba(0,0,0,0.1)
    height: 120px
    margin-left: 5px
    margin-right: 5px
    noShadow: false
    padding: 0px
slots:
  content:
    - component: f7-block
      config:
        style:
          display: flex
          flex-direction: row
          left: 16px
          position: absolute
          top: -5px
      slots:
        default:
          - component: f7-icon
            config:
              f7: thermometer
              size: 18
              style:
                margin-right: 10px
          - component: Label
            config:
              style:
                font-size: 12px
                margin-top: 0px
              text: "=props.header ? props.header : ''"
    - component: f7-block
      config:
        style:
          flex-direction: row
          left: 16px
          position: absolute
          top: 50px
      slots:
        default:
          - component: Label
            config:
              style:
                font-size: 14px
                font-weight: 600
                margin-left: 0px
                margin-top: 0px
              text: "=items[props.temperature].displayState ? items[props.temperature].displayState : items[props.temperature].state"
    - component: f7-block
      config:
        style:
          bottom: -40px
          display: flex
          flex-direction: row
          left: 12px
          position: absolute
      slots:
        default:
          - component: f7-icon
            config:
              f7: "=(Number.parseFloat(items[props.batteryState].state) >= '80') ? 'battery_100' : 'battery_25' "
              size: 18
              visible: "=props.batteryState ? true : false"
          - component: Label
            config:
              style:
                font-size: 12px
                margin-left: 5px
                margin-top: 0px
              text: =items[props.batteryState].displayState
              visible: "=props.batteryState ? true : false"
    - component: oh-button
      config:
        action: command
        actionCommand: =Number(items[props.targetTemperature].state.split(' ')[0]) + 0.5
        actionItem: =props.targetTemperature
        iconColor: =props.fgcolor
        iconF7: arrow_up
        iconSize: 35
        style:
          background: transparent
          height: 35px
          position: absolute
          right: 10px
          top: 10px
        visible: "=props.targetTemperature ? true : false"
    - component: oh-button
      config:
        action: command
        actionCommand: =Number(items[props.targetTemperature].state.split(' ')[0]) - 0.5
        actionItem: =props.targetTemperature
        iconColor: =props.fgcolor
        iconF7: arrow_down
        iconSize: 35
        style:
          background: transparent
          height: 35px
          position: absolute
          right: 10px
          top: 80px
        visible: "=props.targetTemperature ? true : false"
    - component: Label
      config:
        style:
          font-size: 12px
          position: absolute
          right: 25px
          top: 53px
        text: =items[props.targetTemperature].state
        visible: "=props.targetTemperature ? true : false"
    - component: f7-block
      config:
        style:
          height: 120px
          left: 15px
          position: absolute
          top: 15px
          width: "=props.targetTemperature ? 'calc(100% - 55px)' : '100%' "
      slots:
        default:
          - component: oh-trend
            config:
              style:
                --f7-theme-color-bg-color: transparent
                background: var(--f7-theme-color-bg-color)
                height: 90%
                left: 60px
                position: absolute
                top: 20px
                width: 80%
                z-index: 0
              trendGradient: "=props.fgcolor ? [props.fgcolor] : ['#E64A19']"
              trendItem: =props.temperature
          - component: oh-trend
            config:
              style:
                --f7-theme-color-bg-color: transparent
                background: var(--f7-theme-color-bg-color)
                filter: opacity(30%)
                height: 90%
                left: 60px
                position: absolute
                top: 2px
                width: 80%
                z-index: 0
              trendGradient:
                - "#b8b8b8"
              trendItem: =props.outsideTemperature
              trendStrokeWidth: 1
          - component: oh-link
            config:
              action: analyzer
              actionAnalyzerChartType: week
              actionAnalyzerCoordSystem: time
              actionAnalyzerItems: "=props.targetTemperature ? [props.temperature, props.outsideTemperature, props.targetTemperature] : (props.outsideTemperature ? [props.temperature, props.outsideTemperature] : [props.temperature])"
              style:
                height: 120px
                left: 0px
                position: absolute
                top: 0px
                width: "=props.targetTemperature ? 'calc(100% - 55px)' : '100%' "
    - component: f7-block
      config:
        style:
          bottom: -63px
          display: flex
          flex-direction: row
          left: 12px
          position: absolute
      slots:
        default:
          - component: oh-button
            config:
              action: options
              actionItem: =[props.radiatorMode]
              color: =props.fgcolor
              fill: false
              style:
                margin-top: 5px
                right: 10px
                top: 2px
                z-index: 2
              text: =items[props.radiatorMode].displayState || items[props.radiatorMode].state
4 Likes