OH3 layout for locations & equipment tab

Setup, Configuration and Use Items & Sitemaps
1

Hello openHAB community,

I am running OH3.1 on a synology docker and i try to design it nicely for smartphone use (in the first place). To do that i clicked on “PAGES” → “Home Page” → and switched to tab “code”.
I have searched the web and found not many but some attempts to design that area. But none worked for me. Maybe you can assist?

So I am talking about this smartphone viewport:

Screenshot 2021-10-23 174158
Screenshot 2021-10-23 174158398×671 34.5 KB

The goal is to have all elements have the width and height, and maybe style them with some CSS arguments (background images etc.). Therefore i tried:

config:
  label: Home Page
  hiddenModelTabs:
    - properties
locations:
  - component: oh-locations-tab
    config: {}
    slots:
      Buero:
        - component: oh-location-card
          config:
            backgroundImage: http://192.168.XX.XXX:8080/static/cardbackground_BueroEG.jpg
            invertText: true
      Haus:
        - component: oh-location-card
          config: {}
      Garage:
        - component: oh-location-card
          config:
            invertText: true
          slots:
            glance:
              - component: f7-block
                config:
                  style:
                    position: absolute
                    left: 0px
                    top: 15px
                    width: 50%
                    height: 100px
                    padding-top: 0px
                    margin-top: 0px
                    background-image: url(https://www.flaticon.com/svg/static/icons/svg/3939/3939300.svg)
                    background-size: contain
                    background-repeat: no-repeat
                    background-position: center
                    opacity: 70%

Whats wrong here?

2

Is someone specialist in this layout and design thing?

3

Even very trivial settings do not work. Please see card “Garten” here:

Garten:
        - component: oh-location-card
          config:
            style:
              width: 50%
              height: 100px
              background: red

Screenshot 2021-10-30 111515
Screenshot 2021-10-30 111515398×736 41 KB

4

The default cards in the overview tabs just don’t have a lot of capability for modifications. They are much less modifiable than custom widgets. They were intended to be simplistic and standardized. It is possible that you could enact some of these modifications using the page stylesheet property (a quick forum search should get you several examples these days) and assigning individual cards their own classes, but even then you’ll have far less flexibility than you would if you just created your own widgets from scratch.

5

Hello JustinG,

okay that’s somehow bad news.

  • I am right that widgets can only be used in the “Overview” (Übersicht) tab of WebUI ?
    If yes the locations and devices tab can’t be really styled in a way, because there i can not use custom widgets

  • Is there a chance to inject custom CSS code (or a custom style.css) once the HTML output is genereted for WebUI?

6

For that default entry point, yes, widgets can only be added to the Overview tab. However, you can create full pages populated with any and all custom widgets you wish and link to those from the overview page or the sidebar (so they are only one click away just like the equipment etc tabs).

Yes, see my comment above about looking for the stylesheet property. This is a way for you to add custom css styling to entire pages within the UI.

7

The forum search for “stylesheet property” only gave me one reasonable link: New Stylesheet property where it is about widgets again.
I did not find help for injecting CSS into “locations & equipment” tab.

Maybe i will give custom pages + custom widgets a try if it only was quicker to realise/code for beginners