• Visitors can check out the Forum FAQ by clicking this link. You have to register before you can post: click the REGISTER link above to proceed. To start viewing messages, select the forum that you want to visit from the selection below. View our Forum Privacy Policy.
  • Want to receive the latest contracting news and advice straight to your inbox? Sign up to the ContractorUK newsletter here. Every sign up will also be entered into a draw to WIN £100 Amazon vouchers!

Javascript SVG toolkit advice

Collapse
X
  •  
  • Filter
  • Time
  • Show
Clear All
new posts

    Javascript SVG toolkit advice

    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
    • 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.
    McCoy: "Medical men are trained in logic."
    Spock: "Trained? Judging from you, I would have guessed it was trial and error."

    #2
    Sarah Soueidan, who knows much about such things, was speaking well of both Snapsvg and Greensock on Twitter earlier today.
    Last edited by NickFitz; 21 April 2015, 16:26.

    Comment


      #3
      Oh, and for the kind of thing you describe, I'd definitely go for SVG - canvas would involve redrawing the entire thing every frame (because it's just a bitmap) which would potentially give you a lot of performance headaches. The event handling would also be a pain. And SVG is fine for panning, as it's just a translation relative to the viewport, and clipping is built right in.

      Comment


        #4
        Raphael.js is pretty nifty. As is d3.js for a general purpose visualisation engine.

        Comment


          #5
          Thanks, I do believe you meant greensock which is very nifty.

          Raphael is the more general version of snap.svg apparently - it supports older browsers. I'm not worried about older browsers as its not an enterprise app.

          Is D3 not more suited for charting and visualisations? the examples on its site are tending that way..but it could be used for my purpose.

          Some things to look into. I suppose I'll now have to convince client to pay for a couple of proof-of-concepts.
          McCoy: "Medical men are trained in logic."
          Spock: "Trained? Judging from you, I would have guessed it was trial and error."

          Comment


            #6
            I heard good things about raphael. I did a load of stuff using SVG controlled by JS, but didn't use a toolkit; just wrote it myself. It's just manipulating properties exactly the same as you do with the DOM, so it's not difficult to do.

            The other thing with canvas is if you zoom in (say on a tablet) you get a poor quality bitmap stretch as it's always drawing at the original resolution, whereas with SVG you'll get a high quality vector zoom. That was the number one reason I chose to do what I was doing with SVG; though I think it also paid off in other ways.
            Will work inside IR35. Or for food.

            Comment


              #7
              The toolkits I believe make things much simpler for animations, masking and interactivity. I am concerned about the weight of the download - but even on my 2Mbps connection I don't notice a massive delay.

              My client is on a very limited budget so it may not suit for me to learn the ins and out. They just need the damn thing working. Seems to be a familiar trend that. The last project was also a 'just hack it in and get it working' kinda deal.
              McCoy: "Medical men are trained in logic."
              Spock: "Trained? Judging from you, I would have guessed it was trial and error."

              Comment

              Working...
              X