Back to documentation index

Оформление, экраны, Layout и DashKits

HobDrive позволяет настраивать главный интерфейс на нескольких уровнях: от простых переключателей в приложении до собственных XML-экранов и полноценных DashKit-пакетов с графикой, темами и несколькими панелями.

Эта статья - обзор. Она помогает выбрать правильный способ настройки и понять, где находятся подробные инструкции. Полный справочник по тегам и атрибутам вынесен в спецификацию языка разметки HobDrive.

Что можно настраивать

В зависимости от задачи можно менять:

Если вы настраиваете HobDrive впервые, начните с интерфейсных настроек. XML и DashKits нужны тогда, когда обычных настроек уже не хватает.

Уровни настройки

1. Настройки главных экранов

Откройте Экраны -> Настройки -> Настройки главных экранов.

Через этот диалог можно:

Подробно: Настройка главных экранов.

2. Пользовательский экран user1.layout

Раздел Ваш экран сохраняется в файл user1.layout. Обычно его не нужно редактировать вручную: приложение само создает XML, когда вы выбираете макет, датчики и дополнительные параметры ячеек.

Через Экспорт XML и Импорт XML можно сохранить, перенести или быстро обменяться пользовательским экраном.

user1.layout хорошо подходит для одного личного экрана: например “город”, “трасса”, “диагностика”, “температуры” или “гибрид”.

3. Ручной user.layout

Файл user.layout - продвинутый способ добавить свои секции и изменить существующие экраны. Он загружается из пользовательских настроек и не должен перетираться обновлениями приложения.

Через user.layout можно:

Минимальный пример:

<ui>
  <section name="My Screen" fixed="true">
    <grid rows="25,,30" cols="30,,30">
      <item id="FuelLevel" precision="1"/>
      <item id="FuelEconomy_trip" size="large"/>
      <item id="BatteryVoltage" size="medium" period="5000"/>
      <item id="RPM"/>
      <item id="Speed" size="giant"/>
      <item id="CoolantTemp"/>
      <item id="IntakeAirTemp"/>
      <item id="DistanceRun"/>
      <item id="DateTime" custom-units="timesec" units="none"/>
    </grid>
  </section>
</ui>

Подробности по синтаксису: спецификация Layout.

4. user.gauge и оформление датчиков

layout описывает, какие элементы находятся на экране и где они расположены. gauge-настройки описывают, как эти элементы выглядят: размеры, цвета, рамки, графики, декораторы, картинки и наследуемые стили.

Важно: user.gauge может изменяться самим HobDrive. Приложение записывает туда настройки из диалога настройки вида сенсора, который открывается через долгое нажатие на датчик. Поэтому ручное редактирование user.gauge возможно, но делать его нужно осторожно: изменения из интерфейса и ручные правки должны не конфликтовать друг с другом.

На практике часто используется связка:

Для простых изменений обычно достаточно атрибутов прямо в item: size, precision, period, units, description, inherit, colspan, rowspan.

Подробно про настройку вида датчика через интерфейс: Настройка главных экранов.

5. DashKits

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

Официальный репозиторий: hobdrive/hobdrive-dashkits.

Шаблон для создания своего репозитория: hobdrive/template-dashkits.

В приложении DashKits открываются через Настройки -> Настройки Дэш Панелей. В диалоге есть:

По умолчанию HobDrive смотрит в hobdrive/hobdrive-dashkits, ветка main. Можно указать свой репозиторий в формате owner/repo, если вы делаете собственные панели.

Как устроен DashKit

Типичный DashKit лежит в отдельной папке и содержит:

my-dashkit/
  info.json
  user.layout
  images/
  README.md

info.json описывает пакет:

{
  "name": "My DashKit",
  "version": "1.0.0",
  "description": "Custom dashboard for HobDrive",
  "author": "Your Name"
}

user.layout содержит обычную XML-разметку HobDrive. images/ хранит картинки, SVG и другие ресурсы, на которые ссылаются элементы макета.

При установке HobDrive скачивает папку DashKit из GitHub и кладет ее в пользовательские настройки как отдельную override-* директорию. Благодаря этому несколько пакетов могут сосуществовать, обновляться и удаляться отдельно.

Что выбрать

Практические советы