Как мы делали интерфейс трансляций соревнований по вертолётному спорту
В мае этого года нас попросили помочь Федерации вертолётного спорта России в работе над системой электронного судейства.
Соревнования по вертолётному спорту состоят из нескольких упражнений. Одним из самых сложных является «Полёт на точность». Задача состоит в том, чтобы пролететь на вертолёте заданный отрезок (коридор) и пронести закреплённый на вертолёте груз (маяк) в рамках этого коридора, не пересекая маяком границы ни по высоте, ни по ширине за установленное время. Помимо этого, соревнующаяся команда должна выполнить ряд элементов — различные повороты, разворот на 360º, пролёт боком, хвостом вперёд и др.
Перед стартом у каждой команды есть 300 очков. Это максимальный результат, который может получить команда, если не допустит ни одного штрафа. Результат считается по формуле: 300 очков минус сумма штрафов.
Были две причины в создании системы электронного судейства:
- Минимизировать человеческий фактор — сейчас судьи определяют на глаз, пересёк ли вертолёт маяком границы коридора или нет. Понятно, что таким образом возникает очень много ошибок, неточностей и споров.
- Зрителям скучно — они находятся на расстоянии 300 м от площадки, не видят и не понимают, насколько успешно команда проходит упражнение.
Плюс, нам предстояло решить две глобальные проблемы:
Отсутствие реальных данных — на момент разработки интерфейса система трекинга ещё не работала, и мы не могли получить координаты маяка в трёхмерном пространстве.
Отсутствие отправной точки и полная неизвестность —мы решали уникальную задачу, подобных аналогов мы так и не нашли.
Сбор информации
Солнечным майским днём мы слетали на аэродром Конаково и целый день наблюдали за соревнованиями в качестве зрителей. Нам было важно понять, что видят зрители во время выполнения упражнений, что происходит в зале для брифинга и за его пределами.
Мы пересмотрели десятки различных интерфейсов трансляций от авиамодельного до яхтенного спорта, изучая принципы отображения на экране тех или иных данных.
Мы выучили наизусть внушительного размера регламент соревнований с правилами выполнения упражнения. «Полёт на точность» насчитывает несколько десятков штрафов, было необходимо, чтобы интерфейс учитывал малейшее условие — например, незакрытую форточку вертолёта:
И, конечно же, у нас был наставник и незаменимый помощник в вопросах прохождения упражнения—Андрей Орехов, мастер вертолётного спорта России, который, кажется, может пройти этот этап с закрытыми глазами. Благодаря Андрею мы узнавали те нюансы, про которые нельзя было прочитать.
Для того чтобы собрать все требования и их задокументировать, мы разделили трансляцию упражнения на компоненты и описали каждый из них:
Первый подход
Мы определили, что видеотрансляция является главным действующим лицом, а графика вторична. С другой стороны, графика должна быть самостоятельной и передавать всю суть происходящего.
Основными компонентами нашей графики стали блоки, отображающие положение маяка относительно коридора.
Первый блок отвечает за высоту коридора, второй — за ширину. У каждого блока есть свой собственный счётчик штрафа, который включается, если маяк находится вне заданного коридора.
Каждая десятая доли секунды нахождения маяка вне коридора — одна десятая очка штрафа.
Первое приближение выглядело так:
По статичным картинкам было сложно судить о поведении интерфейса, поэтому мы решили параллельно разработать интерактивный прототип. Мы хотели убедиться, что всё происходящее на экране будет понятно даже зрителю, который смотрит трансляцию первый раз и не знаком с правилами упражнения.
Прототип
Поскольку система трекинга маяка только разрабатывалась, у нас не было реальных данных, которые мы могли бы использовать для создания прототипа.
Чтобы имитировать полёт вертолёта в трёхмерном пространстве мы использовали контроллер Leap Motion. Это небольшое устройство, который считывает движение ладони в пространстве и передаёт её координаты. К счастью, Leap Motion SDK содержит JavaScript-библиотеку, которую мы подключили к Framer.
Интеграция прошла успешно, мы получили контроль высоты для первого блока и ширины для второго:
Мы взяли записанное заранее видео тренировки и наложили поверх наш интерфейс. Так выглядело первое приближение в динамике:
Мы показали наши первые мысли — основная идея с двумя блоками выглядела удачно, поэтому мы решили остановиться на ней, проработать более детально различные состояния и сделать графику более читаемой с большого расстояния.
Следующие шаги
Мы добавили общий счётчик очков, сделали блоки круглыми, внешне приблизив их к приборам в кабине вертолёта; сделали размер блоков меньше, определив, что предыдущий размер перекрывал изображение самого вертолёта.
Очень важным оказался комментарий Андрея по поводу вылета вертолёта за рамки коридора — не более полуметра. Поэтому мы смогли рассчитать оптимальный размер блоков и вертолёта таким образом, чтобы покрывать 99.9% случаев.
На предыдущих этапах мы перемещали вертолёт внутри блока, оставляя коридор неподвижным. Теперь вертолёт оставался на месте, а двигался сам коридор. Это сильно повысило «читаемость» блоков и интерфейса в целом.
И самое главное — во время ошибки вместо красного маяка мы стали использовать подсветку той стороны коридора, где произошла ошибка. Стало совсем наглядно и, что важно, заметно даже боковым зрением.
Мы добавили счётчик штрафа для каждой стороны. В блоке контроля ширины коридора их оказалось четыре штуки, поскольку это блок отвечал не только за ширину коридора, но и за разворот вертолёта на площадке 1×1 м, где возможен вылет за пределы по 4 сторонам квадрата.
Мы проработали редкие случаи вылета вертолёта за пределы короидора более чем на полметра. После небольшой косметики блоки стали выглядеть так:
Это не всё
Кроме графики, отображающей полёт по коридору, нужна была графика выполнения поворотов. Поворот на 360º в заданном направлении должен выполняться в пределах площадки 1×1 м, при этом поворот должен быть выполнен не менее чем за 15 секунд. В начале выполнения поворота запускается таймер (полный круг — 15 сек), отображающий нужное направление поворота. Если экипаж выполняет поворот слишком быстро — это сразу отображается на экране:
На финишной прямой
Отдельным этапом упражнения является приземление. На посадочной площадке отмечена линия шириной 5 см, на которую должен попасть вертолёт специальными метками на шасси (ширина метки 1 см).
Судьи определяют положение меток относительно линии с помощью рулетки, поэтому этот процесс занимает некоторое время, преждем чем появиться на экранах.
Чтобы зрители не скучали во время замеров, мы добавили анимированных трек прохождения всего упражнения с подсветкой допущенных ошибок.
После замеров мы выводим результаты на экран:
После чего показываем текущую позицию выступившей команды:
И даём итоговую таблицу:
Результат
На разработку и документацию первой версии интерфейса у нас ушло ровно 5 недель. Каждую неделю мы показывали продвижение вперёд и объясняли какие решения были приняты и почему.
За короткое время нам удалось создать MVP, который отвечал всем изначальным требованиям. Помимо этого, интерфейс трансляции несёт две важные функции:
Является обучающим для зрителей, которые не знакомы или плохо знакомы с правилами упражнения.
С помощью интерфейса команды могут отслеживать свои ошибки и делать соответствующие выводы на будущее.
Мы определи, что финальные стилистические решения интерфейс сможет обрести после того, как мы разработаем графику для других пяти упражнений соревнования. Впереди ещё много работы :)
Финальное видео:
