Въведение

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

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

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

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

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

алфа канала

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

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

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

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

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

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

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

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

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

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

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

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

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

Стъпка 3: поставяне на цветните компоненти заедно

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

Първо можем да добавим кода в червената лента. Към блоковете, активирани от събитието, свързано с промяната на BarRed, добавяме модификацията на цвета на фона на полетата ColorPlano и ColorCuadros. Първият ще бъде оформен със стойностите на лентите на трите компонента R, G и B и ще бъде непрозрачен; вторият ще има същите три начални компонента и стойността на алфа канала в четвъртия. Сега можем да видим, че при преместване на червената лента цветът на долните кутии се променя. Бихме могли да повторим този блок код в събитията, свързани със смяната на четирите плъзгащи се ленти, но за да избегнем повторение на същия блок четири пъти, по-добре е да използваме процедура. И така, ще капсулираме новия блок, добавен към събитието, свързано с червената плъзгаща лента, в процедура, която ще извикаме update и в края на всяко от четирите събития, свързани с лентите, извикване на тази процедура. Сега преместването на някоя от лентите ще промени цвета на долните правоъгълници.

Все още е необходимо да направите правилната шестнадесетична стойност да се показва на цветните полета. Неговата числена стойност се изчислява като R * 256 3 + G * 256 2 + B * 256 + A, където R, G, B и A са съответно целите части на стойностите на съответните плъзгачи. Тази стойност може да се изчисли и по-бързо - това се прави, за да се изчислят например стойности на полиноми - като (((R * 256 + G) * 256) + B * 256) + A и този израз е можете лесно да програмирате итерация върху списъка със стойностите, които ни позволяват да формираме цвета на ColorCuadros. С тази стойност и 8 като брой на цифрите използваме функцията hex2txt, за да генерираме шестнадесетичния текст и да обединим "0x" отляво, за да получим текст, равен на този, показан в етикета ColHexa. Включваме всичко това в процедурата за актуализация и на практика завършихме тази стъпка.

Липсва малка подробност, която може да е станала очевидна, ако сме тествали показания досега код. В някои случаи, когато модифицирате една от лентите от първоначалното състояние, шестнадесетичната стойност, показана за глобалния цвят, не е очакваната, тъй като компонентите на немодифицираните цветове може да не са същите като тези, показани до всяка лента. Това е така, защото стойността, върната от лентите, зависи от позицията на курсора и неговата дължина и ако това е по-малко от 255, може да не върне всички целочислени стойности, които се побират в байт, по-специално стойността 7F, която задаваме по подразбиране. Ако искаме да коригираме това малко отклонение, ще бъде достатъчно да добавим блок, който се активира при стартиране на приложението, със събитие Initialize, което отговаря за четенето на реалната стойност на всяка лента, актуализиране на текста, показан отдясно и извикване на процедурата за актуализиране, за да коригира стойността глобален цвят.

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

Стъпка 4: промяна на цвета на снимка

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

В интерфейса в началния екран Screen1 ще добавим AccelerometerSensor от секцията Sensors и ще го наречем Accelerometer. Използване на бутона Добавяне на екран. Ще добавим втори екран, който ще наречем Камера и ще поставим в него елемент за вертикална настройка, който го запълва изцяло, който ще извикаме Layer1 и Камера, която ще получим от раздела Медия .

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

В програмата на другия екран ще добавим глобална променлива, която ще наречем Filter, инициализирана с началната стойност на екрана, и ще поставим два прости блока:

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

Сега можем да завършим проекта и да се посветим на правене на снимки и промяна на цвета му.