Ankündigung

Einklappen

Nicht vergessen: Das KNX-UF-Symposium by eib-tech in München am 3. November 2017!

Mehr anzeigen
Weniger anzeigen

Neue "ultra-scharfe" Display-Controls

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

    Neue "ultra-scharfe" Display-Controls

    Bildschirmfoto 2017-06-02 um 08.36.17.png Bildschirmfoto 2017-06-02 um 13.11.57.png
    Bildschirmfoto 2017-06-02 um 08.34.11.pngBildschirmfoto 2017-06-02 um 08.35.12.png
    Hier die neuesten Display-Controls:

    Buchstäblich "ultra-scharf", denn sie basieren auf Vektorgrafik. Die Darstellung ist immer optimal.
    (Anmerkung: die Icons, links oben und rechts unten sind Pixelgrafiken).
    Sie sind nicht nur von der Schärfe beeindruckend. Sie haben eine Wertskala und sind ziemlich einfach parametrierbar.
    Aber mit Vorsicht, man kann die Grafik auch zerstören.
    Beispielsweise kann man die Skalierung innen oder außen plazieren. Definieren was sich dreht. Farbverläufe. etc,etc.

    Es wurden drei grundsätzliche JavaScript/Font- Bibliotheken verwendet:
    • d3.js (neueste Version V4) - eine der besten verfügbaren Grafikbibliotheken (svg = scaleable vector graphic)
    • greensock.js (draggable.js) - Graphic-Animation von "feinsten", so gut das man sie gar nicht bemerkt. Versucht einmal den Knopf zu drehen. Wenn ihr genau schaut, seht , dass er beschleunigt und abbremst. Beim "vierten" Beispiel (Lautstärke) drehen sich die Ziffern, d.h. wenn der Knopf dreht, bleiben die Ziffern waagrecht
    • DSEG7 - LCD-Fonts (beeindruckende Qualität und Funktionalität), das beste das ich gefunden habe, und ich habe lange gebraucht
    Die Controls wurden von mir selbst entwickelt. Die obigen Bibliotheken dienten als Hilfsmittel.

    Aus meiner Sicht habe ich die "bestmöglichen" Technologien gekoppelt.

    Greensocks ist sogar lizenzpflichtig. Die Lizenz habe ich und darf diese mit den von mir entwickelten CODE auch frei weitergeben.

    Beiliegend die entsprechenden Bibliotheken zum Download: Update: 7.6.2017, 09:30 Uhr.

    Die beiliegenden Daten in Euren xxapi-Ordner kopieren. Wenn Ihr schon eine custom.js oder custom.css Datei habt, dann den Inhalt in Eure Dateien dazukopieren.

    Im Experten XXRSLIDER*var=1; (bis 4 möglich) bei VISU/Werteingabe/Titel/2.Zeile eingeben und schon funktionieren die Knöpfe.
    Unter Werteingabe auch min/max/Werteinheit und Anzahl der Kommastellen richtig ausfüllen.
    Zu Eurer Unterstützung habe ich eine hslib-Datei bereitgestellt, die Ihr in den Experten laden könnt. XXRSLIDER.hslib.zip

    Es gibt in der Bibliothek noch eine "test.html" Datei, die könnt ihr einfach mit Safari oder Chrome laden und ihr könnt die meisten Features auch ohne Experten und xxapi testen.

    Die Funktionen sind mit Safari und Chrome getestet.
    Die Controls funktionieren mit den VOREINSTELLUNGEN nur mit "schwarzen" Hintergrund. Sonst schauen SIE nicht so gut aus und es müssen einige Voreinstellungen geändert werden.

    Happy testing.

    Hans
    -------------------------------------
    Noch was sehr wichtiges:

    Der Baustein 12280-v1.017_.hsl funktioniert nicht nach Änderungen in der "custom.js".
    Dieser Baustein von "Nils" hat aus meiner SICHT einen Fehler bei der "remadent"-Speicherung.
    Ich kann diesen Fehler umgehen, wenn ich vor dem "Übertragen" vom Experten in den Homeserver
    die Logikdatei 12280 neu lade , den Experten beende und neu lade und dann erst die Übertragen Funktion aufrufe.+

    Ich habe im Experten zusätzlich eine in der "custom.js" definierte (siehe custom.js) xxapi-FUNKTION "XXCUST_VERSION" dazugefügt.
    Wenn Ihr kontrollieren wollt, welche custom.js-"Version" geladen ist, könnt Ihr mit einem Textfeld ("XXCUST_VERSION*) die unter
    "oarg.item.text" von Euch eingegebene Versionsinfo direkt in der VISU anzeigen und damit kontrollieren welche Version wirklich geladen ist. Voraussetzung ist natürlich , dass Ihr bei einer Änderung in der custom.js Datei eine neue Versionsnummer eingebt.

    Beiliegend noch die von mir verwendete hsl.datei. 12280_v1.017_ .hsl.zip
    Angehängte Dateien
    Zuletzt geändert von TirochH; 07.06.2017, 08:30.
    Hans

    #2
    Einfach nur genial Hans.
    Habe den Thread erst heute gesehen und natürlich gleich getestet.
    Hut ab für die Super Doku dazu.
    Läuft auf Anhieb.

    Bist du eigentlich bei deinem Anderen Thread schon weiter gekommen? Finde ich auch ne Coole Idee. xxAPI.js - Freischaltung von oarg.item.type "ICO"

    LG Andy

    Kommentar


      #3
      Zitat von Andreas1986 Beitrag anzeigen
      Einfach nur genial...
      Läuft auf Anhieb.
      Freue mich über Dein Feedback.
      Habe ein Update eingespielt. Siehe Posting #1. Update: 7.6.2017, 09:30 Uhr.
      Geringe Verbesserungen.
      Falls Du Fragen hast, helfe ich gerne.
      Probier mal die Test.html aus. Brauchst nur im Browser mit "öffnen Datei" laden.
      Verschiedene Parameter kannst Du in der Test.js setzen. Siehe Zeile 9,10.
      Sollte auch eine "implizierte" ANLEITUNG sein, selbst "plugin's" zu entwickeln und "einfach" zu testen.

      Zitat von Andreas1986 Beitrag anzeigen
      Bist du eigentlich bei deinem Anderen Thread schon weiter gekommen? Finde ich auch ne Coole Idee. xxAPI.js - Freischaltung von oarg.item.type "ICO"
      Nein, noch nicht.
      Muß respektieren daß Nils momentan wenig Zeit hat.


      Gruss Hans
      Zuletzt geändert von TirochH; 08.06.2017, 04:23.
      Hans

      Kommentar


        #4
        Schade eigentlich.

        Kommentar


          #5
          Soweit ich mitbekommen habe baut Nils einen neuen Baustein FixMyHs da wäre doch das mit den dynamischen Hintergründen auch ein Ansatz? Oder ist das ne komplett andere Geschichte?

          Kommentar


            #6
            [QUOTE=Andreas1986;n1121878.... Baustein FixMyHs ...[/QUOTE]

            Kenn ich nicht und hab es im Forum auch nicht gefunden.

            Das mit den dynamischen Hintergründen sollte schon funktionieren. Ich hab aber noch Probleme.

            Sollte folgenden Eintrag in der custom.js unterstützen:

            Code:
            hs.functions.element_loader([
            "js/rainyday.min.js"
            ]);//element_loader
            
            xxAPI.functions.XXRAINYDAY = function( oarg ) {
            debug(2,"XXRAINYDAY",oarg);
            oarg.item.type = "ICO";
            oarg.item.refresh = 0;
            oarg.item.image_onload = function(item){
            item.xxapi.engine = new RainyDay({
            image: item.image
            });
            item.xxapi.engine.gravity = item.xxapi.engine.GRAVITY_NON_LINEAR;
                  item.xxapi.engine.trail = item.xxapi.engine.TRAIL_DROPS;
                  item.xxapi.engine.VARIABLE_GRAVITY_ANGLE = Math.PI / 8;
                  item.xxapi.engine.rain([ [1, 2, 8000] ]);
            item.xxapi.engine.rain([ [3, 3, 0.88], [5, 5, 0.9], [6, 2, 1] ], 100);
            }
            oarg.item.image.crossOrigin = 'anonymous';
            }//XXRAINYDAY
            und im Experten, folgenden Eintrag:

            XXREGICON*ICONID*XXRAINYDAY

            Bildschirmfoto 2017-08-16 um 10.08.07.png

            aber irgendwas ist bei mir noch nicht ganz richtig.

            Hans
            Hans

            Kommentar

            Lädt...
            X