OMG! OH3 is amazing, because I (with all your help) achieved this!

The last time I coded was in COBOL (for those born after the 1960’s, it was a programming language, and we had punch cards, and no graphics because there were no screens!) So fast forward to 2020 and having stupidly offered to help family implement a large HA project in a new mega build, things could have gone terribly wrong!

So here I am, wanting to spread a few words of encouragement and experience to anyone else who might be about to dip their toes into OH3.

Firstly, many thanks to the whole community and particularly the developers who spend so much time creating, improving, sharing and supporting. You don’t know me, but I’m probably 2020’s biggest OH plagiarist; but as they say, it’s the best form of flattery!; and special thanks go out to Kai @Kai for his amazing work, @rlkoshak who seems to spend his entire life helping others, @matt1 with the IP Camera (I have 10 of those streaming none stop!) , @RGroll for the weather binding and all the documentation that I’ve seen building, and to Yannick @ysc for his work on the OH2 Matrix theme, which is where I started, and then OH3 came along.

So, in return, I hope these notes and experiences may give back and help someone else.

I had OH2 tested and was ready to go for a December go live; I loved the Matrix theme; I’d learnt some HTML and was trying to get my head around AngularJS building some kind of dynamic menu system that could support a property with many rooms and loads of things. I’d read throughout the forum that naming standards, and @rlkoshak ‘s emphasis on Design Patterns would stand me in good stead for the future; I must have redesigned, recreated and deleted all my items and groups so many times on discovering a new reason why one would be better than another - my final structure was to be proud of; and would even enable some random requirement like a Sonos speaker in a dog’s kennel to be catered for! (read on, that one came back to haunt me!)

Just as I had completed my OH2 masterpiece with a dynamic Matrix theme that would have allowed Keanu Reeves to jump from floor to room whilst operating roller shutters and flicking light switches using a single piece of parameter driven code; I saw something about what was about to come. OH3!

So here I am doing what I would never allow anyone else to do; testing out pre-release software and starting a whole new learning curve; and the results have been amazing. Phew!

One thing I’ve learnt is that the time I took planning the structure, the names, the descriptions, really made things very easy for moving to OH3, and I know that not everyone will have the flexibility of starting with a clean sheet like I did. However, OH3 also makes things easy in many ways too; whereas Groups always seemed to me to be a necessary ‘evil’ in OH2, required to ease programming; in OH3 they suddenly become visual.

Now I can have a Lightbulb (equipment) in the Living Room; and I can also have the Point (the Light) switch on the Living Room wall, and the Downstairs Wall and the magic ‘Indoors’ wall. In fact, I can have so many lights switches controlling one little lightbulb that it would make an electrician’s head spin wondering where they can get a 20-gang wall-switch from!

Where I’ve learnt to love ‘Groups’ is in structuring Equipment; and that because if you can simplify the presentation of equipment, then the Locations tab becomes your main navigation throughout the home.

Because OH3 allows you to easily analyse every single Point on all your equipment there is, or at least for me there was, a tendency to add every single Point for every single piece of Equipment that you have, to your model. Exciting as it maybe, there is possibly little future requirement for me to analyse the air flow from the exhaust of my brother-in-law’s heat exchanger and to compare it to the electric used on a Tuesday by a nephew with a PS4.

However, as with the dog Kennel, never say never! So, I found that having a top-level Inverter Equipment group, with the key Points part of the physical room Location, but all the individual Inverter Points in a sub Inverter-Equipment group; then OH3 automatically generated a very easy Room by Room navigation menu for me.

Just when you thought you couldn’t love groups anymore, there are Widgets, and they make groups sing! It all well and good having a nice tidy and automatically created menu, and navigation via the Locations tab; but ultimately that’s just going to take us to a group and then to a list. But Widgets are the icing on the cake; now rather than just ending up with a list of Sonos points, and with thanks to @buschif4 , our automatically generated Location menu now pops up into this amazing Sonos Multi Room controller

I’ve used the same technique for TV’s, Roller Shutter automation and security cameras.

It hasn’t all been easy a new house means new equipment and in this case lots of Roller shutters with RSI channels – no easy option of “Go to 27% OPEN” with IO drives. No! This required some serious programming hours and debugging 10 lines of code trying to understand why “Go to Middle”; Thread::sleep(waitDown); “Go UP”; and STOP didn’t work.

Today apparently computers work in milliseconds, my Thread::sleep(12) didn’t quite make the 2020 programmer awards; but I still feel I’ve won!

Thank you all again; I hope this helps someone; and made a few others laugh.

  • Platform information:
    • Hardware: VM 4core, 8Gb
    • OS: Ubuntu 20.04
    • Java Runtime Environment: 11
    • openHAB version: 3 RC1
  • Issue of the topic: please be detailed explaining your issue
  • Please post configurations (if applicable):
    • Items configuration related to the issue
    • Sitemap configuration related to the issue
    • Rules code related to the issue
    • Services configuration related to the issue
  • If logs where generated please post these here using code fences:
55 Likes

Thank you for the wonderful post. From what I can see what you have accomplished is pretty amazing and it looks fantastic!

It’s great to see someone have such success with OH 3. I too am starting over and I have to agree, OH 3 is quite amazing.

I’m going to move this to the Tutorials and Solutions category (I think we have a “stories” subcategory) where it might be easier for people to find.

And if you are willing to start any deep dive on anything, I know you will have a tag audience. I love seeing examples like this.

I need to go clean the house so I can have pictures on my room cards now. :laughing:

5 Likes

Oh man, looks like you you own quite some property. I wonder how many staff you have and how long it would take you to include the entire west wing and the underground levels 1-15 in your setup :wink:
Well done !

thanks, great post, I have been messing with OH2.5 off/on for a while trying to figure out if it will do what I want. It’s on a home on par with what you just worked on. I was coming to the conclusion that it was not up to the task. Sounds like that’s the track you were on till you did a reboot with OH3, correct? How responsive are the touchscreens? That was one of my biggest issues. I would enjoy learning more about what you did.

Hi Gary,

Thanks for the feedback.

I’m more than happy to help in any way I can; just fire questions over and I’ll try and respond as quickly as possible.

I started this to help out my brother-in-law, and whilst its very kind of @s0170071 to think it is my house :grinning: ; I’ve actually been stuck in Thailand since the COVID outbreak doing this remotely – so I’ve not being using any of the ‘local’ touch screens but OH3 works very well remotely on my iPad and phones.

It’s only 2 months since I jumped into the early copies of OH3 and I did it mainly because I saw a huge change in the look and feel, and underlaying code structure, and didn’t want the family to lose out on what was coming, knowing that it would be unfair of me to get them used to OH2 and then push them to OH3 when I get back to England. The only proviso was to make sure OH3 was stable for them; and I proved that to myself last month and they went live when they moved into their new place (palace! :grin: ) 10 days ago

Fire over your questions; its OpenHAB or a Thai beach and I have all the time in the world :wink:

I love Thailand, took my wife there on our honeymoon. I spent many years in Asia. Our house has a lot of Asian/Thai influence. Forgive my lack of knowledge/experience. I have an industrial computer background and not much OS (Lynix/Ubuntu/etc) experience, so I struggle with the installation and coding with OH. I set my test platform on a Rasberry Pi (Openhabian) which was easy but 2 of them have gone down for one reason or another, so I need to get away from those. I have a very stable Synology server that I tried to set up with OH2 but I was never able to find where it put the files. Paper UI was useful since I did not have to go into the files. I am hopeful that OH3 is even better about that. the biggest issue was the trouble I had with touchscreens and the phone app (HabPanel). The screen resolution/layout didn’t work across different devices, something always got cropped off or compressed and they were slow to respond. Your screens look great, what did you use?

HI!

I think we could be talking into a mirror; I too have an industrial computer background and zero modern computer language skills :rofl:

The setup is in a VM on a QNAP server, which is pretty similar to your Synology server. Are you looking to run OH3 within a VM on your Synology?

All the screens you’ve seen on my posts are automatically generated by OH3 based on the model of the house and the equipment in it – that’s been one of the best things about the move to OH3, it’s like the old OH2 basic UI just got transported in the 22nd century! I just added some real pictures, and borrowed some real pictures from google, for the room backgrounds; and voila!

I taught myself how to insert some YAML code - I basically copied the examples @ysc provided in one of the release notes and just changed the item names :joy: and now the location card then has temperature and humidity on it.

Likewise, the Equipment page is automatically generated from the model – so by placing each piece of equipment in a room, and declaring the type of equipment it is, OH3 generates the Equipment page, and likewise by categorising the important points of each piece of equipment the Properties page is again automatically generated. Of course I did need to download some more pretty background pictures :laughing:

Screenshot 2020-12-21 at 22.06.56

component: oh-property-card
config:
  title: Temperatures
  subtitle: "='Setpoint: ' + items.MT_AmbientSetpointPAD12.state"
  backgroundImage: /static/files/temperature.jpg
slots:
  glance:
    - component: oh-link
      config:
        text: "='Supply: ' + items.MT_ActualHotWaterSupply.state"
        iconF7: thermometer
        iconColor: red
        color: white
        style:
          font-size: 12px
          margin-top: 8px
    - component: oh-link
      config:
        text: "='Outside:  ' + items.MT_OutsideTemperature.state"
        iconF7: thermometer
        iconColor: blue
        color: white
        style:
          font-size: 12px
          margin-top: 3px

component: oh-equipment-card
config:
  backgroundImage: /static/files/battery.jpg
slots:
  header:
    - component: oh-gauge
      config:
        labelText: Powerwall
        item: TeslaPowerwall_BatteryState
        size: 250
        value: 60
        type: semicircle
        borderColor: white
        borderBgColor: rgba(255,255,255,0.4)
        valueTextColor: white
        labelTextColor: white
        borderWidth: 20
        style:
          margin-left: 30px

It’s really great how the entire front end is generated from the model, and how little work is required if the model has been planned.

Where I’ve spent a bit more brain power is in developing (that makes me sound like a young techie!) what I like to call my Schrödinger’s cat roller blinds. Basically, all the blinds have RSI motors which are stateless so absolutely no way of knowing if they are UP (alive) or DOWN (dead); so, it’s a case of recording their last position and hoping that the dog hasn’t sat on the remote and changed the position – a nice little brain teaser when you get into 11 blinds that they want to independently operate. Whilst my logic is a work in progress; it’s very easy to integrate it into the UI.

I’ve just created a rule (still slightly WIP) to manage the blind moves and then I created a simple widget the provides the option to manage three sliders attached to proxy dimmers, each representing a group of blinds.

import org.openhab.core.model.script.ScriptServiceUtil

rule "Single Blind Instruction"

when

    // A request to move a blind has probably come from the Room Location page
    // A single blind has being requested rather than a Group of blinds

    Member of BlindSingleMovement received update 

then

    val originalBlind  =  triggeringItem
    val blindBaseName  =  triggeringItem.name.split("_").get(0)
    logInfo("Somfy", "blindBaseName "+blindBaseName) 



    val somfyItem = ScriptServiceUtil.getItemRegistry.getItem(blindBaseName+"_Dimmer")
    logInfo("Somfy", "somfyItem "+somfyItem.name) 


    val calibrationItem = ScriptServiceUtil.getItemRegistry.getItem(blindBaseName+"_Calibration")
    logInfo("Somfy", "calibrationItem "+calibrationItem.name) 

    var int requiredPosition = (originalBlind.state as Number).intValue   // get % dimmer and convert to number
    var int currentPosition =  (somfyItem.state as Number).intValue         // get % dimmer and convert to number
    var int blindTime = (calibrationItem.state as Number).intValue  
    var int speedSlot = (blindTime * 10)  // eg 24 seconds top to bottom div 100 on slider * 1000 miliseconds

    
    logInfo("Somfy", "Required Postion" + requiredPosition + " Current Postion " + currentPosition)
    logInfo("Somfy", "Shutter " + triggeringItem.name + " Currently " + triggeringItem.state)  
    logInfo("Somfy", "Calibration Time " + blindTime + " Milliseconds per % movement " + speedSlot)

    // Blinds can only be moved in 10% blocks   

    // Request for Blind to fully OPEN

    if (( currentPosition < 100 ) && ( requiredPosition = 100 )) { 

        somfyItem.sendCommand(UP)
        postUpdate(somfyItem, requiredPosition)

        logInfo("Somfy", "Shutter " + triggeringItem.name + " going UP!")

    // Request for Blind to fully CLOSE
    
    } else if (( currentPosition > 0 ) && ( requiredPosition = 0 )) {

        somfyItem.sendCommand(DOWN)
        postUpdate(somfyItem, requiredPosition)

        logInfo("Somfy", "Shutter " + triggeringItem.name + " going DOWN!")

    } else  if (( currentPosition > 79 ) && ( requiredPosition < 21 )) {

        // then the Blind is NEARLY OPEN and it wants to go NEARLY CLOSED
 
        logInfo("Somfy", "Blind " + triggeringItem.name + " Current Position " + currentPosition + " Taget Position " + requiredPosition ) 
        logInfo("Somfy", "Using the opportunity to go DOWN via end point and resync") 

        // first go fully UP to resync
        var int dimmerMovement = ( 100 - currentPosition  ) * speedSlot
        somfyItem.sendCommand(UP)
        Thread::sleep(dimmerMovement)

        logInfo("Somfy", "Moving to Fully Up, and going to wait 1 second before coming back down to Target") 
        logInfo("Somfy", "Expecting the first journey to take me " + dimmerMovement)

        // wait 1 extra second
        Thread::sleep(2000)

        logInfo("Somfy", "I'm awake and i've headed back up a little as requested")

        dimmerMovement = ( 100 - requiredPosition  ) * speedSlot
        somfyItem.sendCommand(DOWN)
        Thread::sleep(dimmerMovement)
        somfyItem.sendCommand(STOP)

    } else if (( currentPosition < 21 ) && ( requiredPosition > 79 )) {
 
        logInfo("Somfy", "Blind " + triggeringItem.name + " Current Position " + currentPosition + " Taget Position " + requiredPosition ) 
        logInfo("Somfy", "Using the opportunity to go via end point and resync") 

        // first go fully DOWN
        var int dimmerMovement = ( currentPosition  ) * speedSlot
        somfyItem.sendCommand(DOWN)
        Thread::sleep(dimmerMovement)

        logInfo("Somfy", "Moving to Fully DOWN, and going to wait 1 second before coming back down to Target") 
        logInfo("Somfy", "Expecting the first journey to take me " + dimmerMovement)


        // wait 1 extra second
        Thread::sleep(2000)

        logInfo("Somfy", "I'm awake and i've headed down up a little as requested")

        dimmerMovement = ( requiredPosition  ) * speedSlot
        somfyItem.sendCommand(UP)
        Thread::sleep(dimmerMovement)
        somfyItem.sendCommand(STOP)

    } else if (requiredPosition > currentPosition) {

        var int dimmerMovement = ( requiredPosition - currentPosition ) * speedSlot
        logInfo("Somfy", "I'm a Blind called " + triggeringItem.name + " And I'm Currently here " + currentPosition + " and you want me here " + requiredPosition ) 

        somfyItem.sendCommand(UP)
        Thread::sleep(dimmerMovement)
        somfyItem.sendCommand(STOP)
        postUpdate(somfyItem, requiredPosition)
        
    } else {

        var int dimmerMovement = ( currentPosition - requiredPosition ) * speedSlot
        logInfo("Somfy", "I'm a Blind called " + triggeringItem.name + " And I'm Currently here " + currentPosition + " and you want me here " + requiredPosition ) 


        somfyItem.sendCommand(DOWN)
        Thread::sleep(dimmerMovement)
        somfyItem.sendCommand(STOP)
        postUpdate(somfyItem, requiredPosition)

    }               
    
end    



rule "Multiple Blind Group Move"

when

    // A request to move a blind has probably come from the Room Location page
    // A group blind has being requested rather than a Group of blinds

    Member of BlindMultipleMovement  received update 

then


    val originalBlind  =  triggeringItem
    val blindBaseName  =  triggeringItem.name.split("_").get(0)
    
    logInfo("Somfy", "Request for Multiple blind movement in Blind Group "+blindBaseName) 

    val requiredPosition = originalBlind.state.toString

    blindBaseName.sendCommand(requiredPosition)

end

When the slider is moved; the Rule is executed.

And to hook it into the UI. I just added the widget parameters to the default Standalone & List item for that piece of Equipment (Kitchen Blind) and the respective Point (KitchenBlind_Control) - again, so so super easy in OH3!

So now whenever they go to that Room on the OH3 app, and look to move a blind they get the Schrödinger’s cat widget pop up automatically.

I’m just finishing off the widget logic; but happy to post that later.

I can see why you chose Thailand for your honeymoon, its an amazing country!

4 Likes

I should hire you to build the configuration for the demo server :wink:

4 Likes

You would likely need to pay them more than 1000 times your volunteer pay. :rofl: :rofl:

Which would still be zero then :slight_smile:

5 Likes

Don’t think of it as plagiarism, we all contribute to opensource because we want you to use it and seeing pictures like this is a thank you. Love seeing the pictures of what you have achieved, keep them coming as I draw inspiration on how people layout and present the data.
If this is what you can do with the very first release of OH3, imagine what is coming in future releases!

1 Like

Very nice :+1:
Could you also post the code or a link for the oh-property-card widget?

Thanks Stefan

Hi Stefan,

Here is a copy of all the properties cards I’ve done

properties:
  - component: oh-properties-tab
config: {}
slots:
  Water:
    - component: oh-property-card
      config:
        backgroundImage: /static/files/water.jpg
  Light:
    - component: oh-property-card
      config:
        backgroundImage: /static/files/light.jpg
  Temperature:
    - component: oh-property-card
      config:
        title: Temperatures
        subtitle: "='Setpoint: ' + items.MT_AmbientSetpointPAD12.state"
        backgroundImage: /static/files/temperature.jpg
      slots:
        glance:
          - component: oh-link
            config:
              text: "='Supply: ' + items.MT_ActualHotWaterSupply.state"
              iconF7: thermometer
              iconColor: red
              color: white
              style:
                font-size: 12px
                margin-top: 8px
          - component: oh-link
            config:
              text: "='Outside:  ' + items.MT_OutsideTemperature.state"
              iconF7: thermometer
              iconColor: blue
              color: white
              style:
                font-size: 12px
                margin-top: 3px
  CO:
    - component: oh-property-card
      config:
        backgroundImage: /static/files/co2.jpg
        title: ='CO ' + items.LocalAirQuality_CO.state
      slots:
        glance:
          - component: oh-link
            config:
              text: "='Air Quality Index: ' + items.LocalAirQuality_AirQualityIndex.state"
              iconF7: staroflife
              iconColor: white
              color: white
              style:
                font-size: 12px
                margin-top: 8px
                font-weight: bold
          - component: oh-link
            config:
              text: "='Air Quality Today: ' + items.LocalAirQuality_AQIDescription.state"
              color: white
              style:
                font-size: 12px
                margin-top: 3px
                font-weight: bold
  Energy:
    - component: oh-property-card
      config:
        backgroundImage: /static/files/energy.jpg
      slots:
        header:
          - component: f7-block
            config:
              style:
                color: white
                display: flex
                flex-direction: column
                width: 320px
                padding: 0
                margin: 0
            slots:
              default:
                - component: f7-row
                  config:
                    style:
                      padding: 0
                      display: flex
                      margin: 0
                  slots:
                    default:
                      - component: Label
                        config:
                          text: Energy
                          style:
                            font-size: 24px
                      - component: oh-gauge
                        config:
                          labelText: Coverage (Yr)
                          item: SolarEdgeAggregateYear_SelfConsumptionCoverage
                          size: 175
                          value: 8
                          type: semicircle
                          borderColor: white
                          borderBgColor: rgba(255,255,255,0.4)
                          valueTextColor: white
                          labelTextColor: white
                          borderWidth: 8
                          style:
                            margin-left: auto
                - component: f7-row
                  config:
                    style:
                      padding: 0
                      justify-content: flex-start
                      margin: 0
                  slots:
                    default:
                      - component: Label
                        config:
                          text: Today's
                          style:
                            font-size: 14px
                - component: f7-row
                  config:
                    style:
                      padding: 0
                      justify-content: flex-start
                      margin: 0
                  slots:
                    default:
                      - component: Label
                        config:
                          text: ="Production " + items.SolarEdgeAggregateDay_Production.state
                          style:
                            font-size: 12px
  Humidity:
    - component: oh-property-card
      config:
        backgroundImage: /static/files/humidity.jpg
      slots:
        header:
          - component: oh-gauge
            config:
              labelText: Humidity (Avg)
              item: LocalAirQuality_Humidity
              size: 250
              value: 60
              type: semicircle
              borderColor: white
              borderBgColor: rgba(255,255,255,0.4)
              valueTextColor: white
              labelTextColor: white
              borderWidth: 15
              style:
                margin-left: 30px
  Illuminance:
    - component: oh-property-card
      config:
        backgroundImage: /static/files/illuminance.jpg
  Noise:
    - component: oh-property-card
      config:
        backgroundImage: /static/files/noise.jpg
  Opening:
    - component: oh-property-card
      config:
        backgroundImage: /static/files/opening.jpg
  Power:
    - component: oh-property-card
      config:
        backgroundImage: /static/files/power.jpg
      slots:
        header:
          - component: f7-block
            config:
              style:
                color: white
                display: flex
                flex-direction: column
                width: 320px
                margin: 0
            slots:
              default:
                - component: f7-row
                  config:
                    style:
                      padding: 0
                      justify-content: space-between
                      margin: 0
                  slots:
                    default:
                      - component: Label
                        config:
                          text: Power
                          style:
                            font-size: 30px
                      - component: oh-label
                        config:
                          item: TeslaPowerwall_BatteryState
                          style:
                            font-size: 30px
                      - component: oh-icon
                        config:
                          icon: ="battery-" + items.TeslaPowerwall_BatteryState.state
                          size: 30px
                - component: f7-row
                  config:
                    style:
                      justify-content: space-between
                  slots:
                    default:
                      - component: Label
                        config:
                          text: ="Battery " + items.TeslaPowerwall_InstantPowerBattery.state
                          style:
                            font-size: 14px
                      - component: Label
                        config:
                          text: ="Load " + items.TeslaPowerwall_InstantPowerLoad.state
                          style:
                            font-size: 14px
                      - component: Label
                        config:
                          text: ="Site " + items.TeslaPowerwall_InstantPowerSite.state
                          style:
                            font-size: 14px
                      - component: Label
                        config:
                          text: ="Solar " + items.TeslaPowerwall_InstantPowerSolar.state
                          style:
                            font-size: 14px
  Presence:
    - component: oh-property-card
      config:
        backgroundImage: /static/files/presence.jpg
      slots:
        glance:
          - component: oh-link
            config:
              text: ='Motion Detected ' + items.WottonVideoCam2811_MP4History.state
              iconF7: camera
              iconColor: white
              color: white
              style:
                font-size: 12px
                margin-top: 10px
  Pressure:
    - component: oh-property-card
      config:
        title: Pressure
        subtitle: "='Pressure: ' + items.localCurrentBarometricPressure.state"
        backgroundImage: /static/files/pressure.jpg
      slots:
        glance:
          - component: oh-link
            config:
              text: "='Tomorrow Forecast: ' + items.localDailyForecastTomorrowPressure.state"
              iconF7: gauge
              iconColor: white
              color: white
              style:
                font-size: 12px
                margin-top: 8px
  Rain:
    - component: oh-property-card
      config:
        title: Rain
        subtitle: "='Expected: ' + items.localCurrentRain.state"
        backgroundImage: /static/files/rain.jpg
      slots:
        glance:
          - component: oh-link
            config:
              text: "='Rain Tomorrow: ' + items.localDailyForecastTomorrowRain.state"
              iconF7: cloud_rain
              iconColor: white
              color: white
              style:
                font-size: 12px
                margin-top: 8px
  SoundVolume:
    - component: oh-property-card
      config:
        backgroundImage: /static/files/soundvolume.jpg
      slots:
        header:
          - component: f7-link
            config:
              text: Multiroom Audio Volume
              style:
                text-transform: uppercase
                font-size: 14px
                color: white
          - component: f7-block
            config:
              title: Multiroom Audio Volume
              style:
                color: white
                display: flex
                flex-direction: row
                width: 320px
                justify-content: space-around
            slots:
              default:
                - component: oh-knob
                  config:
                    item: SonosGym_Volume
                    size: 75
                    max: 110
                    primaryColor: white
                    secondaryColor: gray
                    textColor: white
                    class:
                      - card-prevent-open
                - component: oh-knob
                  config:
                    item: SonosOffice_Volume
                    size: 75
                    max: 50
                    primaryColor: white
                    secondaryColor: gray
                    textColor: white
                    class:
                      - card-prevent-open
                - component: oh-knob
                  config:
                    item: SonosSnug_Volume
                    size: 75
                    max: 30
                    primaryColor: white
                    secondaryColor: gray
                    textColor: white
                    class:
                      - card-prevent-open
  Timestamp:
    - component: oh-property-card
      config:
        backgroundImage: /static/files/timestamp.jpg
  Ultraviolet:
    - component: oh-property-card
      config:
        title: Ultraviolet
        subtitle: "='UV Index: ' + items.localTodayUVIndex.state"
        backgroundImage: /static/files/ultraviolet.jpg
      slots:
        glance:
          - component: oh-link
            config:
              text: "='UV Tomorrow: ' + items.localTomorrowForecastedUVIndex.state"
              iconF7: sun_max
              iconColor: yellow
              color: white
              style:
                font-size: 12px
                margin-top: 8px
  Wind:
    - component: oh-property-card
      config:
        title: Wind
        subtitle: "='Wind Speed: ' + items.localCurrentWindSpeed.state"
        backgroundImage: /static/files/wind.jpg
      slots:
        glance:
          - component: oh-link
            config:
              text: "='Wind Tomorrow: ' + items.localDailyForecastTomorrowWindSpeed.state"
              iconF7: wind
              iconColor: white
              color: white
              style:
                font-size: 12px
                margin-top: 8px
          - component: oh-link
            config:
              text: "='Wind Direction: ' +
                items.localDailyForecastTomorrowWindDirection.state"
              iconF7: wind
              iconColor: white
              color: white
              style:
                font-size: 12px
                margin-top: 3px
  Voltage:
    - component: oh-property-card
      config:
        backgroundImage: /static/files/voltage.jpg
        invertText: true
  Duration:
    - component: oh-property-card
      config:
        backgroundImage: /static/files/Duration.jpg
  Frequency:
    - component: oh-property-card
      config:
        backgroundImage: /static/files/Frequency.jpg
  Gas:
    - component: oh-property-card
      config:
        backgroundImage: /static/files/Gas.jpg
        title: Gas & Flow
  Level:
    - component: oh-property-card
      config:
        backgroundImage: /static/files/Level.jpg
1 Like

Thanks Andy,

but I have no widget definition for a oh-property-card or -tab.
Did you create a custom widget in developer tools?

Stefan

Hi Stefan,

No need to create a custom widget for the Properties, the oh-property-card is provided as standard when you click on the edit icon (top right) on the Properties tab of OH3.


It allows you to either utilise glance components in the slots or to utilise alternate oh- components. I used a combination of both.
Try clicking on the edit button, and then from the Design menu (it takes a second or two to appear)

Then click on the Properties tab; and you see the options for each
You can then configure each using the UI

Or switch from Design to Code and enter manually

Hope this helps :slight_smile:

6 Likes

Ok, found it. Thanks for your help. :slight_smile:

Great post Andy.
I also want to thank all the people who spend so much work in this project. I am truly amazed by the result. I’m not a computer wonder like most of you here but I did manage in OH2.5. Now I’m reading my way through all of the new docs and tutorials and I don’t have so much spare time. Nevertheless I think I will manage again.
In the past I used Domoticz, Hassio, Homeseer and many more. Openhab was the most complicated piece of software for me to understand, but with the best results. Now with this version I really think everything will be much easier and the software will me more accessible for advanced Noobs just like me :wink:
So keep up the good work everyone. Thank you

3 Likes

Hi Andy

i tried to follow your guide , but it doesn’t seem to work here.

I have run out of ideas.

any suggestions would be appriciated.

image
image
image
image

Hi Bozidar,

I don’t the space in between isabellas and vaerelse is possible - try replacing it with an _ (underscore)

Let me know if that helps. Its 00.36am here - but I can take another look first thing in the morning :slight_smile:
Best, Andy

wrong folder
/etc/openhab/html/ is the static folder
moved alla in html folder
or

backgroundImage: /static/static/isabellas_vearelse.jpg

and remove the space from image name

1 Like