image-orientation-ref.html

Enable keyboard shortcuts

<!DOCTYPE>

<head>

  <style>

    body {

      border:  0px;

      margin:  0px;

      padding: 0px;

    div {

      border:  50px solid black;

      margin:  50px;

      padding: 50px;

    table {

      border-spacing: 0px;

  </style>

</head>

<body>

  <div>

    <table>

      <tr>

        <td id="ul"></td>

        <td id="ur"></td>

      </tr>

      <tr>

        <td id="ll"></td>

        <td id="lr"></td>

      </tr>

    </table>

  </div>

  <script>

    var orientationInfo = location.search.substring(1).split("&");

    var angle = parseInt(orientationInfo[0]);

    var flip = orientationInfo[1] == "flip" ? true : false;

    // Each id corresponds to a color.

    var ids = ["ul", "ur", "lr", "ll"];

    var colors = [

      "rgb(0, 191, 0)",

      "rgb(0, 255, 1)",

      "rgb(254, 0, 122)",

      "rgb(191, 0, 93)",

];

    // 'Rotate' the colors according to the angle.

    colors.unshift.apply(colors, colors.splice((360 - angle) / 90, colors.length));

    // 'Flip' the colors if requested.

    if (flip) {

        var tmp = colors[0];

        colors[0] = colors[1];

        colors[1] = tmp;

        tmp = colors[2];

        colors[2] = colors[3];

        colors[3] = tmp;

    // Construct a style.

    var style = "";

    if (angle == 90 || angle == 270) {

      style += "div { width: 200px; height: 100px; }\n";

      style += "td { width: 100px; height: 50px; }\n";

    } else {

      style += "div { width: 100px; height: 200px; }\n";

      style += "td { width: 50px; height: 100px; }\n";

    for (var i = 0 ; i < 4 ; ++i) {

      style += "#" + ids[i] + " { background-color: " + colors[i] + "; }\n";

    // Apply the style to the document.

    var sheet = document.createElement('style');

    sheet.innerHTML = style;

    document.body.appendChild(sheet);

  </script>

</body>