Introducing shuffleboard2js - a shuffleboard like dashboard for the web!

For those who enjoy creating custom HTML/Javascript dashboards using pynetworktables2js, I’m happy to introduce shuffleboard2js!

The aim of this project is to provide a framework that makes making custom web based widgets as easy as possible. Widgets that you create can be dragged onto a shuffleboard like interface and saved for later use. Out of the box, the dashboard currently only comes with a gyro widget and a simple widget for displaying mjpg camera streams. More will be added in the future (and if you create a really cool widget you want to share feel free to contribute!), but creation of widgets is mostly left to users.

shuffleboard2js relies on RiotJS, a simple UI library for creating custom tags.

To install, make sure to install python 3 on your computer, and on Windows you can execute:

py -3 -m pip install shuffleboard2js

On Linux/OSX you can execute:

pip install shuffleboard2js

Documentation and more information can be found here: https://shuffleboard2js.readthedocs.io/en/latest/index.html

Source code can be found here: https://github.com/robotpy/shuffleboard2js

Documentation is incomplete and the project is a little rough at the moment. There are known issues in firefox and edge, so I would suggest trying it out with chrome or safari for now. I’m currently looking for feedback and testers, so let me know if you’re interested.

3 Likes

Just wanted to give an update. Various bug fixes have been resolved, new features have been added, and most of the widgets from Shuffleboard have been added. Here’s an image of the interface with a bunch of those widgets added to it:

Although shuffleboard2js has a lot of the features and widgets the original shuffleboard has, the goal isn’t to make a javascript clone of the program, but to provide people who love using web technologies the means to create their own custom widgets/dashboards. Shuffleboard2js provides a pretty simple framework for users to create their own widgets specific to their needs.

For example, a student from team 2423 built a touchscreen interface to control the elevator and climbing mechanism for our robot this year using shuffleboard2js. Touching the points on the rocket and cargo ships moved the elevator to a specific height. The interface was very useful and intuitive and won us the Innovation in Control award at the NE District North Shore and NE District Greater Boston events!

climb-time

2 Likes

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