Introduction

Note: We assume in this tutorial that you have successfully build your first project using ViSP as 3rd party as explained in one of the Getting started tutorials.

In this tutorial you will learn how to display images with ViSP either on Unix-like systems (including OSX, Fedora, Ubuntu, Debian, ...) or on Windows.

Note that all the material (source code and images) described in this tutorial is part of ViSP source code and could be downloaded using the following command:

$ svn export https://github.com/lagadic/visp.git/trunk/tutorial/image

How to display an image

ViSP gui module provides Graphical User Interfaces capabilities. This module may use several optional third-party libraries which are: OpenCV, X11, GTK, GDI, Direct3D. We recommend to use X11 on unix-like systems thanks to vpDisplayX class and GDI on Windows thanks to vpDisplayGDI.

The following example also available in tutorial-image-display.cpp shows how to create a gray level 3840x2160 image with all the pixels set to 128, and display a red circle with 200 pixel radius in the middle of the image.

#include <visp3/gui/vpDisplayGDI.h>
#include <visp3/gui/vpDisplayX.h>
int main()
{
  vpImage<unsigned char> I(2160, 3840, 128);
  try {
#if defined(VISP_HAVE_X11)
    vpDisplayX d(I);
#elif defined(VISP_HAVE_GDI)
    vpDisplayGDI d(I);
#endif
    vpDisplay::setTitle(I, "My image");
    vpDisplay::display(I);
    vpDisplay::displayCircle(I, I.getHeight() / 2, I.getWidth() / 2, 200, vpColor::red, true);
    vpDisplay::flush(I);
    std::cout << "A click to quit..." << std::endl;
    vpDisplay::getClick(I);
  } catch (const vpException &e) {
    std::cout << "Catch an exception: " << e.getMessage() << std::endl;
  }
}

Depending on your screen resolution you may just see a part of the image, and certainly not the full red circle.

How to display an image that is larger than the screen resolution

Setting a manual down scaling factor

This other example available in tutorial-image-display-scaled-manu.cpp shows how to modify the previous example in order to introduce a down scaling factor to reduce the size of the display by 5 along the lines and the columns. This feature may be useful to display images that are larger than the screen resolution.

To down scale the display size, just modify the previous example adding the vpDisplay::vpScaleType parameter to the constructor.

#if defined(VISP_HAVE_X11)
    vpDisplayX d(I, vpDisplay::SCALE_5);
#elif defined(VISP_HAVE_GDI)
    vpDisplayGDI d(I, vpDisplay::SCALE_5);
#endif

It is also possible to do the same using the default constructor:

#if defined(VISP_HAVE_X11)
  vpDisplayX d;
#elif defined(VISP_HAVE_GDI)
  vpDisplayGDI d;
#endif
  d.setDownScalingFactor(vpDisplay::SCALE_5);
  d.init(I);
}

Setting an auto down scaling factor

This other example available in tutorial-image-display-scaled-auto.cpp shows now how to modify the previous example in order to introduce an auto down scaling factor that is automatically computed from the screen resolution in order that two images could be displayed given the screen resolution.

To consider an auto down scaling factor, modify the previous example adding the vpDisplay::SCALE_AUTO parameter to the constructor.

#if defined(VISP_HAVE_X11)
    vpDisplayX d(I, vpDisplay::SCALE_AUTO);
#elif defined(VISP_HAVE_GDI)
    vpDisplayGDI d(I, vpDisplay::SCALE_AUTO);
#endif