INKSVG.JS - бібліотека для роботи з SVG файлами
INKSVG.JS - бібліотека яка допоможе зв`язати векторну графіку (SVG) з будь-якими даними.
- пошук графічних об`єктів у SVG - файлі по ID, переміщення zoom-у на об`єкт
- зміна стилю об`єктів
- зміна текстових написів, та їх стилю
- анімація об`єктів
INKSVG.JS використовує D3.js, та фактично є обгорткою, яка спрощує роботу саме SVG файлами, які створені графічними редакторами типу Inkscape. INKSVG.JS враховує нюанси саме форматів Sodipodi.
Ви можете за допомогою редактора Inkscape створити векторну схему. Це може буди схема квартири, підприємства, комунікацій, схема кабельних мереж, схема розташування обладнання, схема складських приміщень та стелажів, схема трубопроводів, схема розташування промислових об`єктів, тощо. Тобто люба схема яка містить окремі об`єкти. Для потрібних об`єктів задати унікальний ID (редактор Inkscape це дозволяє робити). Та по ID поєднувати графічний об`єкт з даними.
Пошук об`єктів. Наприклад, ткнути у графічний об`єкт мишкою, знайти інформацію у базі даних, та вивести потрібну інформацію про об`єкт. Або навпаки по ID з бази даних знайти графічний об`єкт на схемі, перемістити на нього зум, поблимати ним. Тобто показати де саме знаходиться об`єкт на схемі.
Можна змінювати стиль графічного об`єкту в залежності від даних. Наприклад, пофарбувати у зелений усі вільні місця на складі. Або пофарбувати у червоний зони де порушено охоронний / пожежний контроль. Змінювати колір датчики температури в залежності від показників, тощо.
Можна динамічно змінювати текстові написи. Тобто Ви зможете виводити поточні показники різноманітних датчиків прямо на схемі. Також змінювати їх стиль (колір у тому числі) в залежності від показників. Якщо треба привернути увагу оператора вмикати анімацію об`єктів в залежності від стану даних або виводити попередження.
Можна комбінувати. Наприклад, створити схему виробничої установки встановити текстові надписи де ми хочемо помістити данні з сенсорів, а потім програмно їх змінювати за допомогою INKSVG.JS. Та якщо якийсь з параметрів вийшов за межі дозволеного, фарбувати його у червоне і блимати. Додатково вивести інструкцію для корекції дій персоналу.
Обладнати теплицю термодатчиками та на схемі відображати поточну інформацію з кожного датчика — це вже не проблема. Треба створити схему розумного помешкання і “малювати” стан різних датчиків, типу: датчики руху, датчики води на підлозі, датчики відкритих дверей і вікон, тощо? За допомогою INKSVG.JS це все може зробити навіть школяр!
Потрібно тільки трохи фантазії та елементарні навички програмування на Javascript. За допомогою INKSVG.JS можна створити web-додаток який буде працювати з графічною схемою з живими даними на будь-якому комп`ютері, телефоні, планшеті.
Сторінка INKSVG.JS:
INKSVG.JS
Документація:
INKSVG.JS Function Reference
Підручник допоможе Вам зробити перші кроки:
INKSVG.JS Tutorial
Бажаю успіхів.
Недавні записи
- Комп'ютерний зір (Машинний зір)
- Деякі думки про точність вимірювань в електроприводі
- Датчики Холла 120/60 градусів
- Модуль драйверів напівмосту IGBT транзисторів
- Драйвер IGBT транзисторів на A316J
- AS5600. Варіант встановлення на BLDC мотор
- DC-DC для IGBT драйверів ізольований 2 W +15 -8 вольт
- U-FOC - Векторне керування безколекторними моторами
- FOC - своя реалізація векторного керування. Підбиваю підсумки 2022 року
- Конструктор регуляторів моторів. Підбиваю підсумки 2022 року.
Tags
ngnix flash flask i2c servo dma gpio avr solar bme280 docker eeprom sms java-script barometer rtc dht11 ssd1306 bldc motor raspberry-pi ssd1331 mpu-9250 dc-dc rfid foc st-link usb remap pwm capture soldering nodemcu lcd eb-500 esp8266 mpu-6050 nvic usart books mpx4115a timer adc bluetooth tim programmator meteo sensors led python websocket hih-4000 html pmsm mongodb bmp280 gps encoder displays smd stm32 css git examples rs-232 ethernet brushless 3d-printer watchdog max1674 exti atmega options battery uart wifi bkp piezo web
Архіви