Clone wiki

User Apps / KCode / Buttons

Hinweis: Dieses Feature funktionieren nur in der PC-App vollständig. Für Nutzer anderer Clients wird statt einem Button ein unformatierter Link angezeigt.

Buttons

Im Chat können auch Buttons dargestellt werden. Ein Button wird mit dem KCode °>{button}$PROPERTIES<°erstellt und enthält Eigenschaften ($PROPERTIES) mit denen verschiedene Attribute des Buttons definiert werden.

Die Eigenschaften Zeichenen sich meist durch ein NameValue-Pair aus was den jeweiligen Eigenschaftennamen sowie deren Wert (Value) beinhalten. Bis auf zwei erforderliche Standardparameter werden Eigenschaften mit |Name|Value getrennt.

Das erste Beispiel zeigt einen Button mit dem Erforderlichen Text sowie eine eindeutige ID. Beide Felder können auch leer sein.

°>{button}ButtonText|0<°
°>{button}ButtonText|<°

button_sample_0001.png

Befehl setzen

Der Button hat derzeit noch keine Funktion. Diese können wir zum Beispiel mit dem NameValue-Pair |call|$COMMAND setzen. $COMMAND kann ein Chatbefehl sein oder auch eine http:// bzw. https:// URL.

°>{button}James küssen|0|call|/kiss James<°
°>{button}James küssen||call|/kiss James<°

button_sample_0002.png

Aktivieren / Deaktivieren

Es gibt auch Fälle in dem man einen Button deaktivieren möchte, damit der Nutzer diesen nicht anklicken kann. Hierfür kann mit |enabled|0 oder |enabled|1 der Button-Status verändert werden.

°>{button}Deaktiviert||enabled|0<°

button_sample_0003.png

Icon

Mit dem NameValue-Pair |icon|$IMAGE kann ein Icon vor dem Text gesetzt werden. Standardmäßig wird hier der pics/ Ordner von Knuddels genutzt. Möchte man ein eigenes Bild von der App nutzen so kann mittels ../ eine URL genutzt werden.

°>{button}Hallo Smiley||icon|../http://apps1.knuddels.biz/app/....../icon.png<°
°>{button}Hallo Smiley||icon|sm_00.gif<°

button_sample_0004.png

Größe

Ein Button kann mit |width|$WIDTH und |height|$HEIGHT von der Größe verändert werden.

°>{button}großer Button||width|200|height|30<°
°>{button}kleiner Button||width|110|height|18<°

button_sample_0005.png button_sample_0006.png

Textschatten

Durch |textshadow|1 kann ein Textschatten aktiviert werden.

°>{button}Textschatten||textborder|1<°

button_sample_0007.png

Farben / Stile

Man kann einen Button auch von der Farbe sowie vom Stil ändern. Hierfür gibt es die Eigenschaft |color|$STYLE. $STYLE kann verschiedene Werte besitzen.

Möchte man eine eigene Farbe definieren, so geschieht dies durch die Gradient (Farbverlauf). Dieser wird mit RGB-Werten versehen und definiert die Farbe von oben, der mitte sowie unten. Die RGB-Farbwerte werden durch das Zeichen ~ getrennt.

// Beispiel anhand eines komplett roten Buttons mit den Werten "255,0,0~255,0,0~255,0,0"
°>{button}roter Button||color|255,0,0~255,0,0~255,0,0<°

button_sample_0008.png

Um den Farbverlauf noch einmal genauer zu erläutern haben wir dir hier ein Regenbogen-Button erstellt. Der Wert lautet 255,0,0~0,255,0~0,0,255 und ist wie folgt aufgebaut:

  • Farbe oben 255,0,0
  • Trennzeichen ~
  • Farbe mitte 0,255,0
  • Trennzeichen ~
  • Farbe unten 0,0,255

Das Ergebnis lässt sich sehen, und vielleicht baust du damit ja eine tolle Regenbogen-App

°>{button}Regenbogen||color|255,0,0~0,255,0~0,0,255<°

button_sample_0009.png

Anstelle einer Gradient kann aber auch eine vordefinierte Farbe verwendet werden. Knuddels stellt hierzu folgende Stile zur verfügung:

  • button_sample_0018.png
  • button_sample_0017.png
  • button_sample_0021.png
  • button_sample_0016.png
  • button_sample_0010.png
  • button_sample_0011.png button_sample_0012.png
  • button_sample_0013.png button_sample_0014.png
  • button_sample_0015.png
  • button_sample_0019.png
  • button_sample_0020.png

Updated