Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. General and Desktop
  4. Real-Time Plotting several graphs, using qtquick
Forum Updated to NodeBB v4.3 + New Features

Real-Time Plotting several graphs, using qtquick

Scheduled Pinned Locked Moved Unsolved General and Desktop
2 Posts 1 Posters 296 Views
  • 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.
  • S Offline
    S Offline
    Sina Ranjkesh zade
    wrote on last edited by Sina Ranjkesh zade
    #1

    Hi,
    I'm using qtquick to plot several graphs. There is some buttons which can I select and switch between these graphs to see the result. Graphs are being updated. When the length of the graphs gets more, It takes time to see the result when I switch between them and the plots get dark. Here is my code:

    import QtQuick 2.0
    import QtCharts 2.3
    
    Item {
    
        id: root
        visible: true
        property int objectId: 0
    
        anchors.fill: parent
    
        property var upPoints
        property bool dataLoaded: false;
    
        property real distance
        property real minOfChart
        property real scaleFactor: (height/distance)
        property real offset: (height/distance)*(-minOfChart)
    
        property var listOfObjects: []
    
        Canvas {
            id: canvas
    
            anchors.fill: parent
    
            renderStrategy:Canvas.Threaded
            renderTarget:Canvas.FramebufferObject
            antialiasing: true
            smooth: true
            Rectangle {
                anchors.fill: parent
                color: "#656565"
                z:-1
            }
    
            onPaint: {
    
                if(dataLoaded == true)
                {
                    var ctxU = getContext("2d");
                    ctxU.reset();
    
                    var lines = getContext("2d");
    
                    ctxU.strokeStyle  = "#ffffff"
                    ctxU.lineWidth  = 2;
                    ctxU.translate(0,height)
                    ctxU.scale(1,-1);
    
                    ctxU.beginPath();
                    ctxU.moveTo(0,0);
    
                    for(var i=0;i<upPoints.length;i++)
                    {
                        ctxU.lineTo(upPoints[i].x,upPoints[i].y*scaleFactor+offset);
                    }
                    ctxU.stroke();
                }
    
            }
    
            Connections {
                target: back
    
                onSendVedioData: {
                    if(itemNumber == objectId )
                    {
    
                        upPoints = data.upList;
                        dataLoaded = true;
                        distance = max - min
                        minOfChart = min;
                        canvas.requestPaint();
                    }
                }
            }
    
    
        }
        function drawLines(contex)
        {
            contex.strokeStyle  = "#717171"
            contex.lineWidth  = 2;
            contex.beginPath();
            contex.moveTo(0,0);
            contex.lineTo(100,100);
            contex.stroke();
        }
    }
    
    

    You can watch a video in this link indicating the problem. As you can see, when I switch between "brightness" and "contrast", it gets dark.
    https://drive.google.com/file/d/1_8NoF9_EE6bf5UhOddvjHl9gDkOT6Fcu/view?usp=sharing
    Any help will be appreciated.

    S 1 Reply Last reply
    0
    • S Sina Ranjkesh zade

      Hi,
      I'm using qtquick to plot several graphs. There is some buttons which can I select and switch between these graphs to see the result. Graphs are being updated. When the length of the graphs gets more, It takes time to see the result when I switch between them and the plots get dark. Here is my code:

      import QtQuick 2.0
      import QtCharts 2.3
      
      Item {
      
          id: root
          visible: true
          property int objectId: 0
      
          anchors.fill: parent
      
          property var upPoints
          property bool dataLoaded: false;
      
          property real distance
          property real minOfChart
          property real scaleFactor: (height/distance)
          property real offset: (height/distance)*(-minOfChart)
      
          property var listOfObjects: []
      
          Canvas {
              id: canvas
      
              anchors.fill: parent
      
              renderStrategy:Canvas.Threaded
              renderTarget:Canvas.FramebufferObject
              antialiasing: true
              smooth: true
              Rectangle {
                  anchors.fill: parent
                  color: "#656565"
                  z:-1
              }
      
              onPaint: {
      
                  if(dataLoaded == true)
                  {
                      var ctxU = getContext("2d");
                      ctxU.reset();
      
                      var lines = getContext("2d");
      
                      ctxU.strokeStyle  = "#ffffff"
                      ctxU.lineWidth  = 2;
                      ctxU.translate(0,height)
                      ctxU.scale(1,-1);
      
                      ctxU.beginPath();
                      ctxU.moveTo(0,0);
      
                      for(var i=0;i<upPoints.length;i++)
                      {
                          ctxU.lineTo(upPoints[i].x,upPoints[i].y*scaleFactor+offset);
                      }
                      ctxU.stroke();
                  }
      
              }
      
              Connections {
                  target: back
      
                  onSendVedioData: {
                      if(itemNumber == objectId )
                      {
      
                          upPoints = data.upList;
                          dataLoaded = true;
                          distance = max - min
                          minOfChart = min;
                          canvas.requestPaint();
                      }
                  }
              }
      
      
          }
          function drawLines(contex)
          {
              contex.strokeStyle  = "#717171"
              contex.lineWidth  = 2;
              contex.beginPath();
              contex.moveTo(0,0);
              contex.lineTo(100,100);
              contex.stroke();
          }
      }
      
      

      You can watch a video in this link indicating the problem. As you can see, when I switch between "brightness" and "contrast", it gets dark.
      https://drive.google.com/file/d/1_8NoF9_EE6bf5UhOddvjHl9gDkOT6Fcu/view?usp=sharing
      Any help will be appreciated.

      S Offline
      S Offline
      Sina Ranjkesh zade
      wrote on last edited by
      #2

      @Sina-Ranjkesh-zade
      As I guess, It's because whenever I change the feature from brightness to cotrast or vice versa, It plots the diagram from the beginning and because of the increasing number of points, It gets time to plot the diagram, so it gets dark.
      If this guess is true, a solution is that I should save and load diagrams whenever I change the feature, but I don't know how can I do that?
      Does anyone know?
      Does anyone have better solution?
      Any help will be appreciated.

      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