Qt Graphics View and Web View

[saifulkhan]

Dear All,

I have a C++ Qt desktop application. I this application there are lots of QGraphicsItem which are shown in QGraphicsView. Those items animate uses QPropertyAnimation and user can change the properties of animation.

Now I want to load this application in browser, so that multiple user can access the application remotely. Could you please give me some idea how can I do that with minimal code change or development?

Thank you very much.

[amleto]

you cant do it simply.

[saifulkhan]

Just wanted to write a working code. What I want is that I want to load this in web-browser. Please give me your suggestion how to do that. Any working solution or pointer to the materials would be great. Thanks

// main file: Creating scene, view and a circle item. Adding the circle to scene and calling the animation funstion.
 
    scene = new QGraphicsScene (this);
    ui->testView->setScene(scene);       // testView is object of QGraphicsView
 
    CircleItem *circle = new CircleItem ();
    scene->addItem(circle);
    circle->animate();
 
 
// CircleItem.h : Creating custom item which is basically a circle. 
 
class CircleItem : public QObject, public QGraphicsItem
{
    Q_OBJECT
    Q_PROPERTY (qreal scale READ scale WRITE setScale)
 
private:
    qreal _radius;
    qreal _scale;
    QPropertyAnimation *_anim;
 
public:
    CircleItem (QGraphicsItem *parent = 0);
    ~CircleItem ()
    {
    }
 
    QRectF boundingRect () const;
    void paint(QPainter *painter, const QStyleOptionGraphicsItem *option, QWidget *widget = 0);
 
    void animate ();
};
 
 
 
// CircleItem.cpp : The scale of the circle is being animated.
 
CircleItem::CircleItem (QGraphicsItem *parent)
{
    _radius = 5.0;
    _scale = 3.0;
}
 
QRectF CircleItem::boundingRect() const
{
    double rect = _radius * _scale;
    return QRectF (-rect, -rect, 2 * rect, 2 * rect);
}
 
 
void CircleItem::paint(QPainter *painter, const QStyleOptionGraphicsItem *option, QWidget *widget)
{
 
    QRectF rect ( -_radius, -_radius, 2 * _radius, 2 * _radius);
    painter->setRenderHint(QPainter::Antialiasing);
    painter->setPen (QPen (Qt::cyan, 2, Qt::SolidLine, Qt::RoundCap));
    painter->drawEllipse (rect);
 
}
 
// Repeatedly animating the scale.
 
void CircleItem::animate ()
{
    _anim = new QPropertyAnimation (this, "scale");
    _anim->setEasingCurve (QEasingCurve::Linear);
    _anim->setDuration (1000);
    _anim->setStartValue (0);
    _anim->setEndValue (_scale);
 
    _anim->setLoopCount (-1);
    _anim->start(QAbstractAnimation::DeleteWhenStopped);
}

// main file: Creating scene, view and a circle item. Adding the circle to scene and calling the animation funstion.

    scene = new QGraphicsScene (this);
    ui->testView->setScene(scene);       // testView is object of QGraphicsView
    
    CircleItem *circle = new CircleItem ();
    scene->addItem(circle);
    circle->animate();


// CircleItem.h : Creating custom item which is basically a circle. 

class CircleItem : public QObject, public QGraphicsItem
{
    Q_OBJECT
    Q_PROPERTY (qreal scale READ scale WRITE setScale)

private:
    qreal _radius;
    qreal _scale;
    QPropertyAnimation *_anim;

public:
    CircleItem (QGraphicsItem *parent = 0);
    ~CircleItem ()
    {
    }

    QRectF boundingRect () const;
    void paint(QPainter *painter, const QStyleOptionGraphicsItem *option, QWidget *widget = 0);

    void animate ();
};



// CircleItem.cpp : The scale of the circle is being animated.

CircleItem::CircleItem (QGraphicsItem *parent)
{
    _radius = 5.0;
    _scale = 3.0;
}

QRectF CircleItem::boundingRect() const
{
    double rect = _radius * _scale;
    return QRectF (-rect, -rect, 2 * rect, 2 * rect);
}


void CircleItem::paint(QPainter *painter, const QStyleOptionGraphicsItem *option, QWidget *widget)
{

    QRectF rect ( -_radius, -_radius, 2 * _radius, 2 * _radius);
    painter->setRenderHint(QPainter::Antialiasing);
    painter->setPen (QPen (Qt::cyan, 2, Qt::SolidLine, Qt::RoundCap));
    painter->drawEllipse (rect);

}

// Repeatedly animating the scale.

void CircleItem::animate ()
{
    _anim = new QPropertyAnimation (this, "scale");
    _anim->setEasingCurve (QEasingCurve::Linear);
    _anim->setDuration (1000);
    _anim->setStartValue (0);
    _anim->setEndValue (_scale);

    _anim->setLoopCount (-1);
    _anim->start(QAbstractAnimation::DeleteWhenStopped);
}

To copy to clipboard, switch view to plain text mode 

[wysota]

You need to implement a web browser plugin and deploy it (along with Qt) on every computer you want to be able to launch the program. Of course each browser instance will have its own instance of the program, completely unrelated to others.

[saifulkhan]

Is there any way in Qt to save the scene animation in a .png file?

[wysota]

Qt can only save a series of png files, you'll have to assemble MNG from them on your own.