Slider selbst designen?

[SirTom]

Hallo,

ich bin leider ein ziemlicher Anfänger, was den HS bzw. die XXAPI2-Visu angeht. Ich bin jetzt an einer Setlle, an der ich das Licht mittels Slider dimmen möchte. Das funktioniert auch super. Allerdings bekomme ich den Slider nur so hin, wie im Anhang zu sehen. Ich würde die Optik gerne anpassen.
Ich würde gerne so etwas wie hier hinbekommen:
XXSLIDER: http://www.uiparade.com/portfolio/sl...-pulse-effect/ (eine der drei Varianten)
XXKNOB: http://www.uiparade.com/portfolio/volume-slider-2/

Kann mir jemand sagen, wie ich den weißen Butten auf meinem Bild durch ein Bild ersetzen oder auch die Form des Balkens anpassen kann?
Für hilfreiche Stichwörter wäre ich sonst auch sehr dankbar. Die Suche hat mir so leider nicht so wirklich weitergeholfen.

Auf jeden Fall vielen Dank für eure Hilfe und die Arbeit von Nils und denjenigen, die hier so fleißig dokumentieren.

VG Thomas

[TBBW]

Hi Thomas,

I came across your post.
I think we are looking for the same answer !!
What I know,
If you want to make a custom button/slider you have to use the xxapi2 files custom.js and custom.css.
I work a lot with the program language C#.
In C# you define the logic in C# and the "looks" in XAML.
I think with Java/HTML it works the same, in the custom.js file you have to define the template (the logic) and
in the custom.css you have to define the appearance.
Oke, with the button you want it is going to be complex to define everything by hand in the css file.
Back to C#, if the looks in C# is complex I use Blend. Blend is a graphic design program, it is part of Microsoft Visual Studio.
This program transfers my graphic's into readable code.
I'm almost 100 percent sure it works the same with the *.js and *.css files.
I did not found a nice custom slider yet, to play with.
If I have one I let you know.
If you found one please post it.

At this moment I'm working on a simple template in xxapi2, to get it working.

Sorry for my English, my German writing is poor....

Grusse,

Ger

[TBBW]

Hi Thomas,

I found a slider to play with, only the graphic part.
I'm trying to get it working, at this moment it is not easy, see my slider post.
Anyway you have to edit the original, or override it using a template.
This is my status for now
I also want the tooltip to be on, that is the number next to the slider telling the value of the slider
in digits.

regards,

Ger

[SirTom]

Hey,
vielen Dank! Ich pushe das ganze hier nochmal. Leider verstehe ich noch nichts von der custom.js und customer.css. Lohnt es sich hiermit zu beschäftigen? Ist das für mich als Laie Oberhaupt machbar?

oder gibt es noch andere Möglichkeiten das Aussehen der Slider zu ändern?

vg

[TBBW]

Hi Tom,

I made some custom Sliders see the attachment.
Soon I will be posting how to do it in XXAPI
Have a look at the sliders, the used designs are not shocking...

grusse,

Ger

[SirTom]

Hallo,
gibt es mittlerweile neue Erkenntnisse über das Ändern des Designs der Slider. Ich würde beispielsweise den Button gerne als Kreis darstellen.
Vg Thomas

[HAPE]

Hallo Thomas,

den Slider kannst Du Dir im vorhandenem Rahmen gestalten.

Hier ein Beispiel:


41.jpg

Gruß
Hans-Peter

[SirTom]

Moin,
das funktioniert bestens. Vielen Dank! Gibt es dazu irgendeine Doku?
Wie hast du denn deine Anpassungen des Knob‘s gemacht? Da gibt es ja keine Datei. Direkt über den Experten mit xxoption?
vg Thomas

[HAPE]

Hier in Kürze noch ein paar Beispiele. Leider fehlt mir für eine Doku im Augenblick die Zeit..Die Einstellungen sind in der css gemacht.

42.jpg

Grüße
Hans-Peter

[SirTom]

So war es auch nicht gemeint. Ich dachte du kennst evtl. eine gute Seite zum nachlesen. Wie passt du deine knobs an?

[HAPE]

Um eine Anpassung auszuführen und zu verstehen, erstelle ich mir eine Dokumentation, weil in zwei Monaten ist es wieder vergessen. Hier ein Beispiel der Zeile 95:



Slider_Zeile 95_0.jpgSlider_Zeile 95_1.jpgSlider_Zeile 95_2.jpgSlider_Zeile 95_3_.jpg


Grüße
Hans-Peter

[SirTom]

Hallo Hans-Peter,
besten Dank! Wie designst du denn deine xxknobs? Welche Datei bearbeitest du hier?
https://knx-user-forum.de/forum/öffe...ie-visu/page17

Es gibt ja keine knob.css oder fehlt mir nur eine Datei?
Vg Thomas

[HAPE]

Hallo Thomas,

verweise hierhin:
#249

Gruß
Hans-Peter

[Andreas1986]

Hallo Hans-Peter,
hätte bezüglich des Sliders auch noch mal eine Frage. Möchte man einen 2ten Slider mit anderen CSS Eigenschaften erstellen,
was muss da beachtet werden?

Einen XXSLIDER1 , XXSLIDER2 erstellen
den Inhalt von xxAPI.js den Eintrag Slider kopieren in die Custom.js?

Und in der Custom.js dann XXSLIDER1 draus machen. Und dann beist es bei mir aus.


Normal müsste das doch auch in der Custom.css gehen?

Lg Andy

[HAPE]

Hallo Andy,

Du möchtest wahrscheinlich zwei Slider-Designs darstellen, da kann ich leider nicht helfen. Ich kratze auch nur an der CSS-Oberfläche und versuche diese zu verstehen.

Gruß
Hans-Peter