Home

Welcome to the pstdl-ui wiki! 😄

The pstdl-ui was created to quickly develop ground control software for robotic prototypes. It provides many pre-built react components as well as some helpful state management hooks. It is built in TypeScript and SCSS.

Usage

Setup

To get started using pstdl-ui, everything need to be wrapped within a PUIApp. Import PUIApp and use it as the root component.

import React from "react";
import ReactDOM from "react-dom";
import {PUIApp} from "@pstdl/ui";

ReactDOM.render(
	<PUIApp>
		<span>Hello, pstdl-ui!</span>
	</PUIApp>,
	document.getElementById("root")
);

Components

There are many components that with pstdl-ui. They are broken up into a few sections. There are status and view components. A status component displays data to the user. A view components displays information to the user. Status components are of two forms: mutable or immutable. Mutable status components let the user change the status, immutable status components are non-editable by the user, however they help display data.

You can read more about components in each component's documentation:

• PUIGage
• PUIImmutableBinaryStatus
• PUIImmutableNumericStatus
• PUILog
• PUIMutableBinaryStatus
• PUIMutableNumericStatus
• PUIPicker
• PUISegmentedPicker
• PUIAlert
• PUIToast
• PUICard
• PUITopBar

Hooks

There are lots of hooks provided in pstdl-ui. Most aid with state management of your react app. Using PUIApp as your root component, all children will receive access to PUIContext which provides a global state system. There are custom hooks to abstract away the complexities of the state system. For example, the following hook would handle the state management for you and display a yellow warning toast to the user with the message "Hello, pstdl-ui!" for 4 seconds and then automatically dissapear.

import { usePUIToast } from "@pstdl/ui";
const toast = usePUIToast();
toast({
	msg: "Hello, pstdl-ui!",
	type: PUIToastType.WARNING,
	duration: 4
})

You can read more about hooks in each hook's documentation:

• PUIHookAlert
• PUIHookLog
• PUIHookState
• PUIHookToast

Controllers

Controllers work to manage something about your react application. There is an PUIAppController which you will never need to directly use, but it helps provide the state context. A more helpful controller is a PUIKeyboardController, this provides event listeners to listen to keyboard shortcuts and key-presses. The PUIGamepadController allows you to quickly attach a gamepad to control your application.

import {PUIGamepadController} from "@pstdl/ui;

const gamepadController = new PUIGamepadController();

gamepadController.on("leftJoystickMove", (x, y) => {
	console.log(`Left joystick moved to: (${x}, ${y}).`)
});

You can read more about controllers in each controller's documentation:

• PUIAppController
• PUIKeyboardController
• PUIGamepadController

Example

Although everything has documentation in its wiki page, here is an example of one of the components. Below shows how you can use a PUILog to display helpful messages to the user.

Notice that PUILog requires no props, as the log state is global to PUIApp. So no need to manage your own state, anywhere you are in a functional component, you can access the log!

import {
    usePUILogInfo,
    usePUILogWarning,
    usePUILogDebug,
    usePUILogError
} from "@pstdl/ui";

function TestBed(): ReactElement {

    // usePUILog*() will give you a hook
    // that logs any data you send it
	const logInfo = usePUILogInfo();
	const logWarning = usePUILogWarning();
	const logDebug = usePUILogDebug();
	const logError = usePUILogError();
	
    // This just makes sure the logs are only
    // fired off the first time the component
    // is mounted or updated to prevent a cyclical
    // state update.
	useEffect(() => {
		logWarningInfo("Log has started up!");
		logWarning("This is a warning!")
		logError("AHH! Error, oh boy.")
		logDebug("beep boop beep")
	}, [])

	return <div>
		<PUILog /> // no passing props of logs around :)
	</div>

}