fájlkezelés - címke - it-tanfolyam.hu

Kép élesítése effektus működése

2023. november 20. Szerző: Kaczur Sándor

Ismert számos képfeldolgozó, képjavító effektus. Az egyszerűbb effektusok elérhetők ingyenes web- és mobil alkalmazásokban, PowerPointban. Az összetettebb (művészi) effektusokhoz, szűrőkhöz már érdemes professzionális eszközt használni, ilyen például az Adobe Photoshop. Ezek a belépő szint képeffektusai kulcsszavakban: élesítés (sharpen), homályosítás (blur), elmosódás (gaussian blur), folyadékszerű rajz (liquid), olajfestmény (oil painting), öregítés (sepia), szürkeskála (grayscale).

Lássuk, hogyan valósítható meg Java programozási nyelven a kép élesítése!

A kép adatszerkezete

Adott egy képfájl. Formátuma a tipikus, feldolgozhatók (JPG, GIF, PNG, WebP) egyike. Ezek rasztergrafikus képformátumok. Lekérdezhető a dimenziója: ez képpontban (pixelben) jelenti a kép szélességét (width) és a kép magasságát (height). A vászontechnika meghatározza a kép origóját (0, 0) és a képpontok kétdimenziós koordinátapárját. A kép origója a bal felső sarokban van. A kép oszlopai (column) jobbra haladva növekvő módon, a kép sorai (row) lefelé haladva növekvő módon számozottak. Egy pixel koordinátapárja (c, r) alakban írható le. Minden pixel három szín kombinációjaként áll elő (r, g, b). Másképpen: a piros, zöld és kék összetevők aránya alapján meghatározott. A tipikus színmélység alapján a színek külön-külön 256-félék lehetnek, és ezeket 0-tól 255-ig egész szám képviseli. A 0 az adott szín hiányát, a 255 a szín teljes intenzitását jelenti.

A kép élesítéséhez használható szűrőmátrixok

A kép élesítése során szűrőt alkalmazunk a kép belső pixeleire. A kép 4 szélén lévő pixeleket nem változtatjuk. Többféle szűrő közül választhatunk, íme két példa:

A három színösszetevőre külön-külön kell alkalmazni a szűrőt. Az aktuális pixel – amire alkalmazzuk a szűrőt – a 3×3-as mátrix középső eleméhez igazítva szorzóértékeket tartalmaz. A konkrét eset: az a mátrix esetén az 5 érték a 2. sor 2. oszlopában helyezkedik el; ennek a közvetlen szomszédos pixeleire a -1 értékek, átlós szomszédaira pedig a 0 értékek vonatkoznak. Eredményül a szűrt pixel színeit kapjuk meg külön-külön. Ha a kapott értékek kisebbek 0-nál, akkor nullázzuk őket. Ha a kapott értékek nagyobbak 255-nél, akkor beállítjuk azokat 255-re. Az a szűrőmátrix kevésbé élesít, a b szűrőmátrix erősebben élesít.

Természetesen sok más képélességhez köthető szűrő is van még. Olyanok is vannak, ahol nem csak a közvetlen szomszédos pixeleket veszi figyelembe az algoritmus. További kulcsszavak a témához kötődően: digitális képfeldolgozás, lokális operátor, korreláció, konvolúció, átlagszűrő, mediánszűrő, zajszűrő, Laplace-szűrő.

A kép élesítését megvalósító Java forráskód-részlet

A fenti a mátrixot a SHARP_FILTER konstans kétdimenziós tömb tárolja. A paraméterként átvett BufferedImage típusú img1 objektum kép pixeleinek végigjárását ütközőként segíti a w szélesség és h magasság. A data egydimenziós tömb sorfolytonosan tárolja a kép pixeleit. Az if elágazó utasítás igaz ága kezeli a kép 4 szélét (változatlanul hagyott másolt színek). Az if hamis ága a belső pixelekre alkalmazza a szűrőmátrixot. A red, green, blue változók tartalmazzák az aktuális pixel színeit, amelyekbe az eredeti pixelre alkalmazott szűrő által szorzott értékek kerülnek, „belekényszerítve” a 0-255 zárt intervallumba. Végül az eredményül visszaadott img2 kép pixelei kerülnek beállításra. Az alábbi sharpenEffect() függvény mindezt megoldja az alábbiak szerint:

public static BufferedImage sharpenEffect(BufferedImage img1) {

final int[][] SHARP_FILTER={

{ 0, -1, 0},

{-1, 5, -1},

{ 0, -1, 0}

};

Color[][] colorArray=new Color[3][3];

int w=img1.getWidth(), h=img1.getHeight(), i=0;

int[] data=new int[w*h];

for(int y=0; y<h; y++)

for(int x=0; x<w; x++) {

if(y==0 || x==0 || y==h-1 || x==w-1)

data[i]=img1.getRGB(x, y);

else {

for(int c=y-1; c<=y+1; c++)

for(int r=x-1; r<=x+1; r++)

colorArray[x-r+1][y-c+1]=new Color(img1.getRGB(r, c));

int red=0, green=0, blue=0;

for(int c=0; c<=2; c++)

for(int r=0; r<=2; r++) {

red+=SHARP_FILTER[r][c]*colorArray[r][c].getRed();

green+=SHARP_FILTER[r][c]*colorArray[r][c].getGreen();

blue+=SHARP_FILTER[r][c]*colorArray[r][c].getBlue();

}

red=(red<0)?0:(red>255?255:red);

green=(green<0)?0:(green>255?255:green);

blue=(blue<0)?0:(blue>255?255:blue);

Color c2=new Color(red, green, blue);

data[i]=c2.getRGB();

}

i++;

}

BufferedImage img2=

new BufferedImage(w, h, BufferedImage.TYPE_INT_RGB);

img2.setRGB(0, 0, w, h, data, 0, w);

return img2;

}

A metódus meghívása a fájlkezelést is tartalmazó vezérlőmetódusban például így történhet:

public static void main(String[] args) {

try {

BufferedImage imageSource=ImageIO.read(

new File("./images/Traditional-Japanese-Garden.jpg"));

BufferedImage imageSharpen=sharpenEffect(imageSource);

ImageIO.write(imageSharpen, "jpg",

new File("./images/Traditional-Japanese-Garden-sharpen.jpg"));

}

catch(Exception e) {

}

Az eredeti és élesített képek összehasonlítása

A bal oldalon az eredeti kép, a jobb oldalon az a mátrixszal élesített kép látható:

A bal oldalon az eredeti kép, a jobb oldalon a b mátrixszal élesített kép látható:

A látvány alapján fontos kiemelni, hogy másképpen is lehet összehasonlítást végezni. Például: színtérkép, színmélység, színösszetevők aránya (hisztogram).

Ötletek továbbfejlesztésre

Konzolos program átvehetné parancssori paraméterként a szűrőmátrixot, vagy annak nevét, kódját, egyes értékeit.
Grafikus felületű programban vízszinten JScrollBar GUI komponens(ek) segítségével paraméterezhető, kigörgethető lehetne a szűrőmátrix szélsőértéke(i).
A fenti effektek a kép összes pixelét érintik. GUI felületen megoldható az is, hogy ki tudjuk jelölni a kép egy-egy részét, amire alkalmazni szeretnénk az effektek. Ez a kijelölés többféle lehet, például téglalap alakú, szabálytalan, átlátszó, adott vagy adotthoz hasonló árnyalatú színű, vagy valaminek a körvonala.
Egy mappában lévő összes képre alkalmazható effekt, előnézettel, képfájlonként megerősítéssel, jóváhagyással, csoportos kijelöléssel, szűrővel.

Szürkeskála effekt megvalósítása és tesztelése az alábbi forráskód-részlettel:

Color c1=new Color(img1.getRGB(x, y));

int gray=(int)

(0.21*c1.getRed()+0.72*c1.getGreen()+0.07*c1.getBlue());

Color c2=new Color(gray, gray, gray);

Homályosítás effekt megvalósítás és tesztelése a 4 élszomszéd színeinek átlagolásával, így:

Color cTop=new Color(img1.getRGB(x, y-1)),

cRight=new Color(img1.getRGB(x+1, y)),

cBottom=new Color(img1.getRGB(x, y+1)),

cLeft=new Color(img1.getRGB(x-1, y));

int r=(cTop.getRed()+cRight.getRed()+

cBottom.getRed()+cLeft.getRed())/4,

g=(cTop.getGreen()+cRight.getGreen()+

cBottom.getGreen()+cLeft.getGreen())/4,

b=(cTop.getBlue()+cRight.getBlue()+

cBottom.getBlue()+cLeft.getBlue())/4;

Color c2=new Color(r, g, b);

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 Java SE szoftverfejlesztő tanfolyamunkon, a szakmai modul Objektumorientált programozás témakörét követő 29-36. óra Grafikus felhasználói felület alkalmain már tudunk egyszerűbb GUI programot tervezni, kódolni, tesztelni, kiegészítve a 37-44. óra Fájlkezelés alkalmaihoz kötődő példaprogramokkal.

Táblázatos hőtérkép készítése

2023. november 6. Szerző: Kaczur Sándor

Ebben a projektben táblázatos hőtérképet készítünk Java és JS nyelveken. Java programot készítünk az adatok véletlenszerű előállításához és a sablon alapján történő HTML fájl generálásához. JavaScript program fogja a grafikont megjeleníteni a weboldalon. Tervezünk, kódolunk, tesztelünk. Lássunk hozzá!

Mi az a hőtérkép?

A hőtérkép (heatmap) olyan grafikon, amely könnyen áttekinthetővé tesz nagy mennyiségű adatot úgy, hogy kategorizál/csoportosít és az előfordulások tartományai alapján különböző színeket rendel azokhoz. A szín hozzárendelése egy intervallumból történik. Például a világosabb a ritkább, a sötétedő szín az egyre gyakoribb értékeket jelenti. A tipikus hőtérkép kétdimenziós és az előforduló adatok mennyiségét, azok arányait, eloszlását, szóródását (nem szórását), gyakoriságát jeleníti meg. A hőtérkép gyors vizuális összefoglalást, áttekintést biztosít. A projekt során sorokból és oszlopokból álló táblázatos hőtérképet készítünk.

A táblázatos hőtérkép nem összekeverendő a következő két megközelítéssel:

Ha az adatok lokációhoz kötődnek és térképen jelennek meg, akkor azt tematikus térképnek nevezzük. Erről már blogoltam korábban, lásd: Céline Dion – Courage World Tour, amikor az énekesnő USA-beli államokban előforduló koncertjeinek számát jelenítettem meg. Ehhez hasonlók az amerikai elnökválasztás során használt tematikus térképek, amelyek a(z egyes) jelöltek szavazatainak arányát ábrázolják meg szintén államonként.
Ha az adatok webergonómiához, bannervaksághoz, inkább fókuszban lévő tartalmakhoz, felhasználói élmény (UX) tervezéshez kötődnek, akkor a weboldal grafikus elemeihez (azok pozíciója) alapján rendelünk hozzá színeket attól függően, hogy mennyi ideig nézi azt a felhasználó.

Mi a feladat (koncepcionálisan)?

Adott egy konditerem, amely hétköznapokon egy megadott időintervallumban használható. Ehhez kulcsot kell felvenni és leadni. Az első belépő nyitja és az utolsó távozó zárja az ajtót. A teremhasználat offline nyilvántartott, így nehézkes bármiféle kimutatás, statisztika. A „menet közbeni” jövés-menést nem tudjuk követni. Természetesen adott számos szabály (felelősség, biztonság, balesetvédelem, létszámkorlát), amit most nem részletezek.

Elhelyezünk az ajtó mellett, belülről egy belépéshez és egy távozáshoz tartozó QR kódot. Készítünk egy egyszerű mobil alkalmazást és megkérjük a konditermek használóit, hogy belépéskor és távozáskor „csekkoljanak”. Anonim gyűjtjük a belépések és távozások időpontját (valahol egy szerveren, bármilyen fájlban, adatbázisban).

A konditermek használatára vonatkozó összesített adatokat könnyen átlátható módon szeretnénk weboldalon megjeleníteni: heti bontásban, a nyitva tartás időszakát órás blokkokra bontva az igénybevételtől függően jelenjenek meg az adatok táblázatos hőtérképen.

Ez az állapot átmeneti. Segítheti a konditermekbe tervezett – egyéni használattól független – események ütemezését. Ezeket akkor lenne célszerű időzíteni, amikor nem, alig, vagy kevésbé használt, foglalt az adott konditerem. A továbbfejlesztés következő állapotában könnyen lecserélhető a QR kód RFID alapú proximity kártyára, proxy kulcstartóra: először csak a jelenlét nyilvántartásához, később akár az ajtó nyitásához is.

Mit valósítunk meg mindebből Java nyelven?

Egyetlen konditeremre fókuszálunk. A hétköznaponként nyitva tartás legyen 16 órától 21 óráig. Aki edzésre jön, véletlenszerűen 20 és 40 perc közötti időszakot tölt a konditeremben. 16 órától lehet belépni. Az utolsó belépés 20:40-kor lehet (érdemes). 21 órakor mindenki elhagyja a konditermet. Nem fordul elő, hogy valaki nem jelzi a belépését vagy a távozását. Mivel anonim a nyilvántartás, így elegendő a dátum/időhöz, időbélyeghez egyetlen állapotot tárolni: be vagy ki. Valaki belépett nyitáskor vagy valamikor utána, majd távozott 20-40 perccel később, de legfeljebb záráskor.

A szükséges adatokat véletlenszerűen állítjuk elő. Egy hétre vonatkozó adatokat generálunk. Ezek a fenti paramétereknek megfelelő, összetartozó belépéshez és távozáshoz köthető időpontok. Kiegészítve a napok ciklusban való léptetésével hétfőtől péntekig. Az adatokat feldolgozva, összegyűjtve, csoportosítva, kategorizálva olyan (kimeneti) formátumra alakítjuk, amely kompatibilis a táblázatos hőtérkép adatmodelljével (bemenetével). Mindez Java nyelven valósul meg.

Mi történik JavaScript nyelven?

A webes megjelenítéshez szükséges egy HTML fájl, amelyben beágyazva található meg egy téglalap alakú területként megjelenő táblázatos hőtérkép. Ez sokféleképpen testre szabható: adható hozzá felirat, beállítható a sorokhoz és oszlopokhoz tartozó szöveg és a táblázat celláiban megjelenő értékek, adott a lebegő, az egér kurzor helyzetétől függő – cellánként különböző – jelmagyarázat, és persze mindennek van formátuma (betűtípus, méret, szín, igazítás, kitöltés). A fix, adatoktól nem függő beállításokat tartalmazó weboldalt sablonként elkészítjük. Mindez JavaScript nyelven történik. Ezután Java program a weboldal sablonját kiegészíti (cseréli, behelyettesíti, feltölti) a szükséges adatokkal.

Hogyan alakul az időintervallumok átfedése?

A konditerem használatának alakulását követjük, amihez táblázatos hőtérképet készítünk. Ehhez a nyitva tartás időintervallumát órás blokkokra bontjuk. Blokkonként összesítjük a jelenlétet, azaz megszámoljuk, hogy éppen akkor hányan veszik igénybe a konditermet, hányan vannak jelen/benn.

A konkrét paraméterektől függően az alábbi képen látható 3 eset egyike fordulhat elő. A és B jelöli az órás blokk elejét és végén, tehát ez 60 perces intervallum. Tarthat például: 16:00:00-16:59:59-ig. X és Y jelöli a jelenlét intervallumát, azaz a belépés és távozás időpontjait. Ez 20 és 40 perc között alakul. Haladjunk balról jobbra az ábrán.

Az első esetben ugyanarra az órára esik a belépés és a távozás. Ez az eset egyértelmű. A másik két esetben átfedés van több órás blokk között, mert különböző órára esik a belépés és a távozás. El kell dönteni, hogy ekkor hogyan összesítjük a jelenlétet. Válasszunk az alábbi két módszer közül:

Az első módszer szerint mindkét órához – ahol átfedés van – összesítjük a jelenlétet 1-1 főként, hiszen ha nem is végig, de jelen volt mindkét órás blokkban. Például: egy 16:50:00-17:20:00 jelenlétet a 16 és 17 órás blokkban is figyelembe veszünk.
A második módszer szerint időarányosan tesszük mindezt, azaz súlyozunk aszerint, hogy milyen hosszú jelenlét esik az egymást követő órákban. Például: egy 16:50:00-17:20:00 jelenlétet a 16 órás blokk esetében egyharmad, a 17 órás blokk esetében kétharmad a jelenlét adott órára eső aránya, súlya.

Az első módszert valósítjuk meg. Ez a döntés jelentősen befolyásolja, hogyan kell értelmezni később az elkészült táblázatos hőtérképet.

Objektumorientált tervezés

A koncepcionális terv alapján modellezünk. A szükséges adatok tárolására és alapfunkcióira fókuszálunk. Az osztály tárolja az összetartozó adatokat és megvalósít rajtuk értelmezhető műveleteket. Az időintervallum/időtartam kezelését a Duration ősosztály oldja meg. Tárolja a start és stop – naptól független időpontokat tároló – adatok és a rájuk vonatkozó FORMAT – megjelenítéshez kötődő – konstanst. Biztosítja a szükséges műveleteket: konstruktor, getterek, megvalósítja az időintervallumok átfedését az isOverlapped() függvénnyel, valamint ad szöveges reprezentációt a toString() függvénnyel. Az ősosztályból öröklődik az utódosztály. A DurationMap osztály a naptól független időpontokat kibővíti a hozzájuk tartozó day nappal, valamint képes tárolni az összesített, megszámolt jelenlétet a count változóban. Részt vesz a megszámolás folyamatában azzal, hogy lépésenként meghívható az incrementCount() eljárása.

A java.time csomagbeli LocalTime osztály képes a dátumtól független, napon belüli időpont tárolására és biztosít néhány alapvető funkciót a kezelésükre. Az adattárolás a napon belül eltelt időn alapul és nekünk (bőven) elegendő a másodperc alapú megjelenítés. A DateTimeFormatter alkalmas ezen időpontok formátumának tárolására, például óó:pp:mm alakban.

A Duration osztályból annyi objektum készül, ahány jelenlét adódik véletlenszerűen. Akár több száz is lehet. A DurationMap osztályból generált objektumok száma jóval kevesebb. Heti 5 napra, napi 5 órás blokkra 25 db készül belőle.

A vezérléshez kötődő osztály tervezését nem részletezem.

Íme a Java forráskód

public class Heatmap {

private final DayOfWeek[] WORKDAYS=new DayOfWeek[] {

DayOfWeek.MONDAY, DayOfWeek.TUESDAY, DayOfWeek.WEDNESDAY,

DayOfWeek.THURSDAY, DayOfWeek.FRIDAY};

private final LocalTime ENTER_START_TIME=LocalTime.of(16, 0, 0);

private final LocalTime ENTER_STOP_TIME=LocalTime.of(20, 40, 0);

private final LocalTime EXIT_TIME=LocalTime.of(20, 59, 59);

private final DateTimeFormatter FORMAT=

DateTimeFormatter.ISO_LOCAL_TIME;

private final Path HEATMAP_TEMPLATE_FILE=

Paths.get("./files/heatmap-template.html");

private final Path HEATMAP_FILE=Paths.get("./files/heatmap.html");

private ArrayList<DurationMap> durationMapAllList=new ArrayList<>();

public Heatmap() {

overlapTest();

createHeatmapFile();

}

private void overlapTest() {

for(DayOfWeek day: WORKDAYS) {

LocalTime intervalStart=ENTER_START_TIME;

LocalTime intervalStop=

intervalStart.plusHours(1).minusSeconds(1);

ArrayList<DurationMap> durationMapDayList=new ArrayList<>();

for(int i=1; i<=5; i++) {

DurationMap interval=

new DurationMap(day, intervalStart, intervalStop);

durationMapDayList.add(interval);

intervalStart=intervalStart.plusHours(1);

intervalStop=intervalStop.plusHours(1);

}

ArrayList<Duration> durationList=new ArrayList<>();

for(int i=1; i<=10; i++) {

int startSec=ENTER_START_TIME.toSecondOfDay(),

stopSec=ENTER_STOP_TIME.toSecondOfDay();

int randomSec=

(int)(Math.random()*(stopSec-startSec+1)+startSec);

LocalTime startTime=LocalTime.ofSecondOfDay(randomSec);

int presenceMin=(int)(Math.random()*21+20);

LocalTime stopTime=LocalTime.ofSecondOfDay(Math.min(

startTime.toSecondOfDay()+presenceMin*60,

EXIT_TIME.toSecondOfDay()));

durationList.add(new Duration(startTime, stopTime));

}

durationMapDayList.stream().forEach((durationMap) -> {

durationList.stream().

filter((duration) -> (duration.isOverlapped(durationMap))).

forEach((duration) -> {

durationMap.incrementCount();

});

durationMapAllList.addAll(durationMapDayList);

}

private void createHeatmapFile() {

String heatmapData=durationMapAllList.stream().

map(DurationMap::toString).collect(Collectors.joining(",\n"));

try {

String html=Files.readAllLines(HEATMAP_TEMPLATE_FILE).stream().

collect(Collectors.joining("\n"));

html=html.replace("##HEATMAP_DATA##", heatmapData);

Files.write(HEATMAP_FILE, html.getBytes(),

StandardOpenOption.CREATE);

}

catch(IOException e) {

e.printStackTrace();

}

public static void main(String[] args) {

new Heatmap();

}

A Java forráskód minden megtervezett funkciót megvalósít, támogatva a koncepciót. Most nem részletezem a működését.

A véletlenszerűen előállított adatok

A lista görgethető:

{x: "hétfő", y: "16:00:00-16:59:59", heat: 4},

{x: "hétfő", y: "17:00:00-17:59:59", heat: 6},

{x: "hétfő", y: "18:00:00-18:59:59", heat: 9},

{x: "hétfő", y: "19:00:00-19:59:59", heat: 6},

{x: "hétfő", y: "20:00:00-20:59:59", heat: 6},

{x: "kedd", y: "16:00:00-16:59:59", heat: 6},

{x: "kedd", y: "17:00:00-17:59:59", heat: 10},

{x: "kedd", y: "18:00:00-18:59:59", heat: 6},

{x: "kedd", y: "19:00:00-19:59:59", heat: 7},

{x: "kedd", y: "20:00:00-20:59:59", heat: 3},

{x: "szerda", y: "16:00:00-16:59:59", heat: 5},

{x: "szerda", y: "17:00:00-17:59:59", heat: 9},

{x: "szerda", y: "18:00:00-18:59:59", heat: 5},

{x: "szerda", y: "19:00:00-19:59:59", heat: 7},

{x: "szerda", y: "20:00:00-20:59:59", heat: 7},

{x: "csütörtök", y: "16:00:00-16:59:59", heat: 4},

{x: "csütörtök", y: "17:00:00-17:59:59", heat: 6},

{x: "csütörtök", y: "18:00:00-18:59:59", heat: 11},

{x: "csütörtök", y: "19:00:00-19:59:59", heat: 7},

{x: "csütörtök", y: "20:00:00-20:59:59", heat: 5},

{x: "péntek", y: "16:00:00-16:59:59", heat: 4},

{x: "péntek", y: "17:00:00-17:59:59", heat: 8},

{x: "péntek", y: "18:00:00-18:59:59", heat: 4},

{x: "péntek", y: "19:00:00-19:59:59", heat: 7},

{x: "péntek", y: "20:00:00-20:59:59", heat: 4}

A weboldal sablonja

HTML és JavaScript nyelvű forráskód vegyesen. A Java program a fájl 31. sorában lévő ##HEATMAP_DATA## szöveget cseréli le a táblázatos hőtérkép megjelenítéséhez szükséges véletlenszerűen előállított adatokra.

<html>

<head>

<title>Heatmap in JavaScript</title>

html, body, #container {

width: 80%; height: 80%; margin: 20pt; padding: 20pt;

}

</style>

</head>

<body>

anychart.onDocumentReady(function () {

let chart=anychart.heatMap(getData());

chart.title("Hogyan alakul a konditerem látogatottsága?");

chart.tooltip().useHtml(true).titleFormat(function () {

return "Látogatottság: "+this.heat;

}).format(function () {

return (

'<span style="color: #CECECE">Nap: </span>'+this.x+"<br/>"+

'<span style="color: #CECECE">Időtartam: </span>'+this.y

);

});

chart.container("container");

chart.draw();

});

function getData() {

return [

##HEATMAP_DATA##

];

}

</script>

</body>

</html>

További részletekért, beállításra vonatkozó, testre szabási lehetőségekért érdemes tanulmányozni az AnyChart dokumentáció Heat Map Chart fejezetét.

Az eredmény

Az előállított weboldalt böngészőben megjelenítve ezt kaphatjuk eredményként (vagy a véletlenszerűen generált adatoktól függően hasonlót):

A táblázatos hőtérkép hasznos eszköz. Elemezve könnyen döntéseket hozhatunk a koncepcionális tervezés során vázoltak alapján.

Továbbfejlesztési lehetőségek

Lehetne több konditerem is. Ekkor rögtön felmerül az összehasonlítás lehetősége, egyben igénye is.
Lehetne hétköznaponként eltérő a konditerem nyitva tartása.
Az időpontok kezelési precíz. Egy másodpercen múlik, hogy nem fedik át egymást. Az időpontok megjelenítése lehetne óó:pp alapú is.
Az időintervallumok jelenleg állandóak, mindig 1 órásak. Könnyen megoldható lenne, hogy dinamikusak legyenek: például a népszerűbb időszakok felbonthatók lennének két 30 perces blokkra. A népszerűség értelmezhető minden nap (héten) másképp. Egyszerű képlettel: átlag felett, medián felett.
Általánosíthatnánk a létesítménygazdálkodáshoz kötődő erőforrást nem (feltétlenül) helyhez kötött, mozgatható, kölcsönözhető eszközökre is: hangszer, projektor, stúdió felszerelés.
Másképpen valósulna meg az adatgyűjtés, ha egyetlen QR kód állna rendelkezésre és back-end helyett a „mobil alkalmazás emlékezne” a belépésre és távozásra. Ez jelentheti legalább az aznapi adatokat, de tárolható historikusan is.
Hibát is kellene, lehetne kezelni. Például a kiléptetés lehetne automatikus a nyitva tartás végén. A jelenlét igazából igaz-hamis állapot: ha eddig hamis volt és történt valami, akkor igaz lesz és fordítva. Ha van mögötte állapotmegőrző emlékezet (mivel programozunk, így nyilvánvalóan azonnal objektumra gondolunk, vagy annak valamilyen fájlba vagy adatbázisba történő leképezésére).
A nyilvántartás könnyen megvalósítható személy hozzárendelésével, azaz lehetne nem anonim is a jelenlét.
Egymást átfedő időpontok esetén (ha nincsenek a hosszukra vonatkozó korlátozó feltételek) általánosítva 6 eset fordulhat elő. Például ha a jelenlét lehetne 60 percnél hosszabb, de 120 percnél rövidebb is, akkor nem lenne elegendő a fenti 3 esetet kezelni a jelenlét összesítése során.
Valósítsuk meg az időintervallumok átfedésénél bemutatott második – időarányos – módszert!
A napi jelenlét 20 fővel valósul meg a programban. Lehetne ez a paraméter is véletlenszerű, például 15-30 fő között, vagy esetleg népszerűbb a péntek.
Jelenleg a táblázatos hőtérkép statikus. Csak a (befejezett egész heti) múltbeli adatokat tudja megjeleníteni. Az aktuális, jelenlegi állapothoz szinkronizáció, ütemezés kell. Óránként (a blokkok végén automatizáltan), de akár 5 percenként is aktualizálható a hőtérkép.
A táblázatos hőtérkép megjelenítése önálló weboldal helyett beágyazható widget felületén is történhet.
Többféleképpen is készítettünk már grafikonokat, íme néhány a szakmai blogunkból: Kockadobás kliens-szerver alkalmazás, Sankey-diagram készítése, JFreeChart grafikon készítése.

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

A projektfeladat – attól függően, milyen szinten valósítjuk meg – kapcsolódhat több tanfolyamunk tematikájához. A fenti forráskód a Java SE szoftverfejlesztő tanfolyam 17-28. óra: Objektumorientált programozás és a 37-44. óra Fájlkezelés alkalmaihoz kötődik. Ha többrétegű, elosztott alkalmazásként valósítjuk meg, akkor a Java EE szoftverfejlesztő tanfolyam a 9-16. óra: XML és JSON feldolgozás, dinamikusan generált weboldalba beépítve a 33-40. óra: Java Server Pages alkalmaihoz kapcsolódik. Ha fájlok helyett egyszerű adatbázist használnánk, akkor a Java SE szoftverfejlesztő tanfolyam 45-52. óra: Adatbázis-kezelés JDBC alapon, ha objektumrelációs leképezéssel oldanánk meg, akkor a Java EE szoftverfejlesztő tanfolyam 25-32. óra: Adatbázis-kezelés JPA alapon alkalmakhoz kötődhet.

Galéria véletlen sorrendben

2023. november 2.2023. augusztus 11. Szerző: Kiss Balázs

Adott egy mappában lévő sok-sok képfájl, többféle formátumban, kiterjesztéssel. A feladat az, hogy időzítve jelenítsük meg ezeket a képeket véletlen sorrendben saját fejlesztésű Java program segítségével. A tervezés során áttekintünk többféle lehetőséget. Bemutatjuk a megoldáshoz szükséges lépéseket és a program működését.

A program tervezése

A szükséges bemeneti adatok

Egy mappa, abszolút vagy relatív útvonal, ahol a képfájlok megtalálhatók. A mappa átvehető a program paramétereként (ha parancssorban meghívva átadjuk) vagy lehet az aktuális mappa (ahonnan a programot jar fájlként elindítjuk). A program a mappában közvetlenül megtalálható képeket olvassa be. Az ott található almappákba nem megy bele.
A képfájlok különböző kiterjesztéseit tárolni kell. Többféle is lehet, így ehhez szükséges alkalmas adatszerkezet. A listában nem szereplő kiterjesztéssel rendelkező fájlok nem kerülnek feldolgozásra.
Érdemes a képfájlokat egy lépésben betölteni a memóriába. Így a program takarékos erőforrásként bánik a tárhellyel (merevlemez, pen-drive, SSD, hálózati meghajtó). Csak egyszer dolgozza fel (olvassa végig) a mappát. Feltételezzük, hogy a képfájlok beférnek a memóriába.
A program teljes képernyős, amiből elérhető a rendelkezésre álló terület mérete, ahol megjeleníthetők a képek. A program a betöltött képfájlok méreteihez is hozzáfér. Ez a méret kétféle lehet: bájtban kifejezhető a képfájl elfoglalt tárhelye, illetve pixelben kifejezhető a képfájl dimenziója (másképpen a megjelentéséhez szükséges terület mérete a képernyőn).

Hogyan működik a program?

Egyszerre egy kép jelenik meg. Időzítő befolyásolja a képfájlok közötti váltást. Meghatározza, hogy a képfájlok meddig látszanak (másképpen: eltelt idő, késleltetés, várakoztatás). A swing GUI-hoz tartozó időzítőt kell hozzá használni.
A program alkalmazkodik a képernyő, kijelző felbontásához, képarányához. A program végtelenítve működik, Alt + F4 billentyűkombinációval lehet kilépni belőle.
A képfájlok megjelenítésük során optimálisan, dinamikusan kitöltik a rendelkezésre álló téglalap alakú területet. A túl kicsi képeket nagyítani kell. A túl nagy képeket kicsinyíteni kell. Mindezt úgy, hogy a képarányt (aspect ratio) meg kell tartani, hogy a képek ne torzuljanak el. Az alábbi három példa balról-jobbra mutatja az optimális kitöltést, illetve azt a két esetet, ami akkor történik, amikor a kép méretéhez képest a megjelenítésre használható terület túl magas vagy túl széles:
A galériába tartozó képek közötti véletlen sorrendet meg kell oldani. A program a memóriába betöltött képek sorszámai alapján valósítja meg a véletlenszerű kiválasztást. A sorszámok összekeverednek. Egymás után nem jöhet ugyanaz a kép többször. Ha a képek „elfogynak”, akkor a program végtelenített működése szerint a képek sorszámai újra összekeverednek és „lejátszásra kerülnek”.

A program megvalósítása

A mappát a java.io csomag File osztályából létrehozott folder objektum tárolja (a "./" szövegliterál jelöli az aktuális mappát). A feldolgozandó képfájlok kiterjesztéseinek listáját egy dinamikus tömbből létrehozott generikus lista oldja meg: ArrayList<String> imageFileExtensionList=new ArrayList<>(Arrays.asList("JPG", "JPEG", "PNG", "GIF")). Egy képfájl memóriabeli tárolását a java.awt.image.BufferedImage típus valósítja meg, amelyekből szintén generikus lista épül: ArrayList<BufferedImage> imageList. A grafikus felhasználói felülethez tartozó javax.swing csomagbeli Timer osztály szükséges, például 2 mp-es várakoztatás és eseménykezelés: timer=new Timer(2000, (ActionEvent) -> { showRandomImage(); }). A GUI JFrame leszármazott keretobjektum. A grafikus felhasználói felület a teljes képernyőt elfoglalja: setExtendedState(MAXIMIZED_BOTH) és setUndecorated(true). A keretre egyetlen JLabel típusú, fekete hátterű lbImage objektum kerül, az alapértelmezett határmenti elrendezésmenedzser közepére (vízszintesen és függőlegesen egyaránt). A képfájlok sorszámai (a későbbi véletlen kiválasztáshoz) az imageIndexList generikus listába/kollekcióba kerülnek. Az index változó jelöli az aktuális, memóriába betöltött képfájl sorszámát, ami kezdetben nulláról indul.

A képfájlok betöltése az alábbiak szerinti:

private void createImageList() {

File[] imageArray=folder.listFiles((File path) -> {

String extension=path.getName().toUpperCase().

substring(path.getName().lastIndexOf(".")+1);

return imageFileExtensionList.contains(extension);

});

try {

for(int i=0; i<imageArray.length; i++) {

imageList.add(ImageIO.read(imageArray[i]));

imageIndexList.add(i);

}

Collections.shuffle(imageIndexList);

}

catch(IOException e) {

}

A fájlok kiterjesztésének szűrése a FileFilter interfész accept() metódusának megvalósításával történik. A fenti forráskódban mindez tömör, lambda kifejezéssel (művelettel) valósul meg. A fájlszűrőn az képfájl megy át, aminek a nagybetűssé alakított kiterjesztését tartalmazza az imageFileExtensionList kollekció. Az i-edik képfájl memóriába való betöltését az ImageIO osztály statikus read() függvénye oldja meg. A képfájlok sorszámainak véletlen összekeverése kezdetben megtörténik: Collections.shuffle(imageIndexList). A fájlkezelés miatt kötelező kivételkezelést most – itt a szakmai blogban – nem részletezzük.

Az időzítő eseménykezelése, a 2 másodpercenkénti képváltás így valósul meg:

private void showRandomImage() {

BufferedImage img=imageList.get(imageIndexList.get(index));

Dimension d=getScaledDimension(new Dimension(

img.getWidth(), img.getHeight()), lbImage.getSize());

ImageIcon imageIcon=new ImageIcon(img.getScaledInstance(

(int)d.getWidth(), (int)d.getHeight(), Image.SCALE_SMOOTH));

lbImage.setIcon(imageIcon);

index++;

if(index==imageIndexList.size()) {

Collections.shuffle(imageIndexList);

index=0;

}

A program alábbi metódusa felel a képarányhoz kötődő műveletekért:

private Dimension getScaledDimension(

Dimension imageSize, Dimension area) {

double widthRatio=area.getWidth()/imageSize.getWidth();

double heightRatio=area.getHeight()/imageSize.getHeight();

double ratio=Math.min(widthRatio, heightRatio);

return new Dimension((int)(imageSize.width*ratio),

(int)(imageSize.height*ratio));

}

A program tesztelése

Érdemes lehet tesztelni nem ajánlott (rossz) megoldásként azt, hogy a program az időzítőnek megfelelően, dinamikusan olvasná be a képfájlokat, amivel lényegesen kevesebb memóriát igényelne.
Van-e reális korlát arra, hogy mennyi, mekkora képek „férnek el” a memóriában?
Hogyan befolyásolja a képfájlok száma és az általuk elfoglalt tárhely a program indulását?
Mi történik, ha nincs megfelelő kiterjesztésű képfájl a mappában? És ha több 1000 kép van benne?
Hogyan jelennek meg (megjelennek-e) az animációt tartalmazó képfájlok? Például a GIF képformátum nem csak statikus egyetlen képet tartalmazhat, hanem lehet animált is.
Teljesen megvalósul-e a reszponzivitás? Ha igen, mi indokolja? Ha nem, miért nem és hogyan lehetne megoldani?

Ha átmenetileg kikapcsoljuk a teljes képernyős megjelenítést, akkor könnyen tesztelhetővé válik a megvalósuló reszponzivitás. Másképpen a program dinamikusan alkalmazkodik a rendelkezésre álló (rajzolható) terület méreteihez (szélesség és magasság):

A program továbbfejlesztési lehetőségei

A program rekurzívan bejárhatná a folder által megjegyzett útvonalból kiindulva a teljes (al)mappaszerkezetet.
A program paraméterezhető lehetne a képfájlok kiterjesztéseivel. Akár konfigurációs fájlból is beolvashatná az imageFileExtensionList adatszerkezetet, például XML, JSON formátumban is.
A program ellenőrizhetné, hogy a mappában lévő összes kép befér-e a memóriába. A program kezelhetne ehhez kötődően többféle limitet: például az első 100 db képet töltené be, és/vagy csak annyi képet tölt be, ami belefér például 64 MB-ba.
A program mutathatná folyamatindikátorral induláskor a képfájlok betöltését. Vagy betölthetné például az első 5 db-ot és háttérszálon a többit, amíg az első 5-öt „lejátssza”.
Ha például a program 10 képet tölt be mappában lévő képfájlokból, akkor ezek 0-tól 9-ig sorszámozódnak. A sorszámok összekeverve következnek. Ha az első menetben az utolsó kép sorszáma például a 7 volt, akkor a következő ismétlődő menet nem kezdődhetne 7-tel.
A programból ki lehetne lépni az Esc billentyűvel is. KeyListener interfésszel megoldható.
A program kezelhetne egyéb képfájlformátumokat is: például animált GIF, statikus WebP, animált WebP.
A program könnyen kiegészíthető prezentációk diáinak időzített/felülbírált megjelenítésére.
A program által beolvasott képfájlokból generálható PDF fájl is (rácsos sablonnal, például 6 db kép laponként). A feldolgoztt mappában lévő képfájlok könnyen feltölthetők FTP szerver adott mappájába, átméretezhetőek csoportosan, elküldhetők nyomtatási sorba is.
Érdemes megismerni a JDK-n kívüli egyéb, képfájlokat kezelő osztályok, csomagok funkcióit, például: OpenIMAJ, TwelveMonkeys ImageIO.
A swing-es felület kiegészíthető mappatallózással, egyéni fájl(típus)szűrőkkel, paraméterezhető lehet a véletlenszerű kiválasztás algoritmusa, változtatható az időzítés késleltetése.
Mivel a program teljes képernyős, így elrejthető az egérmutató.
A képek „lejátszásából” lehetne generálni animált GIF-et.

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 Java SE szoftverfejlesztő tanfolyamunkon, a szakmai modul Objektumorientált programozás témakörét követő 29-36. óra Grafikus felhasználói felület alkalmain már tudunk egyszerűbb animációs, szimulációs programot tervezni, kódolni, tesztelni.

Sankey-diagram készítése

2023. augusztus 4.2023. április 17. Szerző: Kaczur Sándor

A Sankey-diagram alkalmas kétféle adatsor közötti N:M fokszámú kapcsolat, összefüggés és a köztes átmenet ábrázolására. Hangsúlyozza a fő átvitelt vagy áramlatokat egy rendszeren belül. Az áramlás irányát nyíllal szemlélteti és az áramlatok szélessége arányos az áramlási mennyiségekkel.

Feladat

Jelenítsük meg HTML formátumú weboldalként a magyarországi régiókban a foglalkoztatottak számát nemzetgazdasági szektorok szerint a KSH 2018-as adatsora alapján! Automatizáljuk egy Java programmal úgy a feladatot, hogy az év paraméterként megadható legyen!

Tervezés

A KSH témastruktúrában a táblázat elérési útja:

5. Területi adatok,
5.1. A munkaerő-piaci tendenciák Magyarország régióiban,
5.1.3. A foglalkoztatottak száma nemzetgazdasági szektorok szerint, nemenként (2008–)

Online böngészhető táblázat:
https://www.ksh.hu/docs/hun/xstadat/xstadat_hosszu/h_qlf017.html

Letölthető táblázat (XLS formátumban):
https://www.ksh.hu/docs/hun/xstadat/xstadat_hosszu/xls/h5_1_3.xls

A táblázatban lévő adatforrás szükséges része látható az ábrán:

A táblázatban a régiók az A105:A112 cellatartományban találhatók. A hozzájuk tartozó 3 nemzetgazdasági szektor a B-C-D oszlopok azonos soraiból olvashatók ki. POJO-k létrehozása mindenképpen hasznos a megvalósításhoz, például new SankeyData("Közép-Dunántúl", "Szolgáltatás", 253.89). Ezekből generikus listát is célszerű építeni: List<SankeyData> sankeyDataList.

Többféleképpen is hozzájuthatunk az adatokhoz attól függően, hogy milyen előismeretekkel rendelkezünk a különböző tanfolyamainkon:

A Java SE szoftverfejlesztő tanfolyamon „kézzel” letölthetjük a projekt files mappájába az XLS fájlt. Ezután akár manuálisan is összeállítható a POJO lista, vagy a JExcel API-val is hatékonyan feldolgozható a XLS fájl aktuális munkalapja. Fájlkezelés előtt az összeállított HTML fájlt kiírathatjuk a konzolra, ahonnan „kézzel” vágólapozva létrehozhatjuk belőle a szükséges HTML fájlt. Fájlkezeléssel persze adott mappába, adott fájlnévvel, kivételkezeléssel a java.io vagy java.nio csomagot használva a HTML fájl generálása is automatizálható.
A Java EE szoftverfejlesztő tanfolyamon megvalósítható, hogy a program kivételkezeléssel hálózati kapcsolatot épít, majd letölti az XLS fájlt és ezzel a feladat visszavezethető az előző esetekre. Azt is megtehetjük, hogy az XLS fájlt nem töltjük le, hanem olvasunk belőle közvetlenül a webről. Ekkor is rendelkezésünkre áll a POJO lista. Itt már tudunk HTML fájlt is automatikusan generálni.

Tanulmányoznunk kell a Google Charts galériában a Sankey diagram dokumentációját! Meg kell ismernünk a paraméterezési lehetőségeit és JavaScript forráskódját!

Megvalósítás

private String createSankeyDiagram(List<SankeyData> sankeyDataList) {

String sankeyData=

sankeyDataList.stream().map(SankeyData::toString).

collect(Collectors.joining(",\n ", " ", "\n"));

String html=

"<html>\n" +

" <head>\n" +

" <script type=\"text/javascript\" " +

" src=\"https://www.gstatic.com/charts/loader.js\"></script>\n" +

" <script type=\"text/javascript\">\n" +

" google.charts.load('current', {'packages':['sankey']});\n" +

" google.charts.setOnLoadCallback(drawChart);\n" +

"\n" +

" function drawChart() {\n" +

" var data = new google.visualization.DataTable();\n" +

" data.addColumn('string', 'Régió');\n" +

" data.addColumn('string', 'Nemzetgazdasági szektor');\n" +

" data.addColumn('number', 'Foglalkoztatottak száma (ezer fő)');\n" +

" data.addRows([\n" +

"#SankeyData#" +

" ]);\n" +

"\n" +

" var options = {\n" +

" width: 500,\n" +

" };\n" +

"\n" +

" var chart=new google.visualization.Sankey("+

" document.getElementById('sankey_basic'));\n" +

" chart.draw(data, options);\n" +

" }\n" +

" </script>\n" +

" </head>\n" +

" <body>\n" +

" <div id=\"sankey_basic\" style=\"width: 500px; height: 300px;\"></div>\n" +

" </body>\n" +

"</html>";

return html.replace("#SankeyData#", sankeyData);

}

A createSankeyDiagram() függvény létrehozza a HTML fájl szöveges tartalmát. Átveszi adatforrásként a sankeyDataList generikus POJO listát. A String típusú sankeyData objektum tartalmazza a Stream API-val hatékonyan összefűzött – POJO-któl elkért – toString() szövegeket. Ezek a diagramhoz szükséges adatok ( addRows …). Például: "['Közép-Dunántúl', 'Szolgáltatás', 253.89]". A String típusú html objektum kezdetben tartalmazza a diagramhoz nem szükséges fix részeket, a diagram alapbeállításait, valamint a diagram fejlécéhez szükséges metaadatokat ( addColumn… Régió, Nemzetgazdasági szektor, Foglalkoztatottak száma (ezer fő)). A függvény végül a html objektum #SankeyData# részét cseréli a sankeyData-val és az adatfüggő résszel frissített HTML tartalommal tér vissza.

Eredmény

Az egyik eredmény a generált HTML fájl (benne a grafikonhoz tartozó JavaScript) forráskódját tartalmazza:

<html>

<head>

src="https://www.gstatic.com/charts/loader.js"></script>

google.charts.load('current', {'packages':['sankey']});

google.charts.setOnLoadCallback(drawChart);

function drawChart() {

var data=new google.visualization.DataTable();

data.addColumn('string', 'Régió');

data.addColumn('string', 'Nemzetgazdasági szektor');

data.addColumn('number', 'Foglalkoztatottak száma (ezer fő)');

data.addRows([

['Budapest', 'Mezőgazdaság', 1.251],

['Budapest', 'Ipar', 148.004],

['Budapest', 'Szolgáltatás', 684.56],

['Pest', 'Mezőgazdaság', 11.845],

['Pest', 'Ipar', 182.934],

['Pest', 'Szolgáltatás', 400.425],

['Közép-Dunántúl', 'Mezőgazdaság', 22.684],

['Közép-Dunántúl', 'Ipar', 222.544],

['Közép-Dunántúl', 'Szolgáltatás', 253.89],

['Nyugat-Dunántúl', 'Mezőgazdaság', 25.64],

['Nyugat-Dunántúl', 'Ipar', 202.794],

['Nyugat-Dunántúl', 'Szolgáltatás', 253.44],

['Dél-Dunántúl', 'Mezőgazdaság', 26.865],

['Dél-Dunántúl', 'Ipar', 122.281],

['Dél-Dunántúl', 'Szolgáltatás', 224.863],

['Észak-Magyarország', 'Mezőgazdaság', 21.866],

['Észak-Magyarország', 'Ipar', 186.662],

['Észak-Magyarország', 'Szolgáltatás', 276.754],

['Észak-Alföld', 'Mezőgazdaság', 48.301],

['Észak-Alföld', 'Ipar', 206.593],

['Észak-Alföld', 'Szolgáltatás', 384.82],

['Dél-Alföld', 'Mezőgazdaság', 56.402],

['Dél-Alföld', 'Ipar', 174.068],

['Dél-Alföld', 'Szolgáltatás', 329.982]

]);

var options={

width: 500,

};

var chart=new google.visualization.Sankey(

document.getElementById('sankey_basic'));

chart.draw(data, options);

}

</script>

</head>

<body>

</body>

</html>

A másik eredmény a Sankey-diagram képernyőképe, amelyről kiválóan leolvashatók az értékek:

A böngészőben megjelenő HTML oldalon a Sankey-diagram dinamikusan – az egérkurzor pozíciójától függően – képes az aktuális adatok megjelenítésére, mintegy lebegő jelmagyarázatként.

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

Tankocka – Csoportba rendezés: adatbázis-kezelés, fájlkezelés, hálózatkezelés

2023. július 15.2022. december 1. Szerző: Kiss Balázs

Folytatjuk Tankockák blog bejegyzés sorozatunkat. A csoportba rendezés feladatban 24 db rövidítést, fogalmat kell a megfelelő csoportba húzni. A 3 csoportot az adatbázis-kezelés, a fájlkezelés és a hálózatkezelés adja.

A fájlkezelés témakör és az adatbázis-kezelés témakör JDBC része a Java SE szoftverfejlesztő tanfolyamunkhoz, az adatbázis-kezelés témakör ORM (objektumrelációs modellezés) része a Java adatbázis-kezelő tanfolyamunkhoz, a hálózatkezelés a Java EE szoftverfejlesztő tanfolyamunkhoz kötődik. Érdemes ismerni ezeket a rövidítéseket, mozaikszavakat, betűszavakat, mert hatékonyan segítik a csoportmunka során szükséges kommunikációt. Többször előfordulhat a feladat megoldása során, hogy nem tűnik egyértelműnek egy-egy kulcsszó, osztály, fogalom, rövidítés. Kizárásos alapon gondolkodva mégis mindig egyértelmű(vé válik) a csoportosítás.