added some ui stuff

lshap · Apr 4, 2014 · 21f78b5 · 21f78b5
1 parent d626bf1
commit 21f78b5
Show file tree

Hide file tree

Showing 11 changed files with 121 additions and 7 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/.callback.html.swp b/.callback.html.swp
diff --git a/.soundscene.css.swp b/.soundscene.css.swp
diff --git a/.soundscene.html.swp b/.soundscene.html.swp
diff --git a/callback.html b/callback.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+    <title>Connect with SoundCloud</title>
+  </head>
+  <body onload="window.opener.setTimeout(window.opener.SC.connectCallback, 1)">
+    <b style="width: 100%; text-align: center;">This popup should automatically close in a few seconds</b>
+  </body>
+</html>
diff --git a/images/info.png b/images/info.png
diff --git a/images/info_hover.png b/images/info_hover.png
diff --git a/images/link_hover.png b/images/link_hover.png
diff --git a/images/upload_hover.png b/images/upload_hover.png
diff --git a/soundscene.css b/soundscene.css
@@ -32,17 +32,18 @@ body {
 	background-color: #FFFFFF;
 }
 
-span {
+#OR {
 	font-family: "News Gothic MT", "Helvetica Neue" Arial, sans-serif;
 	font-size: 30px;
 	color:#FFC9FE;
 	font-weight:bold;
 }
 
+
 #header {
 	font-family: "News Gothic MT", "Helvetica Neue", Arial, sans-serif;
 	font-size: 70px;
-	font-style:bold;
+	font-weight:bold;
 	color:#62F0DF; 
 	position:fixed;
 	top:200px;
@@ -51,6 +52,28 @@ span {
 	min-width:100%;
 }
 
+#overlay{
+	background-color:rgba(255, 255, 255, 0.7);
+	position:fixed;
+	top:0px;
+	left:0px;
+	width:100%;
+	height:100%;
+}
+
+#information {
+	font-weight:normal;
+	font-size:18px;
+	//color:#FFC9FE;
+	//color:#CC33FF;
+	color:#4D4D4D;
+	padding: 10px 10px 10px 10px;
+	background-color:rgba(127, 241, 227, 0.4);
+	position:fixed;
+	top:50px;
+	left:70%;
+	margin-right:60px;
+}
 
 #canvas {
 	position:fixed;
@@ -83,7 +106,7 @@ span {
 }
 
 #uploadimage {
-	width:50px;
+ 	width:50px;
 	height:50px;
 	margin-left:35px;
 }
@@ -128,4 +151,10 @@ span {
 	margin-left:15px;
 }
 
-
+#info {
+	position:fixed;
+	top:20px;
+	left:95%;
+	width:40px;
+	height:40px;
+}
diff --git a/soundscene.html b/soundscene.html
@@ -7,9 +7,21 @@
 		<script src="js/jquery-1.11.0.min.js"></script>
 		<script src="js/jquery-ui-1.10.4.custom.min.js"></script>
 		<script src="js/ColorWheel.js"></script>
+		<script src="http://connect.soundcloud.com/sdk.js"></script>
 		<link rel='stylesheet' href='bootstrap.css'>
 		<link rel='stylesheet' href='jquery-ui-1.10.4.custom.min.css'>
 		<script type="text/javascript">
+
+			// init sound cloud api
+			/*SC.initialize({
+				client_id: '0a4952b89f13d2410090d9ba21e63cf5',
+				redirect_uri:'http://www.seas.upenn.edu/~lshapi/soundscene.html'});
+			SC.connect(function(){
+				SC.get('/me', function(me) {
+					console.log("Hello " + me.username);
+				});
+			});*/
+
 			ColorMode = {
 				MONOCHROME: 0,
 				TWOTONE: 1,
@@ -106,6 +118,9 @@
 				$("#filepicker").hide();
 				$("#urlInput").hide();
 
+				$("#information").hide();
+				$("#overlay").hide();
+
 				console.log('width = ' + WIDTH + 'height = ' + HEIGHT);
 				$('#controls').hide();
 				$('#canvas').hide();
@@ -161,7 +176,9 @@
 					backCtxt.fill();
 				}
 
-				requestAnimationFrame(drawBackgroundCircles);
+				if ($("#backcanvas:visible"))  {
+					requestAnimationFrame(drawBackgroundCircles);
+				}
 			}
 
 			function initBackgroundCanvas() {
@@ -587,7 +604,9 @@
 				}				
 
 				$('h1').hide();
+				$('#header').hide();
 				$('#dragDiv').hide();
+				$('#backgroundcanvas').hide();
 				$('#canvas').show();
 				$('#menucontainer').show();
 				//$('#backBtn').show();
@@ -759,21 +778,71 @@
 			});
 
 			$("#uploadimage").click(function() {
-				console.log("registered upload click");
 				$("#filepicker").click();
 			});
 
+			$("#uploadimage").mouseover(function() {
+				var im = document.getElementById("uploadimage");
+				im.src="images/upload_hover.png";
+			});
+
+			$("#uploadimage").mouseout(function() {
+				var im = document.getElementById("uploadimage");
+				im.src="images/upload.png";
+			});
+
+			$("#linkimage").mouseover(function() {
+				var im = document.getElementById("linkimage");
+				im.src="images/link_hover.png";
+			});
+
+			$("#linkimage").mouseout(function() {
+				var im = document.getElementById("linkimage");
+				im.src="images/link.png";
+			});
+
+
+			$("#info").mouseover(function(){
+				var im = document.getElementById("info");
+				im.src = "images/info_hover.png";
+			});
+
+			$("#info").mouseout(function(){
+				var im = document.getElementById("info");
+				im.src = "images/info.png";
+			});
+
+
+
+			$("#info").click(function() {
+				console.log("registered click");
+				if ($("#overlay").is(':visible')) {
+					$("#information").hide();
+					$("#overlay").hide();
+				}
+				else {
+					$("#information").show();
+					$("#overlay").show();
+				}
+			});
+
+			$("#filepicker").change(function(evt) {
+				var file = evt.target.files[0];
+				loadSound(file);	
+			});
 
 			$("#linkimage").click(function() {
 				console.log("registered click");
 				if ($("#urlInput").is(':visible')) {
 					$("#urlInput").hide();
 					$("#uploadimage").show();
+					$(this).css("margin-top", "0px");
 					$("#OR").show();
 				}
 				else {
 					$("#urlInput").show();
 					$("#OR").hide();
+					$(this).css("margin-top", "3px");
 					$("#uploadimage").hide();
 				}
 			});
@@ -942,7 +1011,7 @@
 	<body>
 		<div id="main">
 		<canvas id="backgroundcanvas"></canvas>
-		<span id="header">SOUND SCENE</span> 
+		<span id="header">SOUND SKETCH</span> 
 		<img id="colorwheel" src="images/colorwheel.png"></img>	
 		<div id="dragDiv" class="row" ondragover="allowDrop(event)" ondrop="drop(event)">
 			<!--<image id="playIm" src="images/draganddroppurple.png"/>-->
@@ -972,6 +1041,13 @@
 			</div>
 		</div>
 		</div>
+		<div id="overlay"></div>
+		<img src="images/info.png" id="info"></img>
+		<div id="information">
+		<span>Welcome to Sound Sketch! Upload an mp3 to begin an interactive
+		      music experience. Your sound will provide a visual base for your
+		      sketch, which will alter the sound you provided as you play around! </span>
+		</div>
 		<div id='controls'>
 		<p>//TEMPORARY CONTROLS</p>
 		<p>Shape Mode: </p>