RGB színes (MIT App Inventor Workshop 2)

Bevezetés

A színek számítógépes alkalmazásokban történő kezelésének egyik leggyakoribb formátuma a 32 bites színformátum. Ebben a formátumban 4 bájtot használunk az egyes színkomponensek (R piros, G zöld és B kék) relatív intenzitásának és az alfa-csatorna (amely az átlátszóság szintjét jelzi, ahol a 0 teljesen átlátszó és 255 az relatív intenzitást jelzi), teljesen átlátszatlan). A legelterjedtebben használt szabványban a piros a legnagyobb tömegű bájtnak felel meg, majd a zöld, a kék és végül a legkisebb tömegűnek az alfa-csatorna.

Ebben a projektben egy olyan alkalmazás jön létre, amely négy csúszó sáv segítségével kiválaszthatja a szín minden egyes alkotóelemének értékét ebben a formátumban, és lehetővé teszi a szín konfigurálását úgy is, mintha teljesen átlátszatlan és fehér rácson, fekete pedig átlátszóságának értékelése érdekében. Nagyításként azt is javasolják, hogy fényképezni lehessen a kamerával, és hogy a konfigurált szín rá legyen helyezve.

A projekt végrehajtása során megismerkedhet a képernyőn megjelenő elemek elrendezésével, a grafikus felület kijelölősávjaival vagy csúszkájával, a színek használatával az alkalmazásokban, és természetesen az eljárásokkal kapcsolatos funkciókkal és iteratív struktúrák o hurkok.

Javasoljuk, hogy ezt az alkalmazást az alábbiakban ismertetett lépések követésével fokozatosan építse fel.

1. lépés: a grafikus felület elrendezése

A képen látható módon a végső alkalmazás több grafikai elemből áll, amelyeknek a képernyőn történő elrendezéséről gondoskodni kell, hogy a megjelenés kellemes legyen a felhasználó számára. A kép megtekintésekor négy függőlegesen igazított terület egyértelműen megkülönböztethető:

Egy kis felső sáv, amelyben a cím szerepel.
Nagy középső rész, amelyben négy hasonló elem függőlegesen van elrendezve, és mindegyik három vízszintesen elrendezett másik részből áll: a sávból, a szövegből és egy színes dobozból.
Egy másik kis csík, amelyben a színérték hexadecimális formában jelenik meg.
Egy közepes méretű alsó szakasz, amelyen a két négyzet látható, a kiválasztott színnel.

Ezenkívül megfigyelhető, hogy a telefon felső állapotsora nem látható, és hogy a képernyő háttérképet tartalmaz, kevéssé kontrasztos, hogy ne zavarja a nézetet, ami lehetővé teszi az alfa-csatorna átlátszóságának értékelését.

Lássuk, hogyan rendezhetjük el alkalmazásunk képernyőjén a grafikus elrendezés, az MIT App Inventor elrendezésének elemeit, amelyek szükségesek ahhoz, hogy projektünkben a képhez hasonló képet szerezzünk:

Ezzel konfiguráltuk az alkalmazás grafikus elrendezését, amely a képen látható lenne, de kódblokkokon keresztül nem adtunk hozzá funkcionalitást. A következő lépésben a színválasztó csúszkák megjelennek és működnek.

2. lépés: válassza ki a színösszetevőket

Ebben a lépésben hozzáadjuk az interfész elemeket és blokkokat, hogy az egyes színkomponenseket kiválaszthassuk egy kiválasztó sáv segítségével, és megmutassuk az említett komponens hexadecimális értékét és színintenzitását. Először az egész folyamatot elvégezzük a piros komponensnél, majd megismételjük, a megfelelő értékeket megváltoztatva, hogy mind a 4 működjön. Az első lépésben nézzük meg, hogyan adhatók hozzá a grafikus elemek, majd később a kódblokkok.

Először hozzáadjuk a piros szín grafikai elemeit. Ehhez a Red elemhez hozzáadjuk:

Most azt akarjuk, hogy amikor a sáv kurzorát mozgatjuk, és 0–255 közötti értéket kapunk, amint azt korábban említettük, a szöveg megváltozik, amely hexadecimálisan tükrözi az említett értéket, és a doboz színe ennek az értéknek megfelelően módosítja vörös összetevőjét. A programnézet Blocks szakaszában kiválasztjuk a Redbar kurzor helyzetének megváltoztatásával társított eseményt, amely lehetővé teszi számunkra, hogy a ThumbPosition tulajdonságon keresztül hozzáférjünk a sávban konfigurált értékhez a pálya helyzete szerint. Ezzel az értékkel előállíthatjuk a RedValue-ban látható szöveget és a RedRight mező színét. Az első esetben a Math szakasz egy blokkját kell használnunk, amely lehetővé teszi az érték hexadecimális kifejezést, a másodikban pedig figyelembe kell vennünk, hogy a szín létrehozható egy összetevőkből álló lista és egy a Színek szakasz, így a piros komponensben szereplő értéket fogjuk használni, a másik két színkomponent 0-ra, az alfa-csatornát 255-re hagyva. Először meg kell jegyeznünk, hogy a kiválasztó sáv által visszaadott érték valós szám, a tizedes rész, amelyet át kell alakítanunk egész számra, mielőtt használnánk a leírt esetekben. A konverziót a Math szakasz mennyezetblokkjával hajtjuk végre .

Miután ezeket a lépéseket elvégeztük, láthatjuk a piros kijelölősáv működését és azt, hogy a kurzor mozgatásakor vagy a sáv valamely pontján történő megnyomásakor hogyan változik a doboz színének értéke és a vörös intenzitása. Miután megvizsgáltuk, hogy ez megfelelően működik-e, megismételjük a lépéseket a többi színre és az alfa csatornára is, figyelembe véve a különböző színkomponensek helyzetét a kapott szín létrehozásakor. A példában az alfa csatorna esetében a három színkomponens 255-re állítását választottuk. Ha az a négyzet, amelynek átlátszóságát módosítjuk, 0-ra lett állítva, fekete lenne.