Temperature widget help

I need some help in a widget which I created with copy/paste and try and error :slight_smile:

I am struggling with the right button in the f7-card-content (marked in red). I want to have it more to the right side with a fix space like the left button… Unfortunately I could not manage it :frowning: can someone help me?

uid: Thermostat-Control
tags: []
props:
  parameters:
    - context: item
      description: Das Item für die gemessene Temperatur
      label: Ist Temperatur Item
      name: AsIsTempItem
      required: true
      type: TEXT
      groupName: temp
    - context: item
      description: Das Item mit dem die Solltemperatur eingestellt wird
      label: Soll Temperatur Item
      name: ToBeTempItem
      required: true
      type: TEXT
      groupName: temp
    - context: item
      description: Das Item das den Stellantrieb anzeigt
      label: Stellwert
      name: stellwert
      required: false
      type: TEXT
      groupName: temp
    - context: item
      label: Sperr item
      name: lock_item
      required: false
      type: TEXT
      groupName: lock
  parameterGroups:
    - name: temp
      label: Teperature settings
    - name: lock
      label: Lock settings
timestamp: Apr 7, 2021, 7:38:53 PM
component: f7-card
config:
  outline: false
  noBorder: false
  padding: true
  noShadow: false
  style:
    --f7-card-margin-horizontal: 5px
    --f7-card-content-padding-vertical: 0px
    --f7-card-content-padding-horizontal: 16px
    --f7-card-border-radius: 15px
    --f7-card-box-shadow: 0px 5px 10px rgba(0,0,0,0.15)
    --f7-card-header-font-size: 14px
    --f7-card-header-font-weight: 600
    background-color: rgba(228,228,228,0.6)
slots:
  default:
    - component: f7-card-header
      config:
        style:
          height: 90px
      slots:
        default:
          - component: oh-trend
            config:
              trendItem: =(props.AsIsTempItem)
              trendGradient:
                - gray
              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: f7-row
            config:
              class:
                - justify-content-left
            slots:
              default:
                - component: f7-icon
                  config:
                    f7: = "thermometer"
                    size: 30
                    class:
                      - align-self-center
                    style:
                      margin-left: -6px
                      margin-top: 0px
                      color: '=(Number.parseFloat(items[props.AsIsTempItem].state.split(" ")[0]) <= 19) ? "blue" : (Number.parseFloat(items[props.AsIsTempItem].state.split(" ")[0]) >= 23) ? "red" : "gray"'
                - component: Label
                  config:
                    text: = (items[props.AsIsTempItem].displayState) + "°"
                    style:
                      font-size: 35px
                      font-weight: 500
                      margin-left: 0px
                      margin-top: 0px
                      color: '=(Number.parseFloat(items[props.AsIsTempItem].state.split(" ")[0]) <=19) ? "blue" : (Number.parseFloat(items[props.AsIsTempItem].state.split(" ")[0]) >= 23) ? "red" : "gray"'
          - component: f7-row
            config:
              class:
                - justify-content-left
            slots:
              default:
                - component: f7-col
                  config:
                    class:
                      - display-flex
                      - align-items-center
                      - flex-direction-column
                  slots:
                    default:
                      - component: Label
                        config:
                          text: = (items[props.ToBeTempItem].displayState) + "°"
                          style:
                            font-size: 35px
                            font-weight: 500
                            color: '=(Number.parseFloat(items[props.ToBeTempItem].state.split(" ")[0]) <= 19) ? "blue" : (Number.parseFloat(items[props.ToBeTempItem].state.split(" ")[0]) >= 23) ? "red" : "gray"'
                      - component: f7-chip
                        config:
                          visible: "=(props.stellwert > 0) ? true : false"
                          iconF7: gear_alt
                          iconColor: '=(items[props.stellwert].state > "0") ? "red" : "white"'
                          text: = (items[props.stellwert].state) + "%"
    - component: f7-card-content
      config:
        style:
          height: 70px
      slots:
        default:
          - component: f7-row
            config:
              class:
                - padding-top
                - justify-content-center
              style:
                align-items: center
                width: inherit
                flex-wrap: nowrap
                justify-content: flex-start
                height: 40px
            slots:
              default:
                - component: f7-col
                  config:
                    width: "20"
                    small: "20"
                    medium: "20"
                    style:
                      align-items: left
                  slots:
                    default:
                      - component: f7-block
                        config:
                          visible: "=(props.lock_item === undefined) ? false : true"
                          class:
                            - display-flex
                            - justify-content-center
                            - align-items-center
                            - no-padding
                            - no-margin
                          style:
                            width: 50px
                            height: 50px
                            box-shadow: "inset 0px 1px 2px #eee"
                            border-radius: 50%
                        slots:
                          default:
                            - component: f7-block
                              config:
                                class:
                                  - no-margin
                                style:
                                  position: absolute
                                  width: 100%
                                  height: 100%
                                  border-radius: 50%
                                  transition: transform 0.1s
                                  box-shadow: '=items[props.lock_item].state == "ON" ? "0 0 20px #fff, 0px 0px 30px rgba(229,0,0,0.5)" : "none"'
                                  background: '=items[props.lock_item].state == "ON" ? "rgba(229, 0, 0, 0.5)" : "transparent"'
                                  transform: '=items[props.lock_item].state == "ON" ? "scale(1,1)" : "scale(0,0)"'
                            - component: oh-link
                              config:
                                iconOnly: true
                                iconF7: '=items[props.lock_item].state == "ON" ? "lock_fill" : "lock_open_fill"'
                                iconSize: 25
                                iconColor: '=items[props.lock_item].state == "ON" ? "rgba(229, 0, 0, 0.5)" : "gray"'
                                action: toggle
                                actionItem: =props.lock_item
                                actionCommand: '=items[props.lock_item].state == "ON" ? "OFF" : "ON"'
                                style:
                                  border: solid 2pt white
                                  border-radius: 50%
                                  background-color: "#f7f7f7"
                                  color: "#a7a7a7"
                                  width: calc(100% - 10px)
                                  height: calc(100% - 10px)
                                  box-shadow: 0px 3px 8px
                                  backdrop-filter: opacity(88%)
                                  z-index: 99 !important
                - component: f7-col
                  config:
                    width: "60"
                    small: "60"
                    medium: "60"
                    visible: =items[props.lock_item].state !== "ON"
                    style:
                      align-items: center
                  slots:
                    default:
                      - component: oh-slider
                        config:
                          item: =props.ToBeTempItem
                          vertical: false
                          scale: true
                          label: true
                          color: '=(items[props.ToBeTempItem].displayState <= "19") ? "blue" : (items[props.ToBeTempItem].displayState >= "23") ? "red" : "gray"'
                          max: 24
                          min: 17
                          step: 1
                          scaleSteps: 1
                          unit: " °C"
                          style:
                            width: 100%
                            margin: 2rem
                            --f7-range-bar-size: 13px
                            --f7-range-bar-border-radius: 10px
                            --f7-range-knob-size: 15px
                            --f7-range-knob-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3)
                            --f7-range-bar-bg-color: rgba(255,255,255,0.2)
                            --f7-range-bar-active-bg-color: linear-gradient(to right, blue, red)
                - component: f7-col
                  config:
                    width: "20"
                    small: "20"
                    medium: "20"
                    style:
                      align-items: right
                  slots:
                    default:
                      - component: f7-block
                        config:
                          class:
                            #- display-flex
                            #- justify-content-right
                            #- align-items-right
                            - no-padding
                            - no-margin
                          style:
                            width: 50px
                            height: 50px
                            box-shadow: "inset 0px 1px 2px #eee"
                            border-radius: 50%
                        slots:
                          default:
                            - component: oh-link
                              config:
                                iconOnly: true
                                iconF7: chart_bar_alt_fill
                                iconSize: 25
                                iconColor: gray
                                action: analyzer
                                actionAnalyzerItems: =[props.AsIsTempItem,props.ToBeTempItem]
                                style:
                                  border: solid 2pt white
                                  border-radius: 50%
                                  background-color: "#f7f7f7"
                                  color: "#a7a7a7"
                                  width: calc(100% - 10px)
                                  height: calc(100% - 10px)
                                  box-shadow: 0px 3px 8px
                                  backdrop-filter: opacity(88%)
                                  z-index: 99 !important

1 Like

it honestly really looks like the last row is a kind of copy / paste together somehow without clear structure. You should consider to clean this up. You seem to have a block within a block in the first column of your last row. You define blocks with all kind of parameters as if they were labels, icons or links, making the block dependent to show if an item has a state. I still cannot figure out the purpose of all those block parameters. This makes it hard to give you an advise how to re-position your icon/link propperly. Usually you can work with “absolute” parameter or define the row with a class like below. This works in your case if the widget you are using is always fixed in size, but you should think that the widget is probably used on multiple devices with multiple sizes.

- component: f7-row
  config:
    class:
      - float-right
  slots:
    default:
      - component: f7-icon
        config:
          f7: arrowshape_turn_up_right
          size: 16
          style:
            opacity: 0.5
            bottom: 18px
            right: -7px
            color: rgb(0,0,0,0.5)

or like here:

      - component: f7-icon
        config:
          material: park
          size: 60px
          color: green
          style:
            opacity: 40%
            position: absolute
            top: 120px
            right: 16px

Here is a good post with explanation how to use rows and columns to position items well:

the block within the block + the link is at the end a round buttons with shadow effect like here.

maybe you can help me first with this simple example… later I would take it over in my widget:

uid: Thermostat-Control-Test
tags: []
timestamp: Apr 12, 2021, 7:04:57 PM
component: f7-card
slots:
  default:
    - component: f7-card-content
      config:
        style:
          height: 70px
      slots:
        default:
          - component: f7-row
            slots:
              default:
                - component: f7-col
                  config:
                    width: "20"
                    small: "20"
                    medium: "20"
                    style:
                      background: gray
                  slots:
                    default:
                      - component: f7-icon
                        config:
                          f7: logo_apple
                - component: f7-col
                  config:
                    width: "60"
                    small: "60"
                    medium: "60"
                    style:
                      background: gray
                  slots:
                    default:
                      - component: f7-icon
                        config:
                          f7: logo_apple
                          color: red
                - component: f7-col
                  config:
                    width: "20"
                    small: "20"
                    medium: "20"
                    style:
                      background: gray
                    class:
                      - display-flex
                      - flex-direction-column
                      - align-items-right
                  slots:
                    default:
                      - component: f7-icon
                        config:
                          f7: logo_apple
                          color: green

how to move the red apply to the center and the green to the right? I do not want to do it with the absolute parameter…

here is a funny game to work on positioning with css:

The elements to use for your example are:

                  display: flex
                  justify-content: center  ///  flex end
uid: Thermostat-Control-Test
tags: []
timestamp: Apr 12, 2021, 7:04:57 PM
component: f7-card
slots:
  default:
    - component: f7-card-content
      config:
        style:
          height: 70px
      slots:
        default:
          - component: f7-row
            slots:
              default:
                - component: f7-col
                  config:
                    width: "20"
                    small: "20"
                    medium: "20"
                    style:
                      background: gray
                  slots:
                    default:
                      - component: f7-icon
                        config:
                          f7: logo_apple
                - component: f7-col
                  config:
                    width: "60"
                    small: "60"
                    medium: "60"
                    style:
                      background: gray
                      display: flex
                      justify-content: center
                  slots:
                    default:
                      - component: f7-icon
                        config:
                          f7: logo_apple
                          color: red
                - component: f7-col
                  config:
                    width: "20"
                    small: "20"
                    medium: "20"
                    style:
                      background: gray
                      display: flex
                      justify-content: flex-end
                  slots:
                    default:
                      - component: f7-icon
                        config:
                          f7: logo_apple
                          color: green
2 Likes