From 527929c3219bc19479abdd68a8c695b9f7fe8ca2 Mon Sep 17 00:00:00 2001 From: Jakob Odersky Date: Wed, 14 May 2014 13:15:24 +0200 Subject: merge nicolas' 10x ui performance improvements --- public/old/app/index.html | 10 +- public/old/app/js/app.js | 1 + public/old/app/js/controllers.js | 70 +++++------- public/old/app/js/directives.js | 208 +++++++++++++++++++++--------------- public/old/app/js/services.js | 64 +++++++++-- public/old/app/js/yt_musicsearch.js | 63 ----------- public/old/line_simplify.html | 69 ------------ public/old/styledemo.html | 87 --------------- public/old/videosearch_n_play.html | 93 ---------------- 9 files changed, 206 insertions(+), 459 deletions(-) delete mode 100644 public/old/app/js/yt_musicsearch.js delete mode 100644 public/old/line_simplify.html delete mode 100644 public/old/styledemo.html delete mode 100644 public/old/videosearch_n_play.html diff --git a/public/old/app/index.html b/public/old/app/index.html index 53170e6..77bcb2d 100644 --- a/public/old/app/index.html +++ b/public/old/app/index.html @@ -16,7 +16,6 @@ - @@ -27,14 +26,7 @@
-
- Music search - - - - -
-
+
diff --git a/public/old/app/js/app.js b/public/old/app/js/app.js index 0ff05e9..d9fbeb0 100644 --- a/public/old/app/js/app.js +++ b/public/old/app/js/app.js @@ -233,6 +233,7 @@ label: "Feed Me - Trichitillomania", link: "http://www.youtube.com/watch?v=TAgJFGmgGJ0&feature=youtube_gdata" }, { + x: 900, y: 320, duration: "406", diff --git a/public/old/app/js/controllers.js b/public/old/app/js/controllers.js index 97b52ad..f49f1b1 100644 --- a/public/old/app/js/controllers.js +++ b/public/old/app/js/controllers.js @@ -1,66 +1,44 @@ 'use strict'; /* Controllers */ -var p = new Point(1,2); +var p = new Point(1, 2); -app.controller('pointCtrl', function($scope, $http, pathService){ +app.controller('pointCtrl', function($scope, $http, pathService, musicPlayer) { - $scope.points=dummyPoints; - $scope.line = []; + $scope.points = dummyPoints; + $scope.line = []; - var update = function(newPoints, newLine) { - if(newLine.length > 0) { - $scope.playseq=pathService.computePlaylist(newPoints, newLine, 60); - startSongWithDuration($scope.playseq[0].id, $scope.playseq[0].duration); - } - } + var update = function(newPoints, newLine) { + if (newLine.length > 0) { + $scope.playseq = pathService.computePlaylist(newPoints, newLine, 60); + musicPlayer.startSongWithDuration($scope.playseq[0].id, $scope.playseq[0].duration); + } + }; - $scope.$watch('points', function(newVal, oldVal) { - console.log("r") - update(newVal, $scope.line); + $scope.$watch('points', function(newVal) { + update(newVal, $scope.line); }, true); $scope.$watch('line', function(newVal) { - update($scope.points, newVal); + update($scope.points, newVal); }, true); - -// $scope.line=constList; - - $scope.addNewSongToGraph = function(id, titre, link, duration) - { - var newSong = { - x:100, - y:100, - label:titre, - id:id, - link:link, - duration:duration - }; - $scope.points.push(newSong); - console.log(newSong); - $scope.$apply(); - }; - - $scope.getColor = function(point) { - if (playlist.indexOf(point) == -1) { - return "white" - } else { - return "red" - } - } +// $scope.line=constList; - $scope.foo = function (event) { - console.log("foobar"); + $scope.addNewSongToGraph = function(newSong) + { + newSong.x = 100; + newSong.y = 100; + $scope.points.push(newSong); + }; +}); - $scope.points.push({ - x: 250, - y: 250 - }); - }; +app.controller('searchCtrl', function($scope) { + $scope.points = dummyPoints; + $scope.line = []; }); \ No newline at end of file diff --git a/public/old/app/js/directives.js b/public/old/app/js/directives.js index 428fad1..3ce58a0 100644 --- a/public/old/app/js/directives.js +++ b/public/old/app/js/directives.js @@ -1,93 +1,133 @@ 'use strict'; -app.directive('pgLine', function () { +app.directive('pgLine', function() { return { - restrict: 'A', - replace: 'false', - scope: { - line: '=', - list: '=' - }, - template: '', - link: function (scope, elems, attrs) { - var canvas = elems[0]; - var mainTool = new paper.Tool(); - - mainTool.activate(); - - //scope.line = scope.$eval(attrs.pgLine); - - paper.setup(canvas); - - var path; - var drag = false; - - - mainTool.onMouseDown = function(event) { - paper.project.clear(); - // If we produced a path before, deselect it: - if (path) { - path.selected = false; - } - // Create a new path and set its stroke color to black: - path = new paper.Path({ - segments: [event.point], - strokeColor: 'rgba(7,140,255,.3)', - strokeWidth: 100, - strokeCap: 'round' - }); - - drag = true; - }; - - mainTool.onMouseMove = function(event) { - if (drag) { - path.add(event.point); - } - } - - mainTool.onMouseUp = function(event) { - drag = false; - var segmentCount = path.segments.length; - - var points = Array(); - - // When the mouse is released, simplify it: - path.simplify(1); - path.smooth(1); - - - for(var i=0; i', + link: function(scope, elems, attrs) { + var canvas = elems[0]; + var mainTool = new paper.Tool(); + + mainTool.activate(); + + //scope.line = scope.$eval(attrs.pgLine); + + paper.setup(canvas); + + var path; + var drag = false; + + + mainTool.onMouseDown = function(event) { + paper.project.clear(); + // If we produced a path before, deselect it: + if (path) { + path.selected = false; + } + // Create a new path and set its stroke color to black: + path = new paper.Path({ + segments: [event.point], + strokeColor: 'rgba(7,140,255,.3)', + strokeWidth: 100, + strokeCap: 'round' + }); + + drag = true; + }; + + mainTool.onMouseMove = function(event) { + if (drag) { + path.add(event.point); + } + scope.$apply(); + } + + mainTool.onMouseUp = function(event) { + drag = false; + var segmentCount = path.segments.length; + + var points = Array(); + + // When the mouse is released, simplify it: + path.simplify(1); + path.smooth(1); + + + for (var i = 0; i < path._segments.length; i++) + { + points.push({x: path._segments[i]._point.x, y: path._segments[i]._point.y}); + } + + scope.line = points; + scope.$apply(); + }; + + var lines = []; + scope.$watch('list', function(newPoints) { + console.log("update"); + angular.forEach(lines, function(line) { + line.remove(); + }); + if (newPoints) { + + for (var i = 0; i < newPoints.length - 1; ++i) { + if (newPoints[i].selected) { + var line = paper.Path.Line(newPoints[i], newPoints[i + 1]); + line.strokeColor = 'rgba(7,140,255,.6)'; + line.strokeWidth = 2; + lines.push(line) + } + } + } + }, true); + } } }); +app.directive('pgSearchArea', function() { + return { + restrict: 'A', + template: '
Music search
', + link: function($scope, $elm, $attrs) { + $scope.search = { + value: 'init val', + results: [] + }, + $scope.searchTriggered = function() { + //document.getElementById("videoResultsDiv").innerHTML = + // 'Loading YouTube videos ...'; + + 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($scope.search.value) + '&max-results=8&' + + 'alt=json-in-script&callback=youtubeCallback&' + + 'orderby=relevance&sortorder=descending&format=5&fmt=18'); + document.documentElement.firstChild.appendChild(script); + }; + $scope.resultsCallback = function(data) { + var feed = data.feed; + var entries = feed.entry || []; + $scope.search.results.splice(0, $scope.search.results.length); + for (var i = 0; i < entries.length; i++) + { + var id = entries[i].id.$t.substring(entries[i].id.$t.lastIndexOf("/") + 1); + $scope.search.results.push({id: id, label: entries[i].title.$t, link: entries[i].link[0].href, duration: entries[i].media$group.yt$duration.seconds}); + } + $scope.$apply(); + }; + window.youtubeCallback = function(data) { + angular.element(document.getElementById('searchArea')).scope().resultsCallback(data); + }; + } + }; +}); app.directive('pgDraggable', ['$document' , function($document) { return { restrict: 'A', diff --git a/public/old/app/js/services.js b/public/old/app/js/services.js index 9913856..8dbd1b2 100644 --- a/public/old/app/js/services.js +++ b/public/old/app/js/services.js @@ -9,27 +9,75 @@ app.service('pathService', function() { var dy = point1.y - point2.y; return Math.sqrt(dx * dx + dy * dy); }, - computePlaylist: function(songList, line, duration) { + computePlaylistOld: function(songList, line, duration) { //compute distances from the constrain path - console.log('length',line.length); - + console.log('length', line.length); + var threshold = 60; - angular.forEach(songList, function(song){ + angular.forEach(songList, function(song) { song.selected = false; }); - + var selection = []; - angular.forEach(line, function(point){ - angular.forEach(songList, function(song){ + angular.forEach(line, function(point) { + angular.forEach(songList, function(song) { var d = self.dist(song, point); - if(d < threshold && song.selected !== true){ + if (d < threshold && song.selected !== true) { selection.push(song); song.selected = true; } }); }); return selection; + }, + computePlaylist:function(songList, line, duration) { + //compute distances from the constrain path + + var threshold = 60; + for(var i=songList.length-1; i>0; i--){ + songList[i].selected = false; + }; + var songCopy = songList.slice(0); + songCopy.sort(function(a,b){return a.x-b.x;}); + + var selection = []; + for(var i=line.length-1; i>0; i--) { + var point = line[i]; + var min = line[i].x-threshold; + var max = line[i].x+threshold; + var j=songCopy.length-1; + while(songCopy[j].x > max && j > 0){ + j--; + } + while(songCopy[j].x > min && j > 0){ + var song = songCopy[j]; + var d = self.dist(song, point); + if (d < threshold) { + songCopy.splice(j,1); + selection.push(song); + song.selected = true; + } + j--; + }; + }; + return selection; + } + }; + return self; +}); +app.service('musicPlayer', function() { + var self = { + musicTimer: null, + startSongWithDuration: function(id, duration) + { + $('#ytplayer').attr('src', 'https://www.youtube.com/embed/' + id + '?autoplay=1&modestbranding=1'); + self.musicTimer = setInterval(self.changeSong, duration * 1000); + }, + changeSong: function() + { + clearInterval(self.musicTimer); } }; + return self; }); diff --git a/public/old/app/js/yt_musicsearch.js b/public/old/app/js/yt_musicsearch.js deleted file mode 100644 index 028ae6e..0000000 --- a/public/old/app/js/yt_musicsearch.js +++ /dev/null @@ -1,63 +0,0 @@ - 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); - } - - - var musicTimer; - - function startSongWithDuration(id, duration) - { - $('#ytplayer').attr('src', 'https://www.youtube.com/embed/'+id+'?autoplay=1&modestbranding=1'); - console.log("Starting music "+id+", timer="+duration); - musicTimer = setInterval(changeSong, duration * 1000); - } - - function changeSong() - { - clearInterval(musicTimer); - } - - function callAngular(id, titre, link, duration) - { - angular.element(document.getElementById('body_spe')).scope().addNewSongToGraph(id, titre, link, duration); - } - - 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}); - } - var html = [''); - document.getElementById('videoResultsDiv').innerHTML = html.join(''); - } \ No newline at end of file diff --git a/public/old/line_simplify.html b/public/old/line_simplify.html deleted file mode 100644 index 7c049d6..0000000 --- a/public/old/line_simplify.html +++ /dev/null @@ -1,69 +0,0 @@ - - - - - - - - - - - - \ No newline at end of file diff --git a/public/old/styledemo.html b/public/old/styledemo.html deleted file mode 100644 index e9f8417..0000000 --- a/public/old/styledemo.html +++ /dev/null @@ -1,87 +0,0 @@ - - - - - - My HTML File - - - - - - - - - - - - -
-
-
-
- -
-
- -
    -
  • {{point.x}}, {{point.y}}
    • - -
- - - - - -
- - diff --git a/public/old/videosearch_n_play.html b/public/old/videosearch_n_play.html deleted file mode 100644 index fb58843..0000000 --- a/public/old/videosearch_n_play.html +++ /dev/null @@ -1,93 +0,0 @@ - - - - - Search Snippet - - - - - - - - -
-

- - -

- Results:
-
- -