From b19fb5b432ec131a1d1ee7363344942550afe485 Mon Sep 17 00:00:00 2001 From: James Shore Date: Sat, 16 Jul 2016 16:38:03 -0700 Subject: [PATCH 1/3] Proved that real-time networking works --- src/client/ui/client.js | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) diff --git a/src/client/ui/client.js b/src/client/ui/client.js index 2a9da7eb6..36661a162 100644 --- a/src/client/ui/client.js +++ b/src/client/ui/client.js @@ -33,15 +33,15 @@ svgCanvas = new SvgCanvas(drawingArea); + network = realTimeConnection; + network.connect(window.location.port); + drawingArea.preventBrowserDragDefaults(); - sendPointerEventsOverNetwork(); + handleRealTimeNetwork(); handleClearScreenClick(); handleMouseDragEvents(); handleTouchDragEvents(); - network = realTimeConnection; - network.connect(window.location.port); - return svgCanvas; }; @@ -49,11 +49,15 @@ svgCanvas = null; }; - function sendPointerEventsOverNetwork() { + function handleRealTimeNetwork() { drawingArea.onMouseMove(function(coordinate) { var relativeOffset = coordinate.toRelativeOffset(drawingArea); network.sendPointerLocation(relativeOffset.x, relativeOffset.y); }); + + network.onPointerLocation(function(event) { + console.log(event); + }); } function handleClearScreenClick() { From 381bc2f9c61252a5a4e806e61a8bf503ab1af854 Mon Sep 17 00:00:00 2001 From: James Shore Date: Mon, 18 Jul 2016 18:36:50 -0700 Subject: [PATCH 2/3] Got two-user mouse pointers working --- src/client/ui/client.js | 9 +++++++-- todo.txt | 4 +--- 2 files changed, 8 insertions(+), 5 deletions(-) diff --git a/src/client/ui/client.js b/src/client/ui/client.js index 36661a162..3b743ee3c 100644 --- a/src/client/ui/client.js +++ b/src/client/ui/client.js @@ -50,13 +50,18 @@ }; function handleRealTimeNetwork() { - drawingArea.onMouseMove(function(coordinate) { + documentBody.onMouseMove(function(coordinate) { var relativeOffset = coordinate.toRelativeOffset(drawingArea); network.sendPointerLocation(relativeOffset.x, relativeOffset.y); }); + var cursor = HtmlElement.fromHtml("
"); + cursor.appendSelfToBody(); + network.onPointerLocation(function(event) { - console.log(event); + var coordinate = HtmlCoordinate.fromRelativeOffset(drawingArea, event.x, event.y).toPageOffset(); + cursor.toDomElement().style.top = coordinate.y + "px"; + cursor.toDomElement().style.left = coordinate.x + "px"; }); } diff --git a/todo.txt b/todo.txt index c59f664e7..20956bade 100644 --- a/todo.txt +++ b/todo.txt @@ -50,6 +50,4 @@ Engineering Tasks: To Do on current task: - Spike ghost pointers - - listen for pointer events - - display ghost pointer for each event - - display multiple ghost pointers when multiple clients are connected \ No newline at end of file + * display multiple ghost pointers when multiple clients are connected \ No newline at end of file From 482bc52faa87d6b48ffd0fb1fcc60728b39cebb3 Mon Sep 17 00:00:00 2001 From: James Shore Date: Mon, 18 Jul 2016 18:56:52 -0700 Subject: [PATCH 3/3] Got multi-user (2+) mouse pointers working --- src/client/ui/client.js | 23 +++++++++++++++++++---- todo.txt | 3 +-- 2 files changed, 20 insertions(+), 6 deletions(-) diff --git a/src/client/ui/client.js b/src/client/ui/client.js index 3b743ee3c..fe919dc09 100644 --- a/src/client/ui/client.js +++ b/src/client/ui/client.js @@ -54,15 +54,30 @@ var relativeOffset = coordinate.toRelativeOffset(drawingArea); network.sendPointerLocation(relativeOffset.x, relativeOffset.y); }); + documentBody.onSingleTouchMove(function(coordinate) { + var relativeOffset = coordinate.toRelativeOffset(drawingArea); + network.sendPointerLocation(relativeOffset.x, relativeOffset.y); + }); - var cursor = HtmlElement.fromHtml("
"); - cursor.appendSelfToBody(); + var allCursors = {}; network.onPointerLocation(function(event) { - var coordinate = HtmlCoordinate.fromRelativeOffset(drawingArea, event.x, event.y).toPageOffset(); + var id = event.id; + if (allCursors[id] === undefined) allCursors[id] = createCursor(); + moveCursor(allCursors[id], event.x, event.y); + }); + + function createCursor() { + var cursor = HtmlElement.fromHtml("
"); + cursor.appendSelfToBody(); + return cursor; + } + + function moveCursor(cursor, x, y) { + var coordinate = HtmlCoordinate.fromRelativeOffset(drawingArea, x, y).toPageOffset(); cursor.toDomElement().style.top = coordinate.y + "px"; cursor.toDomElement().style.left = coordinate.x + "px"; - }); + } } function handleClearScreenClick() { diff --git a/todo.txt b/todo.txt index 20956bade..865191005 100644 --- a/todo.txt +++ b/todo.txt @@ -49,5 +49,4 @@ Engineering Tasks: - Update smoke tests for real-time networking To Do on current task: -- Spike ghost pointers - * display multiple ghost pointers when multiple clients are connected \ No newline at end of file +* Spike ghost pointers (DONE) \ No newline at end of file