OH3 - editing model information via text files

Setup, Configuration and Use Items & Sitemaps
18

Thanks everyone. :blush:

This is part of the new features introduced in Milestone 4: openHAB 3.0 Milestone 4 discussion - #3 by ysc

You can edit the home page and reorganize your cards as you like, even put them in sections. Look for the pencil icon in the corner, the little icons come automatically if you build your model correctly. But you can also be creative and change the backgrounds or even what’s displayed entirely.

  - component: oh-locations-tab
    config:
      cardOrder:
        - gSalon
        - gCuisine
        - gBureau
        - gCouloir
        - gChambre
        - gSDB
        - gWC
    slots:
      gChambre:
        - component: oh-location-card
          config:
            backgroundColor: teal
      gWC:
        - component: oh-location-card
          config:
            backgroundColor: deeppurple
      gSalon:
        - component: oh-location-card
          config:
            disableBadges: false
            badges:
              - lights
              - windows
              - doors
              - presence
              - screens
              - projectors
              - speakers
              - temperature
              - humidity
              - luminance
            backgroundImageStyle:
              filter: brightness(60%)
            backgroundImage: https://lh3.googleusercontent.com/proxy/GDUDzqoqMydm99FKTD1z-8Z6Enh8TCUP2O22FalmU1NcO6uxANrEzC0ewfzkxr8f8US2Gh46Zf2pQE84tAOsB81zeSpnUdiTQ8bMUExzr4C5_pe_Ug1TOBLxTsHvfFvpfUhiGay09_KexQ
      gSDB:
        - component: oh-location-card
          config: {}
      gCuisine:
        - component: oh-location-card
          config:
            backgroundImage: https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/kitchen-decor-ideas-1580491833.jpg
            backgroundImageStyle:
              filter: brightness(60%)
      gBureau:
        - component: oh-location-card
          config:
            backgroundImage: https://cdn.arstechnica.net/wp-content/uploads/2020/09/Ars-WFH-Office-Setup-Vari-Standing-Desk-4.jpg
            backgroundImageStyle:
              filter: brightness(60%)
      gCouloir:
        - component: oh-location-card
          config:
            backgroundImageStyle:
              filter: brightness(60%)
            backgroundImage: https://www.interiorexteriorplan.com/wp-content/uploads/2010/03/house-interior-6-704x400.jpg

If you edit the YAML you can even put some CSS styles on the background image element (like here filter: brightness(60%) to make the text stand out more), that parameter is not exposed in the config sheet, you have to do in the YAML view. But it’s still easier than photoshopping the images :slight_smile: I found them on Google Images and couldn’t be bothered to save them locally for the screenshot.