[OH3] Main UI Examples

Add-ons UIs
, ,
84

Cell_Card_1A:

uid: Cell_Card_1A
tags: []
props:
  parameters:
    - description: Small title on top of the card
      label: Title
      name: title
      required: false
      type: TEXT
    - description: Header big sized
      label: Header
      name: header
      required: false
      type: TEXT
    - description: Icon on top of the card (only f7 icons (without f7:))
      label: Icon
      name: icon
      required: false
      type: TEXT
    - description: rgba or HEX
      label: Background Color
      name: bgcolor
      required: false
      type: TEXT
    - context: item
      description: Item to control
      label: Item
      name: item
      required: false
      type: TEXT
    - label: Command to send
      name: command
      required: false
      type: TEXT
  parameterGroups: []
timestamp: May 14, 2021, 2:45:41 PM
component: f7-card
config:
  style:
    noShadow: false
    class:
      - padding: 0px
    border-radius: var(--f7-card-expandable-border-radius)
    box-shadow: 5px 5px 10px 1px rgba(0,0,0,0.1)
    background-color: "=props.bgcolor ? props.bgcolor : ''"
    height: 70px
    margin-left: 5px
    margin-right: 5px
slots:
  content:
    - component: f7-block
      config:
        style:
          position: absolute
          top: -5px
          left: 16px
          flex-direction: row
          display: flex
      slots:
        default:
          - component: f7-icon
            config:
              f7: =props.icon
              size: 18
              style:
                margin-right: 10px
              visible: "=props.icon ? true : false"
          - component: Label
            config:
              text: "=props.title ? props.title : ''"
              style:
                font-size: 12px
                margin-top: 0px
    - component: f7-block
      config:
        style:
          position: absolute
          bottom: -15px
          left: 16px
          flex-direction: row
      slots:
        default:
          - component: Label
            config:
              text: "=props.header ? props.header : 'Set Props'"
              style:
                font-size: 17px
                font-weight: 600
                margin-left: 0px
                margin-top: 0px
    - component: oh-link
      config:
        action: command
        actionItem: =props.item
        style:
          position: absolute
          top: 0
          left: 0
          height: 60px
          width: 100%
          actionPosition: center
        actionCommand: =props.command
        actionFeedback: Done!

Card_room_12A:

uid: Card_room_12A
tags: []
props:
  parameters:
    - label: Header
      name: text_header
      required: false
      type: TEXT
    - description: icon name without ".png", located in static/icons/ folder
      label: Icon
      name: iconimage
      required: false
      type: TEXT
    - description: HEX or rgba
      label: Backgroundcolor
      name: bgcolor
      required: false
      type: TEXT
    - context: item
      description: select item for state light1
      label: Item
      name: status_light1
      required: false
      type: TEXT
    - context: item
      description: select item for state light2
      label: Item
      name: status_light2
      required: false
      type: TEXT
    - context: item
      description: select item for state light3
      label: Item
      name: status_light3
      required: false
      type: TEXT
    - context: item
      description: select item for temperature
      label: Item
      name: temp
      required: false
      type: TEXT
    - context: item
      description: select item for set temperature
      label: Item
      name: settemp
      required: false
      type: TEXT
    - context: item
      description: select item for humidity
      label: Item
      name: humidity
      required: false
      type: TEXT
    - context: item
      description: select item for state blind1
      label: Item
      name: blind1
      required: false
      type: TEXT
    - context: item
      description: select item for state blind slats1
      label: Item
      name: blind_slats1
      required: false
      type: TEXT
    - context: item
      description: select item for state blind2
      label: Item
      name: blind2
      required: false
      type: TEXT
    - context: item
      description: select item for state blind slats2
      label: Item
      name: blind_slats2
      required: false
      type: TEXT
    - context: item
      description: select item for state blind3
      label: Item
      name: blind3
      required: false
      type: TEXT
    - context: item
      description: select item for state blind slats3
      label: Item
      name: blind_slats3
      required: false
      type: TEXT
    - context: item
      description: select item for door state(s)
      label: Item
      name: door_state
      required: false
      type: TEXT
    - description: Page which will be opened as popup
      label: Page ID
      name: page
      required: false
timestamp: Jun 20, 2021, 6:28:44 PM
component: f7-card
config:
  style:
    noShadow: false
    class:
      - padding: 0px
    border-radius: var(--f7-card-expandable-border-radius)
    box-shadow: 5px 5px 10px 1px rgba(0,0,0,0.1)
    background-color: "=props.bgcolor ? props.bgcolor : ''"
    height: 100px
    margin-left: 5px
    margin-right: 5px
slots:
  content:
    - component: f7-block
      config:
        style:
          position: absolute
          top: -5px
          left: 45px
      slots:
        default:
          - component: Label
            config:
              text: "=props.text_header ? props.text_header : 'Set Props'"
              style:
                font-size: 17px
                font-weight: 600
                margin-left: 0px
                margin-top: 0px
    - component: f7-block
      config:
        style:
          position: absolute
          bottom: -20px
          left: 5px
      slots:
        default:
          - component: oh-link
            config:
              visible: "=props.status_light1 ? true : false"
              iconF7: "=(items[props.status_light1].state === 'ON' ) ? 'lightbulb_fill' : (items[props.status_light1].state === 'OFF' ) ? 'lightbulb' : (items[props.status_light1].state > 0 ) ? 'lightbulb_fill' : 'lightbulb' "
              iconColor: "=themeOptions.dark === 'dark' ? 'white' : 'orange'"
              iconSize: 20
              iconBadge: "=(items[props.status_light1].state > 0) ? items[props.status_light1].state : ''"
          - component: oh-link
            config:
              style:
                position: absolute
                left: 50px
              visible: "=props.status_light2 ? true : false"
              iconColor: "=themeOptions.dark === 'dark' ? 'white' : 'orange'"
              iconF7: "=(items[props.status_light2].state === 'ON' ) ? 'lightbulb_fill' : (items[props.status_light2].state === 'OFF' ) ? 'lightbulb' : (items[props.status_light2].state > 0 ) ? 'lightbulb_fill' : 'lightbulb' "
              iconSize: 20
              iconBadge: "=(items[props.status_light2].state > 0) ? items[props.status_light2].state : ''"
          - component: oh-link
            config:
              style:
                position: absolute
                left: 85px
              visible: "=props.status_light3 ? true : false"
              iconColor: "=themeOptions.dark === 'dark' ? 'white' : 'orange'"
              iconF7: "=(items[props.status_light3].state === 'ON' ) ? 'lightbulb_fill' : (items[props.status_light3].state === 'OFF' ) ? 'lightbulb' : (items[props.status_light3].state > 0 ) ? 'lightbulb_fill' : 'lightbulb' "
              iconSize: 20
              iconBadge: "=(items[props.status_light3].state > 0) ? items[props.status_light3].state : ''"
          - component: oh-link
            config:
              style:
                position: absolute
                left: 120px
              visible: "=props.blind1 ? true : false"
              iconColor: "=(props.blind_slats1) ? 'gray' : (themeOptions.dark === 'dark') ? 'white' : 'black'"
              iconF7: "=items[props.blind1].state > 50 ? 'app_fill' : 'app'"
              iconSize: 24
              iconBadge: "=(props.blind_slats1) ? '' : (items[props.blind1].state > 0 ) ? items[props.blind1].state : ''"
          - component: oh-link
            config:
              style:
                position: absolute
                left: 120px
              visible: "=(props.blind_slats1) && (items[props.blind1].state > 50) && (items[props.blind_slats1].state < 30 ) ? true : false"
              iconColor: "=themeOptions.dark === 'dark' ? 'white' : 'black'"
              iconF7: "=(items[props.blind_slats1].state === '0' ) ?  'arrow_down_square' : 'arrow_down_right_square'"
              iconSize: 24
          - component: oh-link
            config:
              style:
                position: absolute
                left: 120px
              visible: "=(props.blind_slats1) && (items[props.blind1].state > 50) && (items[props.blind_slats1].state > 30 ) ? true : false"
              iconColor: "=themeOptions.dark === 'dark' ? 'white' : 'black'"
              iconF7: "=(items[props.blind_slats1].state === '50' ) ?  'arrow_right_square' :  'arrow_up_square'"
              iconSize: 24
          - component: oh-link
            config:
              style:
                position: absolute
                left: 155px
              visible: "=props.blind2 ? true : false"
              iconColor: "=(props.blind_slats2) ? 'gray' : (themeOptions.dark === 'dark') ? 'white' : 'black'"
              iconF7: "=items[props.blind2].state > 50 ? 'app_fill' : 'app'"
              iconSize: 24
              iconBadge: "=(props.blind_slats2) ? '' : (items[props.blind2].state > 0 ) ? items[props.blind2].state : ''"
          - component: oh-link
            config:
              style:
                position: absolute
                left: 155px
              visible: "=(props.blind_slats2) && (items[props.blind2].state > 50) && (items[props.blind_slats2].state < 30 ) ? true : false"
              iconColor: "=themeOptions.dark === 'dark' ? 'white' : 'black'"
              iconF7: "=(items[props.blind_slats2].state === '0' ) ?  'arrow_down_square' : 'arrow_down_right_square'"
              iconSize: 24
          - component: oh-link
            config:
              style:
                position: absolute
                left: 155px
              visible: "=(props.blind_slats2) && (items[props.blind2].state > 50) && (items[props.blind_slats2].state > 30 ) ? true : false"
              iconColor: "=themeOptions.dark === 'dark' ? 'white' : 'black'"
              iconF7: "=(items[props.blind_slats2].state === '50' ) ?  'arrow_right_square' :  'arrow_up_square'"
              iconSize: 24
          - component: oh-link
            config:
              style:
                position: absolute
                left: 190px
              visible: "=props.blind3 ? true : false"
              iconColor: "=(props.blind_slats3) ? 'gray' : (themeOptions.dark === 'dark') ? 'white' : 'black'"
              iconF7: "=items[props.blind3].state > 50 ? 'app_fill' : 'app'"
              iconSize: 22
              iconBadge: "=(props.blind_slats3) ? '' : (items[props.blind3].state > 0 ) ? items[props.blind3].state : ''"
          - component: oh-link
            config:
              style:
                position: absolute
                left: 190px
              visible: "=(props.blind_slats3) && (items[props.blind3].state > 50) && (items[props.blind_slats3].state < 30 ) ? true : false"
              iconColor: "=themeOptions.dark === 'dark' ? 'white' : 'black'"
              iconF7: "=(items[props.blind_slats3].state === '0' ) ?  'arrow_down_square' : 'arrow_down_right_square'"
              iconSize: 24
          - component: oh-link
            config:
              style:
                position: absolute
                left: 190px
              visible: "=(props.blind_slats3) && (items[props.blind3].state > 50) && (items[props.blind_slats3].state > 30 ) ? true : false"
              iconColor: "=themeOptions.dark === 'dark' ? 'white' : 'black'"
              iconF7: "=(items[props.blind_slats3].state === '50' ) ?  'arrow_right_square' :  'arrow_up_square'"
              iconSize: 24
          - component: oh-icon
            config:
              icon: "=items[props.door_state].state === 'OPEN' ? 'door-open' : 'door-closed'"
              style:
                position: absolute
                left: 120px
                bottom: 0px
                height: 24px
              visible: "=props.door_state ? true : false"
    - component: f7-block
      config:
        style:
          position: absolute
          bottom: -50px
          left: 5px
      slots:
        default:
          - component: f7-chip
            config:
              style:
                --f7-chip-bg-color: rgba(255, 255, 255, 0)
              visible: "=props.temp ? true : false"
              text: "=(items[props.temp].displayState  ? items[props.temp].displayState : items[props.temp].state) +  (props.settemp ? ' (' + items[props.settemp].state + ')' : '')"
              iconColor: "=themeOptions.dark === 'dark' ? 'white' : 'black'"
              iconF7: thermometer
              iconSize: 18
          - component: f7-chip
            config:
              style:
                --f7-chip-bg-color: rgba(255, 255, 255, 0)
              visible: "=props.humidity ? true : false"
              text: =items[props.humidity].state + '%'
              iconColor: "=themeOptions.dark === 'dark' ? 'white' : 'black'"
              iconF7: drop
              iconSize: 18
    - component: oh-image
      config:
        url: ='/static/icons/' + props.iconimage + '.png'
        style:
          position: absolute
          left: 10px
          top: 10px
          height: 25px
          opacity: 0.7
        visible: "=props.iconimage ? true : false"
    - component: oh-link
      config:
        action: popup
        actionModal: ='page:' + props.page
        style:
          position: absolute
          left: 0px
          top: 0px
          height: 110px
          width: 100%

Cell_Shutter_Card_1:

uid: Cell_Shutter_Card_1
tags: []
props:
  parameters:
    - description: Small title on top of the card
      label: Title
      name: title
      required: false
      type: TEXT
    - description: Header big sized
      label: Header
      name: header
      required: false
      type: TEXT
    - description: icon name without ".png", located in static/icons/ folder
      label: Icon
      name: iconimage
      required: false
      type: TEXT
    - description: HEX or rgba
      label: Background Color
      name: bgcolor
      required: false
      type: TEXT
    - context: item
      description: Shutter item to control
      label: Item
      name: item
      required: false
      type: TEXT
  parameterGroups: []
timestamp: Jun 20, 2021, 5:24:18 PM
component: f7-card
config:
  style:
    noShadow: false
    padding: 0px
    border-radius: var(--f7-card-expandable-border-radius)
    box-shadow: 5px 5px 10px 1px rgba(0,0,0,0.1)
    background-color: "=props.bgcolor ? props.bgcolor : ''"
    height: 120px
    margin-left: 5px
    margin-right: 5px
slots:
  content:
    - component: f7-block
      config:
        style:
          position: absolute
          top: -5px
          left: 40px
          flex-direction: row
          display: flex
      slots:
        default:
          - component: Label
            config:
              text: "=props.title ? props.title : ''"
              style:
                font-size: 12px
                margin-top: 0px
    - component: f7-block
      config:
        style:
          position: absolute
          bottom: -15px
          left: 10px
          flex-direction: row
      slots:
        default:
          - component: Label
            config:
              text: "=props.header ? props.header : 'Set Props'"
              style:
                font-size: 17px
                font-weight: 600
                margin-left: 0px
                margin-top: 0px
    - component: f7-block
      config:
        style:
          position: absolute
          bottom: -35px
          left: 10px
          flex-direction: row
      slots:
        default:
          - component: Label
            config:
              text: "=(items[props.item].state !== '0' ) ? items[props.item].state + '% geschlossen' : 'offen'"
              style:
                font-size: 12px
                margin-left: 0px
                margin-top: 0px
    - component: oh-button
      config:
        iconColor: red
        iconF7: arrow_up_circle
        iconSize: 34
        action: command
        actionItem: =props.item
        actionCommand: UP
        style:
          position: absolute
          top: 10px
          right: 5px
          height: 35px
          background: transparent
    - component: oh-button
      config:
        iconColor: red
        iconF7: stop_circle
        iconSize: 28
        action: command
        actionItem: =props.item
        actionCommand: STOP
        style:
          position: absolute
          top: 44px
          right: 8px
          height: 32px
          background: transparent
    - component: oh-button
      config:
        iconColor: red
        iconF7: arrow_down_circle
        iconSize: 34
        action: command
        actionItem: =props.item
        actionCommand: DOWN
        style:
          position: absolute
          top: 78px
          right: 5px
          height: 35px
          background: transparent
    - component: oh-image
      config:
        url: ='/static/icons/' + props.iconimage + '.png'
        style:
          position: absolute
          left: 10px
          top: 10px
          height: 25px
          opacity: 0.7
        visible: "=props.iconimage ? true : false"

Cell_Shutter_Card_1A:

uid: Cell_Shutter_Card_1A
tags: []
props:
  parameters:
    - description: Small title on top of the card
      label: Title
      name: title
      required: false
      type: TEXT
    - description: Header big sized
      label: Header
      name: header
      required: false
      type: TEXT
    - description: icon name without ".png", located in static/icons/ folder
      label: Icon
      name: iconimage
      required: false
      type: TEXT
    - description: HEX or rgba
      label: Background Color
      name: bgcolor
      required: false
      type: TEXT
    - context: item
      description: blinds item to control
      label: Item
      name: item
      required: false
      type: TEXT
    - description: blinds value position 1
      label: value pos1
      name: value1
      required: false
      type: TEXT
    - description: blinds value position 2
      label: value pos2
      name: value2
      required: false
      type: TEXT
    - description: blinds value position 3
      label: value pos3
      name: value3
      required: false
      type: TEXT
  parameterGroups: []
timestamp: Jun 20, 2021, 5:30:13 PM
component: f7-card
config:
  style:
    noShadow: false
    padding: 0px
    border-radius: var(--f7-card-expandable-border-radius)
    box-shadow: 5px 5px 10px 1px rgba(0,0,0,0.1)
    background-color: "=props.bgcolor ? props.bgcolor : ''"
    height: 120px
    margin-left: 5px
    margin-right: 5px
slots:
  content:
    - component: f7-block
      config:
        style:
          position: absolute
          top: -5px
          left: 40px
          flex-direction: row
          display: flex
      slots:
        default:
          - component: Label
            config:
              text: "=props.title ? props.title : ''"
              style:
                font-size: 12px
                margin-top: 0px
    - component: f7-block
      config:
        style:
          position: absolute
          bottom: -15px
          left: 10px
          flex-direction: row
      slots:
        default:
          - component: Label
            config:
              text: "=props.header ? props.header : 'Set Props'"
              style:
                font-size: 17px
                font-weight: 600
                margin-left: 0px
                margin-top: 0px
    - component: f7-block
      config:
        style:
          position: absolute
          bottom: -35px
          left: 10px
          flex-direction: row
      slots:
        default:
          - component: Label
            config:
              text: "=(items[props.item].state !== '0' ) ? items[props.item].state + '% geschlossen' : 'offen'"
              style:
                font-size: 12px
                margin-left: 0px
                margin-top: 0px
    - component: oh-link
      config:
        iconColor: black
        iconF7: equal_square
        iconSize: 32
        iconBadge: "=props.value1 ? props.value1 : ''"
        action: command
        actionItem: =props.item
        actionCommand: "=props.value1 ? props.value1 : ''"
        style:
          position: absolute
          top: 10px
          right: 20px
          height: 33px
          background: transparent
    - component: oh-link
      config:
        iconColor: gray
        iconF7: equal_square_fill
        iconSize: 32
        iconBadge: "=props.value2 ? props.value2 : ''"
        action: command
        actionItem: =props.item
        actionCommand: "=props.value2 ? props.value2 : ''"
        style:
          position: absolute
          top: 44px
          right: 20px
          height: 33px
          background: transparent
    - component: oh-link
      config:
        iconColor: black
        iconF7: equal_square_fill
        iconSize: 32
        iconBadge: "=props.value3 ? props.value3 : ''"
        action: command
        actionItem: =props.item
        actionCommand: "=props.value3 ? props.value3 : ''"
        style:
          position: absolute
          top: 78px
          right: 20px
          height: 33px
          background: transparent
    - component: oh-button
      config:
        iconColor: red
        iconF7: arrow_up_circle
        iconSize: 34
        action: command
        actionItem: =props.item
        actionCommand: UP
        style:
          position: absolute
          top: 10px
          right: 48px
          height: 35px
          background: transparent
    - component: oh-button
      config:
        iconColor: red
        iconF7: stop_circle
        iconSize: 28
        action: command
        actionItem: =props.item
        actionCommand: STOP
        style:
          position: absolute
          top: 44px
          right: 50px
          height: 32px
          background: transparent
    - component: oh-button
      config:
        iconColor: red
        iconF7: arrow_down_circle
        iconSize: 34
        action: command
        actionItem: =props.item
        actionCommand: DOWN
        style:
          position: absolute
          top: 78px
          right: 48px
          height: 35px
          background: transparent
    - component: oh-image
      config:
        url: ='/static/icons/' + props.iconimage + '.png'
        style:
          position: absolute
          left: 10px
          top: 10px
          height: 25px
          opacity: 0.7
        visible: "=props.iconimage ? true : false"

Cell_Shutter_Card_2:

uid: Cell_Shutter_Card_2
tags: []
props:
  parameters:
    - description: Small title on top of the card
      label: Title
      name: title
      required: false
      type: TEXT
    - description: Header big sized
      label: Header
      name: header
      required: false
      type: TEXT
    - description: icon name without ".png", located in static/icons/ folder
      label: Icon
      name: iconimage
      required: false
      type: TEXT
    - description: HEX or rgba
      label: Background Color
      name: bgcolor
      required: false
      type: TEXT
    - context: item
      description: blinds item to control
      label: Item
      name: blinds
      required: false
      type: TEXT
    - context: item
      description: blind slats item to control
      label: Item
      name: blind_slats
      required: false
      type: TEXT
  parameterGroups: []
timestamp: Jun 20, 2021, 5:32:40 PM
component: f7-card
config:
  style:
    noShadow: false
    padding: 0px
    border-radius: var(--f7-card-expandable-border-radius)
    box-shadow: 5px 5px 10px 1px rgba(0,0,0,0.1)
    background-color: "=props.bgcolor ? props.bgcolor : ''"
    height: 120px
    margin-left: 5px
    margin-right: 5px
slots:
  content:
    - component: f7-block
      config:
        style:
          position: absolute
          top: -5px
          left: 40px
          flex-direction: row
          display: flex
      slots:
        default:
          - component: Label
            config:
              text: "=props.title ? props.title : ''"
              style:
                font-size: 12px
                margin-top: 0px
    - component: f7-block
      config:
        style:
          position: absolute
          bottom: -15px
          left: 10px
          flex-direction: row
      slots:
        default:
          - component: Label
            config:
              text: "=props.header ? props.header : 'Set Props'"
              style:
                font-size: 17px
                font-weight: 600
                margin-left: 0px
                margin-top: 0px
    - component: f7-block
      config:
        style:
          position: absolute
          bottom: -35px
          left: 10px
          flex-direction: row
      slots:
        default:
          - component: Label
            config:
              text: "=(items[props.blinds].state > 0) ? 'ausgefahren' : 'eingefahren'"
              style:
                font-size: 12px
                margin-left: 0px
                margin-top: 0px
    - component: f7-block
      config:
        style:
          position: absolute
          bottom: -55px
          left: 10px
          flex-direction: row
      slots:
        default:
          - component: Label
            config:
              text: "=(items[props.blind_slats].state === '0') ? 'zu' : (items[props.blind_slats].state === '25') ? 'halb zu' : (items[props.blind_slats].state === '50')? 'offen' : '???'"
              style:
                font-size: 12px
                margin-left: 0px
                margin-top: 0px
    - component: oh-button
      config:
        iconColor: blue
        iconF7: arrow_right_square_fill
        iconSize: 32
        action: command
        actionItem: =props.blind_slats
        actionCommand: "50"
        style:
          position: absolute
          top: 10px
          right: 0px
          height: 33px
          background: transparent
    - component: oh-button
      config:
        iconColor: blue
        iconF7: arrow_down_right_square_fill
        iconSize: 32
        action: command
        actionItem: =props.blind_slats
        actionCommand: "25"
        style:
          position: absolute
          top: 44px
          right: 0px
          height: 33px
          background: transparent
    - component: oh-button
      config:
        iconColor: blue
        iconF7: arrow_down_square_fill
        iconSize: 32
        action: command
        actionItem: =props.blind_slats
        actionCommand: "0"
        style:
          position: absolute
          top: 78px
          right: 0px
          height: 33px
          background: transparent
    - component: oh-button
      config:
        iconColor: red
        iconF7: arrow_up_circle
        iconSize: 34
        action: command
        actionItem: =props.blinds
        actionCommand: UP
        style:
          position: absolute
          top: 10px
          right: 38px
          height: 35px
          background: transparent
    - component: oh-button
      config:
        iconColor: red
        iconF7: stop_circle
        iconSize: 28
        action: command
        actionItem: =props.blinds
        actionCommand: STOP
        style:
          position: absolute
          top: 44px
          right: 40px
          height: 32px
          background: transparent
    - component: oh-button
      config:
        iconColor: red
        iconF7: arrow_down_circle
        iconSize: 34
        action: command
        actionItem: =props.blinds
        actionCommand: DOWN
        style:
          position: absolute
          top: 78px
          right: 38px
          height: 35px
          background: transparent
    - component: oh-image
      config:
        url: ='/static/icons/' + props.iconimage + '.png'
        style:
          position: absolute
          left: 10px
          top: 10px
          height: 25px
          opacity: 0.7
        visible: "=props.iconimage ? true : false"

Cell_Light_Color_Card_2:

uid: Cell_Light_Color_Card_2
tags: []
props:
  parameters:
    - description: Small title on top of the card
      label: Title
      name: title
      required: false
      type: TEXT
    - description: Header big sized
      label: Header
      name: header
      required: false
      type: TEXT
    - description: icon name without ".png", located in static/icons/ folder
      label: Icon
      name: iconimage
      required: false
      type: TEXT
    - description: rgba or HEX
      label: Background Color
      name: bgcolor
      required: false
      type: TEXT
    - context: item
      description: Item to control on/off
      label: Item ON OFF
      name: item_schalter
      required: false
      type: TEXT
    - context: item
      description: Item to control color
      label: Item light color
      name: item_color
      required: false
      type: TEXT
  parameterGroups: []
timestamp: May 24, 2021, 2:35:19 PM
component: f7-card
config:
  style:
    noShadow: false
    padding: 0px
    border-radius: var(--f7-card-expandable-border-radius)
    box-shadow: 5px 5px 10px 1px rgba(0,0,0,0.1)
    background-color: "=props.bgcolor ? props.bgcolor : ''"
    height: 165px
    margin-left: 5px
    margin-right: 5px
slots:
  default:
    - component: f7-card-content
      config:
        class:
          - display-flex
          - flex-direction-column
          - justify-content-flex-start
          - align-items-left
        style:
          --f7-color-picker-slider-size: 18px
          --f7-color-picker-slider-knob-size: 20px
      slots:
        default:
          - component: f7-row
            config:
              style:
                position: absolute
                top: 10px
                left: 40px
                flex-direction: row
                display: flex
            slots:
              default:
                - component: Label
                  config:
                    text: "=props.title ? props.title : ''"
                    style:
                      font-size: 12px
                      margin-top: 0px
    - component: f7-block
      config:
        class:
          - no-padding
        style:
          position: absolute
          top: 40px
          left: 10px
          flex-direction: row
      slots:
        default:
          - component: Label
            config:
              text: "=props.header ? props.header : 'Set Props'"
              style:
                font-size: 17px
                font-weight: 600
                margin-left: 0px
                margin-top: 0px
    - component: f7-block
      config:
        class:
          - no-padding
        style:
          position: absolute
          top: 70px
          left: 10px
          flex-direction: row
          width: calc(100% - 100px)
          margin-top: 7px
          --f7-range-bar-size: 12px
          --f7-range-bar-border-radius: 10px
          --f7-range-knob-size: 20px
          --f7-range-bar-active-bg-color: transparent
          --f7-range-bar-bg-color: linear-gradient(to right, rgba(246,158,81,0.8), rgba(246,158,81,0))
          --f7-range-knob-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3)
          --f7-range-label-text-color: black
          --f7-color-picker-slider-size: 12px
          --f7-color-picker-slider-knob-size: 20px
          z-index: 99 !important
      slots:
        default:
          - component: oh-colorpicker
            config:
              color: red
              label: true
              item: =props.item_color
              modules:
                - hsb-sliders
    - component: oh-toggle
      config:
        item: =props.item_color
        style:
          position: absolute
          top: 15px
          right: 90px
    - component: oh-button
      config:
        iconColor: red
        iconF7: app_fill
        iconSize: 34
        action: command
        actionItem: =props.item_color
        actionCommand: 0,100,100
        style:
          position: absolute
          top: 10px
          right: 35px
          height: 35px
          background: transparent
    - component: oh-button
      config:
        iconColor: deeporange
        iconF7: app_fill
        iconSize: 34
        action: command
        actionItem: =props.item_color
        actionCommand: 15,100,100
        style:
          position: absolute
          top: 45px
          right: 35px
          height: 34px
          background: transparent
    - component: oh-button
      config:
        iconColor: orange
        iconF7: app_fill
        iconSize: 34
        action: command
        actionItem: =props.item_color
        actionCommand: 30,100,100
        style:
          position: absolute
          top: 80px
          right: 35px
          height: 35px
          background: transparent
    - component: oh-button
      config:
        iconColor: yellow
        iconF7: app_fill
        iconSize: 34
        action: command
        actionItem: =props.item_color
        actionCommand: 60,100,100
        style:
          position: absolute
          top: 115px
          right: 35px
          height: 35px
          background: transparent
    - component: oh-button
      config:
        iconColor: purple
        iconF7: app_fill
        iconSize: 34
        action: command
        actionItem: =props.item_color
        actionCommand: 300,100,100
        style:
          position: absolute
          top: 10px
          right: 0px
          height: 33px
          background: transparent
    - component: oh-button
      config:
        iconColor: blue
        iconF7: app_fill
        iconSize: 34
        action: command
        actionItem: =props.item_color
        actionCommand: 240,100,100
        style:
          position: absolute
          top: 45px
          right: 0px
          height: 33px
          background: transparent
    - component: oh-button
      config:
        iconColor: lightblue
        iconF7: app_fill
        iconSize: 34
        action: command
        actionItem: =props.item_color
        actionCommand: 180,100,100
        style:
          position: absolute
          top: 80px
          right: 0px
          height: 33px
          background: transparent
    - component: oh-button
      config:
        iconColor: green
        iconF7: app_fill
        iconSize: 34
        action: command
        actionItem: =props.item_color
        actionCommand: 120,100,100
        style:
          position: absolute
          top: 115px
          right: 0px
          height: 33px
          background: transparent
    - component: oh-image
      config:
        url: ='/static/icons/' + props.iconimage + '.png'
        style:
          position: absolute
          left: 10px
          top: 10px
          height: 25px
          opacity: 0.7
        visible: "=props.iconimage ? true : false"

Cell_Light_Card_2:

uid: Cell_Light_Card_2
tags: []
props:
  parameters:
    - description: Small title on top of the card
      label: Title
      name: title
      required: false
      type: TEXT
    - description: Header big sized
      label: Header
      name: header
      required: false
      type: TEXT
    - description: icon name without ".png", located in static/icons/ folder
      label: Icon
      name: iconimage
      required: false
      type: TEXT
    - description: rgba or HEX
      label: Background Color
      name: bgcolor
      required: false
      type: TEXT
    - context: item
      description: Item to control on/off
      label: Item
      name: item_schalter
      required: false
      type: TEXT
    - context: item
      description: Item to control brightness
      label: Item brightness
      name: item_brightness
      required: false
      type: TEXT
    - context: item
      description: Item to control color temperature
      label: Item light temperature
      name: item_light_temperature
      required: false
      type: TEXT
  parameterGroups: []
timestamp: May 24, 2021, 5:57:07 AM
component: f7-card
config:
  style:
    noShadow: false
    padding: 0px
    border-radius: var(--f7-card-expandable-border-radius)
    box-shadow: 5px 5px 10px 1px rgba(0,0,0,0.1)
    background-color: "=props.bgcolor ? props.bgcolor : ''"
    height: 120px
    margin-left: 5px
    margin-right: 5px
slots:
  content:
    - component: f7-block
      config:
        style:
          position: absolute
          top: -5px
          left: 40px
          flex-direction: row
          display: flex
      slots:
        default:
          - component: Label
            config:
              text: "=props.title ? props.title : ''"
              style:
                font-size: 12px
                margin-top: 0px
    - component: f7-block
      config:
        style:
          position: absolute
          top: 50px
          left: 10px
          flex-direction: row
      slots:
        default:
          - component: Label
            config:
              text: "=props.header ? props.header : 'Set Props'"
              style:
                font-size: 17px
                font-weight: 600
                margin-left: 0px
                margin-top: 0px
    - component: f7-block
      config:
        class:
          - no-padding
        style:
          position: absolute
          top: 70px
          flex-direction: row
          width: 100%
      slots:
        default:
          - component: oh-slider
            config:
              visible: "=(props.item_light_temperature) ? true : false"
              color: red
              label: true
              min: 0
              max: 100
              item: =props.item_light_temperature
              style:
                left: 20px
                margin-top: 7px
                width: calc(100% - 40px)
                --f7-range-bar-size: 12px
                --f7-range-bar-border-radius: 10px
                --f7-range-knob-size: 20px
                --f7-range-bar-active-bg-color: transparent
                --f7-range-bar-bg-color: linear-gradient(to right, rgba(215, 226, 255), rgba(224, 238, 238),rgba(255, 215, 44, 0.5),rgba(255, 215, 44, 0.8))
                --f7-range-knob-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3)
                --f7-range-label-text-color: black
                z-index: 99 !important
    - component: f7-block
      config:
        class:
          - no-padding
        style:
          position: absolute
          top: 100px
          flex-direction: row
          width: 100%
      slots:
        default:
          - component: oh-slider
            config:
              visible: "=(props.item_brightness) ? true : false"
              color: red
              label: true
              item: =props.item_brightness
              style:
                left: 20px
                width: calc(100% - 40px)
                --f7-range-bar-size: 12px
                --f7-range-bar-border-radius: 10px
                --f7-range-knob-size: 20px
                --f7-range-bar-active-bg-color: transparent
                --f7-range-bar-bg-color: linear-gradient(to right, rgba(113,113,113,0.8), rgba(246,158,81,0.1))
                --f7-range-knob-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3)
                --f7-range-label-text-color: black
                z-index: 99 !important
    - component: oh-toggle
      config:
        item: =props.item_schalter
        style:
          position: absolute
          top: 15px
          right: 10px
    - component: oh-image
      config:
        url: ='/static/icons/' + props.iconimage + '.png'
        style:
          position: absolute
          left: 10px
          top: 10px
          height: 25px
          opacity: 0.7
        visible: "=props.iconimage ? true : false"

Cell_Toggle_Card_2:

uid: Cell_Toggle_Card_2
tags: []
props:
  parameters:
    - description: Small title1 on top of the card
      label: Title
      name: title
      required: false
      type: TEXT
    - description: Header1 big sized
      label: Header
      name: header
      required: false
      type: TEXT
    - description: icon1 name without ".png", located in static/icons/ folder
      label: Icon
      name: iconimage
      required: false
      type: TEXT
    - context: item
      description: Item1 to control on/off
      label: Item
      name: item_schalter
      required: false
      type: TEXT
    - description: Small title2 on top of second half of the card
      label: Title2
      name: title2
      required: false
      type: TEXT
    - description: Header2 big sized of second half of the card
      label: Header2
      name: header2
      required: false
      type: TEXT
    - description: icon2 name without ".png", located in static/icons/ folder
      label: Icon2
      name: iconimage2
      required: false
      type: TEXT
    - context: item
      description: Item2 to control on/off
      label: Item2
      name: item_schalter2
      required: false
      type: TEXT
    - description: rgba or HEX
      label: Background Color
      name: bgcolor
      required: false
      type: TEXT
  parameterGroups: []
timestamp: Jun 9, 2021, 3:18:18 PM
component: f7-card
config:
  style:
    noShadow: false
    padding: 0px
    border-radius: var(--f7-card-expandable-border-radius)
    box-shadow: 5px 5px 10px 1px rgba(0,0,0,0.1)
    background-color: "=props.bgcolor ? props.bgcolor : ''"
    height: 120px
    margin-left: 5px
    margin-right: 5px
slots:
  content:
    - component: f7-block
      config:
        style:
          position: absolute
          top: -5px
          left: 40px
          flex-direction: row
          display: flex
      slots:
        default:
          - component: Label
            config:
              text: "=props.title ? props.title : ''"
              style:
                font-size: 12px
                margin-top: 0px
    - component: f7-block
      config:
        style:
          position: absolute
          top: 50px
          left: 10px
          flex-direction: row
      slots:
        default:
          - component: Label
            config:
              text: "=props.header ? props.header : ''"
              style:
                font-size: 17px
                font-weight: 600
                margin-left: 0px
                margin-top: 0px
    - component: oh-toggle
      config:
        item: =props.item_schalter
        style:
          position: absolute
          top: 15px
          right: 10px
    - component: oh-image
      config:
        url: ='/static/icons/' + props.iconimage + '.png'
        style:
          position: absolute
          left: 10px
          top: 10px
          height: 25px
          opacity: 0.7
        visible: "=props.iconimage ? true : false"
    - component: Label
      config:
        text: "=props.title2 ? props.title2 : ''"
        style:
          position: absolute
          font-size: 12px
          margin-top: 50px
          left: 40px
    - component: f7-block
      config:
        style:
          position: absolute
          top: 105px
          left: 10px
          flex-direction: row
      slots:
        default:
          - component: Label
            config:
              text: "=props.header2 ? props.header2 : ''"
              style:
                font-size: 17px
                font-weight: 600
                margin-left: 0px
                margin-top: 0px
    - component: oh-toggle
      config:
        item: =props.item_schalter2
        style:
          position: absolute
          top: 70px
          right: 10px
    - component: oh-image
      config:
        url: ='/static/icons/' + props.iconimage2 + '.png'
        style:
          position: absolute
          left: 10px
          top: 65px
          height: 25px
          opacity: 0.7
        visible: "=props.iconimage2 ? true : false"

Please let me know if you have questions or problems with the widgets also if and how they work in your context.
I have corrected the formatting of the YAML code - sorry … I learn new things every day … I hope the YAML code is usable now

with OH3.0 I used the following code within the widget to display a icon from folder /etc/openhab/html/icons

    - component: oh-image
      config:
        url: ='static/icons/' + props.iconimage + '.png'

a slash was missing at the beginning of the url. OH3.1 does no longer tolerate that. The relative url has to start with slash

    - component: oh-image
      config:
        url: ='/static/icons/' + props.iconimage + '.png'

If you use my posted widgets you have to adjust the YAML code of these widgets whenever “oh-image” is used. Sorry! I have corrected the code

19 Likes
85

@BG56 Please use do not use Quotes for code, but Preformatted text. Thank you.

1 Like
86

It will be much more useful to readers of the forum if you use code fences rather than quotes for your YAML code. Code fences will preserve the indentations and in YAML indentations have meaning.

```
code goes here
```
2 Likes
87

Thank you @rlkoshak for your advice … I have corrected the YAML code

1 Like
88

Sorry @Badmojo and thank you for your advice - I have corrected the YAML code

1 Like
89

Hi, could you correct the code for Cell_Shutter_Card_1A as it is the same as Cell_Shutter_Card_1 at the moment? Thank you.
P.S.: Is it possible to replace the default widgets of OH3 with self made widgets to change 'em all at once e.g. for all your hue color lights?

P.P.S.: Nice Widgets :slight_smile:

90

Sorry! I have the YAML coede for Cell_Shutter_Card_1A corrected

If you use the same widget parameters you can easily replace widgets within pages by editing the widget name within the code of the page

91

Hi,

Thnx for the correction. Your replace idea works in pages. But I collect items in groups, and list the groups in a pop up in the UI. Is there a way to change the default list widget for all the items at once, and not changing the standard list widget for every item of the group?

Kind regards

Daniel

image
image2732×2048 238 KB

92

The only way to do this is to create a custom widget under Developer Tools. Then you need to apply that custom widget to each Item as Item Metadata. Later, if you change the custom widget it will apply the changes to all of the Items that use that widget.

In your case you need to change the default list widget. See Example Custom List Widgets for further discussion and OH 3 Tips and Tricks and some ways you could apply the metadata to the Items through the REST API more efficiently than through clicking through the UI. Though, once you’ve created your custom widget, it’s usually just a couple clicks to apply it to an Item.

93

I have a compact 3-day weather forecast Cell widget which I would like to open a detailed 6-day extended weather forecast widget.

How should I configure the 3-day forecast widget to display the 6-day forecast widget when tapped / clicked?

94

Ok,

thanks for the reply. But so the answer is “no”…

95

Hey Bernhard @BG56! Thank you for sharing your solution! Looks very interesting with the badges inside the bulb icons. :ok_hand:

Will definitely give it a try in my widgets :+1:

96

I have the same issue while using Grid Layout.
Any solution for this problem?

97

No, unfortunately not yet, the grid layout seems to display the widgets differently.

98

@BG56 Great widgets! Thanks for sharing! Have you included the YAML for the “Luftungsprogramm auswahlen” widget in one of your posts? I don’t think I can see it though I might have missed it.

99

I haven’t shared the widget for “Lüftungsprogramm auswählen”. I’ll share it when I’m back from vacations in about a week.

1 Like
100

For @higgers and others who are interested in the YAML for “Lüftungsprogramm auswählen”
image
I designed a widget with four buttons with which you can select one of four options (the text of the buttons are parameters of the widget)

uid: Cell_Button_4
props:
  parameters:
    - label: Header
      name: text_header
      required: false
      type: TEXT
    - description: icon name without ".png", located in static/icons/ folder
      label: Icon
      name: iconimage
      required: false
      type: TEXT
    - label: Button 1
      name: Button1
      required: false
      type: TEXT
    - label: Button 2
      name: Button2
      required: false
      type: TEXT
    - label: Button 3
      name: Button3
      required: false
      type: TEXT
    - label: Button 4
      name: Button4
      required: false
      type: TEXT
    - context: item
      label: Item
      name: item
      required: false
      type: TEXT
    - label: Backgroundcolor
      name: bgcolor
      required: false
      type: TEXT
timestamp: Jul 13, 2021, 1:41:57 PM
component: f7-card
config:
  style:
    noShadow: false
    class:
      - padding: 0px
    border-radius: var(--f7-card-expandable-border-radius)
    box-shadow: 5px 5px 10px 1px rgba(0,0,0,0.1)
    background-color: '=(props.bgcolor) ? props.bgcolor : ""'
    height: 100px
    margin-left: 5px
    margin-right: 5px
slots:
  default:
    - component: Label
      config:
        text: '=(props.text_header) ? props.text_header : "Header"'
        style:
          padding-bottom: 0px
          padding-top: 10px
          margin-top: 0px
          margin-left: 50px
          font-size: 17px
          font-weight: 600
    - component: f7-card-content
      slots:
        default:
          - component: f7-segmented
            config:
              raised: true
              round: false
              strong: false
            slots:
              default:
                - component: oh-button
                  config:
                    text: '=(props.Button1) ? props.Button1 : "Option1"'
                    actionItem: =props.item
                    actionCommand: 1
                    action: command
                    active: "=(items[props.item].state === '1') ? true : false"
                - component: oh-button
                  config:
                    text: '=(props.Button2) ? props.Button2 : "Option2"'
                    actionItem: =(props.item)
                    actionCommand: 2
                    action: command
                    active: "=(items[props.item].state === '2') ? true : false"
                - component: oh-button
                  config:
                    text: '=(props.Button3) ? props.Button3 : "Option3"'
                    actionItem: =(props.item)
                    actionCommand: 3
                    action: command
                    active: "=(items[props.item].state === '3') ? true : false"
                - component: oh-button
                  config:
                    text: '=(props.Button4) ? props.Button4 : "Option4"'
                    actionItem: =(props.item)
                    actionCommand: 4
                    action: command
                    active: "=(items[props.item].state === '4') ? true : false"
    - component: oh-image
      config:
        url: ='/static/icons/' + props.iconimage + '.png'
        style:
          position: absolute
          left: 10px
          top: 10px
          height: 25px
          opacity: 0.7
        visible: "=props.iconimage ? true : false"

I use this widget to select the intensity of the ventilation in my house (low, normal, high, 30 minutes high). In my specific context option4 (button4) fall back to option2 after 30 minutes with the following rule:

triggers:
  - id: "1"
    configuration:
      itemName: Lueftungsprogramm
    type: core.ItemCommandTrigger
conditions: []
actions:
  - inputs: {}
    id: "2"
    configuration:
      type: application/vnd.openhab.dsl.rule
      script: >-
        if(receivedCommand == 1) {Lueftungsstufe.sendCommand(1)} // niedrige Lüftungsstufe - Nacht- / Abwesenheit-Lüftung

        if(receivedCommand == 2) {Lueftungsstufe.sendCommand(2)} // normale Lüftungsstufe - Tag-Lüftung

        if(receivedCommand == 3) {Lueftungsstufe.sendCommand(3)} // hohe Lüftungsstufe - Party-Lüftung 

        if(receivedCommand == 4) {                               // 30 Min hohe Lüftungsstufe - Party-Kurz-Lüftung
            Lueftungsstufe.sendCommand(3) 
            createTimer(now.plusMinutes(30)) [|
        	    	Lueftungsprogramm.sendCommand(2)
        	    ]
        }
    type: script.ScriptAction

with OH3.0 I used the following code within the widget to display a icon from folder /etc/openhab/html/icons

    - component: oh-image
      config:
        url: ='static/icons/' + props.iconimage + '.png'

a slash was missing at the start of the relative url. OH3.1 does no longer accept this. You have to start the relative url with slash.

    - component: oh-image
      config:
        url: ='/static/icons/' + props.iconimage + '.png'

If you use my posted widgets you have to adjust the YAML code of these widgets whenever “oh-image” is used. Ihave corrected the code in my posts

2 Likes
101

Hello,
@Integer
thank you for sharing your widgets, I love the overlay.

unfortunately, I got a tricky error with the temperature widget.
I can’t explain it to me.
The Error is, that the Humidity is randomly shown in the widget → the item works correctly and fine → I build the same item into the overview page as you did.
At the overview page, the humidity is constantly shown → only in the widget its get a bit buggy

overview
overview1746×888 63 KB

overview2
overview21007×694 42 KB

On the screenshots, u can see, that the overview page is displaying correctly while the widget is randomly shown the percentage → in this case it’s showing no humidity…
Maybe u got a hint for me on how to solve this problem ?

102

Hey Christian! I am honored that you are using my widgets :slight_smile:

Unfortunately, I’m having the same problem as you right now after upgrading to 3.1.

Strange for me is that, like you, it only affects the humidity. I suspect that this is somehow related to the item type “Number:Dimensionless”. If I change the Item-Type to “Number” then it works again.
"State Description" → “Pattern”: %.0f %% I already had in Number:Dimensionless, I left it like that in Number type.

Both widgets (Card_room and Cell_Temp_Card) uses the “displayState” property of the item. Maybe anyone can explain, why Number:Dimensionless is not working with Pattern %.0f %%?

Cell_Temp_Card_1

=items[props.humidity_item].displayState

Card_room_12

=items[props.humidity].displayState
103

Have no problems with humidity display, using

text: =items[props.humidity_item].state

Item defined like this:

  "state": "34.02 %",
  "stateDescription": {
    "pattern": "%.1f %%",
    "readOnly": true,
    "options": []
  },
  "editable": true,
  "type": "Number:Dimensionless",
  "name": "WallmountFamilyRoom_Humidity",
  "label": "Влажность",
  "category": "humidity",
  "tags": [
    "Measurement",
    "Humidity"
  ],