Wiki

Clone wiki

User Apps / KCode / Bilder

Bilder

Eure Bots können im Chat neben Links oder Tabellen auch Bilder anzeigen lassen - hierzu ist wichtig zu wissen, dass alle Bilder immer mit °>BILD<° eingebunden werden. Eine Manipulation der Darstellung einzelner Bilder lässt sich mit weiteren Eigenschaften $PROPERTIES erweitern. Diese Erweiterung erfolgt durch sogenannte NameValue-Pair die durch ein angefügten Punkt .. genau definiert werden.

Standard-Einbindung eines Bildes:

Wichtig ist, dass ihr bei der Einbindung eines Bildes immer den Pfad zu dem jeweiligen Bilderordner als erstes angebt.

Schaut euch dafür am besten diese Seite an:

Zur Vereinfachung der Darstellung, wurde in den Beispielen die Einbindung des Pfades weggelassen.

°>bild.gif<°

MouseOver-Effekte:

Neben der normalen Darstellung eines Bildes ist es auch möglich hover-Effekte darzustellen. bild1.gif steht für das Bild, welches sichtbar ist, wenn die Position des Cursors nicht auf der Grafik liegt. bild2.gif steht für das Bild, welches sichtbar ist, wenn die Position des Cursors auf der Grafik liegt.

°>bild1.gif|bild2.gif<°

Wenn man nicht auf Buttons zurückgreifen möchte, sondern lieber selbst Schaltflächen gestallten möchte, so ist dies auch möglich. Hierbei gilt allerdings zu beachten, dass Links gebunden werden müssen. Dies ist entweder mittels >< oder >--< machbar. Bei der Definition von LINK habt ihr die Wahl zwischen Internetseiten oder Knuddelsfunktionen.

°>bild_normal.gif|bild_hover.gif<>|LINK<°
°>bild_normal.gif|bild_hover.gif<>--<>|LINK<°
°>bild_normal.gif|bild_hover.gif<>--<>|LINK_LINKE_MAUSTASTE|LINK_RECHTE_MAUSTASTE<°

Funktionen zur Manipulation von Grafiken:

Funktionen mit NameValue-Pair

Name Beschreibung Value Beispiel
w_ Containerbreite eines Bildes fest definieren int .w_100
h_ Containerhöhe eines Bildes fest definieren int .h_100
scalew_ Breite eines Bildes wird um X% skaliert. <100 = verkleinert; >100 = vergrößert int .scalew_80
scaleh_ Höhe eines Bildes wird um X% skaliert. <100 = verkleinert; >100 = vergrößert int .scaleh_80
mw_ Breite eines Bildes fest definieren int .mw_100
mh_ Höhe eines Bildes fest definieren int .mh_100
mx_ Position eines Bildes horizontal setzen int .mx_100
my_ Position eines Bildes vertikal setzen int .my_100
border_ Rahmen um ein Bild setzen int .border_10
shadow_ Bild einen Schatten setzen. Hierbei wird die Position des Schattens definiert int .shadow_1
quadcut_ Schneidet ein Bild in quadratische Größe zu int .quadcut_50
delay_ Bilder werden mit Verzögerung angezeigt int .delay_20
delayoff_ Bilder werden nach Verzögerung ausgeblendet int .delayoff_20
director_ Es werden die Frames von n1 bis n2 in GIFs endlos wiederholt. int .director_n1:n2
freeze_ Es wird nur ein bestimmter Frame eines GIFs angezeigt int .freeze_2
mousex_ Positioniert den Klickbereich einer Schaltfläche (Bild) horizontal int .mousex_0
mousey_ Positioniert den Klickbereich einer Schaltfläche (Bild) vertikal int .mousey_0
loadingImage_ Zeigt das angegebene Bild an sofern das Bild "heruntergeladen" wird. URL .loadingImage_URL/image.png
errorImage_ Konnte das Bild nicht geladen werden, wird das angegebene "Fehlerbild" angezeigt. URL .errorImage_URL/bild.png
opacity_ Setzt die Deckkraft eines Bildes in einer Range von 0 (unsichtbar) - 255 (komplett sichtbar). int .opacity_75
rmw_ Verkleinert das Bild auf die angegebene Breite, aber vergrößert es nicht falls es kleiner ist. Das Seitenverhältnis bleibt dabei erhalten. int .rmw_100
rmh_ Verkleinert das Bild auf die angegebene Höhe, aber vergrößert es nicht falls es kleiner ist. Das Seitenverhältnis bleibt dabei erhalten. int .rmh_80
center_ Man gibt an wieviele Pixel Breiter für das Bild freigehalten werden. Das Bild steht zentriert in diesem freien Platz (nur horizontal). int .center_200
bordercol_ Borderfarbe als RGB komma-separiert angeben. RGB 0-255 .hbordercol_255,0,255
hbordercol_ Hoverfarbe der Border als RGB komma-separiert angeben, wenn Bild verlinkt RGB 0-255 .hbordercol_255,0,0
recolor_ Färbt den nicht-transparenten Teil eines Bildes komplett mit der angegebenen Farbe ein. RGB 0-255 .recolor_255,0,0
clippath_oval Wandelt ein Bild in ein ovales Bild um. - .bild...clippath_oval.jpg
clippath_circle Wandelt ein Bild in ein rundes Bild um. - .bild...clippath_oval.jpg

Labelfunktionen:

Name Beschreibung Value Beispiel
label_ Labeltext auf ein Bild setzen String .label_text
lmx_ Position des Labeltextes horizontal verändern. int .lmx_100
lmy_ Position des Labeltextes vertikal verändern. int .lmy_100
labelcolor_ Labeltext in einen gewünschten RGB-Farbcode einfärben int .labelcolor_255,0,0
labelborder_ Labeltext einen Textrahmen setzen int 0,1 .labelborder_1
labelfontsize_ Schriftgröße des Labeltextes verändern int .labelfontsize_20

ovhlvtso.png

Name Beschreibung Value Beispiel
clipx_ Setzt den horizontalen Anfangspunkt des Bildbereiches von der oberen linken Ecke int ._clipx_100
clipy_ Setzt den vertikalen Anfangspunkt des Bildbereiches von der oberen linken Ecke int ._clipy_100
clipw Definiert die Breite des angezeigten Bildbereiches int .clipw_100
cliph Definiert die Höhe des angezeigten Bildbereiches int .cliph_100

Funktionen ohne NameValue-Pair:

Name Beschreibung Value
mirror Spiegelt das Bild horizontal .mirror
gray Wandelt das Bild in eine Graustufengrafik um .gray
nopush Verhindert das verschieben des Bildes bei einem Klick .nopush
xrepeat Wiederholt das Bild horizontal .xrepeat
yrepeat Wiederholt das Bild vertikal int
alwayscopy Umgeht den Cache von Bildern. Das Bild wird immer in aktueller Form geladen und die gecachten Dateien werden dabei ignoriert. .alwayscopy
b Positioniert ein Bild auf der Baseline .b

Noch fehlend/unbekannt:

Name Beschreibung
tx -
ty -
snapx -
snapy -
shuffled -
vtop -
hoveralign -
albborder -
minw -
minh -
grayDone -
click -
colorize -
colorizationcolor -
path -
ending -
cursor -
velocity -
imgfly -
bottomfade -

Updated