diff options
author | Ludovic Barman <ludovic.barman@gmail.com> | 2014-05-11 12:05:45 +0200 |
---|---|---|
committer | Ludovic Barman <ludovic.barman@gmail.com> | 2014-05-11 12:05:45 +0200 |
commit | db3977c8e852c474a13829c691ce34cc505692dc (patch) | |
tree | bed98e429bc59b2cb867e79e75f878207be39af1 | |
parent | 481dc29aa7225d7aa7a00b2690165245a4065252 (diff) | |
download | playGraph-db3977c8e852c474a13829c691ce34cc505692dc.tar.gz playGraph-db3977c8e852c474a13829c691ce34cc505692dc.tar.bz2 playGraph-db3977c8e852c474a13829c691ce34cc505692dc.zip |
add template
-rw-r--r-- | app/css/lbarman.css | 130 | ||||
-rw-r--r-- | app/img/forward.png | bin | 0 -> 1281 bytes | |||
-rw-r--r-- | app/index.html | 31 | ||||
-rw-r--r-- | app/js/yt_musicsearch.js | 51 | ||||
-rw-r--r-- | styledemo.html | 87 |
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 Binary files differnew file mode 100644 index 0000000..e393bfc --- /dev/null +++ b/app/img/forward.png diff --git a/app/index.html b/app/index.html index 843df21..4798294 100644 --- a/app/index.html +++ b/app/index.html @@ -4,16 +4,46 @@ <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> <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 <img src="img/forward.png"/><span style="color:#000">Play</span><span style="color:#09F">Graph</span> 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> @@ -78,5 +108,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> |