Окружение

Смартапы запускаются внутри WebView — компонента, отображающего веб-страницы внутри приложений.

Способы взаимодействия с устройствами​

Все устройства поддерживают голосовое управление с помощью AssistantNavigationCommand.
Кроме этого к устройствам можно подключиться с помощью приложения Салют и использовать его в качестве пульта. Управление устройствами с помощью приложения Салют возможно как голосовыми командами, так и жестами.

Чтобы поддержать управление с помощью пульта подпишитесь на события нажатия клавиш на клавиатуре и подключите библиотеку spatial-navigation.

Устройства поддерживают следующие способы управления:

  • SberBox - пульт;
  • SberBox Top - пульт и жесты;
  • SberPortal - сенсорный интерфейс, жесты, управление через приложения Салют;
  • приложение Салют - сенсорный интерфейс.

Для корректной навигации по экранам смартапа постройте дерево переходов с помощью History API.

Поверхности на которых загружается WebView​

Для определения типа устройства используйте утилиту detectDevice.

Разрешения:

  • SberBox top - 1920x1080 (fullHD);
  • SberBox - 1920x1080 (fullHD);
  • SberPortal - 1280x800.

Инсеты:
Панель асистента перекрывает часть WebView. Узнать параметры установленных инсетов можно с помощью действия insets (AssistantInsetsCommand), которое можно получить подписавшись на assistantClient.onData().

Сетка и devicesScale​

Документация для компонентов сетки.

Ширина сетки на устройствах:

  • SberPortal - 6 колонок;
  • SberBox - 12 колонок;
  • приложение Салют - 4 колонки.

Точка отсчета размерности — 16 пикселей.
Для SberPortal и SberBox deviceScale = 2, то есть точка отсчета размерности — 32 пикселя.

Влияние персонажей на тему​

Выбранный персонаж влияет на цветовую палитру ассистента. При смене персонажа происходит Assistant action - { type: 'character'} (AssistantCharacterCommand).

В зависимости от выбранного персонажа, при инициализации webview устанавливается фон соответсвтующий фон:

  • Cбер — градиент зеленого;
  • Афина — градиент синего;
  • Джой — градиент оранжевого.

Основные цвета персонажей:

  • Cбер — зеленый;
  • Афина — синий;
  • Джой — фиолетовый.

Подробнее о смене персонажа.