UI: Howto create arbitrarily-shaped buttons

edited May 2014 in General
For creating a good looking GUI I need to get rid of classic rectangle-shaped buttons and need to display arbitrarily-shaped PNG images instead. Since images are rectangles too, the arbritrary "shape" of the buttons is being realized by having a transparent background in the PNG. The non-transparent areas of these images then need to take the ontap, onmouseover etc. events. In plain HTML this would be done using the <area> tag. Anyone knows how to get this job done with EnyoJS?
An example of what I mean here can be viewed in a Flash app at http://hpindustries.nvi.co/HPHealth/ - there you got three arbitrarily-shaped stripes that take the onmouseover and ontap/onclick event, and the area definition is very precise. I need something like this in my EnyoJS app.


  • Have you tried SVG? Seems like you could create the shapes in SVG, bind an onclick handler to the shape, and have the onclick trigger an event in Enyo via enyo.Signals.
Sign In or Register to comment.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!