-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathdemo.html
87 lines (85 loc) · 2.97 KB
/
demo.html
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
<html>
<head>
<style>
h1 {
font-family: Arial;
}
h1 a {
color: #444;
}
.target {
border: 1px solid #00f;
}
.target:hover, .target.highlighted {
background: rgba(0, 0, 255, 0.3);
}
.event_type {
text-decoration: none;
color: #444;
border: 1px solid #aaa;
padding: 5px 10px;
border-radius: 5px;
}
.event_type.selected {
background: #888;
color: #eee;
font-weight: bold;
}
input {
font-size: 20px;
padding: 10px;
border-radius: 5px;
border: 2px solid #888;
}
button {
font-size: 20px;
padding: 10px;
background: #fafafa;
border: 2px solid #888;
border-radius: 5px;
}
</style>
</head>
<body>
<div style="float: left; width: 50%;">
<h1><a href="/">AAC Shim</a> Demo</h1>
<input type="text" id="url" value="./demo_frame.html" placeholder="launch URL" style="width: 350px;"/>
<button id="load_url" style='width: 100px;'>load</button><br/>
<input type="text" id="codes" style="width: 455px; margin-top: 5px;" placeholder="parameter JSON" />
<div style="margin-top: 10px; margin-bottom: 10px;">
<a href="#" rel="0" class='event_type selected'>Mouse Events</a>
<a href="#" rel="1" class='event_type'>Touch Events</a>
<a href="#" rel="2" class='event_type'>Gaze Events</a>
<a href="#" rel="3" class='event_type'>Scan Events</a>
</div>
<label>
<input type="checkbox" id="scanning">
Enable Scanning
</label>
</div>
<div style="float: left; width: 50%;">
<p style='margin-top: 50px; padding: 0 10px;'>
This is a simple demo showing how inter-window communication happens to support AAC Shim.
There is a div overlay on top of the frame so no native events are being passed in. This is
done for testing and demo purposes, although some AAC systems may choose to do the same
thing in production. Feel free to paste in your own site for testing with AAC Shim. You
can fiddle with the settings to see different types of events and how scanning might appear.
</p>
</div>
<div style="clear: left;"></div>
<div style="position: relative;">
<iframe id="frame" src="./demo_frame.html" frameborder=0 style="display: block; width: 80%; height: 400px; border: 2px solid #ccc; margin: 50px auto;"></iframe>
<div id="overlay" style="position: absolute; top: 0; left: 10%; width: 80%; height: 400px;"></div>
</div>
<div style='float: left; width: 50%;'>
<h4>Last Message Passed</h4>
<div id='last_sent_message' style='white-space: pre;'></div>
</div>
<div style='float: left; width: 50%;'>
<h4>Last Message Received</h4>
<div id='last_received_message' style='white-space: pre;'></div>
</div>
<script src='./shim_container.js'>
</script>
</body>
</html>