Results 1 to 5 of 5

Thread: Timebar Widget - What is the best approach to implement this in Qt?

  1. #1
    Join Date
    Nov 2012
    Posts
    22
    Thanks
    1

    Default Timebar Widget - What is the best approach to implement this in Qt?

    Hi everyone,

    I am in need of a Timebar widget and would like some advice on how to best implement this in Qt. To give you a better idea, I attached two rough drawings of the widget at two different zoom levels:
    drawing.jpg

    The widget should provide the following main features:
    - on top a basic timeline
    - timestamps shown at regular intervals
    - markers (and other things) that can be positioned and interacted with at various timepoints
    - scrolling horizontally
    - a zoom function (you can see in the picture that this should only increase the time-resolution and things like markers, timestamps etc are not changed in size)
    - timestamps (and other things) are shown/hidden dynamically based on the zoom level

    My first idea was to use a QGraphicsScene/-View for this, because those provide many of the elements I want.
    I wrote a quick prototype and ran into the problem that the large number of timestamps and vertical time-point bars quickly causes performance issues.
    Let's say I want to represent a timespan of only 1h up to miliseconds, that's already 3600000 timestamp objects that need to be shown/hidden based on the zoom level.
    How could this be implemented in a less performance hungry way?

    Thanks for any hints,
    xdn

  2. #2
    Join Date
    Jan 2009
    Location
    Germany
    Posts
    383
    Thanks
    99
    Thanked 14 Times in 14 Posts
    Qt products
    Qt4 Qt5
    Platforms
    Unix/X11 Windows

    Default Re: Timebar Widget - What is the best approach to implement this in Qt?

    I would start with a blank QWidget and manually implement all the custom drawing in the QPaintEvent and the handling in the QMouseEvents and QKeyboardEvents. It doesn't seem like an overly complex widget, so it wouldn't be so much work, but you do have specific requirements that are not delivered out of the box by existing components. Most of the drawing can be done by drawing lines here and there. You would get maximum performance by knowing exactly what and where to draw at a specific zoom level as opposed to the graphics view framework's generic methods of object selection. Drawing more than three million lines will take forever, no matter which method you use, but if you do it yourself, you can intelligently compute which lines you do need to draw and which ones you do not. For example, your screen can only show maybe 2000 pixels in the horizontal direction depending on your resolution. There is no point to ever draw more lines than that.

  3. #3
    Join Date
    Nov 2012
    Posts
    22
    Thanks
    1

    Default Re: Timebar Widget - What is the best approach to implement this in Qt?

    I see. Starting from scratch (as in QWidget) would certainly give me the greatest flexibility.
    I've never done much in the way of using paintEvents and I'm sure there are quite a few mistakes one can make to cripple drawing performance.
    Do you happen to know any good custom widget examples that I could look into to get me started?

  4. #4
    Join Date
    Jan 2009
    Location
    Germany
    Posts
    383
    Thanks
    99
    Thanked 14 Times in 14 Posts
    Qt products
    Qt4 Qt5
    Platforms
    Unix/X11 Windows

    Default Re: Timebar Widget - What is the best approach to implement this in Qt?

    Well, there is the Qt basic drawing example, but unfortunately it is anything but basic. It shows a lot of confusing things that you don't need for drawing, but it does not show the simplest possible use case: drawing a line. Here, I give you a simple example:

    Subclass QWidget:

    Qt Code:
    1. class YourWidget: public QWidget
    2. {
    3. Q_OBJECT
    4.  
    5. public:
    6. YourWidget(QWidget* parent=0);
    7. ~YourWidget();
    8.  
    9. protected:
    10. void paintEvent(QPaintEvent*);
    11. };
    To copy to clipboard, switch view to plain text mode 

    Implement paintEvent:

    Qt Code:
    1. void YourWidget::paintEvent(QPaintEvent *)
    2. {
    3. QPainter painter(this);
    4. painter.setPen(Qt::blue);
    5. painter.drawLine(0, 0, width(), height()); // draws a diagonal line across your widget
    6. painter.setFont(QFont("Arial", 30));
    7. painter.drawText(rect(), Qt::AlignCenter, "Your Widget"); // writes text onto your widget
    8. }
    To copy to clipboard, switch view to plain text mode 

    This should draw a diagonal line across your widget and writes some text onto it. You can construct your whole time line widget from lines and text. I can't imagine what you could possibly do so wrong that it entirely breaks performance. Once you have lines and text under control, you can study the
    QPainter documentation and proceed to more advanced drawing techniques. You can draw arcs and circles, rectangles, polygons, compound shapes, and use brushes and transparency for cool visuals. Happy studying.


    Added after 39 minutes:


    One more remark to your original question. When you learn how to draw lines, to do it fast means avoiding to draw unnecessary lines. For example, it does not make sense to draw three million lines on the millisecond resolution when you are showing a whole hour on your time line. Implement a zoom level based logic that decides when to draw down to the minute, second, or millisecond level. And as a more generic approach, you can determine if multiple vertical lines would be drawn on the same pixel. Say if you have 2000 pixels available in the horizontal direction, and you would want to draw three million lines onto them, then it is clear that many many lines would have to be drawn at the same horizontal coordinate. You can discard all but one of them and save yourself heaps of drawing time.
    Last edited by Cruz; 3rd November 2015 at 16:57.

  5. The following user says thank you to Cruz for this useful post:

    xdn (3rd November 2015)

  6. #5
    Join Date
    Jan 2006
    Location
    Graz, Austria
    Posts
    8,419
    Thanks
    37
    Thanked 1,546 Times in 1,496 Posts
    Qt products
    Qt3 Qt4 Qt5
    Platforms
    Unix/X11 Windows

    Default Re: Timebar Widget - What is the best approach to implement this in Qt?

    There is also QPainter::drawLines() which can be faster than multiple drawLine() calls.

    Cheers,
    _

Similar Threads

  1. QT implement for interacting Web Widget
    By ravikumar in forum Qt Programming
    Replies: 0
    Last Post: 22nd January 2012, 10:43
  2. Replies: 4
    Last Post: 11th April 2011, 10:56
  3. Reusing the same widget to implement "split-screen"
    By thomab in forum Qt Programming
    Replies: 3
    Last Post: 29th January 2011, 16:57
  4. Replies: 2
    Last Post: 19th February 2009, 20:37
  5. how to implement this widget
    By pencilren in forum Qt Programming
    Replies: 2
    Last Post: 15th June 2007, 12:10

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.