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