As usual here are the changes on the UI. There’s only one major change actually this week: you can now customize the cards shown the home page and generated from the model - look for the pencil button in the upper-right corner:
In this new editor you can restrict which tabs will be displayed, and choose whether non-admins or anonymous guests will see them or not, in case you don’t want them tampering with your system. Usual disclaimer that it’s not a real security measure, but it can be enough to hide unwanted UI to non-technical users.
You can also reorder cards, hide them if you don’t need them, change their title, background color or even put a background image to get something nice:
You may also insert separators between the cards to build groups:
As you may have noticed there are little badges in the location cards as well to provide some information at a glance - the good news is that you might see them without doing anything! This is another benefit of building your model correctly 
The way information is collected is detailed here and will surely end up in the documentation as well: [Design/Spec] Location semantic cards: header · Issue #556 · openhab/openhab-webui · GitHub
Note that in most cases it will prioritize the points directly related to the location, and will only look for indirect points through the location’s equipment if there’s none. That way, you can exclude for instance some temperature measurements that shouldn’t be considered in the computed average for the room. Add only those you want to the Location group to relate them to the room directly.
It will probably not satisfy everyone and incomplete to some, but I hope it will probably be useful to most, in any case you can disable them or show only those you want by configuring the card. And it’s not set in stone, there could be improvements over time.
Due to lack of inspiration and time, the Equipment and Properties cards don’t have badges yet, but they’ll probably come eventually. But until then, there’s a way to customize the header of the card completely! You can edit their YAML code and add either a header slot (to replace the entire header with your components) or the glance slot to keep the title and subtitle and add your widgets underneath.
Here are some examples:
Temperature:
- component: oh-property-card
config:
title: Temperatures
subtitle: "Setpoint: 22 °C"
slots:
glance:
- component: oh-link
config:
text: "='Ground Floor: ' + items.ZW074Sensor_Temperature.state"
iconF7: thermometer
iconColor: white
color: white
style:
font-size: 12px
margin-top: 8px
- component: oh-link
config:
text: "='First Floor: ' + items.FGMS001Sensor_Temperature.state"
iconF7: thermometer
iconColor: white
color: white
style:
font-size: 12px
margin-top: 3px
- component: oh-link
config:
text: "='Outside: ' + items.FGDW002WindowSensor_Temperature.state"
iconF7: thermometer
iconColor: white
color: white
style:
fontSize: 12px
margin-top: 3px
Humidity:
- component: oh-property-card
config: {}
slots:
header:
- component: oh-gauge
config:
labelText: Humidity (Avg)
item: ZW074Sensor_Humidity
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
SoundVolume:
- component: oh-property-card
config:
backgroundColor: black
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: MusicCast_Salon_Volume
size: 75
max: 110
primaryColor: white
secondaryColor: gray
textColor: white
class:
- card-prevent-open
- component: oh-knob
config:
item: MusicCast_Chambre_Volume
size: 75
max: 50
primaryColor: white
secondaryColor: gray
textColor: white
class:
- card-prevent-open
- component: oh-knob
config:
item: MusicCast_Bureau_Volume
size: 75
max: 30
primaryColor: white
secondaryColor: gray
textColor: white
class:
- card-prevent-open
Note the card-prevent-open class applied to interactive oh-knobs in the examples to prevent the card from being expanded when you click or tap these controls.
You can create the card by configuring it first in the Design tab, and then you’ll see it in the Code tab. Remember the keyboard shortcuts Ctrl-R and Ctrl-S to quickly switch to a preview and save.
Have fun!