Small Multiples / mouseover effect
how would you do a mouseover effect on a sketch or actually it's embedded in a Swing GUI with 4 scaled images. I've got the "normal" SunburstView where I'm calculating the SunburstItem, which is under the mouse cursor with:
- /** Initialize rollover. */
- private void rolloverInit() {
- mHitTestIndex = -1;
- final PVector mousePosition = getZoomer().getMouseCoord();
- mX = mousePosition.x - mParent.width / 2;
- mY = mousePosition.y - mParent.height / 2;
- mAngle = PApplet.atan2(mY - 0, mX - 0);
- final float radius = PApplet.dist(0, 0, mX, mY);
- if (mAngle < 0) {
- mAngle = PApplet.map(mAngle, -PConstants.PI, 0, PConstants.PI, PConstants.TWO_PI);
- } // Calc mouse depth with mouse radius ... transformation of calcEqualAreaRadius().
- mDepth = PApplet.floor(PApplet.pow(radius, 2) * (mDepthMax + 1) / PApplet.pow(getInitialRadius(), 2)); }
- }
- ....
- rolloverInit();
- int index = 0;
- final IModel<?, ?> model = mControl.getModel();
- for (final IVisualItem visualItem : model) {
- final SunburstItem item = (SunburstItem)visualItem;
- // Hittest, which arc is the closest to the mouse.
- float angleStart = item.getAngleStart() + PApplet.radians(mRad);
- float angleEnd = item.getAngleEnd() + PApplet.radians(mRad);
- if (item.getDepth() == mDepth && mAngle > angleStart && mAngle < angleEnd) {
- mHitTestIndex = index;
- mHitItem = item;
- retVal = true;
- break;
- }
- index++;
- }
Now I'm rendering each such view from an offscreen buffer into a quarter of the available screen space, so I can't use the above formula anymore (I have to also partition the space for the mouseover effect somehow) -- code snippet from draw():
- mLock.acquireUninterruptibly();
- for (final ImageStore imageStore : mBufferedImages) {
- final PGraphics buffer = imageStore.mBufferedImage;
- mParent.image(buffer, mX, mY, buffer.width / 2, buffer.height / 2);
- mX += buffer.width / 2;
- if (i % 2 == 0) {
- mX -= buffer.width / 2;
- mY = buffer.height / 2 + 1;
- } else if (i % 3 == 0) {
- mX = 0;
- }
- i++;
- }
- mLock.release();
How do I also provide a mouseover effect on the "scaled" buffered images? I want to provide a mouseover where whenever one item is hovered in one buffered image the corresponding item in all 3 other images should be highlighted. That is I'm going to build a datastructure like a List
of Lists
whereas each List
in the List
represent all Items in one buffered image.
Hope it's clear what I'm trying to achieve. I somehow have to scale the hovereffect or something like that and then find corresponding items from one hovered item in the other Lists or maybe LinkedHashMaps which might be faster. But the overall problem is I currently don't have a clue how to replace the mouseover from the whole screen to a mouseover which works on each quarter of a screen ;-)
kind regards,
Johannes