# Adding and Customizing Widgets

Widgets are the cards on the grid that display information about the robot.

### Adding Widgets

On the menu bar at the top of the screen, there is a button that says "Add Widget" with a **+**. Clicking it will open the widget dialog, which will look like this. You must be connected to your robot in order for tiles to appear.

![Widget Dialog](https://2618450072-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEx5VqM8nP9DEeHJRWNYF%2Fuploads%2FYI6nKButG1EhwScXbR4T%2Fdialog_collapsed.png?alt=media\&token=75d3d59e-6093-422c-925c-779923666cf7)

By clicking on each table name, you will reveal any sub-tables that Network Tables has.

![Sub-Tables](https://2618450072-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEx5VqM8nP9DEeHJRWNYF%2Fuploads%2F69DbrBM1bR0U1fG7WWSP%2Fdialog_expanded.png?alt=media\&token=d8f8e74b-daae-4993-85eb-c37725e18899)

To make finding the data you want to display easier, you can type a search query into the search box at the bottom of the dialog. This will only display values that match the search query.

![Search Query](https://2618450072-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEx5VqM8nP9DEeHJRWNYF%2Fuploads%2FHHbl2LjaEURk2LiVqpAs%2Fdialog_search.png?alt=media\&token=b0b6d383-2e72-4065-889b-7fbbda22c51d)

When you find the data for the widget you would like to add, simply click on it, and drag it to the location you want to place the widget. A red or green outline will appear indicating weather or not the location you are hovering on is a valid location.

![Dragging a Widget to the Grid](https://2618450072-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEx5VqM8nP9DEeHJRWNYF%2Fuploads%2FDZIumzb6DjHcsa0U6o47%2Fdialog_dragging.png?alt=media\&token=b37598a5-b068-48c0-a186-ad8c2a79b886)

A widget will be dragged only if there is a valid type for that widget. For example, if you try to drag a boolean value from the dialog, a boolean box will be dragged by your mouse cursor. If you drag a table such as `/Shuffleboard`, which does not have a data type property to it, nothing will appear under your mouse cursor.

When you let go of your mouse, the widget will be added to the grid.

After you place a widget on the grid, you can resize it by dragging the edges of the widget's box.

![Resizing a Widget](https://2618450072-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEx5VqM8nP9DEeHJRWNYF%2Fuploads%2FjClU8GRZnoakyzERTOtq%2Fdialog_resizing.png?alt=media\&token=badf2107-dd60-4852-bc2e-02943bad9e49)

### Customizing Widgets

When you right click on a widget container (the card that holds the widget), a context menu will appear with several options: `Edit Properties`, or `Remove`.

![Right Click Menu](https://2618450072-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEx5VqM8nP9DEeHJRWNYF%2Fuploads%2F0HCsykyWqhS9kufmgK6A%2Fcontext_menu.png?alt=media\&token=7d947c5c-1811-4c6e-b445-cec5d1fd5c3f)

Clicking `Remove` will remove the widget from the grid, and clicking `Edit Properties` will open a menu with several customization options.

![Edit Properties Menu](https://2618450072-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEx5VqM8nP9DEeHJRWNYF%2Fuploads%2FzSJVhWE5HVIcrDAIG1SL%2Fproperties_menu.png?alt=media\&token=3cc63f5c-9f25-404b-a2a0-3a6c6898c89d)

Every widget will have `Container Settings` and `Network Tables Settings`. The container settings allow you to change the title and widget type. Depending on what type of data you are displaying, you are able to change the widget type. You must be connected to your robot for any additional options to appear.

Under `Container Settings`, there will be settings unique for the widget type, titled `<Widget Type> Settings`. Not every widget will have unique properties to it, if your widget does not have any unique edit properties, there will not be anything listed.

Under `Network Tables Settings`, there will be several advanced settings allowing you to change the topic that the widget will be receiving data from, along with its update period. It is recommended to not change any of these unless you are familiar with the basics of Network Tables. For more info on Network Tables, see [What is NetworkTables - FIRST Robotics Competition Documentation](https://docs.wpilib.org/en/stable/docs/software/networktables/networktables-intro.html).

### Adding a Voltage Widget (Example)

This gif is an example of how to add a widget. This adds a widget that displays the voltage, and changes a few of its settings.

![Adding Voltage Example](https://2618450072-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEx5VqM8nP9DEeHJRWNYF%2Fuploads%2FhhCfERvkyhxMMM2xDNXk%2Fadding_voltage.gif?alt=media\&token=767d2b80-2a5e-48ff-8579-3b4c976726ca)

### Copying and Pasting Widgets

Elastic supports copying and pasting widgets and layouts between different tabs. When right clicking on a widget, there is an option to copy it to the clipboard.

_Note: This is separate from the system clipboard_

![Copying Widget](https://2618450072-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEx5VqM8nP9DEeHJRWNYF%2Fuploads%2FegdF40fqyf9JwSuLvKeM%2Fcopying_widget.png?alt=media\&token=ca6a7826-1e09-4ae9-86bf-15be3f9b5223)

Right clicking in an empty spot will show a button to paste the widget. This will attempt to insert the widget into the grid with the top left corner of the widget in the grid space that the cursor is hovering in. If the widget does not fit on the grid, then it will not paste.

![Pasting Widget](https://2618450072-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEx5VqM8nP9DEeHJRWNYF%2Fuploads%2FwxvpQSNHRN2VXOw2GZgv%2Fpasting_widget.png?alt=media\&token=8aab2aa3-62ba-44be-a090-1baf5418ba60)

![Widget After Pasting](https://2618450072-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEx5VqM8nP9DEeHJRWNYF%2Fuploads%2FIegIEZbX8k2UcxNPFFmN%2Fwidget_after_pasting.png?alt=media\&token=1d167441-80fc-4d36-8ef8-d5f10a784f02)

### Camera Streams

Elastic only supports adding camera streams that are published to the RoboRIO's Camera Server. If you have a USB camera plugged into your RoboRIO, adding this line of code in your `robotInit()` method will allow you to add a camera stream to your dashboard.

```java
CameraServer.startAutomaticCapture();
```

To add a camera stream, navigate to the `CameraPublisher` table, and there will be different tables for different camera streams that can be viewed. Dragging one of these tables will create a Camera Stream widget that displays live video from the camera.

![Adding Camera Stream](https://2618450072-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEx5VqM8nP9DEeHJRWNYF%2Fuploads%2FPjZGJ35augIChRwy5l89%2Fcamera_stream.png?alt=media\&token=82012d8f-79ed-4330-b94f-9fa2681629f2)
