OpenHAB
/
openhab-docs
mirror of https://github.com/openhab/openhab-docs.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

fix image paths in interactive background docs (#2402) 

Signed-off-by: Stefan Höhn <mail@stefanhoehn.com>
pull/2405/head^2
stefan-hoehn 2024-11-12 18:25:15 +01:00 committed by GitHub
parent b0dea499c9
commit fe0781858d
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 4 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
ui/layout-pages-fixed.md
View File

@ -25,7 +25,7 @@ The user interface tries to help you to determine the CSS resolution by showing
### Fixed Grid Layouts ### 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. 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. You can now place widgets on that screen by clicking the **Add Widget** button.
@ -84,7 +84,7 @@ Defaults to false.
### Fixed Canvas Layouts ### 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. 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. You can now place widgets on that screen by clicking the **Add Widget** button.
@ -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. 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. 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. 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. Similarly like the main element is marked with an `openhab` attribute, the proxy element is marked with a special attribte, the `flash` attribute.
@ -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: 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'. The above setting for _Set Style Class based on ON_ will apply the class `animate` to the element with the id 'astro_animate'.