[Solved] Sliding Bar Graph

ZapB

Hi,

For that sort of this I would be tempted to use QML. It's quite simple to get started with. Just look at some of the QML examples for inspiration.

Good luck!

bsbala

Thanks a lot ZapB.

I will start trying out in QML.

Best regards
Balaji

ZapB

Take a look at this "simple progress bar":http://developer.qt.nokia.com/wiki/Simple_QML_Progress_Bar QML item that I knocked together. It should get you going in the right direction.

Of course you may well want to improve the visual appearance using soem custom images for the border and the fill. You could also apply a ColorAnimation to vary the colour of the filled area according to value.

Give us a shout if you want any help on hooking the QML up to the C++ backend.

bsbala

Thanks ZapB.

I had a look into the simple progress bar QML. I will go ahead and see if I can add a different property to it.

I have another question:

I need to interface qt with the back end C application to obtain real time data using any of the process that you suggested(QProcess etc.,) above.
If I do it, is it possible to integrate Qt with the QML user interface and manipulate the properties of the objects(sliding bar graph) on the QML user interface?

Thanks for your assistance.

Apologies if I sound very naive.

Balaji

ZapB

Yes this is possible. Some tags to search for on QtDevNet are things like "qml c++ integration".

The basic principal is that you create a C++ class that inherits QObject and in this class you declare some properties using Q_DECLARE_PROPERTY macro. These properties represent the quantities that you wish to display in your QML gui. You then expose your C++ object(s) to the QDeclarativeConext object using the setContextProperty() function.

In you QML gui you can then bind properties of your QML items to the properties of your C++ object(s).

It is up to you how to factor your C++ object(s) and their properties to map onto your data.

This kind of design leads to a nice separation of concerns. You will have a component that retrieves the data from your existing C application somehow and populates the properties of your C++ QObject subclasses. Then you have your GUI in QML which is only dependent upon the names and types of object and properties exposed to it form the C++ side. So you can very easily swap out the GUI for a new one without touching the backend code if needed.

bsbala

ZapB
I will try it out and let you know. All of you r suggestions were very useful. Thanks for you valuable guidance.

Bsbala

bsbala

Hi,

I am still trying and I will let you know once I am done. It moving at a pretty slow rate :-)

Balaji

bsbala

Hi,

I tried your progress bar graph illustration it was working fine, when I used it with a single value change from the C++ program.

I am trying to change the graph value with the values from the external "C" program using Qprocess. I am not sure on how to proceed with the program structure. Can you please suggest me. Should the QProcess be a part of some class along with the QML?.

Thanks for your assistance.

Balaji

bsbala

ZapB,

I was able to connect the QML and was able to connect to the output of the C program(the program just outputs from 1 to 100) using QProcess. However the value from the standard output seems to be a stream and the toInt function does not recognize it and returns a value of '0' and the Graph displays with no fill.

Thanks a lot for providing your valuable assistance.
BsBala

This is the coding for the Qprocess.

@#include <QApplication>
#include <QDeclarativeView>
#include <QDeclarativeContext>
#include <QDeclarativeProperty>
#include <QGraphicsObject>
#include <QDebug>
#include<QObject>
#include<QProcess>

#include "processconnector.h"
#include "slidinggraph.h"

ProcessConnector::ProcessConnector(QObject *parent){
process = new QProcess(this);
process->setReadChannel(QProcess::StandardOutput);
connect(process, SIGNAL(readyReadStandardOutput()),this, SLOT(disp()));
process->start("./op");

}

void ProcessConnector::disp()
{
while( 1 ){
QString t = process->readLine();
if( t.isEmpty() ) break;
qDebug() << "got output" << t.toInt();
emit valueChanged(t.toInt());

}

}
@

This is the coding for the QML object.

@#include <QApplication>
#include <QDeclarativeView>
#include <QDeclarativeContext>
#include <QDeclarativeProperty>
#include <QGraphicsObject>
#include <QDebug>
#include<QObject>
#include<QProcess>
#include<slidinggraph.h>

SlidingGraph::SlidingGraph(QObject *parent){

view.setSource(QUrl::fromLocalFile("qml/QMLconnector/main.qml"));
QObject object = view.rootObject();
progressbar = object->findChild<QObject>("bar");
view.show();
}

void SlidingGraph::setvalue(int value){
if(progressbar)
progressbar->setProperty("value",value);

}
@

This is the main.cpp

@#include <QtGui/QApplication>
#include "qmlapplicationviewer.h"
#include "processconnector.h"
#include "slidinggraph.h"
#include <QObject>

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

ProcessConnector *Pc = new ProcessConnector();
SlidingGraph *sl = new SlidingGraph();
QObject::connect(Pc,SIGNAL(valueChanged(int)),sl,SLOT(setvalue(int)));
sl->view.show();
return app.exec&#40;&#41;;

}
@

bsbala

I was able to solve the problem. Zap B thanks for helping me out on this.

BSBALA

ZapB

Ah glad you got this sorted. Sorry I've not had time to look at it. Things have been a bit hectic here the last couple of weeks. What was the problem and solution in the end?

bsbala

Hi ZapB,

Nice to hear from you. Actually I had my friend code the C part which had some mistakes. He corrected it . I had good sliding graph. Thanks for your help.I got a good idea for working with QML. I have some other questions about QML multiple screens and how to make underlying Qt C++ layer to handle it. I will post it in a new thread. Please help me out if you find some time.

I appreciate all your help, guidance and time you have taken to reply my questions.

Balaji

ZapB

No worries. I'll keep an eye out for it but I'll be away on holidays next week. I'm sure somebody else will jump in to help you though.

bsbala

Thanks a lot ZapB.