Home

Welcome to the odin-react wiki

Now updated to Version 2!

Odin React is a React package designed to make the development of GUIs for Odin Control interfaces easier, faster, and more uniform.

Using React, creating these GUIs is now simplified, with many of the provided Components automating the connection to the Odin Control API.

The components within Odin Control are built upon the Bootstrap React library, which provides access to the modern style components, as well as many means of controlling the layout of the page. This also means Odin React Apps are automatically responsive, and will be viewable on multiple screen sizes, reorganising the page so that everything fits properly.

Within this wiki are descriptions of each component, and a table of their properties. Additionally, some basic tutorial style pages have been created to demonstrate some of the ways these components might come together to create a GUI.

These tutorials will expect a basic understanding of how React works, and so it is recommended you complete the tutorial available on the react website, here

Within the Odin React repo, there is also an Example Project that can be run alongside the example Odin Control Adapter, to see how a fully functional React App GUI might look and work.

There also exists a Template Repository which sets up a lot of the boiler plate for creating a new odin-react Application.

Version 2 Changes

The new version of odin-react has been rebuilt to incorporate feedback from the previous edition. It now uses Vite as it's build framework, to remove the deprecated Create React App dependency.

Additionally, the package has now been designed to work with Typescript, so that in future projects, the GUI can rely on and infer types for all the component properties and other values. This means that, during development, less effort has to be spent on checking if a variable is the expected type, or not knowing if a Object has a certain member function. Typescript still compiles into standard Javascript when the App gets built, so serving the final version from Odin Control will be no different than if using standard Javascript, but it provides many utilities during development to reduce bugs that stem from unexpected value types.

Major Changes include:

WithEndpoint

• Now handles various values better. The new default behaviour is to perform it's PUT request when the user hits enter within an input. It no longer has the "wait until a second after changes stop" behaviour.
• If applied to an input, it highlights the background of that input if the value displayed has changed from the value received from the Endpoint
• It no longer performs it's own GET requests to get the initial value.
• If the value on the endpoint changes, the value on the WithEndpoint component will also change to match, unless it's currently been edited by a user but not submitted.

AdapterEndpoint

• The Adapter Endpoint can now utilize Metadata if it's supported by the Adapter. This allows other components to perform Type Checking, check the potential minimum/maximum values, check if the parameter should be readOnly, and more.
• If using Typescript, the Adapter Endpoint can be provided with an Interface defining the expected shape and Parameters from an Adapter's Parameter tree. This means that accessing the values within the data structure should be more streamlined, as the data object will already know what is and isn't a part of it's structure.
• Support for POST and DELETE HTTP methods has been added. Whilst these are uncommon within Adapters, the support is now there should a project need it.
• The GET method can now define both if it requires Metadata, and set the return type from the request. Whilst this defaults to JSON, the Adapter Endpoint can now support the accessing of Images and other data types.

OdinGraph

• The Graph component can now support more detailed data structures, and can if need be be treated just as a Plotly graph would be in terms of the types of data and other props passed to it.

New Components

• OdinErrorContext: An error context is now available so that errors that occur within components can be reported to the user on the interface. This means that if any HTTP request throws an error, the user will now be informed.
• OdinEventLog: An Event Log Display component has been created, to display any logging that the adapter might make available.
• OdinLiveView: A Live View component designed to work with the original LiveViewAdapter from Odin Data, but can be used with any adapter that provides an image on the Parameter tree.
• OdinTable: An easy way to create a table, designed to work well with Parameters directly from the Endpoint