How to create a slide-out window ?

[ada10]

I have a requirement of implementing something similar to a slide-out panel / window, which appears when a button in a dock widget ( placed on the left edge ) is clicked. The following picture shows the view i am trying to achieve - ( Screenshot1.JPG & Screenshot2.JPG )
Screenshot2.JPG


User clicks on the button, and gets something like this:


Screenshot1.JPG



For instance, I want a main window with a regular dock
widget on the left, and some kind of 'Expand' or '>>' button on the dock, when
clicked, shows more option, or a fuller version of the dockable widget. Not to be confused with a dialog, I want a frameless window to appear when the button is clicked. This should also grey out the dock widget & must be modal ( must allow interaction with other widgets). Its intended to be visible temporarily & must just blur out the underlying widget. Is there any qt class for achieving this UI ? Can anyone share the code with me if something similar has been done before ?

[Ginsengelf]

Hi, there is a wiki post about scrolling windows: [WIKI]Fade_and_scroll_effects[/WIKI].

Ginsengelf

[Lykurg]

Today you can also use QPropertyAnimation.

[ada10]

I will be more clear with my problem description. the following gives an example of what I want -

http://spyrestudios.com/demos/sliding-panel-fixed/

Though the above demo is in jQuery, it explains the UI i want.
@Lykurg - Can you please provide me some use-cases where I can use QPropertyAnimation as I am new to Qt Animation Framework

[Lykurg]

You can use it everywhere not only on a graphics screen. In your case you seem to have a fixed screen (on a mobile with s60) simple create a widget and position it outside the window. Now on button click start an animation manipulating the pos property and let the widget slide in. Something like that:

QWidget* slide;
// setup slide
slide.setGeometry(-slide->width(), 0, slide->width(), slide->height());
 
// then a animation:
QPropertyAnimation *animation = new QPropertyAnimation(slide, "pos");
animation->setDuration(10000);
animation->setStartValue(slide->pos());
animation->setEndValue(QPoint(0,0));
 
// to slide in call
 animation->start();

QWidget* slide;
// setup slide
slide.setGeometry(-slide->width(), 0, slide->width(), slide->height());

// then a animation:
QPropertyAnimation *animation = new QPropertyAnimation(slide, "pos");
animation->setDuration(10000);
animation->setStartValue(slide->pos());
animation->setEndValue(QPoint(0,0));

// to slide in call
 animation->start();

To copy to clipboard, switch view to plain text mode 

[ada10]

I have written the following code, to simulate the slide-out action. The SlideOutShow() is a slot which is called, when I press the expand button -


void slidingpanel::SlideOutShow( bool val )
{
//User pressed the button to show slide-out window

QWidget* slide = new QWidget();
slide->setGeometry(-slide->width(), 0, slide->width(), slide->height());
QPropertyAnimation *animation = new QPropertyAnimation(slide, "pos");
animation->setDuration(10000);
animation->setStartValue(slide->pos());
animation->setEndValue(QPoint(0,0));
animation->start();


}

I am testing it on S60 as you guessed it right. But when i press the button , there is no widget which is shown. Any changes to be made in the above code ?

[Lykurg]

well, your widget is empty, what do you expect to see? And to get familiar with animation you should first positioning the widget in a visible area and just move it a small distance that you can see how it behave.

[ada10]

I have my implementation as follows -

#include <QPropertyAnimation>

MainWindow::MainWindow(QWidget *parent) :
QMainWindow(parent),
ui(new Ui::MainWindow)
{
ui->setupUi(this);
connect( ui->pushButton, SIGNAL( clicked ( ) ),
this, SLOT( showSlideWidgetPressed( ) ) );
mSlideWidget = new slidewidget(this);
}

MainWindow::~MainWindow()
{
delete ui;
}


void MainWindow::showSlideWidgetPressed()
{
mSlideWidget->show();
QPoint btnPos = ui->pushButton->pos();
int btnRight = ui->pushButton->geometry().right();
int btnBottom = ui->pushButton->geometry().bottom();


QPropertyAnimation *animation = new QPropertyAnimation(mSlideWidget, "geometry");
animation->setDuration(1000);
QRect startRect(60,0,5,5);
QRect endRect(60,0,300,300);
animation->setStartValue(startRect);//QPoint(btnRight,btnBottom));//QPoint(0,0));
animation->setEndValue(endRect);//QPoint(100,100));
animation->start();
}

In the above code, mSlideWidget is a custom widget displaying some buttons. The above animation, expands the widget from small szie to a larger size. But i want the widget animation to be a "fly-by" or an "entrance" from left end of screen or from below the push button ( which triggers the animation ). Which property should i use for this?

[Lykurg]

You are using the right property right now, simple leave the last two integers and alter only the first two: they are x and y axis. (Or as said, you can use "pos")

[aamer4yu]

But i want the widget animation to be a "fly-by" or an "entrance" from left end of screen or from below the push button ( which triggers the animation ). Which property should i use for this?

Same..
just change the startRect

And yeah, I guess you know how to find geometry of screen.. isnt it

[ada10]

I am able to achieve the fly-by effect now ....
Well..I have one more requirement of the "fly-out" effect now ... that maybe simple now ... its just a reversal of the "fly-in" ... but suppose i have one more button for expanding another slide-out window & i would like the fly-out of the first window & fly-in of the second window to take place almost simultaneously... how should I go about it ?

[Lykurg]

See QParallelAnimationGroup.

[ada10]

I am really not happy with the scroll effect or "fly-in" effect using the following code -

QPropertyAnimation *animation = new QPropertyAnimation(mSlideWidget, "geometry");
animation->setDuration(500);

//Now animation to provide a fly-by effect
QRect startRect(80,0,0,300);
QRect endRect(80,0,500,300);
animation->setStartValue(startRect);
animation->setEndValue(endRect);
animation->start();

Its not as I want it to be.It should have a kind of slide- out effect from the position (x,y) = (80,0). Beyond that; that x < 80, it should not be visible. Can u please suggest how to do this ?

Currently the above code "expands" the widget from 0 width to width 500 which is not exactly what i want.

[Ginsengelf]

Hi, try

QRect startRect (-420, 0, 500, 300)

QRect startRect (-420, 0, 500, 300)

To copy to clipboard, switch view to plain text mode 

The widget should then move with fixed size and not expand from zero size.

Ginsengelf

edit: ah, did not read correctly: this will not fly-in from x=80.

[ada10]

I tried giving a negative x value only to find a displeasing effect ... any other way to do this ?

[ada10]

It should be like in this page -

http://www.building58.com/examples/tabSlideOut.html

[Lykurg]

Your examlpe could be achieved with the solution Ginsengelf. Or you have to set a mask to your widget and animate that.

[ada10]

I tried out the solution with starting rectangle QRect startRect( -420,0,500,300 ). Sure this works fine, but I would like how to set the mask so that the widget is visible only after its x >= 80

[ada10]

I was able to manage masking a particular region of the widget using setMask(). I have a small query regrading this. I want the masked region to remian valid even after the slide -out window is translated ( or moved ). How do I ensure this ?