My HTML File

From a0c7682412ad701a7300e6ec29ba90d90999657e Mon Sep 17 00:00:00 2001 From: Jakob Odersky Date: Sat, 10 May 2014 22:10:04 +0200 Subject: stash --- app/index.html | 7 +++- app/js/controllers.js | 105 +++++++++++++++++++++++++++++++++++++++++++++++++- 2 files changed, 109 insertions(+), 3 deletions(-) diff --git a/app/index.html b/app/index.html index 6bf7fc0..bfbc92e 100644 --- a/app/index.html +++ b/app/index.html @@ -4,18 +4,21 @@ My HTML File + - + + +

{{song}} diff --git a/app/js/controllers.js b/app/js/controllers.js index e79dfa9..80303ab 100644 --- a/app/js/controllers.js +++ b/app/js/controllers.js @@ -3,6 +3,8 @@ /* Controllers */ var p = new Point(1,2); + + app.controller('pointCtrl', function($scope, $http, pathService){ var constList = [ {x: 10, y:20}, @@ -16,7 +18,7 @@ app.controller('pointCtrl', function($scope, $http, pathService){ var playlist = pathService.computePlaylist(dummyPoints,constList, 60); - $scope.line=constList; +// $scope.line=constList; $scope.points=dummyPoints; $scope.playlist=playlist; @@ -27,6 +29,107 @@ app.controller('pointCtrl', function($scope, $http, pathService){ return "red" } } + + + // Get a reference to the canvas object + var canvas = document.getElementById('canvas'); + // Create an empty project and a view for the canvas: + paper.setup(canvas); + // Create a Paper.js Path to draw a line into it: + var path = new paper.Path(); + + + // Give the stroke a color + path.strokeColor = 'black'; + var start = new paper.Point(100, 100); + var textItem = new paper.PointText({ + content: 'Click and drag to draw a line.', + point: new Point(20, 30), + fillColor: 'black', + }); + + // Move to start and draw a line from there + path.moveTo(start); + // Note that the plus operator on Point objects does not work + // in JavaScript. Instead, we need to call the add() function: + path.lineTo(start.add([ 200, -50 ])); + // Draw the view now: + paper.view.draw(); + + + $scope.mouseDown = function(event){ + console.log(event); + if (path) { + path.selected = false; + } + + // Create a new path and set its stroke color to black: + path = new paper.Path({ + segments: [new paper.Point(event.x, event.y)], + strokeColor: 'black', + // Select the path, so we can see its segment points: + fullySelected: true + }); + }; + + $scope.mouseDrag = function(event){ + path.add(new paper.Point(event.x, event.y)); + + // Update the content of the text item to show how many + // segments it has: + textItem.content = 'Segment count: ' + path.segments.length; + }; + +$scope.mouseUp = function(){ + var segmentCount = path.segments.length; + + var points = Array(); + + // When the mouse is released, simplify it: + path.simplify(10); + + for(i=0; i
Date: Sun, 11 May 2014 01:50:09 +0200 Subject: wip - paperjs directive --- app/index.html | 53 +++++++++++++++++++++++-- app/js/controllers.js | 107 +++----------------------------------------------- app/js/directives.js | 75 ++++++++++++++++++++++++++++++++++- 3 files changed, 128 insertions(+), 107 deletions(-) diff --git a/app/index.html b/app/index.html index bfbc92e..b2d919d 100644 --- a/app/index.html +++ b/app/index.html @@ -7,25 +7,70 @@ - + + + +

+
- ( {{point.x}} , {{point.y}} )
+ + + - - + diff --git a/app/js/controllers.js b/app/js/controllers.js index 80303ab..11e0b24 100644 --- a/app/js/controllers.js +++ b/app/js/controllers.js @@ -30,111 +30,14 @@ app.controller('pointCtrl', function($scope, $http, pathService){ } } + $scope.foo = function (event) { + console.log("foobar"); - // Get a reference to the canvas object - var canvas = document.getElementById('canvas'); - // Create an empty project and a view for the canvas: - paper.setup(canvas); - // Create a Paper.js Path to draw a line into it: - var path = new paper.Path(); - - - // Give the stroke a color - path.strokeColor = 'black'; - var start = new paper.Point(100, 100); - var textItem = new paper.PointText({ - content: 'Click and drag to draw a line.', - point: new Point(20, 30), - fillColor: 'black', - }); - - // Move to start and draw a line from there - path.moveTo(start); - // Note that the plus operator on Point objects does not work - // in JavaScript. Instead, we need to call the add() function: - path.lineTo(start.add([ 200, -50 ])); - // Draw the view now: - paper.view.draw(); - - - $scope.mouseDown = function(event){ - console.log(event); - if (path) { - path.selected = false; - } - - // Create a new path and set its stroke color to black: - path = new paper.Path({ - segments: [new paper.Point(event.x, event.y)], - strokeColor: 'black', - // Select the path, so we can see its segment points: - fullySelected: true + $scope.points.push({ + x: 250, + y: 250 }); - }; - - $scope.mouseDrag = function(event){ - path.add(new paper.Point(event.x, event.y)); - - // Update the content of the text item to show how many - // segments it has: - textItem.content = 'Segment count: ' + path.segments.length; - }; - -$scope.mouseUp = function(){ - var segmentCount = path.segments.length; - - var points = Array(); - - // When the mouse is released, simplify it: - path.simplify(10); - - for(i=0; i
', + scope: { + points: '=', + line: '=' + }, + link: function (scope, elems, attrs) { + var canvas = elems[0]; + var mainTool = new paper.Tool(); + mainTool.activate(); + + paper.setup(canvas); + + var paperPoints = []; + var paperLine = []; + + var drawPoints = function(points) { + angular.forEach(points, function(point) { + var path = new paper.Path.Circle(new Point(point.x, point.y), 5); + path.strokeColor = 'gray'; + path.strokeWidth = 2; + }); + }; + + var selected = null; + var drag = false; + mainTool.onMouseDown = function(event) { + var hit = paper.project.hitTest(event.point) + if (hit) { + selected = hit.item; + } else { + var path = new paper.Path.Circle(new Point(event.point.x, event.point.y), 5); + path.strokeColor = 'gray'; + path.strokeWidth = 2; + path.fillColor = 'white'; + /*scope.points.push({ + x: event.point.x, + y: event.point.y + }); + scope.$apply();*/ + selected = path; + }; + + drag = true; + }; + + mainTool.onMouseMove = function(event) { + if (drag && selected) { + selected.position = event.point; + scope.$apply(); + } + } + + mainTool.onMouseUp = function(event) { + drag = false; + } + +/* + scope.$watchCollection('points', function(newVal) { + console.log("update"); + if (newVal) { + paper.project.clear(); + drawPoints(scope.points); + } + }, true); +*/ + + drawPoints(); + } + } +}); \ No newline at end of file -- cgit v1.2.3 From c5a3c232eb89bf14748a105809184d02c949e762 Mon Sep 17 00:00:00 2001 From: Jakob Odersky
Date: Sun, 11 May 2014 10:00:17 +0200 Subject: new canvas --- app/css/app.css | 29 +++++++++++++ app/index.html | 10 ++++- app/js/controllers.js | 33 +++++++++------ app/js/directives.js | 112 ++++++++++++++++++++++++++++++++++++-------------- 4 files changed, 138 insertions(+), 46 deletions(-) diff --git a/app/css/app.css b/app/css/app.css index 8d3eae6..960eac4 100644 --- a/app/css/app.css +++ b/app/css/app.css @@ -1 +1,30 @@ /* app css stylesheet */ + +.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; +} + +.point > div:hover { + margin-left: -15px; + margin-top: -15px; + width: 30px; + height: 30px; +} \ No newline at end of file diff --git a/app/index.html b/app/index.html index b2d919d..537996f 100644 --- a/app/index.html +++ b/app/index.html @@ -14,9 +14,15 @@ -

+
+
+ +
+
+
- ( {{point.x}} , {{point.y}} )
- {{point.x}}, {{point.y}}
diff --git a/app/js/controllers.js b/app/js/controllers.js index 11e0b24..29e7c0d 100644 --- a/app/js/controllers.js +++ b/app/js/controllers.js @@ -6,21 +6,28 @@ var p = new Point(1,2); app.controller('pointCtrl', function($scope, $http, pathService){ - var constList = [ - {x: 10, y:20}, - {x: 20, y:30}, - {x: 40, y:50}, - {x: 60, y:60}, - {x: 100, y:120}, - {x: 150, y:300}, - {x: 150, y:340} - ]; - - var playlist = pathService.computePlaylist(dummyPoints,constList, 60); -// $scope.line=constList; $scope.points=dummyPoints; - $scope.playlist=playlist; + $scope.line = []; + + var update = function(newPoints, newLine) { + if(newLine.length > 0) { + $scope.playlist=pathService.computePlaylist(newPoints, newLine, 60); + } + } + + $scope.$watch('points', function(newVal) { + console.log("r") + update(newVal, $scope.line); + }, true); + + $scope.$watch('line', function(newVal) { + update($scope.points, newVal); + }, true); + + +// $scope.line=constList; + $scope.getColor = function(point) { if (playlist.indexOf(point) == -1) { diff --git a/app/js/directives.js b/app/js/directives.js index 40e7fab..a460d93 100644 --- a/app/js/directives.js +++ b/app/js/directives.js @@ -1,63 +1,75 @@ 'use strict'; -app.directive('pgEpicness', function () { +app.directive('pgLine', function () { return { restrict: 'A', replace: 'false', template: '', - scope: { - points: '=', - line: '=' - }, link: function (scope, elems, attrs) { var canvas = elems[0]; var mainTool = new paper.Tool(); mainTool.activate(); - paper.setup(canvas); - - var paperPoints = []; - var paperLine = []; + scope.line = scope.$eval(attrs.pgLine); - var drawPoints = function(points) { - angular.forEach(points, function(point) { - var path = new paper.Path.Circle(new Point(point.x, point.y), 5); - path.strokeColor = 'gray'; - path.strokeWidth = 2; - }); - }; + paper.setup(canvas); + var path; var selected = null; var drag = false; + mainTool.onMouseDown = function(event) { var hit = paper.project.hitTest(event.point) if (hit) { selected = hit.item; } else { - var path = new paper.Path.Circle(new Point(event.point.x, event.point.y), 5); - path.strokeColor = 'gray'; - path.strokeWidth = 2; - path.fillColor = 'white'; - /*scope.points.push({ - x: event.point.x, - y: event.point.y - }); - scope.$apply();*/ - selected = path; + 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: 'black', + strokeWidth: 2, + fullySelected: true + }); + selected = null; }; drag = true; }; mainTool.onMouseMove = function(event) { - if (drag && selected) { - selected.position = event.point; - scope.$apply(); + if (drag) { + if (selected) { + selected.position = event.point; + scope.$apply(); + } else { + 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(10); + + for(var i=0; i
Date: Sun, 11 May 2014 10:36:07 +0200 Subject: working canvas --- app/css/app.css | 4 ++++ app/index.html | 4 ++-- app/js/controllers.js | 2 +- app/js/services.js | 14 ++++++++++++-- 4 files changed, 19 insertions(+), 5 deletions(-) diff --git a/app/css/app.css b/app/css/app.css index 960eac4..5f3e698 100644 --- a/app/css/app.css +++ b/app/css/app.css @@ -27,4 +27,8 @@ margin-top: -15px; width: 30px; height: 30px; +} + +.selected > div { + background-color: red; } \ No newline at end of file diff --git a/app/index.html b/app/index.html index 537996f..843df21 100644 --- a/app/index.html +++ b/app/index.html @@ -17,11 +17,11 @@

-
+

-
{{point.x}}, {{point.y}}
+
{{point.x}}, {{point.y}}

diff --git a/app/js/controllers.js b/app/js/controllers.js index 29e7c0d..97e6366 100644 --- a/app/js/controllers.js +++ b/app/js/controllers.js @@ -16,7 +16,7 @@ app.controller('pointCtrl', function($scope, $http, pathService){ } } - $scope.$watch('points', function(newVal) { + $scope.$watch('points', function(newVal, oldVal) { console.log("r") update(newVal, $scope.line); }, true); diff --git a/app/js/services.js b/app/js/services.js index 622717a..37cb523 100644 --- a/app/js/services.js +++ b/app/js/services.js @@ -11,9 +11,11 @@ app.service('pathService', function() { }, computePlaylist: function(songList, constrainList, duration) { //compute distances from the constrain path + var songListCopy = songList.slice(0); var maxDistOverall = Number.MIN_VALUE; angular.forEach(songListCopy, function(song){ + song.selected = false; song.minDist = Number.MAX_VALUE; for(var i=0; i 0 && songListCopy.length > 0){ var removed = songListCopy.splice(0, 1); - console.log(removed[0].minDist); selection.push(removed[0]); duration -= 10; + removed[0].selected = true; } selection.sort(function(item){ return item.closestIndex;}); + + //clean points + angular.forEach(songList, function(song) { + delete song.minDist; + delete song.closest; + delete song.closestIndex; + delete song.rand; + }); return selection; } }; -- cgit v1.2.3