Создаем всплывающие подсказки к кнопкам и другим элементам в Pano2VR

Опрос:

С каким функционалом Pano2VR у вас возникают трудности?
Всего проголосовавших: 18

 Групповой чат для пользователей Pano2VR   |  31

В своем сообществе ВКонтакте я недавно создал беседу для пользователей Pano2VR.

Беседа создана специально для пользователей конвертера панорамных изображений Pano2VR. В ней мы решаем проблемы, возникающие в работе с Pano2VR, обмениваемся опытом и просто общаемся.

В беседе публикуются ссылки на новые материалы моего сайта, связанные с созданием панорам и виртуальных туров, а также в автоматическом режиме работает информатор о новых материалах блога Garden Gnome Software и релизах программы Pano2VR.

Содержание статьи:

Самые читаемые статьи за всё время
Подсказки полезны в случае, когда кнопка не имеет заголовка. Дополнительную информацию об элементе управления пользователь может получить из всплывающей подсказки.

Создаем всплывающие подсказки к кнопкам и другим элементам в Pano2VR

Изображение

Ни один серьезный интерфейс управления обходится без всплывающих подсказок, этих маленьких окошек (тултипов) с поясняющим текстом, которые появляются при наведении курсора на элемент, например, кнопку. Такие подсказки полезны в случае, когда кнопку не имеет заголовка, только иконку, по которой не всегда понятно предназначение кнопки. Благодаря подсказкам пользователь может узнать дополнительную информацию об элементе.

Сегодня вы узнаете, какие виды всплывающих подсказок можно создать средствами редактора оформления (Skin Editor) Pano2VR.

Подсказка рядом с элементом

Создадим простую подсказку для кнопки. В роли кнопки будет текстовый компонент.

  1. Добавим текстовый компонент для подсказки, зададим ему размеры и расположим его рядом с кнопкой в том месте, где должна появляться подсказка.
  2. Введем текст подсказки. Для многострочной подсказки включите опции свойства Align Word wrap (для перевода строк) и Auto Size (для изменения высоты элемента) и задайте ширину элемента, которая будет являться максимальной.
  3. Сделаем элемент подсказки вложенным (дочерним) в элемент кнопки с помощью перетаскивания в дереве объектов (Строку «Text 2» на строку «Text 1»). Это необходимо для сохранения расстояния относительно родительского элемента на случай изменения окна проигрывателя, а также для условия логического блока (пункт 5).
  4. Отключим видимость для элемента подсказки, чтобы подсказка изначально была скрыта.
  5. Для отображения подсказки создадим логический блок к свойству Visible. Подсказка отобразиться, как только курсор мыши будет находиться над родительским элементом.
  6. Готово. Смотрим, что получилось.

Следование за курсором

Модифицируем подсказку, чтобы она не только появлялась при наведении на кнопку, а еще и следовала за курсором.

Для этого добавим несколько модификаторов для элемента подсказки.

Всё бы ничего, но при таких значениях подсказка будет находиться далеко от курсора. Её координаты x, y будут увеличены на значения координат x, y кнопки. Поэтому здесь необходим поправочный коэффициент Offset (Смещение). Для координаты x возьмем значение, близкое к x элемента кнопки со знаком минус, а для y тоже со знаком минус значение y подсказки.

Скрытие по таймеру

Модифицируем подсказку, чтобы она отображалась определенное время, затем скрывалась независимо от того находится ли курсор над кнопкой.

Больше не понадобится логический блок к свойству Visible, который был необходим на предыдущих этапах.

  1. Добавим компонент Таймер и установим следующие параметры свойств: Type – Manual, Repeat – One Time.
  2. Для элемента кнопки создадим сценарий активации таймера (Действие «Set Value» со значением 5) при наведении курсора мыши (Событие «Mouse Enter»). Значение 5 в данном случае количество секунд, это есть время от момента отображения подсказки до её скрытия.
  3. Для элемента «Таймер» создадим следующие сценарии. Activate – активация, начало отсчета, Deactivate – конец отсчета.

Бонус

В примерах роль элемента, для которого создается подсказка, будет играть компонент Прямоугольник.

Подсказка перед элементом

Подсказка, которая занимает всю площадь элемента.

  1. Создадим текстовый элемент и зададим ему такие же размеры и положение, как у прямоугольника.
  2. Введем текст подсказки.
  3. Отключим свойство Visible и создадим логический блок для элемента подсказки.

Выезжающая подсказка

Подсказка, которая выезжает из-за любой из границ элемента. На примере рассмотрим выезд из-за нижней границы.

  1. Создадим текстовый компонент подсказки и расположим его у нижней границы прямоугольника. Установим его ширину равную ширине прямоугольника, а высоту не более высоты прямоугольника, сколько необходимо для отображения всего текста подсказки. При этом в дереве объектов элемент подсказки должен находиться выше прямоугольника.
  2. Поместим все компоненты в контейнер. Установим размеры контейнера равными размерам прямоугольника.
  3. Включим свойство контейнера Masked для скрытия элементов, находящихся за пределами границ контейнера. Это работает аналогично свойству CSS overflow: hidden.
  4. Для свойства Position элемента подсказки создадим логический блок. Значение координаты x оставим без изменения, а значение y определим по формуле
    Y = высота контейнера – высота подсказки
    . При таком условии нижний край подсказки будет совпадать с нижним краем прямоугольника.
  5. Для плавной анимации включим параметр Transition.

Демо примеры


Loading...

 Редактор оформления (Skin editor) |  158 |  06.12.2021  08:10 |
Теги: кнопки управления, всплывающие подсказки, действия, skin editor, Pano2VR, Pano2VR5, Модификаторы, логические блоки, текстовый компонент, редактор оформления, Pano2VR6
Рейтинг: 0.0 / 0 | Оцените материал:

Об авторе:

Сергей Дишук, фотограф-любитель. Занимаюсь пейзажной, архитектурной, интерьерной, репортажной фотосъемкой, а также другими видами фотосъемки. Связал жизнь с IT, увлекаюсь программированием и разработкой программного обеспечения. Занимаюсь панорамной фотосъемкой и созданием виртуальных 3D-туров более 7-ми лет. Имею опыт работы в программах Adobe Photoshop, Lightroom, PTGui, Pano2VR.

У Вас возникли вопросы по статье? Задайте их в комментариях ниже и получите развернутый ответ. Если данный материал не соответствует Вашему поисковому запросу, попробуйте воспользоваться поиском или найдите нужный материал в разделе статьи.

Поделиться в социальных сетях:

Возможно, вам будет интересно:

Популярные материалы за последние 3 дня:

Нет комментариев

Связь со мной и соцсети
 +375(29)738-38-38
 Telegram
 Viber
 ВКонтакте
 Одноклассники
 Instagram
 Facebook
 LinkedIn
 YouTube
 TikTok
Внешние ресурсы

Если желаете получать информацию о новых материалах сайта (статьи, новости, панорамы и туры) или следить за моим творчеством (фотография в целом), подпишитесь на мои сообщества в социальных сетях.

Сообщество на ВКонтакте
Сообщество на Одноклассники
Сообщество на Facebook

Фотографии и панорамные изображения публикую на этих ресурсах:

Профиль на 360cities.net
Профиль на 1panorama.ru
Профиль на fotokto.ru
Профиль на photocentra.ru
Профиль на photosight.ru

Ссылки на мои проекты:

Проект «Мозырь 360°»
Популярные страницы