Skip to content

Commit 39d0367

Browse files
venkateshpotlurivenkateshpotluri
authored
Merge pull request #58 from make4all/vpotluri/pause
feat:Pause functionality.
2 parents 89c2b1e + dd520c7 commit 39d0367

File tree

6 files changed

+14519
-16001
lines changed

6 files changed

+14519
-16001
lines changed

‎src/Demo.tsx

Lines changed: 89 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
import { PlaybackState, SonificationLevel, Sonifier } from './SonificationClass'
2+
13
import React, { useState } from 'react';
24
import { hello} from './sonification';
35

@@ -7,110 +9,125 @@ import { DataView } from './views/DataView';
79
import { Alert, FormControl, FormLabel, RadioGroup, FormControlLabel, Radio } from '@mui/material';
810
import { DataManager } from './DataManager';
911

10-
import { SonificationLevel, Sonifier } from './SonificationClass';
12+
1113
import { parseInput } from './sonificationUtils';
1214
import { Readable } from 'stream';
1315

16+
1417
export const Demo = () => {
15-
const [editorText, setEditorText] = useState('100,200,300,400,500,600,700,800,900,800,700,600,500,400,300,200,100,500,400,300,200,900,500,600,700,800,900,300,400,500')
16-
const [selectedFile, setSelectedFile] = useState<File>();
17-
const [isFilePicked, setIsFilePicked] = useState(false);
18-
18+
const [editorText, setEditorText] = useState(
19+
'100,200,300,400,500,600,700,800,900,800,700,600,500,400,300,200,100,500,400,300,200,900,500,600,700,800,900,300,400,500',
20+
)
21+
const [selectedFile, setSelectedFile] = useState<File>()
22+
const [isFilePicked, setIsFilePicked] = useState(false)
23+
1924
const [fileName, setFileName] = useState<string>()
20-
const [sonificationOption, setSonificationOption] = useState <string>('simple')
21-
const [showHighlightValueEditor,setShowHighlightValueEditor] = useState(false)
22-
const [showRegionValueEditors,setShowRegionValueEditors] = useState(false)
25+
const [sonificationOption, setSonificationOption] = useState<string>('simple')
26+
const [showHighlightValueEditor, setShowHighlightValueEditor] = useState(false)
27+
const [showRegionValueEditors, setShowRegionValueEditors] = useState(false)
2328
const [highlightPoint, setHighlightPoint] = useState(500)
2429
const [beginRegion, setBeginRegion] = useState(300)
2530
const [endRegion, setEndRegion] = useState(500)
26-
27-
const handleEditorChange: React.ChangeEventHandler<HTMLTextAreaElement> | undefined= (event: React.ChangeEvent<HTMLTextAreaElement>) => {
28-
if (event.target.value)
29-
setEditorText(event.target.value)
31+
const [playButtonLabel, setPlayButtonLabel] = useState('play')
32+
33+
const handleEditorChange: React.ChangeEventHandler<HTMLTextAreaElement> | undefined = (
34+
event: React.ChangeEvent<HTMLTextAreaElement>,
35+
) => {
36+
if (event.target.value) setEditorText(event.target.value)
3037
}
3138

32-
const handelHighlightPointChange: React.ChangeEventHandler<HTMLTextAreaElement> | undefined= (event: React.ChangeEvent<HTMLTextAreaElement>) => {
33-
if (event.target.value)
34-
setHighlightPoint(parseInt(event.target.value))
35-
}
39+
const handelHighlightPointChange: React.ChangeEventHandler<HTMLTextAreaElement> | undefined = (
40+
event: React.ChangeEvent<HTMLTextAreaElement>,
41+
) => {
42+
if (event.target.value) setHighlightPoint(parseInt(event.target.value))
43+
}
3644

37-
const handelBeginRegionChange: React.ChangeEventHandler<HTMLTextAreaElement> | undefined= (event: React.ChangeEvent<HTMLTextAreaElement>) => {
38-
if (event.target.value)
39-
setBeginRegion(parseInt(event.target.value))
40-
}
45+
const handelBeginRegionChange: React.ChangeEventHandler<HTMLTextAreaElement> | undefined = (
46+
event: React.ChangeEvent<HTMLTextAreaElement>,
47+
) => {
48+
if (event.target.value) setBeginRegion(parseInt(event.target.value))
49+
}
4150

42-
const handelEndRegionChange: React.ChangeEventHandler<HTMLTextAreaElement> | undefined= (event: React.ChangeEvent<HTMLTextAreaElement>) => {
43-
if (event.target.value)
44-
setEndRegion(parseInt(event.target.value))
45-
}
51+
const handelEndRegionChange: React.ChangeEventHandler<HTMLTextAreaElement> | undefined = (
52+
event: React.ChangeEvent<HTMLTextAreaElement>,
53+
) => {
54+
if (event.target.value) setEndRegion(parseInt(event.target.value))
55+
}
4656

4757
const playButtonHandeler = () => {
48-
// var data: number[] = []
49-
// var dataText: string[] = editorText.split(',')
50-
// console.log("sonificationOption when play button handeler is entered",sonificationOption)
51-
52-
// for (let i = 0; i < dataText.length; i++) {
53-
// data.push(parseInt(dataText[i]))
54-
// }
55-
5658
let table = DataManager.getInstance().table;
5759
if (table) {
5860
// Hardcode getting the "Value" column from each data table, this will need to be set by user later
5961
let data = table.columns()['Value'].data;
60-
61-
let sonifierInstance = Sonifier.getSonifierInstance();
62-
if(sonifierInstance) {
63-
console.log("sonifier instance is present")
64-
65-
if(sonificationOption == "simple") {
66-
console.log("playing simple tone")
67-
sonifierInstance.playSimpleTone(data)
68-
} else if (sonificationOption == "highlightNoise") {
69-
sonifierInstance.playHighlightPointsWithNoise(data,highlightPoint)
70-
} else if (sonificationOption == "highlightRegion") {
71-
sonifierInstance.playHighlightedRegionWithTones(data,beginRegion,endRegion)
72-
} else {
73-
throw console.error("not implemented");
74-
}
62+
let sonifierInstance = Sonifier.getSonifierInstance()
63+
if (sonifierInstance) {
64+
console.log('sonifier instance is present. playback state', sonifierInstance.playbackState)
65+
if (
66+
sonifierInstance.playbackState == PlaybackState.Paused ||
67+
sonifierInstance.playbackState == PlaybackState.Playing
68+
) {
69+
sonifierInstance.pauseToggle()
70+
return
7571
}
76-
}
72+
if (sonifierInstance.playbackState == PlaybackState.Stopped)
73+
sonifierInstance.onPlaybackStateChanged = handelPlaybackStateChanged
74+
if (sonificationOption == 'simple') {
75+
console.log('playing simple tone')
76+
sonifierInstance.playSimpleTone(data)
77+
} else if (sonificationOption == 'highlightNoise') {
78+
sonifierInstance.playHighlightPointsWithNoise(data, highlightPoint)
79+
} else if (sonificationOption == 'highlightRegion') {
80+
sonifierInstance.playHighlightedRegionWithTones(data, beginRegion, endRegion)
81+
} else {
82+
throw console.error('not implemented')
83+
}
84+
}
7785
}
7886

87+
88+
89+
90+
}
91+
92+
93+
7994
const handelPushRudeData = () => {
80-
let sonifierInstance = Sonifier.getSonifierInstance();
81-
if(sonifierInstance)
82-
{
83-
for(let i=0;i<5;i++) {
84-
let dataPoint:number = Math.random()
85-
dataPoint = dataPoint*10000;
86-
sonifierInstance.SonifyPushedPoint(dataPoint,SonificationLevel.rude)
95+
let sonifierInstance = Sonifier.getSonifierInstance()
96+
if (sonifierInstance) {
97+
for (let i = 0; i < 5; i++) {
98+
let dataPoint: number = Math.random()
99+
dataPoint = dataPoint * 10000
100+
sonifierInstance.SonifyPushedPoint(dataPoint, SonificationLevel.rude)
87101
}
88102
}
89103
}
90104
const handleSonificationSelection = (event: React.ChangeEvent<HTMLInputElement>) => {
91-
console.log("changed selection of sonification type", event.target.value)
105+
console.log('changed selection of sonification type', event.target.value)
92106
setSonificationOption(event.target.value) //help: this value is not updating.
93-
console.log("sonificationType", sonificationOption);
94-
if(event.target.value == "highlightNoise")
95-
{
96-
console.log("debug: setting show highlight edit field")
107+
console.log('sonificationType', sonificationOption)
108+
if (event.target.value == 'highlightNoise') {
109+
console.log('debug: setting show highlight edit field')
97110
setShowHighlightValueEditor(true)
98111
setShowRegionValueEditors(false)
99-
100-
} else if (event.target.value == "highlightRegion") {
112+
} else if (event.target.value == 'highlightRegion') {
101113
setShowHighlightValueEditor(false)
102114
setShowRegionValueEditors(true)
103-
} else if(event.target.value == "simple")
104-
{
115+
} else if (event.target.value == 'simple') {
105116
setShowRegionValueEditors(false)
106-
setShowHighlightValueEditor(false)
107-
}
108-
else
109-
{
117+
setShowHighlightValueEditor(false)
118+
} else {
110119
setShowRegionValueEditors(false)
111120
setShowHighlightValueEditor(false)
112121
}
113-
setSonificationOption(event.target.value)
122+
setSonificationOption(event.target.value)
123+
}
124+
125+
const handelPlaybackStateChanged = (e: PlaybackState) => {
126+
console.log('handelPlaybackStateChanged', e)
127+
if (e == PlaybackState.Playing) setPlayButtonLabel('pause')
128+
else if (e == PlaybackState.Paused) setPlayButtonLabel('resume')
129+
else setPlayButtonLabel('play')
130+
console.log('returning. play button label', playButtonLabel)
114131
}
115132

116133
return (
@@ -139,10 +156,12 @@ export const Demo = () => {
139156
{showRegionValueEditors && (<textarea value={beginRegion}onChange = {handelBeginRegionChange}/>)}
140157
{showRegionValueEditors && (<textarea value={endRegion}onChange = {handelEndRegionChange}/>)}
141158
{ !showHighlightValueEditor && !showRegionValueEditors && (<p> press play to hear a simple sonification</p>)}
142-
<button onClick={playButtonHandeler}>play</button>
159+
<button onClick={playButtonHandeler}>{playButtonLabel}</button>
160+
143161
<p>Press the interrupt with random data button when a tone is playing to override what is playing with random data.</p>
144162
<button onClick={handelPushRudeData}>interrupt with random data</button>
145163
</div>
146164
</div>
147165
);
166+
148167
}

0 commit comments

Comments
 (0)