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.1k 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.
  • Nikhilesh NN Nikhilesh N

    Hi, @Bhushan_Sure. You can use LineSeries inside a Chart View. If you want to mark the axes, ensure that you use Value Axes types to plot X and Y axes.

    Also, if you want an example to use a sine wave, you can refer to the 'Oscilloscope' example given in the documentation. There is an example program you can find in the Qt Creator Editor.

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

    @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 Nikhilesh NN 2 Replies Last reply
    0
    • 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 Offline
            J.HilkJ Offline
            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 Offline
                J.HilkJ Offline
                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