Занятие № 5. Взаимодействие с сенсорами мобильного устройства
Задачи
- Изучить назначение компонентов СенсорМестоположение, СенсорОриентации, СенсорАкселерометра и СканерШтрихКода.
- Уметь использовать получаемые с сенсоров значения для управления другими компонентами приложения.
- Научиться объявлять собственные блоки-процедуры и блоки-функции с параметрами и без параметров.
- Научиться применять процедуры и функции для разбиения большой задачи на подзадачи.
Задание № 1. Компас
Перед началом работы, скачайте по ссылке архив с необходимыми изображениями, звуками и шаблоном одного из проектов.
Запустите браузер и нажмите комбинацию клавиш ⌃Ctrl + ⇧Shift + N , чтобы открыть приватное окно. Это необходимо для того, чтобы не сохранять ваш Google-аккаунт в браузере.
Перейдите на сайт App Inventor. Нажмите кнопку 
. Войдите в ваш Google-аккаунт.
Разработаем приложение для ориентирования на местности. Кроме виртуального компаса, приложение будет показывать широту и долготу места, где вы находитесь.
Для того, чтобы определить азимут, используем компонент 
СенсорОриентация. Координаты поможет определить компонент 
СенсорМестоположения.
Создайте новый проект под именем Compas.
Загрузка медиа-ресурсов
Из папки compas загрузите в проект файл compas.png:
Настройки проекта
Нажмите кнопку 
, чтобы открыть настройки приложения. В разделе General (Общие настройки) измените свойство AppName (Название приложения) на текст Компас. Это название будет показываться в списке приложений после установки.
Измените свойство Иконка на compas.png.
Нажмите Close, чтобы закрыть окно с настройками проекта.
Проектирование интерфейса
Интерфейс экрана Screen1 содержит следующие компоненты:
Настройте свойства компонентов согласно следующей таблице:
| Компонент | Свойства |
|---|---|
| Screen1 | TitleVisible=нет галочки ОриентацияЭкрана=Альбомный режим |
 ГоризонтальноеРасположение |
Ширина=Наполнить родительский |
 НадписьШирота |
Ширина=50 percent |
 НадписьДолгота |
Ширина=50 percent |
 Холст1 |
Высота=Наполнить родительский Ширина=Наполнить родительский |
 СпрайтКомпас |
Изображение=compas.png |
| СенсорМестоположения1 |
ИнтервалРасстояния=10 |
В СпрайтКомпас храниться изображение компаса, которое будет поворачиваться. Необходимо поменять начальную точку вокруг которой будет происходить вращение спрайта.
Выберите компонент СпрайтКомпас. В окне свойств нажмите кнопку Mark Origin (Указать центр). В открывшемся окне перетащите маркер в центр изображения спрайта:
Нажмите кнопку OK, чтобы сохранить выбор.
Программирование компонентов
Перейдите в раздел Блоки.
После запуска приложения нужно разместить СпрайтКомпас в центре холста. Создадим для этого собственный блок-процедуру с именем разместить_компас. Перейдите в категорию Процедуры и перетащите в рабочую область следующий блок:
Стандартное имя процедура замените на разместить_компас. Поместите внутрь блока-процедуры следующие команды:
Поделив ширину и высоту холста на 2, мы получим координату точки в центре экрана.
Это описание процедуры. Добавим вызов процедуры в обработчик события Инициализировать. Блок с вызовом процедуры возьмите в категории Процедуры:
Вызов процедуры запустит выполнение блоков внутри описания данной процедуры:
Процедуры могут иметь параметры. При вызове такой процедуры нужно указать значения аргументов, передаваемых в блок-процедуры.
Компонент СпрайтКомпас обладает свойством Курс, отвечающим за направление, в которое повёрнут спрайт. Создайте блок-процедуру повернуть_компас с параметром курс, для поворота спрайта в указанном направлении:
Составьте скрипт, который будет считывать текущий азимут и менять направление спрайта с помощью блока-процедуры повернуть_компас:
Широту и долготу выведем в компоненты НадписьШирота и НадписьДолгота:
Запустите приложение. Сравните реальное направление на север с тем, что показывает приложение. Попробуйте пройти с телефоном некоторое расстояние и проверьте, меняется ли значение широты и долготы.
Проект готов.
Задание № 2. QR-чат
Разработаем мобильное приложение с помощью которого пользователь может сканировать QR-коды с текстовыми сообщениями и создавать изображение с QR-кодом на основе указанного текста.
Для разработки понадобится компонент 
СканерШтрихКода.
Для создания QR-кода используем веб-API. Обратившись по адресу
мы получим изображение с QR-кодом в формате png. В коде будет закодирован текст указанный в параметре text. Параметры запроса записываются после знака вопроса.
Используем компонент Интернет, чтобы сохранить полученный файл и показать его в компоненте Изображение.
Создайте новый проект под названием QR_chat.
Проектирование интерфейса
Интерфейс экрана Screen1 содержит следующие компоненты:
Настройте свойства компонентов согласно следующей таблице:
| Компонент | Свойства |
|---|---|
| Screen1 | TitleVisible=нет галочки |
 ИзображениеQR |
Высота=250 pixels Ширина=Наполнить родительский |
| ГоризонтальноеРасположение |
Ширина=Наполнить родительский |
 ТекстСообщение |
Ширина=Наполнить родительский Подсказка=Ваше сообщение |
 КнопкаОтправить |
Текст=Отправить |
 КнопкаСканировать |
Ширина=Наполнить родительский Текст=Сканировать |
| НадписьРезультат |
ЖирныйШрифт=есть галочка РазмерШрифта=20 |
| СканерШтрихКода1 |
UseExternalScanner=нет галочки |
 ИнтернетQR |
НазваниеФайлаОтвета=qr.png СохранитьОтвет=есть галочка Timeout=5000 |
Программирование компонентов
Перейдите в раздел Блоки.
Добавьте запуск сканера QR-кода по нажатию кнопки КнопкаСканировать:
Перед вызовом сканеры мы убираем с экрана текст предыдущего сканированного сообщения.
Как только код отсканирован, возникает событие ПослеСканирования. Добавьте скрипт, который выведет результат сканирования в компонент НадписьРезультат:
Запустите приложение. Нажмите кнопку Сканировать и наведите камеру на следующий QR-код:
На экране телефона должен появится текст, зашифрованный в QR-коде.
Теперь будем генерировать QR-код на основе введённого пользователем сообщения. Чтобы сделать правильный запрос к веб-API, создадим собственный блок-функцию адрес_запроса с параметром сообщение.
Откройте категорию Процедуры и возьмите блок определения функции. От блока-процедуры он будет отличаться наличием соединителя для возврата в основной скрипт вычисленного значения (обозначен стрелкой):
Переименуйте блок-функцию в адрес_запроса и добавьте параметр сообщение:
Функция будет возвращать результат сложение двух строк:
и значения параметра сообщение:
Добавьте скрипт обработчик нажатия на кнопку КнопкаОтправить. С помощью блока-функции адрес_запроса сформируем URL, запроса и запустим его:
Вызов функции адрес_запроса работает следующим образом:
Через некоторое время после запроса, сервер отправит ответ в виде png-изображения. Компонент Интернет сохранит это изображение под именем qr.png (см. таблицу со свойствами). Составьте скрипт, который покажет полученный файл в компоненте Изображение:
Запустите приложение. Наберите текст сообщения в текстовое поле и нажмите кнопку Отправить. Через некоторое время на экране телефона должен появиться QR-код с закодированным сообщением. Попросите соседа отсканировать код с экрана вашего телефона и сравните результат скана с вашим сообщением.
Проект готов.
Задание № 3. Космический курьер
Космический курьер потерял уйму подарков в космосе. Помогите курьеру собрать подарки.
Игрок управляет движением ракеты с помощью сенсора ориентации. Наклон устройства приведёт к движению спрайта ракеты. Как только спрайт ракеты пересекается со спрайтом подарка, счёт увеличивается на единицу. Встряхнув телефон можно начать игру заново.
В этом задании используйте шаблон проекта с заранее настроенными компонентами и загруженными медиа-ресурсами.
Откройте шаблон проекта под именем asteroid_shablon.aia. Для этого выберите пункт меню Проекты - Импортировать проект (.aia) с моего компьютера:
В появившемся диалоге нажмите кнопку Выберите файл, выберите файл с шаблоном asteroid_shablon.aia, и нажмите кнопку OK:
После этого откроется шаблон приложения.
Содержимое шаблона
В медиабиблиотеке проекта находятся изображения ракеты и подарка, а также звук увеличения счёта:
В настройках проекта указано его название - Космический курьер. Это название будет показываться в списке приложений после установки. Для иконки приложения выбрано изображение raketa.png.
Интерфейс экрана Screen1 содержит следующие компоненты:
Свойства компонентов настроены согласно следующей таблице:
| Компонент | Свойства |
|---|---|
| Screen1 | TitleVisible=нет галочки ЦветФона=Чёрный ОриентацияЭкрана=Альбомный режим |
 Холст1 |
ЦветФона=Чёрный Высота=Наполнить родительский Ширина=Наполнить родительский |
 СпрайтКоробка |
Изображение=box.png |
 СпрайтРакета |
Изображение=raketa.png |
| НадписьСчет |
ЖирныйШрифт=есть галочка РазмерШрифта=25 Ширина=Наполнить родительский ЦветТекста=Белый ВыравниваниеТекста=центр |
 ЗвукПодарок |
Источник=pick.wav |
В этом шаблоне нет заранее созданных скриптов.
Программирование компонентов
Перейдите в раздел Блоки.
Создайте блок-процедуру разместить_ракеты. Блок будет принимать два параметра: наклон_x и наклон_y. Наклон телефона будет влиять на изменение координаты компонента СпрайтРакета. Также повернём нос ракеты в сторону расположения спрайта с подарком:
Добавьте обработчик события ОриентацияИзменена компонента СенсорОриентации. Каждый раз после изменения наклона телефона, будем вызывать блок-процедуру разместить_ракету:
Запустите приложение. Направление движения ракеты будет определятся тем, в какую сторону наклонён телефон. Нос ракеты должен быть всегда повёрнут в сторону спрайта с подарком.
Сейчас подарок не реагирует на столкновение с ракетой. Добавим скрипты, которые переместят подарок в случайную позицию после соприкосновения с ракетой.
Создайте блок-процедуру разместить_подарок, вызов которой перемещает спрайт в случайную точку холста:
Дополните существующий скрипт обработчика ОриентацияИзменена:
- Добавьте условный оператор.
- С помощью блока НакладываетсяНаДругой определяем соприкасаются ли два спрайта.
- Вызываем процедуру
разместить подарок, чтобы переместить его в новую позицию. - Воспроизводим звук
Запустите приложение. Передвигайте ракету, чтобы подобрать коробку. Когда два спрайта пересекаются, подарок должен переместиться в новую случайную позицию. Также воспроизводится звук.
Добавим подсчёт собранных подарков. Объявите глобальную переменную счёт:
Для изменения значения переменной и одновременного вывода значения в компонент НадписьСчёт, объявите блок-процедуру изменить_счёт с параметром значение:
Дополните существующий скрипт обработчика ОриентацияИзменена вызовом блока-процедуры изменить_счёт. Новое значение счёта будет равно старому, увеличенному на 1:
Запустите приложение. Теперь каждый раз после пересечения двух спрайтов, счёт должен увеличиваться на единицу.
Чтобы начать игру заново и обнулить счёт придётся завершить работу приложения. Добавим возможность сбросить счёт, встряхнув телефон.
Добавьте описание блока-процедуры старт_игры, который разместить подарок в новой случайной позиции, обнулит счёт и запустит вибрацию на 500 мс:
Вызывать блок-процедуру старт_игры будем в двух случаях: после запуска приложения и после события Вибрация компонента СенсорАкселерометра1:
Запустите приложение. После запуска приложения телефон должен завибрировать. Это означает, что произошёл вызов процедуры старт_игры. Подберите несколько подарков а потом встряхните телефон. Он должен снова завибрировать, а счёт сбросится до нуля.
Проект готов.
Задание № 4. Сейсмограф
Разработаем приложение, которое сможет построить график изменения усреднённого значения ускорения телефона.
Для измерения ускорения используем компонент 
СенсорАкселерометра. Для того чтобы построить график, используем два компонента - 
Chart (общие настройки графика) и вложенный в него компонент 
ChartData2D (данные для построения графика). Оба компонента находятся в категории Charts.
Создайте новый проект под названием Graphic.
Проектирование интерфейса
Интерфейс экрана Screen1 содержит следующие компоненты:
Настройте свойства компонентов согласно следующей таблице:
| Компонент | Свойства |
|---|---|
| Screen1 | TitleVisible=нет галочки ОриентацияЭкрана=Широкоформатный режим |
| Chart1 |
Высота=Наполнить родительский Ширина=Наполнить родительский |
| ChartData2D1 |
LineType=curved |
 Часы1 |
ТаймерВсегдаЗапущен=нет галочки ИнтервалТаймера=50 |
Программирование компонентов
Перейдите в раздел Блоки.
Сенсор ускорения проводит измерения по трём пространственным осям - x, y, z. Вычислим длину суммарного вектора ускорения (зелёная стрелка)1:
Длина суммарного вектора вычисляется по следующей формуле: \[ a = \sqrt{x^2+y^2+z^2} \]
Будем использовать суммарное значения для того, чтобы построение графика не зависело от направления движения телефона.
Длину вектора будем рассчитывать с помощью собственного блока-функции под именем скаляр. Функция будет принимать три параметра - x, y и z:
Составьте выражение, которое будет вычислять длину вектора:
Чтобы добавить третье слагаемое к блоку суммирования, нажмите на 
и перетащите третье слагаемое в шаблон блока:
Готовый блок-функция выглядит так:
Объявите глобальную переменную счётчик. Значение этой переменной будет служить координатой x для добавляемой к графику точки:
По событию таймера вычислим усреднённое значение ускорения и добавим новую точку к графику:
Запустите приложение. Попробуйте подвигать телефоном в разные стороны. График наглядно покажет изменение ускорения движения телефона, независимо от направления движения. Но сейчас все добавленные точки показываются на графике одновременно. Исправим это.
С помощью блока SetDomain компонента Chart можно изменить отображаемую область данных. На графике будут показываться точки, для которых выполняется следующее неравенство: \[ (счётчик - 200) \lt x \lt (счётчик + 200) \] Таким образом вместе с значением счётчика будет меняться отображаемая область графика.
Добавьте к существующему скрипту следующий блок:
Запустите приложение. Теперь на графике будут видны только те точки, что добавлены недавно.
Проект готов.