FRC Network Tables Svelte

This is a library for creating custom dashboards using the modern web framework Svelte. It's still heavily under development, but has several features built in already.

Components

Currently, all components only register their key watchers on initial mount. On unmount, the listeners still run in the background, so it has potential for memory leaks. This is something that is planned to be addressed soon in the future.

Autonomous Picker

Provides a selection menu with autonomous menus

BooleanIndicator

Simple indicator with colors representing a true or false value in a network table key

ConnectionStatus

Shows whether the NetworkTables server can be accessed

FieldLayout

WIP: Will show the robot position on the field

Stores

Robot State

Provides several properties about the robot's current state

$robotState;

isEnabled: boolean;
isAutonomous: boolean;
isTest: boolean;
isEStopped: boolean;
isFMSAttached: boolean;
isDSAttached: boolean;

Match Info

Provides information about the current match, according to FMS

$eventName: string;

$matchType: string[("Unknown", "Practice", "Qualification", "Elimination")];

$matchNumber: number;

Grid

All built in components support a Shuffleboard style grid system for quick UI development. The grid is configurable size, with defaults of 12 columns, 5 rows. This can be changed with the rows or columns properties on the Grid component.

Pass in the rowSpan or colSpan props on components to change how wide or tall the components are.

Theming

Currently, all theming is done through CSS variables. There are no default values, so they need to be set manually.

:root {
    --true-boolean: green;
    --false-boolean: red;
}

Custom components

The NetworkTables API is exposed for use in custom components. This uses the pynetworktables2js API, documented at https://robotpy.readthedocs.io/projects/pynetworktables2js/en/stable/api_js.html. The NetworkTables variable can be found by using import { NetworkTables } from "frc-nt-svelte";

If you want your component to have the same grid capabilities as the built in components, wrap it in a GridItem and pass in a colSpan and rowSpan variable.

Sample component (BooleanIndicator)

<script>
    import NetworkTables from "./utils/networktables";
    import { onMount } from "svelte";
    import GridItem from "./grid/GridItem.svelte";

    let value = false;
    export let ntKey;
    export let rowSpan = 1;
    export let colSpan = 1;

    onMount(() => {
        NetworkTables.addKeyListener(
            ntKey,
            (key, data, isNew) => {
                value = data;
            },
            true
        );
    });
</script>

<GridItem {colSpan} {rowSpan}>
    <div class="indicator" class:true={value}>
        <slot />
    </div>
</GridItem>

<style>
    .indicator {
        background-color: var(--false-boolean);
        padding: 20px;
        width: 100%;
        height: 100%;
    }

    .true {
        background-color: var(--true-boolean);
    }
</style>