A remote JSON or CSV file to use as the data source
string | undefined
for
A verification grid component that the derived page fetcher callback will
be applied to
string
local
Whether to allow for local file inputs through a system UI dialog
boolean
false
random
Randomly sample rows from a local or remote data source
boolean
false
Properties
Name
Attribute
Description
Type
Default
columnNamespace
"oe_"
"oe_"
pageSize
10
10
src
src
A remote JSON or CSV file to use as the data source
string | undefined
for
for
A verification grid component that the derived page fetcher callback will
be applied to
string
local
local
Whether to allow for local file inputs through a system UI dialog
boolean
false
random
random
Randomly sample rows from a local or remote data source
boolean
false
canDownload
boolean
false
fileName
string | undefined
fileInput
HTMLInputElement
dataFetcher
DataSourceFetcher | undefined
verificationGrid
VerificationGridComponent | undefined
decisionHandler
Methods
Name
Parameters
Description
Return
downloadResults
Promise
resultRows
Promise>
CSS Shadow Parts
Name
Description
file-picker
A css target to style the file picker button
<oe-classification>
Attributes
Name
Description
Type
Default
tag
Tag
true-shortcut
A shortcut key that when pressed will trigger a true classification
decision to be emitted
string | undefined
false-shortcut
A shortcut key that when pressed will trigger a false classification
decision to be emitted
string | undefined
disabled
Disables the decision button and prevents decision events from firing
boolean
false
Properties
Name
Attribute
Description
Type
Default
tag
tag
Tag
trueShortcut
true-shortcut
A shortcut key that when pressed will trigger a true classification
decision to be emitted
string | undefined
falseShortcut
false-shortcut
A shortcut key that when pressed will trigger a false classification
decision to be emitted
string | undefined
trueDecisionButton
HTMLButtonElement
falseDecisionButton
HTMLButtonElement
derivedTrueShortcut
string | undefined
derivedFalseShortcut
string | undefined
decisionEventName
"decision"
"decision"
injector
VerificationGridInjector
{
colorService: decisionColor,
}
disabled
disabled
Disables the decision button and prevents decision events from firing
boolean
false
selectionMode
The selection mode of the verification grid
SelectionObserverType
"desktop"
shouldEmitNext
boolean
true
keyboardHeldDown
boolean
false
keyUpHandler
keyDownHandler
Methods
Name
Parameters
Description
Return
shortcutKeys
KeyboardShortcut[]
handleShortcutKey
Name
Description
Type
event
KeyboardEvent
void
isShortcutKey
Name
Description
Type
event
KeyboardEvent
Readonly
emitDecision
Name
Description
Type
value
Decision[]
void
Events
Name
Description
decision
Slots
Name
Description
(default)
Additional content to be displayed in the decision groups title
CSS Shadow Parts
Name
Description
true-decision-button
Styling selector to target the true decision button
false-decision-button
Styling selector to target the false decision button
<oe-decision>
Attributes
Name
Description
Type
Default
disabled
Disables the decision button and prevents decision events from firing
boolean
false
Properties
Name
Attribute
Description
Type
Default
decisionEventName
"decision"
"decision"
injector
VerificationGridInjector
{
colorService: decisionColor,
}
disabled
disabled
Disables the decision button and prevents decision events from firing
boolean
false
selectionMode
The selection mode of the verification grid
SelectionObserverType
"desktop"
shouldEmitNext
boolean
true
keyboardHeldDown
boolean
false
keyUpHandler
keyDownHandler
Methods
Name
Parameters
Description
Return
handleShortcutKey
Name
Description
Type
event
KeyboardEvent
void
isShortcutKey
Name
Description
Type
event
KeyboardEvent
Readonly
shortcutKeys
KeyboardShortcut[]
emitDecision
Name
Description
Type
value
Decision[]
void
Events
Name
Description
decision
<oe-verification>
Attributes
Name
Description
Type
Default
verified
DecisionOptions
additional-tags
Value that will be added to the oe-additional-tags column
Tag[]
[]
shortcut
A keyboard key that when pressed will act as a click event on the button
string
""
disabled
Disables the decision button and prevents decision events from firing
boolean
false
Properties
Name
Attribute
Description
Type
Default
verified
verified
DecisionOptions
additionalTags
additional-tags
Value that will be added to the oe-additional-tags column
Tag[]
[]
shortcut
shortcut
A keyboard key that when pressed will act as a click event on the button
string
""
decisionButton
HTMLButtonElement
decisionEventName
"decision"
"decision"
injector
VerificationGridInjector
{
colorService: decisionColor,
}
disabled
disabled
Disables the decision button and prevents decision events from firing
boolean
false
selectionMode
The selection mode of the verification grid
SelectionObserverType
"desktop"
shouldEmitNext
boolean
true
keyboardHeldDown
boolean
false
keyUpHandler
keyDownHandler
Methods
Name
Parameters
Description
Return
shortcutKeys
KeyboardShortcut[]
handleShortcutKey
Name
Description
Type
event
KeyboardEvent
void
isShortcutKey
Name
Description
Type
event
KeyboardEvent
Readonly
emitDecision
Name
Description
Type
value
Decision[]
void
Events
Name
Description
decision
Slots
Name
Description
(default)
Additional content to be displayed in the decision button
CSS Shadow Parts
Name
Description
decision-button
The button that triggers the decision
<oe-indicator>
Properties
Name
Attribute
Description
Type
Default
spectrogram
SpectrogramComponent | undefined
wrappedElement
Readonly
unitConverter
UnitConverter | undefined
computedTimePx
ReadonlySignal
Methods
Name
Parameters
Description
Return
handleSlotChange
void
Slots
Name
Description
(default)
A spectrogram component to add an indicator to
CSS Shadow Parts
Name
Description
indicator-line
A css target to style the indicator line
seek-icon
A css target to style the seek icon underneath the indicator line
<oe-info-card>
Attributes
Name
Description
Type
Default
default-lines
Number of subject key/values pairs to show before the "Show More" button is clicked
number
3
Properties
Name
Attribute
Description
Type
Default
model
SubjectWrapper | undefined
defaultLines
default-lines
Number of subject key/values pairs to show before the "Show More" button is clicked
number
3
showExpanded
boolean
false
identityStrategy
InfoCardTemplate
numberStrategy
InfoCardTemplate
urlStrategy
<undefined>
Properties
Name
Attribute
Description
Type
Default
logger
ILogger | undefined
Methods
Name
Parameters
Description
Return
doThing
void
<oe-media-controls>
A simple media player with play/pause and seek functionality that can be used with the open ecoacoustics spectrograms and components.
Attributes
Name
Description
Type
Default
for
A DOM selector to target the spectrogram element
string
""
playIconPosition
PreferenceLocation
"default"
Properties
Name
Attribute
Description
Type
Default
recursiveAxesSearch
for
for
A DOM selector to target the spectrogram element
string
""
playIconPosition
playIconPosition
PreferenceLocation
"default"
logger
ILogger
{
log: console.log,
}
axesElement
AxesComponent | null | undefined
spectrogramElement
SpectrogramComponent | null | undefined
playHandler
keyDownHandler
Methods
Name
Parameters
Description
Return
toggleAudio
Name
Description
Type
keyboardShortcut
void
isSpectrogramPlaying
boolean
Slots
Name
Description
play-icon
The icon to display when the media is stopped
pause-icon
The icon to display when the media is playing
CSS Shadow Parts
Name
Description
play-icon
Styling applied to the play icon (including default)
pause-icon
Styling applied to the pause icon (including default)
<oe-spectrogram>
Attributes
Name
Description
Type
Default
window
RenderWindow | undefined
paused
Whether the spectrogram is paused
boolean
true
src
The source of the audio file
string
""
scaling
The aspect ratio of the spectrogram
stretch should scale without aspect ratio
natural should scale with the correct aspect ratio to fill the container it
is in. One dimension will be constrained by the container, the other by the
aspect ratio.
original will set the spectrogram to the native resolution of the FFT output.
It will not scale the image at all.
SpectrogramCanvasScale
"stretch"
window-size
The size of the fft window
number
512
window-function
The window function to use for the spectrogram
WindowFunctionName
"hann"
window-overlap
The amount of overlap between fft windows
number
0
mel-scale
A boolean attribute representing if the spectrogram should be shown in mel-scale
boolean
false
color-map
A color map to use for the spectrogram
string
""
offset
An offset (seconds) from the start of a larger audio recording
number
0
brightness
An increase in brightness
number
0
contrast
A scalar multiplier that should be applied to fft values
number
1
Properties
Name
Attribute
Description
Type
Default
playEventName
"play"
"play"
domRenderWindow
window
RenderWindow | undefined
paused
paused
Whether the spectrogram is paused
boolean
true
src
src
The source of the audio file
string
""
scaling
scaling
The aspect ratio of the spectrogram
stretch should scale without aspect ratio
natural should scale with the correct aspect ratio to fill the container it
is in. One dimension will be constrained by the container, the other by the
aspect ratio.
original will set the spectrogram to the native resolution of the FFT output.
It will not scale the image at all.
SpectrogramCanvasScale
"stretch"
windowSize
window-size
The size of the fft window
number
512
windowFunction
window-function
The window function to use for the spectrogram
WindowFunctionName
"hann"
windowOverlap
window-overlap
The amount of overlap between fft windows
number
0
melScale
mel-scale
A boolean attribute representing if the spectrogram should be shown in mel-scale
boolean
false
colorMap
color-map
A color map to use for the spectrogram
string
""
offset
offset
An offset (seconds) from the start of a larger audio recording
number
0
brightness
brightness
An increase in brightness
number
0
contrast
contrast
A scalar multiplier that should be applied to fft values
number
1
slotElements
Array
mediaElement
HTMLMediaElement
canvas
HTMLCanvasElement
audio
Signal
currentTime
Signal
renderCanvasSize
Signal
renderWindow
Signal
fftSlice
TwoDSlice | undefined
unitConverters
Signal
audioHelper
new AudioHelper()
doneFirstRender
boolean
false
spectrogramOptions
SpectrogramOptions
possibleWindowSizes
ReadonlyArray
possibleWindowOverlaps
ReadonlyArray
renderedSource
string
nextRequestId
number | null
null
playStartedAt
DOMHighResTimeStamp | null
null
Methods
Name
Parameters
Description
Return
hasSource
boolean
renderSpectrogram
void
regenerateSpectrogram
void
regenerateSpectrogramOptions
void
resetSettings
void
play
Name
Description
Type
keyboardShortcut
void
pause
Name
Description
Type
keyboardShortcut
void
stop
void
Events
Name
Description
loading
loaded
Loading
Finished
Slots
Name
Description
(default)
A `
<oe-verification-grid-settings>
Properties
Name
Attribute
Description
Type
Default
settings
VerificationGridSettings
gridSize
An internal representation of the verification grids size
number | undefined
verificationGrid
VerificationGridComponent | undefined
fullscreenChangeHandler
<oe-verification-grid-tile>
Attributes
Name
Description
Type
Default
hidden
Hides a grid tile. This is useful for virtual paging so if you have a
grid of tiles where not all have a source, you can hide the ones that
do not have a source instead of destroying them completely as they might
be used in the future when paging back in history or the grid size is
increased.
boolean
false
Properties
Name
Attribute
Description
Type
Default
selectedEventName
"selected"
"selected"
model
SubjectWrapper
settings
VerificationGridSettings
injector
VerificationGridInjector
hidden
hidden
Hides a grid tile. This is useful for virtual paging so if you have a
grid of tiles where not all have a source, you can hide the ones that
do not have a source instead of destroying them completely as they might
be used in the future when paging back in history or the grid size is
increased.
boolean
false
showKeyboardShortcuts
boolean
false
selected
boolean
false
index
The index position of the tile within a verification grid that is used
to determine the selection keyboard shortcut associated with the grid tile
number
0
requiredTags
Tag[]
spectrogram
SpectrogramComponent | undefined
contentsWrapper
HTMLDivElement
keyDownHandler
loadingHandler
loadedHandler
playHandler
loaded
boolean
false
shortcuts
string[]
[]
Methods
Name
Parameters
Description
Return
resetSettings
void
addDecision
Name
Description
Type
decision
Decision
removeDecision
Name
Description
Type
decision
Decision
Events
Name
Description
loaded
Loaded
Slots
Name
Description
(default)
The template to be rendered inside the grid tile
CSS Custom Properties
Name
Description
--decision-color
The border color that is applied when a decision is being shown
--selected-border-size
The size of the border when a decision is being shown
<oe-verification-help-dialog>
Attributes
Name
Description
Type
Default
decisionElements
DecisionComponent[]
selectionBehavior
SelectionObserverType
verificationTasksCount
number
classificationTasksCount
number
Properties
Name
Attribute
Description
Type
Default
decisionElements
decisionElements
DecisionComponent[]
selectionBehavior
selectionBehavior
SelectionObserverType
verificationTasksCount
verificationTasksCount
number
classificationTasksCount
classificationTasksCount
number
showRememberOption
boolean
true
helpDialogElement
HTMLDialogElement
dialogPreferenceElement
HTMLInputElement | undefined
open
boolean
hasVerificationTask
boolean
hasClassificationTask
boolean
Methods
Name
Parameters
Description
Return
showModal
Name
Description
Type
showRememberOption
Events
Name
Description
open
Dispatched when the dialog is opened
close
Dispatched when the dialog is closed
<oe-verification-grid>
Attributes
Name
Description
Type
Default
grid-size
The number of items to display in a single grid
number
8
selection-behavior
The selection behavior of the verification grid
SelectionObserverType
"default"
get-page
A callback function that returns a page of recordings