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. How to Draw a wave
Forum Updated to NodeBB v4.3 + New Features

How to Draw a wave

Scheduled Pinned Locked Moved Solved QML and Qt Quick
13 Posts 4 Posters 5.3k 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.
  • Bhushan_SureB Bhushan_Sure

    @Nikhilesh-NThank you very much, i will try this,
    But while running that example, it is showing following error:-

    #include <QtCore/QRandomGenerator>:- No such file and directory
    

    Do you know what is alternative header file for this ?

    Maaz MominM Offline
    Maaz MominM Offline
    Maaz Momin
    wrote on last edited by
    #4

    @Bhushan_Sure Which Qt version are you using? QRandomGenerator is available from 5.10 onwards.

    Bhushan_SureB 1 Reply Last reply
    3
    • Bhushan_SureB Bhushan_Sure

      @Nikhilesh-NThank you very much, i will try this,
      But while running that example, it is showing following error:-

      #include <QtCore/QRandomGenerator>:- No such file and directory
      

      Do you know what is alternative header file for this ?

      Nikhilesh NN Offline
      Nikhilesh NN Offline
      Nikhilesh N
      wrote on last edited by
      #5

      @Bhushan_Sure I guess you need not include QtCore in the header specification. I just used #include <QRandomGenerator>.

      1 Reply Last reply
      1
      • Maaz MominM Maaz Momin

        @Bhushan_Sure Which Qt version are you using? QRandomGenerator is available from 5.10 onwards.

        Bhushan_SureB Offline
        Bhushan_SureB Offline
        Bhushan_Sure
        wrote on last edited by
        #6

        @Maaz-Momin Thank you so much, I was using 5.9, Now i tried to run on 5.11 version and it is running.

        1 Reply Last reply
        0
        • Bhushan_SureB Bhushan_Sure

          Hi, I want to draw a wave like sin wave which we see in "ECG" basically, Can anybody suggest what can i use ?

          J.HilkJ Online
          J.HilkJ Online
          J.Hilk
          Moderators
          wrote on last edited by
          #7

          @Bhushan_Sure
          if you only want a sin wave, you don't really need the full QCharts module, a simple Canvas will do just fine:

          import QtQuick 2.9
          import QtQuick.Window 2.2
          
          Window {
              visible: true
              width: 640
              height: 480
              title: qsTr("SinWave")
          
          
              Timer{
                  repeat: true
                  interval: 25
                  running: true
                  onTriggered: {
                      canvas.frames ++;
                      canvas.requestPaint()
                  }
              }
          
              Canvas {
                  id:canvas
                  anchors.fill: parent
          
                  property int frames: 0
          
                  onPaint: {
                      var ctx = getContext("2d");
                      var cw = parent.width;
                      var ch = parent.height;
                      var cx = cw / 2,
                        cy = ch / 2;
                      var rad = Math.PI / 180;
                      var w = width;
                      var h = height ;
                      var amplitude = h;
                      var frequency = .01;
                      ctx.lineWidth = 4;
          
                      var phi = frames / 30;
          
                      ctx.clearRect(0, 0, cw, ch);
                      ctx.beginPath();
                      ctx.moveTo(0, ch);
                      for (var x = 0; x < w; x++) {
                          var y = Math.sin(x * frequency + phi) * amplitude / 2 + amplitude / 2;
                          ctx.lineTo(x, y );
                      }
                      ctx.stroke();
                  }
              }
          }
          
          

          0_1547456318606_e1982b8b-c803-4370-ba64-374f45cc1f3b-image.png


          Be aware of the Qt Code of Conduct, when posting : https://forum.qt.io/topic/113070/qt-code-of-conduct


          Q: What's that?
          A: It's blue light.
          Q: What does it do?
          A: It turns blue.

          Bhushan_SureB 1 Reply Last reply
          4
          • J.HilkJ J.Hilk

            @Bhushan_Sure
            if you only want a sin wave, you don't really need the full QCharts module, a simple Canvas will do just fine:

            import QtQuick 2.9
            import QtQuick.Window 2.2
            
            Window {
                visible: true
                width: 640
                height: 480
                title: qsTr("SinWave")
            
            
                Timer{
                    repeat: true
                    interval: 25
                    running: true
                    onTriggered: {
                        canvas.frames ++;
                        canvas.requestPaint()
                    }
                }
            
                Canvas {
                    id:canvas
                    anchors.fill: parent
            
                    property int frames: 0
            
                    onPaint: {
                        var ctx = getContext("2d");
                        var cw = parent.width;
                        var ch = parent.height;
                        var cx = cw / 2,
                          cy = ch / 2;
                        var rad = Math.PI / 180;
                        var w = width;
                        var h = height ;
                        var amplitude = h;
                        var frequency = .01;
                        ctx.lineWidth = 4;
            
                        var phi = frames / 30;
            
                        ctx.clearRect(0, 0, cw, ch);
                        ctx.beginPath();
                        ctx.moveTo(0, ch);
                        for (var x = 0; x < w; x++) {
                            var y = Math.sin(x * frequency + phi) * amplitude / 2 + amplitude / 2;
                            ctx.lineTo(x, y );
                        }
                        ctx.stroke();
                    }
                }
            }
            
            

            0_1547456318606_e1982b8b-c803-4370-ba64-374f45cc1f3b-image.png

            Bhushan_SureB Offline
            Bhushan_SureB Offline
            Bhushan_Sure
            wrote on last edited by
            #8

            @J.Hilk Hi, It should be realtime like taking values from backend and drawing sin waves, so for that i have to use Chart View ?

            J.HilkJ 1 Reply Last reply
            0
            • Bhushan_SureB Bhushan_Sure

              @J.Hilk Hi, It should be realtime like taking values from backend and drawing sin waves, so for that i have to use Chart View ?

              J.HilkJ Online
              J.HilkJ Online
              J.Hilk
              Moderators
              wrote on last edited by J.Hilk
              #9

              @Bhushan_Sure
              If you have data that is provided to your application, and you want to visualize that, than QtChats is properly the way to go.

              Your opening post only mentioned displaying a Sin-Wave, that can be done simply with pure qml/js, as it is small, not chaning static data that is drawn on the screen.


              Be aware of the Qt Code of Conduct, when posting : https://forum.qt.io/topic/113070/qt-code-of-conduct


              Q: What's that?
              A: It's blue light.
              Q: What does it do?
              A: It turns blue.

              Bhushan_SureB 1 Reply Last reply
              2
              • J.HilkJ J.Hilk

                @Bhushan_Sure
                If you have data that is provided to your application, and you want to visualize that, than QtChats is properly the way to go.

                Your opening post only mentioned displaying a Sin-Wave, that can be done simply with pure qml/js, as it is small, not chaning static data that is drawn on the screen.

                Bhushan_SureB Offline
                Bhushan_SureB Offline
                Bhushan_Sure
                wrote on last edited by
                #10

                @J.Hilk Thank you, I will try this :)

                1 Reply Last reply
                0
                • Bhushan_SureB Offline
                  Bhushan_SureB Offline
                  Bhushan_Sure
                  wrote on last edited by Bhushan_Sure
                  #11

                  @J-Hilk @Maaz-Momin @Nikhilesh-N
                  Hi, I solved this problem and updated the code, Now the code is generating waves like Ecg.
                  Meanwhile, I also tried for autoscaling the values after some time,The code is below:-

                  import QtQuick 2.9
                  import QtQuick.Window 2.3
                  import QtCharts 2.2
                  
                  Window
                  {
                      visible: true
                      width: 700
                      height: 500
                      title: qsTr("New Project")
                      property int a
                      property int b
                      property int c
                  
                      ChartView {
                          anchors.fill: parent
                          antialiasing: true
                          theme: ChartView.ChartThemeDark
                          animationOptions: ChartView.SeriesAnimations
                  
                          ValueAxis {
                              id: valueAxis
                              min: 0
                              max: 100
                              tickCount: 2
                          }
                  
                          ValueAxis {
                              id: valueAxi
                              min: -20
                              max: 20
                              tickCount: 3
                          }
                  
                          Timer
                          {
                              interval: 250; running: true; repeat: true
                              onTriggered:
                              {
                                  if(c<40)
                                  {
                                      b= Math.floor(Math.random()*(15-(-15)+1)+(-15));
                                      c=c+1
                                  }
                                  else
                                  {
                                      b= Math.floor(Math.random()*(35-(-35)+1)+(-35));
                                      console.log(b)
                                  }
                  
                                  if(c==40)
                                  {
                                      valueAxi.min=-40
                                      valueAxi.max=40
                                  }
                  
                                  l1.append(a,b)
                  
                                  if(a==100)
                                  {
                                      l1.clear()
                                      a=0
                                      c=0
                                  }
                                  else
                                  {
                                      a=a+1
                                  }
                              }
                  
                          }
                  
                          SplineSeries {
                              id:l1
                              name: "LineSeries"
                              axisX: valueAxis
                              axisY: valueAxi
                          }
                      }
                  }
                  
                  
                  1 Reply Last reply
                  1
                  • Nikhilesh NN Offline
                    Nikhilesh NN Offline
                    Nikhilesh N
                    wrote on last edited by
                    #12

                    @Bhushan_Sure Cool. Glad you found what you needed.

                    Bhushan_SureB 1 Reply Last reply
                    1
                    • Nikhilesh NN Nikhilesh N

                      @Bhushan_Sure Cool. Glad you found what you needed.

                      Bhushan_SureB Offline
                      Bhushan_SureB Offline
                      Bhushan_Sure
                      wrote on last edited by
                      #13

                      @Nikhilesh-N Thank you so much for your help :)

                      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