I wanted to build a product customizer similar to http://www.getuncommon.com. But instead of Flash, I will utilize HTML5 canvas and Javascript.
Is there a library which I can use to create and achieve similar editor/product customizer as Uncommon?
I did look at jQuery UI but it is seem more focused on interface than creating my own editor.
Take a look at Fabric.js canvas library.
We're using it in production for design editor on printio.ru
I did something similar to this a while ago.
I used JQuery and Raphael JS. Raphael uses VML in Internet Explorer and SVG and Canvas in other browsers making it a very good cross-browser compatible option.
A good demo of a project using Raphael can be found here.
I used a lot of code from this demo to develop my own tool.
Hope that helps.
I used kineticjs to create an E-Card editor. It was a great experience using the library.
Related
I like to load a svg into my qooxdoo gui, link some event handlers to svg elements (pointerdown, pointermove) and manipulate the svg elements from outside (style.transform=rotate). So I need access to the svg elements from the qooxdoo level. But how to embed the svg into qooxdoo not only as an image?
Is there support for handling a svg in qooxdoo?
I found a way how to embed svg in html5. Here you can embed the svg dom-structure by the tag: object. This is what I am looking for in qooxdoo.
And I found a qooxdoo svg-contrib; But this is some years old (2011) and I am wondering if it is already integrated into qooxdoo or if it is still the best starting point?
D3.js is a good module to manipulate svg objects in Javascript. However, I'm not sure whether you can integrate the module to qooxdoo framework.
Having used snap.svg, svg.js, raphael and fabric.js for interactive as well as graphic production stuff (engineering data to PDF reports) I'm currently relying on fabric.js only, allowing for easy dynamic loading of SVG, a pretty good transition to HTML5 canvas and with that a good level of possible interaction with controls on the page. All of these libraries come with quite a learning curve, but using Inkscape as the basic SVG templating tool and fabric.js as the rendering library lets you streamline the production process quite nicely.
I am trying to implement a drawing Web UI(Which is like MS Paint) in HTML5. I have started to work with the HTML5 canvas and with some libraries. I have tried to use http://kineticjs.com/ and http://raphaeljs.com/ to do the task. Is there a other good library like that to do the task? Or using canvas to implement this is correct?
check this site, it's from John Resig.
http://processingjs.org/
I have to develop an image viewer application. The designed application should have the following features
Zoom in functionality
Zoom out functionality
Magnifying functionality
Pan functionality
Image overview functionality
I have to develop the application in Asp.net application. I have the following questions
What will be the better method to develop such application , I mean Whether it is implemented using Asp.net controls or standard HTML controls
Have any scope of HTML5 in developing such application?
Can i get any customizable open source project written in javascript or jQuery?
My answers to your questions:
I would use HTML, since you don't need anything from the server.
There is, you can search google for info.
Look at the info below.
I would try the following steps:
Look for examples of the required features.
Strip these examples down and build them up again according to your requirements.
Create a holder for the image. You can load the image from the server with jQuery and AJAX
Implement controls for zooming, panning. Use the implementation you created in step 2
There is alot of information to be found on the internet. Some examples are:
Zooming
http://www.tripwiremagazine.com/2012/07/jquery-image-zoom.html
Panning
http://manos.malihu.gr/jquery-image-panning
Overview
http://www.designzzz.com/jquery-slide-show-image-gallery-tutorials-downloads/
Tutorial for pan and zooming with HTML5 canvas
http://my.safaribooksonline.com/book/web-development/html/9781449308032/images-on-the-canvas/zooming_and_panning_an_image
For me,
I would use HTML,
Use HTML5 and CSS3 if you can,
Yes, there are plenty. Just type what you need. It seems what you are building is a image slider/gallery. Plenty of those on the web. Just look for it.
If you have to build it from scratch, what you could do is research, these css properties. scale, zoom, and transitions.
There you go, hope I pointed you in the right direction.
I would like to replicate this D3js Dynamic Tree example using Raphael. I am not able to use this example in IE8 since it doesn't support SVG. I need to find a alternative to this problem.
I have already been trying this using d34raphael but there is not much documentation for me to get something working except for only a couple of basic examples.
Any suggestions on how to convert this Dynamic tree into Raphael would be much appreciated.
You can build this visualization with Protovis. The example on the Protovis page page isn't dynamic but there are some examples of dynamic trees in the tests.
Protovis has pretty good MSIE 7/8 support through a VML rendering add-on: Protovis-MSIE (disclaimer: I am the author of this).
I really want something that is eye catching and modern. I like how Digg does the Digg swarm (http://labs.digg.com/swarm/)
Have a look at
http://raphaeljs.com/
a small JavaScript library that should simplify your work with vector graphics on the web. If you want to create your own specific chart or image crop and rotate widget, for example, you can achieve it simply and easily with this library.
I don't know if it is the best.
Take a look at flot; http://code.google.com/p/flot/. You can check out some pretty cool-looking implementations of flot, here.
Flot is a pure Javascript plotting
library for jQuery. It produces
graphical plots of arbitrary datasets
on-the-fly client-side.
The focus is on simple usage (all
settings are optional), attractive
looks and interactive features like
zooming and mouse tracking.
The plugin works with Internet
Explorer 6/7/8, Firefox 2.x+, Safari
3.0+, Opera 9.5+ and Konqueror 4.x+ with the HTML canvas tag (the excanvas
Javascript emulation helper is used
for IE).
Protovis is an option.
Edit:
The team behind Protovis has since created D3, so this is likely a better option than Protovis.