Results 1 to 4 of 4

Thread: How to create a custom circular gauge?

  1. #1
    Join Date
    Mar 2011
    Location
    Coimbatore,TamilNadu,India
    Posts
    382
    Thanks
    10
    Thanked 13 Times in 12 Posts
    Qt products
    Qt3 Qt4 Qt/Embedded
    Platforms
    MacOS X Unix/X11 Windows

    Default How to create a custom circular gauge?

    How to create a customized circular gauge. I am using QT Linux. It would be a multi color radial outside the gauge. IMG_20230719_121840.png

    . Outside bar colors can be dynamically changed depending upon the speed intervals.

  2. #2
    Join Date
    Jan 2008
    Location
    Alameda, CA, USA
    Posts
    5,239
    Thanks
    303
    Thanked 865 Times in 852 Posts
    Qt products
    Qt5
    Platforms
    Windows

    Default Re: How to create a custom circular gauge?

    Do you plan to do this as a custom QWidget or in QML / QtQuick?
    <=== 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
    Join Date
    Mar 2011
    Location
    Coimbatore,TamilNadu,India
    Posts
    382
    Thanks
    10
    Thanked 13 Times in 12 Posts
    Qt products
    Qt3 Qt4 Qt/Embedded
    Platforms
    MacOS X Unix/X11 Windows

    Default Re: How to create a custom circular gauge?

    Kindly suggest me on the same. Which one will be easily maintainable. Preferably QWidget.

  4. #4
    Join Date
    Jan 2008
    Location
    Alameda, CA, USA
    Posts
    5,239
    Thanks
    303
    Thanked 865 Times in 852 Posts
    Qt products
    Qt5
    Platforms
    Windows

    Default Re: How to create a custom circular gauge?

    I do not know anything about QML / QtQuick, so I cannot help with that. My understanding is that QML is most useful for small apps or displays on embedded devices, not so much for full desktop applications. If that is your target, then you should look at the examples for QML and QtQuick to see if you can learn from them.

    For your gauge, I would start by looking at the code for the Qt Analog Clock example That is already half-way to the GUI you want.

    For the color bar on the outside of the gauge, use QPainter::drawArc() with a gradient QBrush (See the "Detailed description" in the QBrush documentation). Use a QLinearGradient with as many color stops as you need to show the colors you want.

    When you draw the arc, use a QPen constructed with your gradient QBrush and the width you want for the color bar and at a radius that sits outside of the dial markings.

    Instead of drawing the dial yourself, you could also use a pixmap background if you can find an image of a dial you like.

    The code to do this is not hard. Follow the Analog Clock example and make the needed substitutions.

    If this is too much work, look at Qwt and some of the custom widgets it offers.
    <=== 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. Gauge does not display resized
    By MarkoSan in forum Qt Quick
    Replies: 3
    Last Post: 18th January 2015, 08:43
  2. Dial Gauge
    By jeff28 in forum Newbie
    Replies: 1
    Last Post: 22nd August 2012, 23:35
  3. how to create circular dialog
    By Askar in forum Qt Programming
    Replies: 1
    Last Post: 24th April 2012, 17:34
  4. How to create a custom keyboard
    By handle0088 in forum Qt Quick
    Replies: 1
    Last Post: 23rd March 2011, 15:44
  5. Create Custom build specification for Qt 4.7 for my custom SDK
    By danics in forum Qt for Embedded and Mobile
    Replies: 0
    Last Post: 19th October 2010, 15:23

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.