Стилизация проекта с помощью CSS и пользовательские шрифты в Pano2VR

 Работа в Pano2VR | Веб-кодинг в Pano2VR, Редактор оформления (Skin editor)
 28.10.2021 |  08:50 |  1.4k |  5.0/1 |  02.11.2023
 Время на чтение: ... |  Комментировать |  Напечатать
Содержание статьи
 Пользователи Pano2VR
В своем сообществе ВКонтакте работает чат, созданный специально для пользователей конвертера панорамных изображений Pano2VR. В нем мы решаем проблемы, возникающие в работе с Pano2VR, обмениваемся опытом и просто общаемся.
 Нас уже ...
Возможно, Вас заинтересуют эти материалы
Самое читаемое
При помощи CSS-стилей можно стилизовать интерактивное оформление виртуального тура. CSS значительно расширяет дизайнерские возможности редактора оформления.

Стилизация проекта с помощью CSS и пользовательские шрифты в Pano2VR

Изображение

Вступление

При помощи CSS-стилей можно стилизовать интерактивное оформление виртуального тура. CSS значительно расширяет дизайнерские возможности редактора оформления.

Когда-то на заре создания виртуальных туров, используя четвертую версию Pano2VR я уже занимался стилизацией оформления с помощью CSS. Тогда в Pano2VR не существовало функционала для работы со стилями. Приходилось после экспорта открывать в редакторе файл skin.js и вставлять названия классов и встроенные стили в исходный код файла.

С пятой версии появилась полноценная поддержка работы со CSS-стилями. Об этом мой сегодняшний материал.

Подключение внешней таблицы стилей

В настройках шаблона HTML есть возможность подключить файл внешней таблицы стилей (Опция «Include external CSS file»), который заранее подготовлен и находится в определенном месте на диске ПК, например, в папке проекта. При экспорте файл будет скопирован в выходную папку и подключен в исходном коде файла index.html.

Настройки HTML-шаблона.

Классы и встроенные стили

При подключении внешней таблицы стилей предполагается, что компонентам оформления уже назначены классы. Они назначаются в редакторе оформления в группе свойств «Advanced». В свойстве «СSS Classes» необходимо перечислить, разделяя пробелами, все классы для конкретного компонента аналогично тем, что прописаны в файле style.css.

Настройка CSS классов.

В текстовом компоненте свойство «Text» может содержать произвольную html-структуру. В ней также можно указать классы и стили для каждого элемента.

Ввод произвольной html-структуры в свойстве «Text».

В этой группе настроек при необходимости можно прописать встроенные стили, которые дополнят уже предопределенные стили Pano2VR.

В свойстве «CSS Styles» указываются стили, применяемые к самому элементу, а в свойстве «CSS Styles Inner Element» стили для внутреннего элемента. Последнее свойство есть не у всех элементов.

Настройка CSS-стилей.

HTML-cтруктура большинства компонентов редактора оформления сформирована из двух div-блоков. Для текста внешний блок – прямоугольник, а внутренний блок – элемент содержащий текст. В исходном коде это выглядит следующим образом:

<div class="ggskin ggskin_text" style="/*имеющиеся стили*//*стили из свойства CSS Styles*/">
 <div style="/*имеющиеся стили*//*стили из свойства CSS Styles Inner Element*/">Введенный текст</div>
</div>

Подключение внешних стилей по URL и внедрение стилей

В группе настроек «External Files» можно подключать CSS по URL-адресу ресурса. Это могут быть таблицы стилей, лежащие по определенному адресу на вашем или другом сайте, а также локальные файлы, если проект создается для локального использования.

Подключение внешнего файла CSS-стилей.

Свойство оформления «Embedded Stylesheet» позволяет внедрить описания стилей в файл оформления skin.js, в специальную функцию, которая при открытии виртуального тура произведет вставку стилей в секцию head html-страницы. Это не свойство компонента. Нажмите на пустом месте холста, чтобы отобразились настройки оформления.

Таким образом Pano2VR дает выбор между подключением css-файла в настройках html-шаблона и внедрением содержимого css-файла в js-файл оформления.

Внедрение CSS-стилей в оформление.

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

Многострочный редактор.

Использование пользовательских шрифтов

Если вы хотите использовать в проекте необычный шрифт, то CSS позволяет это сделать двумя способами.

Способ 1. Правило @font-face

@font-face {
  font-family: customFontFamilyName;
  src: url(fonts/brusher.ttf);
}

.hotspot-title {
 font-family: customFontFamilyName;
 font-size: 20pt;
 margin: 10px 0 0 0;
 line-height: 14px;
 letter-spacing: -1px;
 text-shadow: 1px 1px 0px black;
}

В свойстве font-family определяется пользовательское имя семейства шрифтов, которое будет использоваться в аналогичном свойстве при создании стиля.

В свойстве src указывается местоположения при помощи функций url() и/или local() одного файла или нескольких файлов, разделяя запятыми.

Способ 2. Правило @import

@import url('https://fonts.googleapis.com/css?family=Roboto');

.hotspot-descr {
 font-family: 'Roboto';
 font-size: 9pt;
 margin: 10px 0 0 0;
 line-height: 14px;
 letter-spacing: -1px;
 text-shadow: 1px 1px 0px black;
 white-space: break-spaces;
}

Применив эти два способа получим результат как на изображении ниже.

Стилизованный хотспот.

Полезные ссылки

На этом у меня все. На ваши вопросы, если такие возникнут, отвечу в комментариях или в беседе Пользователей Pano2VR. Следующий материал будет о применении пользовательских скриптов в редакторе оформления.

Теги:  Pano2VR, Pano2VR6, CSS, HTML, Pano2VR5, skin editor
Об авторе

Сергей Дишук, фотограф-любитель и профессионал. Занимаюсь пейзажной, архитектурной, интерьерной, репортажной фотосъемкой, а также другими видами фотосъемки. Связал жизнь с IT, увлекаюсь программированием и разработкой программного обеспечения.

Занимаюсь панорамной фотосъемкой и созданием виртуальных 3D-туров более 8-ми лет. Имею опыт работы в программах Pano2VR, PTGui, Photomatix, Adobe Photoshop, Lightroom и других.

Реализовал некоторые фичи в проектах Pano2VR задолго до их официального появления. За всё время помог разобраться с Pano2VR более 5k пользователям, из них более 200 лично.

Оцените материал
Поделитесь материалом в социальных сетях
Материалы по теме статьи

У Вас остались вопросы по статье? Задавайте. Буду рад ответить на них в комментариях.

Если этот материал совсем не то, куда Вас привел поисковик, попробуйте выполнить поиск по сайту или введите запрос в строку ниже. Также Вы можете посмотреть другие материалы в разделе статьи.

Нет комментариев
Сейчас просматривают
Связь со мной и соцсети
Telegram
Viber
LinkedIn
ВКонтакте
 
Одноклассники
 
Instagram
 
Опрос
Оцените ваши впечатления от сайта?
Всего проголосовавших: 40
Онлайн всего: 7
Гостей: 7
Пользователей: 0