Merge branch 'ludo' of github.com:jodersky/playGraph into dirty

5 files changed, 299 insertions, 0 deletions

diff --git a/app/css/lbarman.css b/app/css/lbarman.css
new file mode 100644
index 0000000..059ce51
--- /dev/null
+++ b/app/css/lbarman.css
@@ -0,0 +1,130 @@
+/* app css stylesheet */
+
+body
+{
+	background: rgb(255,255,255); /* Old browsers */
+	/* IE9 SVG, needs conditional override of 'filter' to 'none' */
+	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjY2NjY2NjIiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L3JhZGlhbEdyYWRpZW50PgogIDxyZWN0IHg9Ii01MCIgeT0iLTUwIiB3aWR0aD0iMTAxIiBoZWlnaHQ9IjEwMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
+	background: -moz-radial-gradient(center, ellipse cover,  rgba(255,255,255,1) 0%, rgba(204,204,204,1) 100%); /* FF3.6+ */
+	background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(204,204,204,1))); /* Chrome,Safari4+ */
+	background: -webkit-radial-gradient(center, ellipse cover,  rgba(255,255,255,1) 0%,rgba(204,204,204,1) 100%); /* Chrome10+,Safari5.1+ */
+	background: -o-radial-gradient(center, ellipse cover,  rgba(255,255,255,1) 0%,rgba(204,204,204,1) 100%); /* Opera 12+ */
+	background: -ms-radial-gradient(center, ellipse cover,  rgba(255,255,255,1) 0%,rgba(204,204,204,1) 100%); /* IE10+ */
+	background: radial-gradient(ellipse at center,  rgba(255,255,255,1) 0%,rgba(204,204,204,1) 100%); /* W3C */
+	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#cccccc',GradientType=1 ); /* IE6-8 fallback on horizontal gradient */
+	
+	font-family:'Ubuntu', "Times New Roman", Times, serif;
+	padding:5px;
+	font-size:16px;
+		
+}
+.world {
+	position: relative;
+}
+
+.world .line {
+	position: absolute;
+}
+
+.point {
+	position: absolute;
+}
+
+.point > div {
+	position: relative;
+	border-radius: 50%;
+	margin-left: -10px;
+	margin-top: -10px;
+	width: 20px;
+	height: 20px;
+	border: solid #aaaaaa 2px;
+	-webkit-transition: all .2s ease-in-out;
+}
+
+.point > div:hover {
+	margin-left: -15px;
+	margin-top: -15px;
+	-webkit-transform: scale(1.5);
+}
+
+
+.selected > div {
+	background-color: red;
+}
+#column-left
+{
+	width:300px;
+	float:left;
+	height:100%;
+	overflow:hidden;
+	min-height:100%;
+}
+#column-middle
+{
+	margin-left:350px;	
+	margin-right:350px;		
+}
+#column-right
+{
+	width:300px;
+	float:right;
+	height:100%;
+	overflow:hidden;
+	min-height:100%;	
+}
+.world
+{
+	padding-top:20px;
+}
+
+a, a:hover
+{
+	color:#000;	
+}
+h1
+{
+	color:#666;
+	border-bottom:1px solid #999;
+	padding-bottom:10px;
+	margin-bottom:50px;	
+	text-shadow:5px 5px 10px #EEE;
+	padding-left:40px;
+}
+input
+{
+	padding:5px;
+	
+	font-family:'Ubuntu', "Times New Roman", Times, serif;	
+}
+fieldset
+{
+	margin-bottom:30px;	
+	padding-top:20px;
+	padding-bottom:20px;
+	border:1px groove #EEE;
+}
+#authors
+{
+	float:right;	
+	color:#666;
+	font-size:13px;
+	position:absolute;
+	bottom:10px;
+	margin:auto;
+	width:100%;
+	text-align:center;
+}
+#videoResultsDiv ul
+{
+	list-style:none;
+	padding:0px;
+	max-height:400px;
+	overflow:scroll;	
+	overflow-y: scroll;
+	overflow-x: hidden;
+}
+#videoResultsDiv li
+{
+	margin:5px;	
+	margin-bottom:10px;
+}
\ No newline at end of file
diff --git a/app/img/forward.png b/app/img/forward.png
new file mode 100644
index 0000000..e393bfc
--- /dev/null
+++ b/app/img/forward.png
diff --git a/app/index.html b/app/index.html
index bf72b2a..ac1f1a5 100644
--- a/app/index.html
+++ b/app/index.html
@@ -4,6 +4,9 @@
         <meta charset="utf-8">
         <title>My HTML File</title>
         <link rel="stylesheet" href="css/app.css">
+        <link rel="stylesheet" href="css/lbarman.css">
+            <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Ubuntu">
+
         <script type="text/javascript" src="lib/paper-full.js"></script>
         <script src="lib/angular.js"></script>
         <script src="js/app.js" ></script>
@@ -11,10 +14,37 @@
         <script src="js/services.js" ></script>
         <script src="js/directives.js" ></script>
         <script src="js/controllers.js" ></script>
+        <script src="lib/jquery-1.11.1.min.js" ></script>
+        <script src="js/yt_musicsearch.js" ></script>
         
     </head>
     <body ng-app="playGraph" ng-controller="pointCtrl">
 
+		<div id="authors">
+        <p>Jakob Odersky, Nicolas Bornand, Ludovic Barman</p>
+        </div>
+		<div id="header"><h1>The &nbsp;<img src="img/forward.png"/><span style="color:#000">Play</span><span style="color:#09F">Graph</span> &nbsp;Project</h1></div>
+		<div id="column-left">
+        
+        	<fieldset>
+                <legend>Music search</legend>
+                
+            	<input type="text" name="searchValue" id="searchValue" value="Feed Me - Trichitillomania" />
+            	<input name="searchButton" type="submit" value="Search" onclick="searchClicked()"/>
+                
+            	<div id="videoResultsDiv"></div> 
+              </fieldset>
+              
+        
+        </div>
+        <div id="column-right">
+              
+        	<fieldset>
+                <legend>TrackList :</legend>
+                <div id="futurTrackListDiv">-empty</div>
+              </fieldset>
+        </div>
+        <div id="column-middle">
         <div class="world" style="width: 100%; height: 500px;">
             <div data-pg-line="line" class="line" resize></div>
 
@@ -81,5 +111,6 @@
         }
         </script>
     -->
+    </div>
     </body>
 </html>
diff --git a/app/js/yt_musicsearch.js b/app/js/yt_musicsearch.js
new file mode 100644
index 0000000..fcc52db
--- /dev/null
+++ b/app/js/yt_musicsearch.js
@@ -0,0 +1,51 @@
+function searchClicked()
+        {
+            document.getElementById("videoResultsDiv").innerHTML = 
+                                    'Loading YouTube videos ...';
+
+            //create a JavaScript element that returns our JSON data.
+            var script = document.createElement('script');
+            script.setAttribute('id', 'jsonScript');
+            script.setAttribute('type', 'text/javascript');
+            script.setAttribute('src', 'http://gdata.youtube.com/feeds/' + 
+                   'videos?vq='+encodeURIComponent($('#searchValue').val())+'&max-results=8&' + 
+                   'alt=json-in-script&callback=getAllMatchingIds&' + 
+                   'orderby=relevance&sortorder=descending&format=5&fmt=18');
+
+            //attach script to current page -  this will submit asynchronous
+            //search request, and when the results come back callback 
+            //function showMyVideos(data) is called and the results passed to it
+            document.documentElement.firstChild.appendChild(script);
+        }
+
+
+		function newMusic(id)
+		{
+			$('#ytplayer').attr('src', 'https://www.youtube.com/embed/'+id+'?autoplay=1&modestbranding=1');
+		}
+
+        function getAllMatchingIds(data)
+        {
+            var feed = data.feed;
+            var entries = feed.entry || [];
+			var results = new Array();
+			
+			
+            for (var i = 0; i < entries.length; i++)
+            {
+				var id = entries[i].id.$t.substring(entries[i].id.$t.lastIndexOf("/")+1);
+                results.push({'id' : id, 'title' : entries[i].title.$t, 'link' : entries[i].link[0].href, 'duration' : entries[i].media$group.yt$duration.seconds});
+            }
+			console.log(entries);
+			console.log(results);
+            var html = ['<ul>'];
+			
+			
+            for (var i = 0; i < results.length; i++)
+            {
+                //html.push('<li>', '<img src="http://img.youtube.com/vi/', results[i].id, '/2.jpg" /><a href="#" onclick="newMusic(\'', results[i].id ,'\')">', results[i].title, '</a>(', results[i].duration, ')', '</li>');
+                html.push('<li>', '<a href="#" onclick="newMusic(\'', results[i].id ,'\')">', results[i].title, '</a>', '</li>');
+            }
+            html.push('</ul>');
+            document.getElementById('videoResultsDiv').innerHTML = html.join('');
+        }
\ No newline at end of file
diff --git a/styledemo.html b/styledemo.html
new file mode 100644
index 0000000..e9f8417
--- /dev/null
+++ b/styledemo.html
@@ -0,0 +1,87 @@
+
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8">
+        <title>My HTML File</title>
+        <link rel="stylesheet" href="css/app.css">
+        <script type="text/javascript" src="lib/paper-full.js"></script>
+        <script src="lib/angular.js"></script>
+        <script src="js/app.js" ></script>
+        <script src="js/services.js" ></script>
+        <script src="js/directives.js" ></script>
+        <script src="js/controllers.js" ></script>
+        
+    </head>
+    <body ng-app="playGraph" ng-controller="pointCtrl">
+
+		<div id="header"><h1>PlayGraph Project</h1></div>
+		<div id="column-left"></div>
+        <div id="column-right">
+        <div class="world" style="width: 100%; height: 500px;">
+            <div data-pg-line="line" class="line" resize></div>
+
+            <div data-ng-repeat="point in points" data-pg-draggable="point" class="point" style="top: {{point.x}}px; left: {{point.y}}px;" data-ng-class="{selected: point.selected==true}"><div></div></div>
+        </div>
+
+        <ul>
+            <li data-ng-repeat="point in points | filter:{selected:true}">{{point.x}}, {{point.y}}</li> 
+            
+        </ul>
+
+        <button ng-click="foo()">Add button</button>
+
+<!--
+        <svg id="world" width="500" height="500">
+            <circle data-ng-repeat="point in points" cx="{{point.x}}" cy="{{point.y}}" r="10" stroke="gray" stroke-width="2" fill="{{getColor(point)}}"></circle>
+            <line data-ng-repeat="tuple in line | sliding2" x1="{{tuple[0].x}}" y1="{{tuple[0].y}}" x2="{{tuple[1].x}}" y2="{{tuple[1].y}}" style="stroke:rgb(255,0,0);stroke-width:2" />
+        </svg>-->
+<!--
+        <a href="#" onclick="tool1.activate();">Lines</a>
+        <a href="#" onclick="tool2.activate();">Clouds</a>
+        <canvas id="myCanvas" resize></canvas>
+        <ul>
+            <li data-ng-repeat="song in playlist">
+                {{song}}
+            </li>
+        </ul>
+
+        <script>
+        
+        // Keep global references to both tools, so the HTML
+        // links below can access them.
+        var tool1, tool2;
+        paper.setup('myCanvas');
+
+        // Create two drawing tools.
+        // tool1 will draw straight lines,
+        // tool2 will draw clouds.
+
+        // Both share the mouseDown event:
+        var path;
+        function onMouseDown(event) {
+            path = new paper.Path();
+            path.strokeColor = 'black';
+            path.add(event.point);
+        }
+
+        tool1 = new paper.Tool();
+        tool1.onMouseDown = onMouseDown;
+
+        tool1.onMouseDrag = function(event) {
+            path.add(event.point);
+        }
+
+        tool2 = new paper.Tool();
+        tool2.minDistance = 20;
+        tool2.onMouseDown = onMouseDown;
+
+        tool2.onMouseDrag = function(event) {
+            // Use the arcTo command to draw cloudy lines
+            path.arcTo(event.point);
+        }
+        </script>
+    -->
+    </div>
+    </body>
+</html>