News feeder report and updated diagram class

March 18, 2012

I’ve had the news feeder (the one I told you about earlier) parsing news for the latest 40 days, from 21 sources. Being bored as I am on a Sunday I decided to create a report from the news sources that I’ve gathered.

I also updated the JS Diagram class that I’ve posted earlier with a new diagram.

And not only did I give it some new life with a circular diagram I also updated its “hit detection system”, the earlier model, which still exists for the line diagram was based on the same hitbox system Flash has, I used the coordinates of the mouse to see if it was within a square of the object, now this wouldn’t work for the circular diagram because it doesn’t have squares within it.

Instead I opted for “object picking”, that is, as I hear, also used in openGL to detect if the user is hovering over something.

The main principle is that you loop through all the individual pieces within the image and change the color of the item, at the same time you scan a 1×1 square underneath the cursor to see if the new color matches the pixel, if it does, then you know which object you should highlight.

The trick is to loop through the items faster than the screen refresh rate, doing this, the user won’t notice the flashing colors. (The colors I use when flashing is rgba(255,0,0,0.13), which is random enough that I’m guessing no one will use it :D).

It works flawlessly, but does require some computational power, but until canvas gets a hittest equivalent, I’ll go with this approach.

Here’s the report with the new diagram class at work.

And here’s the updated class class.diagram.js (24.45 kB) (with lots of fugly hacks!)

Tags