Results 1 to 19 of 19

Thread: How to create a slide-out window ?

  1. #1
    Join Date
    May 2010
    Posts
    46
    Thanks
    3
    Thanked 1 Time in 1 Post
    Qt products
    Qt4 Qt/Embedded
    Platforms
    Symbian S60

    Exclamation How to create a slide-out window ?

    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 ?

  2. #2
    Join Date
    Jul 2008
    Posts
    434
    Thanks
    9
    Thanked 57 Times in 55 Posts
    Qt products
    Qt4 Qt5
    Platforms
    Unix/X11 Windows

    Default Re: How to create a slide-out window ?

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

    Ginsengelf

  3. #3
    Join Date
    Jan 2006
    Location
    Germany
    Posts
    4,380
    Thanks
    19
    Thanked 1,005 Times in 913 Posts
    Qt products
    Qt4
    Platforms
    Unix/X11 Windows Symbian S60
    Wiki edits
    5

    Default Re: How to create a slide-out window ?

    Today you can also use QPropertyAnimation.

  4. The following user says thank you to Lykurg for this useful post:

    Ginsengelf (4th August 2010)

  5. #4
    Join Date
    May 2010
    Posts
    46
    Thanks
    3
    Thanked 1 Time in 1 Post
    Qt products
    Qt4 Qt/Embedded
    Platforms
    Symbian S60

    Exclamation Re: How to create a slide-out window ?

    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

  6. #5
    Join Date
    Jan 2006
    Location
    Germany
    Posts
    4,380
    Thanks
    19
    Thanked 1,005 Times in 913 Posts
    Qt products
    Qt4
    Platforms
    Unix/X11 Windows Symbian S60
    Wiki edits
    5

    Default Re: How to create a slide-out window ?

    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:
    Qt Code:
    1. QWidget* slide;
    2. // setup slide
    3. slide.setGeometry(-slide->width(), 0, slide->width(), slide->height());
    4.  
    5. // then a animation:
    6. QPropertyAnimation *animation = new QPropertyAnimation(slide, "pos");
    7. animation->setDuration(10000);
    8. animation->setStartValue(slide->pos());
    9. animation->setEndValue(QPoint(0,0));
    10.  
    11. // to slide in call
    12. animation->start();
    To copy to clipboard, switch view to plain text mode 

  7. #6
    Join Date
    May 2010
    Posts
    46
    Thanks
    3
    Thanked 1 Time in 1 Post
    Qt products
    Qt4 Qt/Embedded
    Platforms
    Symbian S60

    Exclamation Re: How to create a slide-out window ?

    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 ?

  8. #7
    Join Date
    Jan 2006
    Location
    Germany
    Posts
    4,380
    Thanks
    19
    Thanked 1,005 Times in 913 Posts
    Qt products
    Qt4
    Platforms
    Unix/X11 Windows Symbian S60
    Wiki edits
    5

    Default Re: How to create a slide-out window ?

    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.

  9. #8
    Join Date
    May 2010
    Posts
    46
    Thanks
    3
    Thanked 1 Time in 1 Post
    Qt products
    Qt4 Qt/Embedded
    Platforms
    Symbian S60

    Default Re: How to create a slide-out window ?

    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?

  10. #9
    Join Date
    Jan 2006
    Location
    Germany
    Posts
    4,380
    Thanks
    19
    Thanked 1,005 Times in 913 Posts
    Qt products
    Qt4
    Platforms
    Unix/X11 Windows Symbian S60
    Wiki edits
    5

    Default Re: How to create a slide-out window ?

    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")

  11. #10
    Join Date
    Oct 2006
    Location
    New Delhi, India
    Posts
    2,467
    Thanks
    8
    Thanked 334 Times in 317 Posts
    Qt products
    Qt4
    Platforms
    Unix/X11 Windows

    Default Re: How to create a slide-out window ?

    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

  12. #11
    Join Date
    May 2010
    Posts
    46
    Thanks
    3
    Thanked 1 Time in 1 Post
    Qt products
    Qt4 Qt/Embedded
    Platforms
    Symbian S60

    Exclamation Re: How to create a slide-out window ?

    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 ?

  13. #12
    Join Date
    Jan 2006
    Location
    Germany
    Posts
    4,380
    Thanks
    19
    Thanked 1,005 Times in 913 Posts
    Qt products
    Qt4
    Platforms
    Unix/X11 Windows Symbian S60
    Wiki edits
    5

    Default Re: How to create a slide-out window ?


  14. The following user says thank you to Lykurg for this useful post:

    ada10 (5th August 2010)

  15. #13
    Join Date
    May 2010
    Posts
    46
    Thanks
    3
    Thanked 1 Time in 1 Post
    Qt products
    Qt4 Qt/Embedded
    Platforms
    Symbian S60

    Exclamation Re: How to create a slide-out window ?

    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.

  16. #14
    Join Date
    Jul 2008
    Posts
    434
    Thanks
    9
    Thanked 57 Times in 55 Posts
    Qt products
    Qt4 Qt5
    Platforms
    Unix/X11 Windows

    Default Re: How to create a slide-out window ?

    Hi, try
    Qt Code:
    1. 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.
    Last edited by Ginsengelf; 6th August 2010 at 11:08. Reason: updated contents

  17. #15
    Join Date
    May 2010
    Posts
    46
    Thanks
    3
    Thanked 1 Time in 1 Post
    Qt products
    Qt4 Qt/Embedded
    Platforms
    Symbian S60

    Exclamation Re: How to create a slide-out window ?

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

  18. #16
    Join Date
    May 2010
    Posts
    46
    Thanks
    3
    Thanked 1 Time in 1 Post
    Qt products
    Qt4 Qt/Embedded
    Platforms
    Symbian S60

    Exclamation Re: How to create a slide-out window ?

    It should be like in this page -

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

  19. #17
    Join Date
    Jan 2006
    Location
    Germany
    Posts
    4,380
    Thanks
    19
    Thanked 1,005 Times in 913 Posts
    Qt products
    Qt4
    Platforms
    Unix/X11 Windows Symbian S60
    Wiki edits
    5

    Default Re: How to create a slide-out window ?

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

  20. #18
    Join Date
    May 2010
    Posts
    46
    Thanks
    3
    Thanked 1 Time in 1 Post
    Qt products
    Qt4 Qt/Embedded
    Platforms
    Symbian S60

    Exclamation Re: How to create a slide-out window ?

    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

  21. #19
    Join Date
    May 2010
    Posts
    46
    Thanks
    3
    Thanked 1 Time in 1 Post
    Qt products
    Qt4 Qt/Embedded
    Platforms
    Symbian S60

    Exclamation Re: How to create a slide-out window ?

    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 ?

Similar Threads

  1. Create a QWidget as child of a Win32 window
    By BenPa in forum Qt for Embedded and Mobile
    Replies: 1
    Last Post: 29th March 2011, 14:35
  2. Replies: 9
    Last Post: 16th May 2010, 16:21
  3. how to create a pop up window
    By wagmare in forum Newbie
    Replies: 2
    Last Post: 17th January 2009, 07:17
  4. Slide Up Window (Messenger Style)
    By December in forum Qt Programming
    Replies: 3
    Last Post: 13th February 2007, 16:01
  5. slide show
    By jeetu_happy in forum Qt Programming
    Replies: 3
    Last Post: 18th January 2007, 12:21

Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
Digia, Qt and their respective logos are trademarks of Digia Plc in Finland and/or other countries worldwide.