I realize that some people think it is crazy to re-implement all the UI functionality of HTML in a canvas-based framework (and there are some stackoverflow questions that suggest this), but is anyone actually working on a library like this?
To clarify, the library would render all UI elements like edit boxes, labels, buttons, combo boxes, list views, etc. on the canvas directly. There would be no HTML or CSS.
I stumbled upon this idea today. Found the library Zebra. Haven't tried it out yet.
https://zebkit.org/
For web apps I think this makes perfect sense. HTML/CSS is just not good enough to create stable apps easily. The DOM and layouts are just too quirky and the performance too low.
What we need is something like Silverlight but without the plugin. Stable components and a great framework.
Canvas apps could be made just as accessible as html web apps. Probably more so even.
Perhaps WebGL is even better, its performance is definitely better than Canvas if done properly.
Thunderhead was a mozilla experiment built along with bespin (now skywriter).
From the project description:
Thunderhead is a Mozilla Labs experiment to explore a JavaScript-based
GUI toolkit that works with DOM elements and canvas to render
components.
The problem is accessibility, canvas just isn't.
I've just reviewed zebkit.com today. Amazing and absolutely not crazy, rather essential. Try running most DOM node trees on a mobile device and you will soon know this is true. Then in contrast run the Zebkit kitchen sink demo and be shocked. You might have to reconsider your projects approach.
Coming from Java to HTML5 I definitely see some nice OOP at play in the Zebkit API, it is needed to provide the simple canvas some powerful structure. Also I really like the JSON support, it acts much like a CSS format for the canvas. Using JSON this way fits well into the Web Component mindset and the practicality of HTML partials. There are a lot of goodies in this API.
In the end all ways of producing graphics for the Web render pixels anyways. Maybe we have just added to many abstractions between the logic we what to produce and the end screen to realize this fact. With Zebkit it feels like your almost working at the native level, plus it adds in all the graces of Javascript and JSON, sweet indeed. Plus your free to mix and match in DOM as desired.
Now there is Flutter's CanvasKit renderer. Google docs is moving to Canvas.
Related
I have been following the expressive web site. I have done some R&D of the site on the google but did n't get the satisfactory link that explains the concept that how the site is being made.
Although i know that it is made in html5, css3 but i was looking for some sample code that will help me to do some coding stuff of it.
Can anyone help me into this?
"the expressive web" was made to impress developers with the new amazing creative possibilities of the HTML5 and CSS3. But it is a toy example. Underlying technology is as simple as bunch of divs animated and transformed with the css. It's all about tedious production and impressive artistic effort.
The most suitable technology for this kind of tasks is WebGL. And it's, actually, will be easier to implement.
Here some reasons to consider:
At this moment HTML5 + CSS realisation, probably, has large coverage. But still you can't run it on older browsers or use shims because it's too heavy and it even don't work properly in all modern browsers. So you will end up with flash\html5 video fallback anyway.
It's really bad for the DOM render time.
This way you are stuck with the simple geometry and no lighting effects or shaders.
You can implement it with the simple particle system or morphing and almost all of your code will be executed on the GPU so it will have pereformence really close to native code and will save battery for the handhelds.
It's really inextensible. You can't just scale up for desktops and scale down for handheld. But with WebGL it's trivial including simplifying of the geometry.
CSS + HTML has performance overhead because every side of an object is part of the DOM.
There is no tools(as far as i know) to work with assets for this kind of graphic effects. But you can find plenty of software(including free ones) to work with such frameworks as three.js or other common 3D pipeline tools including really simple to use declarative frameworks like http://www.x3dom.org/
I have a deep experience about WPF, XAML, etc. However, I'd need to create something in HTML/CSS/JS.
In WPF, but also in Silverlight, there is a very versatile element which is the "Grid". It's essentially a list hosting any kind of visual object, which will be arranged accordingly to the row/column collection definitions.
Here is a (simple IMHO) example for the non-xaml addicted:
http://wpftutorial.net/GridLayout.html
I believe it's the most important control for managing the layout of the visual.
Now, I'm wondering whether is there any equivalent "component" for the web world, possibly simple and clean: not tons of code for such a simple problem. In other words, I don't want to rely on frameworks such as ASP.Net, ExtJS or else. Just a guideline, with a minimal HTML/CSS/JS section.
It's fine relying on the most recent browsers.
Many thanks in advance.
Well, I found one by myself, although it's still under development: at the moment seems that only IE10 implements it.
http://ie.microsoft.com/testdrive/Graphics/hands-on-css3/hands-on_grid.htm
I really hope this feature won't be trashed in a short.
Is there any Canvas library that is like d3.js (is svg library). I have a website here and I coded a graph with svg elements however it is not efficient on smart phone's browsers and works so slow. I now, want to change it with a 2d canvas type of it and see whether it is better or not. Can you suggest a canvas library that is useful for this purpose?
Thanks...
D3 is not necessarily an svg only library - svg is used in many cases, but the library can do any kind of representations that you would like to make. See this example of parallel coordinates using canvas in D3, by Kai Chang: http://bl.ocks.org/2409451
Also see here for some discussion on performance issues, etc, that might be helpful: https://groups.google.com/d/topic/d3-js/mtlTsGCULVQ/discussion
I know I am late to the party, but times have changed, and I believe this question deserves an updated answer. SVG performance has improved a lot over the years and especially for the non-trivial graph-like visualizations it often gives superior performance; but it really depends on the exact use-case: If the visualization is simple and consists of thousands of elements, especially on mobile, Canvas may be the faster option. If the visualization is almost trivial, WebGL gives the best performance and beats Canvas hands-down - especially on mobile!
However WebGL especially and also Canvas are a bit harder to use than the declarative approach that SVG uses. Things like CSS animations and transitions are easy to do with SVG and give good performance due to being hardware accelerated and totally independent of JavaScript performance. Canvas and WebGL always require JavaScript.
If you take a look at the commercial graph drawing library yFiles for HTML you will see that it offers all three technologies at the same time. This is because all three can be the best choice, depending on the exact use-case.
There is a blog entry that compares the performance of SVG, Canvas, and WebGL especially in the context of graph visualization. It compares various graph sizes and categories of devices. The "conclusion" is that there is not a clear winner. Often times the combination of all three technologies gives the best results. For smaller graphs, though, SVG most of the time gives very good results and is a pleasure to work with. That's also the reason why d3.js has its focus on SVG, rather than Canvas and WebGL, I would say.
There is an interactive demo linked from that blog entry that let's you play with the various technologies and see their strengths and weaknesses. Of course the demo mainly compares the three technologies used in that specific library so your results may vary, but they spent a lot of time optimizing all three technologies in that library, so I think the results are not too biased.
Disclaimer: I work for the company that creates the above mentioned library, but I do not represent my employer here on SO. I think what I said should be valid not just for that library.
For the Samsung Olympic Genome Project facebook app, we used http://thejit.org to make the force directed graph style animation for the app. It's heavily modified by me and others on my team of course, and only plays a very small part in the app, but it's quite a powerful framework.
Chart.js is a javascript library that just came out that creates charts using HTML5 for rendering. Its not as feature inclusive as D3, but it is working to become exactly that in the future. http://www.chartjs.org/
Take a look at Cytoscape.JS which uses a HTML5 canvas for rendering. At the time of writing this it's in its infancy but the project seems promising. According to its wiki the library supports both desktop and mobile browsers:
Cytoscape.js is easily integrated into your webapp, especially since
Cytoscape.js supports both desktop browsers, like Chrome, and mobile
browsers, like on the iPad.
I've got a good amount of experience with 2D rendering on <canvas>, however there is a project coming up where I need to have a 3D object rotating left along its centre (I believe z-axis). Luckily this is all I need to achieve. The page will run on iPads at an upcoming event.
I'm not experienced with any 3D software/libraries aside from minimal playing around with Papervision 3D in Flash.
I can pick things up pretty easily, so:
Are there any frameworks I can use to take care of the initial stuff?
Are there any open-source projects that include the code to do the above? If not, tutorials to do it are fine.
How do I create the 3D object? Is this the same as a BitmapMaterial in Papervision?
Threejs can be a good library to start with too.
Their "getting started" article is awesome.
There's a GLGE, for example.
GLGE is a javascript library intended to ease the use of WebGL; which is basically a native browser javascript API giving direct access to openGL ES2, allowing for the use of hardware accelerated 2D/3D applications without having to download any plugins.
The aim of GLGE is to mask the involved nature of WebGL from the web developer, who can then spend his/her time creating richer content for the web.
Three.js is pretty awesome, just wanted to point you to this github repo as well
http://lamberta.github.com/html5-animation/ check out the examples in part 4.
Billy Lamberta authored Foundation HTML5 Animation with JavaScript, which is a great book teaching you the math/etc. behind doing things like this if you are interesting in getting a little deeper understanding.
I know that html 5 canvas will allow for paint style image creating and manipulation, but what use does this really have? I just don't really understand all the hype when the practice use seems limited.
Thanks
GAMES! That's what I'm using it for. Diagonal lines, spinning cubes, triangles (all previously very difficult in basic HTML) are now easy. Combine this with Node.js and you've got COMET backed multi-player GAMES!!! All without the user needing to download Flash or Silverlight or whatever...
Here's some sources on the subject:
http://www.canvasdemos.com/type/games/
Creating a live checkers-like web app with PHP, JS, CSS and HTML?
Other than this, I guess you could use it to "Paint" your website. Instead of using images for gradients, buttons, whatever you could use the canvas instead. Could be more performant since it would reduce the amount of files the client needs to download, but do you really want to programmatically draw all your images??? Not sure about that, but for some images, like gradients, I could see it being useful.
Oh! I would daresay that you haven't seen good HTML5 + CSS3 implementations.
Check these wonders on Canvas.
CSS3-Man
Ball Droppings ( Bonus: View Source to see the wonderfully commented source code)
And if that didn't leave you dumbstruck, check out the wonderful website http://www.chromeexperiments.com for pretty nifty canvas works.
Plus, do you know that there is a new library called processing.js for these kind of stuff.
You just don't see it production much because, browsers haven't fully adopted HTML5 yet. But they soon will. That being said, please open all these examples on a Web-Kit Browser (Google Chrome or Apple Safari) for better results.