OpenNIBrowserPlugin/testImage.html at master · zigfu/OpenNIBrowserPlugin · GitHub

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
<!DOCTYPE html>
<!-- saved from url=(0013)about:internet -->
<!-- The above comment makes IE treat this as a web page -->
<html>
<head>
    <title>atl 8.0 test page for object fbcontrol</title>
    <link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/themes/base/jquery-ui.css" rel="Stylesheet" />
    <style>

        body
        {
            padding: 0;
            margin: 0;
        }

        .header
        {
            text-align: center;
            border: 1px solid black;
            width: 900px;
        }

        #pluginContainer
        {
            width: 300px;
            height: 300px;
            border: 5px dotted gray;
            text-align: center;
            margin: 0 auto;
            float: left;
        }
    </style>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js"></script>
    <script type="text/javascript" language="Javascript">
        var mimeType = "application/x-zig";
        var pluginCB = null;

        function plugin() {
            return document.getElementById("testPlugin");
        }

        function injectPlugin(dest, callback) {
            pluginCB = callback;
            var html = '<object id="testPlugin" type="' + mimeType + '" width="100%" height="100%" onload="alert(\'The plugin has loaded 1!\');">';
            html += '<param name="onload" value="pluginCB" />';
            html += '</object>';
            dest[0].innerHTML = html;
        }

		function onWaveGesture(x,y,z)
		{
			//alert("Wave Gesture!");
			document.getElementById("log").innerHTML += "WaveGesture" + x.toString() + ' ' + y.toString() + ' '+ z.toString();
		}

		function onHandCreate(uid, x,y,z, t)
		{
			document.getElementById("log").innerHTML += "HandCreate"+uid+' '+x.toString()+' '+y.toString()+' '+z.toString()+' '+t.toString();
			document.getElementById("handpos").innerHTML = x.toString()+' '+y.toString()+' '+z.toString();

		}


		function onHandUpdate(uid,x,y,z,y){
			document.getElementById("handpos").innerHTML = x.toString()+' '+y.toString()+' '+z.toString();
		}

		function onHandDestroy(uid, t)
		{
			document.getElementById("log").innerHTML += "HandDestroy"+uid+' '+t.toString();
			document.getElementById("handpos").innerHTML = '';

		}

        function pageLoaded() {
           document.getElementById("log").innerHTML = "adding events"
            injectPlugin($("#pluginContainer"), pluginLoaded);
        }


        function pluginLoaded() {
            $("#pluginContainer").css("border", "1px solid black");
            //setTimeout(pluginRunTests, 500);
			plugin().addEventListener("WaveGesture", onWaveGesture, false);
			plugin().addEventListener("HandCreate", onHandCreate, false);
			plugin().addEventListener("HandUpdate", onHandUpdate, false);
			plugin().addEventListener("HandDestroy", onHandDestroy, false);
			plugin().setImage(document.getElementById("testImage"));
			document.getElementById("log").innerHTML += "events added"
        }


        $(document).ready(pageLoaded);

    </script>

</head>
<body>
    <div class="header">
        <h1>FBTestPlugin - Test page</h1>
        <small>Plugin path: <span id="pluginPath">?</span></small>
    </div>
    <div id="pluginContainer">
        <br /><br /><br />Plugin will go here!
    </div>
	<br><br><div id="handpos">Hand Position</div>

	<br><br>
	<div id="log">Log</div>
	<br>
	<img id="testImage" > </img>
	</body>
</html>