Just thought will share my layouts that i managed to create in OH3.
First one is for an old IPAD in an always on mode. It displays the status of a few things including on top row, the air quality outside (which in my area is quite bad during this time of the year) - these are custom widgets. On second and third row, cell widgets to display status of smarthome devices. The ones with the elipses can expand to display additional controls. Each cell widget has an action associated such as either power on/ off for TV, computer, Air purifiers, Geysers (boilers), or can analyze in a chart.
On last row, weather glimpse. The last widget was inspired by this (UI Widget: Weather - #22 by RGroll) thanks to @RGroll also for the first one
I realy like your layout - especially the coloured room- & equipment-cards with the images. Great work and happy to see that the weather-widgets fits your needs.
Thank you. Its a tricky one. Please do share suggestions to improve this.
The collapsed card is basically an f7-card with width dependent on the window size.
So what is ending up happening is that in layouts greater than 768px window size, the collapsed card size is at limited at 340px, so the glance slot can be placed accordingly. But with smaller sizes, like on phone, the collapsed card is 100% of the width, hence the with can be anywhere between 0px and 768px. So its difficult to always place the image on the right edge of the collapsed card on smaller screens.
I never heard/read about that ‘glance’ slot for f7-cards? What exactly is it doing? Is it a replacement for the default slot in location-cards?
From a pure css-perspective I would probably align the background-image with an offset at the right like this:
background-position: right -80px center
to prevent the image from shrinking you could assign a fixed background-size - but it will work without it, I think, as phone-screens are not that small anymore.
I’ll experiment with it a bit more if I find time to set-up my semantic model.
@candiesdoodle IIRC you have another slot, background, specifically for card header backgrounds, the size of which will be the actual width and height of the header, you can therefore use things like width: 100% and position: absolute; right: 10px
Never mind this slot is only found in cells, not model cards. Probably should add it though.
The constraint with the UI is that values/text/expressions are only updated the first time the page loads, or when a state changes in an already loaded page. Hence just using the dayjs library will result in static relative time. Example, if the last change time stamp is X pm, then the dayjs().fromNow will result in a relative time at the moment the expression is evaluated but will not update it again until the page is reloaded or the last changed timestamp changes due to another event (like associated item state change).
So I created a shadow item which oscillates between null and the last changed timestamp every 1 minute by a rule.
something like this:
value = itemRegistry.getItem(item_name).getState();
events.postUpdate(item_name+'_ForDisplay', null);
events.postUpdate(item_name+'_ForDisplay', value);
so every time the item_name_ForDisplay goes from value to null to value, the dayjs.fromNow() updates it to the relative time to current time and the effect is that the relative time keeps updating every time
Thanks for the clarification - I like this soloution! Did you make any observations on how much these constant updates influences the performance of the UI?
Not really. i have 3 items that keep refreshing like this but issue on the UI side. The only issue is that during the intermediate null state, the dayjs libary will not calculate the relative time. So the UI displays undefined or something.
I went around that too.
The actual timestamps are like this: 2020-12-26T16:58:45.623+0XXX
Since the objective is to create a shadow item following this timestamp but with a changing state, the triggered script is like this, (triggering every minute):
value = itemRegistry.getItem(item_name).getState();
value1 = value.toString().replace("+",'');
events.postUpdate(item_name+'_ForDisplay', value1);
events.postUpdate(item_name+'_ForDisplay', value);
Removing the + sign from the timestamp has no impact on dayjs calculation, but since the state changed, dayjs calculation is re-triggered. And consequently, no null value is passed to dayjs
Have you seen the background image disappear on the cards if the screen height is under 670? The card sizes don’t change, but something get unapplied.
It is also the point that the cards popup to fill the pane, instead of in a modal, when clicked. But, the background does display in both of those!
This looks like the only style change: @media (min-height: 670px) and (min-width: 768px)
.card-expandable:not(.card-tablet-fullscreen)
max-width: 670px;
max-width: var(–f7-card-expandable-tablet-width);
and the effect is that the relative time keeps updating every time