[OH3] Main UI - New „main_widget“ - development and testing [WIP]

Introduction

Hi! This widget page is a new project based on the idea to have a new widget for OH3, with a new user-friendly layout to allow control of most of the items detected in semantic model. This will be achieved by a collection of several widgets (e.g. for lights, rollershutters, climate, weather, etc.) installable from the marketplace.
For each “Floors” menu there will be “Rooms” sub-menu to manage and control each single device.
Actually the project is on alpha stage and we all know that it is a long hard way from the idea to the final result, with lots of coding and solving issues, but day by day we’re doing our best to reach that finish line.
So stay tuned on this spicy topic, and any help or suggestion are always welcome.
In the end, this project shall also start a documentation about how several functions have been realized, to be a starting or learning point for others.

Design Drafts

image

image

Prerequisits for use

A properly set semantic model based on a floors / rooms / equipment structure is essential. As the semantic model knows more than just the types floor or room (e.g. attic, groundfloor or livingroom, kichen), all floors need to be additionally tagged as floor and all rooms need to be tagged with the additional tag for the floor group item (e.g. gGroundFloor).
Please note, that you can only have one equipment (e.g. Lightswitch) in an equipment group, otherwise it will break the widget. To group more than one, please use non semantic groups, which then can also have the count option.
More to follow later.
Example pictures will follow

The Main Widget [OH3] Main UI - main_widget - part 1 - The main_widget

Sub Widgets

The Weather Card [OH3] Main UI - main_widget - part 2 - The Weather Card

The Light Card [OH3] Main UI - main_widget - part 3 - The Light Card

The Rollershutter Card [OH3] Main UI - main_widget - part 4 - The Rollershutter Card

The Scenes Card [OH3] Main UI - main_widget - Part 5 - The Scenes Card

The Security Card [OH3] Main UI - main_widget - Part 6 - The Security Card

12 Likes

Hello Sir, Hello Community. Many thanks for that beautiful widgets .
Having zero experience with coding i’m wondering if there is a volunteer to create a new widget based on Temp Card you have create with some additions. Im uploading my design for a quick review. Any thoughts is welcomed! Am a poor Mac User who loves to design and having zero talent in coding!

Thank you for your time reading this

6 Likes

(part2)
New User, can’tt upload more than one at the same time

(part3)

Hi @Dimitris,

i am also not a coder but I love to try the things out.

I will have a look at this design this evening and post my efforts.

For now another question from me - because I am not a designer at all: Could you design a good looking “room widget” to build a dashboard for mobile phones?

Perhaps we could together manage the jobs :wink:

Absolutely! Can you provide me with a short brief ? What you want to control and which info must be included in the card? or send me an existing design for trying some alternatives and improvements. Thanks for your reply

first of all the promissed code:

uid: Cell_Temp_Card_1
tags: []
props:
  parameters:
    - description: Title
      label: Title
      name: title
      required: false
      type: TEXT
    - context: item
      label: Temp1
      name: temp_item
      required: false
      type: TEXT
    - context: item
      label: Temp2
      name: set_temp_item
      required: false
      type: TEXT
  parameterGroups: []
timestamp: Jul 26, 2022, 11:07:04 PM
component: f7-card
config:
  style:
    height: 120px
slots:
  content:
    - component: f7-card-content
      config:
        style:
          position: absolute
          top: -5px
          left: 16px
          flex-direction: row
          display: flex
      slots:
        default:
          - component: Label
            config:
              text: "=props.title ? props.title : ''"
              style:
                font-size: 15px
                margin-top: 0px
                font-weight: 150
    - component: f7-block
      config:
        style:
          position: absolute
          bottom: 0px
          left: 16px
          flex-direction: row
      slots:
        default:
          - component: Label
            config:
              text: "=items[props.temp_item].displayState ? items[props.temp_item].displayState : items[props.temp_item].state"
              style:
                position: absolute
                font-size: 22px
                font-weight: 300
                top: -50px
                left: 30px
                width: 100px
    - component: f7-card-content
      config:
        style:
          position: absolute
          bottom: -63px
          left: 12px
          flex-direction: row
          display: flex
      slots:
        default:
          - component: f7-icon
            config:
              visible: "=props.heating_item ? true : false"
              f7: flame
              size: 18
          - component: Label
            config:
              visible: "=props.heating_item ? true : false"
              text: =items[props.heating_item].state
              style:
                font-size: 12px
                margin-left: 5px
                margin-top: 0px
    - component: oh-button
      config:
        visible: true
        iconF7: arrow_up_circle
        iconSize: 35
        action: command
        actionItem: =props.set_temp_item
        actionCommand: =Number(items[props.set_temp_item].state.split(' ')[0]) + 0.5
        style:
          position: absolute
          top: 12px
          right: 10px
          height: 35px
          background: transparent
          color: "#7fc8c5"
    - component: oh-button
      config:
        visible: "=props.set_temp_item ? true : false"
        iconF7: arrow_up_circle
        iconSize: 35
        action: command
        actionItem: =props.set_temp_item
        actionCommand: =Number(items[props.set_temp_item].state.split(' ')[0]) + 0.5
        style:
          position: absolute
          top: 12px
          right: 60px
          height: 35px
          background: transparent
          color: "#545353"
    - component: oh-button
      config:
        visible: "=props.set_temp_item ? true : false"
        iconF7: arrow_down_circle
        iconSize: 35
        action: command
        actionItem: =props.set_temp_item
        actionCommand: =Number(items[props.set_temp_item].state.split(' ')[0]) - 0.5
        style:
          position: absolute
          top: 74px
          right: 10px
          height: 35px
          background: transparent
          color: "#7fc8c5"
    - component: oh-button
      config:
        visible: "=props.set_temp_item ? true : false"
        iconF7: arrow_down_circle
        iconSize: 35
        action: command
        actionItem: =props.set_temp_item
        actionCommand: =Number(items[props.set_temp_item].state.split(' ')[0]) - 0.5
        style:
          position: absolute
          top: 74px
          right: 60px
          height: 35px
          background: transparent
          color: "#545353"
    - component: Label
      config:
        visible: "=props.set_temp_item ? true : false"
        text: =items[props.set_temp_item].state
        style:
          font-size: 12px
          position: absolute
          right: 15px
          top: 50px
    - component: Label
      config:
        text: =items[props.set_temp_item].state
        style:
          font-size: 12px
          position: absolute
          right: 65px
          top: 50px
    - component: f7-card-content
      config:
        style:
          position: absolute
          top: 15px
          left: -16px
          width: 80%
          height: 70px
      slots:
        default:
          - component: oh-trend
            config:
              trendItem: =props.temp_item
              trendGradient:
                - "#7fc8c5"
              style:
                position: absolute
                width: 100%
                height: 100%
                top: 0px
                left: 0px
                z-index: 1
    - component: f7-card-content
      config:
        style:
          background: "white"
          top: 100px
          width: 100%
          left: -16px
                
                
                
                
                
                
    - component: f7-card-content
      config:
        style:
          background: "#eaf7f5"
          top: 100px
          width: 100%
          left: -16px
      slots:
        default:
          - component: oh-toggle
            config: {}

          - component: f7-icon
            config:
              f7: snow
              size: 30
              style:
                position: absolute
                left: 420px
          - component: f7-icon
            config:
              f7: flame
              size: 30
              style:
                position: relative
                left: 420px
                font-weight: 100
          - component: f7-icon
            config:
              f7: radiowaves_left
              size: 30
              style:
                position: relative
                left: 440px
                margin-right: 5px

please try it and give me feedback - i will finish it then.

For the room widget:
my thoughts would be to see the light state, the actual temp, actual humidity the state of windows and roller shutters .

1 Like

WOW. It works and is beautiful - You are awesome!
Yes i have some feedback :smiling_face:

Grey buttons selects the fan speed:

Grey Arrow up selects the upnext value, grey arrow down the previous value.
Values 0,1,2,3,4,5

(Auto =0, Sleep=1, Low=2, Med=3, High=4, Turbo=5)
Channels@AC:

Set mode buttons preferred to be aligned right and selectable- displays Active mode. MODE Icon changes color when selected and the inactive goes grey. (Channel Operation Mode)

Last but not least:
While I’m editing the widget, the layout seems ok.

When i run it, the bottom part of the widget is missing (goes under the next cell)

I’m sending you just a little bonus until to start design the layout i promised. It’s something that I’m working now. When it finishes, Tomorrow i will be hands on for our little project.

Alarm and rollers cell_overview.pdf (419.0 KB)
And the updated version for the AC widget:
AC Widget_02.pdf (154.0 KB)
In this version (i think its better…) only the icons changes color depending on selected mode (cool, heat, dry)

Again, THANK YOU. Pls give me some time!

Thanks for the feedback. I will have a look and try to fix the issues and add the features.

Please give me some time - I will do my best :wink:

Any particular reason why posting pdf documents instead of yaml code in code fences ?

Hello, Newbie here! I’m very sorry about this - i have just upload a design in pdf while typing plain text. Can you please advice me which is the proper way to do that? I understand that i have pressed accidentally the “code fence” icon prior to upload the pdf?

Sorry, did not see that the pdf files contain screenshots but no code. That‘s fine so far. When posting code, press the yaml code fence icon and enter/paste the code between the markers.

Thanks for your reply, very clear for me now. Don’t worry, I’m far away to post code. Apple user. Only designs and pictures!!

Hi there,

I made some efforts - hope to post the updated Code this evening / night

1 Like

Hi,

here comes the updated code. At this time, please have just a look if the Layout is correct and that the widget does not overlap with other widgets.

The features (step up and down, on/off) would be easy to add - but the layout drives me crazy…

I tried to different approaches - please have a look, which works for you:

Number One:

uid: ac_widget
tags: []
props:
  parameters:
    - description: Title
      label: Title
      name: title
      required: false
      type: TEXT
    - context: item
      label: Temp1
      name: temp_item
      required: false
      type: TEXT
timestamp: Jul 27, 2022, 10:12:49 PM
component: f7-card
config:
  stylesheet: >
    .card-header {
      #background: linear-gradient(to bottom, #6fa8dc 0%, #ffe74c 100%)
    }
     .card-footer {
      background: #eaf7f5

    }
slots:
  content:
    - component: f7-row
      slots:
        default:
          - component: f7-col
            config:
              style:
                width: 75%
            slots:
              default:
                - component: oh-trend
                - component: Label
                  config:
                    text: =props.title
                    style:
                      font-weight: 150
                - component: oh-trend
                  config:
                    trendItem: =props.temp_item
                    trendGradient:
                      - "#7fc8c5"
                - component: oh-button
                  config:
                    visible: true
                    iconF7: arrow_up_circle
                    iconSize: 35
                    action: command
                    actionItem: =props.set_temp_item
                    actionCommand: =Number(items[props.set_temp_item].state.split(' ')[0]) + 0.5
                    style:
                      position: absolute
                      top: 12px
                      right: 10px
                      background: transparent
                      color: "#7fc8c5"
                - component: oh-button
                  config:
                    visible: true
                    iconF7: arrow_down_circle
                    iconSize: 35
                    action: command
                    actionItem: =props.set_temp_item
                    actionCommand: =Number(items[props.set_temp_item].state.split(' ')[0]) + 0.5
                    style:
                      position: absolute
                      top: 120px
                      right: 10px
                      height: 35%
                      background: transparent
                      color: "#7fc8c5"
                - component: oh-button
                  config:
                    visible: true
                    iconF7: arrow_up_circle
                    iconSize: 35
                    action: command
                    actionItem: =props.set_temp_item
                    actionCommand: =Number(items[props.set_temp_item].state.split(' ')[0]) + 0.5
                    style:
                      position: absolute
                      top: 12px
                      right: 100px
                      height: 35px
                      background: transparent
                      color: "#7fc8c5"
                - component: oh-button
                  config:
                    visible: true
                    iconF7: arrow_down_circle
                    iconSize: 35
                    action: command
                    actionItem: =props.set_temp_item
                    actionCommand: =Number(items[props.set_temp_item].state.split(' ')[0]) + 0.5
                    style:
                      position: absolute
                      top: 120px
                      right: 100px
                      height: 35px
                      background: transparent
                      color: "#7fc8c5"
          - component: f7-col
            config: {}
            slots:
              default:
                - component: Label
                  config:
                    action: toggle
                    actionItem: Irrigation_Switch
                    actionCommand: '=(items["Irrigation_Switch"].state === "ON") ? "OFF" : "ON"'
                    text: =items[props.temp_item].state
                    style:
                      font-size: 34px
  footer:
    - component: oh-toggle
      config:
        item: =props.color
        color: teal
    - component: f7-icon
      config:
        f7: snow
        size: 30
    - component: f7-icon
      config:
        f7: flame
        size: 30
    - component: f7-icon
      config:
        f7: radiowaves_left
        size: 30

uid: test123
tags: []
props:
  parameters:
    - description: Title
      label: Title
      name: title
      required: false
      type: TEXT
    - context: item
      label: Temp1
      name: temp_item
      required: false
      type: TEXT
timestamp: Jul 28, 2022, 3:05:22 PM
component: f7-block
config: {}
slots:
  default:
    - component: f7-row
      config:
        style:
          background-color: white
      slots:
        default:
          - component: f7-col
            config:
              width: 85
              style:
                background-color: white
            slots:
              default:
                - component: oh-trend
                  config:
                    trenditem: =props.temp_item
                    trendGradient:
                      - "#7fc8c5"
                - component: oh-trend
                - component: Label
                  config:
                    text: =props.title
                    style:
                      font-weight: 150
                - component: oh-trend
                  config:
                    trendItem: =props.temp_item
                    trendGradient:
                      - "#7fc8c5"
          - component: f7-col
            config:
              width: 5
              style:
                background-color: white
            slots:
              default:
                - component: f7-icon
                  config:
                    f7: arrow_up_circle
                - component: Label
                  config:
                    text: 12
                - component: f7-icon
                  config:
                    f7: arrow_down_circle
          - component: f7-col
            config:
              width: 5
              class:
                - justify-content-center
                - align-items-center
              style:
                background-color: white
            slots:
              default:
                - component: f7-icon
                  config:
                    f7: arrow_up_circle
                - component: Label
                  config:
                    text: 34
                    style: 
                    
                - component: f7-icon
                  config:
                    f7: arrow_down_circle
    - component: f7-row
      slots:
        default:
          - component: f7-col
            config:
              style:
                background-color: "#eaf7f5"
            slots:
              default:
                - component: oh-toggle
                  config:
                    item: =props.title
                    color: teal
                - component: f7-icon
                  config:
                    f7: snow
                    size: 30
                - component: f7-icon
                  config:
                    f7: flame
                    size: 30
                - component: f7-icon
                  config:
                    f7: radiowaves_left
                    size: 30

and number two:

Overlap issue was corrected. But i think we have a long road ahead! :thinking:
In my perspective, try more to align with the layout:

If you think that you need graphic elements in a specific format (svg icons?) just letme know.

Re dashboard. Im thinking about navigation nightmare. I have design an early draft that the user can navigate to areas and equipment with a simple way ie

Find below an example for light equipment and the properties that the specific light has.
To minimize the information showed, when the equipment is off, cell is minimized and presents only the on-off button (and some badges in some cases). When you power on the light, shows all the available controls.

Clolumn 1: RGB light
Column 2: Light with temperature control
Column 3: Light with brightness control only
Column 4: Light with on- off control only

first row: Light is off
second row: Light is on showing the available controls.

Same logic for all equipment: In my opinion, when something is off you dont need all the controls. First turn it on (default:previews state), then control it.
Take a look how this can implemented further, ie to support Scenes

Screenshot 2022-07-31 at 11.56.46 AM

The goal is simplicity for better monitoring, navigation and control.

Again, there is a long road ahead.
Please let me know what you think.
Cheers

1 Like

Hi dimitris, all,

Compliments for your design!! Looking forward to you code/implementation of the full app. How far are you?

I’m using openhab for some time now and it is very stable and has lots of options through the marketplace. However, I’m missing a coherent UI design that is relatively easy to implement like mushrooms in Home Assistant. So far I managed to get made a couple of widgets and screens, see below.

I was wondering if it would be an idea to create a set widgets / design with group of people to have one nice designed look and feel? I’m not very well with code but can manage the there are some more experts involved.

What do you think?

2 Likes

This week i am on Holiday. Next week we will get further here.

Great Idea. I also love the mushroom widgets .

Could you Post Your Code - perhaps we can put all together.

My main Problem while coding Dimitris Widget is to get the colored footer. An oh-Block makes ist difficult to scale/make ist responsive.

Perhaps you can have a look at the code i posted. The First try seems to look best but is Not scalable or overlaps other Widgets…

Thanks for you quick reaction. I have not read properly back the threat I think, thank you for the programming;) and Dimitris for the design.

Maybe we should start a separate topic where we can work to complete the design/code and then slowly start releasing it here and in the marketplace?

What do you think? Any other coders/designers willing to contribute?

1 Like