Візуалізації

Візуалізації в Overvis Cloud — це власні інтерактивні сторінки (HTML/SVG/JavaScript), які показують поточний стан обладнання й дають змогу керувати ним віддалено. Це та сама функція, що в навігації застосунку позначена як Візуалізації. Overvis сам займається підключенням пристроїв, збором даних і обробкою сповіщень, а візуалізації дозволяють представити цю інформацію так, як вам потрібно.

Що таке візуалізації?

Візуалізації — це код HTML/SVG/JavaScript, вбудований у сторінки Overvis. Ви створюєте макет у будь-якому редакторі векторної графіки, експортуєте в SVG, потім додаєте спеціальні атрибути для прив’язки живих даних з пристроїв до графіки.

Як вони працюють

Механізм візуалізацій:

1. Завантажує ваш код HTML/SVG і вставляє його на обрану сторінку
2. Збирає всі прив’язки даних з вихідного коду
3. Зчитує дані з підключених пристроїв згідно з прив’язками
4. Оновлює візуальні елементи актуальними значеннями
5. Автоматично оновлює дані кожні 10 секунд (налаштовується атрибутом update-period-sec)
6. Обробляє дії користувача: редагування параметрів, перемикання елементів керування тощо

Порада

Для більшості візуалізацій не потрібен складний JavaScript. Overvis надає спеціальні HTML-атрибути — прив’язки даних — для типових задач: показ значень, приховування/відображення елементів і взаємодій.

Передумови

Перед тим як будувати візуалізації, переконайтеся, що є потрібні інструменти й середовище.

• Обладнання вже підключене до Overvis
• Встановлений редактор векторної графіки з експортом SVG (Affinity Designer, Inkscape, Adobe Illustrator, Sketch або SVG-Edit)
• Текстовий редактор для SVG/XML (VS Code, Notepad++, Atom або Sublime Text)
• Базове розуміння структури SVG бажане (за потреби — підручник з SVG)

Початок роботи

У цьому розділі — створення першої візуалізації: від відкриття редактора до простого прикладу на екрані.

Перша візуалізація

Відкрийте сторінку візуалізацій у меню Overvis. Якщо ви ще нічого не створювали, список буде порожнім.

Натисніть «Створити візуалізацію», щоб відкрити редактор візуалізацій:

У редакторі два основні поля:

• Вихідний код (SVG/HTML) — ваш код HTML/SVG/JavaScript
• Відображати на сторінці — на якій сторінці показувати цю візуалізацію

Простий приклад

Почнімо з простого прикладу, щоб зрозуміти принцип:

Будь-який код HTML або SVG тут відображається як є.<br /><br />

Наприклад, <b>цей текст буде напівжирним.</b><br /><br />

Нижче — простий SVG із червоним квадратом:<br />

<svg width="100px" height="100px" viewBox="0 0 100 100">
    <rect fill="#FF0000" height="100" width="100" x="0" y="0" />
</svg>

Після натискання «Створити візуалізацію» результат такий:

Можна навіть додати візуалізацію на Огляд в Overvis:

Ця візуалізація статична. Щоб показувати реальні дані пристрою, потрібні прив’язки даних — спеціальні атрибути HTML/SVG, що з’єднують елементи графіки з параметрами пристроїв.

Покроковий посібник

У цьому посібнику створюється повна візуалізація для моніторингу холодильного обладнання: живі температури, інтерактивні уставки, індикатори тривог і перемикачі.

Крок 1: макет графіки

Створіть макет у векторному редакторі. У цьому прикладі — план складського приміщення з морозильними камерами:

• План приміщення
• Показ температури для кожного холодильника
• Елементи керування уставкою
• Індикатори тривог
• Лічильник енергії
• Перемикач режиму відтаювання
• Індикатор стану дверей

Під час проєктування дотримуйтеся таких правил:

Типові значення-заповнювачі. Для всіх динамічних даних задайте типові значення. Для від’ємних температур з одним знаком після коми використовуйте “-12.3” — так зручніше верстати макет.

Розділяйте динаміку й статику. Динамічні значення й статичні підписи робіть окремими об’єктами. Наприклад “-12.3” і “°C” — окремі текстові об’єкти, щоб оновлювалося лише число.

Текст лишайте текстом. Динамічний текст не перетворюйте на криві чи контури. Статичний можна конвертувати для зменшення файлу; динамічний лишається редагованим текстом.

Сумісні шрифти. Краще веб-безпечні шрифти (Arial, Times New Roman, Courier) або Droid Sans, який Overvis підключає до всіх візуалізацій. Власні шрифти потребують додаткового CSS.

Розташування одразу. Елементи розташуйте одразу на фінальних місцях, зокрема ті, що спочатку приховані (індикатори тривог у обох станах, перемикачі в положеннях увімкнено/вимкнено).

Назви шарів. Давайте шарам зрозумілі назви — вони часто стають id елементів у SVG і спрощують пошук при додаванні прив’язок.

Крок 2: експорт у SVG

Експортуйте макет у SVG з налаштуваннями, що зберігають редагованість:

• Вимкніть стиснення чи мінімізацію
• Збережіть назви шарів і id
• Не перетворюйте текст на криві/контури
• Оберіть найбільш сумісний пресет формату

Після експорту відкрийте SVG у текстовому редакторі й видаліть на початку XML-декларацію та теги DOCTYPE:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

Ці теги потрібно прибрати, бо SVG буде вбудовано безпосередньо в HTML-сторінку.

Крок 3: завантаження статичної візуалізації

Скопіюйте очищений SVG-код у редактор візуалізацій Overvis і збережіть:

Перегляньте результат і переконайтеся, що графіка відображається коректно:

Наразі візуалізація лише графічна, без живих даних. Далі додамо прив’язки.

Крок 4: дані про пристрої

Для прив’язок потрібні MAC-адреса мережевого контролера та адреси пристроїв. Їх можна подивитися в налаштуваннях мережі:

У цьому прикладі MAC-адреса мережі — 11-22-33-44-55-66. Запишіть адреси всіх пристроїв, з яких показуватимете дані.

Крок 5: прив’язки даних

Коли статична візуалізація готова, підключіть її до живих даних, редагуючи SVG і додаючи спеціальні атрибути.

Відображення значень параметрів

Щоб показати значення параметра текстом, додайте атрибут param-value до текстового елемента. Наприклад, температура з датчика холодильника:

Знайдіть потрібний <text> у SVG (орієнтуйтеся на назви шарів):

Змініть тег <text>:

<text x="75.403px" y="102.037px"
      style="font-family:'DroidSans', 'Droid Sans', sans-serif;font-size:30px;fill:rgb(0,197,255);"
      param-value="11-22-33-44-55-66>1>101:r">-</text>

Формат атрибуту param-value: MAC>DEVICE_ADDRESS>PARAMETER_ADDRESS:OPTIONS

• 11-22-33-44-55-66 — MAC-адреса мережевого контролера
• 1 — адреса пристрою в мережі
• 101 — адреса параметра (holding register)
• :r — читати безпосередньо з пристрою (у реальному часі). Без :r використовується останнє кешоване значення з бази.
• :p{{number}} — відображати з заданою точністю (наприклад :p3 для трьох знаків після коми)

Тимчасово замість вмісту можна лишити дефіс або інший маркер до завантаження даних.

Порада

Адреси параметрів підтримують розширений синтаксис: {{registerAddress}}.{{startBit}}-{{endBit}}{{registerKind}}, де вид регістра: c (coil), d (discrete input), i (input register), або без суфікса — holding register. Приклади: 123c (котушка 123), 123.4 (біт 4 регістра 123), 123.4-5i (біти 4–5 вхідного регістра 123).

Після оновлення всіх показів температури візуалізація показує живі дані:

Дані оновлюються автоматично кожні 10 секунд, або користувач може натиснути іконку оновлення.

Заувага

Повний опис форматів посилань на параметри та опцій — у довіднику з візуалізацій.

Інтерактивне керування

Щоб користувач міг змінювати параметри пристрою кліком по значенню, поєднайте param-value з on-click:

Змініть текстовий елемент уставки:

<text x="135.373px" y="142.406px"
      style="font-family:'DroidSans', 'Droid Sans', sans-serif;font-size:16px;fill:rgb(37,182,255);cursor:pointer;"
      param-value="11-22-33-44-55-66>1>201:r"
      on-click="edit-param:11-22-33-44-55-66>1>201">-</text>

Атрибут on-click="edit-param:..." відкриває діалог для введення нового значення. Після збереження Overvis записує значення на пристрій і оновлює візуалізацію.

Додайте до стилю cursor:pointer, щоб курсор показував, що по елементу можна натиснути.

Умовне показування елементів

Використовуйте on-param-value, щоб показувати або ховати елементи залежно від значення параметра. Зручно для індикаторів тривог, які мають з’являтися лише при спрацюванні:

Знайдіть у SVG групу індикатора тривоги:

Змініть контейнерний тег <g>:

<g id="alarm3" serif:id="alarm"
   on-param-value="11-22-33-44-55-66>1>1d:=1:display:block:none:r"
   style="display:none;">

Формат атрибуту on-param-value: PARAM_REF:CONDITION:PROPERTY:VALUE_ON:VALUE_OFF:OPTIONS

• 11-22-33-44-55-66>1>1d — посилання на параметр (discrete input 1d)
• :=1 — умова (дорівнює 1)
• :display — CSS-властивість, яку змінюємо
• :block — значення, коли умова істинна (показати елемент)
• :none — коли хибна (сховати елемент)
• :r — читати з пристрою в реальному часі

За замовчуванням задайте style="display:none;", щоб елемент спочатку був прихований. Коли параметр дорівнює 1, display стає block і індикатор видно.

Заувага

Умова може бути >value, <value, =value, !=value, >=value, <=value або {evalExpr}, де evalExpr — будь-який булевий вираз JavaScript зі значенням параметра як x (наприклад {x<10||x>20}).

Зміна кольорів за значенням

Той самий прийом on-param-value підходить для зміни кольорів. Наприклад, двері червоним, коли відкриті:

<rect id="door" x="464.852" y="365.301" width="5.254" height="78.242"
      style="fill:none;stroke:grey;stroke-width:2px;"
      on-param-value="11-22-33-44-55-66>11>500.2:=0:stroke:red:green:r" />

Читається біт 2 регістра 500 пристрою 11. Значення 0 (двері відкриті) — обвід червоний; 1 (закриті) — зелений.

Заувага

on-param-value може змінювати будь-яку CSS-властивість або HTML-атрибут, не лише видимість і кольори.

Перемикачі

Поєднайте on-param-value з on-click для перемикачів. Змоделюйте обидва стани, потім показуйте один або інший залежно від поточного значення:

<g style="cursor:pointer;" on-click="toggle-param:11-22-33-44-55-66>20>105:0:1:g">
    <g id="button-on" serif:id="button on"
       on-param-value="11-22-33-44-55-66>20>105:=1:display:block:none:r"
       style="display:none;">
        <path d="M680.921,544.957c0,-8.316 -6.751,-15.067 -15.066,-15.067l-24.005,0c-8.315,0 -15.066,6.751 -15.066,15.067c0,8.315 6.751,15.066 15.066,15.066l24.005,0c8.315,0 15.066,-6.751 15.066,-15.066Z" style="fill:rgb(29,214,255);"/>
        <circle cx="666.032" cy="544.957" r="11.536" style="fill:white;"/>
        <text x="633.575px" y="549.415px" style="font-family:'DroidSans', 'Droid Sans', sans-serif;font-size:11.449px;fill:white;">ON</text>
    </g>
    <g id="button-off" serif:id="button off"
       on-param-value="11-22-33-44-55-66>20>105:=0:display:block:none:r"
       style="display:none;">
        <path d="M680.921,544.957c0,-8.316 -6.751,-15.067 -15.066,-15.067l-24.005,0c-8.315,0 -15.066,6.751 -15.066,15.067c0,8.315 6.751,15.066 15.066,15.066l24.005,0c8.315,0 15.066,-6.751 15.066,-15.066Z" style="fill:rgb(134,134,134);"/>
        <circle cx="641.703" cy="544.957" r="11.536" style="fill:white;"/>
        <text x="655.519px" y="549.415px" style="font-family:'DroidSans', 'Droid Sans', sans-serif;font-size:11.449px;fill:white;">OFF</text>
    </g>
</g>

Кожен стан має on-param-value, який показує його при відповідності параметра (:=1 для ON, :=0 для OFF). Батьківська група має on-click="toggle-param:PARAM_REF:DEFAULT_VALUE:VALUE_ON:OPTIONS" і перемикає параметр між 0 і 1 при кліку. Опція :g в кінці оновлює всі дані візуалізації після зміни.

Власний текст у сховищі

Щоб користувач міг редагувати підписи чи назви, які не зберігаються в регістрах пристрою, використовуйте власне сховище даних візуалізації. Спочатку увімкніть його атрибутом на кореневому <svg>:

<svg use-vis-data="yes" ...>

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

<text id="small-room-name" serif:id="small room name"
      x="45.195px" y="550.539px"
      style="font-family:'DroidSans', 'Droid Sans', sans-serif;font-size:36px;fill:rgb(211,211,211);"
      text-replacement="small-room-name"
      on-click="edit-visdata:small-room-name">Rental Storage Room</text>

Атрибут text-replacement задає ключ у сховищі. Початковий текст вмісту — значення за замовчуванням. Клік по елементу (on-click="edit-visdata:...") відкриває діалог; нове значення зберігається в базі.

Крок 6: завершення візуалізації

Завершіть візуалізацію, додавши решту прив’язок. Для лічильника енергії показуйте значення з бази, а не опитуйте пристрій напряму:

<text id="value" x="508.542px" y="502.132px"
      style="font-family:'DroidSans', 'Droid Sans', sans-serif;font-size:30px;fill:rgb(23,23,23);"
      param-value="11-22-33-44-55-66>10>1000">-</text>

Без прапорця :r береться останнє значення з бази (оновлюється приблизно кожні 5 хвилин), а не прямий опит пристрою. Це зменшує навантаження на мережу для значень, яким не потрібне оновлення в реальному часі.

Готова візуалізація показує живі дані обладнання, дозволяє взаємодію й оновлюється автоматично:

Типові прийоми

Параметри конфігурації

Поведінку візуалізації можна налаштувати атрибутами на першому тегу <svg> або на будь-якому елементі з класом vis-settings:

<svg update-period-sec="5" refresh-button="yes" use-vis-data="no">
    <!-- Your visualization content -->
</svg>

Доступні параметри:

• update-period-sec="{{number}}" — період оновлення в секундах (за замовчуванням 10). Значення 0 — оновлювати одразу після завершення циклу.
• refresh-button="yes|no" — показати/сховати кнопку оновлення у лівому верхньому куті (за замовчуванням yes).
• use-vis-data="yes|no" — завантажувати таблицю рядків візуалізації (за замовчуванням no).

База даних і читання в реальному часі

За замовчуванням param-value читає останнє збережене значення з бази. Опція :r зчитує значення безпосередньо з пристрою в реальному часі. Обирайте залежно від задачі:

Читання з бази (без :r), коли:

• Значення змінюється рідко
• Абсолютна актуальність у реальному часі не критична
• Потрібно зменшити трафік і прискорити цикл оновлення
• Кілька візуалізацій показують ті самі дані
• Параметр відстежується в системі

Читання в реальному часі (:r), коли:

• Потрібне саме поточне значення
• Параметр часто змінюється
• Взаємодія користувача потребує миттєвого відгуку
• Показуються стани керування після щойних змін користувачем
• Параметр не відстежується в системі

Коди помилок

Якщо значення параметра отримати не вдалося, показуються спеціальні коди помилок:

• NON — мережа параметра не існує
• NOP — параметра не існує
• NOLR — у базі немає останнього зчитування (параметр ніколи не читали або не відстежують)
• NOPR — для прив’язки в реальному часі не вдалося визначити параметр (неправильне посилання)
• NORV — читання в реальному часі не повернуло значення (помилка пристрою, тайм-аут або відсутній ok у відповіді оператора)

Ці коди допомагають діагностувати прив’язки та доступність пристроїв.

Доступні дії по кліку

Атрибут on-click підтримує такі дії:

• goto:param:{{paramRef}} — відкрити історію параметра
• goto:params:{{paramRef}},{{paramRef}},... — порівняння кількох параметрів
• goto:device:{{deviceRef}} — сторінка параметрів пристрою
• goto:network:{{networkRef}} — сторінка мережі
• goto:vis:{{visualizationRef}} — інша візуалізація
• toggle-param:{{paramRef}}:{{defaultValue}}:{{valueOn}}:{{options}} — перемикання параметра між двома значеннями
• edit-param:{{paramRef}}:{{options}} — діалог редагування значення параметра
• increment-param:{{paramRef}}:{{amount}}:{{options}} — додати величину до параметра (може бути від’ємною)
• edit-visdata:{{key}} — діалог редагування рядка візуалізації

Опцію :g можна додати до будь-якої дії, щоб після виконання оновити всі дані візуалізації.

Власні шрифти

Окрім веб-безпечних шрифтів і Droid Sans за замовчуванням можна підключити власні шрифти через вбудований CSS:

<style>
    @import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap");
</style>
<svg>
    <text style="font-family:'Roboto', sans-serif;">Custom Font Text</text>
</svg>

Адаптивні макети

Щоб візуалізація підлаштовувалася під різні розміри екрана, використовуйте відсоткові розміри та атрибут preserveAspectRatio:

<svg width="100%" height="100%" viewBox="0 0 800 600" preserveAspectRatio="xMidYMid meet">
    <!-- Your content -->
</svg>

Кілька індикаторів тривог

Коли одночасно показуєте кілька тривог, створіть окремі елементи-індикатори для кожного типу й розташуйте їх без накладання. Для кожного свій on-param-value. У складних сценаріях можна динамічно позиціонувати індикатори через JavaScript.

Розширено: інтеграція JavaScript

Прив’язки даних покривають більшість випадків; для складнішої логіки можна використовувати JavaScript. Візуалізації виконуються в контексті сторінки Overvis — доступний повний API браузера та функції Overvis.

Доступ до API Overvis

Для автентифікованих викликів API з візуалізації потрібен токен сесії. Він зберігається в сховищі браузера й доступний з JavaScript.

Функція preInitViz() виконується до ініціалізації візуалізації — зручно для завантаження даних з API або власної логіки:

<script>
    window.preInitViz = function (callback) {
        // Get the authentication token from session storage
        const token = sessionStorage.getItem("auth_token");

        // Fetch data from Overvis API
        fetch("https://ocp.overvis.com/api/v1/org/1/nets/", {
            headers: {
                "Content-Type": "application/json",
                Authorization: "token " + token,
            },
        })
            .then((response) => response.json())
            .then((data) => {
                console.log("Networks:", data);

                // Process the data and update your visualization
                document.getElementById("network-count").textContent = data.length;

                // Always call the callback when done
                callback();
            })
            .catch((error) => {
                console.error("API error:", error);
                callback();
            });
    };
</script>

<div>Total networks: <span id="network-count">Loading...</span></div>

Оновлення в реальному часі

Функція onVizUpdate() викликається щоразу, коли візуалізація оновлюється новими даними:

<script>
    window.onVizUpdate = function (data) {
        // data contains all parameter values from data bindings
        console.log("Visualization updated with data:", data);

        // Perform custom calculations or transformations
        const temp1 = parseFloat(data["12-34-56-78-90-ab>1>101"]);
        const temp2 = parseFloat(data["12-34-56-78-90-ab>1>102"]);
        const average = (temp1 + temp2) / 2;

        // Update custom elements
        document.getElementById("avg-temp").textContent = average.toFixed(1);
    };
</script>

<div>Average temperature: <span id="avg-temp">-</span>°C</div>

Програмний запис параметрів

Функція writeParamValue() надсилає значення на пристрої з JavaScript:

<script>
    function setSetpoint(value) {
        writeParamValue(
            "12-34-56-78-90-ab>1>201", // Parameter reference
            value.toString(), // Value as string
            function (result) {
                // Callback
                if (result.ok) {
                    console.log("Write successful:", result);
                } else {
                    console.error("Write failed:", result.err);
                }
            },
            true, // Refresh all visualization data after write
        );
    }
</script>

<button onclick="setSetpoint(18)">Set to 18°C</button>
<button onclick="setSetpoint(20)">Set to 20°C</button>
<button onclick="setSetpoint(22)">Set to 22°C</button>

Історичні дані

Для графіків і аналізу трендів запитуйте історичні зчитування через API:

<script>
    window.preInitViz = function (callback) {
        const token = sessionStorage.getItem("auth_token");

        // Request dispersed readings for charting
        fetch("https://ocp.overvis.com/api/v1/readings/dispersed/", {
            method: "POST",
            headers: {
                "Content-Type": "application/json",
                Authorization: "token " + token,
            },
            body: JSON.stringify({
                paramIds: [547, 545], // Parameter system IDs
                from: new Date(Date.now() - 24 * 60 * 60 * 1000).toISOString(), // Last 24 hours
                till: new Date().toISOString(),
                points: 100, // 100 data points
            }),
        })
            .then((response) => response.json())
            .then((data) => {
                console.log("Historical data:", data);
                // Use data to render a chart
                renderChart(data);
                callback();
            })
            .catch((error) => {
                console.error("Error fetching data:", error);
                callback();
            });
    };

    function renderChart(data) {
        // Implement chart rendering logic here
        // Can use libraries like Chart.js, D3.js, etc.
    }
</script>

Заувага

Завжди викликайте callback() в кінці preInitViz(), навіть якщо сталася помилка — інакше візуалізація не завершить завантаження.

Приклад: інтеграція Google Maps

Можна вбудувати інтерактивні Google Maps із розташуванням обладнання та індикаторами стану в реальному часі.

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>

<div id="map" style="height: 600px;"></div>

<!-- Hidden divs for data binding -->
<div style="display:none;">
    <div id="net1-conn" on-net-connection="aa-bb-cc-dd-ee-ff:opacity:1:0"></div>
    <div id="net1-relay" param-value="aa-bb-cc-dd-ee-ff>111>160.0:r"></div>
    <div id="net1-alarm" param-value="aa-bb-cc-dd-ee-ff>1>240.0:r"></div>
</div>

<script>
    // Define marker locations and network references
    const locations = [
        {
            lat: 40.7128,
            lng: -74.006,
            label: "Location 1",
            netKey: "net1",
            netMac: "aa-bb-cc-dd-ee-ff",
            url: "/manage/network/location-1/",
        },
        // Add more locations...
    ];

    let map,
        markers = [];

    window.preInitViz = function (callback) {
        // Initialize map
        map = new google.maps.Map(document.getElementById("map"), {
            center: { lat: 40.7128, lng: -74.006 },
            zoom: 13,
        });

        // Create markers
        locations.forEach((loc) => {
            const marker = new google.maps.Marker({
                position: { lat: loc.lat, lng: loc.lng },
                map: map,
                title: loc.label,
                label: loc.label,
            });

            marker.addListener("click", () => {
                window.location.href = loc.url;
            });

            markers.push({ marker, netKey: loc.netKey });
        });

        callback();
    };

    window.onVizUpdate = function (data) {
        markers.forEach((m) => {
            const connected = parseInt(
                data[`conn?${locations.find((l) => l.netKey === m.netKey).netMac}`],
            );
            const relay = parseInt(
                data[`${locations.find((l) => l.netKey === m.netKey).netMac}>111>160.0:r`],
            );
            const alarm = parseInt(
                data[`${locations.find((l) => l.netKey === m.netKey).netMac}>1>240.0:r`],
            );

            // Update marker color based on status
            let icon = null;
            if (alarm === 1) {
                icon = "http://maps.google.com/mapfiles/ms/icons/red-dot.png";
            } else if (relay === 1) {
                icon = "http://maps.google.com/mapfiles/ms/icons/yellow-dot.png";
            } else if (connected === 1) {
                icon = "http://maps.google.com/mapfiles/ms/icons/green-dot.png";
            } else {
                icon = "http://maps.google.com/mapfiles/ms/icons/grey-dot.png";
            }

            m.marker.setIcon(icon);
        });
    };
</script>

Індикатори стану

У прикладі маркери з кольоровим кодуванням:

• Червоний: активна тривога
• Жовтий: обладнання працює (реле увімкнено)
• Зелений: підключено, нормальна робота
• Сірий: від’єднано

Вигляд маркерів можна змінити власними піктограмами, SVG або API налаштування маркерів Google Maps.

Порада

Якщо точок багато, варто використати бібліотеку кластеризації маркерів — краща продуктивність і читабельність карти.

Типові проблеми

Візуалізація не оновлюється

Перевірте інтервал оновлення, відповідність адрес параметрів конфігурації пристроїв і те, що пристрої онлайн і відповідають. У консолі розробника (F12) перегляньте помилки JavaScript.

Замість даних коди помилок (NOLR, NOPR, NORV тощо)

• NOLR (немає останнього зчитування) — параметр ніколи не читали або він не відстежується. Позначте параметр як відстежуваний у налаштуваннях пристрою або додайте :r для читання в реальному часі.
• NOPR (немає параметра для realtime) — для слота realtime не вдалося визначити параметр. Перевірте, що посилання на параметр у візуалізації коректне.
• NORV (немає значення в реальному часі) — читання в реальному часі не повернуло значення. Перевірте зв’язок і спробуйте зчитати параметр на сторінці параметрів пристрою, щоб побачити фактичну помилку.
• NON (немає мережі) — мережа не існує або немає доступу.
• NOP (немає параметра) — параметра немає в пристрої.

Інтерактивні елементи не працюють

Перевірте синтаксис on-click за документацією. Має бути cursor:pointer у стилі. Переконайтеся, що інший елемент не перекриває клікабельний (порядок шарів SVG важливий).

Стилі виглядають неправильно

Переконайтеся, що при експорті SVG текст не перетворено на криві. Використовуйте inline-стилі в елементах SVG, щоб уникнути конфліктів зі стилями сторінки. За потреби перевірте SVG валідатором.

Оновлення повільніше, ніж очікується

Якщо багато параметрів з :r, кожен потребує запиту до пристрою. Наступний цикл оновлення не починається, доки не завершиться попередній. Для некритичних значень використовуйте читання з бази без :r або збільшіть update-period-sec.

Поширені запитання

Чи можна підключати зовнішні бібліотеки JavaScript (Chart.js, D3.js)?

Так. Підключайте через CDN у <script> на початку вихідного коду візуалізації. Великі бібліотеки можуть сповільнити завантаження сторінки.

Чи можна зробити багатосторінкову візуалізацію?

Візуалізація за структурою односторінкова, але можна імітувати кілька екранів через показ і приховування секцій у JavaScript або створити кілька окремих візуалізацій і зв’язати їх on-click="goto:vis:...".

Як відлагоджувати JavaScript у візуалізації?

Інструменти розробника в браузері (F12): консоль, точки зупинки, мережа. Перевірте помилки API та прив’язок.

Чи можуть візуалізації читати дані кількох організацій?

Ні. Кожна візуалізація належить одній організації й бачить лише її мережі та пристрої. API забезпечує це через токени автентифікації.

У чому різниця між system ID параметра та адресою параметра?

Адреса параметра — адреса регістра Modbus на пристрої (наприклад 101). System ID — внутрішній ідентифікатор у базі Overvis. У посиланнях використовуйте адреси на кшталт 12-34-56-78-90-ab>1>101 або system ID з префіксом #: #1234567.

Чи можна застосовувати CSS-фреймворки?

Так, підключіть CSS у <style> або <link>. На сторінці Overvis уже є власні стилі — можливі конфлікти. Використовуйте конкретні селектори або inline-стилі.

Як працювати з часовими поясами?

Усі дати з API Overvis у UTC. У JavaScript використовуйте Date і toLocaleString() для локального часу користувача або задайте конкретний часовий пояс.

Технічна довідка

Повний технічний опис атрибутів, форматів посилань на параметри та додаткових опцій:

• Довідник з візуалізацій — довідник з атрибутів і синтаксису
• Довідник API — REST API для візуалізацій з JavaScript

Пов’язана документація

• Початок роботи — перші кроки в Overvis Cloud
• Підключення обладнання — як підключити обладнання
• Мережі, пристрої та параметри — ієрархія обладнання
• Сповіщення — моніторинг і сповіщення

Допомога

Якщо потрібна допомога з візуалізаціями Overvis, пишіть на support@overvis.com. Допоможемо з власними візуалізаціями, відповімо на запитання щодо розширених можливостей і уточнимо документацію.