@@ -10,101 +10,85 @@ A frontend overlay for [BirdNET-Pi](https://github.com/Nachtzuster/BirdNET-Pi).
## BOM
-| Qty | Description | Price | Link | Notes |
-|-----|-------------|-------|------|-------|
-| 1 | Raspberry Pi (4B / 5 / Zero 2W) | ~$35–80 | [Raspberry Pi](https://www.raspberrypi.com/products/) | 4B+ recommended |
-| 1 | Micro SD Card | ~$10 | [Amazon](https://a.co/d/08aiL8c) | ≥32 GB |
-| 1 | USB Lavalier Microphone | $14.99 | [Amazon](https://www.amazon.com/dp/B0176NRE1G) | The one I used. Any USB mic with a half-decent capsule works. |
-| 1 | Pi Power Supply | ~$10 | — | Matched to your Pi model |
+| Qty | Description | Price | Link |
+|-----|-------------|-------|------|
+| 1 | Raspberry Pi (4B / 5 / Zero 2W) | ~$35–80 | [Raspberry Pi](https://www.raspberrypi.com/products/) |
+| 1 | Micro SD Card (≥32 GB) | ~$10 | [Amazon](https://a.co/d/08aiL8c) |
+| 1 | USB lavalier microphone | $14.99 | [Amazon](https://www.amazon.com/dp/B0176NRE1G) |
+| 1 | Pi power supply | ~$10 | — |
-You'll also need a [Gemini API key](https://aistudio.google.com/apikey) (free tier is enough for an apartment-scale lifelist) and, optionally, an [eBird API key](https://ebird.org/api/keygen) for region-filtering the species pre-gen.
+Optional: a [Gemini API key](https://aistudio.google.com/apikey) (free tier covers a regional regen) for restyling or adding species, and an [eBird API key](https://ebird.org/api/keygen) for filtering the species list to your area.
---
-## 1. Install BirdNET-Pi
+## 1. Flash the SD card
-Follow the [BirdNET-Pi installation guide](https://github.com/mcguirepr89/BirdNET-Pi/wiki/Installation-Guide) on your Pi. Confirm the stock BirdNET-Pi UI is reachable at `http://birdnet.local/` before continuing.
+Use [Raspberry Pi Imager](https://www.raspberrypi.com/software/). Pick **Raspberry Pi OS Lite (64-bit)**. In the customisation dialog, set:
+
+- Username (your choice — the installer uses whatever you pick)
+- WiFi SSID + password
+- Hostname: `birdnet` (so it's reachable at `birdnet.local`)
+- Enable SSH with password auth
+
+Boot the Pi.
---
-## 2. Clone AvianVisitors
+## 2. Run the installer
+
+SSH in and run one command:
```bash
-ssh monalisa@birdnet.local
-git clone https://github.com/Twarner491/AvianVisitors.git ~/AvianVisitors
-cd ~/AvianVisitors
+ssh collage failed to load: ' + esc(e.message) + '
'; + }); - // ---- UI bindings ---- - var slider = document.getElementById('slider'); - var winPick = document.getElementById('winPick'); - var views = document.querySelectorAll('.view'); + // ---- UI ---- + function $(id) { return document.getElementById(id); } function syncPill(container) { + if (!container) return; var pill = container.querySelector('.seg-pill'); var active = container.querySelector('button[aria-current="true"]'); if (!pill || !active) return; @@ -69,11 +81,15 @@ pill.style.transform = 'translateX(' + active.offsetLeft + 'px)'; } function syncAllPills() { - [slider, winPick, document.getElementById('atlasSort')].forEach(function (c) { if (c) syncPill(c); }); + [$('slider'), $('winPick'), $('atlasSort')].forEach(syncPill); } function bindUI() { - // View slider - [].slice.call(slider.querySelectorAll('button')).forEach(function (b) { + var slider = $('slider'); + var winPick = $('winPick'); + var atlasEl = $('atlasSort'); + var views = document.querySelectorAll('.view'); + + if (slider) [].slice.call(slider.querySelectorAll('button')).forEach(function (b) { b.addEventListener('click', function () { [].slice.call(slider.querySelectorAll('button')).forEach(function (x) { x.setAttribute('aria-current', x === b ? 'true' : 'false'); @@ -86,8 +102,8 @@ if (i === 2) renderAtlas(); }); }); - // Window picker - [].slice.call(winPick.querySelectorAll('button')).forEach(function (b) { + + if (winPick) [].slice.call(winPick.querySelectorAll('button')).forEach(function (b) { b.setAttribute('aria-current', (+b.dataset.h === currentHours) ? 'true' : 'false'); b.addEventListener('click', function () { [].slice.call(winPick.querySelectorAll('button')).forEach(function (x) { @@ -99,9 +115,8 @@ refreshRecent(); }); }); - // Atlas sort - var atlasEl = document.getElementById('atlasSort'); - [].slice.call(atlasEl.querySelectorAll('button')).forEach(function (b) { + + if (atlasEl) [].slice.call(atlasEl.querySelectorAll('button')).forEach(function (b) { b.addEventListener('click', function () { [].slice.call(atlasEl.querySelectorAll('button')).forEach(function (x) { x.setAttribute('aria-current', x === b ? 'true' : 'false'); @@ -111,16 +126,16 @@ renderAtlas(); }); }); - // About modal - document.getElementById('aboutLink').addEventListener('click', function () { - document.getElementById('about-modal').setAttribute('aria-hidden', 'false'); + + var aboutLink = $('aboutLink'); + var aboutModal = $('about-modal'); + if (aboutLink && aboutModal) { + aboutLink.addEventListener('click', function () { aboutModal.setAttribute('aria-hidden', 'false'); }); + } + document.querySelectorAll('#about-modal [data-close]').forEach(function (el) { + el.addEventListener('click', function () { aboutModal && aboutModal.setAttribute('aria-hidden', 'true'); }); }); - document.querySelectorAll('[data-close]').forEach(function (el) { - el.addEventListener('click', function () { - document.getElementById('about-modal').setAttribute('aria-hidden', 'true'); - }); - }); - // Resize: re-pack collage and re-pill + var rT; window.addEventListener('resize', function () { clearTimeout(rT); @@ -137,10 +152,10 @@ function refreshAll() { var h = currentHours; return Promise.all([ - fetchJson(api('/api/lifelist.json')).catch(function () { return null; }), - fetchJson(api('/api/firstseen.json')).catch(function () { return null; }), - fetchJson(api('/api/timeseries.json?days=30')).catch(function () { return null; }), - fetchJson(api('/api/recent.json?hours=' + h)).catch(function () { return null; }), + fetchJson(api('lifelist')).catch(function () { return null; }), + fetchJson(api('firstseen')).catch(function () { return null; }), + fetchJson(api('timeseries', 'days=30')).catch(function () { return null; }), + fetchJson(api('recent', 'hours=' + h)).catch(function () { return null; }), ]).then(function (parts) { DATA.lifelist = parts[0]; DATA.firstseen = parts[1]; @@ -152,7 +167,7 @@ } function refreshRecent() { var h = currentHours; - return fetchJson(api('/api/recent.json?hours=' + h)).then(function (j) { + return fetchJson(api('recent', 'hours=' + h)).then(function (j) { if (h !== currentHours) return; DATA.recent = j; renderCollageFromData(); @@ -160,9 +175,10 @@ }).catch(function () {}); } - // ---- Mask + slug helpers ---- + // ---- Slug + mask helpers ---- var maskCache = {}; function loadMask(slug) { + if (!MASKS) return null; if (maskCache[slug]) return maskCache[slug]; var rec = MASKS[slug]; if (!rec) return null; @@ -182,17 +198,16 @@ return sci.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-|-$/g, ''); } function aspect(sci) { - var d = DIMS[slugify(sci)]; + var d = DIMS && DIMS[slugify(sci)]; return d ? d[0] / d[1] : 1.4; } + function imgUrl(sci, com) { + return media('cutout.php', 'sci=' + encodeURIComponent(sci) + + (com ? '&com=' + encodeURIComponent(com) : '') + + '&v=' + IMG_VERSION); + } // ---- Collage layout (mask-aware, viewport-budget) ---- - // - // Each species ships a low-res alpha mask. We maintain an occupancy - // grid at viewport resolution; for each tile we spiral outward from - // the cluster center and pick the closest non-overlapping placement. - // Total area is normalised so the entire cluster fits any viewport, - // and we iterate shrink+repack until every bird lands on-screen. function tuning(n) { return { packingBudgetFrac: n <= 4 ? 0.46 : n <= 12 ? 0.40 : n <= 24 ? 0.34 : 0.28, @@ -278,14 +293,17 @@ } function renderCollageFromData() { - var items = (DATA.recent && DATA.recent.species) || []; - renderCollage(items); + renderCollage((DATA.recent && DATA.recent.species) || []); } function renderCollage(items) { - var collage = document.getElementById('collage'); + var collage = $('collage'); + if (!collage) return; collage.innerHTML = ''; if (!items.length) { - collage.innerHTML = 'no birds heard in this window.
'; + var p = document.createElement('p'); + p.className = 'empty'; + p.textContent = 'no birds heard in this window.'; + collage.appendChild(p); return; } var W = collage.clientWidth, H = collage.clientHeight; @@ -297,13 +315,15 @@ var minArea = vpArea * T.minTileAreaFrac; var tiles = items.map(function (s) { - var slug = slugify(s.sci); + var slug = slugify(s.sci || ''); var mask = loadMask(slug); if (!mask) return null; var n = +s.n; if (!n || isNaN(n)) n = 1; return { mask: mask, data: s, ar: aspect(s.sci), score: Math.pow(Math.max(1, n), T.countExp) }; }).filter(Boolean); + if (!tiles.length) { collage.innerHTML = ''; return; } + var sumScore = tiles.reduce(function (a, t) { return a + t.score; }, 0) || 1; tiles.forEach(function (t) { t.area = Math.max(minArea, budget * t.score / sumScore); }); var sumA = tiles.reduce(function (a, t) { return a + t.area; }, 0); @@ -353,30 +373,35 @@ placed.forEach(function (t) { if (t.x > -1000) { t.x += dx; t.y += dy; } }); } + // Build tiles via createElement / textContent / setAttribute so user- + // editable species names from labels.txt can't smuggle markup. placed.forEach(function (t) { var s = t.data; - var img = api('/api/img?sci=' + encodeURIComponent(s.sci) + - (s.com ? '&com=' + encodeURIComponent(s.com) : '') + - '&v=' + IMG_VERSION); + var label = s.com || s.sci; var btn = document.createElement('button'); btn.className = 'gtile'; btn.type = 'button'; - btn.setAttribute('data-sci', s.sci); - btn.setAttribute('aria-label', s.com || s.sci); - btn.title = (s.com || s.sci) + ' · ' + (+s.n || 0) + ' calls'; + btn.dataset.sci = s.sci; + btn.setAttribute('aria-label', label); + btn.title = label + ' · ' + (+s.n || 0) + ' calls'; btn.style.left = t.x + 'px'; btn.style.top = t.y + 'px'; btn.style.width = t.fullW + 'px'; btn.style.height = t.fullH + 'px'; - btn.innerHTML = 'no detections in this window
'; return; }
@@ -388,24 +413,38 @@
var cap = Math.max(4, Math.floor(W / 28));
if (sp.length > cap) sp = sp.slice(0, cap);
var maxN = sp.reduce(function (m, s) { return Math.max(m, +s.n || 0); }, 1);
- var html = '';
+ tl.innerHTML = '';
+ var plot = document.createElement('div');
+ plot.className = 'stats-tl-plot';
sp.forEach(function (s) {
var ts = Date.parse((s.last_seen || '').replace(' ', 'T'));
var leftPct = isNaN(ts) ? 50 : ((Math.max(windowStart, Math.min(now, ts)) - windowStart) / windowSpan) * 100;
var n = +s.n || 0;
var bottomPct = (n / maxN) * 50;
- html += '';
+ var mark = document.createElement('div');
+ mark.className = 'stats-tl-mark';
+ mark.style.left = leftPct.toFixed(1) + '%';
+ mark.style.bottom = bottomPct.toFixed(1) + '%';
+ mark.dataset.sci = s.sci;
+ mark.title = (s.com || s.sci) + ' · ' + n + ' calls';
+ plot.appendChild(mark);
});
- html += '
';
- tl.innerHTML = html;
+ tl.appendChild(plot);
}
- // ---- Atlas: gridded alphabet of all species ----
+ // ---- Atlas ----
function renderAtlas() {
- var list = document.getElementById('atlasList');
+ var list = $('atlasList');
if (!list) return;
var sp = ((DATA.lifelist && DATA.lifelist.species) || []).slice();
- if (!sp.length) { list.innerHTML = 'no species yet — atlas fills in as the Pi detects birds.
'; return; } + if (!sp.length) { + var p = document.createElement('p'); + p.className = 'empty'; + p.textContent = 'no species yet — atlas fills in as the Pi detects birds.'; + list.innerHTML = ''; + list.appendChild(p); + return; + } var sort = readLS('av:atlasSort', 'count'); if (sort === 'count') sp.sort(function (a, b) { return (+b.n || 0) - (+a.n || 0); }); else if (sort === 'recent') sp.sort(function (a, b) { @@ -414,49 +453,66 @@ else sp.sort(function (a, b) { return Date.parse((a.first_seen || '').replace(' ', 'T')) - Date.parse((b.first_seen || '').replace(' ', 'T')); }); - list.innerHTML = sp.map(function (s) { - var img = api('/api/img?sci=' + encodeURIComponent(s.sci) + - (s.com ? '&com=' + encodeURIComponent(s.com) : '') + - '&v=' + IMG_VERSION); - return ''; - }).join(''); - [].slice.call(list.querySelectorAll('.atlas-card')).forEach(function (b) { - b.addEventListener('click', function () { openDetail({ sci: b.dataset.sci }); }); + list.innerHTML = ''; + sp.forEach(function (s) { + var btn = document.createElement('button'); + btn.className = 'atlas-card'; + btn.type = 'button'; + btn.dataset.sci = s.sci; + var img = document.createElement('img'); + img.loading = 'lazy'; + img.decoding = 'async'; + img.alt = s.com || s.sci; + img.src = imgUrl(s.sci, s.com); + var name = document.createElement('span'); + name.className = 'atlas-name'; + name.textContent = s.com || s.sci; + var count = document.createElement('span'); + count.className = 'atlas-count'; + count.textContent = String(+s.n || 0); + btn.appendChild(img); + btn.appendChild(name); + btn.appendChild(count); + btn.addEventListener('click', function () { openDetail(s); }); + list.appendChild(btn); }); } - // ---- Detail modal (basic — opens recording + spectrogram for a species) ---- + // ---- Detail modal ---- function openDetail(s) { var sci = s.sci || s; - // Lookup full record from lifelist if available var rec = ((DATA.lifelist && DATA.lifelist.species) || []).find(function (x) { return x.sci === sci; }) || s; - var img = api('/api/img?sci=' + encodeURIComponent(sci) + - (rec.com ? '&com=' + encodeURIComponent(rec.com) : '') + - '&v=' + IMG_VERSION); - var rec_url = api('/api/recording?sci=' + encodeURIComponent(sci)); - var spec_url = api('/api/spectrogram?sci=' + encodeURIComponent(sci)); - var modal = document.getElementById('detail-modal'); + var label = rec.com || sci; + + var modal = $('detail-modal'); if (!modal) { modal = document.createElement('div'); modal.id = 'detail-modal'; modal.setAttribute('role', 'dialog'); document.body.appendChild(modal); } + // Single innerHTML for the chrome (no user content), then build the + // user-content elements via createElement so labels are safe. modal.innerHTML = '' + '' +
' ' +
- ' 
' +
- ' 
' +
+ ' ![]()
' +
+ ' ' +
+ ' ![spectrogram]()
' +
'
';
+ var card = modal.querySelector('.detail-card');
+ card.querySelector('.detail-img').src = imgUrl(sci, rec.com);
+ card.querySelector('.detail-img').alt = label;
+ card.querySelector('.detail-title').textContent = label;
+ card.querySelector('.detail-sci em').textContent = sci;
+ card.querySelector('.detail-stats').textContent =
+ (+rec.n || 0) + ' calls · last heard ' + (rec.last_seen || '—');
+ card.querySelector('.detail-audio').src = media('recording.php', 'sci=' + encodeURIComponent(sci));
+ card.querySelector('.detail-spec').src = media('spectrogram.php', 'sci=' + encodeURIComponent(sci));
modal.setAttribute('aria-hidden', 'false');
modal.querySelectorAll('[data-close]').forEach(function (el) {
el.addEventListener('click', function () { modal.setAttribute('aria-hidden', 'true'); });
diff --git a/avian/frontend/index.html b/avian/frontend/index.html
index 10e9fae..94a10ac 100644
--- a/avian/frontend/index.html
+++ b/avian/frontend/index.html
@@ -5,7 +5,6 @@
' + (rec.com || sci) + '
' + - '' + sci + '
' + - '' + (+rec.n || 0) + ' calls · last heard ' + (rec.last_seen || '—') + '
' + - ' ' + - '' + + ' ' + + ' ' + + '