/
index.html
141 lines (132 loc) · 5.99 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
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Wayfinding</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="styles/example.css">
</head>
<body>
<div id="content">
<div id="myMaps">
</div>
<div id="controls">
<label>Show</label>
<button id="floor1">1st Floor</button>
<button id="floor2">2nd Floor</button>
<label for="beginSelect">Begin Route at</label>
<select id="beginSelect">
<option value="lcd.1">Reception</option>
<option value="lobby">Lobby</option>
<option value="R123">Conf Room</option>
</select>
<label for="endSelect">Show Route to</label>
<select id="endSelect">
<option></option>
<option disabled="true">West 1st</option>
<option value="R101">101</option>
<option value="R102">102</option>
<option value="R103">103</option>
<option value="R104">104</option>
<option disabled="true">East 1st</option>
<option value="R111">111</option>
<option value="R112">112</option>
<option value="R113">113</option>
<option value="R114">114</option>
<option disabled="true">North 1st</option>
<option value="R121">121</option>
<option value="R122">122</option>
<option value="R123">123</option>
<option value="R124">124</option>
<option value="R125">125</option>
<option disabled="true">2nd</option>
<option value="R201">201</option>
<option value="R202">202</option>
</select>
<label for="accessible">Accessible</label>
<input id="accessible" type="checkbox" name="accessible" value="Accessible" />
</div>
</div>
<div>
<h1>Wayfinding Demo</h1>
<p>Works with Chrome, Firefox, and Opera. IE will show path, but is not animating the path.</p>
<p>For more information see <a href="https://github.com/ucdavis/wayfinding">https://github.com/ucdavis/wayfinding</a></p>
<p>This is a demonstration of a wayfinding system for providing routing within a building. It allows the entire map data to be stored in a single .svg file from which it displays a map and extracts the information about which routes are available. A change in the .svg file will be enough to change routing results.</p>
<p>The .svg files can be generated by Adobe Illustrator. Testing with Inkscape and other .svg programs will take place.</p>
<h2>Things to try</h2>
<ul>
<li>Click any room and it will trigger the routing. We will be using this with a touch screen lcd at key points in our building.</li>
<li>In addition to clicking on a room it is possible to trigger routing using the "Show Route to" dropdown or through JavaScript.</li>
<li>Route to room 201 and try it with the Accessible option on and off an you will see that the accessible route takes the elevator rather than the stairs even though the path is longer. Accessible routing will be extended to allow certain path segments to be considered accessible or not.</li>
<li>Change the "Begin Route at" selection and it will remember the last destination and reroute.</li>
<li>Click the <a href="#" onClick="javascript:$('#myMaps').wayfinding('routeTo', 'R122');">second room from the left</a> on the top row on the first floor and note that it routes through the right hand side of the room next to it. The left hand side is set not to pass traffic. You can choose which routes to enable.</li>
<li>
<a href="#" onClick="javascript:$('#Paths line').attr('stroke-opacity', 1);">Show paths</a>.
<a href="#" onClick="javascript:$('#Paths line').attr('stroke-opacity', 0);">Hide paths</a>.
<a href="#" onClick="javascript:$('#Portals line').attr('stroke-opacity', 1);">Show portals</a>.
<a href="#" onClick="javascript:$('#Portals line').attr('stroke-opacity', 0);">Hide portals</a>.
<a href="#" onClick="javascript:$('#Doors line').attr('stroke-opacity', 1);">Show doors</a>.
<a href="#" onClick="javascript:$('#Doors line').attr('stroke-opacity', 0);">Hide doors</a>.
</li>
<li>one way paths - work in progress</li>
<li>portal lengths as route consideration - work in progress</li>
<li>$('#myMaps').wayfinding('checkMap') make into clickable report into report div</li>
<li>in addition to checkMap, add a dump parse, consider a load parse from JSON</li>
</ul>
</div>
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="src/jquery.wayfinding.js"></script>
<script>
$(document).ready(function () {
'use strict';
$('#myMaps').wayfinding({
'maps': [
{'path': 'test/fixtures/demo_map_1.svg', 'id': 'floor1'},
{'path': 'test/fixtures/demo_map_2.svg', 'id': 'floor2'}
],
'path': {
width: 3,
color: '#FFFF00',
radius: 8,
speed: 8
},
'startpoint': function () {
return 'lcd.1';
},
'defaultMap': 'floor1',
'showLocation': true
}, function(){
console.log('callback reached');
});
//make the floor buttons clickable
$('#controls button').click(function () {
$('#myMaps').wayfinding('currentMap', $(this).prop('id'));
});
$('#controls #beginSelect').change(function () {
$('#myMaps').wayfinding('startpoint', $(this).val());
if ($('#endSelect').val() !== '') {
$('#myMaps').wayfinding('routeTo', $('#endSelect').val());
}
});
$('#controls #endSelect').change(function () {
$('#myMaps').wayfinding('routeTo', $(this).val());
});
$('#controls #accessible').change(function () {
if ($('#accessible:checked').val() !== undefined) {
$('#myMaps').wayfinding('accessibleRoute', true);
} else {
$('#myMaps').wayfinding('accessibleRoute', false);
}
if ($('#endSelect').val() !== '') {
$('#myMaps').wayfinding('routeTo', $('#endSelect').val());
}
});
$('#myMaps').on('wayfinding:roomClicked', function(e, r) {
$('#endSelect option[value="' + r.roomId + '"]').attr('selected', true);
});
});
</script>
</body>
</html>