initial import

georgik · Dec 22, 2013 · e5bd069 · e5bd069
commit e5bd069
Show file tree

Hide file tree

Showing 6 changed files with 817 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+*.iml
diff --git a/css/bootstrap.min.css b/css/bootstrap.min.css
diff --git a/css/editor.css b/css/editor.css
@@ -0,0 +1,28 @@
+#imageContainer {
+    border: 5px dotted gray;
+    position: relative;
+}
+
+#baseImage {
+    border: 0;
+}
+
+#crosshair {
+    position: absolute;
+}
+
+#imageUrlInput {
+    width: 90%;
+}
+
+body {
+    padding: 5px;
+}
+ul
+{
+    list-style-type: none;
+}
+
+label {
+    display: inline;
+}
diff --git a/img/crosshair.png b/img/crosshair.png
diff --git a/index.html b/index.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html ng-app="app">
+<head>
+    <link rel="stylesheet" href="css/bootstrap.min.css" type="text/css" />
+    <link rel="stylesheet" href="css/editor.css" type="text/css" />
+    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js"></script>
+    <script src="js/tracing-paper-app.js"></script>
+    <title>Tracing paper tool</title>
+</head>
+<body>
+    <h1>Tracing paper tool</h1>
+    <div>
+        This tool can help you to determine coordinates of items on displayed image.
+        You can use data from Record mode as input for JavaScript methods.
+        More information at: <a href="https://github.com/georgik/tracing-paper-js">Github</a>.
+    </div>
+    <div ng-controller="TracingController">
+        <div>
+            Image: <input id="imageUrlInput" type="text" ng-model="imageUrl" />
+        </div>
+
+        <div id="imageContainer">
+            <img id="baseImage" src="{{imageUrl}}" ng-click="onImageClick($event)"/>
+            <img id="crossair" src="img/crosshair.png" ng-style="crosshairStyle"/>
+        </div>
+        <div>
+            Origin coordinates: <input type="text" ng-model="originX" />, <input type="text" ng-model="originY" />
+            <input type="button" value="Set" ng-click="originButtonClick()" />
+            <input type="button" value="Reset" ng-click="originResetClick()" />
+        </div>
+        <div>
+            Selected coordinates: {{lastX}}, {{lastY}}
+        </div>
+        <div>
+            <h3>Code managament</h3>
+            <input id="recordMode" type="checkbox" ng-model="isRecordMode" />
+            <label for="recordMode">Record mode</label>
+            <ul>
+                <li ng-repeat="item in stack">{ x: {{item.x}}, y: {{item.y}} },</li>
+            </ul>
+
+
+        </div>
+
+    </div>
+</body>
+</html>
diff --git a/js/tracing-paper-app.js b/js/tracing-paper-app.js
@@ -0,0 +1,52 @@
+angular.module('app', [])
+    .controller('TracingController', function($scope, $locale) {
+        $scope.imageUrl = "http://georgik.sinusgear.com/wp-content/uploads/y-soft-quest.jpg";
+
+        $scope.originX = 0;
+        $scope.originY = 0;
+
+        $scope.isOriginSetMode = false;
+        $scope.isRecordMode = true;
+
+        $scope.lastX = 0;
+        $scope.lastY = 0;
+
+        $scope.crosshairStyle = {position:"absolute", left: 0, top: 0};
+
+        $scope.stack = [];
+
+        $scope.setOrigin = function(x, y) {
+            $scope.originX = x;
+            $scope.originY = y;
+
+            $scope.crosshairStyle = {position:"absolute", left: x + "px", top: y + "px"};
+        };
+
+        $scope.onImageClick = function(event) {
+            if ($scope.isOriginSetMode) {
+                $scope.isOriginSetMode = false;
+                $scope.setOrigin(event.offsetX, event.offsetY);
+
+            } else {
+                $scope.lastX = event.offsetX - $scope.originX;
+                $scope.lastY = event.offsetY - $scope.originY;
+
+                if ($scope.isRecordMode) {
+                    var item = {
+                        x: $scope.lastX,
+                        y: $scope.lastY
+                    };
+                    $scope.stack.push(item);
+                }
+            }
+        };
+
+        $scope.originButtonClick = function() {
+            $scope.isOriginSetMode = true;
+        };
+
+        $scope.originResetClick = function() {
+            $scope.setOrigin(0,0);
+        }
+    }
+);