Balken & Slider: Unterschied zwischen den Versionen

Aus FHEMWiki
(Die Seite wurde neu angelegt: „=== Benutzung der Variablen === {| class="wikitable" ! Parameter ! Werte ! Zweck ! Default |- | length | Zahl (Pixel) | Länge des Balkens | 300 |- |…“)
 
 
(9 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt)
Zeile 1: Zeile 1:
{{SEITENTITEL:Balken & Slider}}
{{Infobox Modul
|ModPurpose=Erstellen von erweiterten Balken und Slidern als Widget
|ModType=h
|ModCmdRef=advancedSlider
|ModForumArea=Frontends
|ModTechName=fhemweb_advancedSlider.js
|ModOwner=Spiff ({{Link2FU|1289|Forum}} / [[Benutzer Diskussion:Spiff|Wiki]])}}
=== Info ===
!!!Seite noch im Aufbau!!!
Weitere Infos:
https://forum.fhem.de/index.php?topic=28318.0
=== Benutzung der Variablen ===  
=== Benutzung der Variablen ===  
{|  class="wikitable"  
{|  class="wikitable"  
! colspan=4 | Balken-Optionen
|-
!  Parameter
!  Parameter
!  Werte
!  Werte
Zeile 147: Zeile 163:
| Fügt einen Schatten hinter dem Balken hinzu (der Schatten verletzt den durch length und width definierten Bereich)
| Fügt einen Schatten hinter dem Balken hinzu (der Schatten verletzt den durch length und width definierten Bereich)
| 0
| 0
|-
! colspan=4 | Slider-Optionen
|-
!  Parameter
!  Werte
!  Zweck
!  Default
|-
| slider
| 0,1
| Fügt dem Balken die Slider-Funktionalität hinzu
| 0
|-
| sliderTechnology
| 0,1<br>
0 = noUiSlider<br>
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)<br />'''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 ===
{| class="wikitable"
! Definition !! Erläuterungen !! Aussehen
|-
| style="width:40%" |<code>state:adslider</code>
| style="width:40%" | Standardeinstellungen des Balkens (ohne Slider).
| style="width:20%" | [[Datei:AdvancedSlider_default.png|thumb]]
|-
|}
=== Beispiel 1 ===
{| class="wikitable"
! Definition !! Erläuterungen !! Aussehen
|-
| 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>
| style="width:40%" | Der Slider macht ein "set mp position (Sliderwert)".
| style="width:20%" rowspan=2 | [[Datei:AdvancedSlider_example1.png|thumb]]
|-
| <code>define n_position_mp notify mp:position setreading slider1 $VALUE</code>
| 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 ===
{| class="wikitable"
! Definition !! Erläuterungen !! Aussehen
|-
| style="width:40%" |<code>state:adslider,slider:1,<br />sliderHandleDesign:0,<br />shadow:1,borderSize:5,<br />borderRadius:15,borderColor:000000,<br />length:500,width:50,<br />color2:flat_FFFFFF,<br />color1:gradient_00FF00_FF0000,<br />overlay:/fhem/images/BalkenHorizontal.png,<br />overlayStyle:relative,textValue:""</code>
| 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.
|-
|}
== 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
{|class="wikitable mw-collapsible mw-collapsed"
! Gerät !! Betriebssystem !! Browser !! Slider Technologie !! Bemerkungen
|-
| style="width:40%" | 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
|-
| style="width:40%" | 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
|-
|}
|}

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


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

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).
AdvancedSlider default.png

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)".
AdvancedSlider example1.png
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
AdvancedSlider example2.png

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
AdvancedSlider hue.png
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
AdvancedSlider bri.png
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
Abgerufen von „http://wiki.fhem.de/w/index.php?title=Balken_%26_Slider&oldid=18333“