OH3 : your UI

Hello,

Now the oh3 first milestone is out, I wanted to create a topic to share what you can done with the new UI builder.

Don’t hesitate to share yours, and your tips and tricks.
Here’s mine :


Cheers :smile:

2 Likes

Looks promising.

How do you make your icons visible?
I’m also creating my first OH3 UI, but when I enter an icon it stays black.

Hi, I did this to display the temperatures of the hot water for heating and domestic water.

oh3_ui_warm_water

2 Likes

The OH icon doesn’t work well. I need to open an issue on the openhab-webui project.
Now I use the f7 icon set, but they don’t have the dynamic color, I think we can do something directly in the yaml file.

1 Like

Ho great.
How did you do that? Can you share your widgets code?

I used a background and the f7 square icon and colored it accordingly.

This is the widget for the left one:

uid: boiler_small
tags: []
props:
  parameters:
    - description: Title
      label: Title
      name: title
      required: false
      type: TEXT
    - context: item
      description: Temperature sensor at top
      label: Temp Top
      name: item_top
      required: false
      type: TEXT
    - context: item
      description: Temperature sensor in the middle
      label: Temp Middle
      name: item_middle
      required: false
      type: TEXT
    - context: item
      description: Temperature sensor at bottom
      label: Temp Bottom
      name: item_bottom
      required: false
      type: TEXT
    - context: item
      description: Switch which shows if heating is on or off
      label: Heating on/off
      name: item_heat
      required: false
      type: TEXT
  parameterGroups: []
timestamp: Dec 12, 2020, 4:57:22 PM
component: f7-card
config:
  title: =props.title
slots:
  default:
    - component: f7-block
      config:
        style:
          min-height: 180px
          max-height: 180px
          max-width: 120px
          min-width: 120px
          background: url(/static/boiler.png)
          background-size: cover
          background-position: right bottom
          display: flex
          flex-direction: column
          align-items: start
      slots:
        default:
          - component: f7-row
            config:
              class:
                - display-flex
                - justify-content-space-between
                - align-content-stretch
                - align-items-center
            slots:
              default:
                - component: f7-col
                  config:
                    class:
                      - display-flex
                      - flex-direction-column
                      - align-items-left
                  slots:
                    default:
                      - component: f7-icon
                        config:
                          f7: square_fill
                          color: '=(items[props.item_top].state.split(".")[0] < 50) ? "blue" : ((items[props.item_top].state.split(".")[0] < 70) ? "orange" : "red")'
                          size: 60
                          style:
                            top: 10px
                            left: 18px
                            filter: opacity(50%)
                - component: f7-col
                  config:
                    class:
                      - display-flex
                      - flex-direction-column
                      - align-items-right
                  slots:
                    default:
                      - component: oh-link
                        config:
                          text: =items[props.item_top].state
                          color: '=(items[props.item_top].state.split(".")[0] < 50) ? "blue" : ((items[props.item_top].state.split(".")[0] < 70) ? "orange" : "red")'
                          action: analyzer
                          actionAnalyzerItems: =[props.item_top]
                          style:
                            top: 10px
                            left: 30px
                            font-size: 14px
                            font-weight: bold
          - component: f7-row
            config:
              class:
                - display-flex
                - justify-content-space-between
                - align-content-stretch
                - align-items-center
            slots:
              default:
                - component: f7-col
                  config:
                    class:
                      - display-flex
                      - flex-direction-column
                      - align-items-left
                  slots:
                    default:
                      - component: f7-icon
                        config:
                          f7: square_fill
                          color: '=(items[props.item_middle].state.split(".")[0] < 50) ? "blue" : ((items[props.item_middle].state.split(".")[0] < 70) ? "orange" : "red")'
                          size: 60
                          style:
                            top: 2px
                            left: 18px
                            filter: opacity(50%)
                - component: f7-col
                  config:
                    class:
                      - display-flex
                      - flex-direction-column
                      - align-items-right
                  slots:
                    default:
                      - component: oh-link
                        config:
                          text: =items[props.item_middle].state
                          color: '=(items[props.item_middle].state.split(".")[0] < 50) ? "blue" : ((items[props.item_middle].state.split(".")[0] < 70) ? "orange" : "red")'
                          action: analyzer
                          actionAnalyzerItems: =[props.item_middle]
                          style:
                            top: 2px
                            left: 30px
                            font-size: 14px
                            font-weight: bold
          - component: f7-row
            config:
              class:
                - display-flex
                - justify-content-space-between
                - align-content-stretch
                - align-items-center
            slots:
              default:
                - component: f7-col
                  config:
                    class:
                      - display-flex
                      - flex-direction-column
                      - align-items-left
                  slots:
                    default:
                      - component: f7-icon
                        config:
                          f7: square_fill
                          color: '=(items[props.item_bottom].state.split(".")[0] < 50) ? "blue" : ((items[props.item_bottom].state.split(".")[0] < 70) ? "orange" : "red")'
                          size: 60
                          style:
                            top: -6px
                            left: 18px
                            filter: opacity(50%)
                - component: f7-col
                  config:
                    class:
                      - display-flex
                      - flex-direction-column
                      - align-items-right
                  slots:
                    default:
                      - component: oh-link
                        config:
                          text: =items[props.item_bottom].state
                          color: '=(items[props.item_bottom].state.split(".")[0] < 50) ? "blue" : ((items[props.item_bottom].state.split(".")[0] < 70) ? "orange" : "red")'
                          action: analyzer
                          actionAnalyzerItems: =[props.item_bottom]
                          style:
                            top: -6px
                            left: 30px
                            font-size: 14px
                            font-weight: bold
          - component: f7-row
            slots:
              default:
                - component: f7-col
                  config:
                    class:
                      - display-flex
                      - flex-direction-column
                      - align-items-left
                  slots:
                    default:
                      - component: f7-icon
                        config:
                          f7: flame_fill
                          color: '=(items[props.item_heat].state === "ON") ? "red" : "gray"'
                          size: 20
                          style:
                            top: -25px
                            left: 5px

and this for the other:

uid: boiler_2p
tags: []
props:
  parameters:
    - description: Title
      label: Title
      name: title
      required: false
      type: TEXT
    - context: item
      description: Temperature sensor at top
      label: Temp Top
      name: item_top
      required: false
      type: TEXT
    - context: item
      description: Temperature sensor at bottom
      label: Temp Bottom
      name: item_bottom
      required: false
      type: TEXT
  parameterGroups: []
timestamp: Dec 12, 2020, 4:58:09 PM
component: f7-card
config:
  title: =props.title
slots:
  default:
    - component: f7-block
      config:
        style:
          min-height: 180px
          max-height: 180px
          max-width: 120px
          min-width: 120px
          background: url(/static/boiler.png)
          background-size: cover
          background-position: right bottom
          display: flex
          flex-direction: column
          align-items: start
      slots:
        default:
          - component: f7-row
            config:
              class:
                - display-flex
                - justify-content-space-between
                - align-content-stretch
                - align-items-center
            slots:
              default:
                - component: f7-col
                  config:
                    class:
                      - display-flex
                      - flex-direction-column
                      - align-items-left
                  slots:
                    default:
                      - component: f7-icon
                        config:
                          f7: rectangle_fill
                          color: '=(items[props.item_top].state.split(".")[0] < 40) ? "blue" : ((items[props.item_top].state.split(".")[0] < 50) ? "orange" : "red")'
                          size: 60
                          style:
                            top: 25px
                            left: 18px
                            transform: rotate(90deg)
                            filter: opacity(50%)
                - component: f7-col
                  config:
                    class:
                      - display-flex
                      - flex-direction-column
                      - align-items-right
                  slots:
                    default:
                      - component: oh-link
                        config:
                          text: =items[props.item_top].state
                          color: '=(items[props.item_top].state.split(".")[0] < 40) ? "blue" : ((items[props.item_top].state.split(".")[0] < 50) ? "orange" : "red")'
                          action: analyzer
                          actionAnalyzerItems: =[props.item_top]
                          style:
                            top: 25px
                            left: 30px
                            font-size: 14px
                            font-weight: bold
          - component: f7-row
            config:
              class:
                - display-flex
                - justify-content-space-between
                - align-content-stretch
                - align-items-center
            slots:
              default:
                - component: f7-col
                  config:
                    class:
                      - display-flex
                      - flex-direction-column
                      - align-items-left
                  slots:
                    default:
                      - component: f7-icon
                        config:
                          f7: rectangle_fill
                          color: '=(items[props.item_bottom].state.split(".")[0] < 40) ? "blue" : ((items[props.item_bottom].state.split(".")[0] < 50) ? "orange" : "red")'
                          size: 60
                          style:
                            top: 25px
                            left: 18px
                            transform: rotate(90deg)
                            filter: opacity(50%)
                - component: f7-col
                  config:
                    class:
                      - display-flex
                      - flex-direction-column
                      - align-items-right
                  slots:
                    default:
                      - component: oh-link
                        config:
                          text: =items[props.item_bottom].state
                          color: '=(items[props.item_bottom].state.split(".")[0] < 40) ? "blue" : ((items[props.item_bottom].state.split(".")[0] < 50) ? "orange" : "red")'
                          action: analyzer
                          actionAnalyzerItems: =[props.item_bottom]
                          style:
                            top: 25px
                            left: 30px
                            font-size: 14px
                            font-weight: bold

And the background:
boiler

6 Likes

This topic was automatically closed 41 days after the last reply. New replies are no longer allowed.