| <!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> |
