shawn/op-pedal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Jack configuration (alpha)

Browse Source
This commit is contained in:
Robin Davies
2021-08-29 14:04:59 -04:00
parent 6e1b7346f6
commit 94c7d406f7
32 changed files with 1061 additions and 293 deletions
Download Patch File Download Diff File Expand all files Collapse all files
react/CMakeLists.txt
+1
View File
@@ -25,6 +25,7 @@ add_custom_command(
src/JackServerSettingsDialog.tsx
src/JackServerSettings.tsx
src/DialogEx.tsx
src/AlsaDeviceInfo.tsx
src/AboutDialog.tsx
src/App.test.tsx
react/public/var/config.json
+1 -1
View File
@@ -1,5 +1,5 @@
{
"socket_server_port": 80,
"socket_server_port": 8080,
"socket_server_address": "*",
"max_upload_size": 1048576,
react/src/AlsaDeviceInfo.tsx
+66
View File
@@ -0,0 +1,66 @@
export default class AlsaDeviceInfo {
deserialize(input: any): AlsaDeviceInfo {
this.cardId = input.cardId;
this.id = input.id;
this.name = input.name;
this.longName = input.longName;
this.sampleRates = input.sampleRates as number[];
this.minBufferSize = input.minBufferSize;
this.maxBufferSize = input.maxBufferSize;
return this;
}
static deserialize_array(input: any): AlsaDeviceInfo[]
{
let result: AlsaDeviceInfo[] = [];
for (let i = 0; i < input.length; ++i)
{
result.push(new AlsaDeviceInfo().deserialize(input[i]));
}
return result;
}
closestSampleRate(sr: number): number
{
let result = 48000;
let bestError = 1E36;
for (let rate of this.sampleRates)
{
let error = (sr-rate)*(sr-rate);
if (error < bestError)
{
bestError = error;
result = rate;
}
}
return result;
}
closestBufferSize(buffSize: number): number
{
let result = 64;
let bestError = 1E36;
for (let sz = 2; sz <= this.maxBufferSize; sz *= 2)
{
if (sz >= this.minBufferSize)
{
let error = (sz-buffSize)*(sz-buffSize);
if (error < bestError)
{
bestError = error;
result = sz;
}
}
}
return result;
}
cardId: number = -1;
id: string = "";
name: string = "";
longName: string = "";
sampleRates: number[] = [];
minBufferSize: number = 0;
maxBufferSize: number = 0;
};
react/src/JackServerSettings.tsx
+15 -9
View File
@@ -23,31 +23,37 @@ export default class JackServerSettings {
deserialize(input: any) : JackServerSettings{
this.valid = input.valid;
this.rebootRequired = input.rebootRequired;
this.alsaDevice = input.alsaDevice?? "";
this.sampleRate = input.sampleRate;
this.bufferSize = input.bufferSize;
this.numberOfBuffers = input.numberOfBuffers;
return this;
}
constructor(sampleRate?: number, bufferSize?: number, numberOfBuffers?: number)
// constructor(alsaDevice: string, sampleRate?: number, bufferSize?: number, numberOfBuffers?: number)
// {
// if (sampleRate) this.sampleRate = sampleRate;
// if (bufferSize) this.bufferSize = bufferSize;
// if (numberOfBuffers) this.numberOfBuffers = numberOfBuffers;
// if (numberOfBuffers) {
// this.valid = true;
// }
// }
clone(): JackServerSettings
{
if (sampleRate) this.sampleRate = sampleRate;
if (bufferSize) this.bufferSize = bufferSize;
if (numberOfBuffers) this.numberOfBuffers = numberOfBuffers;
if (numberOfBuffers) {
this.valid = true;
}
return new JackServerSettings().deserialize(this);
}
valid: boolean = false;
rebootRequired = false;
alsaDevice: string = "";
sampleRate = 48000;
bufferSize = 64;
numberOfBuffers = 3;
getSummaryText() {
if (this.valid) {
return "Sample Rate: " + this.sampleRate + " BufferSize: " + this.bufferSize + " Number of Buffers: " + this.numberOfBuffers;
return this.alsaDevice + " Sample Rate: " + this.sampleRate + " BufferSize: " + this.bufferSize + " Number of Buffers: " + this.numberOfBuffers;
} else {
return "";
return "Not configured";
}
}
react/src/JackServerSettingsDialog.tsx
+260 -72
View File
@@ -35,9 +35,15 @@ import DialogContent from '@material-ui/core/DialogContent';
import MenuItem from '@material-ui/core/MenuItem';
import { nullCast } from './Utility';
import Typography from '@material-ui/core/Typography';
import { PiPedalModel, PiPedalModelFactory } from './PiPedalModel';
import AlsaDeviceInfo from './AlsaDeviceInfo';
const INVALID_DEVICE_ID = "_invalid_";
interface JackServerSettingsDialogState {
latencyText: string;
jackServerSettings: JackServerSettings;
alsaDevices?: AlsaDeviceInfo[];
};
const styles = (theme: Theme) =>
@@ -54,116 +60,297 @@ export interface JackServerSettingsDialogProps extends WithStyles<typeof styles>
open: boolean;
jackServerSettings: JackServerSettings;
onClose: () => void;
onApply: (sampleRate: number, bufferSize: number, numberOfBuffers: number) => void;
onApply: (jackServerSettings: JackServerSettings) => void;
}
function getLatencyText(sampleRate: number, bufferSize: number, numberOfBuffers: number): string {
let ms = bufferSize * numberOfBuffers / sampleRate * 1000;
function getLatencyText(settings: JackServerSettings ): string {
if (!settings.valid) return "\u00A0";
let ms = settings.bufferSize * settings.numberOfBuffers / settings.sampleRate * 1000;
return ms.toFixed(1) + "ms";
}
const JackServerSettingsDialog = withStyles(styles)(
class extends Component<JackServerSettingsDialogProps, JackServerSettingsDialogState> {
model: PiPedalModel;
constructor(props: JackServerSettingsDialogProps) {
super(props);
let jackServerSettings = props.jackServerSettings;
this.model = PiPedalModelFactory.getInstance();
this.state = {
latencyText:
getLatencyText(
jackServerSettings.sampleRate,
jackServerSettings.bufferSize,
jackServerSettings.numberOfBuffers)
latencyText: "\u00A0",
jackServerSettings: props.jackServerSettings.clone() // invalid, but not nullish
};
}
mounted: boolean = false;
requestAlsaInfo() {
this.model.getAlsaDevices()
.then((devices) => {
if (this.mounted) {
if (this.props.open) {
let settings = this.applyAlsaDevices(this.props.jackServerSettings, devices);
this.setState({
alsaDevices: devices,
jackServerSettings: settings,
latencyText: getLatencyText(settings)
});
} else {
this.setState({ alsaDevices: devices });
}
}
})
.catch((error) => {
updateLatency(e: any): void {
setTimeout(()=> {
let sampleRate: number = parseInt(nullCast<any>(document.getElementById('jsd_sampleRate')).value);
let bufferSize: number = parseInt(nullCast<any>(document.getElementById('jsd_bufferSize')).value);
let bufferCount: number = parseInt(nullCast<any>(document.getElementById('jsd_bufferCount')).value);
this.setState({
latencyText: getLatencyText(sampleRate, bufferSize, bufferCount)
});
},0);
}
handleApply() {
let sampleRate = parseInt(nullCast<any>(document.getElementById('jsd_sampleRate')).value);
let bufferSize = parseInt(nullCast<any>(document.getElementById('jsd_bufferSize')).value);
let bufferCount = parseInt(nullCast<any>(document.getElementById('jsd_bufferCount')).value);
this.props.onApply(sampleRate,bufferSize,bufferCount);
applyAlsaDevices(jackServerSettings: JackServerSettings, alsaDevices?: AlsaDeviceInfo[]) {
let result = jackServerSettings.clone();
if (!alsaDevices) {
return result;
}
if (alsaDevices.length === 0) {
result.valid = false;
result.alsaDevice = INVALID_DEVICE_ID;
return result;
}
let selectedDevice: AlsaDeviceInfo | undefined = undefined;
for (let i = 0; i < alsaDevices.length; ++i) {
if (alsaDevices[i].id === result.alsaDevice) {
selectedDevice = alsaDevices[i]
break;
}
}
if (!selectedDevice) {
selectedDevice = alsaDevices[0];
result.alsaDevice = selectedDevice.id;
}
if (result.sampleRate === 0) result.sampleRate = 48000;
if (result.bufferSize === 0) result.bufferSize = 64;
if (result.numberOfBuffers === 0) result.numberOfBuffers = 3;
result.sampleRate = selectedDevice.closestSampleRate(result.sampleRate);
result.bufferSize = selectedDevice.closestBufferSize(result.bufferSize);
result.valid = true;
return result;
}
componentDidMount() {
this.mounted = true;
this.requestAlsaInfo();
}
componentDidUpdate(oldProps: JackServerSettingsDialogProps) {
if (this.props.open && !oldProps.open) {
let settings = this.applyAlsaDevices(this.props.jackServerSettings.clone(), this.state.alsaDevices);
this.setState({
jackServerSettings: settings,
latencyText: getLatencyText(settings)
});
this.requestAlsaInfo();
}
}
componentWillUnmount() {
this.mounted = false;
}
getSelectedDevice(deviceId: string): AlsaDeviceInfo | null {
if (!this.state.alsaDevices) return null;
for (let i = 0; i < this.state.alsaDevices.length; ++i) {
if (this.state.alsaDevices[i].id === deviceId) {
return this.state.alsaDevices[i];
}
}
return null;
}
handleDeviceChanged(e: any) {
let device = e.target.value as string;
let selectedDevice = this.getSelectedDevice(device);
if (!selectedDevice) return;
let settings = this.state.jackServerSettings.clone();
settings.alsaDevice = device;
settings.sampleRate = selectedDevice.closestSampleRate(settings.sampleRate);
settings.bufferSize = selectedDevice.closestSampleRate(settings.bufferSize);
this.setState({
jackServerSettings: settings,
latencyText: getLatencyText(settings)
});
}
handleRateChanged(e: any) {
let rate = e.target.value as number;
console.log("New rate: " + rate);
let selectedDevice = this.getSelectedDevice(this.state.jackServerSettings.alsaDevice);
if (!selectedDevice) return;
let settings = this.state.jackServerSettings.clone();
settings.sampleRate = rate;
this.setState({
jackServerSettings: settings,
latencyText: getLatencyText(settings)
});
}
handleSizeChanged(e: any) {
let size = e.target.value as number;
let selectedDevice = this.getSelectedDevice(this.state.jackServerSettings.alsaDevice);
if (!selectedDevice) return;
let settings = this.state.jackServerSettings.clone();
settings.bufferSize = size;
this.setState({
jackServerSettings: settings,
latencyText: getLatencyText(settings)
});
}
handleNumberOfBuffersChanged(e: any) {
let bufferCount = e.target.value as number;
let selectedDevice = this.getSelectedDevice(this.state.jackServerSettings.alsaDevice);
if (!selectedDevice) return;
let settings = this.state.jackServerSettings.clone();
settings.numberOfBuffers = bufferCount;
this.setState({
jackServerSettings: settings,
latencyText: getLatencyText(settings)
});
}
handleApply() {
this.props.onApply(this.state.jackServerSettings.clone());
};
getBufferSizes(alsaDevice: AlsaDeviceInfo): number[] {
let result: number[] = [];
let max = alsaDevice.maxBufferSize;
if (max > 2048) max = 2048;
for (let i = 16; i <= max; i *= 2) {
if (i >= alsaDevice.minBufferSize) {
result.push(i);
}
}
return result;
}
render() {
const classes = this.props.classes;
const { onClose, jackServerSettings, open } = this.props;
const { onClose, open } = this.props;
const handleClose = () => {
onClose();
};
let waitingForDevices = !this.state.alsaDevices
let noDevices = this.state.alsaDevices && this.state.alsaDevices.length === 0;
let selectedDevice: AlsaDeviceInfo | undefined = undefined;
if (this.state.alsaDevices) {
for (let device of this.state.alsaDevices) {
if (device.id === this.state.jackServerSettings.alsaDevice) {
selectedDevice = device;
break;
}
}
}
let bufferSizes: number[] = [];
if (selectedDevice) {
bufferSizes = this.getBufferSizes(selectedDevice);
}
return (
<Dialog onClose={handleClose} aria-labelledby="select-channels-title" open={open}>
<DialogContent>
<FormControl className={classes.formControl}>
<InputLabel htmlFor="sampleRate">Sample rate</InputLabel>
<Select
onChange={(e) => this.updateLatency(e)}
defaultValue={jackServerSettings.sampleRate}
inputProps={{
name: 'Sample Rate',
id: 'jsd_sampleRate',
style: {
textAlign: "right"
<div>
<FormControl className={classes.formControl}>
<InputLabel htmlFor="jsd_device">Device</InputLabel>
<Select onChange={(e) => this.handleDeviceChanged(e)}
value={this.state.jackServerSettings.alsaDevice}
style={{width: 220}}
inputProps={{
name: "Device",
id: "jsd_device",
}}
>
{(noDevices && !waitingForDevices) &&
(
<MenuItem value={INVALID_DEVICE_ID}>No suitable devices.</MenuItem>
)
}
}}
>
<MenuItem value={44100}>44100</MenuItem>
<MenuItem value={48000}>48000</MenuItem>
<MenuItem value={88200}>88200</MenuItem>
<MenuItem value={96000}>96000</MenuItem>
<MenuItem value={176400}>176400</MenuItem>
<MenuItem value={192000}>192000</MenuItem>
</Select>
</FormControl>
<div style={{ display: "inline", whiteSpace: "nowrap" }}>
<FormControl className={classes.formControl}>
<InputLabel htmlFor="bufferSize">Buffer size</InputLabel>
<Select
onChange={(e) => this.updateLatency(e)}
defaultValue={jackServerSettings.bufferSize}
inputProps={{
name: 'Buffer size',
id: 'jsd_bufferSize',
}}
>
<MenuItem value={16}>16</MenuItem>
<MenuItem value={32}>32</MenuItem>
<MenuItem value={64}>64</MenuItem>
<MenuItem value={128}>128</MenuItem>
<MenuItem value={256}>256</MenuItem>
<MenuItem value={512}>512</MenuItem>
<MenuItem value={1024}>1024</MenuItem>
{((!noDevices) && !waitingForDevices) && (
this.state.alsaDevices!.map((device) =>
(
<MenuItem value={device.id}>{device.name}</MenuItem>
)
)
)}
</Select>
</FormControl>
</div><div>
<FormControl className={classes.formControl}>
<InputLabel htmlFor="numberofBuffers">Buffers</InputLabel>
<InputLabel htmlFor="jsd_sampleRate">Sample rate</InputLabel>
<Select
onChange={(e) => this.updateLatency(e)}
defaultValue={jackServerSettings.numberOfBuffers}
onChange={(e) => this.handleRateChanged(e)}
value={this.state.jackServerSettings.sampleRate}
inputProps={{
name: 'Number of buffers',
id: 'jsd_bufferCount',
id: 'jsd_sampleRate',
style: {
textAlign: "right"
}
}}
>
<MenuItem value={2}>2</MenuItem>
<MenuItem value={3}>3</MenuItem>
<MenuItem value={4}>4</MenuItem>
{selectedDevice &&
selectedDevice.sampleRates.map((sr) => {
return ( <MenuItem value={sr}>{sr}</MenuItem> );
})
}
</Select>
</FormControl>
<div style={{ display: "inline", whiteSpace: "nowrap" }}>
<FormControl className={classes.formControl}>
<InputLabel htmlFor="bufferSize">Buffer size</InputLabel>
<Select
onChange={(e) => this.handleSizeChanged(e)}
value={this.state.jackServerSettings.bufferSize}
inputProps={{
name: 'Buffer size',
id: 'jsd_bufferSize',
}}
>
{bufferSizes.map((buffSize) =>
(
<MenuItem value={buffSize}>{buffSize}</MenuItem>
)
)}
</Select>
</FormControl>
<FormControl className={classes.formControl}>
<InputLabel htmlFor="numberofBuffers">Buffers</InputLabel>
<Select
onChange={(e) => this.handleNumberOfBuffersChanged(e)}
value={this.state.jackServerSettings.numberOfBuffers}
inputProps={{
name: 'Number of buffers',
id: 'jsd_bufferCount',
}}
>
<MenuItem value={2}>2</MenuItem>
<MenuItem value={3}>3</MenuItem>
<MenuItem value={4}>4</MenuItem>
</Select>
</FormControl>
</div>
</div>
<Typography display="block" variant="caption" style={{ textAlign: "left", marginTop: 8, marginLeft: 24 }}
color="textSecondary">
@@ -175,7 +362,8 @@ const JackServerSettingsDialog = withStyles(styles)(
<Button onClick={handleClose} color="primary">
Cancel
</Button>
<Button onClick={()=> this.handleApply()} color="secondary">
<Button onClick={() => this.handleApply()} color="secondary" disabled={
(!this.state.alsaDevices) || !this.state.jackServerSettings.valid}>
OK
</Button>
</DialogActions>
react/src/PiPedalModel.tsx
+19
View File
@@ -34,6 +34,7 @@ import MidiBinding from './MidiBinding';
import PluginPreset from './PluginPreset';
import WifiConfigSettings from './WifiConfigSettings';
import WifiChannel from './WifiChannel';
import AlsaDeviceInfo from './AlsaDeviceInfo';
export enum State {
@@ -348,6 +349,7 @@ export interface PiPedalModel {
getWifiChannels(countryIso3661: string): Promise<WifiChannel[]>;
getAlsaDevices() : Promise<AlsaDeviceInfo[]>;
};
class PiPedalModelImpl implements PiPedalModel {
@@ -1586,6 +1588,23 @@ class PiPedalModelImpl implements PiPedalModel {
return result;
}
getAlsaDevices() : Promise<AlsaDeviceInfo[]>
{
let result = new Promise<AlsaDeviceInfo[]>((resolve, reject) => {
if (!this.webSocket) {
reject("Connection closed.");
return;
}
this.webSocket.request<any>("getAlsaDevices")
.then((data) => {
resolve(AlsaDeviceInfo.deserialize_array(data));
})
.catch((err) => reject(err));
});
return result;
}
};
react/src/SettingsDialog.tsx
+12 -27
View File
@@ -400,36 +400,19 @@ const SettingsDialog = withStyles(styles, { withTheme: true })(
overflowX: "hidden", overflowY: "auto", marginTop: 22
}}
>
{!isConfigValid && (
<div>
<Typography className={classes.sectionHead} display="block" variant="caption" color="error">
Error
</Typography>
<Typography className={classes.textBlock} display="block" variant="body2" >
The server encounter the following problem:
</Typography>
<Typography className={classes.textBlockIndented} display="block" variant="body2" >
{this.state.jackConfiguration.errorState}
</Typography>
<Typography className={classes.textBlock} display="block" variant="body2">
Please get the Jack Audio Server running properly on the server before attempting to configure audio.
</Typography>
<Divider style={{ marginTop: 16, marginBottom: 16 }} />
</div>
)}
<div style={{ opacity: isConfigValid ? 1.0 : 0.6 }}>
<div >
<Typography className={classes.sectionHead} display="block" variant="caption" color="secondary">
AUDIO
</Typography>
<div style={{ paddingLeft: 48, position: "relative", top: -12 }}>
{JackHostStatus.getDisplayView("Status:\u00A0", this.state.jackStatus)}
{ (!isConfigValid) ?
(
<Typography variant="caption" color="textSecondary">Status: <span style={{color: "#F00"}}>Not configured.</span></Typography>
):
JackHostStatus.getDisplayView("Status:\u00A0", this.state.jackStatus)
}
</div>
<ButtonBase className={classes.setting} onClick={() => this.handleJackServerSettings()}
disabled={!(isConfigValid && this.state.jackServerSettings.valid)}
style={{ opacity: !(isConfigValid && this.state.jackServerSettings.valid) ? 0.6 : 1.0 }}
>
<SelectHoverBackground selected={false} showHover={true} />
<div style={{ width: "100%" }}>
@@ -441,9 +424,11 @@ const SettingsDialog = withStyles(styles, { withTheme: true })(
open={this.state.showJackServerSettingsDialog}
jackServerSettings={this.state.jackServerSettings}
onClose={() => this.setState({ showJackServerSettingsDialog: false })}
onApply={(sampleRate, bufferSize, numberOfBuffers) => {
this.setState({ showJackServerSettingsDialog: false });
this.model.setJackServerSettings(new JackServerSettings(sampleRate, bufferSize, numberOfBuffers));
onApply={(jackServerSettings) => {
this.setState({ showJackServerSettingsDialog: false,
jackServerSettings: jackServerSettings
});
this.model.setJackServerSettings(jackServerSettings);
}}
/>