OpenCV UI ideas

Starting to shape this.
If someone has criticism, suggestions, ideas. Things that should and should not be.

What does the "display" button do?

[Record] (x) frames [Record frames] is somewhat confusing.


Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.
GroG's picture

WOOHOO ! Looking good


Looking good already.

There are 3 displays for OpenCV

  1. SwingGui Display I made (this is dead to us)
  2. WebGui display that kwatters made
  3. CanvasFrame - the person who made JavaCV made

2 & 3 are worth keeping but they are very different.  The CanvasFrame is the undocked display that you and Gael might have seen.  It has the capability to go full screen, which is a nice feature if the hardware can handle the processing (its cpu intensive).

Capture and Source should be on the same line, perhaps one of the words should be removed .. either Capture or Source.

I'm not sure its clear for the output - but there are 3 ways to save recordings..

  1. A single Frame
  2. A mpeg file (Record without Frames un-check)
  3. Many Individual Frames (Record with Frames checked)

I as a user would like to know where all the recordings go.  So current output directory path should be shown.
I suspect it will go to "data/OpenCV/output" ...  this could be up for debate

The URL should have "" as a placeholder

File gets a little tricky, because is this "local file" or "remote file" ?

I'm gonna guess Display can go away and the undock/dock will select which Display is running.  However, CanvasFrame can only work "locally".  So if your running mrl remotely on a raspi, the webgui display will work, but you will not be able to "undock" it if you are on a different computer.

The sub-panels will take some work porting them from Swing :)

But overall I think its a very good start Astro ... thanks for all the work !


hairygael's picture

Wow Astro, Good job! it makes

Wow Astro,

Good job! it makes me want to use it.

I am wondering if the selection of filters need to have two containers with those arrows between like the old swingui.

Grog, couldn't we have just a change of color of the button for each filter being active?

Click a filter--> it's active--> click again--> it's not active.

This would give us more space to display and make the usage more user friendly.

Let see how it looks once you have re-arranged following Grog's remarks.

GroG's picture

The two containers are

The two containers are containing different things.
Available Filters are different "Types"
Current Filters are instances of Available Filters running in the current pipeline.

Potentially, you could remove Available Filters.. and have a single container which only has Current Filters.
A (add new filter) would need to be created, and it in turn should provide a modal which allows the user to select what type of new filter they wanted.

I don't have any issue with this, and with click/click again activity.

astro's picture

Thanks for such quick

Thanks for such quick responses!


I had thought about Checkboxes, but we can't because of the way filters work.
You have to add them in order.
Is not the same:

Piramid Down



If it were only one column with checkboxes, we would have to put a button that alters the order to raise and lower the selected one, but within the list of available filters, that would be very confusing because they are in alphabetical order. I discarded that idea.

Like GroG says "Add new filter" could be a good option.

I think that not much space is needed for Current filters. How many could we have 4, 5 at the same time? I think not more than that. In this case, the column could be reduced to half the height. I also see in Swingui that the filters do not need a lot of space for the parameters. I think the one I used as an example is the largest: FaceDetect, there are many that do not show me parameters.


I think it is understandable to anyone that File is local and URL is remote. Can File be remote?

In the output I put a drop down to select mjpeg if it is video or sequence of frames or streaming if there is any other option, and I changed Record Frame to Snapshot.

Can the Output be streaming?
It could be useful to see in another device.

In my case I put a monitor next to the Terminator and I plan to use the "undock" to put the window Full screen there.

Speaking of this. I don't see a "mirror" filter, it would be like the "flip" but horizontal. It's just something I thought about now.
When you see the screen, you act as if you were looking in the mirror. But if you raise your left hand you see it on the right on the monitor. That is what the robot is seeing, but perhaps it would be interesting to have the image with a horizontal flip for those who see it from the front. Obviously as the last filter so that it does not affect face tracking. Is it possible to do that?
It's just something I thought about now.

What I want to say is that I don't want you to waste time seeing how to do it, or programming something, I just ask because I got this idea now, maybe it is a simple parameter that needs to be enabled in flip. And for streaming, maybe you have to program something and it's not what I'm asking for.


GroG's picture

Ya .. it can flip vertically,

Ya .. it can flip vertically, horizontally, rotate in fractions..
The filters are already there, the sub-panels are not :)

Affline rotates in fractions, Flip rotates 90 and has the capability of flipping horizontally and vertically, mirror image, etc.  But it does not have the submenus and detailed plumbing ;)

The output is streaming over the web for the web display.

Ok, if myrobotlab is running on a raspi, and you use your laptop to use the webgui.  If you want to process a file from your laptop, you'll need to "upload" it from your laptop to the raspi.  We do not do this currently.
We could provide a webgui file tree - and if you had a mp4 on the raspi, you could navigate around in the tree and load it.  

With the webgui there is always a client & server, and they may not be on the same machine.

Um very cool Terminator
and motorized long board,
can I hang out with you ? ;)

astro's picture

Woowww, that's a lot of good

Woowww, that's a lot of good news for me.

I just discovered how to read the position data of a servo from Rainmeter using WebParser.
For example:
URL = http: // localhost: 8888 / api / service / i01.leftHand.pinky
RegExp = (? SiU) currentPos ": (. *)," Enabled "

So that opens up a lot of possibilities for adding data on the desktop, with animated graphics based on the data.

I tell you what I am thinking of doing.

That stand you see there, I did it motorized. The idea is to tell Terminator that I am going for a ride and he unlock the skate and says something.

This video does not have good quality, but you can see the mechanism.

For the unlock, it's the same, it starts to go down slowly and rolls back down the little ramp below it.

I have many phrases that he can say randomly for that situation.
"I will join the ride let's move", etc.

These are voices I found of Terminator for the Garmin GPS.

And this reminds me that I used the Pin assigned to the NervoBoard to light his eyes. This is not yet on WebGui.
PinLeftNervoPower1 = 51
That way, I could make him turn his eyes on when he woke up and turn it off when he slept.

The truth is this skate changed my life. I'm 47 but I'm feeling like 27 :)
I saw in a post that you have a skate on the wall. This is an Evolve Bamboo GT. I highly recommend it . :)

But be careful, I was already chased by the police
3 motorcycles, 3 vans and a police car, more than 7 officers to stop me :) You can see it here:

And another ride through my city here:

The new model is Evolve Bamboo GTR. There is also a carbon fiber model. But bamboo is more flexible and comfortable in bad streets.

Gael in France, has models with superior performance with Lacroix

Once you try it, there is no going back. Go ahead and put on your helmet.
It would be a pleasure to go for a ride together, a pity that I am so far away.


GroG's picture

Skate I watched both videos

I watched both videos - Inspirational 
7 cops that's impressive ;)

There is a large park a little ways from my house called Mt. Tabor.
It's a popular non-motorized skate run ... parts are steep, and occasionally they have races.

I've done sections of it, but never a full run ... I'm afraid I would be a bloody lump at the end because my skating abilities are not that good.

Your stand is awesome, anything we do to make it more awesome I'm all for ! 

Ya, the api has always been part of the webgui.  
There are two interfaces to it :
services - synchronous REST API
messages - asynchronous websocket messages API

Most of the info here is probably still accurate

msg.{function Name}(params)
and the send("function Name", "params")  
use the messages API

Will return all the data of a service

http://localhost:8888/api/service/ {serviceName} /
With a following slash will return all the methods available

Will call a function, the response will be the functions returned data

I'd recommend JSON.parse rather than reg.expr

Hope this opens up more possiblities to you.


hairygael's picture

Hello Astro,Wow super

Hello Astro,

Wow super impressive skate stand, ride and videos! The speed you are going is frightening.

I do a lot of snow boarding, and I can only imagine the injuries if falling at this speed on hard ground, even with a helmet and gloves... I tried electric skate boards at some Makerfaires, but there is a age when you know you should be carefull.

I still have my second skate board that I got when I was 11 years old in 1975.

Last summer my daughter and I did some skate (no electric) again in the streets. it had been a while ago that it was standing still in my workshop, in fact I changed all the bearings, and it was riding like new again.

Keep it up and stay safe!

astro's picture

Woow1975 that was the Golden


1975 that was the Golden Age of Skateboarding

It is great that you still have that skate, it is a treasure that holds many memories and it is great that you continue to maintain it, take care of it and enjoy with your daughter.

The skating community is so positive!

I was finally able to achieve a result quite similar to what I had done in photoshop. I changed the place of the button "Star Capture", I think it has to be at the end after setting all the options.
The source options appear according to the selection, hiding those that we do not need to see.

1) Select the source

2) the options appear here

3) Index and Addres appear fine

4) But for File, it is something that cannot be handled, it is internal to the browser, it appears different depending on Chrome, Firefox ... and in the local language.



There are some hacks to hide it, but it might not work well at some point or depending on the browser or device.

What I did was limit the space of the element.

It is something to improve later.

We can't use this "Browse..." to select a server directory, so I just put a text field.
And I rearranged the buttons.

I have tried it with the cell phone and it seems to fit well.

Maybe the "RECORDING" it's a little overwhelming. But it seems to me that it is something that should attract attention so as not to forget that it is still recording.

I'm going to do a git push


GroG's picture

Really looks great Astro !

Really looks great Astro ! ... Great recording designs.  All very big improvements...   

I'm working on Servos now - when I get all those pieces working, I'll move to OpenCV.

We are Tag Team !

hairygael's picture

Looks great Astro! I just

Looks great Astro!

I just tried a git pull but it seems some files have bad arguments and cannot be pulled.

'src/main/resources/resource/WebGui/app/lib/mrl.css': Invalid argument

'src/main/resources/resource/WebGui/app/service/views/OpenCVGui.html': Invalid argument

I do not know what can be the cause, maybe Grog will explain.

GroG's picture

It's complaining I think of

It's complaining I think of invalid filenames, but they don't look invalid.
So, its difficult to tell without more information.  


GroG's picture

It's complaining I think of

It's complaining I think of invalid filenames, but they don't look invalid.
So, its difficult to tell without more information.  


hairygael's picture

After a second pull it

After a second pull it worked, I am not sure why.

I can now see Astro's work and it's really great!

When the Ui open fully the Start Capture button is a bit gone far to the right. Maybe it should be set there:

astro's picture

Hello Gael! I put the button

Hello Gael!

I put the button to the right to prevent it from moving when changing the Source type, because the options have a different width.
But yes, it is very far and the truth is that you only select a type of source once, and it is not necessary to change it constantly, so there would be no problems of it moving.
I will remove the class pull-right on the next push.

GroG's picture

Hi Astro,  you can put it on

Hi Astro, 
you can put it on the left of the source, that way its always in the same place regardless of type of source selected.

If it was me, I'd put it on the left side of grabber. e.g. the first thing