dovyski / cvui Goto Github PK
View Code? Open in Web Editor NEWA (very) simple UI lib built on top of OpenCV drawing primitives
Home Page: https://dovyski.github.io/cvui/
License: MIT License
A (very) simple UI lib built on top of OpenCV drawing primitives
Home Page: https://dovyski.github.io/cvui/
License: MIT License
Your library is fantastic. However, I am an OpenCV 2.X user and I had to make modifications to your library for it to work.
All of these modifications were simple -- i.e. changing cv::LINE_AA to CV_AA, changing cv::FILLED to CV_FILLED, and so on. There is nothing in the library that has a hard OpenCV 3 dependency.
For that reason, would you consider adding OpenCV 2.X support out of the box for future development?
I think the UI produced by cvui would benefit from some animation sugar, e.g. blinks, small fades, marching ants line, etc. This is definitely not the core of the lib, but I'm opening this issue to collect feedback and keep the idea alive.
Below is a gif of something I envision being possible with this simple animation system:
Creating aesthetically appealing UI should not be a burden, should be a breeze.
Hi again Fernando,
Can you please look at the changes here :
https://github.com/Dovyski/cvui/compare/dev...pthom:api_improve?expand=1
Mainly, what I did is :
What do you think ?
All existing tests regarding cvui only check if it compiles using different versions of OpenCV. This is not enough. Tests should at least inform if a program using cvui compiles and runs successfully. PR 46 adds support for a headless version of cvui, which is perfect for creating tests.
Following the same logic of the examples, tests should be under the folder tests
in the root of the project. They should not depend on complex dependencies, e.g. a header only lib for testing would be ideal.
A contributing makes things easier for all developers involved in the project. Here is a good example of CONTRIBUTING file.
Ok first of all, i want to thanks so much for that usefull gui tool.
But i cant solve some simple things:
-i am making(trying) a small linux distro for my own with yocto-buildroot separately, this works on rpi3 or tinkerboard. which dependency - libs or OpenCV version i must to install for better untrouble usage ?
thanks ;)
Note: i dont want to use x.org-x11-kde-wayland or any other desktop environment. Just this with full screen with touch control. is it possible? (also i hate Qt :)
Hello,
Currently :
cvui::checkbox() returns a boolean value that indicates the current state of the checkbox: true if it is checked, or false otherwise.
It might be better if cvui::checkbox() returns true if checkbox has changed as for other elements (trackbar, button...). The status can be obtained by the pass boolean variable theState.
Thanks
Nice tool.
At the moment the code is using the secure _s()
version of some functions, e.g. sprintf_s
. It is a VS studio thing and will cause problems for Mac/Linux users.
Add the following to the lib header to make everybody happy.
#ifdef _MSC_VER
#define _CRT_SECURE_NO_WARNINGS
#endif
i see when i press button default close [x] ? i can't handle button, text ...
Please help ! Thank you !
Hello,
I recently discovered cvui, and I'm extremely interested. The idea is great, and I'm all for avoiding Qt to write a software.
For portability reasons, I think you should replace cvui::printf, with something from cv, even when writing the 2 + 3.2 = 5.2 example (in main-app.cpp), associated to two helpers, named intToString and floatToString (see below).
I'm not used to github, but I'll try to attach several patches. Waiting, you'll find a wild copy-paste. Apologies in advance.
@@ -43,11 +49,20 @@ int main(int argc, const char *argv[])
// You can also specify the size of the text and its color
// using hex 0xRRGGBB CSS-like style.
cvui::text(frame, 200, 30, "Use hex 0xRRGGBB colors easily", 0.4, 0xff0000);
-
- // Sometimes you want to show text that is not that simple, e.g. strings + numbers.
- // You can use cvui::printf for that. It accepts a variable number of parameter, pretty
- // much like printf does.
- cvui::printf(frame, 200, 50, 0.4, 0x00ff00, "Use printf formatting: %d + %.2f = %f", 2, 3.2, 5.2);
+
+ // cv::putText() signature, from opencv2/imgproc.hpp:
+ // putText(img, text, textOrg, fontFace, fontScale, Scalar::all(255),
+ // thickness, LINE_TYPE /* default value = 8 */);
+
+ cv::Scalar aColor = CV_RGB(0, 255, 0);
+ cv::putText(frame,
+ "Using cv::putText() : "+intToString(2)+" + "+floatToString(3.2)+" = "+floatToString(5.2),
+ cv::Point(200,56),
+ fontFace,
+ 0.4,
+ aColor,
+ 1.5,
+ 8);
// Buttons will return true if they were clicked, which makes
// handling clicks a breeze.
@@ -88,7 +103,17 @@ int main(int argc, const char *argv[])
cvui::checkbox(frame, 200, 190, "A checked checkbox", &checked2);
// Display the lib version at the bottom of the screen
- cvui::printf(frame, frame.cols - 80, frame.rows - 20, 0.4, 0xCECECE, "cvui v.%s", cvui::VERSION);
+// cvui::printf(frame, frame.cols - 80, frame.rows - 20, 0.4, 0xCECECE, "cvui v.%s", cvui::VERSION);
+
+ aColor = CV_RGB(206, 206, 206); /* 0xCE = 206 */
+ cv::putText(frame,
+ "cvui v"+intToString(VERSION_MAJOR)+"."+intToString(VERSION_MINOR)+"."+intToString(VERSION_MICRO),
+ cv::Point(frame.cols - 80,frame.rows - 10 /*FIXME : use font height instead of a magic */),
+ fontFace,
+ 0.4,
+ aColor,
+ 1.5,
+ 8);
// This function must be called *AFTER* all UI components. It does
// all the behind the scenes magic to handle mouse clicks, etc.
For intToString and floatToString, I propose to add the declarations in cvui.h like follow:
(in cvui.h)
+std::string intToString(int);
+std::string floatToString(double);
namespace cvui
{
in cvui.cpp:
+/* helpers */
+
+std::string intToString(int number)
+{
+ std::ostringstream ss;
+ ss << number;
+ return ss.str();
+}
+
+std::string floatToString(double aFloat)
+{
+ std::ostringstream ss;
+ ss << aFloat;
+ return ss.str();
+}
+
+
When the user clicks the native close button of a window, it will not close as expected. As discussed in #53, it is quite tricky to properly check if a window was closed or not. If cv::getWindowProperty(WINDOW_NAME, cv::WND_PROP_*)
is called before cv::waitKey()
, it will never inform that the window was closed. This is likely to cause confusion among developers because you need to know where to place the call to getWindowProperty()
.
I think cvui could help with that. It could internally track if a window was closed, so developers don't have to worry about where (or when) to call OpenCV functions. They just have to ask cvui about it.
Maybe a function like the following (name suggestions):
bool cvui::didWindowClose(cv::String windowName);
bool cvui::wasWindowNativeCloseButtonClicked(cv::String windowName);
bool cvui::nativeWindowCloseButtonClicked(cv::String windowName);
bool cvui:::wasClosed(cv::String windowName);
I built
https://github.com/Dovyski/cvui/blob/master/example/src/trackbar/main.cpp
with OpenCV 3.4.0 (Official Win pack) and VS2017.
While all the elements are drawn, I can't move trackbars with mouse, at all.
Currently the lib is documented only in the source code. All that information should be available as a website with images and all those cool things. This Jekyll there is a good start.
Hello @Dovyski,
I am showing dynamic / run-time dependent content in a window that underlying matrix is handled by cvui. It is possible to provide scrolling facilities in such window? E.g., cvui fills and handles a matrix as big required to paint all content and displays only a scrollable, fixed-size viewport onto the screen? I guess it might be required to take some care with mouse pointer coordinates in the viewport for interaction purposes, but it would make the usage much more flexibel for dynamic content.
Thanks for the library anyway, it is nice to be able to create an OpenCV GUI with such low overhead and be provided with a very good documentation!
Thank you for this library, I really like its simplicity and have found it to be very useful.
I have a use case where I have a system of modular image processing components I would like to have each component render its own UI in its own window. Looking at the source code, it would appear that this would not be supported in its current design - are there plans to support multiple windows in the future?
Originally reported here by k-toffel.
I have a bit of a problem with multiple windows. I have a bunch of buttons. When a button is pressed I need to do some checks, if the check is unsuccessfull an error window should pop up.
Everything works fine for buttons that aren't grouped, but as soon as they're in a beginRow() / endRow() section I get the error:
[CVUI] Fatal error (code 2): Calling update() before finishing all begin*()/end*() calls. Did you forget to call a begin*() or an end*()? Check if every begin*() has an appropriate end*() call before you call update().
I had a quick look and found out that the error occures during the update() call for the error window. I guess a possible solution would be to add a "gStack" and it's "gStackCount" to the context type.
The use of a rectangle to highlight detected faces is quite common practice. However, a bare rectangle is not necessarily appealing for a graphical app. The following face rectangle (corners only) is way cooler:
cvui::rect()
should have a customization param to allow such kind of rendering. It would boost the visual Appealingness of any app developed with cvui.
NOTE: it might be better to create a new component for this, such as cvui::target()
All examples bundled with cvui require CMake 3.1 or higher. Opencv 4.0 just raised that requirement to 3.5.1. It makes sense for cvui to follow suit.
It is possible to render images at the moment, however any transparency info found in PNG files are ignored. It would be great to allow the rendering of transparent PNG files, so user can use icons, for instance.
Here is a great example of icons from FontAwesome being used with ImGui (as fonts, not PNGs):
Hi Fernando,
Sorry to flood you with messages :-)
I have some remarks concerning the trackbar api, which could be improved a little I think.
Cheers,
Pascal
The header-only approach of cvui works for projects that include cvui.h
in a single file. If more than one file includes cvui.h
, the linker generates several errors regarding re-implementation of code, e.g.
UI.obj : error LNK2005: "bool __cdecl cvui::button(class cv::Mat &,int,int,int,int,class cv::String const &)" (?button@cvui@@YA_NAEAVMat@cv@@HHHHAEBVString@3@@Z) already defined in DebugWindow.obj
This needs to be improved with a better _CVUI_IMPLEMENTATION_
mechanism.
The waitkey returns an ascii representation of the keystroke pressed, it would be really nice if we can catch this to keybindings for functions.
Python example, load image, if 's' is registered, save image and exit. If escape is clicked exit.
import cv2
img = cv2.imread('lena.jpg',0 )
cv2.imshow('WindowName', img)
k = cv2.waitKey(0)
if k == 27: # wait for ESC key to exit
cv2.destroyAllWindows()
elif k == ord('s'): # wait for 's' key to save and exit
cv2.imwrite('lena.png', img)
cv2.destroyAllWindows()
Add a new cvui component named line()
to render lines between two points.
Does this support retina?
OpenCV already has Python bindings, so it would be a natural thing to port cvui to Python as well. Maybe it is possible to use the C++ code and just create the bindings, or (not ideally) re-write the whole thing in Python.
OS : Linux, x86_64, Debian like
OpenCV : 3.1.0-dev (built from sources)
When running the examples, there is a visible system overload when running a simple main-app, close to 70% on a 2,66 GHz + > 8GB or RAM, what is not normal.
The reason is probably the cv::waitKey(1) eating all the processor time.
Suggestion : using waitKey(10) or even waitKey(20) reduce significantly the load to something between 13% and 17%, what is more cute for a simple example (but can be improved imho).
See the example below (concerns main-app.cpp):
@@ -33,7 +39,7 @@ int main(int argc, const char *argv[])
frame = cv::Scalar(49, 52, 49);
// Check if ESC key was pressed
- if (cv::waitKey(10) == 27) {
+ if (cv::waitKey(20) == 27) {
break;
}
There are many typos cviu
, please change to cvui
:
https://github.com/Dovyski/cvui/blob/master/cvui.h
The trackbar
component has a bitset param that is used to control how the trackbar should behave. A similar thing for buttons would be very useful. One of the possible cases is to create always pressed or disabled buttons.
This could potentially be extended to other components too.
Several components present text, e.g. button labels, but it is not possible to customize its alignment, e.g. center, right, left. It would be great to allow developers to choose where text labels are placed with options for horizontal and vertical alignment.
I think this can be implemented without breaking the existing API, as long as components have a new "settings param" (see #45).
Depends on: #45
We currently have the ability to draw rectangles, it would also be cool if we can draw other circles, lines etc.
opencv drawing function doc
visual studio 2015
add #include <Windows.h>
Unfortunately, this code doesn't compile.
when i am going to show a gray image with cvui::image(), it comes out this :
`#include
using namespace std;
#define CVUI_IMPLEMENTATION
#include "cvui.h"
#include<opencv2/core/core.hpp>
#include<opencv2/highgui/highgui.hpp>
#include
using namespace cv;
#define WINDOW_NAME "CVUI Hello World!"
int main()
{
//要显示的图片
cv::Mat srcImage=cv::imread("//home//msi//opencv.jpg");
if(!srcImage.data){
cout<<"failed to read"<<endl;
system("pause");
return -1;
}
cv::Mat srcGray(srcImage.rows,srcImage.cols,CV_8UC1);
cv::cvtColor(srcImage,srcGray,CV_BGR2GRAY);
//背景图层
cv::Mat frame = cv::Mat(srcImage.rows+50, srcImage.cols*2, CV_8UC3);
cvui::init(WINDOW_NAME);
while (true) {
// Fill the frame with a nice color
frame = cv::Scalar(49, 52, 49);
// Render UI components to the frame
cvui::text(frame, 20, 10, "Hello, Opencv");
//放置按钮
if (cvui::button(frame, 20, 40, "threshold")) {
// 按钮按下后的动作
cv::blur(srcImage,srcImage,Size(3,3));
}
cvui::update();
//显示图片
cvui::image(frame,srcImage.cols,10,srcGray);
// Update cvui stuff and show everything on the screen
cvui::imshow(WINDOW_NAME, frame);
if (cv::waitKey(20) == 'q') {
break;
}
}
return 0;
}`
Currently the CI only checks for compilation problems. It would be nice to expand that to also include static analysis of the code. Cppcheck looks like a nice, easy and multiplatform tool for the job.
Example:
cppcheck --language=c++ --enable=warning,performance,portability cvui.h
I'm using Mac 10.3.3.
In the code below, cvui::button is not responsive. The mouse click handler is only called after a few seconds (5-30s) delay.
while (true) {
if (cvui::button(frame, 0, 0, "Stop")) {
// Print and flush out to confirm the mouse click event is processed, but it's not
...
// The program doesn't exit immediately either
exit(0);
}
// A heavy image processing
...
// The frame is visually updated every loop, but
// the event above is not processed immediately after mouse click
cvui::imshow(WIN_NAME, frame);
}
By adding "dirent.h" to the code included "cvui.h", the errors would be raised.
Please check the following repo to see the errors related to this issue:
https://github.com/AliZ-ee/cvui
i was using your header file and needed to use cv::moveWindow() as well. So to make things easy, i created a cvui::init() and cvui::watch() respectively. i have attached the modified cvui.h for inspection. hope it was at least a help to develop this further.
cvui.zip
When you call cvui.image(frame, theX, theY, theImage)
the next error apears:
__internal.image(__internal.screen, theX, theY, theImage)
NameError: name 'theX' is not defined
Changeint the line 2631 on cvui.py to
__internal.image(__internal.screen, aX, aY, aImage)
it works.
Have you considered putting all of the code in a single header file? It would perhaps be simpler for end users to include only the header file.
When I call
cvui::init("My window name");
the window is not displayed.
It's displayed when I call:
cvui::init("My window name", 1);
It's probably much more involved than the other controls, but a text-control that provides a std::string would allow this framework to cover all of the important basic data types.
Hi Fernando,
First over all, congratulations for the 2.0 : the cmake is perfect, and the Linux build works without any glitch. Wow !
Second, your image buttons and all the improvement you did (everything in a .h ) desserve another wow too :-)
I only found one strange issue (see the attached screenshot) : the trackbar do not display the max value. I started to search, but I'm unsure, so I'll add more information, and let you know when things will be ok , means when I'll have a fix or at least a workaround (probably soemthing linked to sprintf_s replaced by sprintf not enough, but I'm unsure).
BTW, what about add those lines in the CMakeLists.txt file (located in $ROOT_DIR) ?
Thanks again for sharing your code,
-- ericb
The function sparkline()
should render a warning message or die with an assert()
when no data is provided. At the moment, the app using cvui will crash with no explanation. Not good.
OS : Linux, x86_64 / g++ 5.2.1 / Debian like
Using openCV : 3.1.0-dev (checked out and built from sources, without Qt, but using OpenGL)
Problem : currently, cvui is not buildable on Linux, and probably on Mac OS X without some hacks (see below), because vsprintf_s and sprintf_s are Microsoft only, and obviously break everything.
Looks like things work correctly using sscanf, but vsprintf is a bad workaround, allowing only to build, but that's not safe. Other problems appear because of missing const (will create another issue).
Current workaround to build and make it work consists in:
`--- a/cvui.cpp
+++ b/cvui.cpp
@@ -9,10 +9,39 @@
#include
+#ifndef MSVC
+#include <stdio.h>
+#include <opencv2/opencv.hpp>
+#define sprintf_s sscanf
+#define vsprintf_s vsprintf
+#else
#include "opencv2/imgproc.hpp"
#include "opencv2/highgui/highgui.hpp"
+#endif
#include "cvui.h"
`
Some examples do not compile using OpenCV 4.0.0-alpha. The error:
home/travis/build/Dovyski/cvui/example/src/canny/main.cpp: In function ‘int main(int, const char**)’:
/home/travis/build/Dovyski/cvui/example/src/canny/main.cpp:29:30: error: ‘CV_BGR2GRAY’ was not declared in this scope
cv::cvtColor(lena, frame, CV_BGR2GRAY);
^
/home/travis/build/Dovyski/cvui/example/src/canny/main.cpp:31:31: error: ‘CV_GRAY2BGR’ was not declared in this scope
cv::cvtColor(frame, frame, CV_GRAY2BGR);
It seems CV_BGR2GRAY
should be replaced with cv::COLOR_BGR2GRAY
.
If you try to use the Native Window Close button, the window is not responding.
This behaviour can be reproduced in every cvui example.
I workaround and was able to make borderless window using classic tricky windows api calls.
Basically I modified the watch function (and lose linux compatibility with the inclusion of windows.h ).
So if @Dovyski or other users find this code useful feel free to use or modified to make it a general solution.
Let me know your thoughts,
inline void watch(const cv::String& theWindowName, bool theCreateNamedWindow, bool createBorder) {
cvui_context_t aContex;
if (theCreateNamedWindow) {
cv::namedWindow(theWindowName,0);
if (!createBorder)
{
HWND win_handle = FindWindow(0, theWindowName.c_str());
if (!win_handle)
{
printf("Failed FindWindow\n");
}
// Borderless
SetWindowLong(win_handle, GWL_STYLE, GetWindowLong(win_handle, GWL_EXSTYLE) | WS_EX_TOPMOST);
ShowWindow(win_handle, SW_SHOW);
}
}
aContex.windowName = theWindowName;
aContex.mouse.position.x = 0;
aContex.mouse.position.y = 0;
internal::resetMouseButton(aContex.mouse.anyButton);
internal::resetMouseButton(aContex.mouse.buttons[RIGHT_BUTTON]);
internal::resetMouseButton(aContex.mouse.buttons[MIDDLE_BUTTON]);
internal::resetMouseButton(aContex.mouse.buttons[LEFT_BUTTON]);
internal::gContexts[theWindowName] = aContex;
cv::setMouseCallback(theWindowName, handleMouse, &internal::gContexts[theWindowName]);
}
This is my first time using CVUI. I'm also a beginner to OpenCV as well as C++, so this "error" may just be my own stupidity. Regardless, I've had trouble getting started with CVUI and can't figure out why. All the items appear yet none of them respond to mouse clicks and drags.
CVUI Version: 2.7.0
OpenCV: 3.2.0
Running:
Ubuntu 18.04.2 LTS
x86-64
Here is the main.cpp file that essentially I'm trying to run. I build it using a makefile.
#include <opencv2/opencv.hpp>
#include "opencv2/imgproc/imgproc.hpp"
#define CVUI_IMPLEMENTATION
#include "cvui.h"
using namespace cv;
int main() {
// Create a frame where components will be rendered to.
cv::Mat frame = cv::Mat(250, 500, CV_8UC3);
cvui::init("test");
while (true) {
// Fill the frame with a nice color
frame = cv::Scalar(49, 52, 49);
// create a trackbar
int bigN = 6;
cvui::trackbar(frame, 110, 80, 250, &bigN, (int)2, (int)15);
bool checked = false;
cvui::checkbox(frame, 90, 50, "Example checkbox", &checked);
if (cvui::button(frame, 110, 150, "Find images!")) {
printf("clicked\n");
};
if (cv::waitKey(20) == 27) {
break;
}
cvui::update();
// Update cvui stuff and show everything on the screen
cv::imshow("test", frame);
}
return 0;
}
I can hover over the button and it changes shade - it doesn't respond to clicks though.
The checkbox doesn't respond to clicks within the box.
The trackbar does not move with mouse drag.
Thanks for your time
Allen
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.