1<!DOCTYPE html> 2<html> 3 <!-- 4 Copyright (c) 2013 The Chromium Authors. All rights reserved. 5 Use of this source code is governed by a BSD-style license that can be 6 found in the LICENSE file. 7 --> 8<head> 9 <title>Pepper 2D Scaling Example</title> 10 <script> 11 12 function HandleMessage(message_event) { 13 if (message_event.data) { 14 console.log(message_event.data); 15 } 16 } 17 18 function AddListener() { 19 var plugin = document.getElementById("plugin"); 20 plugin.addEventListener("message", HandleMessage, false); 21 } 22 document.addEventListener("DOMContentLoaded", AddListener, false); 23 </script> 24</head> 25 26<body> 27 <script> 28 function SendString(str) { 29 var plugin = document.getElementById("plugin"); 30 plugin.postMessage(str); 31 } 32 </script> 33 34 <button onclick="SendString('dip')">DIP Res</button> 35 <button onclick="SendString('device')">Device Res</button> 36 <button onclick="SendString('metrics')">Metrics</button> 37 <hr> 38 <object id="plugin" type="application/x-ppapi-example-2d-scaling" width="200" height="200" border="2px"></object><br> 39Blue lines are one pixel thin, at either DIP or device resolution.<br> 40Green circle is 25 DIPs in radius.<br> 41Red circle is 50 CSS pixels in radius.<br> 42Mouse clicks in the plugin will generate a message in the JS console.<br> 43 <hr> 44</body> 45