API Виджеты

Виджеты доступны только из API и не используются из обычного конструктора тура. Они работают в обычном вьювере, а так же в VR режиме.

В данный момент есть 3 виджета, которые вы можете показать пользователю: Сообщение (toast), Вопрос (askQuestion) и информационная панель (InfoPanel), которая находится постоянно на экране и может включать в себя разную информацию.

Toast-уведомления

ipano.toast(message | options)

Показывает короткое уведомление в центре экрана

ipano.toast("Готово");

ipano.toast({
  class: "success", // info | success | warning | error
  message: "Сохранено", // текст 
  duration: 3000 // продолжительность
});

Вопросы пользователю

ipano.askQuestion(config)

Открывает виджет с текстом и кнопками ответами, и возвращает вариант, который нажал пользователь.

const answer = await ipano.askQuestion({
  text: "Продолжить экскурсию?", //текст
  options: ["Да", "Нет"] // Варианты ответов - от 1 до 6
});

console.log(answer.index, answer.text);

В вопрос можно вставить изображение:

const answer = await ipano.askQuestion({
  text: "Что делаем дальше?", // текст вопроса
  photoMediaRef: "media:42", // ID медиа с изображением
  options: ["Идем дальше", "Остановиться"] // Варианта ответов - от 1 до 6
});

Формат ответа:

{
  index: 1, // номер ответа. Обратите внимание, нумерация идет с 1, а не с 0. 
  text: "Да" // текст кнопки на ответе.
}

Инфо-панель (верхняя панель)

Верхняя панель. Общий принцип такое - при инициализации, мы заранее указываем, сколько в ней мест. И в каждое место, мы можем записать определенный тип информации: текст, картинку или прогресс бар. Обратите внимание, что нумерация слотов начинается с 1, а не с 0.

ipano.getInfoPanel()

Возвращает текущее состояние панели.

{
  placeCount: 3, //количество мест
  places: [
    { type: "text", text: "Очки: 12" },
    { type: "image", src: "/media/example.jpg", title: "Фото", count: 1, maxCount: 5 },
    { type: "progress", value: 45, max: 100, percent: 45, label: "Прогресс", valueLabel: "45%" }
  ]
}

ipano.initInfoPanel({ places: 3 })

Создает или перенастраивает панель на фиксированное число слотов. Именно в момент создания, она появляется на экране.

ipano.clearInfoPanel()

Полностью очищает инфо-панель и удаляет ее с экрана

ipano.clearInfoPlace(placeIndex)

Очищает конкретный слот панели. Напомним, что нумерация идет 1.

ipano.setInfoText(placeIndex, text)

Заполняет слот текстом.

ipano.setInfoText(1, "Очки: 12");

ipano.setInfoImage(placeIndex, mediaRef, count, maxCount)

Добавляет изображение из медиа на слот.
count - сколько раз нужно добавить это изображение. Например, вам нужно добавить 2 звезды, тогда count указывается два.
maxCount - если оно больше чем count, то добавляются те же изображение, но полупрозрачные.
Допустим, вам нужно показать "2 звезды из 5", тогда count 2, а maxCount - 5. 2 звезды нарисуются обычными, а 3 полупрозрачными.
Чтобы просто добавить одно изобржаение, укажите count 1 и maxCount 1.

ipano.setInfoImage(2, "media:42", 1, 5);

ipano.setInfoProgress(placeIndex, value, options?)

Показывает прогресс-бар в слоте. value - это текущее значение, max - максимальное.

ipano.setInfoProgress(3, 45, {
  max: 100,
});