Skip to content

Commit

Permalink
Merge branch 'optimisation'
Browse files Browse the repository at this point in the history
  • Loading branch information
@Mattk70
Mattk70 committed Oct 18, 2024
2 parents fa3c1bd + 79c1f44 commit 343dd6c
Show file tree
Hide file tree
Showing 12 changed files with 997 additions and 837 deletions.
54 changes: 29 additions & 25 deletions Help/keyboard.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,11 +11,11 @@
<td colspan="2" class="text-center text-bg-light"><h5>File handling</h5></td>
</tr>
<tr>
<td><b>Ctrl-O</b></td>
<td><kbd>Ctrl</kbd> + <kbd>O</kbd></td>
<td>Show file open dialog</td>
</tr>
<tr>
<td><b>Ctrl-S</b></td>
<td><kbd>Ctrl</kbd> + <kbd>S</kbd></td>
<td>Save detections to the records archive.
</td>
</tr>
Expand All @@ -24,112 +24,116 @@
<td colspan="2" class="text-center text-bg-light"><h5>Analysis</h5></td>
</tr>
<tr>
<td><b>Ctrl-A</b></td>
<td><kbd>Ctrl</kbd> + <kbd>A</kbd></td>
<td>Analyse the current file.
</td>
</tr>
<tr>
<td><b>Shift-Ctrl-A</b></td>
<td><kbd>Shift</kbd> + <kbd>Ctrl</kbd> + <kbd>A</kbd></td>
<td>Analyse all open files.
</td>
</tr>
<tr>
<td><b>Esc</b></td>
<td><kbd>Esc</kbd></td>
<td>Stop analysis</td>
</tr>
<tr>
<td><kbd>Ctrl</kbd> + <kbd>Tab</kbd></td>
<td>Toggle between exploring the archive and the latest analysis results. This allows you to compare current detections with those you've previously recorded.</td>
</tr>
<tr>
<td colspan="2" class="text-center text-bg-light"><h5>Transport Controls</h5></td>
</tr>
<tr>
<td><b>SpaceBar</b></td>
<td><kbd>SpaceBar</kbd></td>
<td>Toggle Play/Pause the audio</td>
</tr>
<tr>
<td><b>P</b></td>
<td><kbd>P</kbd></td>
<td>Play the selected region. Only active if a region has been selected.</td>
</tr>
<tr>
<td><b>Ctrl-C</b></td>
<td><kbd>Ctrl</kbd> + <kbd>C</kbd></td>
<td>Centre the spectrogram at the current playhead position.</td>
</tr>
<tr>
<td><b>Ctrl-G</b></td>
<td><kbd>Ctrl</kbd> + <kbd>G</kbd></td>
<td>Go to position in file</td>
</tr>
<tr>
<td><b>Home (Fn + ArrowLeft)</b></td>
<td><kbd>Home</kbd> or <br><kbd>Fn</kbd> + <kbd>ArrowLeft</kbd></td>
<td>Move the playhead to the beginning of the file</td>
</tr>
<tr>
<td><b>End (Fn + ArrowLeft)</b></td>
<td><kbd>End</kbd> or <br><kbd>Fn</kbd> + <kbd>ArrowRight</kbd></td>
<td>Move the playhead to the end of the file</td>
</tr>
<tr>
<td><b>PgUp (Fn + ArrowUp)</b></td>
<td><kbd>PgUp</kbd> or <br><kbd>Fn</kbd> + <kbd>ArrowUp</kbd></td>
<td>Move the playhead back by a screen width</td>
</tr>
<tr>
<td><b>PgDn (Fn + ArrowDown)</b></td>
<td><kbd>PgDn</kbd> or <br><kbd>Fn</kbd> + <kbdArrowDown</kbd></td>
<td>Move the playhead forward by a screen width</td>
</tr>
<tr>
<td><b>Left arrow (&larr;)</b></td>
<td><kbd>Left arrow (&larr;)</kbd></td>
<td>Move the playhead forward. </td>
</tr>
<tr>
<td><b>Right arrow (&rarr;)</b></td>
<td><kbd>Right arrow (&rarr;)</kbd></td>
<td>Move the playhead backward. </td>
</tr>
<tr>
<td><b>Tab or Down Arrow (&darr;)</b></td>
<td><kbd>Tab</kbd> or <br><kbd>Down Arrow (&darr;)</kbd></td>
<td>Skip to the next detection</td>
</tr>
<tr>
<td><b>Shift Tab or Up Arrow (&uarr;)</b></td>
<td><kbd>Shift</kbd> + <kbd>Tab</kbd> or <br><kbd>Up Arrow (&uarr;)</kbd></td>
<td>Skip back to the previous detection</td>
</tr>
<tr>
<td colspan="2" class="text-center text-bg-light"><h5>Spectrogram</h5></td>
</tr>
<tr>
<td><b>Plus (+) </b></td>
<td><kbd>+</kbd></td>
<td>Zoom in on the spectrogram. When zooming, Chirpity automatically adjusts the short-time Fourier transform (STFT) window size to optimize
the spectral resolution
</td>
</tr>
<tr>
<td><b>Minus (-)</b></td>
<td><kbd>-</kbd></td>
<td>Zoom out the spectrogram. When zooming, Chirpity automatically adjusts the STFT window size to optimize the
spectral resolution
</td>
</tr>
<tr>
<td><b>Ctrl Plus (+) </b></td>
<td><kbd>Ctrl</kbd> + <kbd>+</kbd> or <kbd>F5</kbd></td>
<td>Manually reduce the spectrogram window size. Adjusting the window size has the effect of sharpening / blurring the calls in the spectrogram.
</td>
</tr>
<tr>
<td><b>Ctrl Minus (-)</b></td>
<td><kbd>Ctrl</kbd> + <kbd>-</kbd> or <kbd>F4</kbd</td>
<td>Manually increase the spectrogram window size
</td>
</tr>
<tr>
<td><b>Ctrl-T</b></td>
<td><kbd>Ctrl</kbd> + <kbd>T</kbd></td>
<td>Toggle between Timecode and Time of Day</td>
</tr>
<tr>
<td colspan="2" class="text-center text-bg-light"><h5>Records</h5></td>
</tr>
<tr>
<td><b>Delete</b> or <b>Backspace</b></td>
<td><kbd>Delete</kbd> or <kbd>Backspace</kbd></td>
<td>Delete current record</td>
</tr>
<tr>
<td><b>Ctrl-Z</b></td>
<td><kbd>Ctrl</kbd> + <kbd>Z</kbd></td>
<td>Restore deleted record(s)</td>
</tr>
<tr>
<td><b>Ctrl-V</b></td>
<td><kbd>Ctrl</kbd> + <kbd>V</kbd></td>
<td>Validate the current active record (confirm the detection)</td>
</tr>
</table>
Expand Down
25 changes: 14 additions & 11 deletions css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -141,6 +141,7 @@ div#contentWrapper.loaded {
}

.zoom {
position: absolute;
font-size: calc(32px * var(--font-size-scale));;
}

Expand All @@ -160,7 +161,7 @@ select {

.shortcut {
color: #666;
font-size: 14px;
font-size: calc(14px * var(--font-size-scale));
vertical-align: -webkit-baseline-middle;
}

Expand Down Expand Up @@ -192,7 +193,7 @@ ul {
/* Add some padding */
text-decoration: none;
/* Remove default text underline */
font-size: 14px;
font-size: calc(14px * var(--font-size-scale));
/* Increase the font-size */
color: black;
/* Add a black text color */
Expand Down Expand Up @@ -409,6 +410,8 @@ footer {
border-radius: 5px;
z-index: 3;
display: none;
opacity: 0;
transition: opacity 1.3s ease; /* Smooth transitions for left and right positions */
}
/* ============ desktop view .end// ============ */

Expand Down Expand Up @@ -485,7 +488,7 @@ footer {
justify-content: center;
align-items: center;
text-align: center;
font-size: small;
font-size: calc(14px * var(--font-size-scale));;
color: white;
}

Expand Down Expand Up @@ -570,7 +573,7 @@ input[type="range"].vertical {
}
}

#loadingOverlay {
#loading {
position: absolute;
top: 20vh;
}
Expand All @@ -581,7 +584,7 @@ input[type="range"].vertical {
width: calc(20px * var(--font-size-scale));
height: calc(20px * var(--font-size-scale));
border-radius: 50%;
font-size: medium;
font-size: calc(14px * var(--font-size-scale));
background-color: gray;
color: white;
text-align: center;
Expand Down Expand Up @@ -702,7 +705,7 @@ input[type="range"].vertical {
position: relative;
display: flex;
justify-content: space-between;
font-size: 16px;
font-size: calc(16px * var(--font-size-scale));
color: #ffffff;
}

Expand Down Expand Up @@ -741,8 +744,8 @@ input[type="range"].vertical {
.range_container input[type="number"] {
color: #929292;
width: 80px;
height: 24px;
font-size: 20px;
height: calc(24px * var(--font-size-scale));
font-size: calc(20px * var(--font-size-scale));
border: none;
}

Expand All @@ -766,7 +769,7 @@ input[type="range"].vertical {
z-index: 1;
}

.guano-popover {
.metadata-popover {
--bs-popover-max-width: 500px;
max-height: 500px;
--bs-popover-border-color: var(--bs-primary);
Expand All @@ -777,12 +780,12 @@ input[type="range"].vertical {
overflow: hidden;
}

.guano {
.metadata {
max-height: 450px;
overflow-y: scroll;
}

.guano table {
.metadata table {
width: 100%; /* Ensure the table takes full width */
table-layout: auto;
}
16 changes: 8 additions & 8 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -753,8 +753,8 @@ <h5>Saved Records</h5>
<li class="dropdown-item disabled" id="explore">
<span class="material-symbols-outlined">explore</span> Explore Archive
</li>
<li class="dropdown-item d-none" id="restore">
<span class="material-symbols-outlined">youtube_searched_for</span> Restore Latest Analysis
<li class="dropdown-item disabled" id="active-analysis">
<span class="material-symbols-outlined">youtube_searched_for</span> Return to Active Analysis
</li>
<li class="dropdown-divider"></li>
<li class="dropdown-item disabled" id="compress-and-organise">
Expand Down Expand Up @@ -1122,11 +1122,11 @@ <h5 class="modal-title" id="locationModalLabel">Set Location</h5>
</div>
<!-- Controls view -->
<div class="container-fluid p-1 text-bg-dark d-inline-flex" id="controlsWrapper" style="max-height: 50px" title="Drag to resize the Spectrogram window.">
<a id="guano" class="pointer pt-2 d-none" tabindex="-1" data-bs-custom-class="guano-popover" data-bs-html="true" data-bs-toggle="popover" data-bs-trigger="focus" data-bs-title="File Metadata" id="File Metadata-circle-help" >
<span class="material-symbols-outlined" title="Display GUANO metadata">other_admission</span></a>
<a id="metadata" class="pointer pt-2 d-none" tabindex="-1" data-bs-custom-class="metadata-popover" data-bs-html="true" data-bs-toggle="popover" data-bs-trigger="focus" data-bs-title="File Metadata" id="File Metadata-circle-help" >
<span class="material-symbols-outlined" title="Display File Metadata">other_admission</span></a>
<div id="filename" class="col-auto ps-1 overflow-visible flex-nowrap"></div>
<div id="unsaved-icon" class="material-symbols-outlined ms-2 me-2 text-warning pointer d-none" tabindex="-1" data-bs-toggle="popover" data-bs-trigger="focus" data-bs-title="Unsaved Edits" id="Unsaved Edits-circle-help" data-bs-content="There are changes to the results that haven't been saved.">warning</div>
<div class="col-auto btn-group bg-dark ms-2 me-2 text-nowrap" role="group">
<div class="btn-group bg-dark pt-0 p-1 ms-2 me-2 text-nowrap" role="group">
<button id="playToggle" class="p-1 pe-2 btn btn-outline-secondary" title="Play / Pause (SpaceBar)">
<span class="material-symbols-outlined ">play_circle</span><span
class="align-middle d-none d-lg-inline"> Play </span>
Expand All @@ -1135,13 +1135,13 @@ <h5 class="modal-title" id="locationModalLabel">Set Location</h5>
class="align-middle d-none d-lg-inline-block">Pause</span>
</button>
</div>
<div class="col btn-group bg-dark pe-2" role="group">
<div class="col btn-group bg-dark pt-0 p-1 pe-2" role="group">
<button id="zoomIn" title="Zoom into the spectrogram (Keyboard Shortcut: + key)" class="btn btn-outline-secondary"
style="max-width: 70px">
<span class="material-symbols-outlined zoom">zoom_in</span>
<span class="material-symbols-outlined zoom translate-middle">zoom_in</span>
</button>
<button id="zoomOut" title="Zoom out of the spectrogram (Keyboard Shortcut: - key)" class="btn btn-outline-secondary"
style="max-width: 70px"><span class="material-symbols-outlined zoom align-middle">zoom_out</span>
style="max-width: 70px"><span class="material-symbols-outlined zoom translate-middle">zoom_out</span>
</button>
</div>
<div id="progressDiv" class="col-2 d-none"><span id="fileNumber"></span><br>
Expand Down
Loading

0 comments on commit 343dd6c

Please sign in to comment.