API

<oe-axes>

Attributes

Name	Description	Type	Default
x-step	The step size for the x-axis	Seconds \| undefined
y-step	The step size for the y-axis	Hertz \| undefined
x-title	The text to show next to the x-axis	string	"Time (Seconds)"
y-title	The text to show next to the y-axis	string	"Frequency (KHz)"
x-title-visible	Whether to show/hide the x-axis title	boolean	true
y-title-visible	Whether to show/hide the y-axis title	boolean	true
x-axis	Shows/hides x-axis labels and ticks	boolean	true
y-axis	Shows/hides y-axis labels and ticks	boolean	true
x-grid	Shows/hides x-axis labels and grid lines	boolean	true
y-grid	Shows/hides y-axis labels and grid lines	boolean	true

Properties

Name	Attribute	Description	Type	Default
labelPadding			EmUnit	0.25
tickSize			EmUnit	0.75
titleOffset			EmUnit	0.25
xStepOverride	x-step	The step size for the x-axis	Seconds \| undefined
yStepOverride	y-step	The step size for the y-axis	Hertz \| undefined
xTitle	x-title	The text to show next to the x-axis	string	"Time (Seconds)"
yTitle	y-title	The text to show next to the y-axis	string	"Frequency (KHz)"
showXTitle	x-title-visible	Whether to show/hide the x-axis title	boolean	true
showYTitle	y-title-visible	Whether to show/hide the y-axis title	boolean	true
showXAxis	x-axis	Shows/hides x-axis labels and ticks	boolean	true
showYAxis	y-axis	Shows/hides y-axis labels and ticks	boolean	true
showXGrid	x-grid	Shows/hides x-axis labels and grid lines	boolean	true
showYGrid	y-grid	Shows/hides y-axis labels and grid lines	boolean	true
spectrogram			SpectrogramComponent
wrappedElement			Readonly
emUnitFontSize			Size
unitConverter			UnitConverter
labelPadding			Size
tickSize			Size
titleOffset			Size
fontCanvas			HTMLCanvasElement

Slots

Name	Description
(default)	A spectrogram element to add axes to

CSS Shadow Parts

Name	Description
tick	Apply styles to both x and y tick lines
x-tick	Apply styles to only the x axis tick lines
y-tick	Apply styles to only the y axis tick lines
grid	Apply styles to both x and y grid lines
x-grid	Apply styles to only the x grid lines
y-grid	Apply styles to only the y grid lines
label	Apply styles to both x and y labels
x-label	Apply styles to only the x axis label
y-label	Apply styles to only the x axis label
legend	Apply styles to both the x and y legends
x-legend	Apply styles to only the x axis legend
y-legend	Apply styles to only the x axis legend

<oe-data-source>

Attributes

Name	Description	Type	Default
src	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
additional-tags	Value that will be added to the oe-additional-tags column	Tag[]	[]
disabled	Disables the decision button and prevents decision events from firing	boolean	false
verified		EnumValue
shortcut	A keyboard key that when pressed will act as a click event on the button	string \| undefined

Properties

Name	Attribute	Description	Type	Default
tag	tag		Tag
decisionEventName			"decision"	"decision"
additionalTags	additional-tags	Value that will be added to the oe-additional-tags column	Tag[]	[]
disabled	disabled	Disables the decision button and prevents decision events from firing	boolean	false
verified	verified		EnumValue
shortcut	shortcut	A keyboard key that when pressed will act as a click event on the button	string \| undefined
highlighted			boolean	false
decisionId			DecisionId	0
selectionMode		The selection mode of the verification grid	SelectionObserverType	"desktop"
decisionButton			HTMLButtonElement
keyboardHeldDown			boolean	false
shouldEmitNext			boolean	true
decisionModels			Decision[] \| undefined
keyUpHandler
keyDownHandler

Methods

Name	Parameters	Description	Return
generateDecisionModels			[Classification]
isShowingDecisionColor			boolean

Events

Name	Description
decision

Slots

Name	Description
(default)	The text/content of the decision

CSS Shadow Parts

Name	Description
decision-button	The button that triggers the decision

<oe-decision>

Attributes

Name	Description	Type	Default
additional-tags	Value that will be added to the oe-additional-tags column	Tag[]	[]
disabled	Disables the decision button and prevents decision events from firing	boolean	false
verified		EnumValue
shortcut	A keyboard key that when pressed will act as a click event on the button	string \| undefined

Properties

Name	Attribute	Description	Type	Default
decisionEventName			"decision"	"decision"
additionalTags	additional-tags	Value that will be added to the oe-additional-tags column	Tag[]	[]
disabled	disabled	Disables the decision button and prevents decision events from firing	boolean	false
verified	verified		EnumValue
shortcut	shortcut	A keyboard key that when pressed will act as a click event on the button	string \| undefined
highlighted			boolean	false
decisionId			DecisionId	0
selectionMode		The selection mode of the verification grid	SelectionObserverType	"desktop"
decisionButton			HTMLButtonElement
keyboardHeldDown			boolean	false
shouldEmitNext			boolean	true
decisionModels			Decision[] \| undefined
keyUpHandler
keyDownHandler

Methods

Name	Parameters	Description	Return
generateDecisionModels			Decision[]
isShowingDecisionColor			boolean

Events

Name	Description
decision

Slots

Name	Description
(default)	The text/content of the decision

CSS Shadow Parts

Name	Description
decision-button	The button that triggers the decision

<oe-verification>

Attributes

Name	Description	Type	Default
additional-tags	Value that will be added to the oe-additional-tags column	Tag[]	[]
disabled	Disables the decision button and prevents decision events from firing	boolean	false
verified		EnumValue
shortcut	A keyboard key that when pressed will act as a click event on the button	string \| undefined

Properties

Name	Attribute	Description	Type	Default
decisionEventName			"decision"	"decision"
additionalTags	additional-tags	Value that will be added to the oe-additional-tags column	Tag[]	[]
disabled	disabled	Disables the decision button and prevents decision events from firing	boolean	false
verified	verified		EnumValue
shortcut	shortcut	A keyboard key that when pressed will act as a click event on the button	string \| undefined
highlighted			boolean	false
decisionId			DecisionId	0
selectionMode		The selection mode of the verification grid	SelectionObserverType	"desktop"
decisionButton			HTMLButtonElement
keyboardHeldDown			boolean	false
shouldEmitNext			boolean	true
decisionModels			Decision[] \| undefined
keyUpHandler
keyDownHandler

Methods

Name	Parameters	Description	Return
generateDecisionModels			[Verification, ...Classification[]]
isShowingDecisionColor			boolean

Events

Name	Description
decision

Slots

Name	Description
(default)	The text/content of the decision

CSS Shadow Parts

Name	Description
decision-button	The button that triggers the decision

<oe-indicator>

Properties

Name	Type	Default
spectrogram	SpectrogramComponent \| undefined
wrappedElement	Readonly
xPos	number	0
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
defaultLines	default-lines	Number of subject key/values pairs to show before the "Show More" button is clicked	number	3
model			SubjectWrapper \| undefined
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 `` element to provide the audio source

<oe-verification-grid-settings>

Properties

Name	Description	Type	Default
isFullscreen		boolean	false
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
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
spectrogram			SpectrogramComponent \| undefined
contentsWrapper			HTMLDivElement
keyDownHandler
loadingHandler
loadedHandler
playHandler
loaded			boolean	false
shortcuts			string[]	[]
decisionIndices			number[]

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	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	PageFetcher \| undefined

Properties

Name	Attribute	Description	Type	Default
decisionMadeEventName			"decision-made"	"decision-made"
loadedEventName			"loaded"	"loaded"
gridSize	grid-size	The number of items to display in a single grid	number	8
selectionBehavior	selection-behavior	The selection behavior of the verification grid	SelectionObserverType	"default"
getPage	get-page	A callback function that returns a page of recordings	PageFetcher \| undefined
spectrogramElements			TemplateResult<1> \| TemplateResult<1>[] \| undefined
historyHead			number	0
verificationDecisionElements		selector for oe-verification elements	VerificationComponent[]
classificationDecisionElements		selector for oe-classification elements	ClassificationComponent[]
gridItemTemplate			HTMLTemplateElement
gridTiles			NodeListOf
helpDialog			VerificationHelpDialogComponent
gridContainer			HTMLDivElement
decisionsContainer			HTMLSlotElement
skipButton			DecisionComponent
currentSubSelection			SubjectWrapper[]	[]
pagedItems			number
decisionElements		A derived selector for all oe-decision, oe-verification and oe-classification elements	DecisionComponentUnion[]
keydownHandler
keyupHandler
blurHandler
intersectionHandler
selectionHandler
decisionHandler
intersectionObserver				new IntersectionObserver(this.intersectionHandler)
subjectHistory			SubjectWrapper[]	[]
currentPage			SubjectWrapper[]	[]
hiddenTiles			number	0
decisionsDisabled			boolean	false
showingSelectionShortcuts			boolean	false
selectionHead			number \| null	null
doneRenderBoxInit			boolean	false
highlight			HighlightSelection	{ start: { x: 0, y: 0 }, current: { x: 0, y: 0 }, highlighting: false, elements: [], }
paginationFetcher			GridPageFetcher \| undefined
effectivePageSize		A count of the number of tiles currently visible on the screen	number

Methods

Name	Parameters	Description	Return
isViewingHistory			boolean
resetSpectrogramSettings			void
isHelpDialogOpen			boolean

Events

Name	Description

decision	Emits information about the decision that was made
loaded	Emits when all the spectrograms have been loaded

Slots

Name	Description
(default)	A template element that will be used to create each grid tile
(default)	Decision elements that will be used to create the decision buttons
data-source	An `oe-data-source` element that provides the data