1 files changed, 87 insertions, 0 deletions
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>