Skip to content

Commit

Permalink
Added a help option to show detected classes based on the filters and…
Browse files Browse the repository at this point in the history 
… model selected.

Location list updates when the default location is changed.
  • Loading branch information
@Mattk70
Mattk70 committed Jan 24, 2024
1 parent 8c89509 commit 21af18f
Show file tree
Hide file tree
Showing 4 changed files with 98 additions and 22 deletions.
42 changes: 30 additions & 12 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -632,18 +632,21 @@ <h5>Saved Records</h5>
Help
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<!-- <li><a class="dropdown-item" id="update" href="#">
<span class="material-symbols-outlined text-info">browser_updated</span>Update Available!</a></li> -->
<li><a class="dropdown-item" id="usage" href="#">
<span class="material-symbols-outlined">help</span> Usage</a>
</li>
<li>
<a class="dropdown-item" id="settings" href="#">
<span class="material-symbols-outlined">help</span> Settings
</a>
</li>
<li><a class="dropdown-item" id="keyboard" href="#">
<span class="material-symbols-outlined">help</span> Keyboard Shortcuts
<li>
<a class="dropdown-item" id="species" href="#">
<span class="material-symbols-outlined">help</span> What species are detected?
</a>
</li>
<li><a class="dropdown-item" id="usage" href="#">
<span class="material-symbols-outlined">help</span> Using Chirpity</a>
</li>
<li>
<a class="dropdown-item" id="settings" href="#">
<span class="material-symbols-outlined">help</span> Settings
</a>
</li>
<li><a class="dropdown-item" id="keyboard" href="#">
<span class="material-symbols-outlined">help</span> Keyboard Shortcuts
</a>
</li>
<li><a class="dropdown-item" id="diagnostics" href="#">
Expand Down Expand Up @@ -753,6 +756,21 @@ <h5 class="modal-title" id="helpModalLabel">Help</h5>
</div>
</div>
</div>
<!-- Species Modal -->
<div class="modal fade" id="speciesModal" tabindex="-1" aria-labelledby="speciesModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-header justify-content-center">
<h5 class="modal-title" id="speciesModalLabel">Detected Species</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div id="speciesModalBody" class="modal-body"></div>
<div class="modal-footer justify-content-center">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Analyse selection modal -->
<div class="modal fade" id="detectionsModal" tabindex="-1" aria-labelledby="detectionsModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
Expand Down
3 changes: 3 additions & 0 deletions js/BirdNet2.4.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -134,6 +134,9 @@ onmessage = async (e) => {
}
case "list": {
myModel.list = e.data.list;
myModel.lat = parseFloat(e.data.lat);
myModel.lon = parseFloat(e.data.lon);
myModel.week = parseInt(e.data.week) || myModel.week;
DEBUG && console.log(`Setting list to ${myModel.list}`);
await myModel.setList();
postMessage({
Expand Down
43 changes: 41 additions & 2 deletions js/ui.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -622,14 +622,15 @@ const showLocation = async (fromSelect) => {

const displayLocationAddress = async (where) => {
const custom = where.includes('custom');
let latEl, lonEl, placeEl, place;
let latEl, lonEl, placeEl;
if (custom){
latEl = document.getElementById('customLat');
lonEl = document.getElementById('customLon');
placeEl = document.getElementById('customPlace');
address = await fetchLocationAddress(latEl.value, lonEl.value, false);
placeEl.value = address || 'Location not available';
} else {

latEl = document.getElementById('latitude');
lonEl = document.getElementById('longitude');
placeEl = document.getElementById('place');
Expand All @@ -645,6 +646,16 @@ const displayLocationAddress = async (where) => {
lat: config.latitude,
lon: config.longitude,
});
// Initially, so changes to the default location are immediately reflected in subsequent analyses
// We will switch to location filtersing when the default location is changed.
config.list = 'location';
updateListIcon();
document.getElementById('list-to-use').value = config.list;
worker.postMessage({
action: 'update-list',
list: 'location'
});

}
}

Expand Down Expand Up @@ -1546,6 +1557,9 @@ break;
}
case "seen-species-list": {generateBirdList("seenSpecies", args.list);
break;
}
case "valid-species-list": {populateSpeciesModal(args.rows);
break;
}
case "show-spinner": {showLoadingSpinner(500);
break;
Expand Down Expand Up @@ -1618,7 +1632,13 @@ function generateBirdOptionList({ store, rows, selected }) {
return listHTML;
}


function generateBirdIDList(rows) {
let listHTML = '';
for (const item in rows) {
listHTML += ` <tr><td>${rows[item].cname}</td> <td><i>${rows[item].sname}</i></td></tr>\n`;
}
return listHTML;
}

const getActiveRowID = () => activeRow?.rowIndex - 1;

Expand Down Expand Up @@ -3189,6 +3209,11 @@ document.getElementById('keyboard').addEventListener('click', async () => {
document.getElementById('settings').addEventListener('click', async () => {
await populateHelpModal('Help/settings.html', 'Settings Help');
});

document.getElementById('species').addEventListener('click', async () => {
worker.postMessage({action: 'get-valid-species'})
});

document.getElementById('usage').addEventListener('click', async () => {
await populateHelpModal('Help/usage.html', 'Usage Guide');
});
Expand All @@ -3201,6 +3226,20 @@ const populateHelpModal = async (file, label) => {
help.show();
}

const populateSpeciesModal = async (rows) => {
const model = config.model === 'v2.4' ? 'BirdNET' : 'Chirpity';
const location = config.list === 'location' ? ` centered on ${place.textContent.replace('fmd_good', '')}` : '';
let modalContent = `
<h6>Using the <b>${model}</b> model and the <b>${config.list}</b> list${location}, the following species can be detected:</h6>
`
modalContent += '<table class="table table-striped"><thead class="bg-text-dark"><tr><th>Common Name</th><th>Scientific Name</th></tr></thead><tbody>\n';
modalContent += generateBirdIDList(rows);
modalContent += '</tbody></table>\n';
document.getElementById('speciesModalBody').innerHTML = modalContent;
const species = new bootstrap.Modal(document.getElementById('speciesModal'));
species.show();
}

// Prevent the settings menu disappearing on click
document.getElementById('settingsMenu').addEventListener('click', (e) => {
e.stopImmediatePropagation();
Expand Down
32 changes: 24 additions & 8 deletions js/worker.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -292,7 +292,10 @@ break;
}
break;
}
case "get-detected-species-list": {getSpecies();
case "get-detected-species-list": {getDetectedSpecies();
break;
}
case "get-valid-species": {getValidSpecies();
break;
}
case "get-locations": {getLocations({
Expand Down Expand Up @@ -357,7 +360,10 @@ break;
SEEN_LIST_UPDATE = false;
predictWorkers.forEach((worker) => worker.postMessage({
message: "list",
list: args.list
list: args.list,
lat: STATE.lat,
lon: STATE.lon,
week: -1
}));
break;
}
Expand Down Expand Up @@ -1657,7 +1663,7 @@ function spawnWorkers(model, list, batchSize, threads) {
backend: BACKEND,
lat: STATE.lat,
lon: STATE.lon,
week: new Date(1617229255088).getWeekNumber()
week: -1 // new Date(1617229255088).getWeekNumber()
})
worker.onmessage = async (e) => {
await parseMessage(e)
Expand Down Expand Up @@ -1969,7 +1975,7 @@ break;
if (response["updateResults"] && STATE.db) {
await Promise.all([getResults(), getSummary()]);
if (["explore", "chart"].includes(STATE.mode)) {
getSpecies();
getDetectedSpecies();
}
}
}
Expand Down Expand Up @@ -2543,7 +2549,7 @@ const getRate = (species) => {
})
}

const getSpecies = () => {
const getDetectedSpecies = () => {
const range = STATE.explore.range;
const confidence = STATE.detect.confidence;
let sql = `SELECT cname, locationID
Expand All @@ -2563,6 +2569,16 @@ const getSpecies = () => {
})
};

const getValidSpecies = () => {
let sql = `SELECT cname, sname FROM species`;
if (STATE.blocked.length) {
sql += ` WHERE id NOT IN (${STATE.blocked.join(',')})`;
}
sql += ' GROUP BY cname ORDER BY cname';
diskDB.all(sql, (err, rows) => {
err ? console.log(err) : UI.postMessage({ event: 'valid-species-list', rows: rows })
})
};

const onUpdateFileStart = async (args) => {
let file = args.file;
Expand Down Expand Up @@ -2622,7 +2638,7 @@ async function onDelete({
}
// Update the seen species list
if (db === diskDB) {
getSpecies();
getDetectedSpecies();
} else {
UI.postMessage({event: 'unsaved-records'});
}
Expand Down Expand Up @@ -2651,7 +2667,7 @@ async function onDeleteSpecies({
if (changes) {
if (db === diskDB) {
// Update the seen species list
getSpecies();
getDetectedSpecies();
} else {
UI.postMessage({event: 'unsaved-records'});
}
Expand Down Expand Up @@ -2746,7 +2762,7 @@ const onFileDelete = async (fileName) => {
const result = await diskDB.runAsync('DELETE FROM files WHERE name = ?', fileName);
if (result.changes) {
onChangeMode('analyse');
getSpecies();
getDetectedSpecies();
UI.postMessage({
event: 'generate-alert',
message: `${fileName}
Expand Down

0 comments on commit 21af18f

Please sign in to comment.