Introduce Web GUI #631
Introduce Web GUI #631
Conversation
VanDavv
requested review from
themarpe,
Erol444,
VladVyskocil and
SzabolcsGergely
| import {useDispatch, useSelector} from "react-redux"; | ||
| import {fetchConfig, updateDynamicConfig, sendDynamicConfig} from "../store"; | ||
|
|
||
| const emptyImg = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZAAAADvCAYAAADcvIJsAAABhGlDQ1BJQ0MgcHJvZmlsZQAAKJF9kT1Iw1AUhU9TpSIVBwsWcchQnSyIijhqFYpQIdQKrTqYvPQPmjQkKS6OgmvBwZ/FqoOLs64OroIg+APi6OSk6CIl3pcUWsR44fE+zrvn8N59gNCoMM3qGgc03TbTyYSYza2KoVcEEMUgQoDMLGNOklLwra976qa6i/Ms/74/q0/NWwwIiMSzzDBt4g3i6U3b4LxPHGElWSU+Jx4z6YLEj1xXPH7jXHRZ4JkRM5OeJ44Qi8UOVjqYlUyNeIo4pmo65QtZj1XOW5y1So217slfGM7rK8tcpzWMJBaxBAkiFNRQRgU24rTrpFhI03nCxz/k+iVyKeQqg5FjAVVokF0/+B/8nq1VmJzwksIJoPvFcT5GgNAu0Kw7zvex4zRPgOAzcKW3/dUGMPNJer2txY6A/m3g4rqtKXvA5Q4QfTJkU3alIC2hUADez+ibcsDALdC75s2tdY7TByBDs0rdAAeHwGiRstd93t3TObd/e1rz+wH4+3J2eba+jwAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAAuIwAALiMBeKU/dgAAAAd0SU1FB+YBGg8tJvd2VFsAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAABiklEQVR42u3BgQAAAADDoPlTn+AGVQEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAxwDW+gABpsz3nwAAAABJRU5ErkJggg==" |
There was a problem hiding this comment.
To stop the stream?
https://github.com/luxonis/depthai-poe-webapp/blob/main/src/views/Cameras.vue#L47-L56
I found setting the src attribute of img tag to be an empty string worked better (or was the only thing to really stop the MJPEG stream)
There was a problem hiding this comment.
yes, although this image is very small and transparent and is loaded from memory, allows to scale the image window consistently and doesn't show empty image placeholder (and doesn't throw an exception to console).
But that's a detail so can use an empty string as well if you think it's better
# Conflicts: # depthai_helpers/arg_manager.py
|
I migrated webserver used in Web GUI to aiohttp, so that all requests are parsed asynchronously. It's available on many platforms straight from PyPi, so I think compatibility won't be an issue. Will do more testing on RPi tomorrow and hopefully inside docker as well - if successful, will allow us to create |
|
WebGUI on RPi 4 4GB works in only 4 FPS - I guess it's due to host-side JPEG encoding that is performed before the image is sent. Will enable an additional MJPEG encoder for webGUI and stream already encoded data |
|
I tried to use the Script node to make a "packet router" that only sends packets from specified input. Still, it gets somehow stuck at runtime - connected nodes stop sending new packets to it, even though the script node is working (I can change specified preview, and I see on console that node received the message). We'll be debugging this issue further internally but sharing here too context, a video showing the behavior below Screen.Recording.2022-02-04.at.21.09.52.mov |
|
@themarpe are there any updates on the Script node issues? Once we'll be able to use script node to choose a specific packet to be sent, we'll be able to introduce the Web GUI |
This PR introduces a new GUI type -
web- that is available together with already presentcvandqtGUIs.Web GUI allows to use your browser to interact with DepthAI Demo script.
Demo
To use the new GUI, run the following command:
and open http://127.0.0.1:8090 to see your webpage in action
Still in todo/nice-to-have: