Proof of concept now working. Touch events passing through socket fro…

…m iPhone to slide deck
JMU-CS · Jun 27, 2018 · 3e8e7e5 · 3e8e7e5
1 parent ae68655
commit 3e8e7e5
Show file tree

Hide file tree

Showing 7 changed files with 134 additions and 18 deletions.
diff --git a/framework/controller.html b/framework/controller.html
@@ -8,16 +8,22 @@
     <script src="lib/jquery.min.js" type="text/javascript"></script>
 
     <script src = "/socket.io/socket.io.js"></script>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
 
     <!-- link rel="stylesheet" type="text/css" href="controller-style.css" -->
 
     <style>
         body, html {
             height: 100%;
+            width: 100%;
             padding: 0;
             margin: 0;
+            position: fixed;
+            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
         }
+
         .hidden { display: none; }
+
         div.game-controller {
             height: 100%;
             width: 100%;
@@ -28,11 +34,39 @@
             margin: 0;
             color: white;
         }
+
+        nav ul {
+            list-style-type:none;
+            margin:0;
+            padding:0;
+        }
+        nav ul li {
+            display: block;
+            border-bottom: 1px solid #4e0492;
+            height: 3em;
+            line-height: 12px;
+            text-align: center;
+        }
+        nav ul li a {
+            display: inline-block;  
+            vertical-align: middle;  
+            text-decoration: none;
+            color: #4e0492;
+        }
+        nav ul li:before{
+            content: '';
+            display: inline-block;
+            vertical-align: middle;
+            height: 100%;       
+        }
+
+
     </style>
 </head>
 
 <body>
     <script>
+
 
         var socket = io("/controller");
 
@@ -44,46 +78,62 @@
         )
 
         function loadGame(gameName) {
-            alert("loading game: '" + gameName + "'");
             socket.emit("load game", gameName);
         }
 
+        var $cursor = undefined;
+
         function startInteraction() {
             $("#main-nav").hide();
             $("#controller").show();
 
-            var $img = $('<img/>').attr({
-                'id': 'cursor',
-                'src': 'http://www.nicenicejpg.com/50'
+            $cursor = $('<div/>').attr({
+                'id': 'cursor'
             });
 
-            $("#controller").on('touchstart click', function (e) {
+            $("#controller").on('touchmove mousemove', function (e) {
 
                 var normalizedishEvent = e.originalEvent.touches ? e.originalEvent.touches["0"] : e;
 
-                $img.css({
-                    top: normalizedishEvent.clientY - 25,
+                $cursor.css({
+                    position: "fixed",
+                    top: Math.max(normalizedishEvent.clientY - 25,30),
                     left:  normalizedishEvent.clientX - 25,
-                    display: 'block'
+                    display: 'block',
+                    zIndex: 300,
+                    width: 50,
+                    height: 50, 
+                    backgroundColor: "#ff0000"
                 });
 
+                socket.emit("touch move", "" + (normalizedishEvent.clientX/$(window).width()) + " " + (normalizedishEvent.clientY/$(window).height()));
             });
 
-            $img.appendTo('#controller');
+            $cursor.appendTo('#controller');
+        }
+
+        function endInteraction() {
+            $("#controller").hide();
+            $("#main-nav").show();
+
+            $("#controller").children().last().remove();
+            $("#controller").unbind("touchmove mousemove");
         }
 
     </script>
 
     <nav id="main-nav">
         <ul>
-            <li><a href="#" onclick="startInteraction();">Interact</a></li>
-            <li><a href="#" onclick="loadGame('splash-sketch');">Dots One</a></li>
-            <li><a href="#" onclick="loadGame('sketch2');">Dots Two</a></li>
+            <li><a onclick="startInteraction();">Interact With Current Screen</a></li>
+            <li><a onclick="loadGame('splash-sketch');">Circles of Circles</a></li>
+            <li><a onclick="loadGame('draw');">Draw with friends</a></li>
         </ul>
     </nav>
 
     <div id="controller" class="game-controller hidden">
-    Test
+        <div style="position:fixed; top:0; text-align: center;">
+            <a onclick="endInteraction();">Back to menu</a>
+        </div>
     </div>
 
 

diff --git a/framework/games/draw.js b/framework/games/draw.js
@@ -0,0 +1,34 @@
+
+function gameMessageHandler(msg) {
+  console.log("message received: " + msg);
+  whiteBackground = !whiteBackground;
+}
+
+var touchX = 0, touchY = 0, lastTouchX = 0, lastTouchY = 0;
+
+function touchMove(x, y) {
+    touchX = x * windowWidth;
+    touchY = y * windowHeight;
+}
+
+
+function setup() {
+    var canv = createCanvas(windowWidth, windowHeight);
+    canv.parent("bgCanvas");
+    background(0,0,0);
+}
+
+var currentColor = 0;
+
+function draw() {
+    colorMode(RGB, 255);    
+    fill(0,0,0,10.0);
+    rect(0, 0, windowWidth, windowHeight);
+    colorMode(HSB, 255);
+    stroke(currentColor, 255, 255);
+    strokeWeight(10.0);
+    currentColor = (currentColor + 1) % 255;
+    line(lastTouchX, lastTouchY, touchX, touchY);
+    lastTouchX = touchX;
+    lastTouchY = touchY;
+}
diff --git a/framework/games/splash-sketch.js b/framework/games/splash-sketch.js
@@ -1,12 +1,17 @@
-//asteroid clone (core mechanics only)
-//arrow keys to move + x to shoot
 var whiteBackground = false;
 
 function gameMessageHandler(msg) {
   console.log("message received: " + msg);
   whiteBackground = !whiteBackground;
 }
 
+var touchX = 0, touchY = 0;
+
+function touchMove(x, y) {
+  touchX = x * windowWidth;
+  touchY = y * windowHeight;
+}
+
 class Sparkler {
     constructor() {
         this.speed = Math.random()*5+1;
@@ -104,7 +109,7 @@ function draw() {
       sparklers[i].draw();
   }
 
-  mouseSparkler.drawAt(mouseX, mouseY);
+  mouseSparkler.drawAt(touchX, touchY);
 
   drawSprites();
 

diff --git a/framework/index.html b/framework/index.html
@@ -31,11 +31,11 @@
             </div>
         </div>
 
-        <h1 style="z-index: 200; margin-bottom: 0; left: 0.5em; bottom: 25px; position:absolute;">
+        <h1 style="z-index: 200; margin-bottom: 0; left: 0.5em; bottom: 25px; position:fixed;">
             JMU CompSci
         </h1>
 
-        <div style="z-index: 200; right: 1.5em; bottom: 25px; position:absolute;">
+        <div style="z-index: 200; right: 1.5em; bottom: 25px; position:fixed;">
             Interact with this presentation @ (coming soon).
         </div>
 
@@ -68,13 +68,26 @@ <h1 style="z-index: 200; margin-bottom: 0; left: 0.5em; bottom: 25px; position:a
             }
         )
 
+        socket.on(
+            "touch move",
+            function(msg) {
+                var pos = msg.split(" ");
+                var x = parseFloat(pos[0]);
+                var y = parseFloat(pos[1]);
+                touchMoveHandler(x,y);
+            }
+        )
+
         //load a script
         $(document).ready(function () {
 
             var searchString = window.location.search.substring(1);
             var variableArray = searchString.split('&');
             fileName = getUrlValue("sketch");
             currentSlideIndex = getUrlValue("slide");
+            if (currentSlideIndex == undefined) {
+                currentSlideIndex = 0;
+            }
 
             if (fileName == undefined)
                 fileName = "splash-sketch";

diff --git a/framework/lib/player.js b/framework/lib/player.js
@@ -2,6 +2,9 @@ var p5functions = ['preload', 'setup', 'draw', 'keyPressed', 'keyReleased', 'key
 
 var activeSketch;
 var theGameMessageHandler = null;
+var touchDownHandler = function(x, y) {};
+var touchMoveHandler = function(x, y) {};
+var touchUpHandler = function(x, y) {};
 
 // adapted from p5js.org, originally by Lauren McCarthy
 // https://github.com/processing/p5.js-website/blob/master/js/render.js
@@ -23,6 +26,9 @@ function playCode(code) {
       with (p) {
         eval(runnable);
         theGameMessageHandler = gameMessageHandler;
+        if (typeof touchDown !== "undefined") { touchDownHandler = touchDown; }
+        if (typeof touchMove !== "undefined") { touchMoveHandler = touchMove; }
+        if (typeof touchUp !== "undefined") { touchUpHandler = touchUp; }
       }
 
       var fxns = p5functions;

diff --git a/framework/style.css b/framework/style.css
@@ -4,6 +4,8 @@ body {
     font-family: 'Helvetica Neue', AppleGothic, sans-serif;
     font-size:20px;
     color: #444;
+    height: 100%;
+    position: fixed;
   }
 
   strong {

diff --git a/index.js b/index.js
@@ -40,6 +40,12 @@ io.of("/controller").on('connection', function(socket) {
         }
     });
 
+    socket.on('touch move', function(msg) {
+        if (playerSocket != null) {
+            playerSocket.emit('touch move', msg);
+        }
+    })
+
     socket.on('disconnect', function () {
         console.log('A controller disconnected.');
     })