Ankündigung

Einklappen
Keine Ankündigung bisher.

Benutzerdefinierte Funktionen (custom.js/custom.css)

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • NilsS
    hat ein Thema erstellt Benutzerdefinierte Funktionen (custom.js/custom.css)

    Benutzerdefinierte Funktionen (custom.js/custom.css)

    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
    Code:
    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.

  • knxhans
    antwortet
    Gute Frage, warum ich das nicht schon immer so gemacht habe? Wahrscheinlich weil es bisher auch so ging. Habe es jetzt in die custom.js eingebaut und jetzt geht es wieder. Danke Dir wieder mal Nils!

    Einen Kommentar schreiben:


  • NilsS
    antwortet
    warum machst du es nicht so wie in https://knx-user-forum.de/forum/play...642#post669642

    und lädst die station-clock.js in den ordner /cache (und passt den pfad in Hans Beispiel an)

    Du hast sonst immer eine externe Abhängigkeit die nicht gecached ist.

    Also noch mal step-by-step (wenn dein xxapi Pfad auch wirklich /opt/hsav/start.htm ist)
    * http://3quarks.com/downloads/Bahnhofsuhr.zip runterladen
    * station-clock.js aus dem zip im Ordner hsav/cache/station-clock.js speichern
    * folgendes in custom.js hinzufügen
    Code:
    hs.functions.element_loader("cache/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.GermanHourStrokeDial,
            "hourHand" : StationClock.PointedHourHand,
            "minuteHand" : StationClock.PointedMinuteHand,
            "secondHand" : StationClock.BarSecondHand,
            "boss" : StationClock.RedBoss,
            "minuteHandBehavoir" : StationClock.BouncingMinuteHand,
            "secondHandBehavoir" : StationClock.OverhastySecondHand
        });  
        oarg.item.next_update = 1;
        oarg.item.update_code = function ( oarg ) {
            oarg.item.xxapi.analogclock.draw();
            oarg.item.next_update = $.now() + 100;
        };
    }}
    * an der Stelle wo die Uhr sein soll XXANALOGCLOCK* als Textfeld anlegen in der Größe wie die Uhr sein soll
    * fertig

    Einen Kommentar schreiben:


  • knxhans
    antwortet
    Ich glaube ich stelle mich gerade wieder etwas dämlich an... Ich habe die analoguhr.js aus /example in /cache gelegt im hasv-Ordner. Dabei mußte ich aber den catche Ordner neu anlegen. Das XXEXECUTE auf der Visu INT Seite habe ich auch entsprechend angepasst. Leider ist das Problem immer noch vorhanden, weil ich bestimmt was falsch verstanden habe, oder? Nach Ausführung der Datei im Browser wird mir deren Inhalt angezeigt.

    Was mache ich falsch?

    Bildschirmfoto 2016-07-13 um 21.16.23.png Bildschirmfoto 2016-07-14 um 08.37.56.png Bildschirmfoto 2016-07-14 um 08.35.26.png Bildschirmfoto 2016-07-14 um 15.02.20.png Bildschirmfoto 2016-07-14 um 15.02.12.png

    Einen Kommentar schreiben:


  • NilsS
    antwortet
    Nein es hat sich nichts geändert AUSSER das die lastmodified Header jetzt richtig gesendet werden und vorher evtl. gerade ein nicht im Appcache befindliches Script "example/analoguhr.js" nicht richtig aktualisiert hat und vielleicht schon lange nicht mehr dort ist. Teste mal ob du das händisch aufrufen kannst im Browser.
    ich würde dir empfehlen das in den ordner cache/ zu legen, da es dann mit in den appcache geschrieben wird.

    Einen Kommentar schreiben:


  • knxhans
    antwortet
    NilsS Bei mir ist seit kurzem die tolle Analoguhr weg, stattdessen wird der Name des Platzhalters angezeigt. Mache ich was falsch oder hat sich diesbezüglich was geändert. Ich habe das seit Monaten nicht angefasst und bis gestern ging es.

    Bildschirmfoto 2016-07-13 um 21.16.00.png Bildschirmfoto 2016-07-13 um 21.16.23.png ​​​​​​​

    Einen Kommentar schreiben:


  • NilsS
    antwortet
    Jo undokumentiert
    https://gist.github.com/uweschmelzer/5597784

    Einen Kommentar schreiben:


  • TirochH
    antwortet
    Zitat von NilsS Beitrag anzeigen
    Wenn du wie du oben geschrieben hast "apple-mobile-web-app-title" weglässt, dann wird beim hinzufügen zum Homescreen (nachdem man eingeloggt ist und bereits die Visu betrachtet) der WebApp Name "xxAPI - Mein S"... sein (auf 13 Zeichen abgeschnitten).
    Schau gerade auf apple developer website: https://developer.apple.com/library/...eViewport.html. Dort ist Definition nicht auffindbar. Meiner Meinung umdokumentiertes Feature.

    Auf Treehouse Optimizing Mobile Web Apps for iOS | Treehouse Blog folgende (halbwegs sinnvolle) Definition:
    Setting the Launcher Title
    By default Safari will use the contents of the page’s <title> element to set the initial title for the launcher icon. You can however override this by adding a <meta> tag with apple-mobile-web-app-title set as the value of the name attribute. The value of the element’s content attribute will then be used as the launcher title.

    <meta name="apple-mobile-web-app-title" content="Kojitsu">
    Explicitly setting the title of your web app like this can be useful if the <title> element contains a lot of text that’s used for SEO purposes.

    Einen Kommentar schreiben:


  • NilsS
    antwortet
    Wenn du wie du oben geschrieben hast "apple-mobile-web-app-title" weglässt, dann wird beim hinzufügen zum Homescreen (nachdem man eingeloggt ist und bereits die Visu betrachtet) der WebApp Name "xxAPI - Mein S"... sein (auf 13 Zeichen abgeschnitten).

    Einen Kommentar schreiben:


  • TirochH
    antwortet
    Zitat von NilsS Beitrag anzeigen
    Nicht korrekt, da der Title bei Aufruf der Seiten immer auf die 1.Zeile der Visuseite geändert wird, der WebApp Title aber immer gleich bleiben soll.

    xxapi2.js ~ 2158
    Code:
                    document.title = "xxAPI - " + _page.text1;
    Interessant. Muss doch noch ne Menge lesen.

    Ist das allgemein so, oder bei xxAPI?

    Möchte ja niemanden irreführen. Muss meinen Text adaptieren.

    Die Frage wie ? Ist die Formulierung ungenau oder ist der Inhalt falsch ?

    Einen Kommentar schreiben:


  • TirochH
    antwortet
    Zitat von NilsS Beitrag anzeigen
    Bei mir gibt es NUR intern. Dein Beispiel basiert auf der Annahme das der externe Zugriff über einen anderen Port als 80 (http) per Portforwarding eingerichtet ist.

    Ich nutze (und würde auch dringend dazu raten) NUR per VPN oder SSL Reverseproxy auf den HS zuzugreifen.

    a) die eigentliche Passwort"verschlüsselung" des Homeservers basiert auf MD5 (welches es es in den letzten Jahren doch endlich geschafft hat auch bei der breiten Mehrheit als tot anerkannt zu werden https://de.wikipedia.org/wiki/Messag...m_5#Sicherheit )

    b) Zugangsdaten für Kameras mit Kameradirektzugriff trifft es noch schlimmer, diese werden lediglich Base64 kodiert über Netz transportiert.

    Wenn man einen Reverseproxy nutzt könnte man von extern noch das location.protocol == "https:" überprüfen.
    Danke für den Hinweis.

    Mir erscheint VPN am sinnvollsten. Baue meine Lösung um.

    Einen Kommentar schreiben:


  • NilsS
    antwortet
    Zitat von TirochH Beitrag anzeigen
    Code:
     
    <meta name="apple-mobile-web-app-title" content="xxAPI²" >
    wenn kein Eintrag: genügt auch der Eintrag:
    Code:
    <title>xxAPI²</title>
    Nicht korrekt, da der Title bei Aufruf der Seiten immer auf die 1.Zeile der Visuseite geändert wird, der WebApp Title aber immer gleich bleiben soll.

    xxapi2.js ~ 2158
    Code:
                    document.title = "xxAPI - " + _page.text1;

    Einen Kommentar schreiben:


  • NilsS
    antwortet
    Bei mir gibt es NUR intern. Dein Beispiel basiert auf der Annahme das der externe Zugriff über einen anderen Port als 80 (http) per Portforwarding eingerichtet ist.

    Ich nutze (und würde auch dringend dazu raten) NUR per VPN oder SSL Reverseproxy auf den HS zuzugreifen.

    a) die eigentliche Passwort"verschlüsselung" des Homeservers basiert auf MD5 (welches es es in den letzten Jahren doch endlich geschafft hat auch bei der breiten Mehrheit als tot anerkannt zu werden https://de.wikipedia.org/wiki/Messag...m_5#Sicherheit )

    b) Zugangsdaten für Kameras mit Kameradirektzugriff trifft es noch schlimmer, diese werden lediglich Base64 kodiert über Netz transportiert.

    Wenn man einen Reverseproxy nutzt könnte man von extern noch das location.protocol == "https:" überprüfen.

    Einen Kommentar schreiben:


  • TirochH
    antwortet
    Zitat von NilsS Beitrag anzeigen
    Moin Hans

    Code:
    $.each($("link[rel$=startup-image]"),function(index,obj) {
           obj.attr("href","neueurl.img");
    });
    Hi Nils;

    Ich schreibe es extra "ausführlich" dass auch andere Forumsmitglieder es besser "verstehen" können.

    Jetzt hab ich es kapiert. Man denkt oft zu kompliziert.... Ich hab Dein obiges Beispiel sogar optimiert. Ein guter Tipp, das Kapitel "Selektoren" auf der jQuery-Seite lesen (Selectors | jQuery API Documentation).

    1. Start-Up Ikonen für IOS; getrennt für lokal und extern

    Von Safari mit Funktion "Zum Homescreen" definierbar. Funktioniert dann wie eine "native" APP unter IOS (oder auch mit Andriod oder Microsoft).

    Fullscreen - ohne "irgendwelche Safari-Controls". Eigene Ikon, getrennt nach internen (lokal) und externen Zugriff. Skaliert die Bildschirmgröße auf Tablets und Phones (im Hoch- und Querformat). Mit oder ohne Statusbar. Ich benutze Lösung ohne Statusbar auf iPhone 6 plus und iPad air 2 (beides mit der doppelten Retina-Auflösung, die zB bei nachfolgeden Beispiel "Bahnhofsuhr" besonders gut bemerkbar ist).

    Hintergrundinfos:
    https://developer.apple.com/library/...eViewport.html.
    ... und noch intensiver unter "Quirksmode" (auch für andere Platformen, wie zB Andriod): Mobile - Table of contents

    Jetzt kann ich mit meinen "individuellen" Ikonen 4 unterschiedliche Lösungen darstellen. Siehe Bildschirm-Foto 1 (4. Zeile):

    1. xxAPI¹: lokaler Zugriff
    2. xxAPI¹: externer Zugriff
    3. xxAPI²: lokaler Zugriff
    4. xxAPI²: externer Zugriff

    Beiliegend nochmals der Code (bei mir in custom.js enthalten) der Deine (xstart.htm) überschreibt.
    Ein Problem bei mir war, daß ich am Anfang nicht kapierte, das - wenn man "custom.js" und "custom.css" verwendet - nochmals ein zusätzliches Sub-Directory anlegen muss (zB xxapi) und es im Hauptpfad "definitiv" nur die "xstart.htm" ohne "Extras" funktioniert. Hauptpfad ist der Projektpfad im HS Experte - unter Extras/Einstellungen/Projektordner. Nicht der alte Pfad von xxAPI Version 1. Weiters muß im HS Experten unter Stammdaten/Projekt/Oberfläche das gewählte Verzeichnis - ist in unserem Fall "xxapi" - angehakt sein.

    Beispiel für custom.js. In diesen Beispiel wird externer Zugriff erkannt, wenn port-number (= "window.location.port") verwendet wird.

    Vorsicht: Diese Lösung via Zugriff über Ports entspricht nicht den heutigen Sicherheitsanprüchen. Das Beispiel soll nur einen Eindruck über die Flexibilität und Anpassbarkeit der darunterliegenden Architektur von Nils xxAPI²-Lösung geben.
    Code:
    /**
     ** APPLE-TOUCH-ICON: unterschiedliches Icon für intern (Intranet) und extern (Internet)
     **/
    (function() {
    if ( window.location.port !== '' ) { // access external via internet (with port-number)
        $("link[rel$='touch-icon-precomposed'][sizes$='120']").attr("href","img/startup/gira-icon-precomposed-extern-120x120.png");
        $("link[rel$='touch-icon-precomposed'][sizes$='152']").attr("href","img/startup/gira-icon-precomposed-extern-152x152.png");
        $("link[rel$='touch-icon-precomposed'][sizes$='144']").attr("href","img/startup/gira-icon-precomposed-extern-180x180.png");
      } else {                           // access internal via intranet (within own local network)
        $("link[rel$='touch-icon-precomposed'][sizes$='120']").attr("href","img/startup/gira-icon-precomposed-intern-120x120.png");
        $("link[rel$='touch-icon-precomposed'][sizes$='152']").attr("href","img/startup/gira-icon-precomposed-intern-152x152.png");
        $("link[rel$='touch-icon-precomposed'][sizes$='144']").attr("href","img/startup/gira-icon-precomposed-intern-180x180.png");
      }   
    })();
    Die Beschriftung mit "Haussteuerung" bzw. "xxAPI²" unterhalb der Ikone erfolgt mit folgenden Code in der Datei xstart.htm. Diese Beschriftung könnte natürlich mit ähnlicher Logik wie oberhalb in der Datei custom.js überschrieben werden.
    Code:
     
    <meta name="apple-mobile-web-app-title" content="xxAPI²" >
    wenn kein Eintrag:
    meta name="apple-mobile-web-app-title"
    genügt auch der Eintrag:
    Code:
    <title>xxAPI²</title>
    2. Code der Bahnhofsuhr (siehe Foto 2, ganz rechts unten).

    Die javascript Library findet man unter 3Quarks - Bahnhofsuhr. Diese kann man in einem Sub-Pfad von ""xxapi" ablegen (unter der Annahme, das dieser Pfad übernommen wurde). Dort ist auch eine ausführliche Beschreibung vorhanden.

    Beispielcode für custom.js und Gira HS Experte (im Kommentar):
    Code:
    /* 
     * in Visu HS Experte: Statischer Text: XXANALOGCLOCK*
     */
    hs.functions.element_loader("js/station-clock.js");
    xxAPI.functions.XXANALOGCLOCK = function( oarg ) {
        var _id = "id_bahnhofsuhr";
        oarg.item.html = "<canvas id='id_bahnhofsuhr' width='128px' height='128px' style='width:64px; height:64px;'/>";
        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;
        };
    }
    3. Versionsnummer aus xxapi2.js und aus custom.js in Visu von HS Experte anzeigen.

    Die Versionsnummern werden in meinem Beispiel auf Foto 2, links unten angezeigt.

    Die erste Zeile ist die Versionsnummer von Nils xxapi2.js (allgemein genutzt). Die zweite Zeile von custom.js (individuelle Anpassungen).
    Durch die Versionsnummer von Nils erkennt man, ob es wieder zusätzliche Funktionalität oder sonstige Änderungen vorhanden sind. Das ist - jetzt in der Entwicklungsphase - besonders interessant.

    Anzeige von Nils Versionsnummer. Code in statischen Textfeld in HS Experten Visu.
    Code:
    XXEXECUTE*item.text=xxAPI.version
    Definition der Versionsnummer in der custom.js Datei und im HS Experten (siehe Kommentar):
    Code:
    /* 
     * in Visu HS Experte: Statischer Text: XXCUST_VERSION*
     */
    xxAPI.functions.XXCUST_VERSION = function ( oarg ) {
        debug( 2 , "XXCUST_VERSION" , oarg );
        oarg.item.text = "V 2.1";
    }
    4. Positionierung Popup unmittelbar neben "aufrufender" Taste

    Siehe Foto 2.

    Es ist ein Textfeld am unteren rechten Rand des Popups mit folgenden Inhalt zu positionieren. Alles mit sehr knappen Rand sieht besser aus.

    im HS Experte (statisches Textfeld):
    Code:
    XXPAGE*POPUP*top:MOUSE+0px;
    Danke nochmals "Nils" für Deine oftmals auf der "Leitung" stehenden "Mitkämpfer". Hoffe damit auch für "andere" Neulinge das Leben einfacher zu machen.

    Gruss aus Wien
    Angehängte Dateien

    Einen Kommentar schreiben:


  • NilsS
    antwortet
    Moin Hans

    Code:
    $.each($("link[rel$=startup-image]"),function(index,obj) {
           obj.attr("href","neueurl.img");
    });

    Einen Kommentar schreiben:

Lädt...
X