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