2013-06-16

Fiddlesprinkler!

Sounds like something you say when you hit your thumb with a hammer and there're kids around, I know. I would certainly encourage you to use it that way, if only because it'd make the world a happier place.

Actually it is a little script I have been working on as part of a larger interactive whiteboard project. I hope you're happy; I was this close to calling it the Sprinklinator.



Why, you ask? I wasn't aware I needed a reason, but okay.

The larger project I alluded to is basically an MS Paint for the Interactive Whiteboard, but much fancier, with multiple pages and vector graphics. There is a bunch of software that already does this, but no single product has all the features I want, so I figured I may as well try make something myself.

As a first step, I was trying to accurately track mouse movements over an embedded SVG and draw a line. The way I implemented this was to have an interval pinging every 10ms, checking if the mouse button was depressed, and if so, updating the SVG at the new mouse coordinates.

I have had trouble with intervals not cancelling properly before, though, so instead of just extending a path, I decided to do something that would make it obvious if the interval was still in effect. Good thing, too; it helped me identify a bug wherein moving off the canvas and then back on would cause it to continue indefinitely.

Anyway, the most visually effective way to do this was to create multiple miniature circles on the canvas, of varying sizes and colours. Although it was just to solve this interval problem, I quite like the effect. Depending on performance and whatnot, I might add it to the final product for fun.

The downside is that if you ever need to save the SVG, it has like ten thousand elements, so it's ludicrously oversized for its actual content.

Pretty pretty, though.

By the way, the darker gray bar on the left is for the controls (pen color, shape, etc.) - which are yet to be added. Should happen soon, at which point I'll post an update!



Update: It seems that the mouse events are being slightly fubared in IE9. Looking into it now....

Update 2: *sigh* I think it has something to do with bubbling, or IE reordering things on the page without telling me.

Update 3: Dammit. I forgot that Internet Explorer does not register events on elements with nothing in them and no background style. Added a transparent background PNG so it should work properly now.

No comments:

Post a Comment