Entwicklung: xxAPI² HTML5 Client

[Winni]

Was sagt der HSClient denn da? wird die History dort gelöscht?

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

[NilsS]

großes update. Evtl müsst ihr das CSS der Werteingaben anpassen wenn ihr da was geändert habt.

Siehe Live Demovisu -> Popups <-

so nu geh ich aber pennen. hoffe ist ansonsten nix kaputt ;-)

[NilsS]

Temperatur Farben jetzt auch für den normalen XXKNOB.
Farben sind jetzt auch über hs.options veränderbar obwohl die glaub ich aber irgendwo genormt waren aber was zählt schon ne Norm wenn man Sie nicht mag.

[HAPE]

Hallo Nils,

sehr schön gemacht. Kann ich auch die Breite des Bogens verändern ebenso den Zahlenwert platzieren d.h. auf mein PopUp zuschneiden (Bild)?

Grüsse
Hans-Peter

[NilsS]

Du könntest auch dein ganzen Popup als xxtemplate erstellen, incl. der +/- Buttons

Erfordert ein bisschen javascript, erleichtert aber sicher durch Wegfall von xx Popup Seiten so einiges.

einfach mal so ab https://github.com/knxuf/xxAPI2/blob...xxapi2.js#L749 gucken wie es geht. Und dann einfach ein eigenes Template in der custom.js anlegen.

[NilsS]

Die Temperaturfarbenberechnung basiert auf ColorTemp.js

Die Dicke des Balken ist thickness entweder bei einem XXKNOB*thickness=.2
oder bei einer Werteingabe über Template XXOPTIONS*xxtemplate=TEMP;xxknob.thickness=.2

low und highwerte können bei beiden über temp.low=-10;temp.high=40; vorgegeben werden

[HAPE]

Ich versuche mich daran, wenn Du mir eine kurze Beschreibung gibst, wie ich so ein Template in der custom.js anlege.

Gruß
Hans-Peter

[NilsS]

genauso wie in der xxapi2.js

kopier doch einfach eins raus und probier.

obj.popupbox ist das div in dem alles drin ist, dem anschließend noch die Titelleiste prepended wird.

xxAPI.xxtemplates.MYTEMP = function ( obj ) {
    obj.popupbox.addClass("mytemperaturepopup"); 
   // wir packen mal ne eigene Klasse dran, dann können wir Hintergrund etc per css machen
    obj.options.temp = $.extend({
        "low"   : 2,
        "high"  : 28
    },obj.options.temp)
   // default vorgaben wenn nix eingertragen ist für die Temperatur low/hig Werte

    obj.options.xxknob = $.extend({
        "angleArc"      : 250,
        "angleOffset"   : -125,
        "step"          : .1,
        "draw"          : function() {
            this.o.fgColor = hs.functions.temp2rgb(obj.options.temp.low ,obj.options.temp.high, this.cv);
        }
    },obj.options.xxknob);
   // Defaultwerte für den knob, du könntest z.B. "displayInput" auf false setzen und den wert in der draw funktion auf ein eigenes html element (_myvalue.text(this.cv) ) schreiben das du hier anlegst und später selbst zur popupbox mit obj.popupbox.append(_myvalue) hinzufügst.


    xxAPI.xxtemplates.xxknob ( obj ); // edit 22.02 lowercase for secondary functions
   // das rufen wir einfach auf, mit oben angegebenen optionen dann brauchen wir den code nicht doppelt machen

  // Hier würdest du dein div/span _myvalue hinzufügen, genauso wie auch deine extra buttons, erstellen und funktionen zuweisen.


}

[NilsS]

Selbst deine Soll/Ist StatusHeizen und sonstige Komfor/standby/Frost könnte man über die Werteingabe mit einem Template erschlagen, man braucht zwar Hilfe von einem Logikbaustein der alles zusammensetzt.

ein 4Byte verknüpfen

[Ist Temp  EIS5 ]   [diff zu soll]   [RTR status byte]
00000000 00000000      00000000          00000000

[NilsS]

Könntest Du bei XXKNOB noch einen XXKNOB2 und XXKNOB4 umsetzen?

Wäre schön wenn man mit einem Regler z.B, Solltemperatur und Luftgüte oder min-max Wert einstellen könnte.

Den xxknob4 stelle ich mir als RBGW Regler vor

Kannst du auch selber bauen.
Siehe Demo -> Steuerung
einfach mehrere XXKNOBS übereinander legen.

Ist allerdings ein wenig bastel bis man die richtige Größe getroffen hat

[michel38]

Ich nutze ja auch stellenweise die Popups vom Hans-Peter, da Sie sehr gut bei mir passen. Doch von javascript hab ich null Ahnung.

mfG
Uwe

[NilsS]

Hans-Peter stellt uns seinen Theme nachher sicher zur Verfügung

[HAPE]

Hans-Peter stellt uns seinen Theme nachher sicher zur Verfügung

Das wird so sein, wenn ich es hinkriege. Aber zunächst müßte ich erstmal wissen, wo ich das Script genau hin kopiere und vor allen Dingen wie ich es aufrufe, um daran rumzuschrauben. Uwe, da geht es mir wie Dir. Nils schöpft aus dem Vollen, wir suchen in den Krümeln.

Das Script aus https://github.com/knxuf/xxAPI2/blob...xxapi2.js#L749 bzw.

     Code:
     xxAPI.xxtemplates.MYTEMP = function ( obj ) {     obj.popupbox.addClass("mytemperaturepopup");     // wir packen mal ne eigene Klasse dran, dann können wir Hintergrund etc per css machen     obj.options.temp = $.extend({         "low"   : 2,         "high"  : 28     },obj.options.temp)    // default vorgaben wenn nix eingertragen ist für die Temperatur low/hig Werte      obj.options.xxknob = $.extend({         "angleArc"      : 250,         "angleOffset"   : -125,         "step"          : .1,         "draw"          : function() {             this.o.fgColor = hs.functions.temp2rgb(obj.options.temp.low ,obj.options.temp.high, this.cv);         }     },obj.options.xxknob);    // Defaultwerte für den knob, du könntest z.B. "displayInput" auf false setzen und den wert in der draw funktion auf ein eigenes html element (_myvalue.text(this.cv) ) schreiben das du hier anlegst und später selbst zur popupbox mit obj.popupbox.append(_myvalue) hinzufügst.       xxAPI.xxtemplates.XXKNOB ( obj );    // das rufen wir einfach auf, mit oben angegebenen optionen dann brauchen wir den code nicht doppelt machen    // Hier würdest du dein div/span _myvalue hinzufügen, genauso wie auch deine extra buttons, erstellen und funktionen zuweisen.   }

habe ich abwechselnd in die custom.js kopiert, es ergab aber kein Ereignis. In der Konsole habe ich auch nichts entdeckt.

Vielleicht geht es mit einer Anleitung?

Grüße
Hans-Peter

[NilsS]

Vielleicht geht es mit einer Anleitung?

Das fasse ich als Drohung auf das selbst zu machen
Achtung User droht mit Dokuwunsch wenn feature nicht einfacher wird

also eigentlich gehört das custom.js in das gleiche Verzeichnis wie die xstart.htm auf dem HS.
Das ist aber zum coden doof, daher hab ich hier im Thread https://knx-user-forum.de/459372-post489.html den hsproxy gepostet.

Das ist quasi ein python Proxyserver für den HS, der aber splitet zwischen echten HS anfragen /hsgui etc und den Dingen die unter /opt liegen.

Alles was unter /opt liegt wird aus dem Verzeichnis in dem der hsproxy.py liegt geholt.

Damit kannst du also ohne HS Neustarts lokal auf dem Rechner basteln und verbindest dich dort mit deinem Browser einfach nicht wie gewohnt auf den HS, sondern auf http://localhost/opt/xxapi/xstart.htm

[NilsS]

Wie weit hast du die Werteingabe Templates denn schon eingebunden?

Ich hatte vergessen das ich das nur commited habe ohne was dazu zu schreiben xD


Also für das Werteingabe Popup mit Template poste ich einfach mal eben die Beispiele

Seite Popups -> (jeweils Tab:Titel 2.Zeile)
iDimmer Werteingabe 2.Reihe

XXOPTIONS*xxtemplate=DIMMER;top:MOUSE+0px;xxknob.fgcolor=red;

iDimmer Werteingabe 3.Reihe

XXOPTIONS*xxtemplate=DIMMER;top:MOUSE+0px;xxknob.fgcolor=orange;

Temperatur Werteingabe 3.Reihe

XXOPTIONS*top:MOUSE+0px;xxtemplate=TEMP;temp.low=10;temp.high=60

iDimmer Werteingabe 4.Reihe

XXOPTIONS*xxtemplate=DIMMER;top:MOUSE+0px;

Dimmer Werteingabe 4.Reihe

XXOPTIONS*xxtemplate=DIMMER;xxknob.fgcolor=red;

Speaker Werteingabe 4.Reihe

XXOPTIONS*xxtemplate=SPEAKER

Temperatur Werteingabe 4.Reihe

XXOPTIONS*xxtemplate=TEMP