I will preface this topic by saying that what I’m about to discuss is not something I would try to do in the middle of build season without any prior experience.
Now with that out of the way…
Has anyone ever built their own custom web dashboard for their robot using any of the more modern web application building frameworks like angular/react + bootstrap? How did it look, was it functional, fun to make?
It’s something I’ve been considering as my programming group grows as an additional way to get more hands into code and to provide more opportunities for robot projects.
Projects like pynetworktables2js and FRCDashboard make writing a custom dashboard with HTML/CSS/JS relatively straightforward.
My team has previously written custom web-based dashboards, albeit not using any modern web frameworks. It’s likely that we will decide to stick with Shuffleboard this year though.
5499 is using angular for our new dashboard. It uses a kotlin back end as well.
Feel free to take a look.
Dashboard
Not web based, but we’ve been using Windows Presentation Framework (XAML + C#) for our dashboard. It lets you put together a pretty dashboard and the designer can help new users get a grasp on what they’re doing. Then we just use OSC to communicate to the robot on the back end.
1 Like
OSC stands for Open Sound Control and is a simple networking protocol. Messages just have a name formatted like a file path and associated values. An example message could be:
Name: “/Robot/Sensors/TouchSesnor/”
Value: True
We use it to send data like current draw, encoder values, and controller diagnostics to our custom dashboard.
1 Like
2018 Dashboard Code
This link has our dashboard code from last year, but I don’t recommend following its exact process. Our threads got tied together somewhere, which caused the buffer to fill and the UI to lag. All the OSC Code is all relevant though, depending on the library you use.
I have not implemented any custom dashboard, but figured I should throw out a caution.
Be careful what tool/library you use for streaming camera images. Because of the state of Shuffleboard last year, we used Google Chrome to show the camera on the DS. We did fine, but had some problems with the image lagging. Turns out that Chrome adds about 40-60 msec of lag compared to the current version of Shuffleboard. (My guess is that Chrome buffers the stream to try to decrease dropouts.) Also, Chrome does not reconnect to the stream if there is a glitch, which Shuffleboard (now) does.
On a related note, a previous student implemented a “port” of SmartDashboard in JavaScript: