Вступление
Недавно мы открылись миру (совершили coming out, так сказать) и опубликовали статью про наш скромный фреймворк (исходники на GitHub). После общения с заинтересовавшимися участниками (большое им спасибо!) мы пришли к выводу, что для раскрытия темы необходимо написать подобие туториала на каком-нибудь реальном примере. На сайте проекта есть раздел с уроками, но эти уроки скорее описывают специфические ситуации, нежели картину в целом. Вот почему мы решили написать небольшой гайд. Для реалистичности, по шагам опишем создание простого, но реального, проекта, который хорошо показывает портируемость решений из веба в SmartTV. И да, результат этого гайда уже доступен в LG Smart World для телевизоров на базе WebOS (вы можете найти это приложение по названию «Earth Online»). В этой статье мы описываем создание ровно такого же приложения для десктопных и мобильных браузеров.
Идея
Идея довольно проста: показывать виды Земли с борта МКС (за эту возможность надо благодарить NASA, а именно, проект High Definition Earth-Viewing System). Помимо видео, приложение будет показывать текущее положение МКС над Землей. Для этих целей мы воспользуемся сервисом Where the ISS at?. Приступим!
Начало
Создаем папку для нашего проекта:
$ mkdir earth-online
$ cd earth-online
Чтобы создать новый проект, нужно скопировать qmlcore в папку с проектом. Можно просто скачать и скопировать содержимое или склонировать с помощью GIT:
$ git clone git@github.com:pureqml/qmlcore.git
Чтобы поменьше писать руками, сгенерируем каркас приложения:
$ qmlcore/build --boilerplateПосле выполнения команды в папке проекта появится два новых файла:
- src/app.qml — PureQML код приложения
- .manifest — минимальный манифест, описывающий приложение
Папка src используется для хранения qml исходников проекта.
В app.qml, оставим только такой код:
Item {
anchors.fill: context; // растягиваем Item по размерам всего окна
}
Чтобы собрать приложение, нужно выполнить команду:
$ qmlcore/buildи если все прошло успешно, то в папке проекта появится новая папка build.web с результирующими файлами.
$ ls build.web/
flashlsChromeless.swf index.html modernizr-custom.js qml.app.min.js
На секунду отвлечемся и посмотрим, что это за файлы:
- index.html — полученная html-страница
- qml.app.min.js — полученный js файл, который загружается в index.html
- modernizr-custom.js — используемый кастомный modernizr файл
- flashlsChromeless.swf — файл, который используется для проигрывания видео с помощью флеша (буэ), в нашем случае он не нужен, но он автоматически добавляется в проекты web платформы.
Controls
Помимо qmlcore, необходимой и наиболее стабильной части проекта, есть еще отдельный модуль controls, в котором найдется много полезных компонент уже готовых к использованию. Для подключения этого модуля его также достаточно скопировать в src папки проекта или склонировать:
$ cd src
$ git clone git@github.com:pureqml/controls.git
Для нашего приложения как раз понадобится один компонент из controls, который позволит играть live stream видео с youtube, он так и называется — YouTube. Добавим его в app.qml:
Item {
anchors.fill: context; // растягиваем Item по размерам всего окна
YouTube {
anchors.fill: parent;
source: "https://www.youtube.com/embed/ddFvjfvPnqk?autoplay=1&controls=0&showinfo=0";
}
}
В результате, если открыть Index.html в браузере, то можно увидеть видео с МКС:
Карта
С видео разобрались. Теперь перейдем к местоположению станции. Так как для задачи достаточно отобразить позицию станции над Землей, то можно использовать просто картинку с развернутой поверхностью планеты и двигать точку по ней согласно текущим координатам (хотя в controls есть компонента YandexMap для работы с картами).
Мы подготовили картинку с картой Земли. Чтобы наша картинка, или любые другие ресурсы, попали в сборку, нужно создать специальную папку в корне проекта — dist:
$ mkdir distВсе содержимое этой папки будет копироваться после сборки в build.web. Добавим в dist картинку с картой:
$ mkdir dist/res
$ cp <path-to-map-image> dist/res
Если попробуете собрать проект сейчас, то увидите как в build.web появилась папка res с добавленной картинкой:
$ ls build.web/res/
map.png
Логика работы с карта у нас будет в отдельной компоненте, создадим новый файл для нее IssMap.qml в src и напишем следующий код:
Item {
anchors.fill: context; // компонента растягивается на весь экран
// картинка с картой
Image {
anchors.fill: parent; // растягиваем по размерам родителя
source: "res/map.png"; // путь к картинке
fillMode: Image.Stretch; // тип заливки, Stretch растягивает по размерам Image
// точка для обозначения позиции станции
Rectangle {
id: station; // id, по которому можно обращаться к компоненте
width: 30;
height: width; // высота равна ширине
radius: width / 2; // радиус, чтобы скруглить прямоугольник до круга
visible: false; // по умолчанию точку не видно
color: "red";
}
}
// метод для установки точки соответственно долготе long и широте lat
setPos(long, lat): {
// делаем точку видимой
station.visible = true
// все константы используются для преобразования из координат
// широты, долготы в координаты карты
station.x = (long + 180) * this.width / 360 - (this.width / 28.4)
station.y = (90 - lat) * this.height / 180 + (this.height / 19.45)
}
}
Теперь нам нужно получить координаты станции и установить точку в нужную позицию. Для этого воспользуемся API, о котором говорилось выше.
Для выполнения HTTP запросов в controls есть специальный объект Request, сделаем на его базе контрол для асинхронного запроса координат в файле IssRequest.qml в папке src:
Request {
// метод запроса координат
// callback - функция, которая будет выполнена в случае успешного запроса
call(callback): {
this.ajax({
url: "https://api.wheretheiss.at/v1/satellites/25544",
done: callback,
withCredentials: true
})
}
}
Теперь нужно сложить все в одно место и добавить еще текст с координатам станции. Назовем этот контрол OSD и создадим для него файл Osd.qml с кодом:
// WebItem - это обычный Item
// но с возможностью отслеживать hover и click события у мыши
WebItem {
property bool active: false; // объявим bool свойство - флаг отображения OSD
anchors.fill: parent;
opacity: active ? 1.0 : 0.0; // прозрачность в зависимости от флага active
// инстанциируем протокол
IssRequest { id: request; }
// инстанцируем нашу карту из IssMap.qml
IssMap { id: map; }
// текст о видимости Земли (на темной стороне или освещенной)
// прижимаем к правому нижнему краю
Text {
id: visibilityText;
anchors.right: parent.right;
anchors.bottom: parent.bottom;
anchors.margins: 10;
font.pixelSize: 24;
color: "#fff";
text: "Earth visibility: -";
}
// текст с координатами: долготой и широтой
// текст прижимаем к левому нижнему краю
Text {
id: positionText;
anchors.left: parent.left;
anchors.bottom: parent.bottom;
anchors.margins: 10;
font.pixelSize: 24;
color: "#fff";
text: "Lon: -<br>Lat: -"; // в текст можно вставлять html теги
}
// таймер для повторения запросов
Timer {
running: parent.active; // таймер работает пока активен OSD
triggeredOnStart: true; // таймер срабатывает при старте
interval: 10000; // интервал повторения 10 секунд
repeat: true; // таймер повторяется
// обработчик срабатывания, зовем метод updatePositionRequest
onTriggered: { this.parent.updatePositionRequest() }
}
// делаем запрос координат, в случае успеха парсим результат
// передаем его в doUpdatePosition
updatePositionRequest: {
var self = this
request.call(function(res) {
var data = JSON.parse(res.target.response)
if (data)
self.doUpdatePosition(data)
else
log("Request error")
})
}
// заполняем полученные данные
doUpdatePosition(data): {
var long = parseFloat(data.longitude) // долгота
var lat = parseFloat(data.latitude) // широта
// заполняем текст с координатами станции
positionText.text = "Lon: " + Number((long).toFixed(1)) + "<br>Lat: " + Number((lat).toFixed(1))
// заполняем текст видимости data.visibility возвращает строку 'eclipsed' или 'daylight'
visibilityText.text = "Earth visibility: " + data.visibility
map.setPos(long, lat) // передаем координаты станции карте
}
// объявляем анимацию на изменение прозрачности
// время анимации 300 мс
Behavior on opacity { Animation { duration: 300; } }
}
Теперь нужно разместить OSD в нашем приложении поверх видео и отображать его, скажем, по клику мыши на экране и также (по клику) закрывать. Теперь app.qml примет следующий вид:
Item {
anchors.fill: context;
Youtube {
anchors.fill: parent;
source: "https://www.youtube.com/embed/ddFvjfvPnqk?autoplay=1&controls=0&showinfo=0";
}
Osd {
// обработчик клика мыши
// инвертируем флаг отображения OSD по клику
onClicked: { this.active = !this.active }
}
}
Собираем проект, открываем в браузере build.web/index.html, кликаем по экрану и OSD появляется с анимацией по прозрачности!
Последние штрихи
Попробуем внести еще небольшое улучшение: было бы здорово, если бы текст с координатами был выровнен:
для решения проблемы можно использовать какой-нибудь monospace шрифт.
Чтобы добавить новый шрифт, нужно подредактировать выходной index.html файл. Помните, как мы использовали папку dist, чтобы добавлять файлы в build.web после сборки? Важным моментом является именно тот факт, что копирование происходит после сборки, и таким образом, мы можем переопределить index.html. За основу возьмем текущий index.html:
$ cp build.web/index.html distи добавим линк на новый шрифт. После небольших правок dist/index.html будет выглядеть вот так:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link href="https://fonts.googleapis.com/css?family=Space+Mono" rel="stylesheet" type='text/css'>
<script src="modernizr-custom.js"></script>
</head>
<body style="font-family: ’Space Mono’">
<script src="qml.app.min.js"></script>
</body>
</html>
Текст с координатами примет вот такой вид:
Заключение
Конечно же, это приложение не раскрывает всех возможностей фреймворка, но дает наглядное представление о том, как быстро и непринужденно написать single page приложение на QML, код которого можно портировать на SmartTV платформы.
Ссылки
- High Definition Earth-Viewing System — трансляции с МКС
- Where the ISS at? — сервис предоставляющий API для получения координат станции
- earth-online — исходный код из этого гайда
- PureQML — страница проекта PureQML
Автор: comrat
