-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathdemo.htm
140 lines (116 loc) · 4.09 KB
/
demo.htm
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
<!doctype html>
<html>
<head>
<script>
// from https://stackoverflow.com/questions/2368784/draw-on-html5-canvas-using-a-mouse
var out;
var ctx;
var start = Date.now().valueOf();
// last known position
var pos = { x: 0, y: 0 };
// new position from mouse event
function setPosition(e) {
pos.x = e.clientX;
pos.y = e.clientY;
}
function draw(e) {
// mouse left button must be pressed
if (e.buttons !== 1) return;
ctx.beginPath(); // begin
ctx.lineWidth = 5;
ctx.lineCap = 'round';
ctx.strokeStyle = '#c0392b';
ctx.moveTo(pos.x, pos.y); // from
setPosition(e);
ctx.lineTo(pos.x, pos.y); // to
ctx.stroke(); // draw it!
}
function verboseEvent(e) {
var elem = document.getElementById("out_" + e.type);
elem.innerText = e.type + " |";
if (e.screenX !== undefined) {
elem.innerText += " (" +
e.screenX + ", " +
e.screenY + ") | (" +
e.clientX + ", " +
e.clientY + ") |";
}
elem.innerText += " " + (Date.now().valueOf() - start) + " ms";
}
function setupEventOutput(type, eventCallback) {
eventCallback = eventCallback || verboseEvent;
// add an element
var elem = document.createElement("code");
elem.id = "out_" + type;
elem.innerText = type;
out.appendChild(elem);
out.appendChild(document.createElement("br"));
// add the event
document.addEventListener(type, verboseEvent);
}
function tryAllPermissions() {
navigator.mediaDevices.getUserMedia({audio:true}).then(
() => console.trace("mic:allow"),
() => console.trace("mic:deny")
);
navigator.mediaDevices.getUserMedia({video:true}).then(
() => console.trace("cam:allow"),
() => console.trace("cam:deny")
);
navigator.geolocation.getCurrentPosition(
() => console.trace("loc:allow"),
() => console.trace("loc:deny")
);
}
function setupcanvas() {
document.addEventListener('mousedown', draw);
// create canvas element and append it to document body
//var canvas = document.getElementsByTagName("canvas")[0];
//canvas.width = 600;
//canvas.height = 200;
// some hotfixes...
document.body.style.margin = 0;
// get canvas 2D context and set him correct size
//ctx = canvas.getContext('2d');
out = document.getElementById("output");
document.getElementById("perms").addEventListener("click", tryAllPermissions);
[
"mousemove", "mouseout", "mouseover",
"click", "dblclick", "mousedown", "mouseup", "wheel",
//"mouseenter", "mouseleave",
"blur", "focus",
"keydown", "keyup", "keypress"
].forEach(setupEventOutput);
/*
// set focus until we can control when the keyboard appears
document.getElementsByTagName("textarea")[0].focus();
setTimeout(
function () { window.scrollTo(0, 300); },
2000
);
*/
}
</script>
</head>
<body onload="setupcanvas()" style="font-family: monospace; font-size:x-large">
<!--<canvas style="border: 2px solid green; width:600px; height: 200px; "></canvas>
<br />-->
sample links:
<a href="http://mozilla.org" style="font-size:x-large">mozilla link</a> |
<a href="https://webvr.info/samples/03-vr-presentation.html" style="font-size:x-large">immersive sample</a> |
<a href="https://en.wikipedia.org/wiki/Main_Page" style="font-size:x-large">wikipedia</a> |
<a href="https://sketchfab.com/" style="font-size:x-large">sketchfab</a>
<br>
<button id="perms">check all permissions</button>
<hr />
bring focus here and use button to show virtual keyboard:
<br />
<textarea style="border: 2px solid gray; width: 700px; height: 100px;font-size:x-large"></textarea>
<br />
<div id="output" style="border: 2px solid blue; width: 700px; font-size:x-large"></div>
<br />
<div style="border: 2px solid orange; width: 700px; height: 2000px; background-image: linear-gradient(orange, gray);">
scroll this here
</div>
</body>
</html>