blob: 983cbd6d531d84c55e37ece65d30e64de1a35c15 (
plain)
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
|
<!DOCTYPE html>
<html>
<!--
Copyright (c) 2013 The Chromium Authors. All rights reserved.
Use of this source code is governed by a BSD-style license that can be
found in the LICENSE file.
-->
<head>
<title>Pepper 2D Scaling Example</title>
<script>
function HandleMessage(message_event) {
if (message_event.data) {
console.log(message_event.data);
}
}
function AddListener() {
var plugin = document.getElementById("plugin");
plugin.addEventListener("message", HandleMessage, false);
}
document.addEventListener("DOMContentLoaded", AddListener, false);
</script>
</head>
<body>
<script>
function SendString(str) {
var plugin = document.getElementById("plugin");
plugin.postMessage(str);
}
</script>
<button onclick="SendString('dip')">DIP Res</button>
<button onclick="SendString('device')">Device Res</button>
<button onclick="SendString('metrics')">Metrics</button>
<hr>
<object id="plugin" type="application/x-ppapi-example-2d-scaling" width="200" height="200" border="2px"></object><br>
Blue lines are one pixel thin, at either DIP or device resolution.<br>
Green circle is 25 DIPs in radius.<br>
Red circle is 50 CSS pixels in radius.<br>
Mouse clicks in the plugin will generate a message in the JS console.<br>
<hr>
</body>
|
