| Главная | English | Russian |
Этот документ собирает теги, атрибуты и опции, используемые в файлах макетов (layout) интерфейса HobDrive
Цель: дать краткую и практичную справку для создания и редактирования UI-раскладок (панели, экраны ЭБУ, гибрид/GPS панели и т.д.).
section
itemSensorList и автогенерируемые панелиuser.layout)type в dashkitsui, section, grid, item, union, stack-vertical, stack-horizontal и т.д.)if, размещение в сетке, декораторы и атрибуты виджетовui — корневой элемент файла layout. Содержит элементы section и другие конструкции макета.
include — позволяет встраивать другой файл layout или фрагмент. Атрибуты:
file — относительный путь к включаемому файлу (например, file="default-tripcomp.layout").if — опциональное условие, контролирующее, обрабатывается ли включаемый файл (та же синтаксис выражений, что и section if).Пример:
<include file="default-tripcomp.layout" if='${!sexists("GasTrigger")}'/>
sectionОпределяет логический блок экрана/страницы. Общие атрибуты:
name — человекочитаемое имя секции (используется в списках UI).fixed — true/false (зафиксирована ли секция в навигации).if — условное выражение (имя датчика или выражение). Секция показывается только если условие истинно. Примеры: if="Oxygen_b1s1", if="PortraitLayout", if="Renault_01_11103.ControlModuleVoltage".class — подобие CSS-класса, используемого системой для применения предопределённого поведения (например, SensorList).ns — namespace для фильтрации датчиков при использовании SensorList.exclude — regex для исключения ID датчиков в автогенерируемых списках сенсоров.maximize-focus — (из changelog) true/false убирает дополнительное управление при фокусе.controls — autohide или другие значения для управления видимостью кнопок UI.Примеры:
<section name="GPS">
...
</section>
<section name="Fuel Trims" if="STFT1">
...
</section>
config элементыconfig — объявляет конфигурируемые в UI опции, которые появляются в диалогах настроек. Типичные атрибуты:
id — уникальный идентификатор, доступный в выражениях макета (например, ${Layout_ECUFuel}).type — bool, int, string и т.д.default — значение по умолчанию.title, descr — текст, отображаемый в UI; поддерживаются локализованные варианты вроде title-ru, descr-ru.Пример:
<config id="Layout_ECUFuel" type="bool" default="false"
title="Use Fuel Level data from ECU"
descr="If enabled - fuel level will be shown from ECU. Otherwise - estimated from fuel consumption"
title-ru="Показывать уровень топлива из ЭБУ"
descr-ru="Если включено - уровень топлива будет браться из ЭБУ. Иначе - показывается оценочный уровень топлива"/>
grid — размещает дочерние item в табличной сетке.rows, cols — значения, разделённые запятыми, задающие подсказки по размерам. Пример: rows=",," cols=",35".rows и cols могут включать численные высоты/ширины или пустые элементы для гибкой размерности.Сетки можно вкладывать.
stack-vertical / stack-horizontal — укладывают элементы вертикально/горизонтально; может использоваться columns.
<stack-vertical columns="${LandscapeLayout ? 2 : 1}">union — позволяет композировать несколько альтернативных макетов в одной области (используется в TPMS и т.д.).
union, когда несколько взаимоисключающих подмакетов занимают одну и ту же область; каждый ребёнок обычно содержит свою grid.optional / volatile (атрибуты секции) — лёгкие подсказки, используемые в некоторых default-layout: optional="true" отмечает экраны, которые можно скрыть, volatile отмечает временные экраны.
switch — выбирает один из дочерних элементов для показа на основе выражения index. Полезно для циклических списков или условных блоков.
index — выражение или целое число, выбирающее, какой ребёнок показать (0-based). Может ссылаться на значения сенсоров через svalue(...) или любые TinyExe-выражения.interval — при наличии index может периодически пересчитываться с указанным интервалом (в миллисекундах) для циклирования детей.if — опциональное условие для включения/выключения switch целиком.item (или вложенные grid); когда index даёт номер ребёнка, показывается соответствующий элемент.Пример (циклим температуры каждые 4 секунды):
<switch if='${Layout_RollTemp = true}' index='$${ svalue("DateTime") / 4000 }'>
<item id="ATFTemp" .../>
<item id="CVTTemp" .../>
<item id="EngineOilTemp" .../>
</switch>
itemПредставляет виджет в grid или stack. Общие атрибуты и примеры использования:
id — идентификатор датчика или специального управления. Примеры: RPM, Latitude, ControlModuleVoltage.type — button, static и пр. По умолчанию — виджет для отображения значения датчика.text — для кнопок или статических блоков — видимый текст.action — для button: строка действия, например invoke(FAN_ON) или run(...).size — подсказка визуального размера: micro, small, normal, large, huge, extralarge или числовое значение.precision — количество знаков после запятой или специальные теги вроде 6fixed.inherit — ссылается на имя декоратора/стиля, например inherit="_ColoredOnOff".colspan / rowspan — раcширение элемента на несколько ячеек сетки.description — дополнительная метка/описание (например description="aside").period — период обновления в миллисекундах (например, period='5000').wrap — фильтр для сглаживания/предсказания: примеры из changelog:
wrap="predict(50,0.7)"wrap="smooth(400,100,5)"wrap="average(30)"доп. атрибуты: text-values, custom-units, colored-descr, text-evaluator
onclick — обработчик клика на элементе (навигация или запуск действия). Примеры: onclick="NewFueling", onclick="Go(Efficiency)".actions — список действий через запятую, доступных в диалоге информации о сенсоре. Пример: actions="SetupOdometer".units — расположение текста единиц: units="below", units="aside" или units="hidden".interval — интервал обновления для динамики UI или внутренних таймеров (отличается от period датчика).decorator-XXX - специальный синтаксис для включения декораторов.Примеры:
<item id="FuelLevel" if='${Layout_ECUFuel != true}' inherit="_FuelIndicator, _EditAction" onclick="NewFueling"/>
<item id="Odometer" if="${Layout_ECU_Odometer != true}" actions="SetupOdometer" size="large" inherit="_EditAction"/>
type="chart" — рисует график по сенсору; общие атрибуты: chart='line', time-scale, min-limit, max-limit, cover-description.border-opacity — контроль непрозрачности рамки (используется в dashkits).custom-description / description / custom-units — кастомные подписи и единицы.id="sensor[extradata]" — отображает дополнительные данные, связанные с сенсором (например TripTime[fillup]).Примеры:
<item id='Latitude' precision='6fixed' size="normal"/>
<item type="button" text="Fan On" action="invoke(FAN_ON)" size='extralarge' />
<item id='Lambda' colspan="2"/>
type="button" — кликабельная кнопка. Используйте action="invoke(NAME)" для вызова ECU/сервиса.type="static" — статический текстовый блок. Пример: type="static" size="micro"item или в файлах тем/гауджей; могут принимать декораторы.item может содержать вложенные декораторы. Пример синтаксиса:
imageАтрибуты: image-zorder, image-path, image-scale, image-width, image-height, image-rotate (могут содержать динамические выражения).
Многие атрибуты могут принимать динамические выражения, например image-rotate='$${ Sensor_Value - 45 }'.
<item id="Speed" decorator-10="touch-progress"/>
Это системный декоратор, используется для отрисовки динамической линии при нажатии.
<item id="Speed" decorator-10="tile"/>
Рисует плитку позади gauge.
Декоратор padding используется для создания отступов в item. Значения задаются для TOP, RIGHT, BOTTOM, LEFT.
Можно использовать процентные значения.
<item id="Speed">
<padding padding="0 0 0 120"/>
</item/>
Декоратор crop обрезает (скрывает) часть ранее отрисованного виджета.
<item id="Test" border-opacity="1" type='roundbar' red-green="150,0">
<crop crop="10% 10% 10% 10%"/>
</item>
Этот декоратор просто включает/отключает отрисовку во время выполнения. Вы можете использовать динамическую оценку $$.
<item id="AT_R" visibility='$${Sensor_Value}'/>
Декоратор filter — это мощный инструмент для применения визуальных эффектов и преобразований к элементам UI. Он поддерживает как эффекты отрисовки (визуальные фильтры), так и матричные преобразования (геометрические изменения).
effect — список функций фильтров, разделённых точкой с запятой. Каждый фильтр — это вызов функции с параметрами.mode — управляет тем, когда фильтр применяется в конвейере рендеринга:
before — применяет фильтр перед отрисовкой целевого элемента, затем рисует элемент нормальноin (по умолчанию) — применяет фильтр только к целевому элементуafter — сначала рисует целевой элемент, затем применяет фильтрinterval — опционально; интервал обновления в миллисекундах для динамических выражений фильтра (с использованием синтаксиса $${}).Эти фильтры изменяют визуальный вид без изменения геометрии. Несколько фильтров можно объединить в цепочку с помощью точки с запятой.
blur(radiusX, radiusY)
radiusX — радиус размытия по горизонтали в пикселяхradiusY — радиус размытия по вертикали в пикселяхeffect="blur(2,2)" — применяет размытие 2px в обоих направленияхdrop-shadow(dx, dy, sigmaX, sigmaY)
dx — смещение тени по горизонтали в пикселяхdy — смещение тени по вертикали в пикселяхsigmaX — размытие тени по горизонталиsigmaY — размытие тени по вертикали (опционально, по умолчанию равно sigmaX)effect="drop-shadow(5,5,3,3)" — тень смещена на 5px вправо и вниз с размытием 3pxtransparent(alpha)
alpha — уменьшение непрозрачности (0.0 = полностью прозрачный, 1.0 = без изменений)effect="transparent(0.5)" — делает элемент на 50% более прозрачнымdilate(radiusX, radiusY)
radiusX — радиус расширения по горизонтали в пикселяхradiusY — радиус расширения по вертикали в пикселяхeffect="dilate(2,2)" — расширяет светлые области на 2pxerode(radiusX, radiusY)
radiusX — радиус эрозии по горизонтали в пикселяхradiusY — радиус эрозии по вертикали в пикселяхeffect="erode(2,2)" — сжимает светлые области на 2pxbrightness(factor)
factor — множитель яркости (0.0 = чёрный, 1.0 = оригинал, >1.0 = ярче)effect="brightness(1.5)" — увеличивает яркость на 50%contrast(factor)
factor — множитель контрастности (0.0 = серый, 1.0 = оригинал, >1.0 = выше контрастность)effect="contrast(1.3)" — увеличивает контрастность на 30%invert()
effect="invert()" — создаёт цветовой негативsepia()
effect="sepia()" — эффект винтажной фотографииgrayscale()
effect="grayscale()" — эффект чёрно-белой фотографииsaturate(amount)
amount — изменение насыщенности (-1.0 = обесцветить, 0.0 = без изменений, >0.0 = более насыщенный)effect="saturate(0.5)" — увеличивает насыщенность на 50%effect="saturate(-0.3)" — уменьшает насыщенность на 30%colorfilter(r, g, b)
r — красный компонент (0-255)g — зелёный компонент (0-255)b — синий компонент (0-255)effect="colorfilter(255,100,50)" — оранжевый оттенокremove-black()
effect="remove-black()" — удаляет чёрный фон с изображенийВажно: Матричные преобразования (rotate, offset, zoom) изменяют геометрию и не должны смешиваться с эффектами отрисовки в одном фильтре. Используйте отдельные декораторы <filter>, если вам нужно и то, и другое.
rotate(angle, [pivotX, pivotY])
angle — угол поворота в градусахpivotX — опционально; горизонтальная точка вращения (проценты или пиксели, по умолчанию: 50%)pivotY — опционально; вертикальная точка вращения (проценты или пиксели, по умолчанию: 50%)effect="rotate(45)" — поворачивает на 45° вокруг центраeffect="rotate(90,0%,0%)" — поворачивает на 90° вокруг левого верхнего углаeffect="rotate($${Sensor_Value})" — поворачивает на основе значения датчикаoffset(dx, dy)
dx — смещение по горизонтали (проценты или пиксели)dy — смещение по вертикали (проценты или пиксели)effect="offset(10,20)" — перемещает на 10px вправо, 20px внизeffect="offset(50%,0)" — перемещает на 50% ширины вправоzoom(scale) или zoom(scaleX, scaleY, [pivotX, pivotY])
scale — равномерный коэффициент масштаба (1.0 = исходный размер)scaleX — коэффициент масштаба по горизонталиscaleY — коэффициент масштаба по вертикалиpivotX — опционально; горизонтальный центр масштабирования (проценты или пиксели)pivotY — опционально; вертикальный центр масштабирования (проценты или пиксели)effect="zoom(1.5)" — масштабирует до 150% вокруг центраeffect="zoom(2,1)" — только удваивает ширинуeffect="zoom(0.5,0.5,0%,0%)" — масштабирует до 50% от левого верхнего углаПростой эффект размытия:
<item id="Speed">
<filter effect="blur(2,2)"/>
</item>
Несколько объединённых в цепочку эффектов:
<item id="Temperature">
<filter effect="grayscale();saturate(0.5);brightness(1.2)"/>
</item>
Динамическое вращение на основе значения датчика:
<item id="Compass">
<filter effect="rotate($${Sensor_Value},50%,50%)" interval="100"/>
</item>
Использование режима с несколькими декораторами:
<item id="Speed" type="chart" chart='line'>
<break/>
<image image-zorder="bottom" image-path="images/ui/arrow.png"/>
<filter effect="rotate($${180+Sensor_Value%360},50%,50%)" mode="in" interval="100"/>
<filter effect="blur(1,1)" mode="after"/>
<padding padding="0 0 0 120"/>
</item>
Цветовое тонирование:
<item id="Warning">
<filter effect="colorfilter(255,0,0)"/> <!-- Красный оттенок -->
</item>
effectinterval только когда у вас есть динамические выражения $${}, требующие периодического обновленияmode="in" (по умолчанию) в большинстве случаев; используйте mode="before" или mode="after" для специальных задач наложения<break/> перед фильтрами, когда хотите применить эффекты только к последующим декораторам, а не к базовому элементуВы можете использовать break для прерывания наложения других декораторов. Break означает, что конвейер отрисовки начинается с пустого.
В этом примере break используется для применения фильтров только к декоратору image, а не к исходному содержимому gauge “Speed” (значению и графику).
<item id="Speed" type="chart" chart='line'>
<break/>
<image image-zorder="bottom" image-path="images/ui/arrow-circle-right.png" image-scale="0.6"/>
<filter effect="rotate($${180+Sensor_Value%360},50%,50%)" mode="in" interval="100"/>
<filter effect="blur(1,1)"/>
<padding padding="0 0 0 120"/>
</item>
if — условное отображение для section или item.ignore-gauges в section — игнорировать глобальные дескрипторы gauges для всех элементов внутри секции.gauge локальные определения могут объявляться внутри section.swap-direction на gauges: swap-direction="true" меняет направление бара или roundbar.horizontal-offset для roundbar.break — <break/> разделяет рендеринг на независимые этапы.maximize-focus, controls="autohide" — полезны для dash панелей.time-scale — используется для изменения шкалы времени в графиках.text-evaluator — расширенный атрибут для gauges, возвращающий динамический текст.Дополнительные наблюдаемые атрибуты и поведения:
optional / volatile на section.period на item.precision.colspan / rowspan.Пример графика с фильтрами и кастомным описанием:
<item id="Speed" wrap="predict(50,0.7)" type="chart" chart='line' period="100" precision="0" custom-description="Predictive speed" border-opacity="1"/>
id в if атрибутах или как item.eval выражения доступны в ecuxml. Доступные глобалы: Pi, E, PositiveInfinity, NegativeInfinity и пр.wrap) как выше.Пример TinyExe / eval:
image-rotate='$${ Sensor_Value - 45 }'
Пример доступа к extradata:
<item id="TripTime[fillup]"/>
SensorList и автогенерируемые панелиsection с class="SensorList" и ns="<namespace>" генерирует экран со списком датчиков для namespace. Используйте exclude regex для фильтрации шумных датчиков.
Пример:
<section name="Ford" class="SensorList" ns="Ford_MondeoDuratorq2003" if="Ford_MondeoDuratorq2003.Speed" exclude="\\bCACT_|...">
</section>
ecu-gps.layout):<section name="GPS">
<grid rows=",," cols=",,">
<item id='Latitude' precision='6fixed' size="normal"/>
<item id='Longitude' precision='6fixed' size="normal"/>
<item id='Satellites'/>
<item id='Altitude' precision='1'/>
<item id='GPSSpeed' precision='1'/>
<item id='ActiveSatellites'/>
<item id='Direction'/>
<item id='GPSOBD2SpeedDiff'/>
<item id='FixedPosition'/>
</grid>
</section>
<section name="FAN" fixed="false" if="PortraitLayout">
<grid rows=",," cols="">
<item id="FAN_Status" inherit="_ColoredOnOff" size='large'/>
<item type="button" text="Fan On" action="invoke(FAN_ON)" size='extralarge' />
<item type="button" text="Fan Off" action="invoke(FAN_OFF)" size='extralarge' />
</grid>
</section>
<section name="Fuel Trims" if="STFT1">
<grid rows="," cols=",">
<item id="STFT1" size='large' precision="1" />
<item id="STFT2" size='large' precision="1" />
<item id="LTFT1" size='large' precision="1" />
<item id="LTFT2" size='large' precision="1" />
</grid>
</section>
if может быть простым тестом присутствия сенсора (например if="STFT1") или полным выражением, ссылающимся на переменные темы, флаги день/ночь, флаги макета и значения сенсоров.Примечание: if может содержать через запятую несколько идентификаторов, которые в практике работают как OR (множество вариантов).
Кроме простых выражений доступны два стиля интерполяции:
${ } интерполяция: вычисляется один раз при сборке макета. Используйте для статических вычислений.
$${ } интерполяция: вычисляется динамически — подходит для значений, которые меняются во времени (анимации, периодические обновления сенсоров). Применимо к выбранным атрибутам: text-evaluator, switch[index], visibility, image-rotate, image-path, crop.
Эти формы позволяют вставлять TinyExe-выражения в значения атрибутов для статического или динамического вычисления.
rows и cols принимают значения, разделённые запятыми. Пустые поля — гибкие ячейки, числа — фиксированные подсказки. Пример: rows="30,,," cols="30,,30".Можно вкладывать grid для создания сложных адаптивных областей.
period на item — устанавливает период обновления виджета.precision — точность отображения.description="aside" — размещает описательный текст сбоку.inherit — повторно использует стиль/цвета из темы.text-values и custom-units — показывают текстовые значения или альтернативные единицы.min-limit / max-limit — ограничивают значения на графиках.user.layout)type (примеры): bar, roundbar, chart, text, static.
cache-interval — подсказка кэширования/обновления UI. Пример: cache-interval="6".
red-green — список порогов цвета, значения через запятую. Примеры: red-green="100,5".
bars-count — число сегментов в bar/roundbar. Пример: bars-count="10".
transparent — true/false.
border-width / border-opacity — визуальные параметры рамки.
colored-value — применять окраску значений по порогам.
fade-coeff — коэффициент затухания трейла в графиках.
width-compression — сжатие по горизонтали.
item-size / item-width / item-height / item-spacing — параметры размера сегментов.
small-radius-delta / small-radis-delta — варианты опечатки встречались в исходниках; означают смещение малого радиуса.
start-angle / end-angle / radius / vertical-offset — геометрические параметры roundbar.
corn-angle / middle-angle — дополнительные угловые параметры.
decorator-p (padding) и p-padding — декоратор отступов. Пример: decorator-p="padding" p-padding="10 10 10 10".
decorator-i / decorator-iN — нумерованные декораторы изображений (decorator-i1="image", i1-image-path, i1-image-rotate, и т.д.). Альтернативно поддерживается вложенная форма <image>.
Примеры:
<item id="Speed" decorator-i1="image" i1-image-zorder="bottom" i1-image-path="images/gauges/without_arrow_circle.png" i1-image-rotate='$${...}' i1-image-rotate-align="center"/>
<item id="Speed">
<image zorder="bottom" path="images/gauges/without_arrow_circle.png"/>
<image zorder="bottom" path="images/gauges/arrow.png" rotate='$${...}' scale="1"/>
</item>
rotate / scale на вложенных <image> — rotate может содержать динамические выражения, scale задаёт масштаб изображения.
custom-units — используется для DateTime и пр.: custom-units="time12", time, timesec, datetime, seconds.
border-opacity — применялось в тестах для просмотра рамок.
числовой size на item — можно задавать числа (например, size="72") помимо именованных размеров.
type в dashkitstype="text" — текстовое представление датчика (text-values).type="chart" — временной ряд.type="button" — интерактивная кнопка.Пример использования text-values:
<item id="RPM" wrap="predict(50, 0.7)" text-values="0:" type="text" description="hidden">
eval выражения находятся в ecuxml файлах. Примеры возможностей:
<eval> выражения для вычисляемых сенсоровbase-data / base-raw для сырых байтовget(offset), get_word() и т.д.text для строковых сенсоровif для модульности файлов макетов; макеты загружаются только для релевантных ЭБУ, но if дополнительно предотвращает пустые секции.SensorList для генерации экранов со списками сенсоров и exclude для отбора.wrap фильтры для шумных сенсоров (GPS, speed, MAF) для плавного отображения.ignore-gauges и локальные gauge объявления.name, fixed, if, class, ns, exclude, maximize-focus, controlsrows, colsid, type, text, action, size, precision, inherit, colspan, rowspan, description, period, wrapimage (image-path, image-scale, image-zorder, image-rotate, image-width/image-height)GPS panel (минимальный)
<ui>
<section name="GPS">
<grid rows=",," cols=",,">
<item id='Latitude' precision='6fixed' size="normal"/>
<item id='Longitude' precision='6fixed' size="normal"/>
<item id='GPSSpeed' precision='1' />
</grid>
</section>
</ui>
Fan control (кнопки + inherit)
<ui>
<section name="FAN" fixed="false" if="PortraitLayout">
<grid rows=",," cols="">
<item id="FAN_Status" inherit="_ColoredOnOff" size='large'/>
<item type="button" text="Fan On" action="invoke(FAN_ON)" size='extralarge' />
<item type="button" text="Fan Off" action="invoke(FAN_OFF)" size='extralarge' />
</grid>
</section>
</ui>
Hybrid summary example
<ui>
<section name="Hybrid">
<grid rows="30,,," cols="30,,30">
<item id="Efficiency_Battery" size='huge' />
<item id="FuelEconomy_NoBattery" size='huge' />
<item id="BatteryCurrent" />
<item id="SoC" />
</grid>
</section>
</ui>
Файл переведён с сохранением терминов, имен атрибутов и примеров в исходном английском виде.