master
1
2<!DOCTYPE html>
3<html lang="en">
4 <head>
5 <meta charset="utf-8">
6 <meta http-equiv="X-UA-Compatible" content="IE=edge">
7 <meta name="viewport" content="width=device-width, initial-scale=1.0">
8 <meta name="description" content="">
9 <meta name="author" content="">
10 <link rel="shortcut icon" href="">
11
12 <title>Starter Template for Bootstrap</title>
13
14 <!-- Bootstrap core CSS -->
15 <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
16 <!-- Custom styles for this template -->
17 <link href="starter-template.css" rel="stylesheet">
18
19 <style>
20
21 .graticule {
22 fill: none;
23 stroke: #ddd;
24 stroke-opacity: .5;
25 stroke-width: .5px;
26 }
27
28 .land {
29 fill: #aaa;
30 }
31
32 .boundary {
33 fill: none;
34 stroke: #fff;
35 stroke-width: .5px;
36 }
37
38 .points {
39
40 }
41
42 </style>
43
44 <!-- Just for debugging purposes. Don't actually copy this line! -->
45 <!--[if lt IE 9]><script src="../../docs-assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
46
47 <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
48 <!--[if lt IE 9]>
49 <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
50 <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
51 <![endif]-->
52 </head>
53
54 <body>
55
56 <div class="container">
57 <div class="navbar navbar-default">
58 <div class="navbar-header">
59 <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
60 <span class="sr-only">Toggle navigation</span>
61 <span class="icon-bar"></span>
62 <span class="icon-bar"></span>
63 <span class="icon-bar"></span>
64 </button>
65 <a class="navbar-brand" href="#">twinkletoes</a>
66 </div>
67 <div class="collapse navbar-collapse">
68 <!--
69 <ul class="nav navbar-nav">
70 <li class="active"><a href="#">Home</a></li>
71 <li><a href="#about">About</a></li>
72 <li><a href="#contact">Contact</a></li>
73 </ul>
74 -->
75 </div><!--/.nav-collapse -->
76 </div><!--/.nav-header -->
77 </div><!--/.nav-default -->
78
79 <div class="container">
80 <div class="starter-template well">
81 <ul class="nav nav-tabs">
82 <li class="active"><a href="#map" data-toggle="tab">Map</a></li>
83 <li><a href="#config" data-toggle="tab">Config</a></li>
84 <li><a href="#console" data-toggle="tab">Console</a></li>
85 <li></li>
86 </ul>
87 <div class="tab-content">
88 <div class="tab-pane fade in active" id="map"></div>
89 <div class="tab-pane fade" id="config"></div>
90 <div class="tab-pane fade" id="console">
91 <button id="ws-btn" type="button" class="btn btn-primary" data-toggle="button">WS Connection</button>
92 <pre id="ws-log" class="pre-scrollable text-left"></pre>
93 </div>
94 </div>
95 </div>
96 </div><!-- /.container -->
97
98
99 <!-- Bootstrap core JavaScript
100 ================================================== -->
101 <!-- Placed at the end of the document so the pages load faster -->
102 <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
103 <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
104 <script src="//d3js.org/d3.v3.min.js"></script>
105 <script src="//d3js.org/topojson.v1.min.js"></script>
106 <script>
107 var width = $('#map').width(),
108 height = width/1.5;
109
110 var projection = d3.geo.mercator()
111 .scale((width + 1) / 2 / Math.PI)
112 .translate([width / 2, height / 2])
113 .precision(.1);
114
115 var path = d3.geo.path()
116 .projection(projection);
117
118 var graticule = d3.geo.graticule();
119
120 var svg = d3.select("#map").append("svg")
121 .attr("width", width)
122 .attr("height", height);
123
124 svg.append("path")
125 .datum(graticule)
126 .attr("class", "graticule")
127 .attr("d", path);
128
129 d3.json("/world-50m.json", function(error, world) {
130 svg.insert("path", ".graticule")
131 .datum(topojson.feature(world, world.objects.land))
132 .attr("class", "land")
133 .attr("d", path);
134
135 svg.insert("path", ".graticule")
136 .datum(topojson.mesh(world, world.objects.countries, function(a, b) { return a !== b; }))
137 .attr("class", "boundary")
138 .attr("d", path);
139 });
140
141
142 d3.select(self.frameElement).style("height", height + "px");
143
144 $(document).ready(function () {
145
146 var ws;
147
148 $("#ws-btn").click(function(evt) {
149 evt.preventDefault();
150
151 var host = "localhost" //$("#host").val();
152 var port = "8888" //$("#port").val();
153 var uri = "/ws" //$("#uri").val();
154
155 if (typeof(ws) === "undefined"){
156 ws = new WebSocket("ws://" + host + ":" + port + uri);
157
158 ws.onmessage = function(evt) {
159 var data = $.parseJSON(evt.data);
160 $('#ws-log').append("msg: " +
161 data.geometry.coordinates[0] +
162 "," +
163 data.geometry.coordinates[1] +
164 " accuracy (" +
165 data.property.accuracy +
166 ")\n");
167 $('#ws-log').scrollTop($("#ws-log")[0].scrollHeight);
168 svg.append("path")
169 .datum(data)
170 .attr("class", "points")
171 .attr("d", path);
172 };
173
174 ws.onclose = function(evt) { $('#ws-log').append("Connection close\n")};
175
176 ws.onopen = function(evt) {
177 };
178 }
179 });
180 });
181 </script>
182 </body>
183</html>