Entwicklung: xxAPI² HTML5 Client

[NilsS]

hmm,

"DOMNodeInsertedIntoDocument" ist deprecated
jQuery: detecting new elements with the MutationObserver object | Gabriele Romanato

Sind einige Stellen die ich da anpassen muss.

[NilsS]

Betroffene Funktionen sind.
XXIFRAME,XXKNOB,Kameraarchiv Popup und die zentrieren Funktion.

[HAPE]

Hallo Nils,

hier noch mal eine Zusammenfassung:

Bild_1: So stellt es sich im Augenblick in FF und IE dar.
Bild_2/3: So sollte es aussehen.
Ergänzt habe ich das Popup mit den Regler-Funktionen. Ist es machbar, dass eine aktivierte Reglerfunktion mit dem gelben Ring markert wird, der dann je nach Wahl umschaltet?

Die Überschrift sollte in Größe und Position veränderbar sein.
Zur Ergänzung sollte unten die Ist-Temperatur angezeigt werden, damit die Regelbweichung erkennbar wird.
Der Farbverlauf des Knobs sollte von blau(kalt) nach rot(warm) dargestellt bzw. sollte je nach Geschmack selbst veränderbar sein.

Alternativ bitte den Knob eigenständig in Durchmesser 140p und Segmentbreite 8p zur freien Gestaltung eines Popups gemäß der freien Visu.

Wie in Bild_2:
https://knx-user-forum.de/466605-post778.html

Danke und Gruß
Hans-Peter

[NilsS]

Moin Hans-Peter,

ist alles bereits möglich. Schrift der Überschrift ist entweder Systemschriften -> Werteingabe oder du überschreibst die Werte so wie ich es im Beispiel gemacht habe einfach mit !important in CSS .popuptitle. Eine Ist-Temperatur sowie auch der RTR Status sind NUR in Verbindung mit Logikbausteinen möglich, die die Werte auf ein 4Byte iKO vereinen.

Was Design betrifft seid ihr auf euch gestellt. Wie gesagt, möglich ist alles, und falls es nicht geht würde ich auch die nötigen Optionen nach aussen führen. Das müsst ihr aber schon selbst machen. Eure vorherigen HTML Popups hat Gira euch ja auch nicht gebaut.

[NilsS]

Alternativ bitte den Knob eigenständig in Durchmesser 140p und Segmentbreite 8p zur freien Gestaltung eines Popups gemäß der freien Visu.

Die Optionen sind doch alle da, ich weiß nicht was dir da fehlt.
Textfeld 140x140 anlegen und die Breite ist über XXOPTIONS*thickness=.xx

Behaviors :

min : min value | default=0.
max : max value | default=100.
step : step size | default=1.
angleOffset : starting angle in degrees | default=0.
angleArc : arc size in degrees | default=360.
stopper : stop at min & max on keydown/mousewheel | default=true.
readOnly : disable input and events | default=false.
rotation : direction of progression | default=clockwise.
UI :

cursor : display mode "cursor", cursor size could be changed passing a numeric value to the option, default width is used when passing boolean value "true" | default=gauge.
thickness : gauge thickness.
lineCap : gauge stroke endings. | default=butt, round=rounded line endings
width : dial width.
displayInput : default=true | false=hide input.
displayPrevious : default=false | true=displays the previous value with transparency.
fgColor : foreground color.
inputColor : input value (number) color.
font : font family.
fontWeight : font weight.
bgColor : background color.

Diese Optionen sind die verfügbaren und die sind auch alle umsetzbar.

[Winni]

Ich habs grad ausprobiert, für mich sieht es so aus, als ob der ganze Aufrufstack bis zum ersten Auftreten der "Rücksprung-Seite" abgebaut wird. Da dies nicht die erste Seite ist (XXAPI-INIT -> Start -> Rücksprungseite ->.......) kann ich nach den Rücksprung mit zurück noch auf Start und XXAPI-Init

Ich bring das nochmal hoch. Ich bin nach wie vor der Meinung Visu-Alerts gehören nicht in die History der Navigation. Auch der Rückprung nach einer gewissen Zeit ist dafür da, um wieder in einem definierten Startpunkt anzufangen. Ansonsten landet man bei zurück z.B. plötzlich bei uralten Telefonanrufen.

Winni

[NilsS]

Sorry, aber da irrst du.
a) die HSAV löscht das auch nicht / HSclient hab ich nicht ausprobiert
b) popups werden nicht in der Historie geführt, also kannst du bei zurück auch nicht darin landen.

EDIT: es hällt dich aber nichts davon ab auf eine Seite zurückzuspringen, die ein XXEXECUTE*item.session.history=[]; macht.

[NilsS]

b) popups werden nicht in der Historie geführt, also kannst du bei zurück auch nicht darin landen.

Da irrte ich, das ging nicht, weil wenn mehrere POPups über einander lagen, dann muss der Zurückknopf ja wissen welches die aktuelle Seite ist.

[NilsS]

update: Popups werden nach dem laden einer nicht Popupseite aus der History entfernt.

[Winni]

update: Popups werden nach dem laden einer nicht Popupseite aus der History entfernt.

Hallo Nils,
ich fürchte so einfach ist es nicht, dieses Verhalten sollte nicht am Popup hängen. Ich habe Popup-Seiten die auch in der normalen Navigation eine Rolle spielen und nur deshalb als Popup definiert sind, damit der Visu-Alarm diese Seiten nicht beliebig oft öffnet.
Hast du keine Chance dies am "Visu-Alarm" festzumachen. Visu-Alarm-Seiten sollten nicht in die History einfliesen.

Winni

[Winni]

Nachdem du ja sagst, man darf hier alle Fragen stellen... Nach vielen Versuchen, bei denen ich nicht weiterkomme nun mein Problem mit der Temperaturanzeige:

Bei mir ist die Schrift der Temperaturanzeige (Wert) zu gross, keine Ahnung wie ich sie kleiner bekomme. font family und font weight hat doch nichts mit Größe zu tun (ich denke da z.B. an Arial und bold)
Ich hätte gerne eine Maske für die Wertausgabe, damit das Bild beim Ändern ruhiger bleibt (insbesondere Nachkomma)
Ich hätte versucht, die Schriftfarbe, wie die Balkenfarbe wechseln zu lassen, auch das will mir nicht gelingen (ist aber nicht so wichtig)
Min/Max aus dem Experten übersteuert Option ;temp.low=7;temp.high=28;
Ich hätte es umgekehrt erwartet, oder mach ich da auch was falsch.
displayPrevious true funktioniert bei mir auch nicht

so hab' ich das mit Farbe und displayPrevious probiert:

obj.options.xxknob = $.extend({
        "angleArc"      : 250,
        "angleOffset"   : -125,
        "step"          : .2,
	"lineCap"       : "round",
	"displayPrevious" : false,
        "draw"          : function() {
		this.o.inputColor = hs.functions.temp2rgb(obj.options.temp.low ,obj.options.temp.high, this.cv);
		this.o.fgColor = hs.functions.temp2rgb(obj.options.temp.low ,obj.options.temp.high, this.cv);
        }

Ach wär das toll, wenn ich dem Bereich dein Können hätte...

[NilsS]

Moin Winni,

wir haben das Spielzimmer für die Kinder renoviert, daher war ich höchstens zwischendurch mal vom pad online. Also das mit der Inputcolor kannst du mit css machen.

        "draw"          : function() {
            this.o.fgColor = hs.functions.temp2rgb(obj.options.temp.low ,obj.options.temp.high, this.cv);
            obj.knob_input.css("color",hs.functions.temp2rgb(obj.options.temp.low ,obj.options.temp.high, this.cv));

        }

warum das displayPrevious bei den Popups nicht funktioniert weiß ich auch nicht oO
Das funktioniert auch beim XXKNOB* nur so halb, da die Farbtemperaturanpassung da auch erst nach dem loslassen wirkt.

[NilsS]

Ok ich habs gefunden, ist zwar doofes nicht einheitliches Verhalten. Aber da müsst ihr euch beim Entwickler vom KNOB beschweren.

        "displayPrevious" : true,
        "draw"          : function() {
            if(this.o.displayPrevious) {
                this.fgColor = hs.functions.temp2rgb(obj.options.temp.low ,obj.options.temp.high, this.cv).replace(")",",0.6)").replace("rgb","rgba");
                this.pColor = hs.functions.temp2rgb(obj.options.temp.low ,obj.options.temp.high, this.cv).replace(")",",0.4)").replace("rgb","rgba");
                debug(1,"draw",this.o);
            } else {
                this.o.fgColor = hs.functions.temp2rgb(obj.options.temp.low ,obj.options.temp.high, this.cv);
            }
        }

das Problem liegt auch daran, das intern im KNOB eine Funktion h2rgba verwendet wird, die davon ausgeht das die Farben im Hex Format sind. Wir haben aber als Rückgabewert von der Temperatur zu Farbe Funktion rgb und aus der config teils Farbnamen.

[NilsS]

Ich hab das mal fest mit rein genommen, sodass displayPrevious auch direkt funktioniert

[HAPE]

Hallo Nils,
ich habe den Dimmer 0-100% und die Temperaturanzeige 10-26° aus der „Steuerung“ in meine Popup`s eingebaut und versucht, folgende Anpassungen über xxoptions* zu machen:
Dimmer (Bild_1):
XXOPTIONS*thickness=.12;

Temperatur (Bild_2):
XXOPTIONS*angleArc=240;angleOffset=-120;temp.low=10;temp.high=26;thickness=.12;

Was ich nicht weiß:
Wie verändere ich die Position und Größe des Zahlenwertes sowie die Schriftstärke (bold) und Farbe (beim Dimmwert)?
Wie bekomme ich beim Temperaturwert eine Kommastelle?
Wie kann ich den Farbverlauf im Segment der Temperaturanzeige auf blau-rot ändern?
Ansonsten funktioniert es großartig.

Edit:
Noch besser wäre es, wenn ich die Ziffernanzeige vom Knob ganz weg hätte, da die bisherige auch vorhanden und besser händelbar ist.

Weitere Frage:
Wo kann ich die Zentrierung der Visu abschalten? Zum einen brauche ich zwecks Ausmessen der Oberfläche und An-und Einpassen von Visuelementen eine Darstellung 1:1, zum anderen habe ich das Revox-Plugin, das hat eine fest eingestellte Größe und skaliert nicht mit.


Danke und Gruß
Hans-Peter