src/ppapi/examples/scaling/scaling.html

   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>
  39 Blue lines are one pixel thin, at either DIP or device resolution.<br>
  40 Green circle is 25 DIPs in radius.<br>
  41 Red circle is 50 CSS pixels in radius.<br>
  42 Mouse clicks in the plugin will generate a message in the JS console.<br>
  43   <hr>
  44 </body>