Skip to content

Commit 7365098

Browse files
spikeonitspikeonit
committed
added touch support for moving pointer
1 parent f3a8737 commit 7365098

10 files changed

Lines changed: 161 additions & 29 deletions

File tree

‎PointerApplication/MainWindow.xaml.cs‎

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,8 @@ public MainWindow()
3535
if (invoker == "position")
3636
{
3737
var positionData = ParsePositionData(data);
38+
if (positionData == null)
39+
return;
3840
if (positionData.ScreenPosition >= Screen.AllScreens.Count())
3941
positionData.ScreenPosition = 0;
4042
Rectangle selectedScreen = Screen.AllScreens[positionData.ScreenPosition].Bounds;
@@ -54,9 +56,6 @@ public MainWindow()
5456
});
5557
}
5658

57-
58-
59-
6059
});
6160
hubPointerConnection.Start();
6261

@@ -65,11 +64,15 @@ public MainWindow()
6564
private PositionData ParsePositionData(string data)
6665
{
6766
var items = data.Split(',');
67+
var horizontalPosition = items[1];
68+
var verticalPosition = items[2];
69+
if (horizontalPosition == "NaN" || verticalPosition == "NaN")
70+
return null;
6871
return new PositionData()
6972
{
7073
ScreenPosition = int.Parse(items[0]),
71-
HorizontalPosition = GetIntegerValue(items[1]),
72-
VerticalPosition = GetIntegerValue(items[2])
74+
HorizontalPosition = GetIntegerValue(horizontalPosition),
75+
VerticalPosition = GetIntegerValue(verticalPosition)
7376
};
7477
}
7578

‎PointerApplication/PointerServer.csproj‎

Lines changed: 18 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -195,7 +195,13 @@
195195
<None Include="images\green-triangle-arrow.png">
196196
<CopyToOutputDirectory>Always</CopyToOutputDirectory>
197197
</None>
198-
<Content Include="www\css\index.css">
198+
<Content Include="www\css\shared.css">
199+
<CopyToOutputDirectory>Always</CopyToOutputDirectory>
200+
</Content>
201+
<Content Include="www\css\touch.css">
202+
<CopyToOutputDirectory>Always</CopyToOutputDirectory>
203+
</Content>
204+
<Content Include="www\css\mouse.css">
199205
<CopyToOutputDirectory>Always</CopyToOutputDirectory>
200206
</Content>
201207
<None Include="www\images\monitor.png">
@@ -204,10 +210,19 @@
204210
<None Include="www\images\monitor_gray.png">
205211
<CopyToOutputDirectory>Always</CopyToOutputDirectory>
206212
</None>
207-
<Content Include="www\index.html">
213+
<None Include="www\index.html">
214+
<CopyToOutputDirectory>Always</CopyToOutputDirectory>
215+
</None>
216+
<Content Include="www\scripts\touch.js">
217+
<CopyToOutputDirectory>Always</CopyToOutputDirectory>
218+
</Content>
219+
<Content Include="www\touch.html">
220+
<CopyToOutputDirectory>Always</CopyToOutputDirectory>
221+
</Content>
222+
<Content Include="www\mouse.html">
208223
<CopyToOutputDirectory>Always</CopyToOutputDirectory>
209224
</Content>
210-
<Content Include="www\scripts\index.js">
225+
<Content Include="www\scripts\mouse.js">
211226
<CopyToOutputDirectory>Always</CopyToOutputDirectory>
212227
</Content>
213228
<None Include="www\images\small_red_dot.png">

PointerApplication/www/css/index.css renamed to PointerApplication/www/css/mouse.css

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -15,11 +15,7 @@
1515
position: relative;
1616
}
1717

18-
.lookHereImage {
19-
position: relative;
20-
left: 50px;
21-
top: 50px;
22-
}
18+
2319

2420
.activeMonitor {
2521
height: 60px;

‎PointerApplication/www/css/shared.css‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+

2+
3+
.lookHereImage {
4+
position: relative;
5+
left: 50px;
6+
top: 50px;
7+
}
8+

‎PointerApplication/www/css/touch.css‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
html,body {
2+
background-color: #FFF;
3+
height: 100%;
4+
width: 100%;
5+
}
6+
7+
.canvasContainer {
8+
height: 90%;
9+
width: 90%;
10+
}
11+
12+

‎PointerApplication/www/index.html‎

Lines changed: 3 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -4,24 +4,11 @@
44
<head>
55
<meta charset="utf-8" />
66
<title>Pointer App</title>
7-
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.0.min.js"></script>
8-
<script src="http://ajax.aspnetcdn.com/ajax/signalr/jquery.signalr-2.2.0.min.js"></script>
9-
<script src="/signalr/hubs"></script>
10-
<script src="scripts/index.js"></script>
11-
<link href="css/index.css" type="text/css" rel="stylesheet" />
7+
128

139
</head>
1410
<body>
15-
16-
17-
<div>
18-
<div id="monitor0" class="activeMonitor hidden" onclick="ActivateMonitor('0')"></div>
19-
<div id="monitor1" class="inactiveMonitor hidden" onclick="ActivateMonitor('1')"></div>
20-
<div id="monitor2" class="inactiveMonitor hidden" onclick="ActivateMonitor('2')"></div>
21-
</div>
22-
<div id="contentContainer" class="contentContainer">
23-
<img id="lookHereImage" class="lookHereImage" src="images/small_red_dot.png">
24-
</div>
25-
11+
<h1>Please select which method you would like to control the pointer.</h1>
12+
<a href="mouse.html"><h2>Mouse Mode</h2> </a> <a href="touch.html"><h2>Touch Mode</h2></a>
2613
</body>
2714
</html>

‎PointerApplication/www/mouse.html‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<!DOCTYPE html>
2+
3+
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
4+
<head>
5+
<meta charset="utf-8"/>
6+
<title>Pointer App</title>
7+
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.0.min.js"></script>
8+
<script src="http://ajax.aspnetcdn.com/ajax/signalr/jquery.signalr-2.2.0.min.js"></script>
9+
<script src="/signalr/hubs"></script>
10+
<script src="scripts/mouse.js"></script>
11+
<link href="css/shared.css" type="text/css" rel="stylesheet"/>
12+
<link href="css/mouse.css" type="text/css" rel="stylesheet"/>
13+
14+
</head>
15+
<body>
16+
17+
18+
<div>
19+
<div id="monitor0" class="activeMonitor hidden" onclick="ActivateMonitor('0')"></div>
20+
<div id="monitor1" class="inactiveMonitor hidden" onclick="ActivateMonitor('1')"></div>
21+
<div id="monitor2" class="inactiveMonitor hidden" onclick="ActivateMonitor('2')"></div>
22+
</div>
23+
<div id="contentContainer" class="contentContainer">
24+
<img id="lookHereImage" class="lookHereImage" src="images/small_red_dot.png">
25+
</div>
26+
27+
28+
</body>
29+
</html>

PointerApplication/www/scripts/index.js renamed to PointerApplication/www/scripts/mouse.js

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,11 @@ $(document).ready(function () {
3333
lookHereImage.style.top = yPosition + "px";
3434
}
3535

36+
function movePointerPositionToNewLocation2(xPosition, yPosition) {
37+
lookHereImage2.style.left = xPosition + "px";
38+
lookHereImage2.style.top = yPosition + "px";
39+
}
40+
3641
function sendPointerServerNewLocation(selectedScreen, xPosition, yPosition) {
3742

3843
var positions = selectedScreen + "," + xPosition + "," + yPosition;
@@ -62,6 +67,7 @@ $(document).ready(function () {
6267
sendPointerServerNewLocation(selectedMonitorIndex, xFinalPosition, yFinalPosition);
6368
};
6469

70+
6571
contentContainer.addEventListener("click", getClickPosition);
6672
contentContainer.addEventListener("dragover", getDragOverPosition, false);
6773

‎PointerApplication/www/scripts/touch.js‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
var selectedMonitorIndex = 0;
2+
var monitorCount = 0;
3+
4+
$(document).ready(function () {
5+
6+
function InitializeHub() {
7+
$.connection.hub.url = "/signalr";
8+
var hubMessenger = $.connection.pointerHub;
9+
10+
11+
$.connection.hub.start().done(function () {
12+
13+
var lookHereImage = document.querySelector("#lookHereImage");
14+
var canvasContainer = document.querySelector("#canvasContainer");
15+
16+
function movePointerPositionToNewLocation(xPosition, yPosition) {
17+
lookHereImage.style.left = xPosition + "px";
18+
lookHereImage.style.top = yPosition + "px";
19+
}
20+
21+
22+
function sendPointerServerNewLocation(selectedScreen, xPosition, yPosition) {
23+
24+
var positions = selectedScreen + "," + xPosition + "," + yPosition;
25+
hubMessenger.server.send("position", positions);
26+
}
27+
28+
function getTouchMovePosition(e) {
29+
e.preventDefault();
30+
var pointer = e.changedTouches[0];
31+
var xFinalPosition = pointer.pageX;
32+
var yFinalPosition = pointer.pageY;
33+
34+
movePointerPositionToNewLocation(xFinalPosition, yFinalPosition);
35+
36+
sendPointerServerNewLocation(selectedMonitorIndex, xFinalPosition, yFinalPosition);
37+
}
38+
39+
canvasContainer.addEventListener("touchmove", getTouchMovePosition, false);
40+
canvasContainer.addEventListener("touchstart", getTouchMovePosition, false);
41+
42+
});
43+
44+
}
45+
46+
InitializeHub();
47+
48+
});
49+

‎PointerApplication/www/touch.html‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<!DOCTYPE html>
2+
3+
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
4+
<head>
5+
<meta charset="utf-8"/>
6+
<meta name="viewport"
7+
content="width=device-width, initial-scale=1.0, user-scalable=no">
8+
<title>Pointer App</title>
9+
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.0.min.js"></script>
10+
<script src="http://ajax.aspnetcdn.com/ajax/signalr/jquery.signalr-2.2.0.min.js"></script>
11+
<script src="/signalr/hubs"></script>
12+
<script src="scripts/touch.js"></script>
13+
<link href="css/shared.css" type="text/css" rel="stylesheet"/>
14+
<link href="css/touch.css" type="text/css" rel="stylesheet"/>
15+
16+
</head>
17+
<body>
18+
19+
20+
<div>
21+
<a href="mouse.html">Switch To Mouse Mode</a>
22+
</div>
23+
<div id="canvasContainer" class="canvasContainer">
24+
<img id="lookHereImage" class="lookHereImage" src="images/small_red_dot.png">
25+
</div>
26+
</body>
27+
</html>

0 commit comments

Comments
 (0)