Balken & Slider
| advancedSlider | |
|---|---|
| Zweck / Funktion | |
| Erstellen von erweiterten Balken und Slidern als Widget | |
| Allgemein | |
| Typ | Hilfsmodul |
| Details | |
| Dokumentation | EN / DE |
| Support (Forum) | Frontends |
| Modulname | fhemweb_advancedSlider.js |
| Ersteller | Spiff (Forum / Wiki) |
| Wichtig: sofern vorhanden, gilt im Zweifel immer die (englische) Beschreibung in der commandref! | |
Info
!!!Seite noch im Aufbau!!! Weitere Infos: https://forum.fhem.de/index.php?topic=28318.0
Benutzung der Variablen
| Parameter | Werte | Zweck | Default |
|---|---|---|---|
| length | Zahl (Pixel) | Länge des Balkens | 300 |
| width | Zahl (Pixel) | Breite des Balkens | 30 |
| max | Zahl | maximal erreichbarer Wert des Readings | 100 |
| style | horizontal, vertical | Ausrichtung des Balkens | horizontal |
| swapDirection | 0,1 | Umkehren der Richtung horizontal: |
0 |
| offset1 | Zahl (Pixel) | Erzeugt einen Abstand links bzw. unten | 0 |
| offset2 | Zahl (Pixel) | Erzeugt einen Abstand rechts bzw. oben | 0 |
| color1 | glossyBlue, glossyRed, glossyCopper, glossyPink, glossyGreen, glossyYellow, glossyOrange, glossyBlack, glossyWhite gradient_RRGGBB_RRGGBB |
Farbe des linken/unteren Balkens | glossyBlue |
| color2 | glossyBlue, glossyRed, glossyCopper, glossyPink, glossyGreen, glossyYellow, glossyOrange, glossyBlack, glossyWhite gradient_RRGGBB_RRGGBB |
Farbe des rechten/oberen Balkens | glossyWhite |
| opacity1 | Zahl (0...1) 0=transparent |
Transparenz des linken/unteren Balkens | 1 |
| opacity2 | Zahl (0...1) 0=transparent |
Transparenz des rechten/oberen Balkens | 1 |
| textValue | (Textstring), Perl möglich | mittig angezeigter Text | $VALUE |
| textColor | RRGGBB (HEX-Format) | Farbe des Textes | 000000 |
| textSize | Zahl (Pixel) | Größe des Textes | 20 |
| overlay | Link | Overlay-Bild (Überdeckt Balken, nur sinnvoll mit Transparenz) | (leer) |
| overlayStyle | absolute, relative | Platzierung des Bildes mit Beachtung der Offsets (relative) oder über alles (absolute) | absolute |
| overlayRotate | 0,1 | Rotation des Overlay-Bildes horizontal: 90 Grad im Uhrzeigersinn |
0 |
| underlay | Link | Underlay-Bild (Hintergrundbild unter dem Balken) | (leer) |
| underlayStyle | absolute, relative | Platzierung des Bildes mit Beachtung der Offsets (relative) oder über alles (absolute) | absolute |
| underlayRotate | 0,1 | Rotation des Overlay-Bildes horizontal: 90 Grad im Uhrzeigersinn |
0 |
| borderRadius | Zahl (Pixel) | Verrundung der Ecken des Balkens | 0 |
| borderSize | Zahl (Pixel) | Rahmendicke um den Balken (der Balken bleibt immer in seinem durch length und width definierten Bereich) | 0 |
| borderColor | RRGGBB (HEX-Format) | Rahmenfarbe | 000000 |
| shadow | 0,1 | Fügt einen Schatten hinter dem Balken hinzu (der Schatten verletzt den durch length und width definierten Bereich) | 0 |
Beispiele
Default-Balken
| Definition | Erläuterungen | Aussehen |
|---|---|---|
state:adslider
|
Standardeinstellungen des Balkens (ohne Slider). |
Beispiel 1
| Definition | Erläuterungen | Aussehen |
|---|---|---|
state:adslider,width:30,length:200,
|
Der Slider macht ein "set mp position (Sliderwert)". | |
define n_position_mp notify mp:position setreading slider1 $VALUE
|
Das notify stellt den Slider immer auf den Wert des Devices ein. Über disableNotify wird das Notify für die Dauer des Slidens deaktiviert und danach wieder aktiviert. |
Beispiel 2
| Definition | Erläuterungen | Aussehen |
|---|---|---|
state:adslider,slider:1,
|
Balken mit Slider, abgerundeten Ecken, einem Rand, Overlay-Bild für die Skale, Hintergrundschatten und Farbgradient grün->rot |
