what i see in your widget is that you have placed all content with “absolute” positioning, everything what goes in expanded is nicely in rows and colums. i believe this is the root cause. This does not explain why the position absolute is disapearing, but as a test if you just remove the absolute element from the gras, it obviously will be re-positioned like everything else ( as absolute is related to each other ), but if you do the test then with expanding and colapsing, the gras is still there where it was. I believe to sort the problem, you need to work in rows and colums to properly position the elements within the card-content part of the widget unless someone has another solution.
There is a nice discussion in another post around this topic of placement, this might eventually help:
the absolute position is already a workaround I use.
Initially I used a f7-col with flex-end alignment.
This was not working either, as the width of the card is not correct once collapsed.
EDIT: the position is correct, when I move the icon in the content-header.
However in this case the icon length is stretched -same as the close icon in point 3) in the initial question.
Expandable card content (card-content ) is set to 100vw width when collapsed (closed). It is done to improve card open/close transition performance, so you need to take care about its content positioning. You can make its content width also animatable and responsive by adding additional card-expandable-animate-width class to card element, but performance can be worse in this case.
The 100vw width will overwrite the applied styling on the card-content component after the first expansion of the card. Performance seems okay for me after adding the mentioned class, which would be the easiest soloution for your case, I think.
The expand transformation will applied for each element outside of card content-elements (card-header, card-content, card-footer) which leads to the stretched icon - so it’s needed that any visible element for the opened card is inside these card content-elements.
I had a quick look at your widget and done some small optimizations to the mentioned problems - but only for the ones that were obvious at a first glance, so its worth checking all components again.
i leave it to Stefan to further comment on this widget, but thank you so much @RGroll for sharing your knowledge. I believe this widget with the expandable opportunities gives quite some possiblities to build functionable widgets, eg. for thermostate control and some other stuff and to replace the popup / popover hickups.
Thanks a lot Rainer - much appreciated
Without your help I would have never find this card-expandable-animate-width - even I read the Card doc already
FYI - I had to change the width of the f7-card from 100% to auto.
Otherwise the Widgets was right aligned on the mobile screen.
But now it is perfect
I will review the code again - I already found a WhnZ_Licht_Main_Dimm item, which doesn’t belong to my watering system
Hallo Stefan,
sehr schönes Widget. Ich möchte sowas ähnliches für schaltbare Steckdosen machen. Wie hast du denn den Zeittrigger gemacht?
Ich habe das bisher mir einem Rule gemacht:
rule "rule-pumpe"
when
// System started
//or
Time cron "0 0 */12 * * ?" // Alle 12 Stunden
//Time cron "0 0 1 1 * ?" //once per year
then
Sowie ich es sehe ist Bewaesserung_Rasen_Timer_Startzeit vom Typ DateTime.
Vergleichst du in einem Rule periodisch Bewaesserung_Rasen_Timer_Startzeit ?
Hi Stefan,
very nice widget. I’d like to do something similar with switchable plug socket.
How did you do the time trigger?
In my rules i used a cron job like thus:
rule "rule-pumpe"
when
// System started
//or
Time cron "0 0 */12 * * ?" // Alle 12 Stunden
//Time cron "0 0 1 1 * ?" //once per year
then
As I see from your widget Bewaesserung_Rasen_Timer_Startzeit is of Typ DateTime.
Are you comparing in a rule Bewaesserung_Rasen_Timer_Startzeit with the current time?
I do indeed the comparison like this…every minute…this is not the best way in terms of system performance and there might be better ways to do it, but it works well in my case. My openHab runs in a docker on a Synology so plenty of performance.
rule "Start Scheduled - Rasen"
when
Time cron "0 * * * * ? *"
then
val startdate = (Zeit_Bewaesserung.state as DateTimeType).getZonedDateTime()
if (now.isBefore(startdate)) { return; }
if (now.isAfter(startdate))
{..... do some stuff....
Hi Jan,
I did this similar but on smaller devices (e.g RasPi 3) this could generate quite some load especially if you have a couple of these triggers.
Thanks for clarifying
Marco
Hi Justing,
this is interesting. Is it possible to have that trigger also in a DSL rule or do I have to use the GUI.
Currently I am on 3.3.0 Release Built but for this I would upgrade.
Thanks
Marco
I haven’t tried it, but I believe it should work with in DSL as well. I think it’s supposed to be something like:
when
Time is ItemName
That rule only triggers at the item’s time on the item’s date. If you want the rule to trigger only on the time everyday (that is, ignore the date) then you add timeOnly to it:
Hi Justin,
thank you for the hint and the example.
This works in 3.4.0.M3
With this new time based features can be added.
The goal is to have a widget were the on and off times of a switch item can be configured.
For now I will use the Time Picker from here:
But maybe there are other options available in OH3 now.
This is certainly one perfectly reasonable way to go. There are a couple other widgets in the market place that do something similar, if I recall so have a look around. I know rlkoshak has put a simple DateTime widget in the marketplace. If you want something more involved than that, there’s the fancy timeline widget.
If you have something very particular in mind though, your best chance of getting exactly what you want it to make it yourself. Look at the code of these simple widgets and see how they work to change an item’s time and then see if you can build the exact widget you are dreaming of.
I have a much more basic question regarding expandable f7-cards.
How do I control the height of the expanded card? I have this card which always opens full-screen which especially on the phone doesn’t make sense. Here when it is expanded:
The short answer is “not easily”. The change in card size when expanded is accomplished under-the-hood by the f7 library with calculations of what the final size should be and the animations required to make that smooth. You can override the final height using a stylesheet to apply custom css to the opened card, but unless you want the animation to still expand to a full screen and then suddenly shrink back down to your set height at the end, you’d also have to identify all the animation classes and override all the animation settings and recalculate those for every different screen size.
On larger screens, you have access to 2 f7 css variables, --f7-card-expandable-tablet-height and --f7-card-expandable-tablet-width which allow you set the size of the card when it is determined by the library that it should be smaller than full screen, but on phone screens these have no effect.
