I'm working on a project for a company that monitors buildings around the world. The buildings are embedded with sensors which monitor the moisture and temperature. The data is than sent to a central cloud database and there is a web app which than allows the clients (the building owners) to display reports etc.
Part of the app there are images of each floor and the roof of the building. The images are usually from the CAD file - converted to a jpeg.
I need to allow the user to draw where the sensors are. These are usually lines as most of the sensors are tape. The user should than be able to hover over the line and obtain the latest sensor readings.
I was thinking of using SVG for this as it would allow zooming, panning etc. . I am considering two toolkits for this
They both seem pretty even. I need to be able to draw lines, resize them, move them around, label them, pan the image (as they can be huge) along with zooming in and out. I also need to be able to hover over and display a popup of the recent data and change the line colour should the sensor be wet. Any modifications to the sensors (adding or moving) needs to be updated via AJAX to the database.
Anyone have experience with SVG being used in this way. Another option is Canvas but unsure if those toolkits (like three.js) would be overkill.
Part of the app there are images of each floor and the roof of the building. The images are usually from the CAD file - converted to a jpeg.
I need to allow the user to draw where the sensors are. These are usually lines as most of the sensors are tape. The user should than be able to hover over the line and obtain the latest sensor readings.
I was thinking of using SVG for this as it would allow zooming, panning etc. . I am considering two toolkits for this
- snap.svg
- svg.js
They both seem pretty even. I need to be able to draw lines, resize them, move them around, label them, pan the image (as they can be huge) along with zooming in and out. I also need to be able to hover over and display a popup of the recent data and change the line colour should the sensor be wet. Any modifications to the sensors (adding or moving) needs to be updated via AJAX to the database.
Anyone have experience with SVG being used in this way. Another option is Canvas but unsure if those toolkits (like three.js) would be overkill.
Comment