I was really impressed by FRC Web Components and don’t think there is enough attention being given to it! Especially when compared to shuffleboard or a similar dashboard. I didn’t know exactly how to get started but once I found this app everything became pretty intuitive and very flexible in terms of layout and customization!
A few of the questions I had initially playing around with it:
Is there an easy way to make text or displays significantly larger? Most of the components other than the gauge I couldn’t get to scale vertically.
Can it work when simulating robot code?
One of the major things our drivers having been asking for is a way to display the grid and track both pieces scored and a way to indicate where we are scoring next. I think something similar to either the scoring location breakdown on thebluealliance (bonus points for maybe being able to “borrow” their source) or similar to this image from the manual:
Unfortunately I currently know nothing about LitElement and wanted to see how much benefit others in the community would see from this custom component.
Hi @jdaming, I appreciate the kind feedback! Getting started is likely the biggest pain point right now. Documentation is still a work in progress, and more recent work has been hidden inside a feature branch. I just merged it into master since it’s far enough along and it has created some confusion. The README has been updated so hopefully it’s clearer how to use and download the dashboard.
The dashboard does indeed work while simulating robot code. All you’ll need is to connect to 127.0.0.1 or localhost and run the simulator:
Styling is currently not well supported in the dashboard, but it’s something that’s been on my todo list. What I’d like is to have a view to set style properties similar to the view you see when setting element attributes/properties:
The elements themselves can be created in any framework that’s able to build web components. Lit is the framework I’ve used. You can learn more about how to use Lit/LitElement here: https://lit.dev/. You aren’t limited to lit however. There are many libraries, compilers and wrappers that can be used to create web components. Some examples can be found here: WebComponents.dev. In the future I plan on creating examples for how to create components using something other than lit such as React and stencil, although that’s currently not super high up on my priority list.
9 months later, we would still, highly benefit from a walk thru example type for this idea. Teams playing games with multiple scoring locations could really benefit from an example if any from the community has put one together yet.
