Results 1 to 13 of 13

Thread: Slide windows

  1. #1

    Default Slide windows

    I have a page that has a header, body and footer. Its an app that allows the user to click a map in the body and return results. Right now I am popping those results in a rectangle in the main body.
    But what I want to do is put those results in the footer but expand the footer to say 50% vertical of the screen. When the user clicks a close button in the footer or in the body the footer would go back to its original size...

    Does that make sense? Wondering what my best options would be to research...

  2. #2
    Join Date
    Jan 2008
    Location
    Alameda, CA, USA
    Posts
    4,061
    Thanks
    233
    Thanked 649 Times in 639 Posts
    Qt products
    Qt5
    Platforms
    Unix/X11 Windows Android

    Default Re: Slide windows

    I have implemented exactly this. I call it a "collapsible widget". I am sorry I can't share the code because it is proprietary to my company, but it is easy to implement:

    The CollapsibleWidget is derived from QWidget. It contains a QVBoxLayout as its main layout. Inside of this vbox is a QHBoxLayout.
    The hbox contains a horizontal spacer, a QToolButton with an up / down arrow icon, and another horizontal spacer to keep the button centered. Depending on whether the collapsible widget is at the top or bottom of the window, the hbox is placed either at the bottom or top of the vbox, respectively.

    The widget which is controlled by the collapsible widget is inserted at the other position in the vbox. This is usually a QWidget-based composite widget containing other child widgets. In my implementation, the collapsible widget needs to know the fully-expanded height of this controlled widget for use during the slide in / out.

    In use, I usually put the collapsible widget in a pane of a QSplitter, but in the example shown in the screen shots, it is in the top-most pane of another vbox layout, and the data plot is in the pane below that. The controlled widget initially starts out collapsed. When the user clicks the expand button, a property animation slowly changes the "maximumHeight" property of the controlled widget from 0 to whatever has been set as its maximum height. Thus the controlled widget gradually slides out. This procedure is reversed when the widget slides back in.

    See the screen shots for the static picture of the collapsed and expanded states.

    Collapsed.jpg Expanded.jpg

    My implementation is much more detailed than the description above - the collapsible widget can have horizontal or vertical orientation, it can be located on any of the four sides of the window it is used in, it can be animated or not, the button does not have to be centered (or even visible), the button can have a tool tip, the animation rate can be varied, etc. There's a public slot to set the collapsed state, and a signal that is emitted when the state is toggled. All told, it is only about 450 lines of code and a large chunk of that is logic to change what happens based on whether the widget has a horizontal or vertical orientation. It would probably drop to 300 lines or so if it was restricted to just horizontal orientation,
    Last edited by d_stranz; 14th August 2019 at 00:22.
    <=== The Great Pumpkin says ===>
    Please use CODE tags when posting source code so it is more readable. Click "Go Advanced" and then the "#" icon to insert the tags. Paste your code between them.

  3. #3

    Default Re: Slide windows

    Thank you d_strnaz
    What you said make sort of sense....very very new to this.....Anyone out there have an extremely basic example of this.....
    a window that when clicked animates a window that slides from the bottom to fill 50% of the main window....

    I am going to continue to look this up but any help would be very appreciated.

    I currently have a few rectangles (Header, body and footer) That sit inside a rectangle for the whole area....
    I need to embed these rectangles in the final solution....Not really sure where to go from here....


    The CollapsibleWidget is derived from QWidget. It contains a QVBoxLayout as its main layout. Inside of this vbox is a QHBoxLayout.


    Basically this is what I have....snipped everything out but what I think is relevant

    Would be cool to get this working where the footer would be not shown...when a user clicks the map section the foot expands to 50%. then when clicked in map area again the footer animates to closed and non-visible

    Qt Code:
    1. Rectangle {
    2. id: loadService
    3.  
    4. ColumnLayout {
    5. anchors.fill: parent
    6. spacing: 0
    7.  
    8. Rectangle {
    9. id: createPage_headerBar
    10. Layout.alignment: Qt.AlignTop
    11. color: app.headerBackgroundColor
    12. Layout.preferredWidth: parent.width
    13. Layout.preferredHeight: 50 * app.scaleFactor
    14. visible: !isFullMap
    15.  
    16. MouseArea {
    17. anchors.fill: parent
    18. onClicked: {
    19. mouse.accepted = false
    20. }
    21. }
    22. }
    23.  
    24. // create MapView
    25. MapView {
    26. id:mapView
    27.  
    28. Map {
    29. initialViewpoint: viewPoint
    30. } // END OF MAP
    31. }
    32.  
    33. Rectangle {
    34. id: footer
    35. //Layout.preferredHeight: page3_button1.height
    36. Layout.preferredWidth: parent.width * 0.95
    37. Layout.alignment: Qt.AlignHCenter
    38. Layout.maximumWidth: app.units(600)
    39. Layout.margins: 8 * scaleFactor
    40. color: "transparent"
    41. visible: !isFullMap
    42. Layout.bottomMargin: app.isIPhoneX ? 28 * app.scaleFactor : 8 * scaleFactor
    43. }
    44.  
    45. } // END OF COLUMN LAYOUT
    46.  
    47.  
    48. } // END OF OPENING RECTANGLE
    To copy to clipboard, switch view to plain text mode 
    Last edited by jaykappy; 14th August 2019 at 16:04.

  4. #4
    Join Date
    Jan 2008
    Location
    Alameda, CA, USA
    Posts
    4,061
    Thanks
    233
    Thanked 649 Times in 639 Posts
    Qt products
    Qt5
    Platforms
    Unix/X11 Windows Android

    Default Re: Slide windows

    Can't help you with the QML, but in essence all my collapsible widget does is manage the maximumHeight property of the widget it controls. You don't actually need the CollapsibleWidget class itself to do this; I implemented it that way to have a reusable library component. You don't need the buttons to expand / collapse the slide widget if you will be doing it in response to other clicks.

    Basically, all you need to do is: 1) keep track of the overall height of your large window, 2) put your header, body, footer, and map widgets into a vertical layout, 3) set the maximumHeight property of the map widget to 0, then 4) when you want the map to show, change its maximumHeight property from 0 to half the window height and 5) when you want to dismiss it, set the maximumHeight property back to 0. The vertical box layount management will take care of adjusting the sizes of the other widgets.

    The animation is icing on top of this, changing the maximumHeight property as a function of time so the map slides up or down. So instead of a click on the main window instantly changing maximumHeight, it start the animation which changes it gradually. Likewise a click on the map starts the reverse animation.
    <=== The Great Pumpkin says ===>
    Please use CODE tags when posting source code so it is more readable. Click "Go Advanced" and then the "#" icon to insert the tags. Paste your code between them.

  5. #5

    Default Re: Slide windows

    I cant find this anywhere

    changing the maximumHeight property as a function of time so the map slides up or down


    Added after 1 23 minutes:


    I can get this to work ...BUT

    It waits for the time to change the color and then when done just changes the height of the rectangle in a second....
    I want the transition of the height change to happen along with the change of the color

    Any idea when the height transition is not changing with the color change?


    Qt Code:
    1. Rectangle {
    2. id: footer
    3. anchors.bottom: parent.bottom
    4. Layout.maximumHeight: 200;
    5.  
    6. height: 20
    7. width: parent.width
    8. color: "red"
    9. visible: true
    10.  
    11.  
    12. state: "RELEASED"
    13.  
    14. MouseArea {
    15. anchors.fill: parent
    16. onPressed: footer.state = "PRESSED"
    17. onReleased: footer.state = "RELEASED"
    18. }
    19.  
    20. states: [
    21. State {
    22. name: "PRESSED"
    23. PropertyChanges { target: footer; color: "green"; height: parent.height * .25}
    24. PropertyChanges { target: mapView; height: parent.height * .60}
    25. },
    26. State {
    27. name: "RELEASED"
    28. PropertyChanges { target: footer; color: "purple"; Layout.height:20;}
    29. PropertyChanges { target: mapView; height: parent.height * .80}
    30.  
    31. }
    32. ]
    33.  
    34. transitions: [
    35. Transition {
    36. from: "PRESSED"
    37. to: "RELEASED"
    38. ColorAnimation { target: footer; duration: 2000}
    39. },
    40. Transition {
    41. from: "RELEASED"
    42. to: "PRESSED"
    43. ColorAnimation { target: footer; duration: 2000}
    44. }
    45. ]
    To copy to clipboard, switch view to plain text mode 
    Last edited by jaykappy; 15th August 2019 at 19:07.

  6. #6

    Default Re: Slide windows

    In addition to not being able to animate the rectangle opening ....My main problem is that I want this to "Pressed" property changes to happen after the user clicks the mapView Rectangle and to close when I click a button on the footer Rectangle. Not sure how to modify this to make that happen

  7. #7
    Join Date
    Jan 2008
    Location
    Alameda, CA, USA
    Posts
    4,061
    Thanks
    233
    Thanked 649 Times in 639 Posts
    Qt products
    Qt5
    Platforms
    Unix/X11 Windows Android

    Default Re: Slide windows

    Any idea when the height transition is not changing with the color change?
    I see a "ColorAnimation" but do not see a corresponding animation for the height. So basically the height is changed instantly during the state transitions.

    Not sure how to modify this to make that happen
    Add a handler for the pushbutton "clicked" signal. In that handler set the footer state to whatever starts the "slide in" transition..

    I am not sure your logic is correct, however. A "click" is the combination of a press and a release, both occurring on the same mouse area. By handling the press separately from the release and doing different things in response to each, that isn't the same behavior as a click. And you could end up in a stuck state - if the user presses the mouse in the footer, then moves out of the footer to release it, the footer only gets a press event and the window is stuck in that state.
    <=== The Great Pumpkin says ===>
    Please use CODE tags when posting source code so it is more readable. Click "Go Advanced" and then the "#" icon to insert the tags. Paste your code between them.

  8. #8

    Default Re: Slide windows

    Thats where I am puzzled....what Animation do I use for the Height?

    transitions: [
    Transition {
    from: "PRESSED"
    to: "RELEASED"
    ColorAnimation { target: footer; duration: 2000}
    },
    Transition {
    from: "RELEASED"
    to: "PRESSED"
    ColorAnimation { target: footer; duration: 2000}
    }
    ]

  9. #9
    Join Date
    Jan 2008
    Location
    Alameda, CA, USA
    Posts
    4,061
    Thanks
    233
    Thanked 649 Times in 639 Posts
    Qt products
    Qt5
    Platforms
    Unix/X11 Windows Android

    Default Re: Slide windows

    There is a QML "NumberAnimation" type, inherited from the "PropertyAnimation" type. Set the target to your footer, property to "height" or "maximumHeight", "from" and "to" to the start and end heights
    <=== The Great Pumpkin says ===>
    Please use CODE tags when posting source code so it is more readable. Click "Go Advanced" and then the "#" icon to insert the tags. Paste your code between them.

  10. #10

    Default Re: Slide windows

    I thank you for your time and patience....

    Would I get rid of the states below? This is where I am changing the heights...


    state: "RELEASED"

    MouseArea {
    anchors.fill: parent
    //onClicked: footer.state = "PRESSED"
    onPressed: footer.state = "PRESSED"
    onReleased: footer.state = "RELEASED"
    }

    states: [
    State {
    name: "PRESSED"
    PropertyChanges {
    target: footer;
    color: "green";
    height: !isFullMap ? parent.height * .32 : parent.height * .32;
    }
    PropertyChanges {
    target: mapView;
    height: !isFullMap ? parent.height * .61 : parent.height * .68
    }
    },
    State {
    name: "RELEASED"
    PropertyChanges { target: footer; color: "gray"; Layout.height:20;}
    PropertyChanges { target: mapView; Layout.fillHeight: true;}
    }
    ]




    This gives me errors

    transitions: [
    PropertyAnimation {
    from: "PRESSED"
    to: "RELEASED"
    NumberAnimation { target: footer; from: 50; to:200; duration: 2000}
    },
    PropertyAnimation {
    from: "RELEASED"
    to: "PRESSED"
    NumberAnimation { target: footer; from: 200; to:50; duration: 2000}
    }
    ]

  11. #11
    Join Date
    Jan 2008
    Location
    Alameda, CA, USA
    Posts
    4,061
    Thanks
    233
    Thanked 649 Times in 639 Posts
    Qt products
    Qt5
    Platforms
    Unix/X11 Windows Android

    Default Re: Slide windows

    I don't know QML, but shouldn't the keyword "PropertyAnimiation" in your "transitions" block be the keyword "Transition" instead?
    <=== The Great Pumpkin says ===>
    Please use CODE tags when posting source code so it is more readable. Click "Go Advanced" and then the "#" icon to insert the tags. Paste your code between them.

  12. #12

    Default Re: Slide windows

    If I do this...the color animation works fine....but it waits till the color animation is done and then the height adjustment is almost instant

    Qt Code:
    1. state: "RELEASED"
    2.  
    3. MouseArea {
    4. anchors.fill: parent
    5. //onClicked: footer.state = "PRESSED"
    6. onPressed: footer.state = "PRESSED"
    7. onReleased: footer.state = "RELEASED"
    8. }
    9.  
    10. states: [
    11. State {
    12. name: "PRESSED"
    13. PropertyChanges {
    14. target: footer;
    15. color: "white";
    16. height: !isFullMap ? parent.height * .32 : parent.height * .32;
    17. }
    18. PropertyChanges {
    19. target: mapView;
    20. height: !isFullMap ? parent.height * .65 : parent.height * .68
    21. }
    22. },
    23. State {
    24. name: "RELEASED"
    25. PropertyChanges { target: footer; color: "gray"; Layout.height:50;}
    26. PropertyChanges { target: mapView; Layout.fillHeight: true;}
    27. }
    28. ]
    29. transitions: [
    30. Transition {
    31. from: "PRESSED"
    32. to: "RELEASED"
    33. ColorAnimation { target: footer; duration: 2000}
    34. PropertyAnimation {target: footer; properties: height; }
    35. NumberAnimation { target: footer; from: 50; to:200; duration: 2000 }
    36. },
    37. Transition {
    38. from: "RELEASED"
    39. to: "PRESSED"
    40. ColorAnimation { target: footer; duration: 2000}
    41. PropertyAnimation { target: footer.height; properties: height; }
    42. NumberAnimation { target: footer.height; from: 200; to:50; duration: 2000 }
    43. }
    44. ]
    To copy to clipboard, switch view to plain text mode 

  13. #13
    Join Date
    Jan 2008
    Location
    Alameda, CA, USA
    Posts
    4,061
    Thanks
    233
    Thanked 649 Times in 639 Posts
    Qt products
    Qt5
    Platforms
    Unix/X11 Windows Android

    Default Re: Slide windows

    I think you need to understand something about QML object types. When I said that "NumberAnimation" is derived from "PropertyAnimation", it means that PropertyAnimation is the base class for the NumberAnimation type. ColorAnimation is also derived from PropertyAnimation. It does not mean that you include both PropertyAnimation and NumberAnimation in the same Transition.

    Try this:

    Qt Code:
    1. transitions: [
    2. Transition {
    3. from: "PRESSED"
    4. to: "RELEASED"
    5. ColorAnimation { target: footer; duration: 2000}
    6. NumberAnimation { target: footer; property: "height"; from: 50; to:200; duration: 2000 }
    7. },
    8. Transition {
    9. from: "RELEASED"
    10. to: "PRESSED"
    11. ColorAnimation { target: footer; duration: 2000}
    12. NumberAnimation { target: footer; property: "height"; from: 200; to:50; duration: 2000 }
    13. }
    14. ]
    To copy to clipboard, switch view to plain text mode 
    <=== The Great Pumpkin says ===>
    Please use CODE tags when posting source code so it is more readable. Click "Go Advanced" and then the "#" icon to insert the tags. Paste your code between them.

Similar Threads

  1. Slide Show using QGraphicscene
    By Surendark in forum Newbie
    Replies: 1
    Last Post: 26th March 2015, 13:07
  2. Create slide show
    By iswaryasenthilkumar in forum Newbie
    Replies: 2
    Last Post: 4th December 2014, 11:55
  3. slide of frames
    By vinayaka in forum Newbie
    Replies: 3
    Last Post: 18th July 2011, 06:50
  4. How to create a slide-out window ?
    By ada10 in forum Newbie
    Replies: 18
    Last Post: 12th August 2010, 07:49
  5. slide show
    By jeetu_happy in forum Qt Programming
    Replies: 3
    Last Post: 18th January 2007, 12:21

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.