Почему дашборд отличается на WBE2-HDMI

из-за чего может отличаться отображение дашборда в веб-интерфейсе при подключении по сети и через WBE2-HDMI

Нужно немного контекста — отличия обычно связаны либо с URL/параметрами запуска, либо с браузером/разрешением/режимом. Коротко — возможные причины и быстрые проверки.

Возможные причины

• Разные URL / параметры (?hmi, ?fullscreen, id панели, путь к SVG) — WBE2-HDMI может запускать другую панель или HMI-режим.
• Разные браузеры/движки (встроенный Chromium на WBE2-HDMI vs ваш десктопный браузер) — отличия в рендеринге SVG/CSS.
• Разрешение/соотношение сторон и масштаб (DPI, zoom, режим киоска) — элементы могут перестраиваться или обрезаться.
• Отсутствие внешних ресурсов (шрифты, изображения) или блокировка (нет доступа в интернет / CSP) — пропадают иконки/стили.
• Уровень доступа/аутентификация (Admin/Operator/User) — некоторые элементы редактирования/видимости скрыты.
• Разные версии Web UI или кеш статики — старые CSS/JS могут отличаться.

4 быстрых действий для диагностики (в порядке выполнения)

1. Сравните точный URL, который открывается на ПК и на WBE2-HDMI (включая хеш и параметры).
2. На контроллере узнайте релиз и версию Web UI:

cat /etc/wirenboard-release

и в Web UI: Настройки → Веб-интерфейс — посмотрите версию/параметры.
3) Откройте DevTools/консоль (F12) в обоих клиентах и посмотрите ошибки в Console/Network (404, CORS, файлы CSS/JS не загружены).
4) Проверьте разрешение/ориентацию экрана и параметры запуска браузера на WBE2-HDMI (режим киоска, zoom). Если разное — попробуйте открыть тот же URL с ?hmi или ?fullscreen на ПК.

Короткие уточнения, чтобы дать точный совет (выберите/ответьте на 1–3 пункта)

1. Какая модель контроллера и вывод команды: cat /etc/wirenboard-release ?
2. Какая панель — SVG или текстовая? и какой URL/путь вы открываете на ПК и на HDMI (скопируйте полностью)?
3. Можете прислать скрин с тем, как выглядит «неправильно» на HDMI и ошибки из консоли (если есть)?

Примечание: я — ИИ-ассистент, а не сотрудник-человек; пришлёте ответы/скриншоты — продолжу диагностику и дам конкретные шаги.

1. модель-ревизия WB 8.5.2C/4G1
   cat /etc/wb-release показал следующее:
   RELEASE_NAME=unstable.latest
   SUITE=testing
   TARGET=wb8/bullseye
   REPO_PREFIX=root

2. Панель SVG.
   Путь сетевой (“правильное” отображение на мониторе) - http://192.168.3.42/#!/dashboards/svg/view/dashboard3
   Путь в /etc/wb-hardware.conf (“неправильное”) - http://localhost/#!/dashboards/svg/view/dashboard3

3. “Правильное” отображение - текст по центру - 1е фото.
   ”Неправильное” - текст смещён от центра (как будто какой-то мета-символ перед ним) - 2е и 3е фото. Вывод сделан на разные устройства для убедительности.

   

   IMG_20260210_1623511920×2560 1.14 MB
   

   IMG_20260210_1557471920×2560 597 KB
   

   Снимок экрана 2026-02-10 1602333807×1890 89.6 KB

Кратко: похоже на проблему со шрифтом / невидимым символом в SVG. При открытии по localhost браузер на WBE2-HDMI грузит другие ресурсы/шрифты (или не грузит внешние шрифты из‑за путей/CORS), поэтому перед текстом появляется «квадратик» (символ замены / отсутствующий глиф) и смещается выравнивание. Что сделать дальше — 4 быстрых проверки и 2 варианта решения.

Что проверить (по порядку)

1. В консоли браузера на WBE2‑HDMI (F12 → Network / Console) посмотрите запросы шрифтов (.woff/.woff2/.ttf). Есть ли ошибки 404 / CORS / blocked? Если да — это причина.
2. Скачайте SVG, откройте в текстовом редакторе и проверьте начало текстового узла (возможно, там BOM или невидимый символ U+FEFF/U+200B):
   • на контроллере: cat /mnt/data/.../your.svg | sed -n '1,40p'
   • локально откройте в любом hex/текстовом редакторе и посмотрите первые символы.
3. Попробуйте на WBE2‑HDMI открыть тот же URL не как localhost, а по IP: http://192.168.3.42/#!/dashboards/svg/view/dashboard3 — изменится ли отображение? (если да — поведение связано с путями/CORS/хостом).
4. В панели редактора SVG посмотрите стиль tspan/text (атрибуты text-anchor, dx, dy) — при смене шрифта разные метрики могут сдвигать текст.

Быстрые обходные решения (принять одно из них)

• Самый надёжный: в Inkscape конвертировать текст в кривые (Path → Object to Path), сохранить SVG и загрузить — совсем исключает зависимость от шрифта.
• Альтернатива (если нужен редактируемый текст): встроить/вложить шрифт в SVG через @font-face или использовать системный безопасный шрифт (задать в font-family Arial / sans‑serif) и убедиться, что файл шрифта доступен по тому же хосту (или настроить CORS).

Короткие команды (полезно)

• Проверить первые байты файла (BOM = EF BB BF):

head -c 3 your.svg | xxd

• Посмотреть ошибки шрифтов в логе браузера — откройте DevTools → Network → фильтр “font”.

Уточнения, которые ускорят решение (1–2 вопроса)

1. Можете прислать исходный SVG (или фрагмент text/tspan в котором видно «kitchen»)?
2. В DevTools на WBE2‑HDMI есть ошибки при загрузке файлов шрифтов или заметки CORS/Blocked?

Если пришлёте SVG или скрин консоли — дам точный шаг (коррекция tspan/удаление BOM или встраивание шрифта).

Примечание: я — ИИ-ассистент, а не сотрудник-человек; пришлёте лог/файл — помогу точнее.

Спасибо — файл получил. Коротко — две самые вероятные причины и 3 быстрых шага для проверки/починки.

Вероятные причины

• В SVG есть невидимый символ (BOM U+FEFF или zero‑width U+200B) перед словом — браузер показывает «квадратик»/сдвиг.
• При открытии по localhost браузер загружает другой шрифт (или не загружает внешний шрифт), и глифы/метрики отличаются — поэтому смещение есть только в одном случае.

Сделайте эти 3 проверки (по порядку)

1. Быстрый поиск BOM/zero‑width в SVG:

# покажет первые 3 байта (BOM = ef bb bf)
head -c 3 kitchen.svg | xxd

# удалить BOM и zero-width (выполнить в каталоге с файлом)
perl -CS -i -pe 's/^\x{FEFF}//; s/\x{200B}//g;' kitchen.svg

После правки загрузите файл в панель и проверьте.

2. Проверьте, какой шрифт реально используется на каждом устройстве:

• Откройте DevTools → Elements → выберите текст → Computed / Rendered Fonts.
• В Network посмотрите загрузку .woff/.ttf — есть ли 404/CORS/blocked при localhost.

3. Быстрое обходное решение (если не нужна редактируемость текста):

• Конвертировать проблемный текст в кривые в Inkscape: Object → Convert to Path, сохранить SVG и загрузить — окончательно уберёт проблему со шрифтами/символами.

Если нужно — могу точнее:

• пришлите фрагмент … из SVG или весь файл (в тексте), или
• скажите, хотите ли вы сохранить текст редактируемым (тогда правим BOM/шрифты) или можно конвертировать в кривые.

Примечание: я — ИИ-ассистент, а не сотрудник-человек; пришлёте фрагмент/сообщения из консоли — дам точные правки.

head -c 3 /mnt/data/root/Downloads/kitchen.svg | xxd
00000000: 3c3f 78 <?x

нет ошибки

Хорошо — раз BOM нет и шрифты не падают, дальше проверим наличие невидимых символов прямо в тегах и, если их нет, зафиксируем шрифт. 3 быстрых шага (выполните на контроллере или локально и пришлите результат одного из выводов).

1. Вывести содержимое всех и их кодовые точки (вставьте и запустите рядом с файлом kitchen.svg):

perl -CS -0777 -ne '
  while (/<text[^>]*>(.*?)<\/text>/sg) {
    $s=$1;
    print "TEXT: $s\n";
    print "CODES: ", join(" ", map { sprintf "U+%04X", ord($_) } split("", $s)), "\n\n";
  }' /mnt/data/root/Downloads/kitchen.svg

2. Если увидите в выводе коды U+FEFF, U+200B, U+00A0 (или другие непечатные) — удалите их:

perl -CS -i -pe 's/[\x{FEFF}\x{200B}\x{00A0}]//g' /mnt/data/root/Downloads/kitchen.svg
# затем загрузите исправленный SVG в контроллер

3. Если в выводе кодовые точки нормальные (латиница) — принудительно задайте шрифт в SVG (чтобы исключить различия рендеринга):

• В

style="font-family: 'DejaVu Sans', Arial, sans-serif;"

(Либо откройте Inkscape → выделите текст → в свойствах шрифта укажите системный безопасный шрифт → сохранить и загрузить.)

Если хотите — пришлите вывод из шага 1 (пара TEXT:/CODES: будет достаточно) — посмотрю и скажу точную правку.
Примечание: если текст можно сделать не‑редактируемым — самый быстрый надёжный вариант — конвертировать текст в кривые (Object → Convert to Path).