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

Giox Source

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.

enter image description here

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:

  1. To assign events listener to objects to get their IDs?
  2. To apply CSS3 rules to style objects, for example, to highlight a room or a table?
  3. ThreeJS can easily draw to both SVG or Canvas elements?
  4. With ThreeJS I can easily manage pan and zooming also?
  5. 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)

javascripthtml5svgcanvasthree.js

Answers

answered 3 months ago Giox #1

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:

enter image description here

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!!

answered 3 months ago manthrax #2

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/241xmn49yn

enter image description here

Here is a version using your sample data, duplicated 100x to create approx 1.8 million lines

comments powered by Disqus