Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix image paths in interactive background docs #2402

Merged
merged 1 commit into from
Nov 12, 2024
Merged

fix image paths in interactive background docs #2402

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions ui/layout-pages-fixed.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ The user interface tries to help you to determine the CSS resolution by showing

### Fixed Grid Layouts

To define your screen size open the ![configure-grid.png](images%2Fconfigure-grid.png) menu and click **Configure Grid Layout**.
To define your screen size open the ![configure-grid.png](images/configure-grid.png) menu and click **Configure Grid Layout**.

The layout editor shows a gray surface as the _virtual screen area_, which represents your defined screen.
You can now place widgets on that screen by clicking the **Add Widget** button.
Expand Down Expand Up @@ -84,7 +84,7 @@ Defaults to false.

### Fixed Canvas Layouts

To define your screen size open the canvas menu ![configure-canvas.png](images%2Fconfigure-canvas.png) and click **Configure Canvas Layout**.
To define your screen size open the canvas menu ![configure-canvas.png](images/configure-canvas.png) and click **Configure Canvas Layout**.

The layout editor shows a gray surface as the _virtual screen area_, which represents your defined screen.
You can now place widgets on that screen by clicking the **Add Widget** button.
Expand Down Expand Up @@ -271,7 +271,7 @@ A good example is the following bulb.
The left image shows the bulb in the OFF state and the right image shows the bulb in the ON state.
In this case we do apply a color based on the state but enable / disable a proxy element in that group that makes up the bulb object.

![interactive-bulb-off.png](images%2Finteractive-bulb-off.png) ![interactive-bulb-on.png](images%2Finteractive-bulb-on.png)
![interactive-bulb-off.png](images/interactive-bulb-off.png) ![interactive-bulb-on.png](images/interactive-bulb-on.png)

The way this can be achieved by indication a proxy element, an element that is part of that group.
Similarly like the main element is marked with an `openhab` attribute, the proxy element is marked with a special attribte, the `flash` attribute.
Expand Down Expand Up @@ -342,7 +342,7 @@ They can be added to SVG text file in the same way it is added to HTML files.

Here is a simple example that works with the above astronaut to create a fading in/out animation:

![interactive-style.png](images%2Finteractive-style.png)
![interactive-style.png](images/interactive-style.png)

The above setting for _Set Style Class based on ON_ will apply the class `animate` to the element with the id 'astro_animate'.

Expand Down