-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
264 lines (224 loc) · 11.7 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Going Inside with FOSS4G</title>
<meta name="description" content="">
<meta name="author" content="Kristofor Carle - SYNCADD Systems">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="css/reveal.min.css">
<link rel="stylesheet" href="css/theme/openfloorplan.css" id="theme">
<!-- For syntax highlighting -->
<link rel="stylesheet" href="lib/css/zenburn.css">
<!-- If the query includes 'print-pdf', use the PDF print sheet -->
<script>
document.write( '<link rel="stylesheet" href="css/print/' + ( window.location.search.match( /print-pdf/gi ) ? 'pdf' : 'paper' ) + '.css" type="text/css" media="print">' );
</script>
<!--[if lt IE 9]>
<script src="lib/js/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<div class="reveal">
<!-- Any section element inside of this container is displayed as a slide -->
<div class="slides">
<section>
<h1>Going Inside with FOSS4G</h1>
<h3>Developing Interactive Building Floor Plans in HTML5</h3>
<p>
<small><a href="https://github.com/kriscarle" target="_blank">Kristofor Carle</a> - <a href="http://www.syncadd.com" target="_blank">SYNCADD Systems</a></small>
</p>
</section>
<section>
<section>
<aside class="notes"></aside>
<h2>SYNCADD = Real Property Business Analytics</h2>
<ul>
<li>Buildings & spaces inside buildings (what is there, how are they used, are they used efficiently) </li>
<li>All fixed infrastructure: roads, parking lots, utilities, and more.</li>
</ul>
</section>
<section>
<h2>Visualize and Analyze Geospatial Context Inside & Outside Buildings</h2>
<img width="558" height="358" style="" src="images/SYNCADD_example.png" alt="SYNCADD Example Building Visualization">
</section>
</section>
<section>
<section>
<h1>Problem</h1>
<p>Limited open source solutions for working with CAD and BIM floorplan data in the web.</p>
<p><small>Web = The Future of Software</small></p>
<h4>We need to get in on the ground floor (pun intented.)</h4>
<aside class="notes"></aside>
</section>
<section>
<h1>Interior Mapping is Trending</h1>
<ul>
<li>Floorplans integrated in web maps (Google Maps)</li>
<li>Consumer Indoor Navigation</li>
</ul>
<aside class="notes"></aside>
</section>
<section>
<h1>CAD → Friendly UI</h1>
<div>
<div style="width: 47%; float: left;">
<img width="458" height="308" style="" src="images/CAD.png" alt="CAD Screenshot">
</div>
<div style="width: 6%; float: left;"><h3 style="padding-top: 150px;">→</h3></div>
<div style="width: 47%; float: right;">
<img width="458" height="308" style="" src="images/ofp-viewer.png" alt="OpenFloorPlan Screenshot">
</div>
</div>
<aside class="notes"></aside>
</section>
<section>
<h2>The Old Way</h2>
<aside class="notes">Flash, Java Applets, Big Proprietary Systems</aside>
<img width="711" height="553" style="" src="images/mallofamerica_map.png" alt="Mall of America Map Screenshot">
<p><small><a href="http://www.mallofamerica.com/shopping/map" target="_blank">http://www.mallofamerica.com/shopping/map</a></small></p>
</section>
</section>
<section>
<section>
<h2>OpenFloorPlan</h2>
<img width="300" height="300" style="background: #FFF; border: none; padding: 5px;" src="images/ofp-logo.png" alt="OpenFloorPlan Logo">
<p>
<small><a href="http://openfloorplan.org" target="_blank">openfloorplan.org</a> - <a href="http://github.com/openfloorplan" target="_blank">http://github.com/openfloorplan</a></small>
</p>
<aside class="notes"></aside>
</section>
<section>
<h2>Using Open Source Geospatial Tools</h2>
<ul>
<li>Leaflet.js <a href="http://leafletjs.com/" target="_blank">http://leafletjs.com/</a></li>
<li>D3.js <a href="http://d3js.org/" target="_blank">http://d3js.org/</a></li>
</ul>
<aside class="notes"></aside>
</section>
<section>
<div>
<div style="width: 47%; float: left;">
<img width="658" height="408" style="" src="images/HTML5_Logo.svg" alt="HTML5 logo">
</div>
<div style="width: 6%; float: left;"><h3 style="padding-top: 150px;">&</h3></div>
<div style="width: 47%; float: right;">
<img width="658" height="408" style="" src="images/svg-w3c-v.svg" alt="SVG logo">
</div>
</div>
</section>
</section>
<section>
<h2>Converting CAD to SVG</h2>
<img width="658" height="408" style="" src="images/FME.png" alt="Converting CAD to SVG using FME Screenshot">
<aside class="notes"></aside>
</section>
<section>
<h2>OpenFloorPlan Viewer</h2>
<p><a href="http://localhost:9000/">DEMO</a></p>
<aside class="notes"></aside>
</section>
<section>
<section>
<h2>OFP.js Library</h2>
<p>Wrapping SVG with FloorPlans</p>
<aside class="notes"></aside>
</section>
<section>
<h2>Layer Types</h2>
<pre><code data-trim contenteditable>
layerTypes.spaces = new ofp.LayerType(
'Space',
'ofp-space',
['#bgspa_space_area_b']);
layerTypes.columns = new ofp.LayerType(
'Column',
'ofp-column',
['#Column', '#bgspa_column_area_b']);
layerTypes.annotations = new ofp.LayerType(
'annotations',
'ofp-annotations',
['#Dimension', '#A-ANNO-DIMS']);
var fp = new ofp.FloorPlan(overlayPane.node(), layerTypes);
fp.annotations.hide();
</code></pre>
<aside class="notes"></aside>
</section>
<section>
<h2>Layer types detected automatically by default</h2>
<p><small>Back to Demo</small></p>
</section>
</section>
<section>
<section>
<h2>One more thing...</h2>
<p>OpenFloorPlan Editor</p>
<ul>
<li>Fork of the OSM iD Editor <a href="https://github.com/systemed/iD" target="_blank">https://github.com/systemed/iD</a></li>
</ul>
<aside class="notes"></aside>
</section>
<section>
<h2>OpenFloorPlan Editor</h2>
<p><a href="https://c9.io/kriscarle/openfloorplan-editor">DEMO</a></p>
<aside class="notes"></aside>
</section>
</section>
<section>
<h2>Future</h2>
<ul>
<li>Bring together editor/viewer (data/backends)</li>
<li>Automate import of floorplan data (including conversion of proprietary formats)</li>
<li>SVG-based FloorPlan Standard</li>
<li>SVG optimization</li>
<li>Integrate viewer into standard map viewers.</li>
<li>Apply SYNCADD real property business analytics knowledge to build solutions for you or your clients.</li>
</ul>
</section>
<section>
<h1>THE END</h1>
<br />
<h2>Questions?</h2>
<br />
<p>Kristofor Carle</p>
<p>kristofor.carle@syncadd.com</p>
</section>
</div>
</div>
<script src="lib/js/head.min.js"></script>
<script src="js/reveal.min.js"></script>
<script>
// Full list of configuration options available here:
// https://github.com/hakimel/reveal.js#configuration
Reveal.initialize({
controls: true,
progress: true,
history: true,
center: true,
theme: Reveal.getQueryHash().theme, // available themes are in /css/theme
transition: Reveal.getQueryHash().transition || 'default', // default/cube/page/concave/zoom/linear/fade/none
// Optional libraries used to extend on reveal.js
dependencies: [
{ src: 'lib/js/classList.js', condition: function() { return !document.body.classList; } },
{ src: 'plugin/markdown/marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
{ src: 'plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
{ src: 'plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } },
{ src: 'plugin/zoom-js/zoom.js', async: true, condition: function() { return !!document.body.classList; } },
{ src: 'plugin/notes/notes.js', async: true, condition: function() { return !!document.body.classList; } }
// { src: 'plugin/search/search.js', async: true, condition: function() { return !!document.body.classList; } }
// { src: 'plugin/remotes/remotes.js', async: true, condition: function() { return !!document.body.classList; } }
]
});
</script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-41084711-1', 'openfloorplan.org');
ga('send', 'pageview');
</script>
</body>
</html>