Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. QML and Qt Quick
  4. Qml circular bar gauge
Forum Updated to NodeBB v4.3 + New Features

Qml circular bar gauge

Scheduled Pinned Locked Moved Unsolved QML and Qt Quick
4 Posts 4 Posters 580 Views 2 Watching
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • T Offline
    T Offline
    timll
    wrote on last edited by
    #1

    Im new to qml and would like to create a circular gauge with a bar instead of a needle. Now I’m not sure on how to continue onwards, I’ve tried to use a shader but that didn’t work out and I can’t seem to modify the needle to create the behaviour also. Here is a picture of what I’m trying to recreate. DCCB433D-EF19-40CD-9E72-B97547BB3B82.jpeg

    raven-worxR 1 Reply Last reply
    0
    • fcarneyF Offline
      fcarneyF Offline
      fcarney
      wrote on last edited by
      #2

      Draw a PathArc using Path (I think).
      https://doc.qt.io/qt-5/qml-qtquick-patharc.html

      C++ is a perfectly valid school of magic.

      1 Reply Last reply
      0
      • T timll

        Im new to qml and would like to create a circular gauge with a bar instead of a needle. Now I’m not sure on how to continue onwards, I’ve tried to use a shader but that didn’t work out and I can’t seem to modify the needle to create the behaviour also. Here is a picture of what I’m trying to recreate. DCCB433D-EF19-40CD-9E72-B97547BB3B82.jpeg

        raven-worxR Offline
        raven-worxR Offline
        raven-worx
        Moderators
        wrote on last edited by
        #3

        @timll
        QtQuickControls1 has such an component (customizeable a bit).

        The QtQuick2 approach would be to use Canvas element and draw it yourself. There are several gauge examples (for HTML canvas) on the web. The HTML canvas API is the same and can be used here in the QML Canvas element.

        --- SUPPORT REQUESTS VIA CHAT WILL BE IGNORED ---
        If you have a question please use the forum so others can benefit from the solution in the future

        1 Reply Last reply
        0
        • ndiasN Offline
          ndiasN Offline
          ndias
          wrote on last edited by
          #4

          Hi @timll,

          Maybe you're looking for ArcItem component whit FlatCap style: https://doc.qt.io/qtdesignstudio/qml-qtquick-studio-components-arc.html

          1 Reply Last reply
          0

          • Login

          • Login or register to search.
          • First post
            Last post
          0
          • Categories
          • Recent
          • Tags
          • Popular
          • Users
          • Groups
          • Search
          • Get Qt Extensions
          • Unsolved