Window flip?


#1

Apple’s Dashboard widgets have a neat interface idea, the windows “flip” to reveal the “backside” of the window, where settings information can be changed.

I’ve got a number of interfaces with two tabs, one for normal controls, and one for settings, and I was thinking that this was an interesting alternative to a tabbed interface. Has anyone tried doing the same thing with a juce window? Is there a juce call to do something similar?

Initially I thought the window simply collapsed from both sides to simulate the flipping, but now I see that the right side actually gets bigger, and the left side smaller to simulate the right side coming towards you as it flips. That’s a little more complicated, since the window in transition wouldn’t be rectangular, and because the side that’s “closer” to you is taller than the original window, so some clever resizing would have to happen.

If nobody has tried this before, do any juce experts have suggestions about how this might be done most easily?


#2

I suppose the thing to do would be to get two images of the front and back, then animate them turning. You’d need to render them in perspective though, and that’s something that you’d need to write yourself.


#3

I’m finally getting around to trying this.

Is there a way to createComponentShapshot() of the side I’m flipping to without having to show the side first? That is, if I’m on the front, and flipping to the back, can I get a snapshot of the back to manipulate without having to install that component in the parent?


#4

You can do a snapshot of any component - it doesn’t actually have to be on the screen.


#5

Super! I hadn’t thought snapshotting a non-visible component possible.

A follow up question: I need to change the width and height of the Image from the createComponentSnapshot() call. What’s the best way to do that? Is it possible to change that by imbedding an image in some other, resizable component?

Resizing the original component and making new snapshots doesn’t seem like it will work, as I need the image to compress or stretch as I play with it, and I’m guessing that the resizing will clip instead.


#6

Ah, duh!

I just saw that createCopy() can change dimensions…


#7

More questions…

It seems that createComponentSnapshot() on a window with a native title bar doesn’t get the title bar. Is there a way around that, other than switching to the default title bar?

I’m following the example of the FadeOutProxyComponent(), but I can’t quite figure out how to make the window I’m flipping disappear, and replace it with the snapshot component. When I call from my main window class:

getParentComponent()->addAndMakeVisible(theFlipComponent);
setVisible(false); //hide the main window

I don’t see the flip component. I’m sure I’m missing something about how the view hierarchy is built. What’s the best way to do this?


#8

No, sorry, there’s no way to snapshot the title bar - that’s need to use some kind of native OS call, rather than the normal juce stuff.

Not sure what you’re doing wrong from that description, hard to know what to suggest, really.


#9

The problem with the disappearing snapshot component was that I was trying to attach it to the parent of my main window, which didn’t have a parent. When I had the same problem with the FadeOutProxyComponent, I read the comment in the header.

I’m guessing that if I want to give the illusion of a window flipping over, what I really need to do is make the current window transparent, hide the title bar, and then show the flip inside it. Afterwards, I can reset the window to it’s old look.


#10

That sounds right to me.


#11

One more question.

I’ve changed the background color of my DialogWindow derived window to transparentWhite, make the title bar height 0, and added a look and feel class to override drawResizableWindowBorder() to draw nothing, but I still have a thin, black border around the space where the window is. Who’s drawing this, and how can I get rid of it?


#12

You will probably need a little native code-

ShowWindow( component->getWindowHandle(), SW_HIDE)

But that still may not do what you want.


#13

[quote=“igor”]One more question.

I’ve changed the background color of my DialogWindow derived window to transparentWhite, make the title bar height 0, and added a look and feel class to override drawResizableWindowBorder() to draw nothing, but I still have a thin, black border around the space where the window is. Who’s drawing this, and how can I get rid of it?[/quote]

You’re probably referring to the drop-shadow. You’d need to turn that off via the window flags.


#14

I don’t think it’s the drop shadow. That’s already off. It’s a thin line around the border of the transparent window. Without the look and feel class, that border looks black, and once I override drawResizableWindowBorder(), the border looks to be a lighter grey.

I haven’t tried the platform-specific suggestion yet, as I’m working on a mac right now, but perhaps that will help explain the outine.


#15

Oh, it’s probably just the border - maybe you need to override getBorderThickness() to return 0


#16

That can’t be right, can it? The BorderSize is used by drawResizableWindowBorder(), and I’ve already overridden that in my LookAndFeel class to do nothing.

How can I go about narrowing down where this drawing might be happening? I tried creating a blank window, with everything set to transparent, and with the afforementioned drawResizableWindowBorder(), but the border is still there. Could the system be drawing it?


#17

[quote]That can’t be right, can it? The BorderSize is used by drawResizableWindowBorder(), and I’ve already overridden that in my LookAndFeel class to do nothing.

How can I go about narrowing down where this drawing might be happening? I tried creating a blank window, with everything set to transparent, and with the afforementioned drawResizableWindowBorder(), but the border is still there. Could the system be drawing it?[/quote]

I can agree with you igor, I have also tried the steps you’ve followed and other things, but whats the deal with the thin black border, its still there?


#18

It should be pretty simple to debug the window’s paint method and see when it draws a rectangle.


#19

Found it. DocumentWindow::paint() is responsible:

 if (resizableBorder == 0 && getBorderSize() == 1)
    {
        g.setColour (getBackgroundColour().overlaidWith (Colour (0x80000000)));
        g.drawRect (0, 0, getWidth(), getHeight());
    }

since the colour is hard coded, and I can’t change the border size, it looks like overriding the paint function in my subclass is the easiest way to remove this. I’d like to add a request for a LookAndFeel function to set the border Colour, perhaps, as that would let me do what I want with minimal fuss.


#20

Ok, that’s a good request, I shouldn’t have hard-coded that…