Add A New Component To Cloe UI

Cloe UI’s top level component is called App. It’s subcomponents are:

  • The Navigation Bar

  • The Sidebar

  • Main Components (Controller, Rendering…)

This tutorial will give an example on how to add a new Main Component to Cloe UI. Let’s say you want to add a component which displays the current simulation time.

Preparation

You have to define the new component in a new file src/components/simTime.jsx.

1import React from "react";
2
3function SimTime(props) {
4    const { currentSimTime } = props;
5    return <h1>{currentSimTime}</h1>;
6}
7export default SimTime;

Implementation Into Cloe UI

Now you have to add SimTime as subcomponent to the App component of Cloe UI. App is defined in src/App.js.

The first step is to import the new component. All needed components are imported at the top of the file, you just add our new component like this:

import SimTime from "./components/simTime"

App distributes all components on two columns. In order to do that, its render() method creates an array which includes all components plus an id. Add our component to it and provide the simulation time with the prop currentSimTime.

1const components = [
2  { id: 0, component: <Rendering sensors={sensors} /> },
3  { id: 1, component: <Simulation simulation={simulation} host={host} /> },
4  { id: 2, component: <Binding binding={binding} /> },
5  { id: 3, component: <EventListWrapper events={events} /> },
6  { id: 4, component: <SimTime currentSimTime={this.state.simTime} /> }
7];

The last step is to assign our component to an AppColumn. This will indicate on which of the two columns it will appear by default.

This assignment is done in the constructor method of app. To assign our component, you add it’s id (4 in this case) to either this.componentsOnLeftSide or this.componentsOnRightSide:

1this.componentsOnLeftSide = cookies.get("firstColumn") || [0, 4];
2this.componentsOnRightSide = cookies.get("secondColumn") || [1, 2, 3];

So in this example you will render it on the left side of the app, right under the controller hmi component with the id 0.

Now you are finished and can reload Cloe UI to see the result.

Note

Since the old componentsOnLeftSide and componentsOnRightSide are stored in cookies which will overwrite the new assignment, make sure to delete the cookies before reloading Cloe UI.