View and Interact with SVG Floorplans using HTML5
Requirements:
- NodeJS
- Yeoman (including Bower and Grunt) https://github.com/yeoman/yeoman/wiki/Getting-Started
npm install -g yo
npm install -g grunt-cli
npm install -g bower
Install using:
git clone https://github.com/openfloorplan/ofp-viewer.git
cd ofp-viewer
npm install
bower install
Angular Bootstrap needs to be built seperately
cd app/components/angular-ui-bootstrap
npm install
grunt
grunt build
Return to root directory and run server with:
cd ../../..
grunt server
This code currently referencing a missing app/media folder that contains floorplans we use for demos. We are working on replacing the demos with data that we can share as part of the project. In the mean time, you will need to reconfigure it to use your own floorplans.
This project uses SVG data converted from CAD floorplans such as this example http://www.physics.ohio-state.edu/fac_engr/flr_plans.html
(It isn't easy to find good public CAD data, they deserve credit for publishing their CAD files online.)
You will need to convert the DWG files into SVG using something like GDAL ogr2ogr http://www.gdal.org/drv_cad.html
###Requirements:
- The spaces in your floorplan need to be drawn as polygons.
- Polygons need to grouped using the SVG tag and each group should have a unique ID
###Here is an example:
<g type="level" id="bgspa_space_area_b">
<polygon fill="none" points="-2876.47,3737.76 -2868.47,3737.76 -2868.47,3747.75 -2876.47,3747.75 " stroke="rgb(0,0,0)" class="unhl" pointer-events="all" id="e0-01s" entity="101" mslink="4312" />
<polygon fill="none" points="-2783.20,3737.76 -2771.12,3737.76 -2771.12,3762.84 -2783.20,3762.84 " stroke="rgb(0,0,0)" class="unhl" pointer-events="all" id="e1-01s" entity="101" mslink="4326" />
</g>
Update floorplan.js to point to the layer in your floorplan that contains spaces.
https://github.com/openfloorplan/ofp-viewer/blob/master/app/scripts/controllers/floorplan.js
Specifically you will need to configure a layer type for each group of polygons you want to be interactive. You can see the code for LayerType here: https://github.com/openfloorplan/ofp.js/blob/master/src/core/layerType.js but the inputs are:
ofp.LayerType('MyName', ‘my-class-name', [‘d3 selector string']);
The first argument is just a name you pick, the second is a class name you also pick that is injected into the SVG to simplify future interactions (e.g. applying style changes with a class), then last one is the important one. That is a D3.js selector (similar to JQuery selectors) that selects the the SVG group tag () that has that id.
OpenFloorPlan Viewer (ofp-viewer) is released under the MIT license, see LICENSE file.