From cf2f777b6f81cfe990f6de06206dc4937ed89151 Mon Sep 17 00:00:00 2001 From: kallaballa Date: Mon, 25 Sep 2023 08:00:17 +0200 Subject: [PATCH] added documentation and a generated html to the new example --- modules/v4d/samples/display_image.cpp | 2 +- modules/v4d/samples/display_image_fb.cpp | 2 +- modules/v4d/samples/display_image_nvg.cpp | 33 ++- .../example_v4d_display_image_nvg.html | 210 ++++++++++++++++++ modules/v4d/samples/make_example_html.sh | 1 + .../v4d/tutorials/02-dislay_image_fb.markdown | 2 +- .../v4d/tutorials/03-vector_graphics.markdown | 2 +- .../tutorials/19-dislay_image_nvg.markdown | 16 ++ 8 files changed, 254 insertions(+), 14 deletions(-) create mode 100644 modules/v4d/samples/example_v4d_display_image_nvg.html create mode 100644 modules/v4d/tutorials/19-dislay_image_nvg.markdown diff --git a/modules/v4d/samples/display_image.cpp b/modules/v4d/samples/display_image.cpp index 48e6c04c4..f4dd97a04 100644 --- a/modules/v4d/samples/display_image.cpp +++ b/modules/v4d/samples/display_image.cpp @@ -8,7 +8,7 @@ int main() { //Creates a V4D window for on screen rendering with a window size of 720p and a framebuffer of the same size. //Please note that while the window size may change the framebuffer size may not. If you need multiple framebuffer //sizes you need multiple V4D objects - cv::Ptr window = V4D::make(960, 960, "Display Image", false, false, 0); + cv::Ptr window = V4D::make(960, 960, "Display an Image", false, false, 0); //Loads an image as a UMat (just in case we have hardware acceleration available) #ifdef __EMSCRIPTEN__ diff --git a/modules/v4d/samples/display_image_fb.cpp b/modules/v4d/samples/display_image_fb.cpp index acd8641e4..5bc4d90ed 100644 --- a/modules/v4d/samples/display_image_fb.cpp +++ b/modules/v4d/samples/display_image_fb.cpp @@ -6,7 +6,7 @@ using namespace cv::v4d; int main() { //Creates a V4D object - Ptr window = V4D::make(960, 960, "Display Image and FB", false, false, 0); + Ptr window = V4D::make(960, 960, "Display an Image through direct FB access", false, false, 0); //Loads an image as a UMat (just in case we have hardware acceleration available) #ifdef __EMSCRIPTEN__ diff --git a/modules/v4d/samples/display_image_nvg.cpp b/modules/v4d/samples/display_image_nvg.cpp index 3d2e2dd2c..238008dfc 100644 --- a/modules/v4d/samples/display_image_nvg.cpp +++ b/modules/v4d/samples/display_image_nvg.cpp @@ -4,37 +4,50 @@ using namespace cv; using namespace cv::v4d; +//A simple struct to hold our image variables struct Image_t { std::string filename_; - cv::v4d::nvg::Paint paint_; + nvg::Paint paint_; int w_; int h_; }; int main() { - cv::Ptr window = V4D::make(960, 960, "Display Image using NanoVG", false, false, 0); - + cv::Ptr window = V4D::make(960, 960, "Display an Image using NanoVG", false, false, 0); + Image_t image; + //Set the filename #ifdef __EMSCRIPTEN__ - string filename = "doc/lena.png"; + image.filename_ = "doc/lena.png"; #else - string filename = samples::findFile("lena.jpg"); + image.filename_ = samples::findFile("lena.jpg"); #endif - Image_t image; + //Creates a NanoVG context. The wrapped C-functions of NanoVG are available in the namespace cv::v4d::nvg; window->nvg([&image](const cv::Size sz) { using namespace cv::v4d::nvg; - int res = createImage(image.filename_.c_str(), NVG_IMAGE_NEAREST); - CV_Assert(res > 0); - imageSize(res, &image.w_, &image.h_); - image.paint_ = imagePattern(0, 0, image.w_, image.h_, 0.0f/180.0f*NVG_PI, res, 1.0); + //Create the image and receive a handle. + int handle = createImage(image.filename_.c_str(), NVG_IMAGE_NEAREST); + //Make sure it was created successfully + CV_Assert(handle > 0); + //Query the image size + imageSize(handle, &image.w_, &image.h_); + //Create a simple image pattern with the image dimensions + image.paint_ = imagePattern(0, 0, image.w_, image.h_, 0.0f/180.0f*NVG_PI, handle, 1.0); }); + //Create the run loop window->run([&image](Ptr win){ + //Creates a NanoVG context to draw the loaded image over again to the screen. win->nvg([&image](const cv::Size sz) { using namespace cv::v4d::nvg; beginPath(); + //Scale all further calls to window size scale(double(sz.width)/image.w_, double(sz.height)/image.h_); + //Create a rounded rectangle with the images dimensions. + //Note that actually this rectangle will have the size of the window + //because of the previous scale call. roundedRect(0,0, image.w_, image.h_, 50); + //Fill the rounded rectangle with our picture fillPaint(image.paint_); fill(); }); diff --git a/modules/v4d/samples/example_v4d_display_image_nvg.html b/modules/v4d/samples/example_v4d_display_image_nvg.html new file mode 100644 index 000000000..824fe8328 --- /dev/null +++ b/modules/v4d/samples/example_v4d_display_image_nvg.html @@ -0,0 +1,210 @@ + + + + Display an Image through NanoVG + + + + + + + + +
Downloading...
+
+ +
+ +
+ +
+ + + + + diff --git a/modules/v4d/samples/make_example_html.sh b/modules/v4d/samples/make_example_html.sh index 40c165b51..fc1713e7c 100755 --- a/modules/v4d/samples/make_example_html.sh +++ b/modules/v4d/samples/make_example_html.sh @@ -7,6 +7,7 @@ set -e ./example_v4d_nocapture.sh "Custom Source and Sink" custom_source_and_sink > example_v4d_custom_source_and_sink.html ./example_v4d_nocapture.sh "Display an Image through the FB Context" display_image_fb > example_v4d_display_image_fb.html ./example_v4d_nocapture.sh "Display an Image through the Video-Pipeline" display_image > example_v4d_display_image.html +./example_v4d_nocapture.sh "Display an Image through NanoVG" display_image_nvg > example_v4d_display_image_nvg.html ./example_v4d_nocapture.sh "Font Demo" font-demo > example_v4d_font-demo.html ./example_v4d_nocapture.sh "Font rendering with Form-based GUI" font_with_gui > example_v4d_font_with_gui.html ./example_v4d_nocapture.sh "Font rendering" font_rendering > example_v4d_font_rendering.html diff --git a/modules/v4d/tutorials/02-dislay_image_fb.markdown b/modules/v4d/tutorials/02-dislay_image_fb.markdown index 0221c5253..b41e891b4 100644 --- a/modules/v4d/tutorials/02-dislay_image_fb.markdown +++ b/modules/v4d/tutorials/02-dislay_image_fb.markdown @@ -1,7 +1,7 @@ # Display an image using direct framebuffer access {#v4d_display_image_fb} @prev_tutorial{v4d_display_image_pipeline} -@next_tutorial{v4d_vector_graphics} +@next_tutorial{v4d_display_image_nvg} | | | | -: | :- | diff --git a/modules/v4d/tutorials/03-vector_graphics.markdown b/modules/v4d/tutorials/03-vector_graphics.markdown index 46f316f8d..dec9d087d 100644 --- a/modules/v4d/tutorials/03-vector_graphics.markdown +++ b/modules/v4d/tutorials/03-vector_graphics.markdown @@ -1,6 +1,6 @@ # Render vector graphics {#v4d_vector_graphics} -@prev_tutorial{v4d_display_image_fb} +@prev_tutorial{v4d_display_image_nvg} @next_tutorial{v4d_vector_graphics_and_fb} | | | diff --git a/modules/v4d/tutorials/19-dislay_image_nvg.markdown b/modules/v4d/tutorials/19-dislay_image_nvg.markdown new file mode 100644 index 000000000..88272ec4f --- /dev/null +++ b/modules/v4d/tutorials/19-dislay_image_nvg.markdown @@ -0,0 +1,16 @@ +# Display an image using NanoVG {#v4d_display_image_nvg} + +@prev_tutorial{v4d_display_image_fb} +@next_tutorial{v4d_vector_graphics} + +| | | +| -: | :- | +| Original author | Amir Hassan (kallaballa) | +| Compatibility | OpenCV >= 4.7 | + +## Using NanoVG to display images +Instead of feeding to the video pipeline or doing a direct framebuffer access we can use NanoVG to display an image. It is not as convinient as the other methods but it is very fast and flexible. + +\htmlinclude "../samples/example_v4d_display_image_nvg.html" + +@include samples/display_image_nvg.cpp