Skip to content

Commit

Permalink
Add checkbox to port settings view.
Browse files Browse the repository at this point in the history
  • Loading branch information
@gbmhunter
gbmhunter committed Jun 18, 2024
1 parent 16565ff commit f42b189
Showing 1 changed file with 59 additions and 28 deletions.
87 changes: 59 additions & 28 deletions src/view/Settings/PortConfigurationSettings/PortConfigurationSettingsView.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,11 +12,11 @@ import {
FormControlLabel,
Autocomplete,
TextField,
} from "@mui/material";
import { OverridableStringUnion } from "@mui/types";
import { observer } from "mobx-react-lite";
} from '@mui/material';
import { OverridableStringUnion } from '@mui/types';
import { observer } from 'mobx-react-lite';

import { App, PortType } from "src/model/App";
import { App, PortType } from 'src/model/App';
import {
PortState,
DEFAULT_BAUD_RATES,
Expand All @@ -25,9 +25,9 @@ import {
STOP_BIT_OPTIONS,
StopBits,
FlowControl,
} from "src/model/Settings/PortConfigurationSettings/PortConfigurationSettings";
import { portStateToButtonProps } from "src/view/Components/PortStateToButtonProps";
import styles from "./PortConfigurationSettingsView.module.css";
} from 'src/model/Settings/PortConfigurationSettings/PortConfigurationSettings';
import { portStateToButtonProps } from 'src/view/Components/PortStateToButtonProps';
import styles from './PortConfigurationSettingsView.module.css';

interface Props {
app: App;
Expand All @@ -37,22 +37,25 @@ function PortConfigurationView(props: Props) {
const { app } = props;

return (
<div className={styles.noOutline} style={{ display: "flex", flexDirection: "column", alignItems: "start" }}>
<div style={{ height: "20px" }}></div>
<div className={styles.noOutline} style={{ display: 'flex', flexDirection: 'column', alignItems: 'start' }}>
<div style={{ height: '20px' }}></div>

<Box display="flex" flexDirection="row">
{/* ============================================================== */}
{/* BAUD RATE */}
{/* ============================================================== */}
<Tooltip title="The baud rate (bits/second) to use on the serial port. You can select one of the popular pre-defined options or enter in a custom rate. Custom value must be a integer in the range [1, 2000000 (2M)]. Most OSes/hardware will accept values outside their valid range without erroring, but will just not work properly. Common baud rates include 9600, 56700 and 115200. If you receive garbage data, it might be because you have the wrong baud rate selected.">
<Tooltip
title="The baud rate (bits/second) to use on the serial port. You can select one of the popular pre-defined options or enter in a custom rate. Custom value must be a integer in the range [1, 2000000 (2M)]. Most OSes/hardware will accept values outside their valid range without erroring, but will just not work properly. Common baud rates include 9600, 56700 and 115200. If you receive garbage data, it might be because you have the wrong baud rate selected."
enterDelay={500}
>
<Autocomplete
freeSolo
options={DEFAULT_BAUD_RATES.map((option) => option.toString())}
renderInput={(params) => (
<TextField
{...params}
label="Baud rate"
error={app.settings.portConfiguration.baudRateErrorMsg !== ""}
error={app.settings.portConfiguration.baudRateErrorMsg !== ''}
helperText={app.settings.portConfiguration.baudRateErrorMsg}
onKeyDown={(e) => {
e.stopPropagation();
Expand All @@ -63,19 +66,19 @@ function PortConfigurationView(props: Props) {
sx={{ m: 1, width: 160 }}
size="small"
onChange={(event: any, newValue: string | null) => {
console.log("onChange() called. newValue: ", newValue);
console.log('onChange() called. newValue: ', newValue);
}}
inputValue={app.settings.portConfiguration.baudRateInputValue}
onInputChange={(event, newInputValue) => {
console.log("newInputValue: ", newInputValue);
console.log('newInputValue: ', newInputValue);
app.settings.portConfiguration.setBaudRateInputValue(newInputValue);
}}
/>
</Tooltip>
{/* ============================================================== */}
{/* NUM. DATA BITS */}
{/* ============================================================== */}
<Tooltip title="The number of bits in each frame of data. This is typically set to 8 bits (i.e. 1 byte)." placement="right">
<Tooltip title="The number of bits in each frame of data. This is typically set to 8 bits (i.e. 1 byte)." placement="right" enterDelay={500}>
<FormControl sx={{ m: 1, minWidth: 160 }} size="small">
<InputLabel>Num. data bits</InputLabel>
<Select
Expand All @@ -102,6 +105,7 @@ function PortConfigurationView(props: Props) {
<Tooltip
title='The parity is an extra bit of data in a frame which is set to make the total number of 1s in the frame equal to the parity setting. If "none", no parity bit is used or expected. If "odd", an odd number of 1s is expected, if "even" an even number of 1s is expected. "none" is the most common setting.'
placement="right"
enterDelay={500}
>
<FormControl sx={{ m: 1, minWidth: 160 }} size="small">
<InputLabel>Parity</InputLabel>
Expand All @@ -126,7 +130,7 @@ function PortConfigurationView(props: Props) {
{/* ============================================================== */}
{/* STOP BITS */}
{/* ============================================================== */}
<Tooltip title='The num. of stop bits is the number of bits used to mark the end of the frame. "1" is the most common setting.' placement="right">
<Tooltip title='The num. of stop bits is the number of bits used to mark the end of the frame. "1" is the most common setting.' placement="right" enterDelay={500}>
<FormControl sx={{ m: 1, minWidth: 160 }} size="small">
<InputLabel>Stop bits</InputLabel>
<Select
Expand Down Expand Up @@ -155,6 +159,7 @@ function PortConfigurationView(props: Props) {
<Tooltip
title='Controls whether flow control is used. "none" results in no flow control being used. "hardware" results in the CTS (clear-to-send) and RTS (ready-to-send) lines being used. "none" is the most common option. CTS/RTS must be connected in hardware for this to work. If you are not seeing any data travel across your serial port, you might want to try changing this setting.'
placement="right"
enterDelay={500}
>
<FormControl sx={{ m: 1, minWidth: 160 }} size="small">
<InputLabel>Flow control</InputLabel>
Expand All @@ -177,12 +182,32 @@ function PortConfigurationView(props: Props) {
</FormControl>
</Tooltip>

<div style={{ height: "20px" }}></div>
<div style={{ height: '20px' }}></div>

{/* =============================================================== */}
{/* ALLOW SETTINGS CHANGES WHEN OPEN */}
{/* =============================================================== */}
<Tooltip
title="Check this if you want to be able to quickly change settings when the port is open. Because of limitations in the Web Serial API, if a port setting is changed when the port is open, the port will be quickly closed and opened again."
enterDelay={500}
>
<FormControlLabel
control={
<Checkbox
checked={app.settings.portConfiguration.allowSettingsChangesWhenOpen}
onChange={(e) => {
app.settings.portConfiguration.setAllowSettingsChangesWhenOpen(e.target.checked);
}}
/>
}
label="Allow settings changes when open (will reconnect)"
/>
</Tooltip>

{/* =============================================================== */}
{/* OPEN AND GO TO TERMINAL CHECKBOX */}
{/* =============================================================== */}
<Tooltip title="Open serial port and go to the terminal view as soon as it is selected from the popup, saving you two button presses!">
<Tooltip title="Open serial port and go to the terminal view as soon as it is selected from the popup, saving you two button presses!" enterDelay={500}>
<FormControlLabel
control={
<Checkbox
Expand All @@ -199,7 +224,10 @@ function PortConfigurationView(props: Props) {
{/* =============================================================== */}
{/* RECONNECT ON STARTUP CHECKBOX */}
{/* =============================================================== */}
<Tooltip title="On startup, if NinjaTerm can find last used serial port it will reselect it. If it was previously in the CONNECTED state, the port will also be re-opened.">
<Tooltip
title="On startup, if NinjaTerm can find last used serial port it will reselect it. If it was previously in the CONNECTED state, the port will also be re-opened."
enterDelay={500}
>
<FormControlLabel
control={
<Checkbox
Expand All @@ -215,7 +243,10 @@ function PortConfigurationView(props: Props) {
{/* =============================================================== */}
{/* REOPEN ON UNEXPECTED CLOSE CHECKBOX */}
{/* =============================================================== */}
<Tooltip title="If the serial port unexpectedly closes (e.g. USB serial cable is removed), NinjaTerm will try to automatically reopen the port when it becomes available again.">
<Tooltip
title="If the serial port unexpectedly closes (e.g. USB serial cable is removed), NinjaTerm will try to automatically reopen the port when it becomes available again."
enterDelay={500}
>
<FormControlLabel
control={
<Checkbox
Expand All @@ -229,9 +260,9 @@ function PortConfigurationView(props: Props) {
/>
</Tooltip>

<div style={{ height: "20px" }}></div>
<div style={{ height: '20px' }}></div>

<div id="row-with-select-port-and-open-port-buttons" style={{ display: "flex", gap: "20px" }}>
<div id="row-with-select-port-and-open-port-buttons" style={{ display: 'flex', gap: '20px' }}>
{/* =============================================================== */}
{/* SELECT PORT BUTTON */}
{/* =============================================================== */}
Expand All @@ -243,7 +274,7 @@ function PortConfigurationView(props: Props) {
// Only let user select a new port if current one is closed
disabled={app.portState !== PortState.CLOSED}
data-testid="request-port-access"
sx={{ width: "150px" }}
sx={{ width: '150px' }}
>
Select Port
</Button>
Expand All @@ -254,7 +285,7 @@ function PortConfigurationView(props: Props) {
variant="contained"
color={
portStateToButtonProps[app.portState].color as OverridableStringUnion<
"inherit" | "primary" | "secondary" | "success" | "error" | "info" | "warning",
'inherit' | 'primary' | 'secondary' | 'success' | 'error' | 'info' | 'warning',
ButtonPropsColorOverrides
>
}
Expand All @@ -266,21 +297,21 @@ function PortConfigurationView(props: Props) {
} else if (app.portState === PortState.OPENED) {
app.closePort();
} else {
throw Error("Invalid port state.");
throw Error('Invalid port state.');
}
}}
// Disabled when port is closed and no port is selected, or if the baud rate is invalid
disabled={
(app.portState === PortState.CLOSED && app.port === null && app.lastSelectedPortType !== PortType.FAKE) || app.settings.portConfiguration.baudRateErrorMsg !== ""
(app.portState === PortState.CLOSED && app.port === null && app.lastSelectedPortType !== PortType.FAKE) || app.settings.portConfiguration.baudRateErrorMsg !== ''
}
sx={{ width: "150px" }}
sx={{ width: '150px' }}
data-testid="open-close-button"
>
{portStateToButtonProps[app.portState].text}
</Button>
</div>

<div style={{ height: "20px" }}></div>
<div style={{ height: '20px' }}></div>
{/* =============================================================== */}
{/* INFO ON SELECTED SERIAL PORT */}
{/* =============================================================== */}
Expand All @@ -299,7 +330,7 @@ function PortConfigurationView(props: Props) {
Selected Port Vendor ID: {app.serialPortInfo?.usbVendorId}
</Typography>

<div style={{ height: "20px" }}></div>
<div style={{ height: '20px' }}></div>
{/* =============================================================== */}
{/* PORT CONNECTED/DISCONNECTED STATUS */}
{/* =============================================================== */}
Expand Down

0 comments on commit f42b189

Please sign in to comment.