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