Image Viewer Tutorial: Part 3

Setup the Image Screen

In order to set up the image screen, a similar pattern as for the first screen is used. Instead of deriving from a QListWidget, the Image Screen derives from a QWidget for displaying the image.

File: imagescreen.h

    #ifndef IMAGESCREEN_H
    #define IMAGESCREEN_H

    #include <QWidget>
    #include <QKeyEvent>
    #include <QContent>
    #include <QImage>

    class IViewer;
    class QSlider;

    class ImageScreen : public QWidget
    {
        Q_OBJECT
    public:
        ImageScreen(IViewer *viewer);
        void setImage(const QContent &content);
    private:
        void createActions();
        void createMenu();
    protected:
        void keyPressEvent (QKeyEvent *event);
    private:
        IViewer *_viewer;
        QContent _content;
    };

    #endif

The skeleton to create actions, menu methods and to receive key events has already been added. As a parent, the IViewer class is passed. A reference to IViewer is also held in the _viewer field.

The setImage() method will be used to set the image file path to this widget.

File:imagescreen.cpp

    #include "imagescreen.h"
    #include "iviewer.h"
    ImageScreen::ImageScreen(IViewer *viewer)
    : QWidget(viewer), _viewer(viewer)
    {
        createActions();
        createMenu();

        QSoftMenuBar::setLabel(this,Qt::Key_Select,"FullScreen","FullScreen");
    }

    void ImageScreen::keyPressEvent (QKeyEvent *event)
    {
        switch (event->key()) {
        default:
            QWidget::keyPressEvent(event);
            break;
        }
    }

The screen has to be added to our QStackedWidget to be able to switch between the screens. This screen will also get lazily created. For that purpose, a imageScreen() method is added to the IViewer class.

    ImageScreen* IViewer::imageScreen()
    {
        if (!_imageScreen) {
            _imageScreen = new ImageScreen(this);
            addWidget(_imageScreen);
        }
        return _imageScreen;
    }

The _imageScreen needs to be initialized with 0 in the IViewer constructor. Before giving it a run, a way to go back to the list screen from the image screen is needed. The Qt::Key_Back key will be used to come back to the list screen.

The doBack() method is added in that purpose:

    void ImageScreen::doBack()
    {
        _viewer->setCurrentWidget((QWidget*)_viewer->listScreen());
    }

Here, there is a new dependency to the list screen and the list screen header file has to be included. To react to the key, the keyPressEvent() method is modified to add this case:

        case Qt::Key_Back:
            doBack();
            break;

Now the image screen is ready for a first run. it just needs to be called from the list screen. The ListScreen openImage() method should be created to show the image screen. The content is retrieved from the content set and the content object contains a reference to the file path in the system. This file will be used to set it to the image screen. This is later used to load an image and paint it on the widget.

    void ListScreen::openImage(int row)
    {
        QContent c     = _cs->content(row);
        ImageScreen *s = _viewer->imageScreen();
        s->setImage(c);
        _viewer->setCurrentWidget(s);
    }

Finally the screen is shown by using the setCurrentWidget on the QStackedWidget.

Now its time to compile and launch the application. When an image is selected and the select key is pressed, a new screen should be opened, but nothing will be painted yet. The back key returns to the list screen.

Great! Well done.

    void ImageScreen::paintEvent(QPaintEvent* event)
    {
        _image = new QImage(_content.file());

        int x  = width()/2-_image->width()/2;
        int y  = height()/2-_image->height()/2;
        painter.drawImage(QPoint(x, y), *_image);
        painter.end();
    }

    void ImageScreen::createActions()
    {

        _rotateLeftAction = new QAction("Left", this);
        connect(_rotateLeftAction, SIGNAL(triggered()),
                this, SLOT(onRotateRight()));

        _rotateRightAction = new QAction("Right", this);
        connect(_rotateRightAction, SIGNAL(triggered()),
    }

    void ImageScreen::createMenu()
    {
        QMenu* menu = QSoftMenuBar::menuFor(this);

        QMenu* rotateMenu = menu->addMenu("Rotate");
        rotateMenu->addAction(_rotateLeftAction);
        rotateMenu->addAction(_rotateRightAction);

        QMenu* zoomMenu = menu->addMenu("Zoom");
    }

    void ImageScreen::onRotateLeft()
    {
        _rotation -= 90.0;
        update();
    }

    void ImageScreen::onRotateRight()
    {
        _rotation += 90.0;
        update();
    }

    void ImageScreen::paintEvent(QPaintEvent* event)
    {
        _image = new QImage(_content.file());

        int x  = width()/2-_image->width()/2;
        int y  = height()/2-_image->height()/2;
        int x2 = width()/2;
        int y2 = height()/2;

        QPointF c(x2, y2);
        QPainter painter(this);
        painter.translate(c);
        painter.rotate(_rotation);
        painter.translate(-c);
        painter.drawImage(QPoint(x, y), *_image);
        painter.end();
    }

    void ImageScreen::onZoomOut()
    {
        _zoom -= 0.5;
        update();
    }

    void ImageScreen::onZoomIn()
    {
        _zoom += 0.5;
        update();
    }

    void ImageScreen::paintEvent(QPaintEvent* event)
    {
        ...
        QPainter painter(this);
        painter.translate(c);
        painter.rotate(_rotation);
        painter.scale(_zoom, _zoom);
        painter.translate(-c);
        ...
    }