-
Notifications
You must be signed in to change notification settings - Fork 11
/
Copy pathscreenTool.html
92 lines (82 loc) · 3.36 KB
/
screenTool.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
88
89
90
91
92
<!--
This code provides a convenient remote view of the digium phone screen
to aid in app development. Save as a local file and open in a modern
browser. (Tested on Chrome.) Type in the IP address of your phone and
click on 'Add'. This will add the phone screen to the page.
The page will update live with a screen image from your digium phone.
Created by Billy Chia
Copyright 2013 Licensed under Creative Commons BY 3.0
You are free to share, remix and make commercial use of the work
-->
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<p>
<label for="phone_ip">Phone IP Address: </label>
<input type="text" name="phone_ip" value="" id="phone_ip">
<input type="button" name="Add" value="Add" id="add_button" onclick="add();">
</p>
<script>
var divCount = 0;
var getDimensions = function (phoneIP, onImageLoad) {
var image = new Image();
image.src = 'http://' + phoneIP + '/cgi-bin/screen_shot';
image.onload = function () {
var id = phoneIP,
w = this.width,
h = this.height;
onImageLoad(id, w, h); // execute onImageLoad() callback
};
};
var makeCanvasElement = function (id, w, h) {
var newCanvas = document.createElement('canvas'),
div = document.getElementById(divCount);
newCanvas.setAttribute('id', id);
newCanvas.setAttribute('width', w);
newCanvas.setAttribute('height', h);
div.replaceChild(newCanvas, div.firstChild);
divCount += 1;
};
var makeCanvas = function (id) {
var canvas = document.getElementById(id),
ctx = canvas.getContext('2d'),
imageObj = new Image();
//when image loads draw to canvas
imageObj.onload = function () {
ctx.drawImage(imageObj, 0, 0);
};
return imageObj;
};
// normalize requestAnimationFrame
var requestAnimationFrame = window.requestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.msRequestAnimationFrame;
window.requestAnimationFrame = requestAnimationFrame;
var onImageLoad = function (id, w, h) {
makeCanvasElement(id, w, h); // phoneIP is used as ID
var image = makeCanvas(id),
phoneIP = id,
//create draw function to update image with requestAnimationFrame()
draw = function () {
setTimeout((function () {
image.src = 'http://' + phoneIP + '/cgi-bin/screen_shot';
requestAnimationFrame(draw);
}()), 1000);
};
//start redrawing screen
draw();
};
var add = function () {
var newDiv = document.createElement('div'),
phoneIP = document.getElementById('phone_ip').value;
newDiv.setAttribute('id', divCount);
document.body.appendChild(newDiv);
newDiv.innerHTML = "Loading...";
getDimensions(phoneIP, onImageLoad);
};
</script>
</body>
</html>