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
Бажаю успіхів.
Недавні записи
- FOC - своя реалізація векторного керування. Підбиваю підсумки 2022 року
- Конструктор регуляторів моторів. Підбиваю підсумки 2022 року.
- Чому трифазні мотори стали такими популярними?
- FOC & Polar coordinates
- Конструктор регуляторів PMSM, BLDC двигунів
- Своя бібліотека для векторного керування безколекторними моторами
- Not Allowed
- Адаптивний ПІД регулятор
- Конструктор регуляторів моторів. Структура.
- Конструктор регуляторів моторів. Анонс.
Tags
st-link 3d-printer encoder servo solar java-script git wifi uart mpu-9250 sensors capture motor esp8266 nodemcu usb usart piezo rfid css atmega bmp280 bkp avr displays brushless watchdog battery sms rs-232 tim mpu-6050 barometer examples nvic pmsm dc-dc eb-500 soldering meteo rtc gpio books websocket docker dht11 led smd stm32 web timer dma lcd mpx4115a hih-4000 bldc ssd1306 adc mongodb python options eeprom raspberry-pi remap max1674 programmator ethernet foc ngnix ssd1331 gps flash exti bluetooth html bme280 i2c pwm flask
Архіви