214 lines
9.0 KiB
HTML
Executable File
214 lines
9.0 KiB
HTML
Executable File
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta name="description" content="Distributed Audio Instructions ">
|
|
|
|
<title>streamscapes</title>
|
|
|
|
|
|
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.5.0/pure-min.css">
|
|
<link rel="stylesheet" href="css/puremods.css">
|
|
<link rel="stylesheet" href="css/streamscape.css">
|
|
|
|
<script src="http://kiben.net:8889/socket.io/socket.io.js"></script>
|
|
<script type="text/javascript" src="js/OpenLayers-2.13.1/OpenLayers.js" />
|
|
<script src="http://openlayers.org/api/2.10/OpenLayers.js" type="text/javascript">
|
|
</script>
|
|
|
|
<!-- <script type="text/javascript" src="js/map.js" />-->
|
|
<script src="js/socketclient.js"></script>
|
|
|
|
|
|
<!--[if lte IE 8]>
|
|
<link rel="stylesheet" href="css/layouts/side-menu-old-ie.css">
|
|
<![endif]-->
|
|
<!--[if gt IE 8]><!-->
|
|
<link rel="stylesheet" href="css/layouts/side-menu.css">
|
|
<!--<![endif]-->
|
|
|
|
<script>
|
|
var map, layer;
|
|
function init() {
|
|
|
|
var geo_options = {
|
|
enableHighAccuracy: true,
|
|
maximumAge : 30000,
|
|
timeout : 27000
|
|
};
|
|
|
|
map = new OpenLayers.Map("basicMap");
|
|
var mapnik = new OpenLayers.Layer.OSM();
|
|
map.addLayer(mapnik);
|
|
|
|
navigator.geolocation.watchPosition(function(position) {
|
|
document.getElementById('anzeige').innerHTML="Latitude: " + position.coords.latitude + " Longitude: " +
|
|
position.coords.longitude + "<p>";
|
|
var lonLat = new OpenLayers.LonLat(position.coords.longitude,
|
|
position.coords.latitude)
|
|
.transform(
|
|
new OpenLayers.Projection("EPSG:4326"), //transform from WGS 1984
|
|
map.getProjectionObject() //to Spherical Mercator Projection
|
|
);
|
|
|
|
markers.addMarker(new OpenLayers.Marker(lonLat));
|
|
|
|
map.setCenter(lonLat, 30 // Zoom level
|
|
);
|
|
|
|
}, console.log("fail"), geo_options);
|
|
//map = new OpenLayers.Map("basicMap");
|
|
//var mapnik = new OpenLayers.Layer.OSM();
|
|
//map.addLayer(mapnik);
|
|
map.setCenter(new
|
|
OpenLayers.LonLat(3,3) // Center of the map
|
|
.transform(
|
|
new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
|
|
new OpenLayers.Projection("EPSG:900913") // to Spherical Mercator Projection
|
|
), 15 // Zoom level
|
|
);
|
|
var markers = new OpenLayers.Layer.Markers( "Markers" );
|
|
map.addLayer(markers);
|
|
}
|
|
</script>
|
|
|
|
</head>
|
|
<body onload="init();">
|
|
|
|
|
|
<div id="layout">
|
|
<!-- Menu toggle -->
|
|
<a href="#menu" id="menuLink" class="menu-link">
|
|
<!-- Hamburger icon -->
|
|
<span></span>
|
|
</a>
|
|
|
|
<div id="menu">
|
|
<div class="pure-menu pure-menu-open">
|
|
<a class="pure-menu-heading" href="#">Streamscapes</a>
|
|
<ul>
|
|
<li class="menu-item-divided pure-menu-selected">
|
|
<a href="#">Home</a>
|
|
</li>
|
|
<li><a href="#basicMap">MAP</a></li>
|
|
<li><a href="#acues">AUDIO CUES</a></li>
|
|
<li><a href="#">OPTIONS</a></li>
|
|
<li><a onclick="goFullscreen('layout'); return false" href="#">FULLSCREEN</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="main">
|
|
|
|
<script type="text/javascript">
|
|
|
|
function goFullscreen(id) {
|
|
// Get the element that we want to take into fullscreen mode
|
|
var element = document.getElementById(id);
|
|
|
|
// These function will not exist in the browsers that don't support fullscreen mode yet,
|
|
// so we'll have to check to see if they're available before calling them.
|
|
|
|
if (element.mozRequestFullScreen) {
|
|
// This is how to go into fullscren mode in Firefox
|
|
// Note the "moz" prefix, which is short for Mozilla.
|
|
element.mozRequestFullScreen();
|
|
} else if (element.webkitRequestFullScreen) {
|
|
// This is how to go into fullscreen mode in Chrome and Safari
|
|
// Both of those browsers are based on the Webkit project, hence the same prefix.
|
|
element.webkitRequestFullScreen();
|
|
}
|
|
|
|
}
|
|
</script>
|
|
|
|
<div class="content">
|
|
<p>
|
|
<div id="time"></div>
|
|
</p>
|
|
|
|
<div id="basicMap"></div>
|
|
<div id="anzeige">lon:lat</div>
|
|
<div id="msg"></div>
|
|
<h2 id="acues" class="content-subhead">Audio Cues</h2>
|
|
|
|
<audio id="cue1" src="audio/cues/ogg/Front_Left.ogg" type="audio/ogg" preload="auto"></audio>
|
|
<audio id="cue2" src="audio/cues/ogg/Front_Center.ogg" type="audio/ogg" preload="auto"></audio>
|
|
<audio id="cue3" src="audio/cues/ogg/Front_Right.ogg" type="audio/ogg" preload="auto"></audio>
|
|
<audio id="cue4" src="audio/cues/ogg/Rear_Left.ogg" type="audio/ogg" preload="auto"></audio>
|
|
<audio id="cue5" src="audio/cues/ogg/Rear_Right.ogg" type="audio/ogg" preload="auto"></audio>
|
|
<audio id="cue6" src="audio/cues/ogg/Noise.ogg" type="audio/ogg" preload="auto"></audio>
|
|
|
|
<div class="pure-u-1-5">
|
|
<a class="pure-button" href="javascript:sendCue(1,1);"> R: Mantra.</a><br />
|
|
<a class="pure-button" href="javascript:sendCue(1,2);"> F: Another "Agent".</a><br />
|
|
<a class="pure-button" href="javascript:sendCue(1,3);"> A: Stop. Spin. Repeat. </a><br />
|
|
<a class="pure-button" href="javascript:sendCue(1,4);"> Call and Response Dialog with Dominant Interjection </a><br />
|
|
<a class="pure-button" href="javascript:sendCue(1,5);"> F: Contrasting Acoustic/Ambience</a><br />
|
|
<a class="pure-button" href="javascript:sendCue(1,6);"> FE: Resonant Surface/Object </a><br />
|
|
</div>
|
|
|
|
<div class="pure-u-1-5">
|
|
<a class="pure-button" href="javascript:sendCue(1,1);"> A: Stop. Still. Turn Slowly Clockwise 360. </a><br />
|
|
<a class="pure-button" href="javascript:sendCue(1,2);"> Walk Very Slowly, as Silently as Possible </a><br />
|
|
<a class="pure-button" href="javascript:sendCue(1,3);"> Moderate Pace Exagerate Walking Sounds </a><br />
|
|
<a class="pure-button" href="javascript:sendCue(1,4);"> Jog Quickly Navigating Eratically for ~30" Counting Aloud </a><br />
|
|
<a class="pure-button" href="javascript:sendCue(1,5);"> Be Completely Still. Find a Resonant Tone and Hum. </a><br />
|
|
<a class="pure-button" href="javascript:sendCue(1,6);"> Clap Arhythmiclly in Burst Punctuated by Pauses </a><br />
|
|
</div>
|
|
|
|
<div class="pure-u-1-5">
|
|
<a class="pure-button" href="javascript:sendCue(1,1);"> D: Current Acoustic Enviroment </a><br />
|
|
<a class="pure-button" href="javascript:sendCue(1,2);"> D: Route up to This Point </a><br />
|
|
<a class="pure-button" href="javascript:sendCue(1,3);"> D: Architectural Features Present</a><br />
|
|
<a class="pure-button" href="javascript:sendCue(1,4);"> D: Natural Elements Present</a><br />
|
|
<a class="pure-button" href="javascript:sendCue(1,5);"> D: Commercial Scene</a><br />
|
|
<a class="pure-button" href="javascript:sendCue(1,6);"> D: A Social Interaction </a><br />
|
|
</div>
|
|
|
|
<div class="pure-u-1-5">
|
|
<a class="pure-button" href="javascript:sendCue(1,1);"> D: Smell?</a><br />
|
|
<a class="pure-button" href="javascript:sendCue(1,2);"> I: Recall Song </a><br />
|
|
<a class="pure-button" href="javascript:sendCue(1,3);"> Q: Last Here?</a><br />
|
|
<a class="pure-button" href="javascript:sendCue(1,4);"> D: First Here?</a><br />
|
|
<a class="pure-button" href="javascript:sendCue(1,5);"> D: Next Here?</a><br />
|
|
<a class="pure-button" href="javascript:sendCue(1,6);"> D: </a><br />
|
|
</div>
|
|
|
|
<p>
|
|
</p>
|
|
<h2 class="content-subhead">Tactile Cues</h2>
|
|
<p>
|
|
A short series of vibrations will be made by the device
|
|
directly preceeding an audio cue allowing you to prepare
|
|
to focus on recieveing the message.
|
|
</p>
|
|
<h2 class="content-subhead">Map Cache</h2>
|
|
|
|
<p>
|
|
<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://www.openstreetmap.org/export/embed.html?bbox=-0.06943702697753906%2C51.53077980604831%2C-0.05805373191833496%2C51.53559175507726&layer=mapnik" style="border: 1px solid black"></iframe><br/><small><a href="http://www.openstreetmap.org/#map=17/51.53319/-0.06375">View Larger Map</a></small>
|
|
</p>
|
|
|
|
<h2 class="content-subhead">Test Sounds</h2>
|
|
<div class="pure-u-1-8">
|
|
<a class="pure-button" href="javascript:sendCue(1,1);">Front Left</a><br />
|
|
<a class="pure-button" href="javascript:sendCue(1,2);">Front Center</a><br />
|
|
<a class="pure-button" href="javascript:sendCue(1,3);">Front Right</a><br />
|
|
<a class="pure-button" href="javascript:sendCue(1,4);">Rear Left</a><br />
|
|
<a class="pure-button" href="javascript:sendCue(1,5);">Rear Right</a><br />
|
|
<a class="pure-button" href="javascript:sendCue(1,6);">Noise</a><br />
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<script src="js/ui.js"></script>
|
|
<script src="js/sounds-controls.js"></script>
|
|
|
|
|
|
</body>
|
|
</html>
|