Completely lost on how to create a cool smart dashboard. Can someone help?

Okay. So I know this is such a vague question. I’m just asking, can someone please give me some kind of guide, documentation, and example code for making a cool smartdashboard?

We would ideally have joystick value GUIs, gyro value, camera inputs, labels for everything, and hopefully it could look nice.

But the main issue is that we have no idea where to start and we need help with some sort of direction. Also, we already checked out the wpilibscreenstepslive guide for smartdashboard and it was one of the least helpful things I’ve ever seen.

I know that some teams make stuff as beautiful as:
but there is nothing out there to help us learn to do such a thing?

Most of the really nice ones are in some way custom programmed. You can write any program you want just about to read/write values from NetworkTables and do what you want with them/to visualize them.

I know FRC Dashboard was meant to be a web based customizable/extendable/theme-able dashboard.

EDIT: Actually it looks like the one you linked was based on FRC Dashboard as well. They include a link to their repo with their Dashboard code, its basically all JS/HTML/CSS.


This is the key. This question actually has very little to do with “how to write software”, and much more to do with “how to design a slick-looking website”.

I’m unfortunately not a graphics designer. All my websites have a distinct “1990’s” feel to them. I’m here to learn as well. However, I can speak to more of the “back-end” portions.

As soon as this season is over I’ve got a multi-part blog post in mind where I’ll discuss the how and why of 1736’s web-based dashboards. (yes plural, on purpose).

The super high level technical side of it:

  1. RoboRIO hosts a website. This involves the ability to serve files (html/css/js/etc.), and stream data back and forth.

We chose websockets for the data streaming solution for a number of different reasons. Network Tables is a viable alternative in most instances. We’ve been using Jetty for the file serving part, though there’s about 9854739857 equivalent other options out there.

  1. There’s some code on the roboRIO where your main (or any other class really) can update the web server’s state from internal variables. For example, you’d have code that would read the battery voltage from the PDP, and then pass that value into the web server classes in some format.

This can be done in a number of different ways as well. We chose a particularly complex one, though again, network tables would make this dirt simple.

  1. Develop html/javascript to look pretty, and to do the connection back to the robot to stream data

To be honest: the reason we have a complex solution is simply because we liked using a particular automotive-style of embedded software development + tuning, and the tools available in 2016 didn’t quite fit the bill. That’s since changed: Shuffleboard is 90% of what we need, but we haven’t moved over because of technical inertia, and a slight fear of losing the flexibility of the existing system.

Having a slick custom dashboard doesn’t make your robot good. It just means you have at least one person on the team who really likes writing software.


Thank you for your reply. It’s very helpful in that we will not try to pursue a web-based dashboard then because it is already way too complicated than we thought. Actually, the main question that we just have is, “how the hell do we add a gyroscope, two cameras, and other cool things to the smartdashboard?” There’s nowhere online we can find to add widgets and stuff. I only added that image from Reddit because it has more than the >add part of smartdashboard can offer. We just need something, some kind of tutorial, some kind of guideline. We have no mentors who can help, that’s why we’re seeking help here.

Please give Shuffleboard a try. It’s a newer dashboard (there are multiple dashboard offerings, SmartDashboard is only one of them). It is possible in SmartDashboard to add two camera displays, but it’s even easier in Shuffleboard.


You need to make friends with Shuffleboard -
If you learn how to do “Layouts with Code” rather than using drag’n’drop, it will keep your UI consistent between Driver Station computers and save you much grief with maintaining JSON files.

1 Like

Also, Shuffleboard works with the same code as smart dashboard so you can still use the same SmartDashboard class.

This topic was automatically closed 365 days after the last reply. New replies are no longer allowed.