RGB Color (MIT App Inventor Workshop 2)

Introducere

Unul dintre cele mai comune formate de astăzi pentru manipularea culorilor în aplicațiile pentru computer este formatul de culoare pe 32 de biți. În acest format, 4 octeți sunt utilizați pentru a indica intensitatea relativă a fiecărei componente de culoare (R pentru roșu, G pentru verde și B pentru albastru) și canalul alfa (care indică nivelul de transparență, unde 0 este complet transparent și 255, complet opac). În cel mai utilizat standard, roșu corespunde octetului cu cea mai mare greutate, apoi verde, albastru și, în cele din urmă, în cel cu cea mai mică greutate, canalul alfa.

În acest proiect, va fi creată o aplicație care va permite, prin intermediul a patru bare glisante, să selecteze valoarea fiecăreia dintre componentele unei culori cu acest format și va permite, de asemenea, să vadă culoarea configurată ca și cum ar fi totală opac și pe o rețea albă. și negru pentru a-i aprecia transparența. De asemenea, se propune, ca mărire, să poți face o fotografie cu camera și să se suprapună culoarea configurată pe ea.

La realizarea acestui proiect, veți învăța concepte despre dispunerea elementelor de pe ecran, barele de selecție sau glisorul interfeței grafice, utilizarea culorilor în aplicații și, desigur, programarea conceptelor legate de procedurile sau funcțiile și structuri iterative o bucle.

Se propune construirea acestei aplicații în mod incremental, urmând pașii descriși mai jos.

Pasul 1: aspectul interfeței grafice

După cum se poate vedea în imagine, aplicația finală constă din mai multe elemente grafice a căror dispunere pe ecran trebuie să fie îngrijită astfel încât aspectul să fie plăcut utilizatorului. Când vizualizați imaginea, se disting clar patru zone aliniate vertical:

O mică bandă superioară în care apare titlul.
O mare parte centrală în care patru elemente similare sunt dispuse vertical și fiecare dintre ele constă din alte trei dispuse orizontal: bara, un text și o casetă colorată.
O altă bandă mică în care valoarea culorii apare în hexazecimal.
O secțiune inferioară de dimensiuni medii care arată cele două pătrate care arată culoarea aleasă.

În plus, se observă că bara de stare superioară a telefonului nu este vizibilă și că ecranul conține o imagine de fundal, puțin contrastată, astfel încât să nu deranjeze vizualizarea, ceea ce permite să aprecieze transparența canalului alfa.

Să vedem cum să aranjăm pe ecranul aplicației noastre componentele aspectului grafic, aspectele în MIT App Inventor, necesare pentru a obține în proiectul nostru o imagine similară cu cea prezentată:

Cu aceasta am configurat aspectul grafic al aplicației, care ar fi așa cum se vede în imagine, dar nu am adăugat nicio funcționalitate prin blocuri de cod. În pasul următor vom face să apară și să funcționeze glisoarele de selecție a culorilor.

Pasul 2: selectarea componentelor de culoare

În acest pas vom adăuga elementele de interfață și blocurile pentru a putea selecta fiecare componentă a culorii folosind o bară de selecție și vom arăta valoarea hexazecimală a componentei menționate și intensitatea culorii acesteia. Mai întâi se va efectua întregul proces pentru componenta roșie și apoi se va repeta, schimbând valorile corespunzătoare, pentru ca toate cele 4 să funcționeze. Să vedem pentru primul pas cum să adăugăm elementele grafice și mai târziu blocurile de cod.

În primul rând, vom adăuga elementele grafice ale culorii roșii. Pentru a face acest lucru, pe elementul Roșu vom adăuga:

Acum vrem ca atunci când deplasați cursorul barei și obțineți, așa cum am menționat anterior, o valoare cuprinsă între 0 și 255, textul se schimbă reflectând valoarea menționată în hexazecimal și culoarea casetei să-și modifice componenta roșie în funcție de acea valoare. În secțiunea Blocuri din vizualizarea programului selectăm evenimentul asociat cu schimbarea poziției cursorului Redbar care ne permite să accesăm valoarea configurată în bară în funcție de poziția cursului prin proprietatea ThumbPosition. Cu această valoare putem genera textul afișat în RedValue și culoarea casetei RedRight. În primul caz, va trebui să folosim un bloc din secțiunea Matematică care permite exprimarea unei valori în hexazecimal, iar pentru al doilea, trebuie să luăm în considerare faptul că culoarea poate fi creată printr-o listă cu componentele sale și un din secțiunea Culori, așa că vom folosi valoarea din componenta roșie, lăsând celelalte două componente de culoare la 0 și canalul alfa la 255. Mai întâi trebuie să comentăm că valoarea returnată de bara de selecție este un număr real, cu o parte zecimală, pe care trebuie să o convertim în număr întreg înainte de a o utiliza în cazurile descrise. Vom efectua conversia folosind blocul de plafon al secțiunii Matematică .

Odată ce acești pași sunt finalizați, vom putea vedea funcționarea barei de selecție roșie și cum, atunci când deplasați cursorul sau apăsați la un moment dat pe bară, se schimbă valoarea culorii și intensitatea roșului din casetă. Când am testat că funcționează corect, vom repeta pașii pentru celelalte culori și canalul alfa, ținând cont de poziția diferitelor componente de culoare la crearea culorii rezultate. În exemplu, în cazul canalului alfa, am ales să setăm cele trei componente de culoare la 255. Dacă caseta a cărei transparență o modificăm ar fi fost setată la 0 ar fi neagră.