framework to create tooltip (createjs and kineticjs) - javascript

I'm searching for a JS framework that is compatible with CreateJS and KineticJS to create tooltips on a canvas.
I'm making an app that uses both CreateJSs and KineticJS and I want to draw tooltips on both of them (without using two libraries).
Thank you.

There are dozens (if not hundreds) of tooltip scripts out there—just ask google!
I assume that since you want to support both createJS and kineticJS that you must have already coded the trigger that requests a tooltip.
With that in mind, here is one tooltip library: http://www.opentip.org/documentation.html
It’s open-source so you can use/modify it freely.
It’s controlled by javascript so you have createJS/kineticJS independence while still working in JS.
It uses html canvas to display the tip so customizations should be familiar to you.
The tip-canvas is temporary and it floats so it should not interfere with your main canvas.
It allows you to offset the tooltip, so your code can exactly position the tip as you need.

Related

How to move an icon through different points?

This website has an excellent animated map showing the migration patterns of wildebeest in the Serengeti. Unfortunately, they animated their map using Flash.
I wanted to know whether there were alternatives for doing something similar, perhaps with Javascript. I found a plugin called Two.js however the documentation isn't great and it seems to be a bit overkill for what I need.
Does anyone know of any good resources or examples they could kindly link me to?
I think you have two options:
Using HTML5 canvas and animate your objects using window.requestAnimationFrame();
Animate the dom, here you could use GSAP or Web Animation API.
With HTML5 canvas you work with raster image (pixels) instead using the DOM you could animate any HTML elements including also SVG which is vector.

jsPlumb and Fabric.js integration

I have built a web application in fabric.js where the user adds and draws several graphical elements over an originally blank canvas. My application has arrived to the point in which some of these graphical elements need to be interactively connected (i.e. connected by the user using the mouse). I am trying to design the best way to include these connections in the canvas since, due to aesthetic considerations, drawing lines with fabric might not be best solution for this.
I have run into jsPlumb and found several examples of connections between div and other dom elements. My specific question is: Is it possible to use the jsPlumb functionalities within the objects that fabric.js draws in the canvas. If so, does anyone have an example of this? In case this integration between jsPlumb and fabric.js is not possible, what would be the best way to achieve this?
Many thanks to all in advance.
IMHO, this integration doesn't make much sense.
Everything that fabricjs provides can be done using `jsPlumb', of course animation would require a bit of coding, but it's fairly possible.
Another reason is fabricjs deals with canvas, whereas jsPlumb deals with DOM elements, their integration would be more pain, than coding the actual requirement entirely in jsPlumb.

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.

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.

What are some of the best ways to plot/draw vector graphics on a HTML page?

I'm trying out some dynamic web page background generation using lines and text.
Take a look at my demo at http://74er.net/labs/lines.html (just focus on the yellow line).
It's a lame and inefficient method by literally creating a <span> element with 1 X 1 size and a yellow background with the X,Y position based on an ellispe formula.
My requirements is for the line creation are fairly simple (or rather straightforward):
must be created at client-side and not a dynamic image generated by server scripts
can be created based on a simple formula (circle, ellispe or just a straight line)
can be contained in a DOM element (e.g. DIV so that I can layer it as a background)
No HTML5 canvas technique (simply because it should be rendered on non-HTML5 compliant browsers)
Not too taxing on the browser like my current implementation
There's not need for:
really smooth curves (though that will be welcomed)
dotted/dashed (I'll like that as well if feasible)
Based on the above, I am almost certain SVG (with Raphaël) is the way to go BUT I am put off by lack of native SVG support in some browsers.
I have looked at Walter Zorns library, and it is has some excellent performance tuning algorithms built-in. So it'll be my choice if I can't find a more creative implementation.
Let me know if you need further clarification.
Morning,
i have enjoyed to work with the drawing features from the Dojo Toolkit. You can see it in action here:
Dojo drawing example
To Download Dojo visit:
Dojo Toolkit

Categories