Linux, a osobito KDE nudi skoro neograničene mogućnosti prilagođavanja sučelja. Vidjeli smo u prošlom postu kako se mijenja i ono naoko nepromjenjivo. Možemo mijenjati svašta – globalne teme, sheme boja, stil aplikacija, stil Plasme, dekoracije prozora, ikone, kursore, fontove, splash screen, boot lp display, efekte radne površine, zvukove… U postavkama nalazimo i dugme Get new preko kojega možemo sa interneta skinuti ono što je za Linux složila zajednica developera. Ima tamo svašta ali nađe se i vrhunskih dizajna. Ali to su tuđi radovi i dizajn, zašto ne bismo napravili nešto svoje? Recimo kursor. To ne bi trebalo biti komplicirano i mogli bi probati.
Kako napraviti svoj kursor koristeći samo aplikacije koje Linux nudi? Stvarno nije tako komplicirano. Izrada custom Xcursor teme uključuje:
- Crtanje ikona kursora – najbolje vektorski, a za to je Inkscape vrh
- Export ikona u PNG – iz Inkscapea, jednostavno ali iscrpljujuće
- Mapiranje symlinkova unutar mape
cursors/– to iz terminala, ali je jednostavno zato jer sam napravio skriptu koja napravi sve odjednom
Struktura foldera u ~/.icons/ ili ~/.local/share/icons/MojaTema/ trebala bi izgledati ovako:
MojaTema/
├── index.theme
└── cursors/
├── default
├── pointer
├── left_ptr_watch
└── … (svi ostali kursori i symlinkoviA index.theme datoteka otprilike ovako:
[Icon Theme]
Name=MojaTema
Comment=Kursor koji sam sam izradioName je naziv koji se vidi u podešavanjima sustava gdje biramo kursor. Bez tih preduvjeta neće biti vidljiv sustavu.
Crtanje ikona kursora
Ovo bi onima neupućenima moglo biti problem. Meni, eto, nije jer od 1995. godine koristim svakodnevno, između ostalih, Corel i Illustrator. Vektorsko crtanje je svugdje u suštini isto tako da mi je Inkscape brzo legao. Za kompletnu temu moramo nacrtati sve ikonice koje predstavljaju stanja kursora – svaka ima svoju SVG sličicu, uključujući i animacije – svaki frame posebno. Bilo bi dobro da je kursor pripremljen i u više veličina, za razne rezolucije. Ja ih radim u veličinama 24, 32, 48, 64 i 96 px. Ne moram – može biti samo default 32 px, ali ja želim da to radi kako treba i da profi izgleda. Srećom, ne treba crtati SVG za svaku veličinu kursora posebno, nego kod exporta napravimo PNG u drugoj veličini s drugim nazivom. Ali o tome kasnije, istaknimo ono vrlo bitno – sličice kursora moraju imati i točno određena imena da bi ih sustav prepoznao. Neki sustavi mogu biti stariji, neki koriste neke druge nazive, to se rješava dodjeljivanjem symlinkova na samom kraju procesa.
Standardna imena za ikone kursora:
- alias: Prečac, link / Stvaranje poveznice
- bottom_left_corner: Mijenjanje veličine (donji-lijevi kut)
- bottom_right_corner: Mijenjanje veličine (donji-desni kut)
- bottom_side: Mijenjanje veličine (donji rub)
- cell: Odabir ćelije u tablici / Plus za tablice
- col_resize: Vodoravno mijenjanje širine stupca
- color_picker: Kapaljka / Odabir boje s ekrana
- context_menu: Otvaranje skočnog/desnog izbornika
- copy: Kopiranje stavke (Drag & Drop)
- crosshair: Precizni nišan / Odabir točke
- default: Osnovna strelica / Zadana pokazivačka strelica
- fleur: Pomicanje u svim smjerovima (4-smjerna strelica)
- grab: Otvorena šaka / Spremno za hvatanje i povlačenje
- grabbing: Zatvorena šaka / Aktivno hvatanje i povlačenje
- help: Pomoć / Pokazivač s upitnikom
- kill: Prisilno gašenje procesa (Xkill)
- left_ptr_watch: Pozadinski rad / Strelica s malim satom
- left_side: Mijenjanje veličine (lijevi rub)
- nesw_resize: Dijagonalno mijenjanje veličine (SI-JZ)
- no_drop: Zabranjeno ispuštanje na ovoj lokaciji
- not_allowed: Zabranjena radnja / Nedopušteno
- nwse_resize: Dijagonalno mijenjanje veličine (SZ-JI)
- pencil: Olovka / Slobodno crtanje ili uređivanje
- pointer: Ruka s kažiprstom / Poveznica (klikabilni element)
- right_side: Mijenjanje veličine (desni rub)
- row_resize: Okomito mijenjanje visine retka
- text: Unos teksta / Okomita I-greda (I-beam)
- top_left_corner: Mijenjanje veličine (gornji-lijevi kut)
- top_right_corner: Mijenjanje veličine (gornji-desni kut)
- top_side: Mijenjanje veličine (gornji rub)
- vertical_text: Unos okomitog teksta / Vodoravna I-greda
- watch: Čekanje / Sustav je zauzet (puni sat ili krug)
- zoom_in: Povećalo / Povećanje prikaza
- zoom_out: Smanjivalo / Smanjenje prikaza
Ako neki kursor ne postoji, nismo ga nacrtali i definirali, zamijenit će ga kursor sistemske teme tako da praktički možete nacrtati samo svoju default strelicu. Kursori koje minimalno trebaju postojati da to liči na neku temu su: default, pointer, left_ptr_watch, watch, grab, grabbing, not_allowed, col_resize, row_resize, nesw_resize, nwse_resize i fleur.
Za vektorsko crtanje kursora sam dakle koristio Inkscape, radna površina je 32 x 32 px, a OS je Debian 13, KDE. Naravno, crtati se može bilo kojim grafičkim programom, bitno je da se može poslije kvalitetno exportirati u PNG, ali mi smo u Debianu, a Inkscape je za ovakvo crtanje više nego dobar.
Prilikom crtanja treba paziti da ikona ili njena sjena ne izlaze van granica stranice jer će sve što prelazi preko biti ravno odrezano. Bitno je za svaki kursor znati koordinate mjesta gdje kursor djeluje, odnosno Hotspot. Recimo, default strelici Hotspot je u vrhu strelice, crosshairu (nišanu) je u njegovom centru, a top_right_corner strelici u njenom gornjem desnom vrhu. To je bitno kasnije za generiranje samog kursora iz PNG-a.
Ovoj mojoj temi sam napravio sve 34 ikone kao što se vidi u naslovnoj fotki. Broj se može smanjiti ako koristite dvosmjerne strelice. Dvije strelice top_side i bottom_side može zamijeniti jedna row_resize koja pokazuje dva smjera, prema gore i dolje. Isto tako za lijevo i desno i za kutne strelice. Nije baš potrebna ni olovka, kapaljka, kill ni Excell cross, ali ova moja kursor tema ipak ide u svijet, pa nećemo škrtariti.
Export u PNG
Statični kursor
Kad imamo gotove SVG ikone kursora, trebamo ih exportirati kao PNG svaku sličicu posebno i svaku veličinu (ako želimo) posebno. Ja radim u više veličina i ova default strelica će imati 5 PNG-ova, za svaku veličinu po jedan.
Svaki kursor mora imati i svoju config datoteku koja obično ima isti naziv kao i PNG. U njoj su informacije potrebne za kompajliranje tog kursora. Ovo je primjer moje default.conf za default strelicu:
24 2 2 default-24.png
32 2 2 default-32.png
48 3 3 default-48.png
64 4 4 default-64.png
96 6 6 default-96.pngObjasnimo što je unutra na primjeru prvog reda koda. Napomena da se koordinata 0 0 nalazi u gornjem lijevom kutu stranice na kojoj smo crtali kursor.
- 24 – veličina kursora u pixelima – ona u kojoj smo exportirali i veličina koja se pokazuje kao mogućnost odabira u sistemskim postavkama kursora
- 2 – koordinata hotspota vodoravno, pomak u pixelima prema desno
- 2 – koordinata hotspota okomito, pomak u pixelima prema dolje
- default-24.png – sličica koju koristimo za kursor koju smo dobili exportiranjem iz Inkscapea
Svaki red ovoga koda određuje postavke kursora za svoju veličinu. Ako postoji samo jedna veličina, potreban je samo jedan red s tom veličinom, obično 32.
Hotspot je točna koordinata x, y unutar pikselne mreže kursora na koju sustav bilježi klik miša. Kao što se iz default.conf vidi, hotspot se mijenja ovisno o veličini kursora tako da ga treba za svaku veličinu točno odrediti i navesti posebno. Znači bitno je staviti hotspot točno tamo gdje bi trebao biti klik ili na mjesto gdje bi se kursor trebao promijeniti, npr. na rubu prozora gdje se pretvara u duplu strelicu.
Jedan primjer kako se izračunava hotspot. Uvijek crtamo na 32×32 i tamo odredimo hotspot, recimo da je desno po sredini x=30, y=16, ili kako to piše u confu:
32 30 16 default-32.pngRačunamo hotspot za 48 px po formuli:
x = 30 * (48 : 32) = 45
y = 16 * (48 : 32) = 24.
U conf za veličinu 48 upisujemo:
48 45 24 default-48.pngPodijelimo željenu veličinu 48 s veličinom crtanja 32 i pomnožimo s koordinatom. Ako rješenje nije cijeli broj, moramo ga zaokružiti na veći cijeli broj, jer ne može biti pola pixela. Eto, jednostavno je, koordinate ostaju, mijenjate samo veličinu – umjesto 48 u formulu stavljate 24, 64, 96…
Kad imamo spremne sličice i conf datoteku, kursor kompajliramo naredbom pokrenutom u folderu gdje su sličice i conf:
xcursorgen default.conf defaultOvako se sličice navedene u default.conf po navedenim parametrima pretvaraju u default kursor. Ovaj dobiveni kursor se zove samo default i nema posebnu extenziju, ali sustav ga prepoznaje kao X11 kursor glavne defaultne strelice.
Animirani kursor
Za animirani kursor je postupak isti samo treba napraviti eksport svih sličica posebno koje imamo u Inkscapeu u svim veličinama.
Na gornjoj fotki se vide sličice za animaciju KDE zupčanika koje sam napravio. Kut potreban da se dva susjedna vrha zuba zupčanika poklope je 45°. Ako rotiram zupčanik za 5°, treba mi 9 sličica za zatvoriti animaciju. Prva sličica je 0°, zadnja je 40°. Ako je zakrenem na 45°, ta sličica izgleda kao prva na 0° i zato nju ne ponavljam, a animacija će ponavljanjem sličica od 1 do 9 izgledati kao da se vrti beskonačno.
Conf za animirane kursore izgleda malo drugačije a možemo ga objasniti kao redoslijed sličica koje će kursor pokazivati.
32 15 15 watch-1-32.png 50
32 15 15 watch-2-32.png 50
32 15 15 watch-3-32.png 50
32 15 15 watch-4-32.png 50
32 15 15 watch-5-32.png 50
32 15 15 watch-6-32.png 50
32 15 15 watch-7-32.png 50
32 15 15 watch-8-32.png 50
32 15 15 watch-9-32.png 50
48 23 23 watch-1-48.png 50
48 23 23 watch-2-48.png 50
48 23 23 watch-3-48.png 50
48 23 23 watch-4-48.png 50
48 23 23 watch-5-48.png 50
48 23 23 watch-6-48.png 50
48 23 23 watch-7-48.png 50
48 23 23 watch-8-48.png 50
48 23 23 watch-9-48.png 50Parametri su kao kod statičnog kursora: veličina, koordinate hotspota i naziv sličice, a ono 50 na kraju je brzina mijenjanja sličica u milisekundama. Veća brzina – sporija animacija. Tu treba dobro razmisliti o animaciji jer malo sličica na sporoj brzini zapinje, dok previše sličica na velikoj brzini nema smisla jer se ne vide. U ovom slučaju animacija zupčanika koji se okreće 5° svakih 50 ms je glatka ali dosta spora – treba mu 3,6 sekundi da napravi cijeli krug, ali to sam i želio jer nisam htio živčanu animaciju. Naravno, redoslijed se radi ovisno o animaciji. Recimo, “disanje” je animirano tako da se sličice vraćaju, pa u conf radimo raspored 1-9 i onda vraćamo 8-2. Tako se rade animacije koje idu do jednog mjesta, vraćaju na početak i tako beskonačno.
Mapiranje kursora – izrada symlinkova
Gotove X11 kursore sve stavljamo u cursors/ mapu unutar mape kursora zajedno sa index.theme. To već sada može funkcionirati ali i ne mora jer sustav, aplikacije i browseri možda ne prepoznaju naša imena kursora. Zbog kompatibilnost više standarda treba izraditi symlinkove za kursore. Različiti grafički sustavi i radna okruženja (X11, Wayland, GTK2/3/4, Qt5/6) traže iste kursore pod različitim nazivima (npr. prstić za link sustavi mogu znati pod više imena: pointer, hand1, hand2 ili 3885420400000276). Symlinkovi štede prostor jer umjesto kopiranja i dupliciranja istih binarnih datoteka, izrađuje se samo jedna datoteka (npr. fleur), dok svi ostali nazivi (move, size_all, all-scroll) pokazuju na nju putem symlinka. Kad promijenimo original, vidimo odmah promjene i na njima. Ako aplikacija zatraži kursor po nazivu koji ne postoji u tvojoj temi, sustav na tom mjestu prikazuje sistemski kursor (npr. Adwaita). Mapiranjem se osigurava da tema ostane ispravna kroz sve programe i web preglednike.
Symlinkove je jednostavno napraviti, moramo samo znati točna imena. Defaultnu strelicu sustavi znaju i kao arrow, pa symlink koji mapira default u arrow izgleda ovako:
ln -s -f default arrowI u folderu cursors/ smo stvorili link arrow koji pokazuje na default strelicu. Tih symlinkova ima dosta pa sam ih strpao u jednu skriptu koja kursorima dodaje sve potrebne symlinkove. Treba je pokrenuti u folderu gdje se nalaze kursori.
#!/bin/bash
# 1. Prvo počisti sve postojeće symlinkove
find . -type l -delete
# OSNOVNI
ln -s -f default arrow
ln -s -f default top_left_arrow
ln -s -f default left_ptr
ln -s -f pointer hand2
ln -s -f pointer hand1
ln -s -f pointer 3885420400000276000049730000000e
ln -s -f pointer 640fb0e7419579150141305b742b27f2
ln -s -f text xterm
ln -s -f text ibeam
ln -s -f watch wait
ln -s -f vertical_text vertical-text
ln -s -f vertical_text vertical_text
# Zabrana / Not Allowed & No Drop
ln -s -f not_allowed not-allowed
ln -s -f not_allowed crossed_circle
ln -s -f not_allowed forbidden
ln -s -f not_allowed 03b01890127121328003000800070701
ln -s -f no_drop no-drop
ln -s -f no_drop not-drop
ln -s -f no_drop not_drop
# HVATALJKE (GRAB / GRABBING)
ln -s -f grab hand
ln -s -f grabbing closedhand
# TABLICE, NIŠAN I KAPALJKA
ln -s -f cell plus
ln -s -f cell 03b6e0fcb3499374a867c041f52298f0
ln -s -f crosshair cross
ln -s -f crosshair cross_reverse
ln -s -f crosshair tcross
ln -s -f crosshair 445a015a011c7041f501002600825700
ln -s -f crosshair 9081237383d900000800003c07f3ef6b
ln -s -f color_picker color-picker
ln -s -f color_picker eyedropper
ln -s -f color_picker dropper
ln -s -f color_picker 08e8e1c95fe2fc01f976f1e063a24ccd
# SKALIRANJE PROZORA I TABLICA
ln -s -f col_resize col-resize
ln -s -f col_resize split_v
ln -s -f col_resize split-v
ln -s -f col_resize ew-resize
ln -s -f col_resize ew_resize
ln -s -f col_resize 048008013003c04c8001010e00001111
ln -s -f row_resize row-resize
ln -s -f row_resize split_h
ln -s -f row_resize split-h
ln -s -f row_resize ns-resize
ln -s -f row_resize ns_resize
ln -s -f row_resize 2870a09082c103050810002007000001
ln -s -f nwse_resize nwse-resize
ln -s -f nwse_resize bd_double_arrow
ln -s -f nwse_resize size_fdiag
ln -s -f nwse_resize size-fdiag
ln -s -f nwse_resize c7088f0f3e6d8024354409f0170428ab
ln -s -f nesw_resize nesw-resize
ln -s -f nesw_resize fd_double_arrow
ln -s -f nesw_resize size_bdiag
ln -s -f nesw_resize size-bdiag
ln -s -f nesw_resize 50585d75b494802d0151028115016902
ln -s -f nesw_resize 02b07580142f0a2041f00f130e000022
ln -s -f nesw_resize fcf21c00b30f7e3f83fe0dfd12e71cff
# STRANICE I ZASEBNI KUTOVI PROZORA
ln -s -f top_side n-resize
ln -s -f top_side n_resize
ln -s -f top_side top_side_edge
ln -s -f bottom_side s-resize
ln -s -f bottom_side s_resize
ln -s -f bottom_side bottom_side_edge
ln -s -f left_side w-resize
ln -s -f left_side w_resize
ln -s -f left_side left_side_edge
ln -s -f right_side e-resize
ln -s -f right_side e_resize
ln -s -f right_side right_side_edge
ln -s -f top_left_corner nw-resize
ln -s -f top_left_corner nw_resize
ln -s -f top_right_corner ne-resize
ln -s -f top_right_corner ne_resize
ln -s -f bottom_left_corner sw-resize
ln -s -f bottom_left_corner sw_resize
ln -s -f bottom_right_corner se-resize
ln -s -f bottom_right_corner se_resize
# POVEĆALO / ZOOM
ln -s -f zoom_in zoom-in
ln -s -f zoom_out zoom-out
# FLEUR / MOVE (4-smjerna strelica za pomicanje)
ln -s -f fleur move
ln -s -f fleur size_all
ln -s -f fleur size-all
ln -s -f fleur all-scroll
ln -s -f fleur all_scroll
ln -s -f fleur 00000400000002000000000000000000
# ANIMIRANI KURSORI & POMOĆ
ln -s -f left_ptr_watch progress
ln -s -f left_ptr_watch half-busy
ln -s -f left_ptr_watch 00000000000000020006000e7e9bc1f4
ln -s -f left_ptr_watch 3ecb610c1bf2410f44200f4848d32892
# ČEKAJ - WATCH
ln -s -f watch 0426c0800c488510e6d8477203622f4b
ln -s -f context_menu context-menu
ln -s -f context_menu 00000000000000000000000000000000
ln -s -f help question_arrow
ln -s -f help d9ce0fe07014373883e91085d08313e6
echo "Symlinkovi generirani!"
Nakon mapiranja folder ima preko stotinu što kursora, što symlinkova. Taj folder možemo slati dalje, dovoljno ga je samo staviti u folder .icons/ i kursor će se pojaviti u podešavanjima kursora s mogućnošću odabira i svih veličina koje smo napravili.
Ovdje je predstavljen princip i redoslijed rada, nije objašnjeno kako nacrtati kursor, to je druga priča. Postupak nije baš brz kao što možda izgleda, ipak treba osmisliti i nacrtati 34 ikone za kompletnu temu. Treba svaku exportirati u svim veličinama, animirati, kompajlirati svaku ikonu… Za ovo mi je trebalo nekih 2-3 sata posla u 3-4 dana. Moglo je i manje, ali kad radiš od nule, dobivaš nove ideje usput, pa nekad ponovno crtanje, ispravljanje… sve to troši vrijeme, samo što vrijeme u kojem sam nešto naučio ili korisno napravio nije izgubljeno vrijeme. Ovo radim u svrhu svoje izobrazbe, kursor ću ionako pokloniti svima, a i zadovoljan sam kako moja tema izgleda. Još samo moram smisliti dobro, svjetsko ime i bit će spremno za download. Moj mali doprinos Linux zajednici. Ne pitaj što zajednica može učiniti za tebe, nego se pitaj što ti možeš učiniti za zajednicu. Ja sam, evo, napravio kursor. I Linux Vulgaris.
