Egy meglehetősen érdekes hálóhelyre akadtam. Azt, hogy milyen kalandos körülmények között, el se mondom. Lényeg, hogy egy német fiatalember, dacolva a világgal, JavaScriptet alkalmaz többek között olyan feladatokhoz, amikhez eddig a szörfözőnek külön értelmezőt (vagy bővítményt) kellett letöltenie és telepítenie. Határozottan figyelemreméltó! A nagyszerű ebben az, hogy ezt valamennyi böngésző érti. Igaz, (ez is) kikapcsolható, de ma már nagyon kevesen vannak, akik letiltják. A fiatalember DHTML-konform, JavaScript-alapú grafikus nyelvet hozott létre – rendkívül precíz és körültekintő módon: úgy alkotta meg a művét, hogy valamennyi böngészőre jó legyen (alsó határnak a Netscape 4-es változatát jelöli meg, de szerintem nem hord a föld a hátán olyan embert, aki ennyire régi alkalmazást használna); a megjelenítés és dinamikus oldalkezelés alábbi területeit dolgozta fel:

• Animáció
• Függvényrajzolás
• Húzd és pottyantsd
• Képforgatás
• Vektorgrafika
• Buborék

Igen széles skála… Nekem is jó sokáig tart majd, míg feltérképezem. Ezért arra biztatlak, időnként (amíg az ablak jobb felső sarkában látod a „Fejlesztés alatt…” feliratot) látogass el újra meg újra erre az oldalra; nem fogod megbánni.

Függvényrajzolás

Hát, bizony csalódtam… Figyelmesebben elolvasva a leírást, rá kellett jönnöm, hogy ez nem az, amit vártam. A fiatalember két megoldást is ajánl, ám egyik sem olyan, amit ezen az oldalon bemutathatnék.

• Az egyik, egy – egyébként kecsegtető (C nyelven megírt) – program, ami offline-futtatással függvényeket rajzol, és a kimenete – raszteros ábra. A szerző nem tagadja meg magát, ez a szoftver is ingyen letölthető.
• A másik ugyan tiszta JavaScript-alkalmazás, ám a fejlesztés mai stádiumában még csak a szerző oldalán futtatható. Azért érdemes megnézni…

Mindent összevetve, elég snassz volna, ha például egy matematikai témakörű cikk elirányítaná a kedves olvasót egy idegen hálóhelyre – megnézni a függvény ábráját… Kár. :-(

Húzd és pottyantsd

Ezt az alcímet a Drag&Drop nem igazán szellemes, magyar megfelelőjének szántam… Ám, amit a német fiatalember varázsolt e témakörben, az nem semmi! Utasításkészletének használatával életre kelthetők a képek az oldalon. Ezt próbáltam ki az alábbi játék összerakásakor. Nem falrengető, de mégis csak egy HTML-oldalon zajlik. Persze, ehhez Te is kellesz! Elmozgathatod (bizonyos korlátok között, ha van ilyen) a képet és a szöveget (a keretest, rögtön itt, egy sorral lejjebb). Kipróbálod?

Ha már belefogtál, és szeretnéd teljesen elölről kezdeni, kattints az Újra gombra. A Mégse paranccsal az utolsó lépésedet vonhatod vissza (ez a fenti, bekeretezett szövegre nem vonatkozik). Játszhatsz időre is: elindíthatod a Stoppert, de ha aztán ismét rákattintva leállítod, egyik térképelem sem hajlandó többé elhagyni pillanatnyi helyét. Ilyenkor indítsd Újra, így megint nekiláthatsz.

Mondhatod: „Sajnos, segítség nélkül nem megy…”

Remélem, sikerült! :-) Kérlek, küldd el nekem a rendbe tett ábra képét (lehetőleg ne BMP-formátumban – az túl nagy helyigényű), mert jutalmad egy Sport csoki! Kiváltképp, ha segítségre sem volt szükséged (ezt a gombok fölötti sor utolsó szava mutatja)… Meg tudod mondani, hogy melyik szeletet nem kellett elmozdítani?

Változtatások:

• Többen nehezményezték, hogy rendezgetés közben egymásra kell helyezni a térképelemeket – felszereltem felülre egy ideiglenes tárolót.
• Valaki elmondta, hogy lehet csalni, meg azt is, hogyan – kivédtem.
• Örömmel tettem eleget egy további kérésnek – ezentúl még direkt sem tudod a térképrészlettel teljesen letakarni a rácshelyen lévő másikat. (Emiatt, ha csak rákattintasz, elugrik a rácstól, de ha egy hangyányit el is húzod, esetleg a Mégse gombra kattintasz, visszapattan a helyére.)
• Piros keretet kap az utoljára megfogott elem. A kijelölés megszűnik, ha a térképdarabok mögé vagy az üres ideiglenes tárolóba kattintasz.

Nagyon köszönöm az észrevételeket! Minden további bírálatot, javaslatot, kérést és kérdést örömmel fogadok (a címem megtalálod a honlapon). Kérlek, ne tartsd vissza!

Vektorgrafika

Vajon mit lehet belőle kihozni? Mire alkalmas? Az utasításkészlete segítségével lehetőség nyílik

• vonal,
• sokszögvonal,
• téglalap (speciális esete a négyzet),
• poligon (speciális esete a szabályos sokszög),
• ellipszis (speciális esete a kör),
• ív (speciális esete a körív)

rajzolására, illetve szöveg és kép elhelyezésére. Egyéb tulajdonságok:

• a vonalvastagság mindenütt megadható,
• minden primitív (grafikai alapelem) színezhető.

Íme néhány példa:
kör ellipszis négyzet háromszög rombusz
téglalap vonal sokszögvonal ív

Megjegyzések (az ábra alapján):

• a sokszögvonal második és harmadik (bekarikázott) csúcsát összekötő vonal mutatja, hogy a közel vízszintes vagy függőleges léniák milyen csúnyák tudnak lenni (persze, ez nem csak itt igaz).
• a négyzetre, a sokszögvonalra és/vagy az ívre kattintgatva látszik, hogy mindig a később definiált elem van fölül.

Hogy állunk a Unicode-karakterekkel, például az (U+0250..02AF) IPA (International Phonetic Alphabet) Extensions-blokkal? Hogy nézne ki a(z) ɘ (U+0258) fonetikai jel? (A fokozatát másfél törzsnyire megnöveltem, hogy lehessen is látni. A blokk karaktereit az Explorer téglalappal ábrázolja, mert nincs felkészítve azok megjelenítésére.)

Az ábrán az első és a harmadik a rajzolt változat, a második – közönséges karakter. A harmadik színezéséből jól látszik, hogy milyen primitívekből tudtam utánozni a karaktert. Alattuk, a kisebb méretű ellipszis viszont meglehetősen satnya lett. Bizonyára lehet találni egy optimális méretet. Szembetűnő, hogy a Firefox is torzítani kénytelen. A kis méretű karakter nem méretarányos: jóval kerekebb mint a nagy…

A következő problémákat látom:

• nem változhat (állandó) az elemek vonalvastagsága (ez megszokott a vektorgrafikus alkalmazásokban);
• kevés a rendelkezésre álló primitív vagy utasítás (például nincs szabadkézi görbe, illetve a görbületek rögzítettek);
• az íveket csak feltöltve lehet megjeleníteni;
• nincs lehetőség a vég- és csúcspontok eldolgozásának megadására;
• a megjelenítés DIV-ek garmadának létrehozásával történik, így a felbontás kis görbületű görbék rajzolásához elégtelen;
• meglehetősen nehézkes a pozícionálás.

Akkor hát mire jó, mik az előnyei? Úgy tűnik

• az egyenesek, mégha ferdék is, jól ábrázolhatók, továbbá
• ez a megjelenítés (szinte) valamennyi böngészőben működik (mégha a függőleges pozícionálás különböző beállításokat is kíván – itt a Mozilla Firefoxot és a Microsoft Internet Explorert vettem figyelembe).

Ezen előnyöket kihasználva jól ábrázolható például a hatvanas számrendszer nem túl bonyolult, Heuréka! Ha másért nem, ezért megérte ez a kirándulás! Ezt eddig csak az SVG (Scalable Vector Graphics) alkalmazásával tudtam elérni, ehhez azonban – ahogy a bevezetőben is említettem –, le kell tölteni és telepíteni kell a platform- és böngészőfüggő SVG Viewert. Ezt viszont nem lehet elvárni minden egyes szörfözőtől… Ez utóbbiak az U+2200..22FF tartományba sorolt Mathematical Operators-blokk jelei, és karakterként így néznek ki (ha nem Explorert használsz, mert akkor csak téglalapokat látsz): ∇ (U+2207) és ∀ (U+2200)… Megnézheted a forAll vektorgrafikus ábráját különböző méretekben is, csak írd be a „Méretszorzó” rovatába a méretváltoztatás mértékét (0.6 és 30 közötti számot* – a szélső értékeket is beleértve), majd kattints a „Lássuk” gombra.

Méretszorzó:

*A szám a JavaScript számábrázolásának megfelelően 14 jegy pontosságig adható meg – habár ennek itt különösebb jelentősége nincs, sőt! Kerekítési okokból igencsak meglepő eredményre jutsz például 1.49 századdal, illetve 1.5 tizeddel. Bizonytalan az anomália előfordulása, de egész számokkal nem tapasztalható.

Végül, az 1:1 méretarányú forAll megjelenítésének JavaScript-kódja, ahol a végpontokat összekötő egyenesek együttese alkotja a karaktert (a lila függvények a fiatalember bővítményei):

/* a végpont-koordináták:
   x1, y1 - a bal oldali szár teteje
   x2, y2 - az alsó csúcs
   x3, y3 - a jobb oldali szár teteje
   x4, y4 - a vízszintes vonal bal oldali vége
   x5, y5 - a vízszintes vonal jobb oldali vége */
var forAll = new jsGraphics('forAll')
forAll.setStroke(1)           // vonalvastagság
x1 =  0
x2 =  6
x3 = 12
y1 = y3 = 0
y2 = 13
var Xs = new Array(x1, x2, x3)
var Ys = new Array(y1, y2, y3)
forAll.drawPolyline(Xs, Ys)   // sokszögvonal
x4 = 3
x5 = 9
y4 = y5 = 5
forAll.drawLine(x4,y4, x5,y5) // vonal
forAll.paint()                // megjelenítés

E piciny fejezet tartalmát nem a fiatalember csodálatos ötletei felhasználásával írtam le (ha arra vagy kíváncsi, nézd meg az alábbi lábjegyzetet), jóllehet az ezen az oldalon lévő valamennyi csoda a buborékok iránti vonzalmam révén került (nekem) a napvilágra. A Web Graphics Bubble Tooltips oldalán véletlenül bukkantam erre a valamivel látványosabb, egyszerűbbnek tűnő és főleg önálló megoldásra. Kell hozzá egy (például az ott található) buborékot ábrázoló kép, egy csipetnyi stílus-, egy kevéske JavaScript-, valamint egy nyúlfarknyi további kód az oldal head elemébe…  Voilà!  A JavaScript-kódban könnyen állítható a buborék átlátszósága; a magassága a bele kerülő szöveghez igazodik; és ráadásul szelektíven kezelhető: ez a fajta buborék kizárólag a Voilà!-hiperhivatkozás révén látható ezen a lapon. Az egyetlen – kétségkívül jogosan felróható – tökéletlenség (amit a fent említett oldal látogatói is kifogásolnak), hogyha a buborék egy része a HTML-oldal szélén túlnyúlik, nem látszik az oldalról kilógó tartalma sem. Ezt a hibát korrekt módon Javascripttel kellene kezelni, ám én lusta voltam, inkább az egyszerűbb megoldást választottam: megnöveltem a bekezdés bal és jobb margóját… Ha ügyesen állítod a böngésződ ablakának szélességét (úgy kb. 855 pixelre), és a Voilà! csaknem a szöveg jobb szélére kerül, megérted a rejtélyt.