Raspberry Pi serving HTML5 to the Kindle Touch

The web browser on Amazon’s Kindle Touch is capable of rendering HTML5 content and executing Javascript, which has given me the idea of using it as an external display for the flight simulator that I often play with. Tonight I installed apache on my Raspberry Pi and created a file in /var/www/test.html containing some basic html5 canvas code:

<html>
<head>
<script type="text/javascript">
function drawShape(){
  // get the canvas element using the DOM
  var canvas = document.getElementById('mycanvas');
  // Make sure we don't execute when canvas isn't supported
  if (canvas.getContext){
    // use getContext to use the canvas for drawing
    var ctx = canvas.getContext('2d');

    // Filled triangle
    ctx.beginPath();
    ctx.moveTo(25,25);
    ctx.lineTo(105,25);
    ctx.lineTo(25,105);
    ctx.fill();

    // Stroked triangle
    ctx.beginPath();
    ctx.moveTo(125,125);
    ctx.lineTo(125,45);
    ctx.lineTo(45,125);
    ctx.closePath();
    ctx.stroke();

    ctx.beginPath();
    ctx.arc(150,120,42,0,2 * Math.PI);
    ctx.closePath();
    ctx.stroke();

    // border canvas area
    ctx.beginPath();
    ctx.moveTo(0,0);
    ctx.lineTo(0,canvas.height);
    ctx.lineTo(canvas.width,canvas.height);
    ctx.lineTo(canvas.width,0);
    ctx.closePath();
    ctx.stroke();

    ctx.font = "3em Arial";
    ctx.lineWidth=2;
    ctx.strokeStyle="gray";
    ctx.strokeText("Hello Kindle", 100,300);
    ctx.strokeText("from the", 120,400);
    ctx.strokeText("Raspberry Pi", 100,500);

    var imageObj = new Image();
    imageObj.onload = function() {
        ctx.drawImage(imageObj, 350, 10);
    };
    imageObj.src = "http://techaxcess.com/wp-content/uploads/2012/10/Raspberry-Pi.png

  } else {
    alert('You need Safari or Firefox 1.5+ to see this demo.');
  }
}
</script>
</head>
<body onload="drawShape();">
   <canvas id="mycanvas" width="560" height="580"></canvas>
</body>
</html>

I pointed the Kindle’s web browser at the IP address of the RPi & the page loaded nicely in the browser. Here is a screenshot:

Font sizes on the Kindle seem to differ slightly from those rendered by Firefox, but I can probably work around that.

Leave a Reply

Dansette