Вступ

Одним з найпоширеніших форматів обробки кольорів у комп’ютерних програмах сьогодні є 32-розрядний кольоровий формат. У цьому форматі 4 байти використовуються для позначення відносної інтенсивності кожного кольорового компонента (R для червоного, G для зеленого та B для синього) та альфа-каналу (що вказує на рівень прозорості, де 0 є повністю прозорим і 255, повністю непрозорий). У найбільш широко використовуваному стандарті червоний відповідає байту з найбільшою вагою, потім зеленому, синьому і, нарешті, в тому, що має найменшу вагу, альфа-каналу.

У цьому проекті буде створено додаток, яке дозволить за допомогою чотирьох розсувних смуг вибрати значення кожного з компонентів кольору з цим форматом, а також дозволить побачити колір, налаштований так, ніби він повністю непрозорий і на білій сітці. і чорний, щоб оцінити його прозорість. Також пропонується, як збільшення, можливість фотографувати камерою та накладати на неї налаштований колір.

Виконуючи цей проект, ви дізнаєтеся поняття про розташування елементів на екрані, смуги вибору або повзунок графічного інтерфейсу, використання кольорів у програмах і, звичайно, концепції програмування, пов'язані з процедурами o функціями та ітеративні структури o петлі.

Запропоновано створювати цю програму поступово, дотримуючись кроків, описаних нижче.

Крок 1: компонування графічного інтерфейсу

колір

Як видно на зображенні, остаточна заявка складається з декількох графічних елементів, про розташування яких на екрані слід подбати, щоб зовнішній вигляд був приємним для користувача. Під час перегляду зображення чітко виділяються чотири вертикально вирівняні області:

  • Маленька верхня смужка, на якій з’являється заголовок.
  • Велика центральна частина, у якій чотири подібні елементи розташовані вертикально, і кожен з них складається з трьох інших, розташованих горизонтально: смуги, тексту та кольорового вікна.
  • Ще одна невелика смужка, в якій значення кольору відображається в шістнадцятковій.
  • Нижня секція середнього розміру, що показує два квадрати, що відображають обраний колір.

Крім того, спостерігається, що верхня панель стану телефону не видно і що екран містить фонове зображення, мало контрастне, щоб воно не заважало огляду, що дозволяє оцінити прозорість альфа-каналу.

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

За допомогою цього ми налаштували графічний макет програми, який буде таким, як видно на зображенні, але ми не додали жодної функціональності за допомогою блоків коду. На наступному кроці ми змусимо відображати і працювати повзунки вибору кольору.

Крок 2: вибір кольорових компонентів

На цьому кроці ми додамо елементи інтерфейсу та блоки, щоб мати можливість виділити кожен компонент кольору за допомогою рядка виділення та показати шістнадцяткове значення зазначеного компонента та його інтенсивність кольору. Спочатку буде проведено весь процес для червоного компонента, а потім повторений, змінюючи відповідні значення, щоб усі 4 працювали. Подивимось на першому кроці, як додати графічні елементи, а пізніше блоки коду.

Перш за все ми додамо графічні елементи червоного кольору. Для цього на елементі Red ми додамо:

Тепер ми хочемо, щоб при переміщенні курсора стовпчика та отриманні, як уже згадувалося раніше, значення від 0 до 255, текст змінювався, відображаючи зазначене значення в шістнадцятковій, а колір вікна модифікував його червоний компонент відповідно до цього значення. У розділі Блоки в поданні програми ми вибираємо подію, пов'язану зі зміною положення курсора Redbar, що дозволяє нам отримати доступ до значення, налаштованого на панелі відповідно до положення курсу, через властивість ThumbPosition. За допомогою цього значення ми можемо генерувати текст, показаний у RedValue, і колір поля RedRight. У першому випадку нам доведеться використовувати блок із розділу Math, що дозволяє виражати значення в шістнадцятковій системі, а в другому ми повинні врахувати, що колір може бути створений за допомогою списку з його компонентами та блоку з розділу "Кольори", тому ми будемо використовувати значення в червоному компоненті, залишаючи інші два кольорові компоненти рівними 0, а альфа-канал - 255. Спочатку ми повинні прокоментувати, що значення, яке повертає рядок виділення, є дійсним числом, з десяткова частина, яку ми повинні перетворити на ціле число, перш ніж використовувати її в описаних випадках. Ми проведемо перетворення, використовуючи стельовий блок розділу Math .

Після завершення цих кроків ми зможемо побачити роботу червоної панелі вибору та те, як при переміщенні курсору або натисканні в якійсь точці на панелі змінюється значення кольору та інтенсивність червоного у полі. Коли ми перевірили, що це працює правильно, ми повторимо кроки для інших кольорів та альфа-каналу, беручи до уваги положення різних кольорових компонентів при створенні результуючого кольору. У прикладі, у випадку альфа-каналу, ми вирішили встановити для трьох кольорових компонентів значення 255. Якби поле, прозорість якого ми змінюємо, було встановлено на 0, воно було б чорним.

Перш ніж продовжувати наступний крок, буде запропоновано невелике розширення. Коли ми використовуємо значення, що повертається косою рисою, у шістнадцятковій, воно, як правило, буде мати дві значущі цифри, але, коли воно дуже мало, найбільшим буде 0, а текст буде надрукований одним символом. Якщо ви хочете завжди показувати з двома, тобто показувати нулі зліва, вам потрібно виконати невелику процедуру, яка завершує текст, додаючи відсутні ліві 0. Пропонується зробити процедуру, яку ми будемо називати hex2txt, яка отримує два параметри, значення, яке потрібно перетворити, і кількість символів тексту, який він повертає. У блоках, які ми зробили до цього часу, ми замінимо перетворення на шістнадцяткове викликом цієї процедури зі значенням, яке повертається косою рисою і передається цілим числом і 2 як кількість цифр.

Ця процедура перетворить значення в шістнадцяткове і, поки кількість цифр у отриманому тексті буде менше зазначеної, вона додасть 0 ліворуч і повторно перевірить довжину.

Тепер у нас працюють чотири смуги виділення, і ми бачимо, що колір і тексти ними модифікуються. На наступному кроці ми закінчимо тим, що при зміні значення будь-якої смуги кольори оновлюються в двох нижніх полях і генерується шістнадцяткове значення 32 бітів кольору.

Крок 3: складання кольорових компонентів

На попередньому кроці нам вдалося змінити колір, пов’язаний з кожним компонентом, при зміні положення курсору будь-якої розсувної смуги. Тепер ми маємо зробити так, щоб при зміні будь-якої з 4 розсувних смуг колір двох прямокутників у нижній частині також змінювався, а шістнадцяткове значення кольору, показано над ними, змінювалося.

Спочатку ми можемо додати код на червону смужку. До блоків, активованих подією, пов’язаною зі зміною BarRed, ми додаємо модифікацію кольору тла полів ColorPlano та ColorCuadros. Перший буде сформований зі значеннями стовпчиків трьох компонентів R, G і B і буде непрозорим; другий матиме ті самі три початкові компоненти та значення альфа-каналу в четвертому. Тепер ми бачимо, що при переміщенні червоної смуги змінюється колір нижніх ящиків. Ми могли б повторити цей блок коду в подіях, пов’язаних із зміною чотирьох ковзних смуг, але щоб уникнути повторення того самого блоку чотири рази, краще скористатися процедурою. Отже, ми збираємося інкапсулювати новий блок, доданий до події, пов’язаної з червоною розсувною смугою, у процедурі, яку ми будемо викликати оновлення, а в кінці кожної з чотирьох подій, пов’язаних із смугами, - виклик до цієї процедури. Тепер переміщення будь-якої смуги змінить колір нижніх прямокутників.

Ще потрібно зробити так, щоб на кольорових полях відображалося правильне шістнадцяткове значення. Його числове значення обчислюється як 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. За допомогою кнопки Додати екран. Ми додамо другий екран, який ми будемо називати Camera, і ми помістимо в нього елемент вертикального регулювання, який повністю заповнить його, що ми будемо називати Layer1 і Camera, який ми отримаємо з розділу Media .

У коді з початкового екрану ми додамо нову глобальну змінну, яку ми будемо називати Вибраною та ініціалізувати будь-яким кольором із розділу Кольори. Також в процедурі оновлення ми додамо необхідний код, щоб ця змінна приймала значення кольору, налаштованого за допомогою чотирьох розсувних смуг, як це було зроблено для створення кольору ColorCuadros. Ми додамо новий блок, який реагує на подію тряски телефону через блоки, пов’язані з акселерометром, і який відкриває вікно Камери з початковим значенням Вибрано .

У програмі на іншому екрані ми додамо глобальну змінну, яку ми будемо називати фільтром, ініційованою з початковим значенням екрану, і розмістимо два простих блоки:

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

Тепер ми можемо закінчити проект, і ми можемо присвятити себе фотографуванню та зміні його кольору.