How to connect qml slider into a button using cpp method ?



  • Hi,

    I am developing a application where i am using qml for design part and calling the cpp for performing functions, I had kept a slider and i kept two buttons in qml design..say(Start and Stop).In the cpp file i have to write the codings for those two buttons, when start button is clicked,the slider must start moving and stop button is clicked it should be stopped. I have read an article on this "link":http://doc.qt.nokia.com/4.7-snapshot/qtbinding.html but could not find anything relevant on this.

    Could some one help me out in sorting this issue will be very much helpful!!!!



  • Well...
    QML can trigger slots in QObject, and you can do property binding to properties in QObjects. That sounds like all you need.

    Easiest I think is to create a QObject that will be your interface to the relevant C++ code, and give it a start and a stop slot, and a value property to connect to the slider. Then, you can expose that object to your QML scene using [[doc:QDeclarativeContext]]s setContextProperty method. That will make the object available in your QML scene.



  • Hi Andre,

    I have done this declaring QObject, and also QDeclarativecontext .. but the thing is whether i need to have a slot for connecting qml and cpp???



  • Well, a slot or a Q_INVOKABLE method on your QObject would be needed, yes.



  • This is my code:
    main.qml
    @Button{
    id: start
    x: 0
    y: 484
    width: 93
    height: 50
    text: "Start"
    anchors.bottomMargin: 210
    anchors.leftMargin: 0
    onClicked: {
    AudioBuffer.start();

               }
    

    Button{
    id: stop
    x: 0
    y: 484
    width: 93
    height: 50
    text: "stop"
    anchors.bottomMargin: 210
    anchors.leftMargin: 0
    onClicked: {
    AudioBuffer.stop();

               }
    

    Slider {
    id: slider
    x: 0
    y: 431
    width: 360
    height: 51
    orientation: 1
    stepSize: 1
    maximumValue: 30
    minimumValue: 15
    valueIndicatorVisible: true
    }
    @

    main.cpp
    @#include <QtGui/QApplication>
    #include "qmlapplicationviewer.h"
    #include "AudioBuffer.h"
    #include <QDeclarativeContext>

    int main(int argc, char *argv[])
    {
    QApplication app(argc, argv);

    QmlApplicationViewer viewer;
    viewer.setOrientation(QmlApplicationViewer::ScreenOrientationAuto);
    viewer.setMainQmlFile&#40;QLatin1String("qml/au/main.qml"&#41;&#41;;
    
    QDeclarativeContext *context = viewer.rootContext();
    AudioBuffer myclass;
    context->setContextProperty("AudioBuffer", &myclass);
    
    viewer.showExpanded();
    return app.exec&#40;&#41;;
    

    }@

    AudioBuffer.cpp
    @
    void AudioBuffer::start()
    {
    ????? // here i want the slider to start
    }

    void AudioBuffer::stop()
    {
    ??? // i want to stop here
    }@



  • Where is the header of AudioBuffer?

    Edit: Note that the implementation of what should actually happen if you start or stop is up to you. There is no way for us to know what to fill in at the question marks...



  • AudioBuffer.H

    @#ifndef AUDIOBUFFER_H
    #define AUDIOBUFFER_H

    #include <QObject>

    class AudioBuffer : public QObject
    {
    Q_OBJECT

    public:
    AudioBuffer();
    ~AudioBuffer();

    public slots:
    void stop();
    void start();

    };

    #endif // AUDIOBUFFER_H
    @



  • Hi Andre,

    I need to start and stop the slider using those two buttons. Where i am not able to link the slider to cpp functions to buttons. I am not having a idea to start ???
    I am not able to link slider values to the functions in cpp!!!
    Whether is there any possibility???
    Please help in finding out!!!



  • OK, the header looks good, though it does not expose a property for the slider yet. It might look like this:

    @
    #ifndef AUDIOBUFFER_H
    #define AUDIOBUFFER_H

    #include <QObject>
     
    class AudioBuffer : public QObject
    {
        Q_OBJECT
        Q_PROPERTY (double sliderValue READ sliderValue WRITE setSliderValue NOTIFY sliderValueChanged)
     
    public:
         AudioBuffer();
        ~AudioBuffer();
        inline double sliderValue() const {return m_sliderValue;}
    
    signals:
        void sliderValueChanged(double newValue);
    
    public slots:
        void stop();
        void start();
        void setSliderValue(double);
    
    private:
        double m_sliderValue;  
    };
     
    #endif // AUDIOBUFFER_H
    

    @

    In your implementation, you would add

    @
    void AudioBuffer::setSliderValue(double value) {
    if (value == m_sliderValue)
    return;

    m_sliderValue = value;
    emit sliderValueChanged(m_sliderValue);
    

    }
    @

    Now, you can connect your slider to the AudioBuffer like so:
    @
    Slider {
    id: slider
    x: 0
    y: 431
    width: 360
    height: 51
    orientation: 1
    stepSize: 1
    maximumValue: 30
    minimumValue: 15
    valueIndicatorVisible: true
    value: AudioBuffer.sliderValue
    }
    @

    Your start method will have to trigger some code that will update the slider value by calling setSliderValue to a new value. That is up to you to do though.



  • Hi Andre,

      Thanks a lot for your solution!!!!! I will make sure this works fine or not in sometime...


  • Hi Andre,
    I too tried to connect the slider using your code but i am not able to get the solution.

    As i am new to QML i dont what will be the coding to start and stop the slider.

    Could you please help me?

    Here is my code which i have tried from your code:

    @
    #include"audiobuffer.h"

    void AudioBuffer::start()
    {
    if(sliderValue() == m_sliderValue)
    {
    emit sliderValue();
    }
    }

    void AudioBuffer::stop()
    {
    if(sliderValue() != m_sliderValue)
    {
    emit sliderValue();
    }

    }

    void AudioBuffer::setSliderValue(double value)
    {
    if (value == m_sliderValue)
    return;

    m_sliderValue = value;
    emit sliderValueChanged(m_sliderValue);
    

    }

    @

    I was wrong somewhere and could you please tell me what is the mistake???



  • I would assume that start and stop actually do something, right? What are they supposed to do exactly? The code you have for the start and stop at the moment is useless, and wrong as well. The idea is that whatever process you start or stop will use setSetValue to communicate (I assume) progress.



  • Hi Andre,

             When i press the button start,the slider should start moving.. when i press the stop button the slider should stop.. This is what those two buttons should do!!!! I am unfamiliar with that so can you please help me!!!! 


  • Using exclamation points will not make your point more clear. They just look like screaming in text, and as you know, screaming is not a polite way of communicating...

    If you want to make the sliders move, I suggest you use a timer or perhaps use a QPropertyAnimation in the AudioBuffer object. However, if making the slider much as such is all you want to achieve, there is no need for going through C++ at all. QML has all the animation tools you need.

    I was under the impression that the slider should reflect some kind of progress for some more complicated process, like playing an audio file. In that case, the slider value would be manipulated by the actual progress of that process, not by some random animation.



  • Hi Andre,
    Actually i am trying to record,stop and play an audio file.What i am expecting is:when i click on the record button the slider should start moving showing the time duration and when i click on the stop button the slider should stop as required.

    This is my code and what i had tried so far:

    main.qml:
    @
    import QtQuick 1.0
    import com.nokia.symbian 1.0
    import Qt 4.7

    Page {
    id: mainPage

    Button{
    id: rec
    x: 0
    y: 440
    width: 93
    height: 50
    text: "Record"
    anchors.bottomMargin: 210
    anchors.leftMargin: 0
    onClicked: {

                  StringHelper.record();
    

    }

    }
    Button{
    id: b
    x: 98
    y: 440
    width: 86
    height: 50
    text: "Pause"
    anchors.bottomMargin: 210
    anchors.leftMargin: 0
    onClicked: {
    StringHelper.pause();

                            }
    

    }

    Button{
    id: stp
    x: 188
    y: 440
    width: 82
    height: 50
    text: "Stop"
    anchors.bottomMargin: 210
    anchors.leftMargin: 30
    onClicked: {
    StringHelper.stop()
    }
    }

    Button{
    id: ply
    x: 272
    y: 440
    width: 89
    height: 50

                     text: "Play"
                     anchors.bottomMargin: 210
                     anchors.leftMargin: 25
    

    onClicked: {
    StringHelper.play()
    }
    }

    Button{
    id: exit
    x: 295
    y: 22
    text: "Exit"
    MouseArea {id: mouseArea6;
    anchors.fill: parent
    onClicked: {Qt.quit();
    }
    }
    }

    TextEdit {
    id: text
    x: 82
    y: 22
    width: 142
    height: 30
    color: "#1339f5"
    text: qsTr("Voice Recorder")
    font.family: "Times New Roman"
    textFormat: TextEdit.RichText
    font.pixelSize: 30
    }

    Image {
    id: image
    x: 0
    y: 115
    width: 360
    height: 306
    source: "img.jpg"
    }

    Slider {
    id: slider
    x: 0
    y: 57
    width: 360
    height: 59
    orientation: 1
    stepSize: 1
    minimumValue: 0
    maximumValue: 30
    valueIndicatorVisible: true
    value: StringHelper.sliderValue

    }
    }
    @

    stringhelper.h:
    @
    #include <QObject>
    #include <QAudioCaptureSource>
    #include <QMediaRecorder>

    class StringHelper : public QObject
    {
    Q_OBJECT

     Q_PROPERTY (double sliderValue READ sliderValue WRITE setSliderValue NOTIFY sliderValueChanged)
    

    public:
    StringHelper();
    ~StringHelper();
    inline double sliderValue() const {return m_sliderValue;}

    public slots:
    void stop();
    void play();
    void record();
    QUrl generateAudioFilePath();
    void pause();
    void setSliderValue(double);

    signals:
    void sliderValueChanged(double newValue);

    private:
    QAudioCaptureSource *audioSource;
    QMediaRecorder *capture;
    bool active;
    double m_sliderValue;

    };

    #endif // STRINGHELPER_H
    @

    stringhelper.cpp:

    @
    #include "stringhelper.h
    #include<QSlider>
    #include<QMediaPlayer>
    #include<QDir>

    StringHelper::StringHelper()
    {
    audioSource = new QAudioCaptureSource();
    capture = new QMediaRecorder(audioSource);

    QAudioEncoderSettings es;
    es.setCodec("audio/mp3");
    es.setSampleRate(96000);
    capture->setEncodingSettings(es);
    capture->setOutputLocation(generateAudioFilePath());
    
    
    active = false;
    

    }

    StringHelper::~StringHelper()
    {
    delete audioSource;
    delete capture;
    }

    void StringHelper::record()
    {
    capture->record();
    active = true;

    }

    void StringHelper::stop()
    {

     capture->stop();
     active = false;
    

    setSliderValue(30);(from this code i was able to move the slider and recording is done but i am in need to move the slider by 1 as recording is done in minutes....?????????:(
    }
    void StringHelper::pause()
    {
    capture->pause();
    }

    void StringHelper::play()
    {
    QMediaPlayer *player = new QMediaPlayer;
    QUrl url = QUrl::fromLocalFile("myvoice");
    player->setMedia(url);
    player->setVolume(100);
    player->play();

    }
    void StringHelper::setSliderValue(double value)
    {
    if (value == m_sliderValue)
    return;

    m_sliderValue = value;
    emit sliderValueChanged(m_sliderValue);
    

    }

    QUrl StringHelper::generateAudioFilePath()
    {
    QDir outputDir(QDir::rootPath());
    int lastImage = 0;
    int fileCount = 0;
    foreach(QString fileName, outputDir.entryList(QStringList() << "myvoice_*")) {
    int imgNumber = fileName.mid(5, fileName.size() - 9).toInt();
    lastImage = qMax(lastImage, imgNumber);
    if (outputDir.exists(fileName))
    fileCount += 1;
    }
    lastImage += fileCount;
    QUrl location(QDir::toNativeSeparators(outputDir.canonicalPath() + QString("/myvoice_%1").arg(lastImage + 1, 4, 10, QLatin1Char('0'))));
    return location;

    }
    @

    main.cpp:

    @
    #include <QtGui/QApplication>
    #include <QDeclarativeContext>
    #include "qmlapplicationviewer.h"
    #include "stringhelper.h"

    int main(int argc, char *argv[])
    {
    QApplication app(argc, argv);

    QmlApplicationViewer viewer;
    viewer.setOrientation(QmlApplicationViewer::ScreenOrientationAuto);
    viewer.setMainQmlFile&#40;QLatin1String("qml/Audio/main.qml"&#41;&#41;;
    
    
    QDeclarativeContext *context = viewer.rootContext(&#41;;
    StringHelper myclass;
    context->setContextProperty("StringHelper", &myclass);
    
    viewer.showExpanded();
    return app.exec(&#41;;
    

    }
    @

    I have no idea how to link the slider to the button.Could you help me in finding the solution??

    Regards,
    Harish.



  • I don't know much about audio recording. I have never used it. However, a quick inspection of the QMediaRecorder class shows a durationChanged(quint64) signal. It seems like what you need to drive your slider?



  • Yes Andre i need to move the slider when clicked on record,pause when clicked on pause button and slider should stop when clicked on stop button



  • I have given you a lot of hints already. You have a property to change in your exposed C++ object, and you have a signal in your multi media object. So... perhaps you should create a slot to connect to that multi media objects signal to change the related property? Just give it a try, I am not going to hold your hand every baby step of the way.



  • Ya andre i had done with this.....
    Thank you for your guidance...

    Thanks a lot :)


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.