Gomb menüvel

Ma egy kis programozás félével rukkolok elő. A Firefox böngésző program menüje ihletett meg, aminek hatására szerettem volna valami hasonlót előállítani. Itt balra a mellékelt ábrán látszik is, hogy mire gondolok. Az elhatározást tett követte, lássuk mire jutottam.
Amire szükség lesz az a Lazarus fejlesztőkörnyezet. Itt hozzunk létre egy új projektet, majd a szerkeszthető formra tegyünk egy panelt. A panel színét  clMenuBar színűre kell beállítani. Az igazítást (Align) pedig alTop-ra. A BevelInner és a BevelOuter propertyk legyenek egységesen bvNonera állítva. Ezzel meg is kaptuk azt a fekete részt a képen, ami az ablak címsora alatt van. Most tegyünk fel erre a panelre egy SpeedButtont. Ezt már nem a Standard, hanem az Additional palettán találjuk. Azért erre a komponensre lesz most szükségünk, mert itt be tudjuk állítani, hogy lapos legyen. Tegyük is meg mindjárt és állítsuk be a gombunk Flat propertyjét Truera. Ezt követően adjunk valami cimkét a gombnak, ami legyen mondjuk Menü ▼. Mint látható tettem ide egy fura karaktert, ami egy lefelé mutató kis háromszög. Ezt a karaktertáblából ki tudjuk másolni a kódja U+25BC. Ha a gombunk nem méreteződik át automatikusan a szövegünk méretéhez, akkor méretezzük át. Ezt megtehetjük az egér segítségével, vagy a Height és a Width property beállításával.

Most, hogy már akad egy gombunk jó lenne összeházasítani valami menüfélével. Ehhez használjuk a komponenspaletta Standard fülén található PopupMenu komponenst. Ezt csak tegyük le valahova a formra, a pozíciónak nincsen jelentősége. Az Object Inspector ablakában nyomjunk egy jobb klikket a Popupmenün és válasszuk ki a Menu editort. Ennek segítségével hozzunk létre néhány menüpontot, hogy majd legyen mit megjeleníteni.
Van már gombunk és van menü elemünk is, kezdjünk hát hozzá, hogy kicsit testre szabjuk őket. Első körben azt szeretném, hogy ha az egeret a gombra viszem, akkor az megváltozzon, mint az az ábrán is látható. Ehhez a gomb eseményeit kell kezelésbe venni. A kívánt hatás eléréséhez három eseményt fogunk felhasználni a gomb esetében és egyet a menüében. Maradjunk még a gombnál tehát. Elsőnek az onMouseEnter esemény beállítása következik, ez hajtódik végre akkor, amikor az egér a gomb fölé kerül. Itt beállítom a gomb színét, a gombon levő szöveg színét és a korábban beállított Flat propertyt.
A kész esemény az alábbiak szerint alakul:

procedure TForm1.spBtnMouseEnter(Sender: TObject);
begin
   spBtn.Color:=clBtnFace;
   spBtn.Flat:=False;
   spBtn.Font.Color:=clBtnText;
end;

Ezt követően azt is meg kell csinálni, hogy mi történjen ha az egér elhagyja a gombot. Ehhez az onMouseLeave eseményt kell elkészíteni, ahol az imént beállított értékeket fogjuk visszaállítani valahogy így:

procedure TForm1.spBtnMouseLeave(Sender: TObject);
begin
   spBtn.Color:=clMenuBar;
   spBtn.Flat:=True;
   spBtn.Font.Color:=clMenuText;
end;

Most ha lefordítjuk a programot, akkor már ki is próbálhatjuk, hogy mit barkácsoltunk össze. Az egér mozgatása a gombra és le róla szemmel láthatóan működik.
Következzék a menü és gomb összekapcsolása. Nos, itt nem kell semmi komolyra gondolni, mindössze annyi fog történni, hogy a gombunk onClick eseményét hozzuk létre, hiszen azt szeretnénk, hogy a gombra történő kattintáskor megjelenjen a menü. Amit ehhez tudnunk kell az az, hogy a menüt pont a gomb alá akarjuk pozicionálni. Ezért az eseményhez létrehozott eljárásban deklarálok egy mnuPoint változót TPoint típussal, ebben fogjuk tárolni azt a koordinátát, ami a menünk bal felső sarkát jelenti. Az eljárás az alábbiak szerint néz ki:

procedure TForm1.spBtnClick(Sender: TObject);
var
  mnuPoint: TPoint;
begin
   mnuPoint.X:=spBtn.Left+2;
   mnuPoint.Y:=spBtn.Top+spBtn.Height;
   mnuPoint:=ClientToScreen(mnuPoint);
   pMnu.PopUp(mnuPoint.X,mnuPoint.Y);
end;

Látható, hogy az X koordinátába a menügombunk bal oldali pozíciójának az értéke kerül, de ehhez hozzá adok még kettőt, mert így nekem jobban néz ki, amikor a menü megjelenik. Az Y koordináta kiszámításához pedig a gomb felső szélének a pozíciójára valamint a gomb magasságára van szükségünk, e kettő érték összege megadja a gomb alsó szélének pozícióját. És van itt még valami. Mi lehet ez a ClientToScreen függvény? Nos, ez a TControl komponens egy függvénye és azt csinálja, hogy átalakítja nekünk a kapott koordinátákat, melyek a kliens relatív koordinátái, a képernyőn levő abszolút koordinátákká. Ami nagyjából annyit tesz, hogy kiderül a képernyőhöz viszonyítva hol helyezkedik el a gombunk bal alsó sarka. És azért van erre az értékre szükség, mert az előugró menünk popup propertyje ezeket a koordinátákat várja.
Már majdnem készen is vagyunk a dologgal, még a PopupMenu komponensünk egy eseményét állítsuk be, hogy a hatás még inkább kielégítő legyen. Ehhez állítsuk be az előugró menü onClose eseményére ugyan azt az eseménykezelőt, amit a gombnál arra használtunk, hogy lekezelje azt az eseményt, amikor a kurzor elhagyja a gombot. És készen is vagyunk.

Hellyel-közzel ugyan ez videón:

Alkalmasint majd készítek egy jobb videót a dologról, amiben az összes, a bejegyzésben szereplő elem látható lesz. A videót jobb minőségben is el lehet érni a youtubeon, ha itt a lejátszón a kis youtube ikonra kattintunk. Majd, már a youtubeon, a lejátszón levő kis fogaskerék gombra bökve vagy a 720p, vagy az 1080p felbontást válasszuk.

Tűrhető kezdés után....

... némi visszaesés. Azt hiszem ez jellemzi a blogolási hozzáállásomat. Mentségemre legyen mondva, hogy fáradt vagyok, nem bírom ezt a meleg időt.
Na de most, hogy ismét klaviatúrát ragadtam illenék írnom is valamiről ugyebár. Szóval most kicsit fényezni fogom magam. Úgy érzem egyre ügyesebben használom például az Inkscape nevű vektoros rajzprogramot. Munkahelyen elég sok kiadványt faragok benne az utóbbi időben és véleményem szerint nem is olyan csúnyák. Ma például rajzoltam egy remek kis nyitott könyvet benne. Valami ilyesmit:

Meglehet van még mit javítani rajta, de azért nem olyan rossz :D.
Aztán az is jól jött, hogy meg sikerült csinálni a pénteki rendezvényre a "csapatsorsoló torpedót". Az valahogy így fog festeni:

No azért mégsem teljesen így, a kutya képét pl egy stilizált farkasfejre cseréltem. Illetve apróbb módosításokat hajtottam még végre a programon.
Ez azért is érdekes kihívás volt, mert ez előtt sosem csináltam olyan programot, ahol egy táblázatba kellett grafikus elemeket megjeleníteni. Elsőre nem is tudtam, hogy merre induljak (na jó, ez persze nem egészen igaz, voltak sejtéseim, hogy majd a DrawGriddel kell kezdeni valamit), de szerencsére megtaláltam a Delphi Central weboldalt, ahol van egy cikk arról, hogy hogyan készítsünk memória játékot. Az ebben levő példa alapján már könnyedén el tudtam készíteni a programot, és megtanultam, hogy hogyan használjam a DrawGrid komponenst.
Ezeken felül pedig még olvasni is van időm. Folytatom az Első törvényt immár a harmadik, befejező kötettel, valamint a korábban jelzett blogos és HTML5-ös könyvet is.

A bejegyzés zenéje: (Linkin Park - Numb)

Probléma megoldva

Pár napja blogoltam arról, hogy van itt egy számítógépes probléma melynek hála nem működnek olyan saját készítésű programok, amelyek az interneten szeretnének elérni valamit. Nos, ma sikerült megoldani a dolgot. Nem oly hosszas fórum olvasgatás után eljutottam a LincolnBlogs nevű oldalra, ahol a Mint 13 Fix for Broken DNS című bejegyzésben levő script  segítségével orvosolható lett a problémám. Hálás köszönet érte a blog szerzőjének.

A bejegyzés zenéje: (Terminator II - Soundtrack Main Theme)

Számok kiírása szöveggel

Az alábbiakban egy Free Pascalban készült programot fogok bemutatni (elkészíteni), melynek segítségével számokat tudunk szöveggel kiíratni a képernyőre.
Lássunk is hozzá. Az elv az, hogy egész osztást végzünk egészen addig, míg el nem jutunk az egyesekhez.
Szükségünk lesz néhány konstansra, melyekben a számok betűvel leírt megfelelőit tároljuk. Íme:

Azt gondolom, hogy ez eléggé egyértelmű így, ezért nem magyaráznám el a konstansokat.

A következőkben készítsük el a függvényt, amely képes átalakítani a számokat betűkké. Itt szükségünk lesz 3 darab változóra, melyekben majd adatokat tárolunk. Ezek legyenek tmpstr: string=''; tmpint: integer=0; tmpszam: longint=0; Tehát van egy szöveges és két egész típust tárolni képes változónk. Mivel most függvényt írunk ezért azt is tudnunk kell, hogy a függvényünknek lesz egy bemeneti adata, amely maga a szám, amit át akarunk alakítani (legyen mondjuk szam: longint;), és a függvény azért függvény mert nevén keresztül értéked ad vissza, amely esetünkben egy string típusú adat lesz, azaz maga a szöveggé alakított szám. Nos függvényünknek adjuk mondjuk a SzambolBetu nevet.
A függvényünk fej része ezek után valahogy így alakul a változó deklarációkkal együtt:

Tehát alakul a függvényünk. Mielőtt elkezdenénk osztani a bemenetként kapott számot vizsgáljuk meg, hogy nem nulla e véletlenül. Ehhez egy sima IF feltételes utasítás elég is:

Jól látható, hogy ha nulla értéket kapunk, akkor függvényünk visszatérési értékének beállítjuk, hogy nulla, majd kilépünk a függvényből az exit eljárás meghívásával.

Most már oszthatunk. Azt azért még vegyük figyelembe, hogy a változóinknak vannak korlátai de ezeket most nem szeretnénk kihasználni. Ezért a program majd csak maximum 999 999 999 nagy számmal működik. Én azt gondolom, hogy ekkora szám bőven elég is, hiszen ha fel szeretnénk használni ezt a kódot például valami számlázó programban ott sem nagyon szokott előfordulni ettől nagyobb összeg. Ennyi kitérő után tehát osszunk. Először természetesen a tmpszam változónkba betesszük a bemenetként kapott számot azaz: tmpszam:=szam; Ezt követően  elvégzünk még egy ellenőrzést, hogy a szám, amit kaptunk nem nagyobb e mint 9 jegy. Ha nagyobb, akkor az előző IF utasításnál látható módon kilépünk a függvényből, melynek visszatérési értéke "A szám túl nagy" lesz ebben az esetben.
És most már tényleg osztani fogunk, osztásunk eredményét pedig a tmpint változóba helyezzük valahogy így: tmpint:=tmpszam div 1000000;
Hoppá! Csak egymillióval osztunk, merülhet fel a kérdés? Nos, igen. Ugyanis létre fogunk hozni egy kifejezetten a százasokat betűvé alakító függvényt is. Melyet egyben közlök majd a bejegyzés végén, minden különösebb magyarázat nélkül, minek utána lényegében ugyan azt az elvet követi, amit a SzambolBetu függvényünk is. Nem mellesleg bízom benne, hogy a kedves olvasó tudja követni a logikát, amit ebben a függvényben alkalmaztam, így annak megértése nem okoz különösebb gondot neki.

Tehát a milliós nagyságú értékek megállapításához elvégeztük az osztást. Itt be kellett vetnünk az maradékos osztást is, mivel meg kellett állapítanunk, hogy a szám nem valami kerek milliós érték e. És most akkor csavarjunk egyet a dolgon és most vizsgáljuk meg ezresekre a bemenetként kapott számunkat. Ehhez előbb el kell végezzünk egy kivonást. Vonjuk ki a tmpszam változóban tárolt számból a korábbi milliós osztás eredményt úgy, hogy ezt az eredményt a kivonás előtt felszorozzuk millióval :). A dolog valahogy így fog kinézni: tmpszam:=tmpszam-(tmpint*1000000);
Most már jöhet az ezres osztás, melyben szintén felhasználjuk a korábban emlegetett, a százasok megállapítására szolgáló függvényünket.

Láthatóan az elv itt is hasonló mint a milliós osztásnál, tehát nagyon nem ragoznám ezt sem túl. Már csak egyetlen dolog van hátra, még el kell végezzük az osztást a százasokra, tízesekre és egyesekre. Ezt a funkciót remekül elvégzi nekünk a százasok kezelésére írt függvényünk, így lényegében ezt kell meghívjuk, de előtte még el kell végezzük ezt a műveletet tmpszam:=tmpszam-(tmpint*1000); hogy az érték biztosan ne legyen nagyobb mint 999.

És ezzel lényegében eljutottunk a függvény végére. Most már csupán el kell helyezzük egy programban és ki kell próbáljuk, hogy hogy működik.Előtte azonban még álljon itt a már sokat emlegetett százasokat és ettől kisebb helyiértékeket átalakító függvény kódja is:

A programot, melyben teszteljük a függvényünket közzé teszem itt a bejegyzés végén. A teszthez használhatjuk az Ideone.com weboldalt, ahová a kódunkat a jobb oldali mezőbe bemásolva, majd a bal oldalon kiválasztva a Pascal(fpc) nyelvet (ez jelöli, hogy a Free Pascal fordítót akarjuk használni) rákattintunk a küldés gombra. Ezt követően az oldal a kódunkat lefordítja és le is futtatja. A futás végeredményéről pedig tájékoztat minket. Nos tehát következzék a teljes program:


A bejegyzés zenéje: Scooter - Remedy