Results 1 to 5 of 5

Thread: Create a marquee with QGraphicsScene

  1. #1
    Join Date
    May 2007
    Posts
    5
    Qt products
    Qt4
    Platforms
    Unix/X11 Windows

    Question Create a marquee with QGraphicsScene

    Hi all,

    I'm looking to create a marquee like the ones we could watch on TV, normally horizontal scrolls. What I'm having is a lot of flickering on the animation, and I would like to have other opinions because I'm a newbie on Qt Graphics.

    If I resize the window, the animation stops, is there a way to avoid that? I don't know if there is a way to have a thread for the scene.

    Here is the main code I'm using, but you can find attached all the project.

    Qt Code:
    1. Item::Item(QGraphicsItem * parent)
    2. : QGraphicsItem(parent)
    3. {
    4. setCacheMode(DeviceCoordinateCache);
    5. _boundingRect = QRectF(0, 0, 960, 220);
    6. _animationSpeed = 0.5;
    7. }
    8.  
    9. QRectF Item::boundingRect() const
    10. {
    11. return _boundingRect;
    12. }
    13.  
    14. void Item::paint(QPainter *painter, const QStyleOptionGraphicsItem *option,
    15. QWidget *widget)
    16. {
    17. painter->setBrush(Qt::yellow);
    18. painter->drawRoundedRect(2, 2, 84, 84, 4, 4);
    19. painter->setBrush(QColor(50,50,50));
    20. painter->drawRoundedRect(90, 2, 84, 84, 4, 4);
    21. painter->drawRoundedRect(176, 2, 534, 84, 4, 4);
    22. painter->drawRoundedRect(712, 2, 245, 84, 4, 4);
    23. }
    24.  
    25. void Item::advance(int phase)
    26. {
    27. if (phase == 1)
    28. {
    29. moveBy(-(_animationSpeed), 0.0);
    30. }
    31. }
    32.  
    33. void Item::setAnimationSpeed(qreal value)
    34. {
    35. _animationSpeed = value;
    36. }
    To copy to clipboard, switch view to plain text mode 

    Qt Code:
    1. MainWindow::MainWindow(QWidget *parent) :
    2. QMainWindow(parent),
    3. ui(new Ui::MainWindow)
    4. {
    5. ui->setupUi(this);
    6.  
    7. scene->setBackgroundBrush(Qt::black);
    8.  
    9. ui->graphicsView->setViewport(new QGLWidget(QGLFormat(QGL::SampleBuffers)));
    10. ui->graphicsView->setScene(scene);
    11. ui->graphicsView->setSceneRect(0,0,960,230);
    12.  
    13. for (int i = 0; i < 50; i++)
    14. {
    15. Item *item = new Item();
    16. item->setPos(item->boundingRect().width() * i, 0);
    17. item->setAnimationSpeed(ui->horizontalSlider->value() / 10.0);
    18. scene->addItem(item);
    19. _items.append(item);
    20. }
    21.  
    22. QTimer *timer = new QTimer();
    23. connect(timer, SIGNAL(timeout()), this, SLOT(timer_timeout()));
    24. timer->start(1);
    25.  
    26. _elapsedTimer = new QElapsedTimer();
    27. _elapsedTimer->start();
    28. }
    29.  
    30. MainWindow::~MainWindow()
    31. {
    32. delete ui;
    33. }
    34.  
    35. void MainWindow::timer_timeout()
    36. {
    37. if (_elapsedTimer->hasExpired(8))
    38. {
    39. _elapsedTimer->start();
    40. ui->graphicsView->scene()->advance();
    41. }
    42. }
    43.  
    44. void MainWindow::on_horizontalSlider_valueChanged(int value)
    45. {
    46. foreach(Item *i, _items)
    47. i->setAnimationSpeed(value / 10.0);
    48. }
    To copy to clipboard, switch view to plain text mode 
    Attached Files Attached Files
    Last edited by plitex; 31st May 2013 at 12:18.

  2. #2
    Join Date
    Jan 2008
    Location
    Alameda, CA, USA
    Posts
    3,977
    Thanks
    232
    Thanked 627 Times in 617 Posts
    Qt products
    Qt5
    Platforms
    Unix/X11 Windows Android

    Default Re: Create a marquee with QGraphicsScene

    Why are you using a 1ms timeout for your main QTimer? That is much too fast for any practical purposes. Typical video is 30 fps, which translates to a refresh period of 33 ms. Even at 33 ms, that is still too fast for your brain to see individual frames. If you item doesn't need to move that fast, then set a more realistic timeout.

    What is your marquee being drawn on top of? Is it a mostly static image or is it a video? One way to avoid flicker is to avoid the need to refresh anything except the immediate region being drawn or to set a cache on the background image so it doesn't actually paint but simply bitblts the areas that are changed by the moving item.

  3. #3
    Join Date
    May 2007
    Posts
    5
    Qt products
    Qt4
    Platforms
    Unix/X11 Windows

    Default Re: Create a marquee with QGraphicsScene

    Hi,

    I've tested with several intervals, but 16 or 33 are showing unacceptable flickering... I really don't know why is so unstable. I changed the code to use a QGraphicsItemAnimation and QTimeLine, and it looks more stable, but only with 1 ms interval is running smoothly.

    I have no background, how should I configure the background cache?

  4. #4
    Join Date
    Feb 2011
    Location
    Bangalore
    Posts
    207
    Thanks
    20
    Thanked 27 Times in 26 Posts
    Qt products
    Qt4
    Platforms
    Unix/X11 Windows

    Default Re: Create a marquee with QGraphicsScene

    Have you tried using QGL:oubleBuffer?

  5. #5
    Join Date
    May 2007
    Posts
    5
    Qt products
    Qt4
    Platforms
    Unix/X11 Windows

    Default Re: Create a marquee with QGraphicsScene

    Yes, I did it.

    I also tried to do a simple animation with Qt Quick because some people tell me it's optimized for smooth transitions, but I get also a lot of "jumps" on the animation. Here is the code I used:

    Qt Code:
    1. import QtQuick 1.1
    2.  
    3. Rectangle {
    4. id: window
    5. width: 960
    6. height: 360
    7. color: "#000000"
    8.  
    9. states : State {
    10. name: "left"
    11. PropertyChanges { target: item1; x: -962 }
    12. }
    13.  
    14. MouseArea {
    15. id: mouseArea
    16. onClicked: if (window.state == '') window.state = "left"; else window.state = ''
    17. anchors.fill: parent
    18. anchors.margins: -5 // Make MouseArea bigger than the rectangle, itself
    19. }
    20.  
    21. transitions: Transition {
    22. NumberAnimation { properties: "x"; easing.type: Easing.Linear; duration: 4000 }
    23. }
    24.  
    25. Item {
    26. id: item1
    27. x: 0
    28. y: 274
    29. width: 1923
    30. height: 86
    31.  
    32. Item {
    33. id: pos1
    34. x: 0
    35. y: 0
    36. width: 960
    37. height: 86
    38. smooth: false
    39. clip: false
    40.  
    41. Rectangle {
    42. id: rectangle3
    43. x: 0
    44. y: 0
    45. width: 960
    46. height: 41
    47. color: "#424242"
    48. radius: 5
    49. Text {
    50. id: text3
    51. x: 0
    52. y: 0
    53. width: 791
    54. height: 41
    55. color: "#ffffff"
    56. text: qsTr("Some Text")
    57. font.pixelSize: 40
    58. font.family: "Helvetica"
    59. horizontalAlignment: Text.AlignHCenter
    60. verticalAlignment: Text.AlignVCenter
    61. }
    62. }
    63.  
    64. Rectangle {
    65. id: rectangle4
    66. x: 0
    67. y: 45
    68. width: 960
    69. height: 41
    70. color: "#424242"
    71. radius: 5
    72. Text {
    73. id: text4
    74. x: 0
    75. y: 0
    76. width: 791
    77. height: 41
    78. color: "#ffffff"
    79. text: qsTr("Some Text")
    80. font.family: "Helvetica"
    81. font.pixelSize: 40
    82. horizontalAlignment: Text.AlignHCenter
    83. verticalAlignment: Text.AlignVCenter
    84. }
    85. }
    86. }
    87.  
    88. Item {
    89. id: pos2
    90. x: 962
    91. y: 0
    92. width: 959
    93. height: 86
    94. clip: false
    95. smooth: false
    96.  
    97. Rectangle {
    98. id: rectangle7
    99. x: 0
    100. y: 0
    101. width: 960
    102. height: 41
    103. color: "#424242"
    104. radius: 5
    105. Text {
    106. id: text7
    107. x: 0
    108. y: 0
    109. width: 960
    110. height: 41
    111. color: "#ffffff"
    112. text: qsTr("Some other text")
    113. font.family: "Helvetica"
    114. font.pixelSize: 40
    115. horizontalAlignment: Text.AlignHCenter
    116. verticalAlignment: Text.AlignVCenter
    117. }
    118. }
    119.  
    120. Rectangle {
    121. id: rectangle8
    122. x: 0
    123. y: 45
    124. width: 960
    125. height: 41
    126. color: "#424242"
    127. radius: 5
    128. Text {
    129. id: text8
    130. x: 0
    131. y: 0
    132. width: 960
    133. height: 41
    134. color: "#ffffff"
    135. text: qsTr("Some other text")
    136. font.family: "Helvetica"
    137. font.pixelSize: 40
    138. horizontalAlignment: Text.AlignHCenter
    139. verticalAlignment: Text.AlignVCenter
    140. }
    141. }
    142. }
    143. }
    144. }
    To copy to clipboard, switch view to plain text mode 

Similar Threads

  1. Marquee QLabel
    By embitel in forum Qt-based Software
    Replies: 16
    Last Post: 4th June 2014, 08:50
  2. Qt in VS does not create an .exe
    By Nazgul in forum Installation and Deployment
    Replies: 7
    Last Post: 14th August 2012, 09:34
  3. Marquee selection for Qcheckboxes
    By hamid ghous in forum Qt Programming
    Replies: 3
    Last Post: 23rd February 2011, 13:12
  4. Marquee progress bar?
    By daviddoria in forum Newbie
    Replies: 2
    Last Post: 13th February 2010, 02:20
  5. Replies: 4
    Last Post: 1st May 2009, 11:00

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.