Benutzerdefinierte Funktionen (custom.js/custom.css)

[NilsS]

EDIT: Ich verschiebe betreffendes mal aus dem Entwicklungsthread hierher, daher kann es sein das der Kontext fehlt. Macht es aber einfacher als xx Seiten druchzublättern um es zu finden. (siehe https://knx-user-forum.de/xxapi/4057...tom-css.html#9 )


Ist in der Aktuellen Version noch einfacher.

alle möglichen Funktionen liegen undtr xxAPI.functions du brauchst nur eine neue Funktion dort mit

xxAPI.functions.XXBLAH = function ( oarg ) {
    // dostuff oarg.item.text=oarg.args[2];
}

Das ist geplant das nachher wie die custom.css einzubinden.

ABER, es wird keine Nummernkreise geben, denn entweder findet man sich damit ab das die Funktion überschrieben wird, oder man teilt sie und sie wird implementiert wenn sie gut ist.

[NilsS]

in der custom.css war ein ; nach dem css-selector im git liegt ne aktuelle Version oder du pastest einfach das rein.

.visuelement {
    overflow: initial !important; /* Text is not cut off */ 
}

[Winni]

Damit man mal sieht wie einfach man nun die XXAPI² um weitere Funktionen erweitern kann (auch als Laie):
Ich habe folgende Zeilen an die von Nils zur Verfügung gestellten custom.js angehängt:

xxAPI.functions.XXTEXTCOLORED = function ( oarg ) {
debug(2,"XXTEXTCOLORED:",oarg);
oarg.item.color = oarg.args[1];
oarg.item.text = oarg.args[2];
}

Nun kann man einen dynamischen Text in der Form
XXTEXTCOLORED*red*Dies ist ein roter Text
generieren, der dann automatisch als Dies ist ein roter Text ausgegeben wird. Endlich ist man also in der Lage, die Farbe abhängig von einem anderen Kommunikationsobjekt als dem Text selber einzufärben und trotzdem dynamisch bleiben (z.B. Wetterwarnung abhängig von der Warnstufe).

Die Farbe kann nun mit den entsprechend zulässigen Farbbegriffen z.B. red, in Hex #FF0000 oder als rgb(255,0,0) übergeben werden

Versiertere Entwickler können hier mit Sicherheit noch ganz tolle Sachen zaubern und evtl. uns allen zur Verfügung stellen.

[NilsS]

Clicks und Longpress sollten nun ein wenig bunt sein.

Kann jeder auch selber per custom.css anpassen.

Die Klassen sind

.activevisuelement::after {
    border-radius: 15px;
    background-color: rgba(200,0,0,0.1);
}

für die Clicks, sollte auch mit background-image gehen.

und für Longpress die Klassen .xxlongpressshort::after und .xxlongpresslong::after

[NilsS]

@Hans
Wenn du dir folgendes in die custom.js kopierst kommt deine Uhr wieder.

hs.functions.element_loader("js/station-clock.js");
setTimeout(function () {
    var _canvas = $("<canvas />",{
        "id"     : "bahnhofsuhr_canvas",
        "width"  : "146px",
        "css"    : {
            "position"  : "absolute",
            "top"       : "696px",
            "left"      : "953px",
            "border"    : "0px",
        },
    });
    $("body").append(_canvas);
    var _clock = new StationClock("bahnhofsuhr_canvas");
    _clock.body = StationClock.SmallWhiteBody;
    _clock.dial = StationClock.SwissStrokeDial;
    _clock.hourHand = StationClock.PointedHourHand;
    _clock.minuteHand = StationClock.PointedMinuteHand;
    _clock.secondHand = StationClock.HoleShapedSecondHand;
    _clock.boss = StationClock.NoBoss;
    _clock.minuteHandBehavoir = StationClock.BouncingMinuteHand;
    _clock.secondHandBehavoir = StationClock.BouncingSecondHand;    

    setInterval(function() {
        _clock.draw();
    },500);
},1000);

[NilsS]

@Hans
Ich hab mal spaßeshalber aus deiner Uhr ein custom XXANALOGCLOCK gemacht

hs.functions.element_loader("js/station-clock.js");
xxAPI.functions.XXANALOGCLOCK = function( oarg ) {
    var _id = "clock_" + oarg.item.uid;
    oarg.item.html = "<canvas id='" + _id + "' width='" + oarg.item.width + "px' height='" + oarg.item.height + "px' />";
    oarg.item.xxapi.analogclock = new StationClock(_id);
    $.extend(oarg.item.xxapi.analogclock,{
        "body" : StationClock.SmallWhiteBody,
        "dial" : StationClock.SwissStrokeDial,
        "hourHand" : StationClock.PointedHourHand,
        "minuteHand" : StationClock.PointedMinuteHand,
        "secondHand" : StationClock.HoleShapedSecondHand,
        "boss" : StationClock.NoBoss,
        "minuteHandBehavoir" : StationClock.BouncingMinuteHand,
        "secondHandBehavoir" : StationClock.BouncingSecondHand
    });  
    oarg.item.next_update = 1;
    oarg.item.update_code = function ( oarg ) {
        oarg.item.xxapi.analogclock.draw();
        oarg.item.next_update = $.now() + 500;
    };
}

damit kannst du die Uhr ganz normal mit XXANALOGCLOCK* in der Visu plazieren.

EDIT: die station-clock.js muss hier runtergeladen werden und im Ordner js relativ zur xstart.htm gespeichert werden, ebenso wie die custom.js die im gleicher Ordnerebene wie die xstart.htm sein muss.

[NilsS]

Was du sonst aber auch einfach machen kannst.

kopiert dir die xstart.htm noch in einen anderen Ordner,
sodass du nachher
/opt/xxapi/xstart.htm und /opt/r3/xstart.htm hast

dann speicherst du in /opt/r3/custom.js

hs.auth.gui_refresh="R3";

dann kannst du dich über /opt/r3/xstart.htm mit langsamem Refresh einloggen.

[NilsS]

Du machst es "zu kompliziert" ;-)

xxAPI.functions.XXBACKGROUND = function ( oarg ) {
   oarg.item.page.object.css("background-image", hs.user.streaming ? oarg.args[1] : oarg.args[2]);

}

Du bist doch schon im Javascript, warum solltest du da also erst Text evaluiiren anstatt ihn direkt auszuführen.

btw. du kannst nachher (wenn du die start.htm mit offline cache nutzt) einfach in der xxapi.appcache in der Cache Sektion alle Dateien hinzufügen die Offline gespeichert werden. bgimg/1.png bgimg/2.png etc etc.. Wildcards funktionieren da nicht.

[NilsS]

Benutzerdefinierte Funktionen (custom.js/custom.css)

Ich verschiebe betreffendes mal aus dem Entwicklungsthread hierher, daher kann es sein das der Kontext fehlt. Macht es aber einfach als xx Seiten druchzublättern um es zu finden.

[HAPE]

Hallo Nils,

der Innenabstand der Zeilen stimmt nun, großartig, superklasse.

Zur Skalierung kann ich nicht viel sagen, da es sich nur am PC-Monitor von ca. 18,5" auf 20" vergrößert. Verschwommen ist da noch nichts, für mich in Ordnung.

PopUp:
Ich habe heute "XXPAGE*POPUP*top:50px;left:140px;" ausprobiert. Finde ich klasse, dass es sich über die ganze Fläche legt und positionierbar ist, vor allem, dass sich dahinter die Quadranten nicht neu laden müssen. Geht sauber und schnell. Ich würde das PopUp auch als Auswahlfenster nehmen wollen um daraus Seiten aufzurufen. Ebenso würde ich gerne die Abdunkelung des Hintergrundes auf meine Bedürfnisse einstellen wollen. Ist das machbar?

Grüße
Hans-Peter

[NilsS]

@Hans-Peter

#POPUP::before {
    content: "\A";
    position:   absolute;
    width: 100%;
    height: 100%;
    background-color: black;
    opacity:    0.5;
}

Das ist der Bereich den du in der custom.css überschreiben kannst.
wobei eigentlich nur die unteren beiden in betracht kommen.
Du kannst da aber natürlich alles was CSS hergibt nutzen.

Den Blur effect beim reconnect kannst du mit

.popupeffect {
    filter: blur(2px);
    -webkit-filter: blur(2px);
}

in der custom.css ändern.

[NilsS]

Ich hab die Klasse .popup mal in .popupeffect umbenannt, das trifft es besser

[Winni]

Hallo Nils,

du weiß ja, dass ich nach einer Möglichkeit Suche die Refreshzeiten aus dem Experten nicht nur fix über R1 zu nutzen.
Hab mich mal versucht, aber in der custom.js bin ich zu spät dran, kann zwar den Wert ändern, aber weiß nicht, wie ich nachladen könnte. Natürlich kann ich auf diese Arte jeden Wert einzeln übergeben, das ist mir aber doch etwas zu mühsam.

Mein Versuch:


var getURLParameter = function (name) {
return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.search)||[undefined,""])[1].replace(/\+/g, '%20'))||null;
};

xxAPI.functions.XXWIWURLSETUP = function ( oarg ) {
debug(2,"XXWIWURLSETUP",oarg);

var _erg = getURLParameter("Refresh");
if (_erg != "") {
if (_erg != hs.auth.gui_refresh) {
hs.auth.gui_refresh = _erg;
}
};

_erg = getURLParameter("Streaming");
if (_erg == "on")
hs.user.streaming = true;
if (_erg == "off")
hs.user.streaming = false;

}


Aufruf auf der xxAPI-INIT Seite mit XXWIWURLSETUP*
Der Wert wird gesetzt, Streaming on/off funktioniert für mich prima

Gruß
Winni

[NilsS]

So erstmal zu den Farben der Werteingabe.

.popupbox {
    background-color: #778899; /* Hintergrundfarbe der Werteingabe */
}

.popupbox > span {
   color: #FFFFE0; /* Überschrift Textfarbe */
   background-color: #FF8C00; /* Hintergrund */
}

div.werteingabe > div {
  background-color: white; /* Hintergrundfarbe Display */
  color: teal; /* Schriftfarbe Display */
}
input.werteingabe {
  background-color: white; /* Hintergrundfarbe Display */
  color: teal; /* Schriftfarbe Display */
}

li.popupboxbutton {
   color: #2f4f4f; /* Schriftfarbe Buttons */
   background-color: white; /*  Hintergrundfarbe Buttons */
}

/* Bei Bedarf können die Buttons auch mit Bildern versehen werden
  nth-child(1) ist die 1 nth-child(4) ist das "C" nth-child(5) ist die 4 usw.
*/
li.popupboxbutton:nth-child(16) {
    color: transparent;
    background-image: url(somepath.jpg);
}

[NilsS]

Kein Ahnung was du vorhast Winni, aber warum machst du nicht einfach in der custom.js

hs.auth.gui_refresh = hs.functions.get_query_parameter('refresh') || "R1";