[OH3] Main UI Examples

This is a link to open a popup from weather widget:

Weather popup #2 (extended)

image

1 Like

Awesome stuff @narf27 and @Mark_VG! I might just create a generic ‘button’ widget to pop-up my other widgets in a specific window format. For the time being until we can call a specific pop-up format from a cell off course :crazy_face:

Hi!
i tried your widget Cell_Weather_Actual_1
on your screenshot for mobile it looks like this:
image

on pc it looks just like that, but on mobile the line-height changes:

please ignore the display state for temp and the missing values - the screen should only show the gap between lines.
card is exactly the same as in your code (height: 150px) and on your example 3 lines would fit in the card. on my android phone the third line it outside the card… as i would like to add another row i would reeaaally like to change the line-height / gap between the lines. i tried with margin-bottom = 0px for the f7-chips but the space between lines (on phone) is still to big…

Hi!
i presume the group for lights is defined as Group:Number:SUM, right?
with “SUM” i’m not able to switch OFF all lights in the group with gLights.sendCommand(OFF) anymore.
Or is there another way to count the lights that are “ON” and where i will still be able to send commands through the group item?

I think you can just use 2 groups. One for cutting GroupLightStatus and the other for control GroupLightControl

1 Like

so the info on Items | openHAB is out of date?

Examples for derived states on Group Items when declared in the Item DSL:

Group:Number                Lights        "Active Lights [%d]"              // e.g. "2"
Group:Switch:OR(ON,OFF)     Lights        "Active Lights [%d]"              // e.g. ON and "2"
Group:Switch:AND(ON,OFF)    Lights        "Active Lights [%d]"              // e.g. ON and "2"

The first three examples above compute the number of active lights and store them as group state. However, the second group is of type switch and has an aggregation function of OR . This means that the state of the group will be ON as soon as any of the member lights are turned on.

no, the docs describe exactly what @opnhab7373 said. If you want the count of lights that are on and also to be able to command all the lights through the Group, you need two Groups, one with Number and the other with Switch as the type.

1 Like

Hey @Integer ,

I am absolutely stoked by the look of your Main UI. I’ll try to copy some of your widgets to customize them by my own needs. Very nice template!

By the way: Is anyone able to give me a hint how to configure the f7-components when developing new widgets. I tried very hard the last days, but the docs at Building Pages - Components & Widgets | openHAB and Component Reference | openHAB are not very meaningful in case of explaining how to use f7-components. It ist not easy to get the openHAB documentation and Framework7 Documentation together. I didn’t manage to find out, which config options and slot options are available for the different f7 components in openHAB. Is there any tutorial or additional documentation beside the mentioned openHAB sides available? Especially for developing openHAB widgets with f7 components?

Regards,
Boris

EDIT: Ok, I got it. Didn’t know that openHAB ist using svelte. The documentation at Block Svelte Component | Framework7 Svelte Documentation is easy to understand and all config options are quite clear.

I would like to share with you my widgets for the grid layout. The widgets are available in table version and in a special version for mobile screens optimized. The widgets are tested on iPad and iPhone.

Use it, or take them and modify them :slight_smile:


The source code can be found here:

Regards,

Andras

2 Likes

Your widgets for iphone and ipad looks good and i would like to use them.
Could you pls. share the YAML of the grip page you use to have a easy starting point for myself
Thanks in advance.

Hello guys! Finally i’ve made my widgets to show some useful info from my rooms!
first i wanna thank all people that post their widgets here in the forum so i’ve learnt many things and to put the right code in the right place (i hope!).
i would like to say that this widget is highly customizable and is studied to add those functions that are missing in openhab customization and are made easy to understand for beginners like me.

there is the possibility to add a big icon on top center, the description, and if you want, you can add 2 other items to display the state. in my case it show the number of lights turned on, and the status of rollershutter. all labels and icons can be colored by widget settings.
last, you can decide to add the wallpaper to the card and eventually a footer text. one last thing, i’ve added action when the widget is clicked.

This image is how the widget looks like from computer.

…and this is looks like from my iPhone X.

let me know what do you think of this job, i will appreciate. also i add the widget code to be checked and eventually cleaned and adjusted by who is better than me in coding.

thanks to all for feedback!

uid: Label-Card-Background-IconsV2
tags:
  - MadeByEvil
props:
  parameters:
    - description: Path of the background image
      label: Image path
      name: imagepath
      required: false
      type: TEXT
    - description: Icon name (without f7)
      label: Icon
      name: icon
      required: false
      type: TEXT
    - description: Icon color
      label: Icon color
      name: iconcolor
      required: false
      type: TEXT
    - description: Label of the card
      label: Label
      name: desc
      required: false
      type: TEXT
    - description: Label color for the title of the card
      label: Label color
      name: desccolor
      required: false
      type: TEXT
    - description: Description under the card
      label: Footer text
      name: defi
      required: false
      type: TEXT
    - context: item
      description: Extra item to show
      label: Item
      name: extra_item
      required: false
      type: TEXT
    - context: icon
      description: Icon of the extra item (visible only when extra item is defined)
      label: Extra item icon
      name: extra_item_icon
      required: false
      type: TEXT
    - context: item
      description: Another extra item to show
      label: Item
      name: extra_item_2
      required: false
      type: TEXT
    - context: icon
      description: Icon of the secondary extra item (visible only when extra item is defined)
      label: Secondary extra item icon
      name: extra_item_2_icon
      required: false
      type: TEXT
  parameterGroups:
    - name: widgetAction
      context: action
      label: Action
      description: Action to perform when the element is clicked
timestamp: Dec 4, 2021, 1:52:48 PM
component: f7-card
slots:
  default:
    - component: oh-link
      config:
        actionPropsParameterGroup: widgetAction
        color: white
        class:
          - no-padding
          - no-margin
        style:
          max-height: 192px
          width: 100%
          height: 100%
          position: absolute
          top: 0
          left: 0
          z-index: 98
    - component: f7-block
      config:
        style:
          min-height: 110px
          background: ='url(' + props.imagepath + ')'
          background-size: 100% 240%
          background-repeat: no-repeat
          display: flex
          flex-direction: column
          background-position: center
      slots:
        default:
          - component: f7-icon
            config:
              f7: =props.icon
              color: =props.iconcolor
              size: 28
              style:
                position: absolute
                width: 100%
                height: 100%
                top: 15%
                left: 0
          - component: oh-link
            config:
              action: navigate
              actionPage: ='page:' + props.targetPage
              style:
                position: absolute
                width: 100%
                height: 100%
                top: 0
                left: 0
          - component: Label
            config:
              text: =props.desc
              style:
                font-weight: 400
                color: =props.desccolor
                font-size: 18px
                text-align: center
                margin-top: 35px
                line-height: 50px
                overflow: hidden
          - component: f7-icon
            config:
              f7: =props.extra_item_icon
              size: 15
              color: =props.iconcolor
              visible: "=props.extra_item ? true : false"
              style:
                margin-left: -5px
                bottom: 5px
                position: absolute
          - component: Label
            config:
              visible: "=props.extra_item ? true : false"
              text: =items[props.extra_item].state
              style:
                color: =props.iconstextcolor
                font-size: 15px
                margin-left: 15px
                bottom: 1px
                position: absolute
          - component: f7-icon
            config:
              visible: "=props.extra_item_2 ? true : false"
              f7: =props.extra_item_2_icon
              size: 15
              color: =props.iconcolor
              style:
                margin-left: 40px
                bottom: 5px
                position: absolute
          - component: Label
            config:
              visible: "=props.extra_item_2 ? true : false"
              text: =items[props.extra_item_2].state
              style:
                color: =props.iconstextcolor
                font-size: 15px
                margin-left: 60px
                bottom: 1px
                position: absolute
    - component: f7-block
      config:
        min-height: 20px
    - component: Label
      config:
        text: =props.defi
        style:
          font-weight: 400
          color: grey
          font-size: 10px
          margin-left: 15px
          line-height: 20px
          overflow: hidden

Hi,
no problem.

here is the YAML Fiel for Tablet. The Mobile version is the same with the “gwm” instead of “gw” as prefix.

config:
  layoutType: fixed
  label: Overview - Tablet
  margin: 5
  sidebar: true
  order: "1"
  hideNavbar: true
  hideSidebarIcon: true
  colNum: 13
  screenWidth: 1024
  screenHeight: 768
  scale: false
blocks: []
masonry: null
grid:
  - component: oh-grid-item
    config:
      x: 0
      y: 2
      h: 3
      w: 3
    slots:
      default:
        - component: widget:gw_RoomWidget
          config:
            header: Nappali / TV
            lightState: ActuatorABB700D85E2FArbeitszimmer_ActuatorChannel
            roomTemperature: MeasuredTemperature
            roomSetTemperature: SetpointTemperature
            button_action: navigate
            button_actionPage: page:page_63122c2c9b
            button_actionModalConfig: {}
            backgroundImageUrl: /static/TV.jpg
            button_actionModal: page:page_63122c2c9b
            popupId: nappali
            showLowerPart: true
  - component: oh-grid-item
    config:
      x: 3
      y: 2
      h: 3
      w: 3
    slots:
      default:
        - component: widget:gw_RoomWidget
          config:
            header: Dolgozószoba
            lightState: ActuatorABB700D85E2FArbeitszimmer_ActuatorChannel
            roomTemperature: ThermostatABB700CF0FB0Arbeitszimmer_ThermostatMeasuredTemperature
            roomSetTemperature: ThermostatABB700CF0FB0Arbeitszimmer_SetpointTemperature
            button_action: navigate
            button_actionPage: page:page_ede1311420
            button_actionModalConfig: {}
            backgroundImageUrl: /static/arbeitszimmer.jpg
            button_actionModal: page:page_ede1311420
            colorCodeTopText_d: "#111111"
            popupId: dolgozo
            showLowerPart: true
  - component: oh-grid-item
    config:
      x: 6
      y: 2
      h: 3
      w: 3
    slots:
      default:
        - component: widget:gw_RoomWidget
          config:
            header: Hálószoba
            lightState: ActuatorABB700D85E31Schlafzimmer_ActuatorChannel
            roomTemperature: ThermostatABB700CFC324Schlafzimmer_ThermostatMeasuredTemperature
            roomSetTemperature: ThermostatABB700CFC324Schlafzimmer_SetpointTemperature
            button_action: navigate
            button_actionPage: page:page_3283a58fd5
            button_actionModalConfig: {}
            backgroundImageUrl: /static/bedroom.jpg
            button_actionModal: page:page_3283a58fd5
            popupId: haloszoba
            showLowerPart: true
  - component: oh-grid-item
    config:
      x: 9
      y: 2
      h: 3
      w: 3
    slots:
      default:
        - component: widget:gw_RoomWidget
          config:
            header: Konyha
            roomTemperature: ThermostatABB700D0FC10Kuche_ThermostatMeasuredTemperature
            roomSetTemperature: ThermostatABB700D0FC10Kuche_SetpointTemperature
            button_action: navigate
            button_actionModal: widget:widget_Room_LivingRoom
            button_actionModalConfig: {}
            popupId: konyha
            colorCodeTop_d: "#cccccc"
            colorCodeTopText_d: "#111111"
            button_actionPage: page:page_b0a767a8f1
            showLowerPart: true
  - component: oh-grid-item
    config:
      x: 9
      y: 5
      h: 3
      w: 3
    slots:
      default:
        - component: widget:gw_RoomWidget
          config:
            header: Fürdőszoba
            roomTemperature: ThermostatABB700CFF611Bad_ThermostatMeasuredTemperature
            roomSetTemperature: ThermostatABB700CFF611Bad_SetpointTemperature
            colorCodeText: "#111111"
            button_action: navigate
            button_actionPage: page:page_6b1965d8d4
            colorCodeTopText_d: "#111111"
            showLowerPart: true
  - component: oh-grid-item
    config:
      x: 0
      y: 5
      h: 3
      w: 3
    slots:
      default:
        - component: widget:gw_RoomWidget
          config:
            backgroundImageUrl: /static/Yamaha.png
            header: Multimedia
            button_action: navigate
            button_actionPage: page:page_676790417d
            button_actionModalConfig: {}
            button_actionModal: page:page_676790417d
            colorCodeText: "#111111"
            popupId: multimedia
            colorCodeTopText_d: "#111111"
  - component: oh-grid-item
    config:
      x: 0
      y: 0
      h: 2
      w: 2
    slots:
      default:
        - component: widget:gw_CompButton
          config:
            header: Hangulatvilágítás
            activeIcon: lightbulb_fill
            inactiveIcon: lightbulb
            itemForState: SwitchMoodlight_Livingroom
            button_action: toggle
            button_actionItem: SwitchMoodlight_Livingroom
            button_actionCommand: ON
            button_actionCommandAlt: OFF
            Title: Hangulatvilágítás
            SubTitle: Nappali
            switchItem: SwitchMoodlight_Livingroom
            uniqueID: Nappali-Hangulatvilágítás
  - component: oh-grid-item
    config:
      x: 2
      y: 0
      h: 2
      w: 2
    slots:
      default:
        - component: widget:gw_CompButton
          config:
            header: Mozi / Film
            activeIcon: film_fill
            inactiveIcon: film
            itemForState: MovieSwitch
            button_action: toggle
            button_actionItem: MovieSwitch
            button_actionCommand: ON
            button_actionCommandAlt: OFF
            Title: Mozi / Film
            switchItem: MovieSwitch
            uniqueID: MoziFilmMultimedia
            SubTitle: Multimedia
  - component: oh-grid-item
    config:
      x: 4
      y: 0
      h: 2
      w: 2
    slots:
      default:
        - component: widget:gw_CompButton
          config:
            header: Spotify
            activeIcon: speaker_3
            inactiveIcon: speaker
            itemForState: MusicSwitch
            button_action: toggle
            button_actionItem: MusicSwitch
            button_actionCommand: ON
            button_actionCommandAlt: OFF
            Title: Spotify
            switchItem: MusicSwitch
            SubTitle: Multimedia
            uniqueID: SpotifyMultimedia
  - component: oh-grid-item
    config:
      x: 6
      y: 0
      h: 2
      w: 6
    slots:
      default:
        - component: widget:gw_WeatherCard
          config:
            forecastHours: "12"
            forecastDays: "6"
            bigCard: false
            sunIndicator: true
            locationTitle: Rutesheim
            dateScheme: YYYY MMMM DD
            dateFormat: true
            wordingFeel: Hőérzet
            wordingForecastHours: Óránként
            wordingForecastDays: Napi
            wordingNow: Most
            wordingToday: Ma
            wordingSunrise: Napfelkelte
            wordingSunset: Naplemente
            wordingForecastPrecib: Csapadék
            itemPrefix: OneCallAPIweatherandforecast_
            itemPrefix2: Localweatherandforecast_
            widget_action: popup
            widget_actionModal: widget:weatherPopup
            widget_actionModalConfig:
              itemPrefix: OneCallAPIweatherandforecast_
              forecastHours: "12"
              forecastDays: "3"
              sunIndicator: true
              locationTitle: Rutesheim
  - component: oh-grid-item
    config:
      x: 3
      y: 5
      h: 2
      w: 2
    slots:
      default:
        - component: widget:gw_MultiroomAudio
          config:
            SubTitle: Multimedia
            Title: Multiroom Audio
            activeIcon: hifispeaker_fill
            inactiveIcon: hifispeaker
            uniqeid: MultiroomAudioTablet
            multiroomSwitch: MultiroomSwitch
            masterVolume: MusicastMaster_Volume
            satVolume: MusicastSatelite_1_Volume
  - component: oh-grid-item
    config:
      x: 12
      y: 0
      h: 10
      w: 1
    slots:
      default:
        - component: widget:gw_Sidebar
          config:
            buttonLight_action: navigate
            buttonLight_actionPage: page:page_aa6e67c319
            buttonHeating_action: navigate
            buttonHeating_actionPage: page:page_f6f2518fda
  - component: oh-grid-item
    config:
      x: 5
      y: 5
      h: 2
      w: 2
    slots:
      default:
        - component: widget:gw_CompButton
          config:
            Title: Karácsonyi világítás
            uniqueID: xmaslightlr
            activeIcon: lightbulb_fill
            inactiveIcon: lightbulb
            switchItem: Kaffeemaschiene_Switch
            itemForState: Kaffeemaschiene_Switch

This is my first attempt at creating a tablet interface for openhab3.

I’ve re-used some code available in this topic to create my own widgets and by searching a lot around the web. I also got a basic understanding of HTML/CSS which helped me a lot.
My 2 widgets are highly customizable in appearance and on/off statusses. Let me know what config you want me to put up here to help were I’m able to.

This screen is made up with 3 different widgets.

Top widget: Daystatus
It shows the outside temperature, time and cloud coverage according to the location.
It uses the FMI Weather binding to get its info.

Light switch (Dimmable)
The whole button is used to turn on/off lights. Only the up and down arrow don’t trigger the on/off switch but the dimmer with a 10% in or decrease.
When light is on the background changes from gray to the rainbow color

Light switch
The whole button is used to turn on/off lights.
When light is on the background changes from gray to the rainbow color

Enjoy!

Onac

Ey @Integer , great widgets you got there.

I’m trying to modify a little bit your “Cell_Weather_Actual_1” to add the Time the information was taken through the timestamp channel. I have setted up as a prop so I can post it later on if some people want to reuse it:

- context: item
    description: Item of Timestamp
    label: Timestamp of the weather
    name: item_timestamp
    required: false
    type: TEXT

And I set up a pattern for the timestamp so it shows the format that I want to use. But I’m running into a problem, if I link to the item directly everything works as planned

- component: Label
    config:
      text: =items.OneCallAPIweatherandforecast_Current_Time.displayState

imagen

But if I use the prop approach, then nothing shows up when I set the prop

- component: Label
    config:
      text: "=props.item_timestamp ? props.item_timestamp.displayState : '--:--'"

No PROP imagen
PROP imagen

Any idea why this could be happening?

Thanks!

Hey Luis!

Good Idea!

But use instead of:

"=props.item_timestamp ? props.item_timestamp.displayState : '--:--'"

this one:

"=props.item_timestamp ? items[props.item_timestamp].displayState : '--:--'"

let me know, if it works?

Can you share your code please

Hey Integer,

It (of course) worked. I’m still learning about YAML and how to create my own widgets.

So thanks for the tip!

This is how it is looking right now after some changes (specially since I do not own a weather station, I wanted to have it only integrated with OWM).

Hi Nikos7179,

Which code are you looking for?

Hi,
I am interesting to see ho you achieve all the layout of this page
for example this one Top widget: Daystatus

Ok, Here we go:

Widget: Daystatus

uid: Daystatus
tags: []
props:
  parameters:
    - description: What is the Location?
      label: Location
      name: location1
      required: false
      type: TEXT
    - description: Which temperature Icon?
      label: Temperature Icon (f7:thermometer)
      name: tempicon1
      required: false
      type: TEXT
    - context: item
      description: Temperature item to display?
      label: Temperature item
      name: itemTemp
      required: false
      type: TEXT
    - description: Which cloud coverage icon?
      label: Cloud coverage Icon (f7:cloud)
      name: cloudicon1
      required: false
    - context: item
      description: Cloud coverage item to display?
      label: Cloud coverage item
      name: itemCloud
      required: false
      type: TEXT
    - description: Cloud coverage text?
      label: Cloud Coverage text
      name: cloudtxt1
      required: false
      type: TEXT
    - description: Which Clock icon?
      label: Clock Icon (f7:clock)
      name: clockicon1
      required: false
      type: TEXT
  parameterGroups: []
timestamp: Dec 12, 2021, 1:28:10 PM
component: f7-card
config:
  expandable: false
  noShadow: false
  style:
    border-radius: 0px 0px 20px 20px
    padding: 0px 0px 0px 0px
    margin: 0px 0px 20px 0px
    box-shadow: none
    background: transparent
    border-bottom: 1px solid rgba(0,250,250,1)
    height: 90px
    display: flex
    flex-flow: row wrap
    justify-content: center
    align-items: center
    text-shadow: 0px 0px 3px black
    width: 100%
slots:
  default:
    - component: f7-block
      config:
        style:
          margin: 0px
          padding: 0px
          display: flex
          flex-flow: row
          justify-content: center
          align-items: center
          height: 35px
      slots:
        default:
          - component: f7-icon
            config:
              f7: =props.tempicon1
              size: 20
              style:
                margin: 0px 5px 0px 0px
                padding: 0px
                color: rgba(0,250,250,1)
    - component: f7-block
      config:
        style:
          margin: 0px 0px 0px 0px
          padding: 0px
          display: flex
          flex-flow: column
          justify-content: center
          align-items: center
      slots:
        default:
          - component: Label
            config:
              text: =(Number.parseFloat(items[props.itemTemp].state.split(" ")[0]) * 100 / 100).toFixed(1) + ' °c'
              style:
                color: white
                margin: 0px
                padding: 0px 5px 5px 4px
                font-weight: 400
                font-size: 20px
                line-height: 1
                border-bottom: 1px solid rgba(0,250,250,1)
          - component: Label
            config:
              text: =props.location1
              style:
                font-size: 12px
                align-self: start
                color: white
                padding: 5px 5px 0px 4px
    - component: f7-block
      config:
        style:
          margin: 0px 10px 0px 30px
          padding: 0px 30px 0px 30px
          display: flex
          flex-flow: column
          justify-content: center
          align-items: center
          border-left: 1px solid rgba(0,250,250,1)
          border-right: 1px solid rgba(0,250,250,1)
      slots:
        default:
          - component: f7-block
            config:
              style:
                margin: 0px 0px 0px 0px
                padding: 0px 0px 0px 0px
                display: flex
                flex-flow: row
                justify-content: center
                align-items: center
            slots:
              default:
                - component: f7-icon
                  config:
                    f7: clockicon1
                    size: 20
                    style:
                      margin: 0px 5px 0px 0px
                      padding: 0px
                      color: rgba(0,250,250,1)
                - component: oh-clock
                  config:
                    timeFormat: HH:mm
                    style:
                      color: white
                      font-size: 30px
                      font-weight: 100
    - component: f7-block
      config:
        style:
          margin: 0px 6px 0px 20px
          padding: 0px
          display: flex
          flex-flow: row
          justify-content: center
          align-items: center
          height: 35px
      slots:
        default:
          - component: f7-icon
            config:
              f7: =props.cloudicon1
              size: 20
              style:
                margin: 0px 5px 0px 0px
                padding: 0px
                color: rgba(0,250,250,1)
    - component: f7-block
      config:
        style:
          margin: 0px 0px 0px 0px
          padding: 0px
          display: flex
          flex-flow: column
          justify-content: center
          align-items: center
      slots:
        default:
          - component: Label
            config:
              text: =(items[props.itemCloud].state)
              style:
                color: white
                margin: 0px
                padding: 0px 5px 5px 4px
                font-weight: 400
                font-size: 20px
                line-height: 1
                border-bottom: 1px solid rgba(0,250,250,1)
          - component: Label
            config:
              text: =props.cloudtxt1
              style:
                font-size: 12px
                align-self: start
                padding: 5px 5px 0px 4px

Day status widget has been put in a page in a column at a full 100% width
If you have any questions, let me know.