File: tutorial-image-display-overlay.dox

package info (click to toggle)
visp 3.6.0-5
  • links: PTS, VCS
  • area: main
  • in suites: forky, sid, trixie
  • size: 119,296 kB
  • sloc: cpp: 500,914; ansic: 52,904; xml: 22,642; python: 7,365; java: 4,247; sh: 482; makefile: 237; objc: 145
file content (133 lines) | stat: -rw-r--r-- 6,183 bytes parent folder | download
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
/**
  \page tutorial-image-display-overlay Tutorial: How to display an image and basic drawings in a window
  \tableofcontents

\section display_overlay_intro Introduction

In this tutorial you will learn how to display basic drawings 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:

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

\section display_overlay_default Load and display an image

ViSP <a href="https://visp.inria.fr/gui/">gui module</a> provides Graphical User Interfaces capabilities. To this end you may use several optional third-party libraries which are: <a href="https://visp.inria.fr/3rdparty_gui/">X11, GDI, OpenCV, GTK, Direct3D</a>. In the next example, we will use the first 3rd party that is available from the previous list.

The following example also available in tutorial-viewer.cpp shows how to read and display an image.

\include tutorial-viewer.cpp

Once build, if you run the corresponding binary loading `monkey.png` image:
\code
$ cd $VISP_WS/visp-build/tutorial/image
$ ./tutorial-viewer monkey.png
\endcode

It will open a window containing `monkey.png` image:
\image html img-monkey.png

Here is the detailed explanation of the source, line by line :
\snippet tutorial-viewer.cpp Include display

Include all the headers for image viewers. The two first one are for Windows systems. They require that Direct 3D or the \e Graphical \e Device \e Interface (\e GDI) coming with the installation of Visual Studio are available. The third one needs GTK that is cross-platform. The fourth is for unix-like systems and requires that \e libX11 is available. The last one is also cross-platform and requires that OpenCV is available.

\snippet tutorial-viewer.cpp Include io
Include the header that allows to read/write PGM, PPM, PNG and JPEG images from the disk using vpImageIo class.

\snippet tutorial-viewer.cpp vpImage construction
Create an instance of a color image where each pixel is coded in RGBa.

\snippet tutorial-viewer.cpp vpImage reading
The image \c I is initialized by reading an image file from the disk. If the image format is not supported we throw an exception.

\snippet tutorial-viewer.cpp vpDisplay construction
Create an instance of an image display window for image \c I. The first viewer that is available is used. Here we create the link between the image \c I and the display \c d. Note that an image can only have one display.

\snippet tutorial-viewer.cpp vpDisplay set title
The title of the display is then set to \c "My image".

\snippet tutorial-viewer.cpp vpDisplay display
First we display the content of the image \c I, then we flush the display to render the image.

\snippet tutorial-viewer.cpp vpDisplay get click
Here we handle mouse events. We are waiting for a blocking mouse click to end the program.

\section display_overlay_draw Display basic drawings in window overlay

There are a lot of examples in ViSP that show how to display drawings in window overlay. There is testDisplays.cpp that gives an overview.

If you run the corresponding binary:
\code
$ cd $VISP_WS/visp-build/modules/gui
$ ./testDisplays
\endcode
it will open a window like the following:
\image html img-tutorial-display-drawings.png

\subsection display_overlay_point Display a point in overlay

As shown in tutorial-draw-point.cpp which source code is given below we use vpDisplay::displayPoint() function to draw a point in the overlay of a windows that displays a 3840 by 2160 grey image that has all the pixels set to 128 gray level.

\include tutorial-draw-point.cpp

Here we draw a point at the center of a grey image with red color and thickness 2.

\subsection display_overlay_line Display a line between 2 points in overlay

As given in tutorial-draw-line.cpp we use vpDisplay::displayLine() function to draw a line segment on the screen.

\snippet tutorial-draw-line.cpp Line

Here we draw a red coloured line segment with the specified initial and final coordinates and thickness 10.

\subsection display_overlay_circle Display a circle in overlay

As given in tutorial-image-display-scaled-auto.cpp we use vpDisplay::displayCircle() function to draw a circle on the screen.

\snippet tutorial-image-display-scaled-auto.cpp Circle

Here we draw a red coloured filled circle at the center with radius of 200.

\subsection display_overlay_rectangle Display a rectangle in overlay

As given in tutorial-draw-rectangle.cpp we use vpDisplay::displayRectangle() function to draw a rectangle on the screen.

\snippet tutorial-draw-rectangle.cpp Rectangle

Here we draw a red coloured filled rectangle with specified top-left coordinates and width and height.
\subsection display_overlay_cross Display a cross in overlay

As given in tutorial-draw-cross.cpp we use vpDisplay::displayCross() function to draw a rectangle on the screen.

\snippet tutorial-draw-cross.cpp Cross

Here we draw a red coloured cross on the center with speicfied size and thickness 2.

\subsection display_overlay_text Display text in window overlay

As given in tutorial-draw-text.cpp we use vpDisplay::displayText() function to add text in the window overlay.

\snippet tutorial-draw-text.cpp text

Here `Hello world` is displayed in the middle of the image.

\section display_overlay_export Export and save the content of a window as an image

As given in tutorial-export-image.cpp which source code is given below, we use vpDisplay::getImage() function to export the image with the whole drawings in overlay. Then we use vpImageIo::write() to save the image in png format.

\include tutorial-export-image.cpp

\section display_overlay_event_keyboard Handle keyboard events in a window

As given in tutorial-event-keyboard.cpp which code is given below, we use vpDisplay::getKeyboardEvent() function to get the value of the key pressed.

\include tutorial-event-keyboard.cpp

\section display_overlay_next Next tutorial

You are now ready to see how to continue with \ref tutorial-basic-drawings.

*/