IT MOSTLY WORKS

control.css: .touch-slider position is relative instead of absolute
control.js: Made socket var global. Commented out nonfunctional
point-rotation stuff. Lines 26+27 make the cursor go to the right spot.
Lines 36+37 changed the calculation of final point output
index.css: Same as control.css. Also added #butane classes.
index.js: Same as lines 36+37 of control.js

www/control.css

@@ -1,17 +1,19 @@
 body {
-	color:#4E4E4E;
+	background-color:#4E4E4E;
 }
 
 .touch-box {
-    -webkit-box-shadow: inset 0 0 15px #AAA;
-    -moz-box-shadow: inset 0 0 15px #AAA;
-    box-shadow: inset 0 0 15px #AAA;
-    -webkit-border-radius: 10px;
-    -moz-border-radius: 10px;
-    touch-action:none;
-    border-radius: 10px;
-    background: #F5F5F5;
-    display: block;
+	-webkit-box-shadow: inset 0 0 15px #AAA;
+	-moz-box-shadow: inset 0 0 15px #AAA;
+	box-shadow: inset 0 0 15px #AAA;
+	-webkit-border-radius: 10px;
+	-moz-border-radius: 10px;
+	touch-action: none;
+	border-radius: 10px;
+	background: #F5F5F5;
+	display: block;
+	width: 318px;
+	height: 328px;
     /*margin: 20px;*/
 }
 
@@ -31,7 +33,7 @@
 }
 
 .touch-slider {
-    position: absolute;
+    position: relative;
     -webkit-border-radius: 10px;
     -moz-border-radius: 10px;
     border-radius: 10px;
@@ -65,9 +67,12 @@
     background: #0077EE;
 }
 
-#butane:hover{
+#butane {
+
+}
+#butane:hover {
 	color:#FF7072;
 }
-#butane:active{
+#butane:active {
 	color:#FF0004;
-}
+}

www/control.html

@@ -18,7 +18,7 @@
         </div>
 		<div class="col-sm-6"></div>
         <div class="col-sm-3">
-            <button id="butane" onMouseDown="socket.send('butane_on()'" onMouseUp="socket.send('butane_off()'"><span class="glyphicon glyphicon-fire"></span></button>
+            <button id="butane" onMouseDown="socket.send('butane_on()')" onMouseUp="socket.send('butane_off()')"><span class="glyphicon glyphicon-fire"></span></button>
         </div>
     </div>
 </body>

www/control.js

@@ -1,4 +1,5 @@
 var c;
+var socket;
 var _pointerDown = function (evt) {
     _pointerMove({
         originalEvent: {
@@ -22,23 +23,28 @@ var _pointerMove = function (evt) {
         var size_y = $('#handle').outerHeight(); // Keep it within the container
         x = (x + size_x > c.x2) ? c.x2 - size_x : (x < c.x1) ? c.x1 : x;
         y = (y + size_y > c.y2) ? c.y2 - size_y : (y < c.y1) ? c.y1 : y;
-		x2 = x * Math.cos(225) - y * Math.sin(225); // Output points are rotated 225 degrees so control is easier, x and y stay the same
-		y2 = y * Math.sin(225) + x * Math.cos(225);
+        x -= c.x1;
+        y -= c.y1;
+        x2 = x - $('#container').outerWidth() / 2;
+        y2 = y - $('#container').outerHeight() / 2;
+		//x2 = Math.round(x2 * Math.cos(225) - y2 * Math.sin(225)); // Output points are rotated 225 degrees so control is easier, x and y stay the same
+		//y2 = Math.round(y2 * Math.sin(225) + x2 * Math.cos(225));
         $('#handle').css({ // Move it
             'top': y,
             'left': x
         });
-        //x = Math.round((c.sx * (x - c.x1 + size_x)) - 134.5);
-        //y = Math.round((c.sy * (y - c.y1 + size_y)) - 134.5); // Local container coords, mapped 0-255
-        $('#display').text(x2 + ':' + y2); // Display localized position
+        //x2 = Math.round(x2 * c.sx);
+        //y2 = Math.round(y2 * c.sy); // Local container coords, mapped 0-255
+        $('#display').text(x2 + '\t' + y2 + '\t' + x + '\t' + y + '\t' + c.x2 + '\t' + c.y2); // Display localized position
     }
 }
 $(document).ready(function () {
+    socket = new WebSocket('ws://192.168.240.1:3146/ws');
     // Store positional data about container and its size
     var offset = $('#container').offset();
     c = new Object();
-    c.x1 = offset.left;
-    c.y1 = offset.top;
+    c.x1 = offset.left; // x1 and y1 are the top left corner
+    c.y1 = offset.top; // x2 and y2 are the bottom right corner
     c.x2 = offset.left + $('#container').outerWidth();
     c.y2 = offset.top + $('#container').outerHeight();
     // For mapping local container coordinates to 0-255
@@ -50,9 +56,4 @@ $(document).ready(function () {
     $(document).on('pointermove', _pointerMove);
 
     $('#handle').hide();
-
-    // Add a draggabilly, just to show how to make one
-    var drag = new Draggabilly($('#drag')[0], {
-        'containment': '#container'
-    });
 });

www/index.css

@@ -30,7 +30,7 @@
 }
 
 .touch-slider {
-    position: absolute;
+    position: relative;
     -webkit-border-radius: 10px;
     -moz-border-radius: 10px;
     border-radius: 10px;
@@ -64,7 +64,12 @@
     background: #0077EE;
 }
 
-
+#butane:hover{
+	color:#FF7072;
+}
+#butane:active{
+	color:#FF0004;
+}
 
 
 /*

www/index.js

@@ -85,6 +85,8 @@ var _pointerMove = function (evt) {
         var size_y = $('#motor-slider').outerHeight(); // Keep it within the container
         x = (x + size_x > c.x2) ? c.x2 - size_x : (x < c.x1) ? c.x1 : x;
         y = (y + size_y > c.y2) ? c.y2 - size_y : (y < c.y1) ? c.y1 : y;
+        x -= c.x1;
+        y -= c.y1;
         $('#motor-slider').css({ // Move it
             'top': y,
             'left': x