How to create modeling tool in html5 - javascript

A diagram tool in html 5 with drag and drop functionality including the connectors.
consider a drawing tool with rectangle circle and a data store getting connected through arrows on mouse clicks and then generating a XML file for the same.

I will recommend you to use SVG, which specification is accessible here; along with DOM & CSS
[EDIT]
Why not Canvas & its 2D API? Because the export to (png, ...) is not as efficient and powerful as SVG. After all, it's just a modeling tool

The OP may want to try gojs.
gojs is a sophisticated JavaScript library for drawing diagrams utilising the html canvas, available from http://www.nwoods.com/products/gojs/. It is not a 'free' product but there is a free-to-use trial version that is fully functional save for displaying a watermark on the diagram.
It abstracts from primitive drawing operations to a much higher level and offers many diagram type (org charts, flow diagrams, etc, etc) that are quick to create and live rather than simply being drawings. It uses a model-view approach to diagramming which is very productive. It supports drag and drop within diagrams and from a palette of components.
Their support is good too.
I have no relationship to the vendor, other than being a happy customer.

Related

Suitable library for combining with D3js , to allowing drawing to webgl (2D)

Here is what i am trying to do :
http://mbostock.github.com/d3/talk/20111116/iris-splom.html
But i want to do that in webgl 2d (because SVG performance is very slow, randering 10k SVG only already drops to 12 fps)
On a quick search i found several webgl-2d libs : cocos2d-html5 , pixijs,Three.js and webgl-2d(abandoned?)
They seems to be pretty easy but what i want to do is data visualization.cocos and pixijs are 2d game libraries. I am new to webgl and those libraries so experts at SO can you guys recommend ?
summary of things i need:
Interaction :
Rectangular selection inside plots. Click to select on Some elements.
Zoom and Pan Support (Semitic Zooming if possible)
Renderer :
WebGL2d (according to benchmarks webgl is fastest)
Based on your requirements and summary, I would recommend the latest release of Cocos2D-html5 which includes WebGL rendering support. This is as simple as changing the rendering setting from Canvas to WebGL in the cocos2d.js settings file. For Example, in HelloHTML5World/cocos2d.js change renderMode to 2 for WebGL based rendering.
renderMode:0, //Choose of RenderMode: 0(default), 1(Canvas only), 2(WebGL only)
Cocos2d-html5 is more precisely a graphics library and & maybe construed as a complete game library only in combination with the (default) chipmunk or box2d game physics libraries.
Does it support rectangular selection, or zoom and pan? Yes, you can extend the existing libraries to implement these behaviours.
Other advantage of Cocos2d-html5 platform is added support for visual graphics editing with Cocosbuilder and cross-platform native support (iOS, Android etc) for same codebase with Javascript bindings.
If you have specific platform questions, these can be answered in better detail with code.
You may want to look at the JS reference and the cocos2d-html5 forum for getting started.
Update1: Looked at your data visualization code for iris dataset, The plots are housed in a svg element, with tiny circles plotting each datapoint according to x,y coordinates. These can be accomplished in Cocos2d too via x,y coordinates, grids, boxes with varying opacity and the tiny circles for the data points. Import your iris dataset in json/xmll/csv format via javascript code and plot via above cocos2d methods. Rectangle selection via javascript event callbacks & mousehandler methods and corresponding update of canvas scene.
Update2: On second thoughts, if you find the learning curve for cocos2d steep, you may better restrict yourself to a charting only library which is WebGL based. This project VivaGraphJS seems suitable with high performance being WebGL based.
Also, please ask questions preferably in this format, what you tried in code, what was the expected output, what you got instead. SO is not meant for comparison of libraries. WebGL is a rendering method. The switch, for example in three.js is as simple as
renderer = new THREE.WebGLRenderer();
instead of the canvas one:
renderer = new THREE.CanvasRenderer();
resulting in higher performance.

Graphical editor using Javascript

I want to make an online card-making application. It should basically allow users to place available images into the template of the card, write text on it and decorate it - basic card customization. What javascript graphics library would be useful for this project ? Finally I would like to have a high resolution/vector image as the output which can be printed easily.
Raphael is great for SVG, etc. http://raphaeljs.com
To have a high resolution/vector image, you have to work with SVG (Scalable Vector Graphics), so far the web browser only support this. There are two ways you can do these.
Looking up for canvas libraries. I prefer Raphael as it supports SVG and animations as well.
With HTML5 and its Canvas features also you can create such system.

Computational Geometry Javascript

I´m thinking on coding a couple of examples for my Computational Geometry class (2D), I want to use html5 and javascript.
Can anyone recommend a javascript library or does html5 has everything I need to start?
I will be mostly working with points and lines, but it would be nice to have something that draws a Cartesian plane as a reference and maybe some data structures ready to use.
JSXGraph
Specifically focuses on dynamic geometry and functions visualization. Comes from the academia. Authors – a German university.
Uses SVG (with fallback to Canvas and VML for IE). Works on iOS and Android.
The API is a very abstracted SVG API. It operates on figures and groups of figures, tangents, hyperbolae &c.
Has nice documentation.
SVG is not considered part of HTML5, but it's worth looking at. It's flexible, ubiquitous and, I think, vector graphics is a better option for geometry than bitmaps (Canvas).
I think either raphael should be useful:
Raphaël is 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.
http://raphaeljs.com/
or processing.js
Processing.js is the sister project of the popular Processing visual programming language, designed for the web. Processing.js makes your data visualizations, digital art, interactive animations, educational graphs, video games, etc. work using web standards and without any plug-ins.
http://processingjs.org/
Your best bet is to use <canvas> and explore the API. It should have the basic primitives you need.
I can recommend EaselJS because I used it many times to quickly create dynamic drawings, such as triangles, circles, arcs etc. I was even writing a simple draw-with-text tool for students, called Geodrafter.
However, if you want to add e. g. sliders and have a dynamic environment (easily dragging points, for instance), then JSXGraph is a better choice since they provide a variety of components for this. The gallery in their wiki give some good ideas.
And as said above: JSXGraph is based on vector graphics, which will always produce exact graphics. EaselJS is based on canvas and can lead to blurry lines.

What is the best approach to producing graphical charts in a browser?

I've started a new open source project aimed at providing a quality project management experience. To do this, I need access to a set of chart tools (Flash is off the table), and very specifically one that includes a Gantt chart. I've done my homework and shopped around the web and I've more or less come to the conclusion that what I want doesn't exist, at least not for free. So chances are I'm going to have to write this from scratch.
If I was going to create a Gantt chart with which people could interact with (which I'm assuming means having excellent DOM support), then what technology would I use? Should I go with SVG? Or HTML5 Canvas? Something else? Your suggestions are much appreciated.
Also, a requirement would be that whatever library I use needs to be actively supported in the community (i.e. no dead projects).
I would not think there would be many free options as this is a niche-need.
JS Option:
http://www.jsgantt.com/
http://code.google.com/p/flot/
Promising Perl modules:
http://cpansearch.perl.org/src/DARNOLD/DBD-Chart-0.82/dbdchart.html
http://search.cpan.org/~awestholm/Project-Gantt-1.03/Gantt.pm
Update:
There's been amazing advancements in terms of interactive/web charts in the past few years. Shortly before your question was asked, D3.js was created, which has become a generally accepted library, which uses SVG to implement visualizations. Here's a basic example and a more advanced implementation using D3. Note; Gantt charting is still in its infancy; D3 will most likely revisit it in the future.
The argument of Canvas vs SVG is one that has been considered many times. You should read this article by Microsoft; How to Choose Between Canvas and SVG for your Site. Basically, if you have many elements you have to display, Canvas will perform much better. If accessibility is a priority, SVG is better.
In terms of working with Canvas vs SVG, canvas feels more fluid and it is certainly more capable with WebGL, but SVG is more transportable. They both have their merits.
If you're going to make your own, I'd recommend the SVG library Raphaël, which allows you to draw things using SVG fairly easily. It's also simple to make mouse event handlers and other things, which you could use to make it interactive.
I haven't had much experience creating interactive graphics with canvas, but my instinct is that it would be hard to handle mouse events since you don't have "elements" to add event listeners to.

Javascript image handling library

I need to some extra functionalities to a website regarding image handling.
The user must be able to pane, zoom and rotate images on a image gallery.
Is there any free javascript library/framework that handles this actions?
Raphaël—JavaScript Library
is a good one
Raphaël is 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.
Raphaël uses the SVG W3C
Recommendation and VML as a base for
creating graphics. This means every
graphical object you create is also a
DOM object, so you can attach
JavaScript event handlers or modify
them later. Raphaël’s goal is to
provide an adapter that will make
drawing vector art compatible
cross-browser and easy.
loupe.js has an excellent zoom functionality.
http://www.pixastic.com/ --> looks real nice, I am just curious about other opinions as this is an area I am new at.

Categories