HTML5 canvas, drag and drop and two new types of control

Mariusz Plaskowicki

Before we began the Dev Camp we had a few interesting discussions about what we thought would be interesting interfaces to display to an end user. When we settled on creating a questionnaire app we started to think what kind of controls we could use to ask the questions. It was obvious that we should use some standard controls like text boxes, check boxes or radio buttons but we also wanted to use some advanced controls.

Our first choice was sliders that can be used to give feedback on a scale. We also needed some more advanced controls that could let us tap into the HTML5 canvas API. So we decided that we’d use 2-dimensional drag and drop controls that would let the users drop the items into the x/y scale. Then we went one-step further and decided that we would like to be able to use more than 2 measures at once co we came up with the rating control that uses the circles as a rating method. Users could put the circles on the x/y scale and then resize the circle to apply the third measure

I have been working yesterday and today on the canvas based controls – both the drag and drop and the circle based one. They came out quite nicely – canvas rendering proved to be really nice and effective. I’ve used CoffeeScript to create the jQuery module that created the rating and I must admit it worked really well. Working with CoffeeScript is pretty easy and efficient once you familiarise yourself with the language.

Overall the last two days have been really good – I have learned quite a lot and got quite nice controls working. They both needs a bit of polishing but as for now I’m pretty happy with the outcome.