Hi there,
I recently finished a somewhat long and interesting migration process from OH2.5.9 to OH3 (3.0.1 to be precise). I can now say that my home is stable again and my interfaces (pages on several devices) are where I want them to be, at least as a good stable starting point.
I would like to share my results in order to show what you can do with this great new UI using almost entirely standard widgets. Main-UI offers many possibilities that can be a little overwhelming at first, so I hope these examples would show a new user what you can do with some of the basic features.
From here I plan to dig into some of the more advanced features like creating custom widgets, etc.
Home Page
By “Home Page” I mean the auto generated cards based on the semantic model.
I’m not using the location tab (you can hide it when you edit the page) so these are my Equipment and Properties tabs, and an example to one of the cards
To get to my end result I had to “abuse” the semantic model a bit.
For instance in the example above I tagged all the items I wanted to be in this “Devices Status” card as property “Pressure”, and then with other points tags to group similar items. Up time got the “OpenState” tag, last heart beat got the “Tampered” tag, etc.
I did this just because I didn’t know how to change the order of the items inside those auto generated cards. It’s a somewhat ugly solution and if someone finds a more elegant way please let me know. For now I don’t feel any downsides to it. As far as I know HABot is the only feature (other than the Home Page of course) that is sensitive to these tags, and I’m not using it. Again, if something I said is wrong please correct me.
Overview
Now this is the page that comes up in my mobile devices. The screenshots were taken from my pc but I narrowed the window to show how it looks on my phone.
I didn’t use cells because I didn’t like that I can’t control their width. For example, in the first section there are five cards showing status of different stuff. With cells the last one would be half the size and aligned to the left. I like symmetry and with cards I could set the last one to be 100% width.
Next, the “Home Control” line is a label card with no title and no item, “Home Control” is a static label.
Next, there are three list cards with different list items. Each list has a list button at the top that takes to user to a different page with more controls- lights, blinds, etc.
Going back to the “Attention” card, here I added an expression to change it’s background:
=(items.gAlarmsReminders.state === "ON") ? "lightcoral" : "lightgreen"
And its action is set to “Group Details” and the group (gAlarmsReminders) contains several reminders or alarms. So if the card is red you can touch it and get the details and see which items set it off.
Main Home Screen
The next page is shown on a screen in my kitchen:
The first row again is comprised of cards and not cells so I could fit them all in my row. Also, with cells the icon is much smaller (see the last row).
With the last two cards I again used an expression to color indicated something about their status. For example, the speed test card’s expression is:
background: '=(items.SpeedTestResultDown.state=="0") ? "linear-gradient(180deg,
rgba(255,255,255,1) 0%, rgba(240,128,128,1) 100%)" :
(items.SpeedTestResultDown.state<"250") ? "linear-gradient(180deg,
rgba(255,255,255,1) 0%, rgba(255,160,10,1) 100%)" : "linear-gradient(180deg,
rgba(255,255,255,1) 0%, rgba(144,238,144,1) 100%)" '
It turns red if the speed is 0, and orange if anything less than 250.
In order to create a gradient fill I used this link to design and generate the right CSS code:
Next, the weather widget is the only custom widget I have so far, all credits goes to @RGroll with he’s wonderful work on it. I used he’s instructions and it worked like a charm the very first try.
Next is an image card showing an my google home speaker’s media image item.
In order to show the artist and title I used this expression on the footer element:
footer: =items.K_Speaker_Artist.state + ', ' + items.K_Speaker_MediaTitle.state
Next is a list card showing our family calendar next events. The items are label list items with the starting time as a label, I am planning t see how I could display the time as a badge because I saw some examples using those which looks great. I think I can also color them differently according to their time.
Next is a regular list card. Nothing worth mentioning.
Next, first time I’m using cells but I might turn them into cards as well.
Each of them has a different roll but I would like to show what’s the last one is doing. It’s action is set to “Popup” and it brings up a different page I created with some cards on it. This is how it looks when it pops up:
It has few actions I wanted to have a quick access to, but didn’t want them to be on the screen all the time.
I saw several examples of custom widgets doing something similar (plus some extra features) but I feel this way I achieved most of what I wanted without digging into custom widgets programing (although it’s definitely my next step
) Also this way it’s very easy to change what will be displayed there- just edit the target page.
Conclusion
So I showed you my screens which I created with almost entirely standard widgets and pretty basic features. The most advanced was expressions and they’re not hard to get a handle on.
Just goes to show what a great job everyone has done to create such a powerful tool.
Thank you OpenHAB members and community for this great software!!!
This post is my VERY humble contribution back to this community.