scaling.html | Explore in Territory

<!DOCTYPE html>
<html>
<!--
Copyright 2013 The Chromium Authors
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>
chromium/ppapi/examples/scaling/scaling.html
