xxAPI Community Dokuthread

[NilsS]

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²

[TirochH]

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

Tipp:
siehe Beschreibung im Internet:
http://anthonyterrien.com/knob/
und
https://github.com/aterrien/jQuery-Knob

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:
   

   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:

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:

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)

[TirochH]

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*".

*min=0;max=100;direction=ltr;

im Feld 'Optionaler Prefix:'

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

[TirochH]

Hintergrund-INFO ZU ft-fastclick

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

Ist fixer Bestandteil von XXAPI² 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

[camillo]

In die custom.cs einbauen ?

[TirochH]

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

[Andreas1986]

Hallo beisammen,

in #2 von Hans steht was von XXKNOB4 (Farbwahl). Hab ich da was übersehen oder gibts da was dazu?

Gruße