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 tickmark values of custom Gauge
Forum Updated to NodeBB v4.3 + New Features

qml tickmark values of custom Gauge

Scheduled Pinned Locked Moved Solved QML and Qt Quick
3 Posts 2 Posters 771 Views 1 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.
  • halimaH Offline
    halimaH Offline
    halima
    wrote on last edited by aha_1980
    #1

    I'am trying to use this code to display a custom Gauge but the tickmak values does not shown correctly!
    Thanks in advance
    main.qml

    import QtQuick 2.4
    import QtQuick.Extras 1.4
    import QtQuick.Layouts 1.0
    import QtQuick.Controls 1.4
    import QtQuick.Controls.Styles 1.4
    
    Rectangle {
        width: 50
        height: 300
        color: "transparent"
        property alias gauge: gauge_act_1
        Gauge {
            id: gauge_act_1
            minorTickmarkCount: 2
            font.pixelSize: 9
            anchors.centerIn: parent
            anchors.leftMargin: 2
            anchors.rightMargin: 2
    
            style: GaugeStyle {
    
                valueBar: Rectangle {
                    color: "#FF003399"
                    implicitWidth: 15
                }
            }
            objectName: "gauge_act_1"
        }
    }
    

    mainwindow.cpp

    #include "mainwindow.h"
    #include "ui_mainwindow.h"
    
    
    MainWindow::MainWindow(QWidget *parent) :
        QMainWindow(parent),
        ui(new Ui::MainWindow)
    {
        ui->setupUi(this);
        QQuickView *view = new QQuickView;
        view->setSource(QUrl("qrc:/main.qml"));
        view->setColor(QColor(Qt::white));
        view->setResizeMode(QQuickView::SizeRootObjectToView);
        QWidget *container = QWidget::createWindowContainer(view);
        container->setFocusPolicy(Qt::TabFocus);
        container->setMinimumSize(QSize(400,330));
        container->setSizePolicy(QSizePolicy::Expanding,QSizePolicy::Expanding);
    
        ui->horizontalLayout->addWidget(container);
    
        QObject *object = view->rootObject();
        QObject* item_1 = object->findChild<QObject *>("gauge_act_1");
        if(item_1)
            gauge_1 = item_1;
    
    
    
        QTimer *G_s_qt_controllerTimer = new QTimer;
        QObject::connect(G_s_qt_controllerTimer, SIGNAL( timeout()),this, SLOT(update()));
        G_s_qt_controllerTimer->start(100);
    }
    
    void MainWindow::update(){
    
        gauge_1->setProperty("maximumValue", 481.9);
        gauge_1->setProperty("minimumValue", 357.1);
        gauge_1->setProperty("value", 410.84);
    
    }
    MainWindow::~MainWindow()
    {
        delete ui;
    }
    
    void MainWindow::changeEvent(QEvent *e)
    {
        QMainWindow::changeEvent(e);
        switch (e->type()) {
        case QEvent::LanguageChange:
            ui->retranslateUi(this);
            break;
        default:
            break;
        }
    }
    

    0_1531228462991_755ec56e-c6c9-4f67-b3ea-35768bfaebc3-image.png

    1 Reply Last reply
    0
    • D Offline
      D Offline
      DavidM29
      wrote on last edited by DavidM29
      #2

      How about that ?

          Rectangle {
              width: 50
              height: 300
              anchors.centerIn: parent
              color: "transparent"
              property alias gauge: gauge_act_1
              Gauge {
                  id: gauge_act_1
                  minorTickmarkCount: 2
                  font.pixelSize: 9
                  anchors.centerIn: parent
                  anchors.leftMargin: 2
                  anchors.rightMargin: 2
                  maximumValue : 481.9
                  minimumValue: 357.1
                  formatValue: function(value) {
                      return value.toFixed(1);
                  }
                  value : 381.2
      
                  style: GaugeStyle {
      
                      valueBar: Rectangle {
                          color: "#FF003399"
                          implicitWidth: 15
                      }
                  }
                  objectName: "gauge_act_1"
              }
          }
      

      0_1531231016639_a4505b0d-2b0e-4d31-8690-7a5b005738f3-image.png

      The important part here is this which format your label with 1 decimal :

        formatValue: function(value) {
                      return value.toFixed(1);
                  }
      

      Here the related doc : formatValue

      1 Reply Last reply
      3
      • halimaH Offline
        halimaH Offline
        halima
        wrote on last edited by
        #3

        Thank you very much for your help, that works perfectly!!

        1 Reply Last reply
        1

        • Login

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