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.
Uncategorized | duncanj | October 15, 2012
