It took longer than I would have liked, but I’m happy to announce the initial 2024 release of FRC Web Components (FWC).
For those unfamiliar with the project FWC is a web based project focused on providing teams with tools to build custom dashboards. The project also provides an app which can be found here: GitHub - frc-web-components/app: Tauri app for FRC Web Components dashboard
Documentation for FWC can be found here: GitHub - frc-web-components/frc-web-components: Web components to build custom dashboards for the FIRST Robotics Competition
If you’d like to try out the app without downloading it an online version can be found here: FRC Web Components
Component documentation and examples can be found here: @storybook/cli - Storybook
Dashboard App
The app provides an interface similar to Shuffleboard’s, with an area to drag components onto, an interface to connect components to NetworkTables, and the ability to save and load previously created dashboards.
Documentation on the dashboard interface can be found here: frc-web-components/docs/dashboard.md at master · frc-web-components/frc-web-components · GitHub
Dashboard Plugins
The app also contains a plugin system that allows for adding your own custom components and themes. FWC provides a cli tool with templates to create plugins and custom dashboards using lit, react or svelte. FWC is framework agnostic and should support other frameworks as well such as vue, angular and solidjs so more templates may be provided in the future.
Generating a plugin or custom dashboard is simple. Simply run the following command which asks a few questions including the template you’d like to get started with:
# my-first-plugin can be replaced with your plugin's name
npm init fwc@latest my-first-plugin
The above command with the svelte plugin template selected generates the following code:
This plugin can be built and loaded into the dashboard:
Plugin documentation can be found here: frc-web-components/docs/plugins.md at master · frc-web-components/frc-web-components · GitHub
Documentation for generating plugins can also be found in the git repo: frc-web-components/examples/svelte-plugin/README.md at master · frc-web-components/frc-web-components · GitHub
Custom Dashboards
The components built into the dashboard app can be imported into your own custom dashboard. The best way to get started is by using the cli tool. Component documentation can be found here: @storybook/cli - Storybook
The storybook examples contain useful information like how to import the components and use them in your code:
FWC also provides functions to help connect your components to NetworkTables. For example you can use the getEntry function provided by the @frc-web-components/svelte package to create a writable svelte store that can be used to send and receive updates from a NT4 topic:
Documentation for generating custom dashboards using the cli can be found here: frc-web-components/examples/svelte-custom-dashboard/README.md at master · frc-web-components/frc-web-components · GitHub
Contributing
There currently isn’t documentation for contributing, although any help is welcome, including suggestions and opening an issue for any bugs you find. There’s plenty of features that I plan to support in the future, including adding additional components and dashboard generation from robot code using the existing interface used for Shuffleboard. Probably the easiest way to contribute code is by creating a new components you’d like to share with the community, including any specific to this year’s game.
