Balken & Slider: Unterschied zwischen den Versionen

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!

Aktuelle Version vom 6. Januar 2017, 15:06 Uhr

Info

!!!Seite noch im Aufbau!!! Weitere Infos: https://forum.fhem.de/index.php?topic=28318.0

Benutzung der Variablen

Balken-Optionen
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=links->rechts 1=rechts->links vertical: 0=unten->oben 1=oben->unten	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 flat_RRGGBB eigenes CSS möglich	Farbe des linken/unteren Balkens	glossyBlue
color2	glossyBlue, glossyRed, glossyCopper, glossyPink, glossyGreen, glossyYellow, glossyOrange, glossyBlack, glossyWhite gradient_RRGGBB_RRGGBB flat_RRGGBB eigenes CSS möglich	Farbe des rechten/oberen Balkens	glossyWhite
opacity1	Zahl (0...1) 0=transparent 1=solid Zwischenschritt z.B. 0.75	Transparenz des linken/unteren Balkens	1
opacity2	Zahl (0...1) 0=transparent 1=solid Zwischenschritt z.B. 0.75	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 vertical: 90° entgegen 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 vertical: 90° entgegen 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
Slider-Optionen
Parameter	Werte	Zweck	Default
slider	0,1	Fügt dem Balken die Slider-Funktionalität hinzu	0
sliderTechnology	0,1 0 = noUiSlider 1 = jQuery UI Slider	Auswahl der zu benutzenden Slider-Technologie aus Kompatibilitätsgründen v.a. bei mobilen Endgeräten. Siehe Abschnitt Kompatiblilität	0
setDevice	(Device-Name)	Stellt ein, welches Device durch den Slider über "set" bedient werden soll	$DEVICE
setTarget	(Set-Funktion)	Stellt ein, welche Funktion durch den Slider über "set" bedient werden soll	- (=state)
disableNotify	(Notify-Name)	Deaktiviert das angegebene Notify (verhindert, dass der Balken im Konstrukt dummy+notify per longpoll ein Update bekommt, während der Slider bewegt wird) Bug: bei jeder Slidebewegung wird bisher kontinuierlich das Notify auf 'inactive' gesetzt, auch wenn es schon 'inactive' ist. Das kann dazu führen, dass in der Warteschleife so viele inactive-Events abgesetzt wurden, dass diese auch erst nach dem Loslassen des Sliders Anwendung finden. Dann bleibt das Notify 'inactive' und die Seite mit dem Slider muss aktualisiert werden.	-
sliderHandleDesign	0,1	Fügt dem Slider ein Handle hinzu	1

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, color1:glossyGreen,borderSize:5,borderRadius:15, borderColor:999999,textSize:10, slider:1,sliderHandleDesign:0,setDevice:mp, setTarget:position,textValue:"",disableNotify:n_position_mp`	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, sliderHandleDesign:0, shadow:1,borderSize:5, borderRadius:15,borderColor:000000, length:500,width:50, color2:flat_FFFFFF, color1:gradient_00FF00_FF0000, overlay:/fhem/images/BalkenHorizontal.png, overlayStyle:relative,textValue:""`	Balken mit Slider, abgerundeten Ecken, einem Rand, Overlay-Bild für die Skale, Hintergrundschatten und Farbgradient grün->rot

HUE-Slider

Definition	Erläuterungen	Aussehen
`state:adslider,width:30,length:300,borderSize:2, max:65535,color1:flat_FFFFFF,color2:flat_000000, opacity1:0,opacity2:0.75,textSize:0, slider:1,sliderHandleDesign:0,setDevice:HUEDevice4, setTarget:hue, underlay:/fhem/jscolor/hue_background.svg`	Balken mit Slider, Underlay-Bild für die HUE-Skale, verdunkelt den rechten Regelbereich anstatt der Anzeige eines Handles
`define n_adslider_hue notify HUEDevice4:hue.* setreading adslider_hue state $EVTPART1`	Das notify stellt den Slider immer auf den Wert des Devices ein.

BRI-Slider

Definition	Erläuterungen	Aussehen
`state:adslider,width:30,length:300,borderSize:2, color1:gradient_000000_FFFFFF,color2:flat_000000, textSize:0,slider:1,sliderHandleDesign:0, setDevice:HUEDevice4,setTarget:bri`	Balken mit Slider, Gradient für die Helligkeitsanzeige, schwärzt den rechten Regelbereich anstatt der Anzeige eines Handles
`define n_adslider_bri notify HUEDevice4:bri.* setreading adslider_bri state $EVTPART1`	Das notify stellt den Slider immer auf den Wert des Devices ein.

Kompatibilität

Als Orientierung, welche Slidertechnologie ausgewählt werden sollte und was für Fehlerbilder möglich sind hier eine Übersicht über verschiedene mobile Endgeräte

Gerät	Betriebssystem	Browser	Slider Technologie	Bemerkungen
Google Nexus 4	Android 5	WebViewControl	noUiSlider	Hin und wieder Probleme vor allem bei vertikalen Slidern und wenn die Asicht gezoomt ist. Meist stimmt die Zuordnung von Finger und Rückgabewert nicht ganz zusammen
Google Nexus 4	Android 5	WebViewControl	jQuery UI Slider	Hin und wieder Probleme vor allem bei vertikalen Slidern und wenn die Asicht gezoomt ist. Meist stimmt die Zuordnung von Finger und Rückgabewert nicht ganz zusammen

@@ Zeile 211: / Zeile 211: @@
 |-
 | style="width:40%" |<code>state:adslider</code>
-| Standardeinstellungen des Balkens (ohne Slider).
+| style="width:40%" | Standardeinstellungen des Balkens (ohne Slider).
-| [[Datei:AdvancedSlider_default.png|thumb]]
+| style="width:20%" | [[Datei:AdvancedSlider_default.png|thumb]]
 |-
 |}
@@ Zeile 221: / Zeile 221: @@
 |-
 | style="width:40%" |<code>state:adslider,width:30,length:200,<br />color1:glossyGreen,borderSize:5,borderRadius:15,<br />borderColor:999999,textSize:10,<br />slider:1,sliderHandleDesign:0,setDevice:mp,<br />setTarget:position,textValue:"",disableNotify:n_position_mp</code>
-| Der Slider macht ein "set mp position (Sliderwert)".
+| style="width:40%" | Der Slider macht ein "set mp position (Sliderwert)".
-| rowspan=2 | [[Datei:AdvancedSlider_example1.png|thumb]]
+| style="width:20%" rowspan=2 | [[Datei:AdvancedSlider_example1.png|thumb]]
 |-
 | <code>define n_position_mp notify mp:position setreading slider1 $VALUE</code>
@@ Zeile 236: / Zeile 236: @@
 | Balken mit Slider, abgerundeten Ecken, einem Rand, Overlay-Bild für die Skale, Hintergrundschatten und Farbgradient grün->rot
 | [[Datei:AdvancedSlider_example2.png|thumb]]
+|-
+|}
+=== HUE-Slider ===
+{| class="wikitable"
+! Definition !! Erläuterungen !! Aussehen
+|-
+| style="width:40%" |<code>state:adslider,width:30,length:300,borderSize:2,<br />max:65535,color1:flat_FFFFFF,color2:flat_000000,<br />opacity1:0,opacity2:0.75,textSize:0,<br />slider:1,sliderHandleDesign:0,setDevice:HUEDevice4,<br />setTarget:hue,<br />underlay:/fhem/jscolor/hue_background.svg</code>
+| Balken mit Slider, Underlay-Bild für die HUE-Skale, verdunkelt den rechten Regelbereich anstatt der Anzeige eines Handles
+| style="width:20%" rowspan=2 | [[Datei:AdvancedSlider_hue.png|thumb]]
+|-
+| <code>define n_adslider_hue notify HUEDevice4:hue.* setreading adslider_hue state $EVTPART1</code>
+| Das notify stellt den Slider immer auf den Wert des Devices ein.
+|-
+|}
+=== BRI-Slider ===
+{| class="wikitable"
+! Definition !! Erläuterungen !! Aussehen
+|-
+| style="width:40%" |<code>state:adslider,width:30,length:300,borderSize:2,<br />color1:gradient_000000_FFFFFF,color2:flat_000000,<br />textSize:0,slider:1,sliderHandleDesign:0,<br />setDevice:HUEDevice4,setTarget:bri</code>
+| Balken mit Slider, Gradient für die Helligkeitsanzeige, schwärzt den rechten Regelbereich anstatt der Anzeige eines Handles
+| style="width:20%" rowspan=2 | [[Datei:AdvancedSlider_bri.png|thumb]]
+|-
+| <code>define n_adslider_bri notify HUEDevice4:bri.* setreading adslider_bri state $EVTPART1</code>
+| Das notify stellt den Slider immer auf den Wert des Devices ein.
 |-
 |}