Div positioning on a canvas with arrows bindings - javascript

I'm searching for a little piece of javascript that can attach to a div (in data-x data-y attributes for example) the x,y coordinates of a draggable div. And then be able to draw arrows between them (using a data-targetid attribute?).
If the solution can look like a simple version of graphview, jsPlumb or vizster but without the complicated library, and only in javascript/html

There is a jQuery version of jsPlumb, looks like it's 14kb. What you're trying to do isn't default functionality, you're going to need a (somewhat complicated) library to accomplish it. If you're concerned with code bloat I'd start with the source code of jsPlumb and start pulling out what you don't need.

Related

Zoom and Pane UI Elements for Snap.svg

I'm using Snap.svg for the presentation of my svg on a webpage. This works fine and I already implemented a zoom and a pane modus of the map by using the scroll wheel and the "dragging" technique. In case of no availability of a mouse, I would like to integrate ui elements for zooming and panning.
As implementing them by using input-range elements and custom arrows seems not to be the best option, I would like to ask if someone knows a library or something else, where such map ui elements are provided. I only found those in combination of the use of the respective system (leaflet,mapbox,google, etc.), but not for general use cases.
You can actually use leaflet for svg presentation surprisingly easily. Take a look at this example:
http://kempe.net/blog/2014/06/14/leaflet-pan-zoom-image.html
Then replace the URL in that example to your local svg. Instant pan/zoom for your svg!

apply kinectjs to regular canvas?

So I have a fairly well established paint app using HTML5 canvas! It has painting, erasing, undoing, etc. I would like to be able to add dynamic images, text, and shapes (drag and drop abilities as well as easy manipulation).
I just came across the KinectJS library, and it would be perfect!!! The only issue that I have is that I would rather not rewrite my entire application for KinectJS as this is for a container, not a canvas tag.
question:
Is there any way to add KineticJS layers/stages into a canvas tag so that they still can be made with Kinetic and have the different options, but my app will still function?
alternative:
I understand that this could be impossible...if this is so, can I apply my regular canvas functions to a Kinetic container so that the whole thing is in the kinetic container, but I do not need to rewrite the code.
note:
If both of the above are impossible, please explain why
From what I know the answer is no.
Kineticjs create the canvas DOM element within the container you give that is why most people use a div element as the container and that is why if you directly put a canvas it won't work. The thing is, it shouldn't change much of your code. You'll just have to call getCanvas().getElement() instead of your normal reference to the canvas and all your previous code will work.
Here is a jsfiddle of it.

framework to create tooltip (createjs and kineticjs)

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.

Irregular anchors and shapes using JS in HTML/HTML5

Is it possible to have irregular shapes like anchors on some surface in JS that can be clickable and it becomes a ball on runtime on page loads? I want to animate that surface that can be a ball and also want to track that which anchor shape is at particular point.
So is it possible using JS? How can this be achieved? I was unable to find any solution. Is there some JS library that can do this? Something like processing.js or Raphael js?
Could I suggest an HTML image map? You can embed an IMG tag in the page set it's usemap attribute and then define shapes on that image to be clickable areas.
It doesn't have as many features as a canvas but maybe a regular IMG element will do in this case.
I suggest using SVG with excelent Raphael js library. You can make interactive animations with pure javascript (i.e. without additional plugins) and those objects can be made irregular anchors (overriding click, mouseover and mouseout events to emulate anchor behaviour).
Another idea is to use HTML5 canvas, but this requires more code (the technology is still immature) and may fail to work under different browsers.

Hover effects on irregular polygons in CSS

I'm wondering how to go about marking up and coding hover effects for a map similar to this image.
When each district (or section) is moused over/touched/clicked I need to change the colour of it without affecting any other section. The boundaries on each section must be representative of the image and shouldn't be squares. The solution can't use canvas since the site I'm working on has to be usable in older browsers (I'm gutted, personally.)
Ideally I want to do this with CSS without using too much JavaScript or loads of images. Has anyone done this before?
Edit: I know people are suggesting the <area> tag, but AFAIK, it doesn't accept the :hover pseudo class.
Edit 2: I might use this: http://www.netzgesta.de/mapper/
Another self answer...
A few months ago I came across a library called Raphael JS - http://raphaeljs.com/. For those of you unfamiliar with it, it's an SVG DOM library first and foremost. If you know a thing or two about SVG, you'll know that IE doesn't support it, but it does support VML. Raphael caters for this as well. Awesome, right?
Anyway, I ended up saving the AI file for the map as an SVG file and importing the paths into a JSON block, basically doing the same thing as this code: http://raphaeljs.com/australia.html
The only issue I came across:
I wanted the map background to be transparent. Setting fill to transparent whilst allowing the section to accept mouseover worked in Firefox, but in IE, it failed. I instead opted for filling the path with white, then setting the opacity to 0.01. After that I duplicated the path and didn't fill it to create the border.
You can use HTML <area> Tag
If you use jQuery you can use the maphilight plugin. documented at http://davidlynch.org/projects/maphilight/docs/ and available from github at https://github.com/kemayo/maphilight
I see what the problem here is: making let's say a world map the usual way is quite a load. If I get it right, what you want is to have a territory map image and put hover effects making hover area match country borders exactly. SVG can be used for the map (the drawing part is already done) but the problem is how to generate HTML area map using SVG map coordinates. There's a solution (I've tried it, looks good at least with the demo provided) which translates SVG into Raphael (generates the coords) using PHP. But again you need raphael.js for that... well if you change your mind: https://github.com/atirip/svg2raphael. And if you're not familiar with Raphael it will take a time to get used to it, documentation is not so good -for me-.
Edit: I can confirm that translation from SVG->rapahel.js works but SVG files needs some tweaks. For what I see in the example SVG provided in svg2raphael the files were made with Adobe Illustrator. I've tried with SVG (plain) from Inkscape and it didn't work properly, but I could manage to fix the issues, for example:
svg2raphael won't translate Inkscape generated <path style="fill:#ff0000" ...></path> (will set fill="none"!!! so the result is invisible, but will translate correctly <path fill="#ff0000" ...></path> Seems like it will ignore everything inside style="".
svg2raphael misreads the alignments from Inkscape SVG, so you need to either move the illustration inside Inkscape or edit the SVG file with text editor and change the M value to M0,0.
svg2raphael can translate multiple svg elements, but looks at the main tag which Inkscape generates to align groups of illustrations, sometimes the whole illustration moves away from the render area and you see nothing. Hope this helps!
Edit 2: You can use Inkscape's style="" for creating CSS rules to apply to the SVG, that works great ang keeps style outside SVG/Raphael!

Categories