Best library for furniture simulator

[spinnerbox]

I was just wondering which Canvas/JS framework would best fit for building furniture simulator.

I could technically build it with jQuery but I need something that will ease my work.

Here is a screenshot I made:

This is built with Flash but I need to build in JS.

WHat do you think, would Phaser be best fit here?

There is snap to objects, some spritesheet logic to simulate fake 3D and drag and drop elements to place.

But yes it is for Canvas processing. The dashboard top would be html input fields I guess, even better if I could make them inside the canvas.

 

[mattstyles]

Why put all that UI in a canvas? I can't see any benefit but there are plenty of cons—that sort of UI is a near-perfect fit for HTML/CSS, even more so if you use some sort of UI framework to help manage UI events (building something on jQuery is fine, but jQuery is a lib not a framework so it's up to you how involved in the actual framework you want to get, personally, I prefer libs to framework but everyone is different).

As far as I can see, you don't need all of Phaser, you just want the rendering, in which case why not just use Pixi (or another renderer)? If you used Phaser I'm not sure you'd use 80% of it, leaving you with just the rendering stuff.

To be honest the rendering does not look very heavyweight so, again, I'm not sure why you think the DOM wouldn't be good enough?

If your furniture pieces accept a lot of distortions (i.e. stretch, maybe skew) then it might be beneficial to think of rendering as SVG, in which case something like d3 might be better than canvas. Tough call without knowing more of what you want to do.

You have 2 main tasks (which are common to almost all applications), gather input via the UI and render the output. Unlike games this delineation is really clear, and unlike complex applications with multiple screens, you have a quite well defined break between inputs and outputs.

Your furniture is your end point, described in data (each piece, each location etc), your UI mutates that data and your 'screen' renders it (read-only). When assessing which tech to use I'd consider both sides of that puzzle, and only pick a larger framework (like Phaser) if it adequately covers requirements of both sides of the puzzle.

[spinnerbox]

Yes I though the input fields would be in html and the app would just access their value trough html.

The main reason why I asked this question is, have somebody done similar thing before, just to use as scheme and perhaps learn if there are suitable librarires/frameworks for similar thing.

As I was going trough the specs of this app I think I can build it with Phaser. It contains 2D drawing of rectangles and arcs. Probably will need help how to draw those arcs on the sides, maybe a point to point path.

At the beginning it didn't seem to me like a game engine would fit, but Phaser has all the necessary 2D drawing tools.

And yes, input/output is separated. There will be fields where to input data and the app should generate output according to those rules. In addition some parts should be editable using drag and drop.

[mattstyles]

My point is that Phaser just uses Pixi for those drawing operations, it then adds a load of other stuff specifically for managing game states, keyboard (other) input devices, sound, physics etc etc You don't need any of that stuff, you just need something to handle input, which the DOM does just fine (and adds loads of helpers for managing that input) and you need the renderer, which is Pixi. Why add the overhead of all the other stuff that Phaser handles that you don't need? Just use the DOM to manage input and Pixi to handle rendering.

Pixi probably isn't the best renderer though, its primary concern is not primitive canvas drawing ops. I can't offer a better primitive renderer though, not too much call for it, the canvas API is pretty clean anyway and a lot of people with those concerns go for svg and something like d3 so not too much effort in using canvas for that.

[Milton]

Maybe do a quick port to Haxe (OpenFL). That's pretty much AS3, and you could even use Feathers for the UI.
And then just see what renderer you like, it has Canvas, DOM, and SVG, independent of how you program it... 

[spinnerbox]

Yes maybe d3.js would be better approach. My client said the data is in SVG.

[spinnerbox]

Still gonna go with Phaser. Pixi doesn't handle scenes but there might be 3-4 of those so Phaser is better option.

I will need time to study D3 and the data will not be in SVG but in JSON