Занятие № 3. Медиа компоненты мобильного приложения

Задачи

Изучить свойства компонентов Холст, ИзображениеСпрайта, Камера и научиться их модифицировать.
Научиться програмно создавать изображения на холсте, управлять свойствами спрайтов.
Научиться програмно запускать процесс фотографирования и размещения фотографии на холсте.
Применить компонент Таймер для создания анимации.
Научиться настраивать свойства приложения: название, иконку, тему оформления.

Задание № 1. Мастак 1.0

Перед началом работы, скачайте по ссылке архив с необходимыми изображениями и звуками.

Запустите браузер и нажмите комбинацию клавиш ⌃Ctrl + ⇧Shift + N , чтобы открыть приватное окно. Это необходимо для того, чтобы не сохранять ваш Google-аккаунт в браузере.

Перейдите на сайт App Inventor. Нажмите кнопку . Войдите в ваш Google-аккаунт.

Мастак (бел.) - 1. художник, 2. мастер своего дела.

Разработаем приложение, которое позволяет сделать фото и поделиться им с другими пользователями.

В приложении используем два новых невидимых компонента - Камера (раздел Медиа) и Публикация (раздел Общение).

Создайте новый проект под названием Mastak.

Загрузка медиа-ресурсов

Из папки mastak загрузите в проект файл icon.png. Это изображение станет иконкой приложения и будет показываться в списке приложений на телефоне:

Настройки проекта

Нажмите кнопку , чтобы открыть настройки приложения. В разделе General (Общие настройки) измените свойство AppName (Название приложения) на текст Мастак. Это название будет показываться в списке приложений после установки.

Измените свойство Иконка на icon.png.

Нажмите Close, чтобы закрыть окно с настройками проекта.

Проектирование интерфейса

Интерфейс экрана Screen1 содержит следующие компоненты:

Как добавить невидимые компоненты?

Невидимые компоненты также перетаскиваются на макет экрана. Они не отображаются на экране, но показываются в списке компонентов и под макетом экрана.

Настройте свойства компонентов согласно следующей таблице:

Компонент	Свойства
Screen1	ВыровнятьПоГоризонтали=Центр ОриентацияЭкрана=Альбомный режим
Холст	Высота=250 pixels Ширина=Наполнить родительский
ГоризонтальноеРасположение	ВыровнятьПоГоризонтали=Центр Ширина=Наполнить родительский
КнопкаФото	Текст=Фото
КнопкаПоделиться	Текст=Поделиться
Камера	Нет свойств
ПубликацияФото	Нет свойств

Программирование компонентов

Перейдите в раздел Блоки.

Добавим для кнопки КнопкаФото обработчик нажатия, который запустит процесс фотографирования:

После нажатия на кнопку появится изображение с камеры телефона и возможность сделать фото. Как только пользователь сделает фото и подтвердит это нажатием на галочку, возникнет событие ПослеСнимка. Обработаем это событие с помощью соответствующего блока. Обработчик события обладает параметром изображение в котором хранится ссылка на сделанный снимок. Фото сделаем фоновым изображением для компонента Холст:

Наведите курсор на имя параметра, чтобы взять блок получить изображение:

Время тестирования!

Запустите приложение. Нажмите кнопку Фото, сделайте фотографию и проверьте, появилась ли она на экране приложения. Обратите внимание, что фото может быть развернуто на 90 градусов. Это особенность сохранения фотографий в AppInventor.

Для кнопки КнопкаПоделиться составьте следующий скрипт:

Поделимся изображением на холсте.
Перед этим содержимое холста сохраняем в файл share.png.
К изображению добавим сообщение.

Время тестирования!

Запустите приложение. Сделайте снимок и нажмите кнопку Поделиться. Должен появится стандартный диалог для отправки информации. В диалоге будут перечислены приложения способные сохранить изображение и сообщение. Попробуйте отравить фотографию кому-либо из друзей.

Первая версия приложения готова.

Задание № 2. Мастак 2.0

Расширим функции приложения и добавим возможность рисовать на холсте.

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

В интерфейсе приложения используем два новых компонента: ВыборИзСписка и Бегунок.

Все изменения делайте в уже существующем проекте Mastak.

Проектирование интерфейса

Увеличим размер экрана приложения, чтобы увидеть все новые компоненты. Это изменение будет применено только к окну предпросмотра в самом App Inventor и не повлияет на размер окна на реальном мобильном устройстве.

В списке выберите пункт Размер планшета:

Добавьте к существующим компонентам следующие:

Свойства новых компонентов настройте согласно таблице:

Компонент	Свойства
КнопкаОчистить	Текст=Очистить
ВыборЦвета	Ширина=Наполнить родительский Текст=Выбор цвета ЭлементыИзЦепочки=красный,зеленый,синий
БегунокШиринаЛинии	Ширина=Наполнить родительский НаибольшееЗначение=15 МинимальноеЗначение=2 ПоложениеУказателя=2

Программирование компонентов

Перейдите в раздел Блоки.

Очистим холст по нажатию на кнопку КнопкаОчистить:

Добавим для холста обработку события касания и перетаскивания. Обработчик обладает рядом параметров, которые будут использованы для рисования линии. Эта линия соединит предыдущую точку касания холста и текущую:

Толщину пера будем регулировать с помощью бегунка БегунокШиринаЛинии. Сразу после изменения значения поменяем текущую ширину линии:

Время тестирования!

Запустите приложение. Попробуйте провести пальцем по холсту. Должна появиться тонкая линия чёрного цвета. Поменяйте толщину линии, изменив положение бегунка.

Составьте следующий скрипт для выбора цвета пера:

После нажатия на компонент ВыборЦвета появится список значений, перечисленных через запятую в свойстве ЭлементыИзЦепочки.

Последовательно сравниваем выбранный пункт с названием цвета.
Выбранный пункт списка можно получить, обратившись к свойству Выбор.

Меняем цвет пера в зависимости об выбранного из списка пункта.

Время тестирования!

Запустите приложение. Сделайте фото, настройте цвет и размер пера и приукрасьте изображение. Поделитесь изображением, нажав на кнопку Поделиться.

Проект готов.

Задание № 3. Художественный фильтр

Разработаем приложение, которое преобразует изображение в картину в стиле пуантилизма. Подобные картины состоят из мелких точечных мазков почти чистых красок:

А. Кросс. Пейзаж с небольшими мавританскими горами. Ок. 1909

Помимо наложения фильтра на фотографии, добавим возможность выбирать уже существующие изображения. Для этого используем компонент ВыборщикИзображений.

Создайте проект под именем filter.

Проектирование интерфейса

Интерфейс экрана Screen1 содержит следующие компоненты:

Настройте свойства компонентов согласно следующей таблице:

Компонент	Свойства
Screen1	ОриентацияЭкрана=Альбомный режим TitleVisible=нет галочки
КнопкаФото	Текст=Фото
ВыборщикИзображения	Без изменений
КнопкаФильтр	Текст=Фильтр
ХолстОригинал	Высота=300 pixels Ширина=Наполнить родительский
ХолстФильтр	ЦветФона=Чёрный Высота=300 pixels Ширина=Наполнить родительский

Программирование компонентов

Добавьте следующие скрипты для получения изображения из памяти устройства или с помощью фотографирования:

Алгоритм работы фильтра следующий:

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

Добавим скрипт-фильтр в обработчик нажатия кнопки КнопкаФильтр:

Очистим холст с результатом.
Добавим две локальные переменные: радиус и шаг.
Шаг сканирования пикселей изображение будет равен удвоенному значению радиуса.

Добавьте два цикла с определённым количеством повторений, для сканирования пикселей исходного изображения:

Внешний цикл перебирает строки и работает по переменной x, от 1 до ширины холста ХолстОригинал.
Внутренний цикл перебирает столбцы и работает по переменной y, от 1 до высоты холста ХолстОригинал.
Получаем цвет пикселя исходного изображения, который расположен по координатам (x, y). Полученный цвет будет цветом заливки для холста ХолстФильтр.
Рисуем на компоненте ХолстФильтр круг с центром в точке с координатами (x, y).

Время тестирования!

Запустите приложение. Попробуйте выбрать изображение из галереи вашего телефона и нажмите кнопку Фильтр. На втором холсте должно появиться изменённое изображение.

Добавим в скрипт фильтра элемент случайности. Будем менять случайным образом радиус круга, и его смещение относительно точки (x, y):

Время тестирования!

Проект готов

Задание № 4. Солнечная система

Создадим анимацию движения Земли и Луны вокруг Солнца.

Для создания анимации используем компонент Таймер (Сенсоры), который будет каждые 20 мс рассчитывать новые координаты двух компонентов ИзображениеСпрайта (Рисование и анимация). Данные компоненты отвечают за отрисовку изображений Земли и Луны.

Создайте новый проект под названием Solar_system.

Загрузка медиа-ресурсов

Загрузите в проект изображения из папки solar_system:

Проектирование интерфейса

Интерфейс экрана Screen1 содержит следующие компоненты:

Обратите внимание, что компоненты ИзображениеСпрайта нужно разместить внутри компонента Холст.

Настройте свойства компонентов согласно следующей таблице:

Компонент	Свойства
Screen1	ОриентацияЭкрана=Альбомный режим TitleVisible=нет галочки
Холст1	Высота=Наполнить родительский Ширина=Наполнить родительский ЦветФона=Чёрный
СпрайтЗемля	Изображение=earth.png
СпрайтЛуна	Изображение=moon.png
СпрайтСолнце	Изображение=sun.png
ЧасыАнимация	ИнтервалТаймера=20

Программирование компонентов

Для движения Земли и Луны используем параметрические уравнения эллипса: $x = x_{0} + a \cdot \cos t$

$y = y_{0} - b \cdot \sin t$

Значения $x_{0}$ и $y_{0}$ - координаты центра холста. Чтобы получить значения этих координат разделим пополам ширину и высоту холста соответственно.

Создайте глобальную переменную t для хранения значения параметра:

Добавьте обработчик события Таймер компонента ЧасыАнимация. Скрипт обработчика будет выполняться каждые 20 мс. В обработчике объявите ряд локальных переменных:

x0, y0 - координаты центра холста;
x_земля, у_земля - текущие координаты компонента СпрайтЗемля;
x_луна, y_луна - текущие координаты компонента СпрайтЛуна.

Переместим компонент СпрайтСолнце в центр холста. При размещении спрайта учтём его ширину и высоту:

Используем параметрические уравнения эллипса, чтобы вычислить координаты Земли:

Аналогично составляется выражение для расчёта значения переменной y_земля:

Добавьте блок для изменения положения компонента СпрайтЗемля 1. В конце скрипта необходимо увеличить на единицу значение переменной t 2.

Итоговый скрипт выглядит следующим образом:

Время тестирования!

Запустите приложение. Изображение солнца должно появится по центру экрана. Спрайт с изображение земли должен двигаться по эллипсу вокруг солнца. Спрайт с луной пока будет неподвижным.

Значение параметра t должно меняться на отрезке [0, 360]. Добавьте в конец скрипта условие обнуления значения параметра:

Составим выражения для вычисления координат луны. В качестве центра вращения будут выступать вычисленные ранее координаты земли:

Команды вычисления координат в сложенном виде:

Добавьте блок изменения положения компонента СпрайтЛуна после вычисления координат:

Время тестирования!

Запустите приложение. Теперь земля будет вращаться вокруг солнца, а луна - вокруг земли.

Проект готов.