Introducing FRC Web Components

FRC Web Components is a set of web components you can use to build custom HTML dashboards for your robot.

FRC Web Components works with pynetworktables2js to communicate with your robot over NetworkTables. To use, run pynetworktables2js where you’re serving your HTML files, include the frc-web-components.js file as a script in your HTML page, and wrap your HTML in a frc-dashboard tag, and you’re ready to go!

<html>
  <head>
    <title>My Robot Dashboard!</title>
  </head>
  <body>
    <frc-dashboard>
      <nt-string key="/robotName" value="Dozer"></nt-string>
      <nt-number key="/angle" value="135"></nt-number>
      <h1>
        My robot's name is <frc-label source-key="/robotName"></frc-label>
      </h1>
      <frc-differential-drivebase
        source-key="/LiveWindow/Ungrouped/DifferentialDrive[1]"
      ></frc-differential-drivebase>
      <frc-gyro source-key="/angle" precision="2"></frc-gyro>
    </frc-dashboard>
    <script src="./frc-web-components.js"></script>
  </body>
</html>

Installing is easy:

  • Install pynetworktables2js
  • Download the frc-web-components.js file from the releases page and include it in your HTML dashboard.

Usage examples can be found here.

Additional documentation can be found on the github page’s readme: https://github.com/frc-web-components/frc-web-components

FRC Web Components is meant to extensible, meaning you can create your own components if the list of available ones don’t fit your needs!

Any feedback or contributions would be greatly welcomed! This is a new project so there are sure to be some issues. Please let me know if you want to test or need help getting started.

13 Likes

Looks interesting. I’m not a programmer but I will forward this to our programming team.

1 Like

Just wanted to share an example of a custom dashboard you can build using FRC Web Components:

It’s a touchscreen interface the students I mentor built that we were planning on using for this year’s competition. The 5 buttons on the left are the different modes the robot can be in. You can manually press these buttons to change the robot’s controls (except for when the match transitions to teleop or auto, then the change is automatic).

You can aim and shoot manually, or choose auto aiming, which will take the robot through 4 states: Backup, aim, stop, and shoot. This is visually represented by the “Shooter Pizza Tracker”, inspired by domino’s pizza tracker.

We have a ball counter for our intake which automatically shows how many balls there are, and an input field below for debugging if it miscounts.

There’s an interactive control panel, which spins to what the color sensor sees. You can also press on the different colors to go to that specific color, or press the rotate buttons to rotate the control panel a specific number of times.

There’s radio buttons to select between high and low gear.

And finally a control to transition through our different stages of climbing.

8 Likes

Interesting idea. Have you considered designing this for a modern web framework (e.g. React)?

lit-element and lit-html are about as modern as they come. They make use of new web standards which allow you to create native elements. I chose them for a few reasons:

  1. LitElement is more lightweight than angular/react/vue since it’s just a class that extends the brower’s HTMLElement class.
  2. It can be used without any tools, there’s no need for webpack, babel, or any transpilers. This makes it much more approachable compared to other frameworks that require a lot of time setting up and use of tools that require a lot of time to learn. It allowed me to create a script that you can include on a page that lets you build a dashboard with just a few HTML elements and CSS. No need for any javascript unless you want to build your own components.
  3. It’s simpler and easier to learn compared to frameworks like React and Angular which have pretty steep learning curves. I wanted to make something as easy and approachable as possible without losing any of the power other frameworks have. I chose this approach since many programmers in FIRST do not have a lot of experience with web technologies, so lowering the barrier as much as possible to creating a custom dashboard was a must.
  4. LitElement is here to stay. That’s not to say React/Angular/Vue aren’t, but LitElement is based on APIs supported natively by the browser, so as long as support for them will be around there will be support for LitElement or something like it.
  5. The elements created by LitElement are framework agnostic since they are native to the browser and can be included in a project that uses React/Angular/Vue/etc. This makes the approach less opinionated and allows you to use the tools you want to use. You could for example include the web components inside a dashboard created using the FRCDashboard project, which uses react uses electron (correction, it doesn’t use react. But my point still stands, you can use this with react or another framework if you wished to).
6 Likes

@AmoryG I have to give a huge shout out and thank you for this. It is beautiful, simple, and effective. We just purchased an external touchscreen for our driver station, and had the realization that shuffleboard does not support multiple displays so we were going to use an html solution, but had no idea where to start. This is perfect.

1 Like

Just wanted to mention a few updates:

  • Added a power distribution panel and NetworkTable tree components
  • Added new form components
  • Fixed a bunch of bugs
  • Improved examples

Here is a video of me interacting with the new components with NetworkTables:

https://www.youtube.com/watch?v=CaRYY8_vcrQ

Examples for these components and all others can be found here: https://frc-web-components.github.io/examples/vanilla/index.html

As always, any feedback is welcome. I’d love to hear if anyone wants any particular components added. A lot of the components here are based off of Shuffleboard widgets, so anything you’d like to see in Shuffleboard/Smartdashboard can be suggested here too.

1 Like