Ankündigung

Einklappen

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

Mehr anzeigen
Weniger anzeigen

xxAPI Community Dokuthread

Einklappen
Das ist ein wichtiges Thema.
X
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

    xxAPI Community Dokuthread

    Vielleicht bekommen wir hiermit ja ein wenig Community Doku.

    In diesem Thread kann jeder der möchte, FUNKTIONIERENDE, Beschreibungen posten.

    DAS IST ABER DAS EINZIGE WAS HIER REIN DARF

    Alles andere verschiebe ich direkt in den Entwicklungsthread.

    Kein - geht aber nicht
    Kein - Danke (zumindest nicht hier )
    Kein - aber man könnte.

    Achtet bitte auch auf persönliche Daten (Passwörter aus base64 zu lesen ist keine Raketentechnik)


    Wir können darüber im Entwicklungsthread gerne diskutieren ob wir da was ändern müssen. Aber hier soll nur Wissen rein. (dort bitte den Beitrag verlinken um den es geht)

    Doku aus dem Source in Englisch -> https://knx-user-forum.de/454009-post2.html (wenn da mal was fehlt, gebt mir bitte Bescheid dann füge ich das dort hinzu)

    EDIT: Es ist egal ob das schön aussieht oder ob man das besser machen kann, sondern um Resourcen (z.B. Screenshots) zu schaffen die später in der richigen Doku im Wiki benutzt werden können)
    Damit unterliegt jeglicher Content der hier gepostet wird automatisch der LGPL der xxAPI²
    Nils
    xxAPI² - HTML5 Client für den Gira Homeserver (Status: Beta / Visuclient = 80% / xxAPI¹ Funktionen = 100% / zusätzlich: Slider/Drehknöpfe/Balken/mausnahe Popups/.... ) - Installation: Logikbaustein nach Start Triggern / Startlink auf der Debugseite

    #2
    Werteingabe: XXKNOB & Popup-XXKNOB über TEMPLATES

    Vorwort: Ein Versuch zu dokumentieren.

    Wird übrigens laufend verbessert und erweitert. Also
    öfters durchlesen lohnt sich (siehe ganz unten: Datum letzte Änderung).

    Feedback wäre sehr erwünscht. Ich mache es ja nicht für mich, sondern für die Benutzer dieses Forums.

    Hans


    Es sind derzeit mehrere SLIDER-Eingabe Controls verfügbar. Diese Controls sind aber auch als Wert-Anzeige Controls verwendbar (gauges).

    Mir bekannt sind
    • XXSLIDER (senkrechter und waagrechter Slider)
    • XXGAUGE (Füllstandsanzeige)
    • XXKNOB
    • XXKNOB4 (Farbwahl)
    Diese Einführung beschränkt sich auf XXKNOB und den um XXKNOB-Funktionalität erweiterten Werteingabe-Popup's.


    Punkt 1: XXKNOB



    um folgendes Eingabe-Control zu erhalten, müssen Sie im Gira HS Experten (ab 4.2) folgendes definieren:
    FullSizeRender-1.jpg
    1. Textfeld anlegen:
      GiraHSExperte > Oberfläche > Visualisierung > Visu-Element {Text}
      ein 'Dyn. Textfeld' neu anlegen und den Eintrag 'XXKNOB*' im Feld 'Optionaler Prefix' eintragen und mit dem unter Pkt.1 definierten Textfeld verbinden (dh Option 'Dyn. Text' wählen). Die Farben des XXKNOB-Controls sind im Textfeld via Vorder- und Hintergrundfarbe definiert. Die restlichen Teile vom Control -- das ist der eigentliche Hintergrund - bleiben transparent
    2. Optional falls Options for XXKNOB notwendig:
      mit XXOPTIONS in:
      > Aktion: Werteingabe öffnen > Karteireiter: Titel > 2. Zeile:
      Hier ein Beispiel:
      Code:
      XXOPTIONS*angleArc=250;angleOffset=-125;step=5;
      Wenn man keine XXOPTIONS braucht, dann braucht man nicht Aktion 'Werteingabe öffnen' durchführen. Der Wert von 'Aktion' ist dann auf 'keine' gesetzt.
    3. Sonstiges Verhalten "im groben und ganzen" wie Standardwerteingabe (z.B. wie Werte gefüllt werden). Kommunikationsobjekt zum Befüllen kommt vom 'dyn. Textfeld'.

      Beim zweiten Beispiel unterhalb (ohne XXKNOB, mit Templates) wird das Kommunikationsobjekt (KO) vom Visu-Element 'Werteingabe öffnen' verwendet (die sogenannte Erweiterung des Standard-Werteingabe Popup's um XXKNOB-Funktionalität).
    Die dynamische Wertanzeige ("55 %") in der Größe obigen Beispiels (240x240) erfordert die Einstellung der Fontgröße auf 32pt und wird bei der Bedienung des XXKNOB's sofort aktualisiert, das angehängte KO erst nach loslassen des Controls. Ohne XXOPTIONS erhalten Sie einen Standardkreis.

    Die Größe wird durch die Abmessungen (Breite/Höhe) des Rechteckes des dyn. Textfeldes bestimmt. Ich habe 240x240 gewählt. Minimalwert und Maximalwert können mit den Parametern min/max definiert werden (=Start- und Endwert).

    Standardkreis:


    3.png

    Definition dyn. Textfeld:

    2.png1.png

    Definiton XXKNOB*:4.png

    Punkt 2: Alternative zu XXKNOB --> Popup Werteingabe über Templates

    Eine vereinfachte Version (ohne dyn. Textfeld mit 'XXKNOB*'), nur Aufruf Werteingabe (wie vorher).

    FullSizeRender-3.jpg

    Dann folgendes unter ... Titel > 2. Zeile eingeben:

    Code:
    XXOPTIONS*xxtemplate=DIMMER;top:MOUSE+0px;xxknob.fgColor=orange;xxknob.angleArc=250;xxknob.angleOffset=-125;xxknob.step=5;
    Tipp: Wem wie bei mir die grüne (oder was immer für eine Farbe) Farbe nicht gefällt. Dann ändern Sie diese im HS Experten:

    Stammdaten > Projekt > Oberfläche > Designs (auswählen) > Systemschriften (rechte Maustaste oder 'Dreieck') > Allgemein > Titel 1
    Hier können Sie Farbe und Schriftgröße ändern. Habe Farbe auf 'Weiss' und Schriftgröße auf 'Arial 14 fett' geändert.


    5.png

    Die xxknob.Options sind hier mit dem Prefix: 'xxknob' zu definieren.

    Die Option 'top:MOUSE+0px;' dient zur optimalen Positionierung des Popup-Fensters direkt neben dem aufrufenden Icons bzw. Feldes, das sind allgemeine Options und haben daher nicht das Prefix 'xxknob'.

    Die Überschrift (hier im Beispiel: 'Arbeitszimmer') wird unter Karteireiter 'Titel' > '1. Zeile' eingegeben. Bitte kurzen Text > 'Arbeitszimmer Decke' wäre zu lange und hätte einen unschönen Zeilenumbruch in der Darstellung.

    template.OPTIONS

    Für das Werteingabe-Popup gibt es derzeit folgende vordefinierte Templates:
    1. DIMMER
    2. TEMP
    3. SPEAKER
    4. ...
    Beispiel für Aufruf:

    Code:
    XXOPTIONS*template=DIMMER;


    Punkt 3: xxknob.XXOPTIONS

    Rot markierte Optionen stehen bei der XXKNOB Funktion nicht zur Verfügung. Können normalerweise direkt eingegeben werden (zB fgColor, bgColor).
    Status: noch unvollständig



    Folgende Options sind bekannt (noch nicht vollständig):
    XXOPTIONS*{allowed values} DESCRIPTION
    min={<decimal>}; minimal value; default: min=0; auch mit Komma und Negativ: z.B: -2.5
    max={<decimal>}; maximal value; default: max=0;auch mit Komma und Negativ: z.B: -0.5 (= größer als 2.5)
    angleOffset={0..360}; starting angle in degrees; default: angleOffset=0;Beginn: 0 = bei 0 Uhr, bei xxAPI: -125
    angleArc={0..360}; arc size in degrees, default: angleArc=360; bei xxAPI: 250
    stopper={true;false}; stopper : stop at min & max on keydown/mousewheel; default=true
    readOnly={true;false}; disable input and events | default=false
    rotation={clockwise; acw, ...}; direction of progression | default=clockwise (sonst möglich: anticlockwise bzw. acw)
    cursor={true;gauge;...}; 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.
    am besten: cursor=true;lineCap=round; (= runder Kreis)
    thickness={<decimal 0.1..0.9>}; gauge thickness
    lineCap={butt;round;...}; gauge stroke endings
    width={<integer>}; dial width
    displayInput={true;false}; default=true | false=hide input (=keine numerische Anzeige des ausgewählten Wertes)
    displayPrevious={true;false}; default=false | true=displays the previous value with transparency
    fgColor={<color>}; foreground color, siehe https://www.w3schools.com/colors/colors_names.asp
    bgColor={<color>}; background color
    inputColor={<color>}; input value (number) color (input value = numerische Anzeige des derzeit ausgewählten Wertes)
    font={<font family>}; siehe: https://www.w3schools.com/cssref/css_websafe_fonts.asp
    fontWeight={<font weight>}; siehe: https://www.w3schools.com/cssref/pr_font_weight.asp
    step={1..100}; Sprunggröße bei Auswahl; nicht größer als abs(max-min),Vorsicht bei Dezimalzahlen (z.B. 0.1)
    xxtemplate={DIMMER;...} vordefiniertes Template (auch selbst über custom.js möglich = eigener DOKU thread)
    Zuletzt geändert von TirochH; 27.03.2017, 17:35.
    Hans

    Kommentar


      #3
      XXSLIDER; XXGAUGE

      TIPP:
      siehe Beschreibung im Internet http://refreshless.com/nouislider/
      Punkt 1: XXSLIDER analog wie XXKNOB,
      1. Textfeld anlegen:
        GiraHSExperte > Oberfläche > Visualisierung > Visu-Element {Text}
      2. ein 'Dyn. Textfeld' neu anlegen und den Eintrag 'XXSLIDER' im Feld 'Optionaler Prefix' eintragen und mit dem unter Pkt.1 definierten Textfeld verbinden (dh Option 'Dyn. Text' wählen). Die Farben des XXSLIDER-Controls sind im Textfeld via Vorder- und Hintergrundfarbe definiert. Die restlichen Teile vom Control -- das ist der eigentliche Hintergrund - bleiben transparent
      3. Optional falls Options for XXSLIDER notwendig:
        mit XXOPTIONS* in:
        > Aktion: Werteingabe öffnen > Karteireiter: Titel > 2. Zeile:
      4. min, max values werden in den Feldern der Werteingabe definiert
      Tipp:
      Wenn bei vertikaler Anzeige oben 0% und unten 100% haben will (zB für Positionierung Jalousien/Rolladen) macht folgendes:

      Eingangswert mit -1 multiplizieren
      max=0; min=-100; (das minus nicht übersehen)
      Vordergrundfarbe = Hintergrund (am besten die Farbe des darunterliegenden Hintergrunds), macht was anderes als transparent!
      Hintergrundfarbe = Vordergrund

      Zum Schluss wieder mit -1 multiplizieren. Mathematische ABS-Funktion funktioniert nicht für alle KNX Zahlen-Formate.
      Punkt 2: XXGAUGE
      = XXSLIDER ohne Handle (nur zur Ausgabe von Werten mittels eines Balkens), XXOPTIONS werden hier im Feld 'Optionaler Postfix:' angegeben. Aktion: Werteingabe wird nicht benötigt. Auch nicht das Schlüsselwort "XXOPTIONS*".
      Code:
      *min=0;max=100;direction=ltr;
      im Feld 'Optionaler Prefix:'

      Code:
      XXGAUGE*
      Punkt 3: XXOPTIONS (in Arbeit)
      XXOPTIONS*{<options>} DESCRIPTION
      min={<decimal>;<iso-date>}; nur für XXGAUGE, sonst in den Feldern der Werteingabe
      max={<decimal>;<iso-date>}; nur für XXGAUGE, sonst in den Feldern der Werteingabe
      direction={rtl;ltr;ttb;btt};
      Anmerkung: ttb funktioniert nicht
      default waagrecht: rtl (right_to_left);
      default senkrecht: btt (bottom_to_top);
      orientation={horizontal;vertikal}; wird von xxAPI2 automatisch festgelegt (wird nicht von Ihnen eingegeben):
      • horizontal: wenn die Breite des Dyn. Textfeldes größer ist als deren Höhe
      • vertikal: sonst
      step={<decimal>}; Schrittweite
      disabled={disabled}; Option nur bei XXSLIDER
      handle={true;false} Option nur für XXSLIDER
      Hans
      Zuletzt geändert von TirochH; 27.03.2017, 15:48.
      Hans

      Kommentar


        #4
        Hintergrund-INFO ZU ft-fastclick

        das für die meisten von EUCH "unbemerkt" eine verbesserte Usability bringt.

        Ist fixer Bestandteil von XXAPI2 und ist Standardfunktionalität.

        Info soll "nur" zum besseren Verständnis beitragen, warum einige "PlugIn's" überhaupt enthalten sind und welche Auswirkungen aus "BEDIENERSICHT" auftreten.
        Hintergrund INFO:

        http://labs.ft.com/articles/ft-fastclick/

        und ein Testlink:

        http://labs.ft.com/wp-content/upload...clickdemo.html

        Gruss Hans
        Zuletzt geändert von TirochH; 19.04.2015, 07:56.
        Hans

        Kommentar


          #5
          In die custom.cs einbauen ?

          Kommentar


            #6
            Zitat von TirochH Beitrag anzeigen
            ...
            Schaut auf die Seite ... (ist gut bebildert)

            und auch auf das Posting von Vento (Demoprojekt)
            ...

            Sind ziemlich gut. Im Vergleich zu meiner obigen zitierten Anleitung werden dort eine hslib bzw. ein Demoprojekt importiert. Hier gibt es natürlich weniger Interpretationsspielraum als bei meiner - theoretischen - Anleitung.

            Meine aber, dass meine Anleitung eine gute Ergänzung für das Verstehen des Gesamtzusammenhangs sein könnte.

            HANS

            PS: Schaut auch in diesem Forum (ganz nach oben scrollen) unter "Lexikon" Buchstabe "X" nach, dort findet ihr weitere Erlärungen zu xxAPI Bausteinen.
            Für Einsteiger.
            Schaut auf obiges Posting unter obigen Link (ganz oben auf Doppelpfeil klicken).

            Hans
            Zuletzt geändert von TirochH; 31.05.2015, 18:30.
            Hans

            Kommentar

            Lädt...
            X