Hozzon létre egy SVG adatmegjelenítést a PHP segítségével

A jó programozó lusta programozó. Az adatmegjelenítések növekvő világában az egyes tervek kézműves készítése nem méretezhető. Meg akartam nézni, hogy van-e mód arra, hogy a vizualizáció aspektusait egy program segítségével elkészítsük, hogy a kimenetet könnyen létrehozzuk és újrafelhasználhatóvá tegyük. Hasonlóan a lazán csatlakozott programok UNIX-filozófiájához, sikerült-e felépíteni egy kis eszköztárat lazán összekapcsolt szkriptekből, amelyek létrehozzák a vizualizációk építőköveit?

Úgy tűnik, erre nincs elfogadott kifejezés. Hallottam a „determinisztikus tervezés”, „programozási tervezés” és „számítási tervezés” kifejezéseket. Amire mindannyian törekszenek, az az a képesség, hogy következetesen létrehozzanak valamilyen grafikus elemet az adatbevitel alapján.

Ezt folyamatosan látjuk a való világban. A régi higanyhőmérők vették az adatokat a környezettől, a hőmérséklettől, és ezt vizualizációvá alakították át a higany felfelé mozgatásával. Mi a digitális megfelelője?

Van néhány jelölt technológia. Ha online dolgozik, akkor vászon jut eszembe. Ez lehetővé teszi a raszteres grafika gyors és egyszerű rajzolását. Ha akarja, rengeteg képkód-könyvtár is rendelkezésre áll, amelyek GIF-eket, JPEG-eket és PNG-ket generálhatnak kérésre. De mi van akkor, ha a célpont nem mindig online? Mi van, ha nyomtatásra törekszik? Akkor használhat raszteres grafikát, de annak elég nagynak kell lennie. Jobb megoldás, ha vektor alapú képformátumot hoz létre a kódjából. Itt lép be az SVG (Scalable Vector Graphics).

Mi az SVG?

Az SVG az a kevés technológia, ami csak lehetséges! Több mint 10 éves, és a specifikációt még javítják. Az SVG-t egy XML webet szem előtt tartva tervezték és újratervezték. Az SVG Tiny-t úgy tervezték, hogy viharral fogja el a mobil világot, de soha nem tette meg. Az interneten nagyítható grafikák lennének, amelyek méretezhetők lennének az Ön rugalmas webtervével, de kevés böngésző támogatja natívan az SVG-t. Körülnézve azt gondolhatja, hogy az SVG kudarcot vallott, és leírást jelent. A web elvesztése programozó nyeresége!

Az SVG egy XML-alapú nyelv, amelyet a vektorgrafikák leírására használnak. Van néhány primitív, amelyet ismernie kell, például vonal, kör, téglalap és út. Ezekből sokkal összetettebb képeket lehet felépíteni. Mivel az XML csak szöveg, SVG fájlokat írhat bármilyen szövegszerkesztőbe. Még az egyszerű programozó szkriptek is gyorsan képesek kiadni az SVG-t. Mivel a formátum szöveg, a kód elkészülte után is be lehet lépni és módosítani ... Ha nem tetszik a szín, nyissa meg a Jegyzettömböt, és keresse meg és cserélje ki.

Az SVG egy nagyon egyszerűen megtanulható dolog. Sok éven át soha nem foglalkoztam grafikus programozással, mert tudnia kellett a képformátumokról, és olyan volt, mint egy idegen nyelv, de az SVG-vel ez csak szöveg. Az internet nyert, mert meg tudta nézni a forrást; Az SVG remek képformátum, mert te is ezt teheted!



Kód használata az SVG felépítéséhez

Az SVG kódból történő felépítésének megvannak az előnyei. Matematikailag minden alkalommal pontos eredményeket hozhat létre. Az algoritmusok segítségével az objektumok gyorsan, pontos időközönként elférnek. Láttam, hogy a tervezők megpróbálták objektumokat vonalakhoz rögzíteni, vagy a szabályokat a távolságok mérésére használják, csak a nagyításhoz, ellenőrzéshez, a kicsinyítéshez és a milliméter alatti tűréseimhez képest. Kódban mindez figyelmen kívül hagyható. A hihetetlenül összetett görbék néhány vonallal megmagyarázhatók az utakban, és ami a legjobb, hogy újra és újra reprodukálható. 10 000 véletlenszerű pont generálása egy szkriptben egy ciklusra vonatkozik. Kézzel ez sok másolást és beillesztést igényel, és akkor nem lenne igazán véletlenszerű. A kód ereje a tervezők gyors előállításához, amelyek túl szigorúak vagy túl unalmasak a tervezők számára, az az édes pont.

Nem azt javaslom, hogy a grafikusok tervét elvegyék a szakemberektől, hanem hagyom, hogy a kód azt csinálja, ami a legjobban sikerül. A jó programozó lusta programozó. A jó tervezőnek lustának kell lennie. Nincs szükség 10 000 véletlenszerű pont létrehozására kézzel. Az idejét sokkal jobb módon lehetne felhasználni.

Az SVG kódos felépítése a leggyorsabb módja annak, hogy olyan bázist szerezzen, amelyet könnyen be lehet hozni egy bonyolultabb vektor szoftverbe, például az Adobe Illustratorba vagy az Inkscape-be. Innentől a kialakítás tovább alakítható, hogy megfeleljen az egyes egyedi projektek igényeinek.

Példák

Ha példát veszünk, akkor a dolgok sokkal egyértelműbbek lesznek. Remek terveket látok mindenfelé, és kíváncsi vagyok, hogyan csinálták és hogyan, vagy ha meg lehetne csinálni kódban. Az egyik kedvencem az ez a plakát a WIRED magazin 15. évfordulójára . Önmagában szép dolog nézni, de amíg meg nem érted, nem kapod meg a finom utalást. A színes kerekek az egyes kiadványok borítóinak fő színeit képviselik. Idővel láthatja, hogyan élték át a sötét és az élénk színű periódusokat. Gondoltam magamban, hogyan folytathatnám ilyesmit, és írtam egy egyszerű PHP szkriptet, amely egy .net magazin borítóját veszi fel, és hasonló hatást vált ki.

Az évforduló megünneplésére 2008-ban a WIRED Magazine megbízta Fernanda Vigast és Martin Wattenberget a történelem és a kultúra vizualizációjának elkészítésével.

Az évforduló megünneplésére 2008-ban a WIRED Magazine megbízta Fernanda Vigast és Martin Wattenberget a történelem és a kultúra vizualizációjának elkészítésével.

A .net készítése a vizualizációkat takarja

Azok számára, akik nem ismerik a PHP-t, az SVG-t vagy annak megtekintését, nagyon egyszerű. Végigvezetem a kódon, és megmutatom, hogyan lehet megtekinteni az SVG-t a böngészőben és a szövegszerkesztőben. Ha a saját kedvenc nyelvét szeretné használni, akkor nem lehet nehéz követni.

Az első dolog, amit meg kell tennünk, az az elemezni kívánt JPG kép betöltése. A PHP-ben használhatja a imagegreatefromjpeg () funkció, ha a megfelelő könyvtárak telepítve vannak. Ez egy képfogantyút ad vissza, így további kérdéseket tehetünk fel a grafikával kapcsolatban.

A következő dolog, amit meg fogunk tenni, hogy a kép segítségével megkapjuk a kép magasságát és szélességét imagesx () és imagest () funkciókat.

Célunk, hogy megkeressük a kép minden pixel színét és megszámoljuk az egyes frekvenciákat. Szükségünk lesz tehát valamiféle tömbre. Ebben az esetben létrehoztam egy tömböt $ rgb = tömb () , amelyet minden színhez új kulcsot készíthetek, és számlálóként növelhetem az értéket.

Mivel megvan a kép magassága és szélessége, két beágyazott hurkot készíthetünk. Most oszloponként haladhatunk az x és y képpontokról, a imagecolorat () funkció. A vonal $ rgb [imagecolorat ($ im, $ i, $ j)] ++; hozzáfér az rgb tömbhöz, a pixelértékkel megegyező kulcsnál, és hozzáad egyet ehhez az értékhez. Amikor a hurok kettője elkészült, megnézzük az egyes pixeleket, így egy szép, kompakt tömböt készítünk az ismert színekből és azok frekvenciájából.

Végül rendezni fogjuk ezt a tömböt Egy fajta() tehát a legnépszerűbb színek a végén, a legkisebb értékek pedig az elején vannak.

A PHP kódja a következőképpen néz ki:

Ezen a ponton a $ rgb tömbünk tele van; már nincs szükségünk a forrásképre, és az adatok alapján új megjelenítést fogunk létrehozni az SVG-ben.

Az SVG XML-alapú, ami azt jelenti, hogy csak szöveg. Így egyszerűen visszhangozhatjuk az SVG kódot, és megnézhetjük az eredményeket. Az első dolog, amit meg kell tennünk, tudassa a böngészővel, hogy ez SVG, nem pedig egyszerű szöveg. Ebben az esetben a fejléc() függvény a megfelelő tartalmatípussal ” image / svg + xml ”. Most a böngészők vagy más alkalmazások használhatják ezt a megfelelő megjelenítéshez. Lehet, hogy e nélkül is működik, de jobb, ha jó nettó állampolgár leszel, és ha tudod, ezt kimenekíted.

Ezt követően kinyomtatjuk az XML deklarációt és az SVG DOCTYPE fájlt.

Most már valóban elkezdhetünk eljutni a képünkre jellemző SVG részhez. Mint minden HTML-oldalnak van gyökere, az SVG-nek is gyökere van. Ehhez néhány paraméterre van szükség, például a végső kép magasságára és szélességére. Mivel nem mindig tudjuk, hogy mekkora lesz a forrásképünk, könnyebb ezt az értéket csak 100% -ban elkészíteni.

Koncentrikus gyűrűk egymásra helyezve a hatást

Koncentrikus gyűrűk egymásra helyezve a hatást

A tervezés kiadásának logikája meglehetősen egyszerű. A képen a legkevesebb színértéket vesszük, és egy kört készítünk, amely megegyezik a magasság és a szélesség szorzatával.

Nem tűnik intuitívnak, hogy a lehető legnagyobb kör a lehető legkisebb érték! A következő lépés segít tisztázni ezt.

Ez a nagy kör az alaprétegünk. Először ezt tesszük le, és további köröket rakunk rá, minden alkalommal kissé kisebbé válva. Végül a hatalmas kezdő körünkből csak egy apró szál látható a szélén.

Mindezek megvalósításához áttekintjük a $ rgb tömb kibontja a kulcsot, amely a szín és az érték, amely a frekvencia. Ezt megtehetjük foreach ($ rgb mint $ k => $ v) . A következő néhány sor az RGB-értéket $ r, $ g, $ b értékre osztja, és készen áll a hexadecimálissá konvertálásra. A PHP-ben van dechex () függvény, amely tizedes számot vesz fel, és létrehoz egy hexa megfelelőt. Azt is meg kell párnáznunk a húr elején nullákkal, ha a szín értéke kevesebb, mint 16. Ha ezeket összeadjuk, megkapjuk a $ hex érték.

Eddig a pontig még egyetlen SVG grafikus elemet sem adtunk ki. Ez lesz az első, egy kör. Az SVG-ben egy kör létrehozásához használja a elem néhány attribútummal. Ezek az attribútumok a kört és annak helyzetét egyaránt leírják. A cx és cy attribútumok a kör középpontja az x, y rácson. Az r attribútum a sugár, a kitöltés pedig egy hexa szín, amellyel meg akarja tölteni a kört. A grafikus elemek készítése nem lehet sokkal egyszerűbb.

Most meg kell vennünk a tanultakat, és alkalmaznunk kell a színsort. Két változó van, amelyet nyomon kell követnünk: a kör maximális és az előző kör nagysága. Továbbá, annak érdekében, hogy a dolgok ne kerüljenek kézből méret szerint, hozzátettem a $ méretező változó, hogy a méret ne robbanjon túl nagyra.

A változó $ c az a maximális méret, amelytől folyamatosan csökkentjük a sugarat. Mivel $ c a szélesség és a magasság szorosa, az eredeti grafika minden képpontja a kör sugarában jelenik meg. A következő változó $ prev az előző kör mérete, amelyet felhívtunk. Így lassan csökkenthetjük a sugár méretét a pixelek száma alapján, amelyekhez már köröket készítettünk.

$v){ if($v > 0) { $r = ($k >> 16) & 0xFF; $g = ($k >> 8) & 0xFF; $b = $k & 0xFF; $hex = str_pad(dechex($r),2,'0',STR_PAD_LEFT).str_pad(dechex($g),2,'0',STR_PAD_LEFT).str_pad(dechex($b),2,'0',STR_PAD_LEFT); echo ''; echo ' '; $prev += (int)($v/$scaler); }}echo '';?>

Közeli kép a gyűrűkből, hasonló színek kombinálása nélkül

Közeli kép a gyűrűkből, hasonló színek kombinálása nélkül

Ha megnézünk néhány példa kimenetet, akkor gyorsan látni fogjuk, hogy az egyes színek minden apró árnyalata megkapja a saját gyűrűjét. Ez azt jelenti, hogy az elhallgatott szöveg rengeteg szürke árnyalatot hoz létre, amelyeket egyetlen reprezentatív színre kell összeomlani. Ez csökkenti a gyűrűk számát, ugyanakkor világosabb, hogy mely színek tűnnek ki a legjobban. Egyszerűen felvehetnénk az első öt legnépszerűbb színt, de ami általában történik, az az, hogy hasonló árnyalatokat kap ugyanolyan színűből, mint hogy a teljes spektrumot képviselje. Jobb módszer a hasonló értékű színek kipróbálása a legnépszerűbb szomszédba. Ehhez meg kell írnunk egy egyszerű függvényt, amelyet beillesztünk az SVG kimenet elé.

$rgb = reduceColors($rgb);

A $ rgb színek listájába jutva megkapjuk értéküket és gyakoriságukat. Az ötlet az, hogy végigvigye ezt a teljes listát, és hozzon létre egy új listát a csökkentett színekkel. A plusz vagy mínusz 75 tartományt választottam. Ez azt jelenti, hogy 100 100 100 RGB-érték kerül a legnépszerűbb színre, amely 25,25,25 és 175,175,175 között van. Beállíthatja ezt az értéket megbocsátóbbá vagy szigorúbbá. Értékeitől függően többé-kevésbé csengenek.

Először meg kell fordítanunk a tömb rendezését, hogy a legnépszerűbb színek legyenek az elsők. Ez azt jelenti, hogy a legnépszerűbbek közé lépünk elő, nem pedig a legkevésbé. Ahogy végigpörgetjük a $ -t rgb tömb, szükségünk van egy alhurokra a $ temp sor. Ha ez egy új szín, amelyet még nem láttunk, akkor beletesszük az újba $ temp sor. Ellenkező esetben, amint végignézzük, hozzáadhatjuk az elsőhöz $ rgb a plusz / mínusz tartományunknak megfelelő értéket. A végén igénybe vesszük a tömböt, így a legkisebb az első, és visszaküldjük, hogy az SVG-t kiadhassuk.

function reduceColors($rgb){ $plusminus = 75; arsort($rgb); $temp = array(); // do colour merger foreach($list as $k=>$v){ if($v != 0){ $r = ($k >> 16) & 0xFF; $g = ($k >> 8) & 0xFF; $b = $k & 0xFF; $matched = false; foreach($temp as $m=>$n){ if($m != $k){ $rs = ($m >> 16) & 0xFF; $gs = ($m >> 8) & 0xFF; $bs = $m & 0xFF; if ( ($rs = ($r-$plusminus)) && ($gs = ($g-$plusminus)) && ($bs = ($b-$plusminus)) && $matched == false ) { $temp[$m] += $v; $matched = true; } } } if(!($matched)){ $temp[$k] = $v; } } } asort($temp); return $temp;}

A funkció használata helyett egy másik lehetőség a beépített funkció használata imagetruecolortopalette () , amely maximálisan több színt vehet fel a színpalettához. Ez rögzíti a gyűrűk lehetséges színeinek számát, és elvégzi a színcsökkentést az Ön számára. Lehet, hogy az eredmények nem szándékoltak, de könnyebb alternatíva.

.háló borítók és a színmennyiséget képviselő kódból előállított gyűrű

.háló borítók és a színmennyiséget képviselő kódból előállított gyűrű

Fejlesztések

Rengeteg módon lehet ezen javítani. Jobb színcsoportosító algoritmus, néhány optimalizált hurok lehet, hogy megfordítja, így a legnépszerűbb színek a külső gyűrűn vannak, a belső helyett. Ezt úgy tervezték, hogy csak gyorsan elinduljon a dinamikusan generált vizualizációk világában. Innentől kezdve meg kell venned a kreativitásodat, és meg kell nézned, mire alkalmazhatod.

Az SVG aligha az az ijesztő technológia, amire gondolhatott. Tekintettel arra, hogy egyszerűen egy szöveges, XML formátumról van szó, írhat szkripteket a kedvenc nyelvére a kimenet gyors és egyszerű előállításához. Ezeknek a szkripteknek a különböző adatokon történő futtatása eltérő kimenetet eredményezett, de az alapul szolgáló kód ugyanaz marad, így gyorsan és egyszerűen prototípusozhatja az új terveket. Az SVG és a kimenet szkriptelésének ismerete az eszközkészlet másik eszköze, amely sok szempontból hasznos a munkahelyen és a játékban.