Image Viewer Tutorial: Part 6

Adding Fullscreen Mode to Image Screen

To add the full screen mode to the image screen, the fullscreen mode must be switched on in the application window. A new method toggleFullScreen(), added to the IViewer class, will do it. The IViewer is the application window class.

    void IViewer::toggleFullScreen()
    {
        QString title = windowTitle();
        setWindowTitle( QLatin1String("_allow_on_top_"));
        setWindowState(windowState() ^ Qt::WindowFullScreen);
        setWindowTitle(title);
    }

This method toggles the fullscreen state, based on the window state flags. This method is called from the image screen. A fullscreen action must be added to our menu and connected to the onFullScreen() method.

    void ImageScreen::onFullScreen()
    {
        if (_viewer->isFullScreen()) {
            QSoftMenuBar::menuFor(this)->addAction(_showInfoAction);
        } else {
            QSoftMenuBar::menuFor(this)->removeAction(_showInfoAction);
        }
        _viewer->toggleFullScreen();
    }

The doBack() method currently comes back to the list screen. If it remains the same, pressing the back button during the fullscreen mode will come back to a list screen displayed in fullscreen mode. So the fullscreen must be disabled prior to showing the list screen: The method isFullScreen() can be used to check if the fullscreen is enabled. In that case, the method toggleFullScreen will disable the fullscreen. Then, the list screen is set as the current widget.

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

That's should do it.

Note: The application window is by default in maximized state.

Now, fullscreen mode can be enabled by choosing it in the menu. To disable fullscreen mode, the same action has to be selected from the menu, which is hidden by the fullscreen mode. It is not very user-friendly. So a shortcut will be provided to enable/disable the fullscreen mode. This shortcut should be the select key ( Qt::Key_Select ). In order to do that, the keyPressEvent method has to be modified so that it will handle the select key:

    void ImageScreen::keyPressEvent (QKeyEvent *event)
    {
        switch (event->key()) {
        case Qt::Key_Back:
            doBack();
            break;
        case Qt::Key_Select:
            onFullScreen();
            break;
        default:
            QWidget::keyPressEvent(event);
            break;
        }
    }

Now, the select key has to be known as the fullscreen shortcut. So the text in the menu bar should be modified by adding this line in the imagescreen constructor:

    ImageScreen::ImageScreen(IViewer *viewer)
    : QWidget(viewer), _viewer(viewer)
    {
        ...
        QSoftMenuBar::setLabel(this,Qt::Key_Select,"FullScreen","FullScreen");
        ...
    }

After that step, the image screen provides an easy way to switch between normal and fullscreen mode. But there is another problem to solve: If the fullscreen mode is enabled, image info can be asked to show. Since the fullscreen mode is always on top, the info screen will be displayed just below the fullscreen but will take the focus, so we won't be able to switch back to normal mode. The "show info" action must be removed from the options menu when the fullscreen mode is active.

File imagescreen.cpp

    void ImageScreen::onFullScreen()
    {
        if (_viewer->isFullScreen()) {
            QSoftMenuBar::menuFor(this)->addAction(_showInfoAction);
        } else {
            QSoftMenuBar::menuFor(this)->removeAction(_showInfoAction);
        }
        _viewer->toggleFullScreen();
    }

Prev|Top|Start Page|Next