Slider mit Bargraph

[hx5]

Okay super ich danke dir erst mal. Der Dimmer läuft jetzt so weit. Den Baustein an sich kann man aktuell für die Jalousie oder Heizungs Regelung nicht verwenden oder? Denke nicht wegen dem Eingang A2 mit dem Dpt3. Seh ich das richtig?

Theoretisch kannst du an E3/E4 alles Positions-Ein- und Ausgänge hängen die es bei KNX gibt. E1 kann theoretisch auch mit Ab/Auf (Langzeit-GA) des Jalousieaktors hängen. Im Detail kann es aber viele Einschränkungen geben. Rollläden brauchen z.B. für das Hochfahren länger als zum runterfahren, es gibt Umschaltzeiten.....

Ich werde mir nächste Woche Gedanken machen ob ich diese Funktion integriere oder einen separaten LBS mache.

Wie das bei Raffstoren/Jalousien ist kann ich nicht genau sagen weil ich keine habe. Evtl geht mit zwei Simulations-LBS (Höhe und Pos. Lamellen).

Temperaturen muss man nicht simulieren oder? Da die sich meist langsam ändern kann man sich sämtliche Änderungen gut über den KNX-Bus schicken lassen....

[Andreas1986]

Mit den Temperaturen hast du recht. Soweit wegen der Regelung noch nicht gedacht. Da das träge ist denk ich kann man sich das wirklich sparen.

LG Andy.

[hx5]

Hatte heute Zeit und habe eben die offizielle Version veröffentlicht wo ich unter anderem auch noch ein paar Kleinigkeiten verbessert habe.....

[DerSeppel]

Ich hole den hier mal wieder hoch. Versuche grade was umzusetzen und stehe voll im Wald.
Mein erster Versuch einen ansehnlichen Slider nachzubauen.

Ich scheitere an der Füllung (aka "Schleimspur"). Die würde ich gerne gestreift ausführen, aber mit gleichbleibendem Abstand zwischen den Streifen.
Wenn der Slider bei 50% steht, soll also die Hälfte des Bereichs mit Streifen "schraffiert" sein.

Mit Gradienten komme ich überhaupt nicht hin. Egal was ich versuche. Glaube auch nicht, dass man den Streifenabstand per gradient gleichbleibend hinbekommt, während der Füllgrad variiert.

Alternative: Ich nehme ein Universalobjekt, verpasse dem meine Streifen als Hintergrund mit "repeat". Sieht, wenn ich die Größe manuell anpasse auch genau so aus wie ich das haben will. Mit der dynamischen Anpassung der Höhe komme ich allerdings nicht klar.

Ich dachte mir ich gebe die Höhe mit 1 und setze dann ΔHöhe auf "{range(0,100,300)}".
Funktioniert soweit, aber dann wächst der Bereich von oben nach unten. Mein Slider soll aber von unten nach oben wachsen.
Ändere ich das Vorzeichen von Range (-300) passiert gar nichts mehr.
Drehung des Elements um 180 Grad bringt auch nichts.

Hat jemand eine Idee wie man das mit einem Gradienten machen könnte? Oder mit dem Bild?

[saegefisch]

Hi,

au contraire... ca va bien! Seit meiner ersten Visu von 2016 nutze ich bereits diese Lösung für die Rolläden: Von 0 - 180 füllt sich von oben gestreift (blau mit grauen Schlitzen) der Rolladen bis runter, mit einem per z-index darüber liegenden Element fülle ich dann von unten nach oben ab 180 - 255 ohne Schlitze; damit wird die Realität meiner Rollläden recht exakt abgbildet inkl. der Schlitze.

Technisch zur Lösung: Hier musst Du meine Spreizung auf 0 bis 180 noch raus nehmen und Deine Zielfarben adjustieren, aber technisch bekommst Du so einen Hintergrund mit immer gleich breitem Streifenmuster, dass den iKO-Werts in seiner Länge abbildet.
So hat man eine "gestreifte Schleimspur", ohne "Künstler-Schnecke" sein zu müssen...

-webkit-linear-gradient(top,transparent 0%, transparent {#*1.41/2.55}%, #4a4b50 {#*1.41/2.55}%, #4a4b50 100%),
-webkit-repeating-linear-gradient(top,#7896ec 0px, #7896ec 10px, #4a4b50 10px, #4a4b50 12px)

Viel Erfolg und Spaß damit!

edomi streifen.JPG

[givemeone]

Hallo saegefisch,
sorry der Anfängerfrager: Kannst Du mit die Lösung genauer erklären?
Bei mir sieht das sehr komisch aus, und der Hintergrund ist horizontal statt vertikal.
Ich bräuchte genau so eine Bar für meine Rollos.

sG Joe

[saegefisch]

Hey DerSeppel, ist das eine Lösung mit Gradient, wie Du sie suchst ("Streifenabstand per gradient gleichbleibend hinbekommt, während der Füllgrad variiert") oder habe ich Dich falsch verstanden?

Hey givemeone, klar, gerne:

• Ich habe zwei ansonsten exakt gleiche und genau übereinander liegende Universalelemente (UE) mit Bezug auf das selbe iKO mit der RM-Position des Rollladens.
• Wenn Du den Hintergrund drehen willst, dann gibt es mehrere Möglichkeiten: Du drehst Du das Universalelement oder in der Designvorlage (so habe ich es bei dem "oberen" UE mit 180° gemacht) oder Du ersetzt "top" entsprechend -> siehe Doku zu webkit-linear-gradient zu den Möglichkeiten. Warum habe ich die 2. Option gewählt: Ich arbeite fast konsequent mit Designvorlagen (macht ganz viel vieleinfacher und effizienter) und rate auch Dir dazu. In der Hintergrund-Definition fand ich es "ungedreht" einfacher zu arbeiten, weil ich dann nicht umdenken muss, sondern mir das von der Design-Vorlage später abgenommen wird)
• Das "untere" (Z-Index kleiner) hat als Hintergrund den Hintergrund mit der oben genannten Farb-Definition und füllt mit Streifen-Muster von oben nach unten und erreicht 100% schon mit dem Grenzwert.
• Das "obere" (Z-Index höher) hat als Hintegrund die folgende Farb-Definition und füllt von unten nach oben (aber erst ab Grenzwert).

-webkit-linear-gradient(top,rgba(120,150,236,1) 0%,rgba(120,150,236,1) {(#-180)*3.4/2.55}%, rgba(120,150,236,0.1) {(#-180)*3.4/2.55}%, rgba(120,150,236,0.1) 100%)

Damit sieht die Visu ziemlich exakt wie ein Rollladen aus. Bei der Hintergrund-Definition kann man übrigens wunderbar mit der Vorschau arbeiten und testen ganz ohne Aktivieren. So kannst Du auch gut sehen, was bis zum Grenzwert "180" passiert und was danach. Die Umrechung der RM-Position vom Rollladen-Aktor von 255 auf 100% erfolgt übrigens direkt in den Definitionen, es braucht also kein umgerechnetes iKO dafür.

[DerSeppel]

Hey DerSeppel, ist das eine Lösung mit Gradient, wie Du sie suchst ("Streifenabstand per gradient gleichbleibend hinbekommt, während der Füllgrad variiert") oder habe ich Dich falsch verstanden?

Ja. Ich versuche im Prinzip den QC nach zu bauen. Wobei ich das Design stellenweise modernisiere/anpasse.
Da ist deine Ansicht echt eine sehr coole Idee.

Im QC sieht das so aus:
Zwischenablage01.png

Und so in der Art wollte ich das übernehmen.

[givemeone]

Hallo!

klar, gerne

DANKE Vielmals!! Doch sorry, EDOMI Logiken verstehe ich, sind toll, aber in das Denken der Visu bin ich noch nicht dahinter gekommen...
Eine Einstigsanleitung (die ersten 5 Schritte in der Visu) gibt es nicht, oder? Das Video hat mir leider auch keine Idee gegeben...
Hab auch schon länger die Suchen bemüht und auch diverse Visu-Projekte angesehen.... Aber leider habe ich noch keine Idee wie ich
es in mein Umfeld übernehmen kann.

Habe das nun so angelegt und sehe in der Visu die 2 gelben Rechtecke des Universalelements übereinandergelegt.

kann man übrigens wunderbar mit der Vorschau arbeiten und testen ganz ohne Aktivieren

Wie? Ich verschiebe mir da beim Klick immer die Elemente...

Zusätzlich: Wenn ich jetzt in der Visu auf so ein Universalelement klicke, wird kein Wert an das KO übergeben. Woher soll das Universalelement wissen, dass oben 0 und unten 100 ist?
Sorry, dass ich hier absolute newbiefragen aufwerfe....

[saegefisch]

givemeone :
erst einmal. Nicht aufgeben und weiter versuchen.
Zweitens rate ich Dir: Wenn Dir das Grundverständnis für manche Werkzeuge und Vorgehensweisen fehlen, dann rate ich Dir dazu, es zunächst einfach zu versuchen. Beginne nicht mit einer zweilagigen Rollladen-Anzeige, da reicht auch erst einmal einlagig und ohne Streifen. Das obige kann man leicht später nachrüsten, wenn einlagig und einfarbig funktioniert. In meinem Screenshot sieht Du z.B auch einen dezenten Schattenwurf. Das sieht schon ganz gut aus (wenn man diese Art der Optik mag) - auch ohne Streifen.
Visu-Element anlegen.
Wenn statisch, dann ohne iKO (z.B. eine Überschrift), wenn dynamisch, dann wähle ein iKO. Das kann für die Ausgabe als Text verwendet werden {#} oder/und für die Steuerung in Designs zum verschieben, rotieren, einfärben,... Für die Ausgabe eines Werts ("19%", "22,4°C",...) oder z.B. eine Rollladen oder Licht-Darstellung.

--> Design
--> Design-Vorlage
--> vorhandene Designvorlage wählen oder neu anlegen oder kopieren und anpassen (letzteres hilft Dir vielleicht)
--> Kontext-Menü zur Designvorlage --> Element bearbeiten
--> Individuell
--> dort jetzt alles so einrichten, wie Du möchtest
--> Vordergrundfarbe (für Schriften) und/oder Hintergrundfarbe für Füllung wählen
--> auch hier wieder: vorhandene Farbe wählen oder neu anlegen oder kopieren und Kopie anpassen.

Mit diesem Vorgehen baust Du Dir nach und nach ein Set an Vordergrund- und Hintergrundfarben und darauf aufbauend Deisgnvorlagen auf. Wenn Du die ausschließlich(!) nutzt, kannst Du sehr leicht mit der Anpassung einer Farbe oder einer Designvorlage alle Visu.Element, die sie nutzen ändern. Alle Rollläden hatten gestern einen blauen Balken für die Höhe, aber jemand will es alles in grün. Nur andere Hintergrundfarbe im Design wählen und alle 10 Rollläden sind grün. Das ist wie in Word die Formatvorlagen. Wer sie nicht nutzt, liebt die Mausarbeit oder hat zu viel Zeit. die lokale Änderungen von Designeinstellungen in einem Visulement solltest Du möglichst lassen, wenn Du es einfach und homogen magst.

Ich habe es etwas anders gemacht: Ich habe mir vorher ein Farbenset für VG und HG angelegt. Aus diesen bedienen ich mich seit geraumer Zeit. Damit ist die gesamte Visu über alle Seiten homogen und hat ein - für mich - angenehmes Farbschema, Aber Du kannst Die Farben auch on-the-fly anlegen wie oben beschrieben.

Viel Erfolg!

------

ein wenig einfacher zum Einsteig:

-webkit-linear-gradient --> linear, es gibt auch radial --> siehe google.Hilfe zu webkit-linear-gradient
(left, --> Ausrichtung von links nach rechts oder "top" für oben nach unten --> siehe google.Hilfe zu webkit-linear-gradient
rgba(255,0,0,1) 0%, --> anfangsfarbe...
rgba(255,0,0,1) {#/2.55}%, --> anfangsfarbe ohne Frabverlauf (weil gelicher Farbwert) bis zum dynmischen Wert des iKO #
rgba(0,255,0,1) {#/2.55}%, --> 2. Farbe ab dynmischen Wert des iKO # (mit Umrechung von GA-Wert 0.255 auf hier nötige 0-100%
rgba(0,255,0,1) 100%) --> bis zum Ende

rgba ----> RGB+4. Wert = Transparenz, wobei 1 = undurchsichtig und 0 = durchsichtig

Daher z.B. auch:
-webkit-linear-gradient(left,rgba(255,0,0,1) 0%,rgba(255,0,0,1) {#/2.55}%, rgba(255,0,0,0.3) {#/2.55}%, rgba(255,0,0,0.3) 100%)

In der Definition der Farbe kannst Du die obige Farbdefinition mit "Vorschau" testen mit jedem Wert zwischen 0...255

[mfd]

-webkit-linear-gradient(top,transparent 0%, transparent {#*1.41/2.55}%, #4a4b50 {#*1.41/2.55}%, #4a4b50 100%),
-webkit-repeating-linear-gradient(top,#7896ec 0px, #7896ec 10px, #4a4b50 10px, #4a4b50 12px)

Ich versuche gerade einen Balken mit Unterbrechungen zu gestalten, das geht aber offenbar mit linear-gradient bzw. repeating-linear-gradient nicht so einfach, zumindest nicht wenn der Hintergrund bei den Unterbrechungen durchscheinen (Transparenz) soll.

Gibt es da vielleicht einen Trick um das doch irgendwie hinzubekommen?

[saegefisch]

Schau mal bei meinem Beitrag #52, da verwende ich rgba(), also mit Transparenz über den Alpha-Kanal...

[mfd]

Transparenz an sich klappt schon, nur ist mein Wunsch vermutlich nicht direkt umsetzbar.
Als Beispiel, die linke Seite kann ich per CSS erzeugen. Also einmal ein repeating-linear-gradient (für die grauen Trenner) darunter ein linear-gradient für die roten Werte, darunter einer für die grünen Werte.
Nur hätte ich jetzt gerne die grauen Trenner transparent, so wie im rechten Beispiel, das aus einzelnen Universalelementen aufgebaut ist.
status_bar.PNG

[vento66]

Dann musst Du ein 2.dynamisches Design erzeugen, welches ab z.B. 90 Prozent angezeigt wird. Dort tauscht Du das Grau gegen Transparent aus.

[saegefisch]

Mach‘s doch anders herum: nach den gradienten für rot und grün und das grau ist nicht da, weil transparent. So hatte ich es verstanden, gemeint und selbst im Einsatz (allerdings einfarbig, nicht zweifarbig). Oder ich habe die völlig falsch verstanden, was Du eigentlich visualisieren willst... ein steigender Wert würde erst mehr und mehr grüne Balken zeigen, irgendwann zusätzlich rote. Dazwischen gähnende Transparenz...

und wie Michael richtig schreibt: halt 2 UE für die Farben, das ist easy. Geht vielleicht aber auch in 1 UE, müsste man mal knobeln...