Full release of FRC Dashboard

Technical Programming
1

TL;DR: This $@#$@#$@#$@# is mother$@#$@#$@#$@#ing dope.

For the past two years our team has been using a web-based robot UI to control and monitor certain aspects of our robot, like our flashlight, autoaim, climbing winch, etc. etc. Here’s a screenshot of our rebuilt 2016 interface (and the original from earlier this year, and 2015’s interface), if you’re curious. We’ve won a total of three Innovation in Control awards over the past two years for our UIs.
Anyway, at the end of the season, I decided to go through all the code and clean it up, remove unnecessary and unused code, and add lots of comments, in order to make something of a boilerplate for other teams to build their own UIs.
The result is FRC Dashboard, which I’ve designed with ease of modification in mind. It’s built in HTML/CSS/JS, with a Python webserver. I’ve spun off most of the widgets and systems we used into addons which you can easily add on to your own UI. And as I said before, the code is full of lots of comments (and I mean lots) explaining everything to help you add and tweak your own widgets and code without wanting to pull out your hair.
You can get FRC Dashboard and all the addons I’ve prebuilt at this website.
(Or, here’s the main GitHub repo, and a list of addons.)
This program is in (stable) beta, so if anyone has any suggestions, feel free to voice them in the comments, or start a pull request on GitHub. Thanks!

2

This is awesome. Great work!

3

While this is certainly a cool idea, I think it could benefit from better addon integration - copying and pasting code isn’t really the best way to do addons IMO.

Self-contained addons could include all of their own html, css, and javascript code, and your dashboard could do the heavy lifting to import them instead of the user :slight_smile:

4

I’ve looked at doing this a lot of times, but I can’t figure out a good way to do it while preserving the customizability of the addons.

Also, since most of the addons require adding a case to a switch statement, I haven’t figured out how to begin.

Any ideas?

5

Welcome to software design! Where you try to make sure to retain features while nailing things down into a concrete framework.

You can create an add-ons folder, and within that a folder for each add-on you want to load. In each add-on folder you put an html file with the add-on snippet, a css file, and a js file with the code.
Each js file could look like this


module.exports = {
   name: "MyAddon",
   tag: "my-addon",
   init: function(htmlNode, etc) {
        // js code here
   }
}

Then you could have some custom tags that people can add in their html


<!-- other dash stuff -->
<my-addon></my-addon>

and you can scan for these custom tags and if one matches an addon’s tag, replace it with the addon (inject the html and css, then require() and call init)

Just an idea