100 lines
2.9 KiB
TypeScript
100 lines
2.9 KiB
TypeScript
import * as React from "react";
|
|
import { DirectionButton } from "./direction_button";
|
|
import { homeAll, findHome } from "../../devices/actions";
|
|
import { JogMovementControlsProps } from "./interfaces";
|
|
import { getDevice } from "../../device";
|
|
import { buildDirectionProps } from "./direction_axes_props";
|
|
import { t } from "../../i18next_wrapper";
|
|
import {
|
|
cameraBtnProps,
|
|
} from "../../devices/components/fbos_settings/camera_selection";
|
|
const DEFAULT_STEP_SIZE = 100;
|
|
|
|
/*
|
|
* photo | ^ | ^
|
|
* home | < v > | v
|
|
*/
|
|
|
|
export function JogButtons(props: JogMovementControlsProps) {
|
|
const { stepSize, xySwap, arduinoBusy, doFindHome } = props;
|
|
const homeBtnAction = doFindHome
|
|
? () => findHome("all")
|
|
: () => homeAll(100);
|
|
const directionAxesProps = buildDirectionProps(props);
|
|
const rightLeft = xySwap ? "y" : "x";
|
|
const upDown = xySwap ? "x" : "y";
|
|
const commonProps = {
|
|
steps: stepSize || DEFAULT_STEP_SIZE,
|
|
disabled: arduinoBusy
|
|
};
|
|
const camDisabled = cameraBtnProps(props.env);
|
|
return <table className="jog-table">
|
|
<tbody>
|
|
<tr>
|
|
<td>
|
|
<button
|
|
className={`fa fa-camera arrow-button fb-button ${
|
|
camDisabled.class}`}
|
|
title={camDisabled.title || t("Take a photo")}
|
|
onClick={camDisabled.click ||
|
|
(() => getDevice().takePhoto().catch(() => { }))} />
|
|
</td>
|
|
<td />
|
|
<td />
|
|
<td>
|
|
<DirectionButton {...commonProps}
|
|
axis={upDown}
|
|
direction="up"
|
|
directionAxisProps={directionAxesProps[upDown]} />
|
|
</td>
|
|
<td />
|
|
<td />
|
|
<td>
|
|
<DirectionButton {...commonProps}
|
|
axis="z"
|
|
direction="up"
|
|
directionAxisProps={directionAxesProps.z} />
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<button
|
|
className="i fa fa-home arrow-button fb-button"
|
|
title={doFindHome ? t("find home") : t("move to home")}
|
|
onClick={homeBtnAction}
|
|
disabled={arduinoBusy || false} />
|
|
</td>
|
|
<td />
|
|
<td>
|
|
<DirectionButton {...commonProps}
|
|
axis={rightLeft}
|
|
direction="left"
|
|
directionAxisProps={directionAxesProps[rightLeft]} />
|
|
</td>
|
|
<td>
|
|
<DirectionButton {...commonProps}
|
|
axis={upDown}
|
|
direction="down"
|
|
directionAxisProps={directionAxesProps[upDown]} />
|
|
</td>
|
|
<td>
|
|
<DirectionButton {...commonProps}
|
|
axis={rightLeft}
|
|
direction="right"
|
|
directionAxisProps={directionAxesProps[rightLeft]} />
|
|
</td>
|
|
<td />
|
|
<td>
|
|
<DirectionButton {...commonProps}
|
|
axis="z"
|
|
direction="down"
|
|
directionAxisProps={directionAxesProps.z} />
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td />
|
|
</tr>
|
|
</tbody>
|
|
</table>;
|
|
}
|