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
Бажаю успіхів.
Tags
bme280 mpu-6050 encoder examples adc lcd python wifi bluetooth rtc pwm piezo ngnix watchdog books rfid web st-link eeprom bkp usart led nodemcu flash websocket uart 3d-printer options html git meteo gpio soldering flask tim servo rs-232 raspberry-pi programmator stm32 sms dma battery dht11 hih-4000 css ssd1331 pmsm bmp280 avr brushless motor usb barometer max1674 displays esp8266 docker java-script ssd1306 i2c capture nvic bldc atmega exti ethernet timer mpu-9250 smd mpx4115a sensors dc-dc mongodb eb-500 remap solar foc gps
Архіви