-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathUpdatedCleanPHP.php
279 lines (236 loc) · 10.2 KB
/
UpdatedCleanPHP.php
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
<?php
// php code which makes it so that three different versions of this website are displayed
//depending upon which ip address you are using. The first ip address should correspond to the
//monitor which you would like to see the professor video on, the second should correspond
//to the ip address of the glasses, and the third is the last monitor which is connected,
//which should be the projector - this one does not need its ip address in the code.
//***This code will need updating each time the ip addresses change for the monitors/glasses.-->
//grabs the ip address of the current monitor
$userID = $_SERVER['REMOTE_ADDR'];
//reports the ip address on the screen so that changes can be made as needed
echo $userID;
//given the ip address, show either the professor, interpreter, or slideshow
//**** This should be the ip address for the professor monitor
if ($userID == "129.21.138.23"){
echo "<iframe id='video3' width='95%' height='95%' src='https://www.youtube.com/embed/tgh9ibWWVr4?autoplay=0' frameborder='0' allowfullscreen></iframe>";
}
//**** This should be the ip address for the glasses
else if ($userID == "129.21.113.246"){
echo "glasses in use";
$glasses = $userID;
}
//Note: This does not need the ip address. This gives flexibility in what can be
//used for the projection of the slides
else{
echo "<iframe id='video4' width='95%' height='95%' src='https://www.youtube.com/embed/MW_mEpNjn2I?autoplay=0' frameborder='0' allowfullscreen></iframe>";
}
?>
<!--Begins the html section of the code-->
<!doctype html>
<html lang="en">
<!-- The following code is the structure for the moving and resizing of the interpreter
video which will be shown in the Epson Moverio BT-200 glasses under research in the CAIR
lab at RIT. This standalone code simply displays the functionality which will be applied
in php code cleandocumentedglassesphp.php in order to allow personalization to the
glasses experience for deaf/HOH students. This code is buggy in the actual glasses, so
the php code should be what is run when the glasses are in use. This code is great for
demonstrations and explanations of what people are seeing in the glasses when they are wearing
them! -->
<head>
<meta charset="utf-8">
<title>Glasses Video Code Sept 26</title>
<meta name="viewport" content="width=device-width,minimum-scale=1.0, maximum-scale=1.0"/>
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="http://code.jquery.com/ui/1.8.21/jquery-ui.min.js"></script>
<!--reference: touchpunch.furf.com
The following line must be included in order for the resize and drag functions to
work properly on a touch device (glasses and smart phone). If it is not included,
the code will not function on a touch device as expected.-->
<script src="jquery.ui.touch-punch.js"></script>
<style>
/*sets the visual design for the divs and major elements of the page (body and footer)*/
#draggable-1 {
width: 300px; height: 200px; padding: 2px;
background-color:#000; color:#000; border: 1px white solid;
}
.ui-resizable-helper { border: 2px dotted #fff; }
body{
background:#000;
color:#fff;
}
footer{
color: #000;
}
/* sets all of the visual design for the resizing functionalities */
.ui-resizable {
position: relative;
}
.ui-resizable-handle {
position: absolute;
font-size: 0.1px;
display: block;
}
.ui-resizable-disabled .ui-resizable-handle,
.ui-resizable-autohide .ui-resizable-handle {
display: none;
}
.ui-resizable-n {
cursor: n-resize;
height: 7px;
width: 100%;
top: -5px;
left: 0;
}
.ui-resizable-s {
cursor: s-resize;
height: 7px;
width: 100%;
bottom: -5px;
left: 0;
}
.ui-resizable-e {
cursor: e-resize;
width: 7px;
right: -5px;
top: 0;
height: 100%;
}
.ui-resizable-w {
cursor: w-resize;
width: 7px;
left: -5px;
top: 0;
height: 100%;
}
.ui-resizable-se {
cursor: se-resize;
width: 12px;
height: 12px;
right: 1px;
bottom: 1px;
}
.ui-resizable-sw {
cursor: sw-resize;
width: 9px;
height: 9px;
left: -5px;
bottom: -5px;
}
.ui-resizable-nw {
cursor: nw-resize;
width: 9px;
height: 9px;
left: -5px;
top: -5px;
}
.ui-resizable-ne {
cursor: ne-resize;
width: 9px;
height: 9px;
right: -5px;
top: -5px;
}
</style>
<script>
$(function() {
//Makes it so that the draggable-1 div is able to be dragged by the user. Also grabs the x and y location to inform the
//researcher where the user has dragged the video to
$( "#draggable-1" ).draggable(
{drag: function (event, ui) {
var offset = $(this).offset();
var x = ui.offset.left;
var y = ui.offset.top;
$("#loc").html('Top Left Corner of Video Location = ( ' + Math.round(x) + ',' + Math.round(y) + ')');}
});
//Makes it so that the draggable-1 div is resizable by the user. Also grabs the width and height information
//to let the researcher know how big the video is after the user resizes it
$("#draggable-1").resizable({aspectRatio:true, helper: "ui-resizable-helper",
resize: function (event, ui) {
var width = ui.size.width;
var height = ui.size.height;
$("#size").html('Video Size = w' + Math.round(width) + 'px x h' + Math.round(height) + 'px');
}
});
});
/* Resource: http://www.tutorialspoint.com/jqueryui/jqueryui_droppable.htm */
/*Resource: http://stackoverflow.com/questions/20724676/how-to-get-the-div-size-with-jquery-in-real-time */
//Displays the changes in size and position real time as the user manipulates the video
//This is shown at the top of the screen and disappears when the user clicks the button
function mylocation(){
resizeDiv = document.getElementById("draggable-1");
locDiv = document.getElementById("loc");
sizeDiv = document.getElementById("size");
sizeDiv.innerHTML = 'Video Size = w' + resizeDiv.clientWidth + "px x h" + resizeDiv.clientHeight + "px";
locDiv.innerHTML='Top Left Corner of Video Location = ( ' + resizeDiv.clientLeft + ',' + resizeDiv.clientTop + ')';
}
//Button functionality - this is what happens when the button is clicked
function changeContent(){
//creates variables to refer to the various components on screen and control them
//as needed
myVid = document.getElementById("draggable-1");
button = document.getElementById('saveButton');
locDiv = document.getElementById('loc');
sizeDiv = document.getElementById('size');
video = document.getElementById('video1');
//Logic - the placeholder video at the time the button is clicked
//is switched to be the full length, interpreting video and the page
//is made so that the only thing on screen is the new video being played.
//switches the video source to be the new video
video.src = "https://www.youtube.com/embed/s3UhTbx7vpU?autoplay=1";
//Makes it so that you can't hit the button again after you select to save your position
button.disabled = 'true';
//Makes it so that you can't see the button once disabled (this minimizes distractions on screen)
button.style.display = 'none';
//Makes it so that video can't be moved after it is positioned in the desired spot
$("#draggable-1").resizable("disable");
$("#draggable-1").draggable("disable");
//Changes all text on page to be black in order to minimize distractions on screen
instructions.style.color= '#000';
sizeDiv.style.color = '#000';
locDiv.style.color = '#000';
//removes the outline around the video by making it the same color as the background (black)
myVid.style.border = '1px black solid';
//Alerts the user of where their video currently is - this information will be documented by the researcher
window.alert(locDiv.innerHTML + '\n' + sizeDiv.innerHTML);
}
</script>
</head>
<!-- ***Only shows the following code on the glasses (the machine with the specified ip address)***-->
<!--Calls the mylocation function as soon as the page loads, allowing the user and
researcher to know the initial size and location of the video -->
<body onload="mylocation()">
<!--Makes it so that this information is only displayed on one specific monitor with
the given ip address. This ip address should ALWAYS be the glass's ip address!! -->
<?php
if ($userID == $glasses){
?>
<div id="instructions">
<h2>Directions:</h2>
<p>Please click and drag the video to a spot that you feel most comfortable <br>viewing. Additionally, change the size by dragging the corners of the video<br> to the desired size you'd like to view the video at. When you think you <br> have the video in the best position for you, click "save position" to lock <br> in that position for the rest of the experiment.</p>
</div>
<!-- Button for Showing Video Location and Saving it -->
<button id="saveButton" onclick="changeContent()">Save Position!</button>
<!-- Two divs which are used to display the size and location of the video if any changes are made by the user-->
<div id="loc" style="display:block;">
</div>
<div id="size" style="display:block;">
</div>
<div id="draggable-1" class="ui-widget-content" >
<iframe id="video1" width="95%" height="95%" src="https://www.youtube.com/embed/Y1SOY9YFgus?autoplay=1&loop=1&playlist=Y1SOY9YFgus" frameborder="0" allowfullscreen></iframe>
</div>
<!-- Reference: http://www.w3schools.com/html/tryit.asp?filename=tryhtml_youtubeiframe_controls -->
<br>
<br>
<!-- closes the php command to show that the entire body is inside of the php command
which says that only the given ip address will see the information-->
<?php
}
?>
<!--Because this isn't inside of the php tags, this will show on all monitors that
display this code! -->
<footer>Copyright 2016 Ashley Miller
All rights reserved </footer>
</body>
<!-- This code was created by Ashley Miller, HCI masters student, under research in the
RIT CAIR lab in September 2016. -->
</html>