initital sinatra

Author: Rumyra

Gemfile

@@ -0,0 +1,7 @@
+source "https://rubygems.org"
+
+gem 'sinatra'
+
+group :production do
+	gem 'thin'
+end

Gemfile.lock

@@ -0,0 +1,24 @@
+GEM
+  remote: https://rubygems.org/
+  specs:
+    daemons (1.1.9)
+    eventmachine (1.0.3)
+    rack (1.5.2)
+    rack-protection (1.5.3)
+      rack
+    sinatra (1.4.5)
+      rack (~> 1.4)
+      rack-protection (~> 1.4)
+      tilt (~> 1.3, >= 1.3.4)
+    thin (1.6.2)
+      daemons (>= 1.0.9)
+      eventmachine (>= 1.0.0)
+      rack (>= 1.0.0)
+    tilt (1.4.1)
+
+PLATFORMS
+  ruby
+
+DEPENDENCIES
+  sinatra
+  thin

README.md

@@ -1,2 +1,3 @@
-# vjing
-First VJing repo
+# VJing
+
+First VJing repo - getting some visuals in the browser, adding audio analysing functionlity and MIDI controlling.

app.rb

@@ -0,0 +1,11 @@
+# for legacy should do this - good practise, not necessarily needed
+require 'rubygems'
+# use bundler - will use gemfile to get versions
+require 'bundler/setup'
+
+# still need to do this
+require 'sinatra'
+
+get '/' do
+	erb :index
+end

config.ru

@@ -0,0 +1,2 @@
+require './app'
+run Sinatra::Application

favicon.ico

@@ -0,0 +1,34 @@
+
+function createMap(mapEl, mapLat, mapLon, zoom) {
+  zoom = typeof zoom !== 'undefined' ? zoom : 12;
+  var myOptions = {
+    zoom: zoom,
+    center: new google.maps.LatLng(mapLat, mapLon)
+  };
+  var mapObject = new google.maps.Map(mapEl, myOptions);
+  return mapObject;
+}
+
+// google maps calculate route function, modified from http://www.sitepoint.com/find-a-route-using-the-geolocation-and-the-google-maps-api/
+function calculateRoute(from, to, googleMap) {
+  var directionsService = new google.maps.DirectionsService();
+  var directionsRequest = {
+    origin: from,
+    destination: to,
+    travelMode: google.maps.DirectionsTravelMode.DRIVING,
+    unitSystem: google.maps.UnitSystem.METRIC
+  };
+  directionsService.route(
+    directionsRequest,
+    function(response, status) {
+      if (status == google.maps.DirectionsStatus.OK) {
+        new google.maps.DirectionsRenderer({
+          map: googleMap,
+          directions: response
+        });
+      } else {
+        console.warn('Unable to retrieve your route');
+      }
+    }
+  );
+}

public/app.js

@@ -0,0 +1,82 @@
+/*simple reset*/
+html, body, div, span, applet, object, iframe,
+header, hgroup, h1, h2, h3, h4, h5, h6,
+p, blockquote, pre, time,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, font, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+dl, dt, dd, ol, ul, li,
+figure, figcaption, video, audio, img,
+fieldset, form, label, legend, input, button, select,
+table, caption, tbody, tfoot, thead, tr, th, td,
+section, article, canvas, nav, footer, aside,
+figure {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  outline: 0;
+  vertical-align: baseline; }
+
+body {
+  font-size:100%;
+  font-family: 'helvetica neue' helvetica arial sans-serif;
+}
+
+.container {
+  width: 70%; min-width: 800px;
+  margin: 0px auto; padding: 2% 0px;
+  font-size: 1.2em;
+}
+
+p {margin:1em;}
+.form-field {margin:1em;}
+label, input {width:30%; font-size: 100%;}
+input {border:2px solid grey; padding:0.5em 1em;}
+input[type="submit"] {width:auto;}
+
+
+
+#map {width:100%; height:500px; border:1px solid black;}
+
+#golden-condor {
+  opacity:0;
+  width:593px; height:251px;
+  background: transparent url('golden-condor.png') no-repeat left top;
+}
+#mcog {
+  opacity: 0;
+  position: absolute; top:80px; left:25%;
+  width:50%; height:auto;
+  border:2px solid white; box-shadow: 1px 1px 10px black;
+}
+
+#mario-bros {
+  opacity:0;
+  width:499px; height:552px;
+  background: transparent url('marioBros.png') no-repeat left top;
+}
+
+/*#soundFile {display: none;}*/
+#mapStuff {opacity: 1;}
+#moon {
+  opacity: 0; display: none;
+  position: absolute; top:0px; left:0px;
+  width: 100vw; height: 100vh;
+  background-color: black;
+  -webkit-perspective: 1000px;
+  -moz-perspective: 1000px;
+  perspective: 1000px;
+}
+#light-side {
+  margin:200px auto;
+  width: 740px; height: 454px;
+  background:black url('moon.jpg') no-repeat center center;
+  transform-origin: bottom left;
+  -webkit-backface-visibility:visible;
+  -moz-backface-visibility:visible;
+  backface-visibility:visible;
+}
+
+
+
+

public/style.css

@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="UTF-8" />
+	<link rel="shortcut icon" href="favicon.ico" />
+	<meta name="viewport" content="width=initial-scale=1.0, maximum-scale=1.0, user-scalable=no"></head>
+	<title>VJing Demo</title>
+	<link type="text/css" href="style.css" rel="stylesheet" media="screen">
+	<script src="app.js"></script>
+</head>
+
+<body>
+	<div class="container">
+		<section id="controls"></section>
+
+		<section id="screen">
+
+		</section>
+	</div>
+</body>
+
+<script type="text/javascript">
+
+
+var mapDiv = document.getElementById('map'),
+		newMap,
+		setCenter = {};
+// refactor into init()
+if (navigator.geolocation) {
+	navigator.geolocation.getCurrentPosition(function (position) {
+		setCenter.lat = position.coords.latitude;
+		setCenter.lng = position.coords.longitude;
+		// see app.js for createMap function (creates a google map)
+		newMap = createMap(mapDiv, setCenter.lat, setCenter.lng);
+		showRoute();
+	});
+} else {
+	console.warn('sorry, geolocation not supported');
+}
+
+function showRoute() {
+	var destinationForm = document.forms[0];
+	destinationForm.onsubmit = function(e) {
+		e.preventDefault();
+		var dest = destinationForm.destination.value;
+		// see app.js for the calculateRoute function (uses google maps directions service to give route)
+		calculateRoute('Brighton', dest, newMap);
+	}
+}
+
+function init() {
+	
+}
+init();
+
+</script>
+
+</html>