I'm building a business application which mostly involves tables and other typical form elements. Due to the nature of my application however, I need to place groups of these elements together in a dynamic tree structure which will take up all of the available screen real estate. If real estate is low, there will be some form of smart scrolling allowing users to focus on certain areas of the tree. It could be called an advanced data visualization web form.
Historically, I would have accomplished this by simply using divs and javascript. The canvas element however seems like a more logical way to build my structure. Most uses of the canvas element that I can find are however geared towards graphics and animations (mostly games). Is canvas overkill for this? Will I benefit from using it? Are there alternatives?
Yes, canvas is overkill. It is very much a drawing board and not much more. It is certainly not something that I would expect to create user controls in. Games etc. are more suited as they aren't really standard user controls and wouldn't be expected to behave as such.
A tree structure could easily be implemented with a series of nested uls. Using some JavaScript to expand collapse them by adding and removing classes.
Here is a nice jQuery plugin for you to use or get some ideas of how you could use it.
Edit:
I would stay away from canvas just because of the overhead of the drawing. If you can extend a standard JavaScript treeview to add more functionality this would seem like the best option ot me. Creating controls from scratch in canvas is no small feat.
Edit2 (Post mockup):
This just looks like a multi-part form to me, with hidden forms/areas which are displayed as apropriately. This is far too common to require creating this with canvas.
Canvas is not fully supported in all browsers yet. I recommend using either Jquery or another framework.
Related
I've designed a small game in canvas, and I'd like to add an interface to it (just a standard thing with menu options like sound toggling and other settings, etc).
In Angry Birds html5 (http://chrome.angrybirds.com) they don't have any html elements other than canvas to handle their interface.
I was just wondering, would it be bad practise for me to have my entire game designed in html5 canvas, and then the user interface totally designed using html elements like divs, with css styling?
I suppose the alternative would be somehow writing some sort of collision system to determine where the user clicks on the screen.
I was hoping someone could point me in the right direction here, and tell me which method (pure canvas, or with html elements) would be best for my canvas game. My 100% concern here is performance, testing both would take days and would be a tremendous pain.enter code here
It's not so difficult to determine where the user clicked on the canvas. I use the library gee which makes it really easy. Just follow the examples in the API to create your gee canvas and always access mouse position (g.mouseX, g.mouseY) and mouse actions (g.mousedrag, g.mousedown, g.mouseover, ecc...). Off course, it also handles automatic refresh for animation (g.draw).
About your question: its just up to you if to make the UI in the canvas or outside with CSS. Usually, you dont need to care about performance in the user interface and there is no "better approach": your performance depends on how you implement your code. A bad implementation may lead to performance lags, regardless of the technology you're using to interface it.
I'm implementing a HTML5 game using canvas. Now I'm thinking about making all text overlays like tooltips, speechbubbles, infowindows and so on using HTML elements with position absolute over the canvas. So I can use many effects and transitions CSS3 offers.
But I'm not sure about performance. These overlays have to be added and removed frecuently (is something MMORPG like, so there will be a lot of speechbubbles and so on).
There are probably 2 questions regarding performance:
DOM traversal to add/remove. Maybe a cache can help?
HTML and CSS3 itself.
The other option is to manage these elements in the canvas itself, drawing them each frame. But maybe I have then again a performance penalty, because of the extra code, timeouts and stuff I would have to add, to achieve similar effects like in CSS3. And traversal of some data structure would be needed anyways.
Any advices, opinions, experiences?
Thanks in advance.
Consider using only one of the mentioned two technology. May be you can release that application in mobile or tablet. I think on these devices would be issues with handling both the same time. And another thing: if you stay in canvas there would be no worries about compatibility. Its not a techy but a thought-provoking answer.
The single best reason for using the DOM for UI elements in HTML5 games is event handling.
If you draw everything on canvas you will need to write your own logic to handle clicks and decide what has been clicked on, which can soon become very complex, expecialy if you have multiple layers of interface.
With DOM elements (especially when using a library like jQuery) this is trivial, and you can create a rich and interactive UI with minimal effort.
The only downside I can think of is that you may encounter browser inconsistencies, especially if using CSS3, but again jQuery will help with this.
I suppose another downside is that once you go down the DOM route, your game is always going to be a browser game, whereas if it was 100% canvas, there would always be the possibility of porting the code to another language and making it native, but I guess that would only be a downside for some people.
One way to approach this is to use a "dynamic" image map behind your canvas object. Then you can use the dom as required. Note you will need to pass the clicks on the canvas through to the image map.
What is the correct approach if you plan to implement a (complex, interactive) network diagramm in "HTML5", which is part of a modelling tool - for example to let the user design a workflow?
Is SVG the right approach or using directly Javascript/Canvas?. Is there any productive application out there, which has proved that this is doable in HTML5 (the network model can be quite complex), especially regarding performance?
I do not need any implementation details, just a hint to the 'correct' technology if you would be 'forced' to do this in HTML5...
Thanks.
svg now has support from ie9. canvas is supported in most modern browsers and css is supported by all.
svg has the advantage of beeing scalable (the 'image' is a vector map, so the user can have it in every size he prefers), but the performance of beeing rendered is a bit crappy. You can bind some events to the elements..
canvas is like GDLib or ImageMagick, you have a white sheet, where you can plot onto. So if you do a change, you first have to clear the canvas and redraw everything. You don't know onto what element a user has clicked onto and only can bind events generally for the whole canvas element.
Using HTML and the DOM with CSS would be an alternative, since you just could start moving elements of the network arround and can bind events to nodes of your network. But lines are quite hard to implement (can use a rotated div with top-border)
I personally would go for a hybrid between svg and plain html, but then again, I don't know every use-case of your application.
We are in the research phase of a new project which will be used in the advertising arena. Users create a bunch of items that will play in different regions on the screen and can then swap out animations (images/texts etc).
We are pushing for an HTML5 solution which will be responsible for the rendering but a new proposal is to just use SVG (and SMIL).
I know you can embed SVG content in HTML5 pages and there are numerous links comparing the canvas and SVG.
What I need to know is what are the pros and cons of going for a solution which is based on HTML5 compared with a solution that is based solely on SVG? Also for the long term plans of the project, I can see HTML5 as allowing so much more.
Also I am not sure what tooling support is available for users using SVG. Most of items must be templatable (changing text/images), is this at all possible?
TIA
JD
I've recently had an opportunity to try Raphaël, an SVG-based solution, and Flot, an canvas-based solution. Both provide emulation on browsers that don't support the primary format: Raphaël uses VML on IE, and Flot uses excanvas.
Both SVG and canvas have advantages and disadvantages. Both can draw shapes, paths, and embed images, but canvas can do pixel-level manipulation and can draw a lot more sprites quickly, which is why it's becoming popular for HTML5 games. SVG has more powerful paths, although you'll have to learn the syntax.
SVG has another really interesting advantage: elements on a chart are DOM nodes, so it can use browser mouse and click events as well as add, remove, or change an individual node without redrawing the whole chart. Doing the same thing on a canvas involves manually keeping track of the locations of every visual element and redrawing the whole canvas when stuff moves. (Canvas does let you do double buffering and caching stuff sop it is possible to redraw it quickly, but the logic of keeping track of where everything is is still on you.)
For that reason, I think SVG is a better choice for interactive graphs and charts, while canvas is more appropriate for advanced graphics. In either case, cross-platform compatibility is a concern and a abstraction layer is indicated.
SVG is potentially more search-engine friendly and accessible than HTML5 <canvas>, in that SVG elements and text can be (potentially -- not sure if they actually do!) indexed and read out to a screenreader, user whilst <canvas> is initially just a bitmap and would need additional content to be created if one of these ads was to be presented as part of a web page. OTOH, if it's a game-like tool that's not for content creation then perhaps that's not an issue ... perhaps give more details?
I am web-developer. I would like to integrate 3D Content into my web-site. The level of integration should allow something like 3D Cube floating above HTML Content. Moreover, I want 3D Content to be interactive, i.e. one should be able to click on certain side of the cube and get some JavaScript code executed in same way as if somebody clicked a button.
I have seen some demos with CSS3 3D Transforms in HTML 5. It's even possible to render HTML Content on 3D Objects like images and buttons, but they don't seem to allow something as sophisticated as floating cube.
Is it possible today? Which technologies should I use?
After some research online found XML3D and X3DOM projects. They offer integration with DOM and JavaScript, XML-like scene description and even programmable shaders. Seems that it's exactly what I was looking for, however both projects are still in development :(.
The best options you have available today are CSS transformations, and/or the Canvas element. With CSS you can perform various transformations, even including the construction of an animated cube (easier with preserve-3d).