Skip to content

Commit

Permalink
change recording to paused
Browse files Browse the repository at this point in the history
  • Loading branch information
@3ll3d00d
3ll3d00d committed May 26, 2023
1 parent a9332dd commit 881045b
Show file tree
Hide file tree
Showing 3 changed files with 53 additions and 34 deletions.
12 changes: 6 additions & 6 deletions ui/src/components/levels/Controls.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,8 +18,8 @@ const useStyles = makeStyles((theme) => ({
const Controls = ({
duration,
setDuration,
recording,
setRecording
paused,
setPaused
}) => {
const classes = useStyles();
return <form className={clsx(classes.root, classes.margin)} noValidate autoComplete="off">
Expand All @@ -38,11 +38,11 @@ const Controls = ({
onChange={e => setDuration(e.target.value)}
InputLabelProps={{ shrink: true }} />
<FormControlLabel className={classes.margin}
control={<Switch checked={recording}
onChange={e => setRecording(e.target.checked)}
name="recording"
control={<Switch checked={paused}
onChange={e => setPaused(e.target.checked)}
name="paused"
color="primary"/>}
label="Recording?"/>
label="Pause?"/>
</form>;
};

Expand Down
15 changes: 10 additions & 5 deletions ui/src/components/levels/index.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ const Levels = ({
theme
}) => {
const [activeDuration, setActiveDuration] = useState(60);
const [recording, setRecording] = useState(true);
const [paused, setPaused] = useState(false);
const [duration, setDuration] = useLocalStorage('chartDuration', 60);
const debounceDuration = useMemo(
() => debounce(d => {
Expand All @@ -42,6 +42,7 @@ const Levels = ({
}
},
{
scale: 'dB',
label: "Level (dB)",
stroke: theme.palette.text.primary,
ticks: {
Expand All @@ -55,6 +56,10 @@ const Levels = ({
scales: {
"x": {
time: false,
},
"dB": {
auto: false,
range: [-96, 0],
}
},
};
Expand All @@ -64,8 +69,8 @@ const Levels = ({
}, [duration, debounceDuration]);

useEffect(() => {
levelsService.setRecording(recording);
}, [levelsService, recording]);
levelsService.pause(paused);
}, [levelsService, paused]);

useEffect(() => {
levelsService.setActiveDuration(activeDuration);
Expand All @@ -88,8 +93,8 @@ const Levels = ({
setSelectedNav={setSelectedNav}/>
<Controls duration={duration}
setDuration={setDuration}
recording={recording}
setRecording={setRecording}/>
paused={paused}
setPaused={setPaused}/>
<Chart options={chartOpts}
levelsService={levelsService}
devices={availableDevices}/>
Expand Down
60 changes: 37 additions & 23 deletions ui/src/services/levels.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,12 +7,12 @@ class LevelsService {
this.setErr = setErr;
this.first = 0;
this.chart = null;
this.recording = true;
this.paused = false;
this.devices = [];
this.seriesByDevice = {};
this.activeDevice = null;
this.seriesByDeviceName = {};
this.activeDeviceName = null;
this.activeDuration = 60;
this.dataByDevice = {};
this.dataByDeviceName = {};
this.seriesDirty = true;
this.colours = [
theme.palette.primary.light,
Expand All @@ -27,48 +27,49 @@ class LevelsService {
createSeriesForDevice = (device, label) => {
return {
label: label,
stroke: this.colours[Object.keys(this.seriesByDevice[device]).length % this.colours.length],
points: {show: false}
stroke: this.colours[Object.keys(this.seriesByDeviceName[device]).length % this.colours.length],
points: {show: false},
scale: 'dB'
};
};

ensureSeriesForDevice = (device, series) => {
if (this.seriesByDevice.hasOwnProperty(device)) {
const existingSeriesNames = Object.keys(this.seriesByDevice[device]);
if (this.seriesByDeviceName.hasOwnProperty(device)) {
const existingSeriesNames = Object.keys(this.seriesByDeviceName[device]);
const toAdd = series.filter(s => existingSeriesNames.indexOf(s) === -1);
const toDelete = existingSeriesNames.filter(s => series.indexOf(s) === -1);
toAdd.forEach(s => {
this.seriesByDevice[device][s] = this.createSeriesForDevice(device, s);
this.seriesByDeviceName[device][s] = this.createSeriesForDevice(device, s);
this.seriesDirty = true;
});
toDelete.forEach(s => {
delete this.seriesByDevice[device][s];
delete this.seriesByDeviceName[device][s];
this.seriesDirty = true;
});
} else {
this.seriesDirty = true;
this.seriesByDevice[device] = [...series];
this.seriesByDeviceName[device] = [...series];
}
};

loadDevices = (devices) => {
Object.keys(devices).forEach(d => {
if (this.devices.indexOf(d) === -1) {
this.devices.push(d);
this.dataByDevice[d] = {
this.dataByDeviceName[d] = {
payload: [],
first: 0
};
this.seriesByDevice[d] = [];
this.seriesByDeviceName[d] = [];
if (this.ws && this.ws.readyState === 1) {
this.ws.send(`subscribe levels ${d}`);
}
}
});
};

setRecording = (recording) => {
this.recording = recording;
pause = (paused) => {
this.paused = paused;
};

setActiveDuration = (activeDuration) => {
Expand All @@ -77,18 +78,29 @@ class LevelsService {

setChart = (chart) => {
this.chart = chart;
this.seriesDirty = true;
if (this.activeDeviceName && this.chart) {
const series = this.seriesByDeviceName[this.activeDeviceName];
if (series) {
this.ensureAllSeriesAreLoadedToChart(this.activeDeviceName);
}
const data = this.dataByDeviceName[this.activeDeviceName];
if (data && data.payload) {
this.chart.setData(data.payload)
}
}
};

ensureAllSeriesAreLoadedToChart = (deviceName) => {
if (this.chart && this.seriesDirty) {
const series = this.seriesByDevice[deviceName];
const series = this.seriesByDeviceName[deviceName];
const seriesNames = Object.keys(series).map(s => series[s].label);
const chartNames = this.chart.series.map(s => s.label);
const toDelete = chartNames.filter(s => s !== 'Time' && seriesNames.indexOf(s) === -1);
const toAdd = seriesNames.filter(s => chartNames.indexOf(s) === -1);
toAdd.forEach(name => {
console.log(`Adding new series ${name}`);
this.chart.addSeries(this.seriesByDevice[deviceName][name]);
this.chart.addSeries(this.seriesByDeviceName[deviceName][name]);
})
toDelete.forEach(name => {
console.log(`Deleting series ${name}`);
Expand Down Expand Up @@ -124,19 +136,21 @@ class LevelsService {
const series = Object.keys(payload.levels);
this.ensureSeriesForDevice(deviceName, series);
const newVals = [payload.ts, ...series.map(s => payload.levels[s])]
if (this.dataByDevice.hasOwnProperty(deviceName)) {
const d = this.dataByDevice[deviceName];
if (this.dataByDeviceName.hasOwnProperty(deviceName)) {
const d = this.dataByDeviceName[deviceName];
// convert to relative timestamps vs the first available
if (d.payload && d.payload.length > 0) {
d.payload = newVals.map((v, idx) => idx === 0 ? [...d.payload[idx], (v - d.first)] : [...d.payload[idx], v]);
} else {
d.first = newVals[0];
d.payload = newVals.map((v, idx) => idx === 0 ? [v - d.first] : [v]);
}
this.dataByDevice[deviceName] = this.trimToDuration(d, this.activeDuration);
if (this.chart && this.recording && deviceName === this.activeDevice) {
this.dataByDeviceName[deviceName] = this.trimToDuration(d, this.activeDuration);
if (this.chart && deviceName === this.activeDeviceName) {
this.ensureAllSeriesAreLoadedToChart(deviceName);
this.chart.setData(this.dataByDevice[deviceName].payload);
if (!this.paused) {
this.chart.setData(this.dataByDeviceName[deviceName].payload);
}
}
} else {
console.warn(`No cached data for ${deviceName}`);
Expand All @@ -153,7 +167,7 @@ class LevelsService {
setActiveDevice = (device) => {
if (device) {
if (this.devices.indexOf(device.name) > -1) {
this.activeDevice = device.name;
this.activeDeviceName = device.name;
} else {
this.setErr(new Error(`Unknown device ${device.name}`));
}
Expand Down

0 comments on commit 881045b

Please sign in to comment.