Configuration of label-cards

I’m not sure if it’s possible with the oh-label card or without very much effort, but I’d like to

  • Use the space better, so there’s more for the graph-line. Thus I’d like a descriptive text INSIDE the object, not above as a separate title.
  • Is there a setting to change the color of the line, e.g. to black?
    image
component: oh-label-card
config:
  trendItem: NetatmoEsszimmer_Temperatur
  action: analyzer
  actionAnalyzerItems:
    - NetatmoEsszimmer_Temperatur
  item: NetatmoEsszimmer_Temperatur
  title: Temperatur Esszimmer
  stateAsHeader: true
  expandable: false
  icon: oh:temperature
  background: "linear-gradient(to bottom right, #33ccff 0%, #ff99cc 100%)"
  outline: true
  trendStrokeWidth: 5px
slots: null

this might help for using the space better in case you want to continue to use a oh-label-card instead of switching to a f7-card

in case of adding e.g. a trend line to a f7-card, you have various styling options, not sure how this works with an oh-label-card, if you can overwrite it:

- component: oh-trend
  config:
    trendItem: =[props.itemTemp]
    style:
      --f7-theme-color-bg-color: transparent
      background: var(--f7-theme-color-bg-color)
      filter: opacity(20%)
      position: absolute
      width: 100%
      height: 100%
      top: 0
      left: 2
      z-index: 1

Thanks to the example of your first link I can change the color now.
But I’m not sure if I understand you correctly in respect to the text-information. Setting height (or width) to 100% doesn’t seem to help. The title is still separate and the trend line’s space is limited:

component: oh-label-card
config:
  trendItem: NetatmoEsszimmer_Temperatur
  trendGradient:
    - yellow
  action: analyzer
  actionAnalyzerItems:
    - NetatmoEsszimmer_Temperatur
  item: NetatmoEsszimmer_Temperatur
  title: Temperatur Esszimmer
  stateAsHeader: true
  expandable: false
  trendStrokeWidth: 5px
  icon: oh:temperature
  style:
    --f7-theme-color-bg-color: transparent
    background: transparent
    filter: opacity(100%)
    position: absolute
    width: 100%
    height: 100%
    top: 0
    left: 2
    z-index: 1
slots: null

those oh cards do have pre-defined header / footer / background slots

i understand from the solution i posted from the discussion that you need to put the trend item within the OH-label-card slot “background” and set this to 100%, but i have not tested it

the same counts for the headline. you need to place this into the the main card section, whatever this is called but i might be not the best person to ask here.

given you want to change the oh-label-card that much, i would recommend to switch to an f7-card and define everything yourself.

This is an f7-card e.g i am using

image

could you post the code of your f7-card, please? So I could adapt it to my needs

sorry i missed this post, Holger. Here is the YAML:

uid: widget_f7-card_Temp_V1
tags:
  - homekit-look
  - Soll Tag
  - in use
props:
  parameters:
    - description: Location?
      label: Prop 1
      name: prop1
      required: false
      type: TEXT
    - description: Thermostate icon f7
      label: f7 icon name
      name: icon1
      required: false
      type: TEXT
    - description: Humidity icon f7
      label: f7 icon name
      name: icon2
      required: false
      type: TEXT
    - context: item
      description: A Temperature item to display
      label: Item
      name: itemTemp
      required: false
      type: TEXT
    - context: item
      description: A Set-Temperature item to display
      label: Item
      name: itemTempSoll
      required: false
      type: TEXT
    - context: item
      description: An Humidity item to display
      label: Item
      name: itemHum
      required: false
      type: TEXT
    - context: item
      description: the valve state
      label: Item
      name: itemValve
      required: false
      type: TEXT
    - context: item
      description: Item for temperature channel
      label: Ambient temperature
      name: itemAmbientTemp
      required: false
      type: TEXT
    - context: item
      description: Item for outdoor temperature channel
      label: Outdoor temperature
      name: itemOutdoorTemp
      required: false
      type: TEXT
    - context: item
      description: Item for target temperature channel
      label: Target temperature
      name: itemTargetTemp
      required: true
      type: TEXT
    - context: item
      description: Item for operation mode channel
      label: Operation mode
      name: itemMode
      required: true
      type: TEXT
  parameterGroups: []
timestamp: Mar 19, 2021, 8:02:15 AM
component: f7-card
config:
  expandable: true
  noShadow: false
  class:
    - card-expandable-animate-width
  style:
    border-radius: var(--f7-card-expandable-border-radius)
    box-shadow: var(--f7-card-expandable-box-shadow)
    background-color: '=(Number.parseFloat(items[props.itemHum].state.split(" ")[0]) > 60) ? "white" : (Number.parseFloat(items[props.itemTemp].state.split(" ")[0]) > 22) ? "white" : "rgba(228,228,228,0.9)"'
    height: 120px
    max-height: 120px
    min-height: 120px
    min-width: 110px
    max-width: 400px
    --f7-card-expandable-tablet-border-radius: 2px
    --f7-card-expandable-margin-horizontal: 5px
    --f7-card-expandable-margin-vertical: 10px
    --webkit-user-select: none
    --moz-user-select: none
    --ms-user-select: none
    display: flex;
    flex-direction: column
    justify-content: space-between
slots:
  default:
    - component: f7-card-content
      config:
        style:
          width: 100%
      slots:
        default:
          - component: f7-block
            config:
              class:
                - no-padding
              style:
                margin: -4px
            slots:
              default:
                - component: f7-row
                  config:
                    class:
                      - justify-content-left
                  slots:
                    default:
                      - component: f7-icon
                        config:
                          f7: =props.icon1
                          size: 22
                          class:
                            - align-self-center
                          style:
                            margin-left: -6px
                            margin-top: 0px
                            color: '=(Number.parseFloat(items[props.itemHum].state.split(" ")[0]) > 60) ? "black" : (Number.parseFloat(items[props.itemTemp].state.split(" ")[0]) > 22) ? "black" : "rgb(0,0,0,0.5)"'
                      - component: Label
                        config:
                          text: =props.prop1
                          style:
                            font-size: 14px
                            font-weight: 500
                            margin-left: -4px
                            margin-top: 0px
                            color: '=(Number.parseFloat(items[props.itemHum].state.split(" ")[0]) > 60) ? "black" : (Number.parseFloat(items[props.itemTemp].state.split(" ")[0]) > 22) ? "black" : "rgb(0,0,0,0.5)"'
                - component: f7-row
                  config:
                    class:
                      - justify-content-left
                  slots:
                    default:
                      - component: Label
                        config:
                          text: =(Number.parseFloat(items[props.itemTemp].state.split(" ")[0]) * 100 / 100).toFixed(1) + '°'
                          style:
                            font-size: 40px
                            line-height: 1.1
                            font-weight: 350
                            margin-left: -2px
                            margin-top: 20px
                            color: '=(Number.parseFloat(items[props.itemHum].state.split(" ")[0]) > 60) ? "black" : (Number.parseFloat(items[props.itemTemp].state.split(" ")[0]) > 22) ? "red" : "black"'
                - component: f7-row
                  config:
                    class:
                      - justify-content-left
                  slots:
                    default:
                      - component: f7-icon
                        config:
                          f7: =props.icon2
                          visible: =props.itemHum !== undefined
                          size: 16
                          style:
                            top: 0px
                            left: 0px
                            color: '=(Number.parseFloat(items[props.itemHum].state.split(" ")[0]) > 60) ? "red" : "rgb(0,0,0,0.5)"'
                      - component: Label
                        config:
                          visible: =props.itemHum !== undefined
                          text: =(Number.parseFloat(items[props.itemHum].state.split(" ")[0]) * 100 / 100).toFixed(0) + '%'
                          style:
                            margin-top: 0px
                            left: 0px
                            font-size: 13px
                            font-weight: 500
                            color: '=(Number.parseFloat(items[props.itemHum].state.split(" ")[0]) > 60) ? "red" : "rgb(0,0,0,0.5)"'
                - component: f7-row
                  config:
                    class:
                      - justify-content-left
                  slots:
                    default:
                      - component: f7-icon
                        config:
                          f7: arrowshape_turn_up_right
                          size: 16
                          style:
                            opacitiy: 0.5
                            position: absolute
                            top: 0
                            right: 0
                            padding-top: 83px
                            padding-right: 0px
                            z-index: 999
                            color: rgb(0,0,0,0.5)
                      - component: f7-chip
                        config:
                          bgColor: '=(Number.parseFloat(items[props.itemValve].state.split(" ")[0]) > 15) ? "orange" : "green"'
                          text: =(Number.parseFloat(items[props.itemTempSoll].state.split(" ")[0]) * 100 / 100).toFixed(0)
                          style:
                            color: white
                            size: 20
                            z-index: 2
                            border-radius: 25px 25px 25px 25px
                            position: absolute
                            top: 8px
                            right: -3px
                            margin-top: -7px
                - component: oh-trend
                  config:
                    trendItem: =[props.itemTemp]
                    style:
                      --f7-theme-color-bg-color: transparent
                      background: var(--f7-theme-color-bg-color)
                      filter: opacity(30%)
                      position: absolute
                      width: 100%
                      height: 100%
                      top: 0
                      left: 2
                      z-index: 1
                - component: oh-link
                  config:
                    action: group
                    actionGroupPopupItem: =[props.itemGroup]
                    style:
                      position: absolute
                      z-index: 1
                      width: 100%
                      height: 100%
                      top: 0
                      left: 0
                    class:
                      - card-prevent-open
1 Like