Instructional "thing" on the web

Link: Print-your-own piano helper template

Part 2 of the instructional “thing” assignment was to make it accessible on the web. I wanted to make the piano template I created into a web page so that anyone with a printer could print out the design at actual size and cut it out themselves without having to measure anything.

I used some HTML5 canvas elements, JavaScript, and CSS. This was my first time using HTML5 canvas and I found it to be unintuitive. My experience with the Java-based Android canvas helped a fair amount but there were more than a few things that baffled me.

By far the biggest problem I had was that I couldn't figure out how to make an element print at an exact physical size. It turns out that the CSS in (inch) units are just multiples of fixed pixel amounts. I have a pending question on Stack Overflow and will update this post if I get an answer.

After getting things close to correct, I added instructions for the templates' use. I realized that not everyone would know a piano keyboard well enough to identify one octave starting at C, so I found an SVG image of such an octave so that people could identify this better.

One improvement I want to make is to include the physical measurements on the template so that people can measure and draw their own templates without needing a printer. Assuming that everyone has access to a printer was a major oversight.