We Keep Coding

Showing in a browser an interactive 2D floorplan using html5 and javascript

I need to replace the Flash viewer I've built years ago to show interactive 2D floorplans coming from AutoCAD.
Currently, the AutoCAD files are read and converted to XML files containing the X and Y coordinates of the polygons representing the objects of the floorplan: rooms, walls, assets, etc. The objects in the drawing are clickable and can be set as visible or not depending on thematic views.
Sometimes these floorplans could be relatively big, having a lot of points.
I have already tried to use a web map control like LeafletJS as it has already the PAN and ZOOM functionality, I can insert clickable markers, and manage layers so I can show or hide objects by a thematic view. I have set the map CRS as metric, and I load data as GeoJSON. Unfortunately, with real-world mid-size floorplans, it is too much slow and sometimes became unresponsive.
The example below is made of 18630 line objects and is not very reactive on panning.
So now I'd like to draw directly the floorplan in the browser using SVG or CANVAS.
I'd prefer to use CANVAS as it is a lot faster than SVG, using also WebGL if supported, but I have to rely on a library in order to have events handlers and easy object management like a DOM.
So now I'm asking if a library like threeJS can handle easy a task like this, even if I need to map 2D objects and if it is the right technology to choose. In particular, is it possible with threeJS:
To assign events listener to objects to get their IDs?
To apply CSS3 rules to style objects, for example, to highlight a room or a table?
ThreeJS can easily draw to both SVG or Canvas elements?
With ThreeJS I can easily manage pan and zooming also?
Can it be displayed also on mobile devices? (Android and iOS)
If anyone knows better library or technology to accomplish this task I'm completely free to any suggestion.
(Please note that I need only 2D drawings because 3D has been already built with other technologies from Revit)

Using webgl (via three.js for instance) you can draw millions of simple line primitives at 60fps on GPU enabled desktop browsers.
Here's a contrived example of over a million line primitives, thrown together using three.js:
https://codesandbox.io/s/0pp3x92n4p
and here:
http://vectorslave.com/wireblueprint/index.html

Following feeela suggestion, I've implemented the visualization in SVG,
drawing the same model made up of 18630 lines.
It loads definitely faster than the GeoJSON Leaflet metric map.
The SVG is provided by an API querying for building and floor, and it returns the architecture as elements (text/plain) that I append to the element in my web page.
To append string path elements to the SVG DOM element I've used parseSVG library.
I haven't found a "native" support for pan and zoom, so I've used a jQuery library: Ariutta SVG Pan and Zoom
With Ariutta SVG pan&zoom I should be able to listen also to mobile events like pinch and touch.
Here is the javascript code:
<div id="mapArea">
<svg id="map" xmlns="http://www.w3.org/2000/svg" x="0" y="0" style="stroke: #00ff00; stroke-width: 0.2px;background:#000">
</svg>
</div>
<script type="text/javascript">
var container = document.getElementById('mapArea'),
width = container.offsetWidth,
svgMap = document.getElementById('map');
svgMap.setAttribute('width', width);
svgMap.setAttribute('height', width * 0.5);
$(document).ready(function () {
$.ajax({
type: "GET",
url: "/Public/GetSVGPlan.aspx?building=1423&floor=3",
dataType: "text",
success: function (result) {
svg = parseSVG(result);
svgMap.appendChild(svg);
svgPanZoom('#map', {
zoomEnabled: true,
controlIconsEnabled: true,
fit: true,
center: true
});
},
error: function (error) {
console.log(error);
}
});
});
</script>
The path elements returned by the API are like the following:
<path d="M173.7043 66.758, L173.7054 66.7701" />
<path d="M191.947 64.2563, L191.9198 63.9453" />
<path d="M129.3072 12.2843, L129.3301 12.3702" />
<path d="M129.3301 12.3702, L131.701 11.735" />
<path d="M191.6087 63.9725, L191.636 64.2836" />
<path d="M173.7054 66.77, L172.5553 66.9803" />
<path d="M131.3573 11.735, L129.3072 12.2843" />
<path d="M195.8466 63.9148, L195.8194 63.6037" />
<path d="M172.5553 66.9803, L172.6882 66.9687" />
<path d="M129.3074 12.2841, L129.2449 11.7366" />
<path d="M195.7694 63.6081, L195.8194 63.6037" />
<path d="M172.6882 66.9687, L173.7064 66.7821" />
<path d="M129.2451 11.7368, L129.2451 9.5381" />
<path d="M195.5083 63.631, L201.43 63.1124" />
<path d="M226.9927 14.458, L228.0006 14.4593" />
<path d="M173.7064 66.7821, L173.7075 66.7942" />
<path d="M129.2451 9.5381, L131.6964 9.5381" />
<path d="M201.4572 63.4235, L195.5356 63.9421" />
and the results:
On Internet Explorer 11 is very slow, using a lot of CPU on the rendering process for about 15s. I think this is due more to the js loop for appending the path elements, than the SVG rendering.
On mobile (Chrome on Android) has a good response and fast load/rendering (~3-5s)
Even if it works as expected, any suggestion to improve performance are very welcome!!

Animate circle along sine curve

I am trying to replicate the visuals of f.lux using jQuery which looks like this (sorry for the poor quality). Basically, it is a circle following a sine wave path. I have looked at the jQuery.path animations and I tried replicating the animation, but my sine wave is choppy since it is drawn using CSS. Is there a way to draw the sine wave so it is smooth and then animate the circle following the sine wave path? I couldn't get a fiddle working but this is what my animation currently looks like now. My animation also does not loop back to where it starts unlike the f.lux animation.
I am not sure what the limits are for this either, will I need to make f.lux's background (the blue and pink halves of the sine wave) and then lay the animation on top of it or can I make the whole visual using Javascript, CSS, and jQuery?
Does anybody have any ideas or can anyone point me in the right direction?

To make your line smoother, you can use a svg element, like so :
<svg width="190" height="160" xmlns="http://www.w3.org/2000/svg">
<path d="M10 80 C 40 10, 65 20, 95 80" stroke="black" fill="#E0E0E0"/>
<path d="M95 80 C 105 100, 150 150, 180 80" stroke="black" fill="#EEEEEE"/>
</svg>
This uses two different bézier curves so you can use different colors for your background. You will have to change the values a bit to match you desired width/height and curvature. There is an explanation on svg paths here : https://developer.mozilla.org/en/docs/Web/SVG/Tutorial/Paths.
You can create an insert a svg element with javascript or jQuery SVG if you don't have access to the HTML source file.

D3 Multiple Visualizations Per Page Namespace IRI Conflicts [duplicate]

I've enbedded d3's force directed graph layout into extjs tabs so that each time a new tab gets added a new graph svg gets generated.
No Problemo so far.
Now I intended to turn the graph into a directed one (by adding a marker and tell the lines to use it)
Each generated svg elements is following this pattern:
<svg width="100%" height="100%">
<defs><marker id="end-arrow" viewBox="0 -5 10 10" refX="6" markerWidth="3" markerHeight="3" orient="auto"><path d="M0,-5L10,0L0,5" fill="#ccc"></path></marker>
</defs>
<g transform="translate(4,0) scale(1)"><line class="link" sig="30.84" style="stroke-width: 3;" x1="538" y1="347" x2="409" y2="467" marker-end="url(#end-arrow)"></line>
...
</g>
</svg>
With Crome everything works just fine.
So I arrived at the concusion that the structur and
the way I generate the svgs should be more or less correct.
But with Firefox the Markers will only show for the first svg. (the first tab)
All other svgs won't show any Arrowheads.
"Inspect Elements" tells me the Markers are there and that the lines are refering to them.
And this is where I'm running out of Ideas where or what to look for. :(

You have multiple non-distinct IDs within the same html or svg document. This is invalid, different UAs respond differently but as you're not allowed to do this, it doesn't really matter that they are inconsistent.

JS with SVG: Rotate SVG-Element around its center

I have to rotate three SVG-Objects around its center with JavaScript and not the <animation> tag. The big star at the top of the tree rotates correctly, but from the others I don't find the center coordinates.
This is the second star and the rotation in JS:
star2.setAttribute("transform", "rotate(" + angle + " 2000 200)");
and this is the svg:
<defs>
<symbol id="stern">
<polygon points="1000 50 1100 310 850 160 1150 160 900 310 1000 50" fill="yellow" />
</symbol>
</defs>
<use id="stern2" xlink:href="#stern" transform="translate(500,600) scale(0.5)" onmouseover="rotate2();" onmouseout="stop();" />
Here is a fiddle:
http://jsfiddle.net/F325k/

to rotate around the center you need to translate it first: Rotate rectangle around its own center in SVG
ps: the latest and reworked lib from the author of Raphaël is http://snapsvg.io/ in case you can use one.

For SVG, definately use third-party libraries. SVG is a pain with plain javascript. My suggestion: Definately go for D3js, I have been using it for a year at my workplace and it is great: dynamic, good community, brilliant documentation.
See the following example with spinning circle around its center which is called Planetarium: Planetarium Does the rotation without animation as you wanted. It uses a D3- timer and that is all.
There are a lot of examples there, so read the full example list here: d3js Full list of examples

Dilate and erode SVG shapes using Javascript

EDIT:
I finally found a way to erode and dilate polygons (offsetting) so that new geometry is created using Clipper library:
https://sourceforge.net/projects/jsclipper/
Live demo of Javascript Clipper:
http://jsclipper.sourceforge.net/5.0.2.1/main_demo.html
The Clipper can only handle polygons or multi-polygons (eg. polygons with holes), so for it to work with other graphical objects of SVG format, they have to be converted to straight lines. At least paths are rather easy to convert to lines using path.getTotalLength() and path.getPointAtLength() (http://whaticode.com/2012/02/01/converting-svg-paths-to-polygons/).
The other possibility is use this like technique (that does not create new geometry):
https://stackoverflow.com/a/12723835/1691517
Is there any way to erode and dilate shapes in SVG via Javascript?
I have the following SVG example:
http://jsfiddle.net/timo2012/2S4Kt/1/
There are three shapes, blue is original, green is eroded (thinned) and red is dilated (bolded). They are made in Illustrator.
I have tested erode and dilate filters, but the effect is not so good:
https://dvcs.w3.org/hg/FXTF/raw-file/tip/filters/examples/feMorphology.svg
After few hours searching over internet, I have found only examples about bitmap image eroding and dilating, but nothing about vector shapes.
I have succeeded in dilating and eroding SVG polygons using Shapely ( http://toblerity.github.com/shapely/manual.html ) in Python by sending path points via Ajax call to PHP script which makes system() call to Python script, but this method is slow and requires server to do the work that could be done client side.
This is my code for dilating and eroding in Python (as you see it is quite short):
#!/usr/bin/python26
from shapely.geometry import Polygon
from shapely.geometry import MultiPolygon
import sys
if len(sys.argv)>2:
inset=eval(sys.argv[1])
coords=eval(sys.argv[2])
else:
sys.exit()
bowtie = Polygon(coords)
clean = bowtie.buffer(inset)
clean = clean.simplify(1, preserve_topology=False)
if clean.length>0:
if clean.geom_type=="MultiPolygon":
for n in range(0, len(clean)):
print list(clean[n].exterior.coords)
#print "\n"
elif clean.geom_type=="Polygon":
print list(clean.exterior.coords)
Also find this document, which tries to define dilate and erode in mathematical terms:
http://en.wikipedia.org/wiki/Mathematical_morphology
There is a sentence "The basic idea in binary morphology is to probe an image with a simple, pre-defined shape, drawing conclusions on how this shape fits or misses the shapes in the image. This simple "probe" is called structuring element, and is itself a binary image (i.e., a subset of the space or grid)."
I assume that this method could be used in morphing vector shapes, but how...
EDIT: One comment in a reply raised a possible issue of using filters instead of creating new geometry: if someone wants to add drag handles to polygon points, then drag handles may seem to be in wrong place. This can be acceptable, because then the impression is that the original path data is untouched, which is actually the case in filters, but - after further testing - it proved that the quality is a bigger problem. According to this and this SVG filter uses pixel representation of vector graphic object instead of path data itself, which leads to not so good looking results.
EDIT2: POSSIBLE WORKAROUND: One of the answers in this page led me to use variable-width strokes and mask to achieve a good looking workaround to this issue. I made a few tests and get implemented an Adobe Illustrator -like Offset Path Effect.

You can sort of get what you seem to be after by stroking with different stroke-widths in combination with clip-path or mask. Here's an example, some explanations of how it's constructed see here and here (arrow up or down to see some other slides on that example).
It doesn't give you new geometry though, just something that might look like new geometry.

Have you actually tested SVG's native filters? This looks close enough:
<svg width="612" height="792" viewBox="0 0 612 792" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="erode">
<feMorphology operator="erode" in="SourceGraphic" radius="12" />
</filter>
<filter id="dilate">
<feMorphology operator="dilate" in="SourceGraphic" radius="8" />
</filter>
<path id="original_path" d="M193.193,85c23.44,0.647,45.161,0.774,62,12c1.596,1.064,12,11.505,12,13
c0,2.941,8.191,5.669,3,12c-3.088,3.767-6.01-0.758-11-1c-19.56-0.948-33.241,12.296-33,34c0.163,14.698,8.114,24.492,4,41
c-1.408,5.649-6.571,15.857-10,21c-2.484,3.726-7.898,10.784-12,13c-4.115-11.677,2.686-27.29-6-35c-6.693-5.942-20.021-4.051-26,1
c-13.573,11.466-11.885,41.492-7,58c-5.8,1.772-18.938,7.685-23,12c-6.752-10.805-15.333-17.333-24-26c-3.307-3.307-9.371-12-15-12
c-16.772,0-13.963-15.741-13-28c1.283-16.324,1.727-28.24,4-42c1.276-7.72,8-16.411,8-23c0-7.416,15.945-29,23-29
c4.507,0,17.678-8.701,24-11C164.853,90.76,178.27,88.546,193.193,85"/>
</defs>
<use xlink:href="#original_path" fill="#f00" filter="url(#dilate)"></use>
<use xlink:href="#original_path" fill="blue"></use>
<use xlink:href="#original_path" fill="#1CFF00" filter="url(#erode)"></use>
</svg>
There is some clipping going on the dilate filter that can't seem to be resolved by increasing the filter region, but other than that it's pretty close to your illustrator rendering. Sure beats rendering server-side.
http://jsfiddle.net/5Qv5v/