Skip to content

Commit

Permalink
Add GUANO to file information
Browse files Browse the repository at this point in the history
  • Loading branch information
@pcprince
pcprince committed Sep 9, 2024
1 parent f62f2b0 commit a7c129b
Show file tree
Hide file tree
Showing 6 changed files with 258 additions and 19 deletions.
3 changes: 3 additions & 0 deletions css/index.css
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,9 @@
html, body {
max-width: 100%;
overflow-x: hidden;
}

.body-no-select {
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
Expand Down
15 changes: 8 additions & 7 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@
<script src="scripts/external/bootstrap.bundle.min.js"></script>
<script src="scripts/external/bootstrap-slider.min.js"></script>
</head>
<body style="font-size: 10pt;">
<body class="body-no-select" style="font-size: 10pt;">
<div class="container-fluid" style="padding: 11px; margin-left: 0px; margin-right: 0px;">

<!-- Title -->
Expand Down Expand Up @@ -46,7 +46,7 @@ <h3 style="margin-bottom: 5px; display: inline-block;">AudioMoth Play</h3>
<button class="btn btn-primary" id="disabled-file-button" style="vertical-align: middle;" disabled>Select File</button>
<span id="file-span" style="margin-left: 10px; vertical-align: middle; display: none;"></span>
<span id="slice-reselect-span" style="margin-left: 2px; vertical-align: middle; display: none;">(<a href="#" id="slice-reselect-link">00:00:00 - 00:00:00</a>)</span>
<a href="#" id="file-information-link" style="margin-left: 10px; vertical-align: middle; display: none;" data-toggle="modal" data-target="#comment-modal">Show file information</a>
<a href="#" id="file-information-link" style="margin-left: 10px; vertical-align: middle; display: none;">Show file information</a>
<span class="loading" id="loading-span" style="margin-left: 10px; vertical-align: middle;">Loading</span>
<span id="resampled-span" style="color: blue; vertical-align: middle; margin-left: 10px; display: none;"></span>
<span id="error-span" style="color: red; vertical-align: middle; margin-left: 10px; display: none;"></span>
Expand Down Expand Up @@ -789,18 +789,19 @@ <h5 class="modal-title" id="exportModalLabel">Export Image</h5>
</div>
</div>

<div class="modal fade" id="comment-modal" tabindex="-1" role="dialog" aria-labelledby="commentModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal fade" id="information-modal" tabindex="-1" role="dialog" aria-labelledby="commentModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document" id="information-modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="commentModalLabel">File Information</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<button type="button" class="close" data-dismiss="modal" aria-label="Close" id="information-modal-close-button">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body" id="comment-text">
<span id="artist-span" style="margin-bottom: 5px; float: left; clear: left;">AudioMoth</span>
<span id="comment-span" style="float: left; clear: left;">-</span>
<span id="artist-span" style="margin-bottom: 5px; float: left; clear: left; font-weight: bold;">AudioMoth</span>
<span id="comment-span" style="float: left; clear: left; margin-bottom: 10px;">-</span>
<div id="guano-holder" style="float: left; clear: left;"></div>
</div>
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion scripts/constants.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
*****************************************************************************/

// TODO: Update this with changes, along with the version in worker.js
const VERSION = 1;
const VERSION = 2;

/* Regex used to extract timestamp from header comment */

Expand Down
125 changes: 122 additions & 3 deletions scripts/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
/* global INT16_MAX, LENGTH_OF_WAV_HEADER, DATE_REGEX, TIMESTAMP_REGEX, SECONDS_IN_DAY */
/* global STATIC_COLOUR_MIN, STATIC_COLOUR_MAX */

/* global calculateSpectrogramFrames, drawSpectrogram, drawWaveform, readWav, readExampleWav, checkHeader */
/* global calculateSpectrogramFrames, drawSpectrogram, drawWaveform, readWav, readExampleWav, checkHeader, readGuano */
/* global showSliceLoadingUI, hideSliceLoadingUI, loadPreview, drawPreviewWaveform, updateSelectionSpan, drawSliceSelection, showSliceModal, hideSliceModal, setSliceSelectButtonEventHandler, setSliceCancelButtonListener, saveCurrentSlicePosition, usePreviewSelection, moveSliceSelectionLeft, moveSliceSelectionRight */
/* global applyLowPassFilter, applyHighPassFilter, applyBandPassFilter, FILTER_NONE, FILTER_LOW, FILTER_BAND, FILTER_HIGH, applyAmplitudeThreshold */
/* global playAudio, stopAudio, getTimestamp, PLAYBACK_MODE_SKIP, PLAYBACK_MODE_ALL, AMPLITUDE_THRESHOLD_BUFFER_LENGTH, createAudioContext */
Expand Down Expand Up @@ -44,6 +44,10 @@ const launchAppLink = document.getElementById('launch-app-link');
const FILLER_SAMPLE_RATE = 384000;
const FILLER_SAMPLE_COUNT = FILLER_SAMPLE_RATE * 60;

// Body element

const body = document.getElementsByTagName('body')[0];

// Error display elements

const errorSpan = document.getElementById('error-span');
Expand All @@ -65,8 +69,19 @@ const loadingSpan = document.getElementById('loading-span');
let isExampleFile = true;

// File information modal
const informationModalElem = document.getElementById('information-modal');
const informationModal = new bootstrap.Modal(informationModalElem, {
backdrop: 'static',
keyboard: false
});
const informationModalDialog = document.getElementById('information-modal-dialog');
const informationModalCloseButton = document.getElementById('information-modal-close-button');
const artistSpan = document.getElementById('artist-span');
const commentSpan = document.getElementById('comment-span');
const guanoHolder = document.getElementById('guano-holder');

const DEFAULT_INFORMATION_MODAL_WIDTH = 400;
const INFORMATION_MODAL_PADDING = 40;

// Recording slice UI
const sliceLoadingBorderSVG = document.getElementById('slice-loading-border-svg');
Expand Down Expand Up @@ -226,6 +241,7 @@ let firstFile = true;

let artist = '';
let comment = '';
let possibleGuano = false;

let resampledFile = false;

Expand Down Expand Up @@ -372,7 +388,7 @@ function getFilterType () {
* 2 - Error
* @param {number} index Which span to show
*/
function displaySpans (index) {
async function displaySpans (index) {

if (resampledFile) {

Expand All @@ -399,10 +415,91 @@ function displaySpans (index) {

} else {

// Find the AudioMoth recording line and make sure it fits in the window

const recordedRegex0 = /^Recorded at (\d\d:\d\d:\d\d \d\d\/\d\d\/\d{4}) \(UTC([-|+]\d+)?:?(\d\d)?\) by AudioMoth [A-F0-9]{16}/;
const found0 = comment.match(recordedRegex0);
const recordedRegex1 = /^Recorded at (\d\d:\d\d:\d\d \d\d\/\d\d\/\d{4}) \(UTC([-|+]\d+)?:?(\d\d)?\) during deployment [A-F0-9]{16}/;
const found1 = comment.match(recordedRegex1);

let line = found0 ? found0[0] : '';
line = found1 ? found1[0] : line;

// Create an offscreen canvas to measure

const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');

const computedStyle = window.getComputedStyle(fileSpan);
const font = `${computedStyle.fontSize} ${computedStyle.fontFamily}`;
ctx.font = font;

const recordingTextWidth = ctx.measureText(line).width;

let newModalWidth = Math.max(DEFAULT_INFORMATION_MODAL_WIDTH, recordingTextWidth + INFORMATION_MODAL_PADDING);

// If GUANO data exists, check the widest line fits in the window

let guanoData;

guanoHolder.innerHTML = '';

if (possibleGuano) {

const result = await readGuano(fileHandler);

if (result.success) {

guanoData = result.guano;

let longestLineWidth = 0;

const boldFont = 'bold ' + font;

for (let i = 0; i < guanoData.length; i++) {

const titleSpan = document.createElement('span');
titleSpan.style = 'font-weight: bold; display: inline;';
titleSpan.innerText = guanoData[i][0] + ': ';

guanoHolder.appendChild(titleSpan);

const valueSpan = document.createElement('span');
valueSpan.style = 'display: inline;';
valueSpan.innerText = guanoData[i][1];

guanoHolder.appendChild(valueSpan);

const breakElement = document.createElement('br');

guanoHolder.appendChild(breakElement);

ctx.font = boldFont;
const titleWidth = ctx.measureText(guanoData[i][0] + ': ').width;

ctx.font = font;
const valueWidth = ctx.measureText(guanoData[i][1]).width;

const totalWidth = titleWidth + valueWidth;

longestLineWidth = Math.max(longestLineWidth, totalWidth);

}

newModalWidth = Math.max(newModalWidth, longestLineWidth + INFORMATION_MODAL_PADDING);

}

}

informationModalDialog.style = `min-width: ${newModalWidth}px !important; max-width: ${newModalWidth}px !important;`;

guanoHolder.style.display = !guanoData ? 'none' : '';

artistSpan.innerText = artist;
commentSpan.innerText = comment;

if (artist !== '' || comment !== '') fileInformationLink.style.display = '';
if (artist !== '' || comment !== '' || guanoData) fileInformationLink.style.display = '';

artistSpan.style.display = (artist === '') ? 'none' : '';
commentSpan.style.display = (comment === '') ? 'none' : '';
Expand Down Expand Up @@ -3158,6 +3255,10 @@ async function loadFile (exampleFilePath, exampleName) {

comment = result.comment;

// Collect possibility of GUANO data

possibleGuano = result.possibleGuano;

// Reset threshold arrays

samplesAboveThreshold = new Array(Math.ceil(samples.length / AMPLITUDE_THRESHOLD_BUFFER_LENGTH));
Expand Down Expand Up @@ -5032,6 +5133,24 @@ launchAppLink.addEventListener('click', () => {

});

// Enable/disable dragging to select when the information modal is open/closed

fileInformationLink.addEventListener('click', (e) => {

e.preventDefault();

body.classList.remove('body-no-select');

informationModal.show();

});

informationModalCloseButton.addEventListener('click', () => {

body.classList.add('body-no-select');

});

function loadPage () {

// Start zoom and offset level on default values
Expand Down
Loading

0 comments on commit a7c129b

Please sign in to comment.