Персонализация приложений Вердж3Д — Софт Эйт Софт
Description: Как настраивать стили приложений Вердж3Д.

# Персонализация «Вердж3Д»-приложений

Используйте это руководство для создания индивидуальных приложений «Вердж3Д», ориентированных на вашу конкретную аудиторию.

- Введение в стилизацию интерфейса
- Заголовок и краткое описание страницы
- Расширенная стилизация
  - Настройка экрана загрузки
  - Стилизация аннотаций
  - Изменение кнопки полноэкранного режима
  - Стилизация диалога ошибки WebGL
  - Язык
  - Иконки
- Собственный интерфейс

#

## Введение в стилизацию интерфейса

Наряду с экраном, на котором отображается 3Д-часть, приложение «Вердж3Д» включает в себя дополнительные HTML-элементы для экрана загрузки, аннотаций, кнопки полноэкранного режима и др. Все эти элементы дополнены классами CSS, которые можно легко менять.

Самый простой способ сделать ваше приложение персонализированным — выбрать Standard Light или Standard Dark в диалоге создания приложения:

а затем использовать диалог настройки приложения:

#

## Заголовок и краткое описание страницы

Крайне важно назначать осмысленный заголовок и описание для вашего приложения.

Заголовок отображается на вкладке браузера, а также используется для названия созданной закладки с вашим приложением:

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

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

Длина заголовка не должна превышать 50-60 символов, в то время как для описания 120-160 символов будет вполне достаточно.

#

## Расширенная стилизация

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

Для более сложных персонализаций обратитесь к файлу src/style.css, расположенному внутри установочной папки «Вердж3Д». Не изменяйте этот файл, поскольку он скомпилирован прямо в «Вердж3Д». Вместо этого добавьте код стилей в основной CSS-файл вашего приложения. Например, если ваше приложение называется "My Awesome App", то вам следует изменить следующий файл (расположенный в папке приложений):

`my_awesome_app/my_awesome_app.css`

Кроме того, вы можете изменить классы CSS с помощью редактора пазлов. Смотрите описание пазла set css rule .

#

### Настройка экрана загрузки

Для модификации экрана загрузки измените следующие классы CSS:

- v3d-simple-preloader-background - для изменения фона всего экрана экрана загрузки.
- v3d-simple-preloader-container - для изменения элемента контейнера с изображением и полосой экрана загрузки. Переопределив этот класс, вы можете настроить положение и размер экрана загрузки.
- v3d-simple-preloader-bar - для изменения полосы загрузки.
- v3d-simple-preloader-logo - для изменения изображения экрана загрузки.

Например, если вам нужно сделать индикатор прогресса красным вместо синего по умолчанию, добавьте следующий код в основной CSS-файл вашего приложения:

`.v3d-simple-preloader-bar { background: red; }`

Чтобы изменить изображение экрана загрузки на другое:

`.v3d-simple-preloader-logo { background-image: url("ПУТЬ_К_ИЗОБРАЖЕНИЮ"); background-size: cover; }`

Замените ПУТЬ_К_ИЗОБРАЖЕНИЮ на фактический УРЛ вашего изображения, например my_company_logo.png.

Рекомендуемый размер изображения прелоадера — 120x120px.

Чтобы назначить пользовательское фоновое изображение вместо стандартного белого:

`.v3d-simple-preloader-background { background-image: url("ПУТЬ_К_ИЗОБРАЖЕНИЮ"); }`

С пазлами все три варианта настройки стиля будут выглядеть следующим образом:

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

#

### Стилизация аннотаций

Для стилизации аннотаций используйте следующие классы CSS:

- v3d-annotation — для изменения стиля значка аннотации.
- v3d-annotation-transparent — для изменения стиля полупрозрачных (загороженных) аннотаций.
- v3d-annotation-dialog — для стилизации всплывающего диалога аннотации.

Например, чтобы сделать аннотации квадратными с зеленым фоном:

`.v3d-annotation { border-radius: 0px; background: rgba(0, 255, 0, 0.8); }`

#

### Изменение кнопки полноэкранного режима

Вид кнопок полноэкранного режима управляется вашим приложением. Смотрите следующие классы в главном CSS-файле вашего приложения:

- fullscreen-button — для изменения стиля обоих кнопок (открытия и закрытия) кнопки полноэкранного режима.
- fullscreen-open — для изменения стиля кнопки открытия полноэкранного режима.
- fullscreen-close — для изменения кнопки закрытия полноэкранного режима.

Например, если вам нужно изменить стандартные изображения открытия/закрытия на что-то другое, измените следующие два класса:

`.fullscreen-open { background-image: url('PATH_TO_OPEN_IMAGE'); } .fullscreen-close { background-image: url('PATH_TO_CLOSE_IMAGE'); }`

#

### Стилизация диалога ошибки WebGL

Вы можете изменить вид диалога с ошибкой WebGL с помощью четырёх классов:

- v3d-webgl-error-container — для изменения стиля контейнерного элемента ошибки.
- v3d-webgl-error-image — для изменения изображения, расположенного выше сообщения об ошибке.
- v3d-webgl-error — для изменения стиля сообщения ошибки.
- v3d-webgl-error-link — для изменения стиля ссылки в сообщении об ошибке.

Например следующий CSS-код:

`.v3d-webgl-error { color: white; border-color: black; background-color: red; } .v3d-webgl-error-link { color: black; }`

сделает диалог ошибки похожим на этот:

То же самое с использованием пазлов:

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

#

### Язык

Измените следующий фрагмент в начале вашего основного HTML-файла, чтобы изменить язык приложения:

`<html lang="en">`

Смотрите здесь для получения списка возможных языков. Для русского языка просто замените en на ru.

#

### Иконки

Чтобы настроить иконку страницы, отображаемую в браузере (также известную как favicon), замените следующие файлы в директории media вашего приложения:

- favicon-48x48.png
- apple-touch-icon.png
- android-chrome-192x192.png
- android-chrome-512x512.png

Чтобы упростить дело, в интернете можно найти множество генераторов иконок.

#

## Собственный интерфейс

Лучший способ создать свой собственный интерфейс — это показывать набор HTML-элементов поверх 3Д окна (смотрите демо «Скутер» в качестве примера такого подхода).

## Остались вопросы?

Задайте их на нашем форуме!