> For the complete documentation index, see [llms.txt](https://harmoware-develop-tutorial.gitbook.io/tutorial/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://harmoware-develop-tutorial.gitbook.io/tutorial/added-harmoware-vis-control.md).

# Added Harmoware-VIS control

Added PLAY · PAUSE button and play direction switching button.

Import control objects from Harmoware-VIS.

{% code title="app.js" %}

```javascript
// before
import {
  Container, connectToHarmowareVis, HarmoVisLayers, MovesLayer, MovesInput
} from 'harmoware-vis';

// after
import {
  Container, connectToHarmowareVis, HarmoVisLayers, MovesLayer, MovesInput,
  PlayButton, PauseButton, ForwardButton, ReverseButton
} from 'harmoware-vis';
```

{% endcode %}

Get necessary state from Harmoware-VIS props.

{% code title="app.js" %}

```javascript
// before
const { actions, clickedObject, inputFileName, viewport,
  routePaths, movesbase, movedData } = this.props;

// after
const { actions, clickedObject, inputFileName, viewport,
  routePaths, movesbase, movedData,
  animatePause, animateReverse } = this.props;
```

{% endcode %}

Added Harmoware-VIS control object to JSX.

{% code title="app.js" %}

```jsx
// add in ul tag group
<li className="flex_row">
  {animatePause ?
    <PlayButton actions={actions} /> : <PauseButton actions={actions} />
  }
  {animateReverse ?
    <ForwardButton actions={actions} /> : <ReverseButton actions={actions} />
  }
</li>
```

{% endcode %}

![](https://2247361432-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-L_GRHvORH_hAPpwl_SU%2F-L_H-4Fs2Q60Oqb1iVLG%2F-L_H-8WnWVzTe7VT5OMI%2Fcapture2.jpg?alt=media\&token=31df1449-0426-4d2e-820c-6e68d8beeff7)