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

Naufal

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!!!!

andre

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.

Naufal

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???

andre

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

Naufal

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
}@

andre

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...

Naufal

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
@

Naufal

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!!!

andre

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.

Naufal

Hi Andre,

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

mkhpad

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???

andre

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.

mkhpad

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!!!!

andre

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.

mkhpad

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.

andre

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?

mkhpad

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

andre

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.

mkhpad

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

Thanks a lot :)