*Using OpenHAB 3.4
Can you trigger the black button settings of a component by Action or Rule? See photo:
I have overlapping components and now for example if I press component 1, I want to trigger “Move Back” on component 2.
Appreciate any help or hints what direction to search for, didnt find anything in the documentation.
What I am trying to do is basically avoid using multiple pages or popups because I am not happy with loading times, so I want to have everything in one place and bee always running in the background and bring them to front when needed and just push back when not needed.
No. Those menu options are features of the editor window that actually reorder the page definition itself. There is no equivalent feature when the page is being actually rendered.
You can change whether or not a widget is rendered at any point on a page using widget variables and the visible property. But If you are running on a system that is already having a difficulty rendering the pages, then I don’t think adding more to the main page is the solution, that’s just going to slow it down more. I would suggest trying to work out why your page loading times are slower than you like and trying to fix that issue.
1 Like
Thanks for your help!
My layout page isn’t slow, but some of the content I’m using takes a few seconds to load. I’m using embedded webpages that fill the screen when visible, and I’m using variables and the ‘visible’ property to show and hide certain webpages. However, when I hide and show a webframe, it reloads.
For example, if I have a JavaScript stopwatch on a custom webpage and put it on the layout with the webframe widget, when I hide and then show the widget again, the timer restarts. Is it possible to just ‘hide’ a widget to the background but keep it running?
I’m trying to use the CSS background settings in the widget and I’m attempting to add an openhab variable inside the snippet, but it doesn’t recognize it as a variable.
config:
stylesheet: |
.card-body { visibility: hidden; }
This hides it but…
visibilty: =vars.myVar
This does not recognize it as a variable. Is there some way to inject a variable into that snippet?
When you set the visible property of a component to false, the component is not even rendered. It’s not that the corresponding elements are hidden from view; they are not even part of the page source. When you then change that to true the page is re-rendered with the elements in place, so, in effect, they are being reloaded from scrtach.
The stylesheet property is not passed through the expression parser, so it cannot take advantage of dynamic expressions. However, you can use css variables to get around this. CSS variables can be set in the style object of the configuration and then those variables can be referenced in the stylesheet.
config:
style:
--my-custom-css-var: =vars.myVar
stylesheet: |
.card-body { visibility: var(--my-custom-css-var); }
Thank you for the quick response.
This looks very promising but it doesn’t work…
In the firefox or chrome inspector it looks like the variable isnt rendering at all, in the sourcecode the variable just appears as var(–my-color). Firefox inspector says variable ‘–my-color’ not set.
Here an example layout page just for testing I tryied with background-color. Maybe I made a mistake somewhere:
config:
defineVars:
myVar: green
label: MyPage
layoutType: fixed
fixedType: canvas
blocks: []
masonry: null
grid: []
canvas:
- component: oh-canvas-layer
config: {}
slots:
default:
- component: oh-canvas-item
config:
style:
--my-color: =vars.myVar
stylesheet: |
.card-header { background-color: var(--my-color); }
x: 196
y: 102
h: 150
w: 200
slots:
default:
- component: oh-label-card
config:
title: Header Title
label: Lorem Ipsum
Hardcoding the green color works fyi.
.card-header { background-color: green; } /* This works */
Something like this works but only when I put the style: --my-color in the first config of the page.
--my-color: green
Your example code actually has no way to set the myVar variable value so it’s undefined. The widget expressions are based on javascript and undefined is a falsy value. From a yaml` standpoint a false value just means that key is ignored.
However, I don’t think that’s the main issue in this case. I don’t use the canvas layout much at all, but I don’t think the canvas layer or item components actually use a style property so your variable is not getting sent to the css engine at all if you’re trying to set it inside the oh-canvas-item.
For the stylesheet to apply to the outer card class div of the oh-label-card you’re probably right that the variable and stylesheet have to be declared at a higher level. That just means you need to wrap the card in some other container first. Something like this:
- component: f7-block
config:
style:
--vis-var: hidden
stylesheet: >
.card {
visibility: var(--vis-var);
}
slots:
default:
- component: oh-label-card
config:
label: Label
title: Title
1 Like
Damn you nailed it, style property seems to be missing on the canvas layout layers and components. I tried your solutions with an responsive layout and it worked, on the first config I defined an oh-variable, then inside the oh-block I defined the css-variable and set it equal to first variable and injected it into the stylesheet next, like this:
config:
defineVars:
myVar: green
block:
config:
style:
--my-css-var: =vars.myVar
// This works
The annoying thing is that it seems you can’t define an oh-variable on a config and then on the same config to set the css-variable to the value of that oh-variable, it has to happen on an nested config, and it seems on the canvas layout nothing else but the pages config has an style property…
config:
defineVars:
myVar: green
style:
--my-css-var: =vars.myVar
// This doesn't work because same config?
// and in canvas layout there unforunately is no block component to put this in
--my-css-var: green // This works in here, so css-variables CAN be created here
How to find out what has and what hasnt a style property? And is there a way to alter a css-variable with ui-actions? Any other ideas how to continue, is it possible to make an own widget and to add a style property to it?
Alas, this isn’t included in the component doc pages. It requires looking directly into the widget vue source files to see how the configuration options are passed to the underlying element or template. Trial and error with some easily observable style setting may just be easier in most cases.
If you are setting the css variable with a widget variable then the ui-actions can change that widget variable and the css variable will change accordingly. Usually this works without any further effort, but I have noticed that sometimes in the widget editor you have to refresh the view to get the stylesheet reapplied after a change.
If you mean can you add a variant of an oh-canvas-item that does accept the style property, then the only way to do that is to submit a change to the UI repo with the appropriate vue definitions and other supporting files.
If you mean can you build something in the widget editor that has the functionality you are looking for then at this point the answer is almost certainly “yes, it just depends on how much time you’re willing to invest”. At this point the custom widget system is remarkable mature and there’s very little it cannot do.
If this is really still just about changing the z-order of a few different web viewers then sure you can make a widget that stacks the viewers with the same absolute positioning and then use a widget variable that sets the the desired web viewer to a higher z-order than the others.