Céline Dion – Courage World Tour

Céline Dion Courage World Tour

Céline Dion Courage World TourA Céline Dion – Courage World Tour esettanulmányunkban a turné első részének koncerthelyszíneit jelenítjük meg Google Charts segítségével. Ebben a blog bejegyzésben a tervezés, megvalósítás lépéseit tekintjük át és megmutatjuk az eredményeket. A Java és JavaScript forráskódokat most nem részletezzük.

Háromféle grafikont használunk

  • idővonal (Timeline) időpontok és helyszínek Gantt diagram-szerűen,
  • térkép (Geo Chart) városok megjelölésével és időpontok jelmagyarázatban,
  • tematikus térkép az USA államaival (szintén Geo Chart), az állam területén adott koncertek száma alapján és db jelmagyarázatban.

A tervezés és megvalósítás lépései

  1. Adatokat kell szerezni egy weboldal (https://www.celinedion.com/in-concert) feldolgozásával ( saveHTML()). Ehhez a művelet a GET. Figyelni kell a megfelelő User-Agent paraméterezésére és a karakterkódolásra ( ISO-8859-1). A kapott bemeneti folyam feldolgozását pufferelt módon érdemes elvégezni. Célszerű az adatforgalom minimalizásása érdekében a weboldal tartalmát helyi fájlba menteni ( tour.html). Ügyelni kell a kötelező és az ajánlott kivételkezelésre.
  2. Értelmezni kell a tour.html fájlt. A HTML tartalom végén JSON formátumban beágyazva elérhetők a koncert turné állomásainak adatai: nekünk kell a város ( city), helyszín ( venue), dátum/idő ( startDate). Érdemes külön fájlba menteni a tour.html-ből a JSON tartalmat ( tour.json), mert abból egyszerűen betölthető ( saveJSON()).
  3. Tanulmányozni kell a Google Charts diagramok közül azt a kettőt, amiket testre kell szabni: Timeline és Geo Chart. Tudni kell: mi a diagramot tartalmazó weboldal állandónak tekinthető eleje és vége (ezeket hasznos külön interfészben konstansként tárolni: HTMLFileContent), valamint mi az adatoktól függő része (közepe). Ismerni kell a szükséges metaadatok és adatok formátumát. Érdemes átnézni a különböző testre szabási és formázási lehetőségeket a fenti diagramtípusoknál (esetleg a többi típusból is meríthetünk ötleteket).
  4. A koncert turné állomásainak összetartozó 3 adatát le kell képezni POJO-vá ( Event). Ezt érdemes privát változókkal ( city, venue, startDate) és factory metódussal megvalósítani. Célszerű, ha az adatok visszakérésére alkalmas getter metódusok is készülnek ( getTimelineChartDataTableRow(), getGeoChartDataTableRow()), amelyek kiszolgálják a megfelelő diagramtípus igényeit.
  5. A tour.json fájl feldolgozásával (parszolásával) Event típusú generikus listába vagy JSON tömbbe könnyen leképezhetők az adatok.
  6. Hasznos egy vezérlőosztály létrehozása, amely a 3 diagramtípust előállító (HTML fájlt generáló) metódust ( createTimelineChart(), createGeoChartCity(), createGeoChartCountry()) valamint a belépési pontot ( main()) tartalmazza.
  7. Generálható az idővonalat tartalmazó timelineChart.html fájl a createTimelineChart()metódussal. Ehhez 5 oszlop megadása szükséges (ebben a sorrendben): label, city, tooltip, start, end. Az első 3 adat string, az utolsó 2 adat date típusú. Egy példa Event: ['2019.09.18.', 'Québec, QC', 'Videotron Centre', new Date(2019, 09, 18, 19, 0, 0), new Date(2019, 09, 18, 21, 0, 0)].
  8. Regisztrálni kell egy Google Cloud Platform felhasználói fiókot és tanulmányozni kell a geokódolás folyamatát és lehetőségeit, hiszen a városok nevéből (formátum pl.: 'Minneapolis, MN') szükség lesz azok térképi koordinátáira. Aktiválni kell a szolgáltatás használatához szükséges mapsApiKey-t.
  9. Generálható a városokat tartalmazó geoChartCity.html fájl a createGeoChartCity() metódussal. Ehhez 3 oszlop megadása szükséges (ebben a sorrendben): city, dateCity, no . Egy példa Event: ['Minneapolis, MN', '2019.11.01. Minneapolis, MN', 1].
  10. Generálható a régiókat/államokat tartalmazó geoChartCountry.html fájl a createGeoChartCountry() metódussal. Ez egy tematikus térkép: a különböző színek jelölik az egy régió/állam városaiban tartott koncertek számát. Ehhez az adatok megfelelő rendezését követően végrehajtott csoportváltás algoritmus szükséges. 2 oszlop megadása szükséges: country, concertNo. Egy példa adatsor: ['US-TX', 3].

Az eredmények

TimelineChart grafikon:

GeoChartCity grafikon:

GeoChartCountry grafikon:

Érdemes megismerni további – térképekhez kapcsolódó – grafikontípusokat is: Geomap, Intensity Map.

A bejegyzéshez tartozó teljes forráskódot ILIAS e-learning tananyagban tesszük elérhetővé tanfolyamaink résztvevői számára.

A példák a Java SE szoftverfejlesztő tanfolyam 37-44. óra: Fájlkezelés és a Java EE szoftverfejlesztő tanfolyam 1-4. óra: Elosztott alkalmazások, webszolgáltatások és 13-16. óra: JSON feldolgozás alkalmaihoz kötődnek.

Grafikont készítünk

grafikon

grafikonXML formátumban megkapott adatokat grafikonon jelenítünk meg. 5 összetartozó adat/tulajdonság sorozatát dolgozzuk fel: JOB_TITLE, EMPLOYEE_COUNT, MIN_SALARY, AVG_SALARY, MAX_SALARY. Az adatforrásban egyszerű életpálya modell szerint munkakörönként meghatározott az adható minimális és maximális fizetés (ez a 3 adat közvetlenül rendelkezésre áll). Minden alkalmazottra teljesül, hogy a fizetése beletartozik ebbe a zárt intervallumba. Az adatforrás feldolgozása során COUNT és AVG aggregáló függvényekkel előállítjuk – munkakörönként csoportosítva – az alkalmazottak létszámát és átlagfizetését (ez a további 2 adat). Az Oracle HR sémából lekérdezve 19 munkakört kapunk, így az XML fába is ennyi <JOB_STAT> csomópont kerül. A megfelelő pillanatban rendelkezésre álló 5 összetartozó adat exportálható XML formátumba az alábbiak szerint:

Az elkészült grafikon így jelenik meg:

JFreeChart-grafikon

A JFreeChart típusú grafikont az alábbi forráskóddal készítettük el:

A grafikon rendelkezik vizuális komponens mögötti adatmodellel, hiszen MVC szerkezetű komponens. Ez egy CategoryDataset típusú objektum. Ennek factory metódusa három paramétert vár: a jelmagyarázatot (rowKeys – legends), az Y tengelyen megjelenő feliratokat (columnKeys – jobTitleCountEmployees) és az adatokat (data – datas). Az első 3 elemű String[]: "Maximum fizetés", "Átlagfizetés", "Minimum fizetés". A második 19 elemű szöveges tömb: "Accountant (5 fő)", "Accounting Manager (1 fő)", …, "Stock Manager (5 fő)". A harmadik 3*19-es méretű kétdimenziós double típusú tömb, a megjelenítendő értékekkel: {{9000, 7920, 4200}, {16000, 12000, 8200}, , {8500, 7280, 5500}}.

A szükséges adatok megadását követően meg kell adni a grafikon megjelenítését meghatározó adatokat. Ezt egy CategoryPlot típusú objektum teszi lehetővé, amely konstruktora négy paramétert vár. Az első az adatforrás ( cd), a második az Y tengely felirata ( "Munkakör és létszám"), a harmadik az X tengely – alapértelmezetten felül megjelenő – felirata ( "Fizetés"), a negyedik a diagramtípushoz tartozó megjelenítő funkcióra utaló interfész képességeivel rendelkező névtelen objektum. Ez a 3D oszlopdiagram fekvő és egymást részben átfedő/eltakaró oszlopokkal jelenik meg.

Végül az elkészült ChartPanel típusú objektumra helyezett JFreeChart típusú diagramot hozzá kell adni a JFrame típusú GUI tartalompaneljének egy BorderLayout elrendezésmenedzserű paneljéhez.

Az elkészült grafikon többféle szakterületen is hasznos lehet. Értelmezése során összefüggéseket fogalmazhatunk meg és következtethetünk is.

A bejegyzéshez tartozó forráskódot ILIAS e-learning tananyagban tesszük elérhetővé tanfolyamaink résztvevői számára.

A feladat adatfeldolgozó része a Java EE szoftverfejlesztő tanfolyam 9-12. óra: XML feldolgozás, a grafikont megjelenítő része a Java SE szoftverfejlesztő tanfolyam 29-36. óra: Grafikus felhasználói felület alkalmához kapcsolódik.

ASCII művészet Java-ban

ASCII Art 4

ASCII Art 1Átte­kint­jük a ka­rak­ter­a­la­pú raj­zo­lás le­he­tő­sé­ge­it Java 2D gra­fi­ká­val, illetve a ka­rak­ter­fü­zé­rek kép­ként va­ló ke­ze­lé­sé­nek újabb le­he­tő­sé­ge­it is.

Az ASCII művészet jelentése és kezdete

Az ábécék betűiből/szövegeiből kialakított ábrák egyidősek lehetnek az írásbeliséggel. A technológiától függetlenül a karakterekből kialakított kép megjeleníthető: papír és penna vagy írógép, illetve számítógép és nyomtató vagy monitor segítségével.
Az ASCII művészet (ASCII art) tágabb értelemben a szövegalapú vizuális művészetre vonatkozik. Szűkebb értelemben véve a számítógépes grafika részterületének tekinthető. Az ASCII művészet számítógépet használ nyomtatható standard ASCII kompatibilis karakterekből álló képek készítéséhez és megjelenítéséhez. A képeken a képi elemek a nyomtatható karakterek, amelyek a pointilizmushoz hasonló optikai effektust mutatnak.
A művészeti ág indulása arra vezethető vissza, hogy a korai nyomtatókkal nem lehetett grafikát nyomtatni, a monitorokon nem lehetett grafikát megjeleníteni. Cégek, programok bannerjeinek, logóinak készítésére pedig akkor is volt igény. Ezek mellett például prezentációkhoz, kapcsolási rajzokhoz is használták az ASCII művészetet, valamint természetesen a korai e-mailekben is. A grafikus kártyák megjelenése előtti időkben pedig a videójátékok „grafikája” is ezzel a technikával készült.
Most nézzünk meg néhány lehetőséget saját programmal való képkészítésre.

ASCII képek rajzolása programozási alapismeretek tanulásakor

Saját programmal már az alapok tanulásakor készíthetők ASCII képek a vezérlő szerkezetek megismerése kapcsán. Az alábbi képek bemutatják a lehetőségeket.

ASCII Art 2

További sok-sok kép található az alábbi weboldalakon:

A 2D grafikával való szövegrajzoláshoz használható BufferedImage osztály

A BufferedImage osztály a java.awt.image csomag része. Az Image osztály utódja. Hozzáférhető képadat-puffert tartalmaz, colorModel-ből és képadatok raster-éből áll. A raster sampleModel-jében a sávok számának és típusainak illeszkedniük kell a színt és átlátszó (alpha) komponenseket megadó colorModel által megkívánt számhoz és típusokhoz. A BufferedImage típusú objektumnak van bal felső koordinátája (0, 0), ezért a létrehozásához használt raster-nek kell legyen minX=0 és minY=0 értéke. A BufferedImage osztály a raster fetch és set metódusaira, valamint a colorModel színmódosítási módszereire támaszkodik.

Szöveg képként megjelenítése karakterekkel a konzolon

A kép méretét beállítjuk. A Graphics2D osztály drawString() metódusával String-et képként jeleníthetünk meg. Bár elég „munkás”, de Java-ban gyakran BufferedImage példány létrehozásával oldjuk ezt meg, és a Graphics példányt attól kérjük el. A Graphics2D osztály karakterfüzérek rajzolásakor egyszerű mátrixszerű technikát használ. A String-et kirajzoló mátrixrészek nullától különböző értéket kapnak. A megjelenítendő terület értékét egyszerű adatként, például int-ként kell megadnunk, nem RGB színértékekkel. Ehhez a képtípust int-módba állítottuk: BufferedImage.TYPE_INT_RGB. Az ASCII képek alapötlete az, hogy a képmátrix nem nulla indexeihez hozzárendelt értékeket a kívánt művészi karakterrel helyettesítjük. A nulla értékű mátrixindexeknek szóközt adunk. A nulla integer-módban -16777216-tal egyenlő. Ezután a Java 2D grafika haladó renderelő beállításainak használatához kasztoljuk a Graphics objektumot Graphics2D példánnyá. Majd beállítjuk a kívánt renderelési paramétereket, végül meghívjuk a drawString() metódust egy karakterlánccal.

Íme az elkészült szöveg/képernyőkép:

ASCII Art 3

A karakterek cserélgetésével a pozitív képből könnyen kaphatunk inverz/negatív képet is. A generált/renderelt képet fájlban is tárolhatjuk, például a javax.imageio.ImageIO osztállyal és adott a lehetőség a kép méretének megadására, a rajta megjelenő szöveg betűtípusának beállítására, háttérszín és szövegszín alkalmazására is.

A Java BufferedImage osztály néhány lehetőségének áttekintése után jó szórakozást kívánunk az ASCII képek létrehozásához, a lehetőségek további tanulmányozásához. Aki nem programból szeretne karakterekből/szövegekből felépülő képeket készíteni, használhat online alkalmazásokat is, például az Image to HTML/ASCII-t.

A bejegyzéshez tartozó teljes forráskódot ILIAS e-learning tananyagban tesszük elérhetővé tanfolyamaink résztvevői számára.

A feladat a Java SE szoftverfejlesztő tanfolyam szakmai moduljának 21-24. óra: Objektumorientált programozás, 2. rész alkalmához kötődik.

Koch-görbét rajzolunk

Koch-görbe

Koch-görbeA Koch-görbe egyike a legrégebben ismert egyszerű fraktáloknak. Mint ilyen, önhasonlóan rekurzív. Az önhasonlóság azt jelenti, hogy az ábra tetszőleges részét felnagyítva mindig hasonló/ugyanolyan részek jelennek meg (a méretaránytól függetlenül). Az n=1 szinten a Koch-görbe kiindulópontja egy szabályos háromszög. A n+1-edik szinten az n-edik szinten található szakaszokat harmadoljuk, és a középső szakasz helyére egy harmad akkora háromszög két szárát illesztjük (az alapját kihagyjuk). Ezt rekurzívan folytatva kapjuk meg a Koch-görbét, másképpen Koch-féle hópelyhet.

Írtam egy egyszerű Java programot, amely n=1-től 9-ig paraméterezhetően kirajzolja a Koch-görbét egy grafikus felületre. Így működik:

Koch-görbe rajzolását bemutató program működése

A program elkészítéséhez néhány alapvető dolgot kell csupán tudni:

  • Vászontechnikával tudunk swing GUI felületre ( Graphics osztályú g objektum) rajzolni, ahol a koordináta-rendszer origója egy téglalap alakú terület bal felső csúcsa, X jobbra növekszik, Y pedig lefelé növekszik.
  • Kétféle szín áll rendelkezésre: háttérszín (most Color.WHITE), illetve rajzolószín (most Color.BLUE).
  • A rajzoláshoz grafikai primitíveket használhatunk, például pont, szakasz, téglalap, ellipszis. Szakaszt két végpontjának koordinátáival tudunk rajzolni a drawLine() metódussal.
  • Be kell állítani a vászon méreteit, azaz annak a komponensnek ( JPanel-ből öröklött KochPanel osztályú pnKoch objektum) a méreteit, amelyre ráfeszül a vászon.
  • Egy Slider osztályú sSzint nevű vezérlőobjektum ChangeListener figyelőinterfész stateChanged() eseménykezelő metódust implementáló objektumával paraméterezzük a rajzolást 1-től 9-ig.
  • A pnKoch objektumnak küldött repaint() üzenet/metódushívás meghívja a felüldefiniált paintComponent() metódust.

A szakasz négy darab harmad akkora szakaszra osztását a megfelelően paraméterezett rekurzív metódushívások oldják meg az alábbi lépéseket követve:

Koch-görbe rajzolásának fázisai

A rekurzív rajzolást a koch() metódus végzi el, ahol a fraktál szabályának megfelelően szakaszharmadolás és a szükséges pontok koordinátáinak (szakaszok végpontjai) kiszámítása történik:

A Koch-görbének van néhány érdekes tulajdonsága:

  • kerülete minden rekurzív lépésben minden határon túl növekszik, azaz a végtelenhez tart,
  • területe véges, hiszen minden rekurzív lépésben belefér a háromszög köré írható körbe,
  • dimenziója tört, ~ 1,261859.

A bejegyzéshez tartozó teljes forráskódot ILIAS e-learning tananyagban tesszük elérhetővé tanfolyamaink résztvevői számára.

A feladat a Java SE szoftverfejlesztő tanfolyam szakmai moduljának 9-12. óra: Metódusok, rekurzió alkalomra építő 29-36. Grafikus felhasználói felület alkalomhoz kötődik.

A képernyőről a videó a FlashBack Express programmal, a videóból az animált gif az aconvert.com weboldalon készült.

Optikai csalódások

OptikaiCsalodas0

OptikaiCsalodas0A grafikus felülettel rendelkező Java programok (Swing, FX, webkomponensek, HTML+CSS) fejlesztése során igény adódhat arra, hogy a GUI komponensek saját beépített rajzoló/renderelő képességét felülírjuk/-definiáljuk, hogy egy-egy nyomógomb, menüpont, rádiógomb másképpen nézzen ki. Léteznek beépített rajzoló funkciók is.

Ha például grafikont kell beilleszteni egy alkalmazásba, akkor használjunk és igényeink szerint szabjunk testre egy JFreeChart csomagbeli grafikont, illetve előfordulhat, hogy találhatunk egy olyat a JFreeChart Demo-ban, ami éppen megfelel a megrendelő igényeinek.

Persze a műfaj nem ér itt véget. Időnként kreatívabb ábrák, rajzok, grafikák megjelenítésére is használhatjuk a beépített – általában téglalap alakú – komponenseket. Ehhez egyszerűen csak felül kell írni/definiálni a paint() metódusukat és vászontechnikával, a megszokott képernyős koordináta-rendszerben, grafikai primitíveket (pont, téglalap, ellipszis) és színeket kell megfelelően paraméterezni.

Az optikai csalódások igen népszerűek, és az egyszerűbb fiziológiai és kognitív illúziók könnyen lerajzolhatók a fenti eszköztárral, hiszen csupán színek, alakzatok, kontraszt, távolság, mélység, térhatás segítségével valósulnak meg.

Íme három egyszerű példa, hogyan állítható elő optikai csalódás Java implementációval!

1. példa

Optikai csalódás 1

2. példa

Optikai csalódás 2

3. példa

Optikai csalódás 3

A bejegyzéshez tartozó teljes forráskódot ILIAS e-learning tananyagban tesszük elérhetővé tanfolyamaink résztvevői számára.

Aki ezek után kedvet kapott, keressen hasonló ábrákat és tervezve, kódolva, tesztelve gyakoroljon! Ajánlom ezeket a weboldalakat:

Hasonló feladatok megoldásához a Java SE szoftverfejlesztő tanfolyam szakmai moduljának 29-36. Grafikus felhasználói felület alkalma után bátran hozzá lehet fogni, illetve érintjük még a GUI témakört a Java adatbázis-kezelő tanfolyam 33-40. óra: Grafikus kliensalkalmazás fejlesztése JDBC alapon alkalommal is.