RGB цвят (MIT App Inventor Workshop 2)

Въведение

Един от най-често срещаните формати за обработка на цветове в компютърните приложения днес е 32-битовият цветен формат. В този формат се използват 4 байта, за да се посочи относителната интензивност на всеки цветен компонент (R за червено, G за зелено и B за синьо) и на алфа канала (което показва нивото на прозрачност, където 0 е напълно прозрачно и 255, напълно непрозрачен). В най-използвания стандарт червеното съответства на байта с най-голямо тегло, след това отива зелено, синьо и накрая, в този с най-ниско тегло, алфа канала.

В този проект ще бъде създадено приложение, което ще позволи с помощта на четири плъзгащи се ленти да избере стойността на всеки от компонентите на даден цвят с този формат и също така ще позволи да види цвета, конфигуриран така, сякаш е напълно непрозрачен и върху бяла решетка.и черен, за да оцени неговата прозрачност Предлага се също като уголемяване да може да се направи снимка с камерата и върху нея да се наслагва конфигурираният цвят.

Когато изпълнявате този проект, ще научите концепции за подреждането на елементите на екрана, лентите за избор или плъзгача на графичния интерфейс, използването на цветове в приложенията и, разбира се, програмни концепции, свързани с процедурите o функции и итеративни структури o цикли.

Предлага се това приложение да се изгражда постепенно, като се следват стъпките, описани по-долу.

Стъпка 1: оформление на графичния интерфейс

Както се вижда на изображението, крайното приложение се състои от няколко графични елемента, за чието подреждане на екрана трябва да се внимава, така че външният вид да е приятен за потребителя. При разглеждане на изображението ясно се различават четири вертикално подравнени области:

Малка горна лента, в която се появява заглавието.
Голяма централна част, в която четири подобни елемента са разположени вертикално и всеки един от тях се състои от три други, разположени хоризонтално: лентата, текст и цветна кутия.
Друга малка лента, в която стойността на цвета се появява в шестнадесетичен формат.
Долна секция със среден размер, показваща двата квадрата, показващи избрания цвят.

Освен това се забелязва, че горната лента на състоянието на телефона не се вижда и че екранът съдържа фоново изображение, малко контрастиращо, така че да не нарушава гледката, което позволява да се оцени прозрачността на алфа канала.

Нека да видим как да подредим на екрана на нашето приложение компонентите на графично оформление, оформления в MIT App Inventor, необходими за получаване в нашия проект на изображение, подобно на показаното:

С това сме конфигурирали графичното оформление на приложението, което би било както се вижда на изображението, но не сме добавили никаква функционалност чрез кодови блокове. В следващата стъпка ще накараме плъзгачите за избор на цвят да се появят и да работят.

Стъпка 2: изберете цветните компоненти

В тази стъпка ще добавим елементите на интерфейса и блоковете, за да можем да избираме всеки компонент на цвета с помощта на лента за избор и да показваме шестнадесетичната стойност на споменатия компонент и неговата интензивност на цвета. Първо целият процес ще се извърши за червения компонент и след това ще се повтори, променяйки подходящите стойности, за да работят и четирите. Нека да видим за първата стъпка как да добавим графичните елементи и по-късно кодовите блокове.

Първо ще добавим графичните елементи на червения цвят. За да направите това, върху червения елемент ще добавим:

Сега искаме, когато преместваме курсора на лентата и получаваме, както беше споменато по-горе, стойност между 0 и 255, текстът се променя, отразявайки споменатата стойност в шестнадесетично число и цветът на полето модифицира червения си компонент според тази стойност. В раздела Блокове на изгледа на програмата избираме събитието, свързано с промяната в позицията на курсора Redbar, което ни позволява да осъществим достъп до стойността, конфигурирана в лентата според позицията на курса чрез свойството ThumbPosition. С тази стойност можем да генерираме текста, показан в RedValue и цвета на полето RedRight. В първия случай ще трябва да използваме блок от раздела Математика, който позволява да се изрази стойност в шестнадесетичен формат, а за втория трябва да вземем предвид, че цветът може да бъде създаден чрез списък с неговите компоненти и блок от секцията Цветове, така че ще използваме стойността в червения компонент, оставяйки другите два цветни компонента на 0, а алфа канала на 255. Първо трябва да коментираме, че стойността, върната от лентата за избор, е реално число, с десетична част, която трябва да преобразуваме в цяло число, преди да я използваме в описаните случаи. Ще извършим преобразуването, като използваме таванния блок на раздела Математика .

След като тези стъпки бъдат завършени, ще можем да видим работата на червената лента за избор и как при преместване на курсора или натискане в даден момент на лентата стойността на цвета и интензивността на червеното в полето се променят. Когато проверим дали това работи правилно, ще повторим стъпките за останалите цветове и алфа канала, като вземем предвид позицията на различните цветни компоненти при създаването на получения цвят. В примера, в случая на алфа канала, ние избрахме да зададем трите цветни компонента на 255. Ако кутията, чиято прозрачност променяме, беше зададена на 0, тя щеше да е черна.