Add Refresh Now button and configurable frame_host

- Trigger endpoint on frame Pi (port 8080) starts birdframe.service
- Frame admin panel has a Refresh Now button at the top
- frame_host config field lets user set the frame Pi's IP/hostname
- Button uses frame_host from config (no hardcoded hostname)

Co-Authored-By: Claude Opus 4 <noreply@anthropic.com>

avian/api/birdnet-api.php

@@ -184,6 +184,65 @@ switch ($action) {
         break;
     }
 
+
+    case 'frame_config': {
+        $cfg_path = __DIR__ . '/frame-config.json';
+        $defaults = [
+            'mode' => 'today',
+            'hours' => 24,
+            'start_time' => '06:00',
+            'hold_overnight' => true,
+            'species_source' => '',
+            'zip' => '',
+            'bw_days' => 7,
+            'bw_country' => 'us',
+            'image_url' => '',
+            'shoot' => true,
+            'shoot_title' => 'avian visitors',
+            'shoot_subtitle' => 'Heard Today',
+            'shoot_headline_px' => 42,
+            'shoot_eyebrow_px' => 18,
+            'shoot_lowercase' => false,
+            'shoot_mat' => 0.04,
+            'shoot_small_floor' => 0.04,
+            'shoot_count_exp' => 0.65,
+            'mat' => 0.0,
+            'mat_opening_w' => 0,
+            'mat_opening_h' => 0,
+            'rotate' => 90,
+            'saturation' => 0.6,
+            'panel' => '',
+            'quiet_start' => 22,
+            'quiet_end' => 6,
+            'heal_hours' => 24,
+            'timeout' => 45,
+            'frame_host' => '',
+            'basic_user' => '',
+            'basic_pass' => '',
+        ];
+        if ($_SERVER['REQUEST_METHOD'] === 'POST') {
+            $input = json_decode(file_get_contents('php://input'), true);
+            if (!is_array($input)) {
+                http_response_code(400);
+                echo json_encode(['error' => 'invalid JSON']);
+                break;
+            }
+            $current = file_exists($cfg_path) ? json_decode(file_get_contents($cfg_path), true) : $defaults;
+            if (!is_array($current)) $current = $defaults;
+            $allowed = array_keys($defaults);
+            foreach ($input as $k => $v) {
+                if (in_array($k, $allowed, true)) $current[$k] = $v;
+            }
+            file_put_contents($cfg_path, json_encode($current, JSON_PRETTY_PRINT) . "\n");
+            echo json_encode($current);
+        } else {
+            $current = file_exists($cfg_path) ? json_decode(file_get_contents($cfg_path), true) : $defaults;
+            if (!is_array($current)) $current = $defaults;
+            echo json_encode(array_merge($defaults, $current));
+        }
+        break;
+    }
+
     default:
         http_response_code(404);
         echo json_encode(['error' => 'unknown action']);

avian/api/menu.php

@@ -31,6 +31,7 @@ if (getenv('AV_REQUIRE_AUTH') === '1' && empty($_SERVER['HTTP_AUTHORIZATION']))
 echo json_encode([
     'items' => [
         ['label' => 'settings', 'href' => '/#admin=settings', 'native' => true],
+        ['label' => 'frame',    'href' => '/#admin=frame',    'native' => true],
         ['label' => 'system',   'href' => '/#admin=system',   'native' => true],
         ['label' => 'logs',     'href' => '/#admin=logs',     'native' => true],
         ['label' => 'tools',    'href' => '/#admin=tools',    'native' => true],

avian/frontend/apt.js

@@ -160,15 +160,29 @@
   applySiteTitle(siteTitle);
 
   var winBtns = [].slice.call(winPick.querySelectorAll('button'));
-  var currentHours = +readLS('bird:window', '24') || 24;
+  var START_HOUR = +(readLS('bird:todayStart', '6')) || 6;
+  var windowMode = readLS('bird:window', '24');
+  var currentHours = windowMode === 'today' ? todayHours() : (+windowMode || 24);
+  function todayHours() {
+    var now = new Date();
+    var start = new Date(now); start.setHours(START_HOUR, 0, 0, 0);
+    if (now < start) start.setDate(start.getDate() - 1);
+    return Math.max(1, (now - start) / 3600000);
+  }
+  function effectiveHours() {
+    if (windowMode === 'today') { currentHours = todayHours(); }
+    return currentHours;
+  }
   winBtns.forEach(function (b) {
-    b.setAttribute('aria-current', (+b.dataset.h === currentHours) ? 'true' : 'false');
+    var match = windowMode === 'today' ? b.dataset.h === 'today' : +b.dataset.h === currentHours;
+    b.setAttribute('aria-current', match ? 'true' : 'false');
   });
   winBtns.forEach(function (b) {
     b.addEventListener('click', function () {
       winBtns.forEach(function (x) { x.setAttribute('aria-current', x === b ? 'true' : 'false'); });
-      currentHours = +b.dataset.h;
+      windowMode = b.dataset.h;
-      writeLS('bird:window', String(currentHours));
+      currentHours = windowMode === 'today' ? todayHours() : +windowMode;
+      writeLS('bird:window', windowMode);
       syncPill(winPick);
       // Actual data refresh is wired below via refreshRecent().
     });
@@ -850,9 +864,10 @@
   // a bare "window" with the span it actually covers. Thresholds match
   // the winPick buttons (1H / 12H / 24H / 7D / ALL).
   function windowLabel(h) {
+    if (windowMode === 'today') return 'today';
     if (h <= 1) return 'this hour';
     if (h <= 12) return 'past 12h';
-    if (h <= 24) return 'today';
+    if (h <= 24) return 'past 24h';
     if (h <= 168) return 'this week';
     return 'all time';
   }
@@ -1381,8 +1396,8 @@
     // changes the picker again before it resolves - or a slower poll
     // lands later - we discard the stale response so the collage
     // never reverts to a different window.
-    var forHours = currentHours;
+    var forHours = effectiveHours();
-    return fetchJson('./avian/api/birdnet-api.php?action=recent&hours=' + forHours)
+    return fetchJson('./avian/api/birdnet-api.php?action=recent&hours=' + Math.round(forHours))
       .then(function (j) {
         if (forHours !== currentHours) return; // window changed mid-flight
         DATA.recent = j; renderWindowDependent(animate);
@@ -1390,13 +1405,13 @@
       .catch(function (e) { console.warn('recent fetch failed', e); });
   }
   function refreshAll(animate) {
-    var forHours = currentHours;
+    var forHours = effectiveHours();
     return Promise.all([
       fetchJson('./avian/api/birdnet-api.php?action=stats').catch(function () { return null; }),
       fetchJson('./avian/api/birdnet-api.php?action=lifelist').catch(function () { return null; }),
       fetchJson('./avian/api/birdnet-api.php?action=timeseries&days=30').catch(function () { return null; }),
       fetchJson('./avian/api/birdnet-api.php?action=firstseen&limit=10').catch(function () { return null; }),
-      fetchJson('./avian/api/birdnet-api.php?action=recent&hours=' + forHours).catch(function () { return null; }),
+      fetchJson('./avian/api/birdnet-api.php?action=recent&hours=' + Math.round(forHours)).catch(function () { return null; }),
     ]).then(function (parts) {
       DATA.stats = parts[0];
       DATA.lifelist = parts[1];
@@ -1817,8 +1832,39 @@
       + '  <input type="text" class="title-input" data-title-input maxlength="40" value="' + adminEsc(siteTitle) + '" placeholder="your birds">'
       + '</div>';
   }
+  function todayStartRow() {
+    var h = START_HOUR;
+    var label = (h === 0 ? '12' : h > 12 ? '' + (h - 12) : '' + h) + ':00 ' + (h < 12 ? 'AM' : 'PM');
+    return ''
+      + '<div class="slider-row">'
+      + '  <div class="head">'
+      + '    <div class="label-block">'
+      + '      <span class="label">Today starts at</span>'
+      + '      <span class="hint">when the TODAY window resets</span>'
+      + '    </div>'
+      + '    <span class="value" data-value-for="todayStart">' + label + '</span>'
+      + '  </div>'
+      + '  <div class="slider-track">'
+      + '    <input type="range" min="0" max="12" step="1" value="' + h + '" data-today-start>'
+      + '  </div>'
+      + '</div>';
+  }
   function wireSettingsControls(scope) {
     scope = scope || document;
+    var todaySlider = scope.querySelector('[data-today-start]');
+    if (todaySlider) {
+      todaySlider.addEventListener('input', function () {
+        var h = +todaySlider.value;
+        var label = (h === 0 ? '12' : h > 12 ? '' + (h - 12) : '' + h) + ':00 ' + (h < 12 ? 'AM' : 'PM');
+        var valEl = scope.querySelector('[data-value-for="todayStart"]');
+        if (valEl) valEl.textContent = label;
+      });
+      todaySlider.addEventListener('change', function () {
+        START_HOUR = +todaySlider.value;
+        writeLS('bird:todayStart', String(START_HOUR));
+        if (windowMode === 'today') { currentHours = todayHours(); refreshRecent(true); }
+      });
+    }
     scope.querySelectorAll('.switch').forEach(function (sw) {
       sw.addEventListener('click', function () {
         var on = sw.getAttribute('aria-checked') !== 'true';
@@ -2321,6 +2367,7 @@
   var adminSect = null;
   var ADMIN_TITLES = {
     settings: 'Settings',
+    frame: 'Frame',
     system: 'System',
     logs: 'Logs',
     tools: 'Tools',
@@ -2356,6 +2403,7 @@
     if (adminPollT) { clearInterval(adminPollT); adminPollT = null; }
     adminSect = section;
     if (section === 'settings') renderAdminSettings();
+    else if (section === 'frame') renderAdminFrame();
     else if (section === 'system') renderAdminSystem();
     else if (section === 'logs') renderAdminLogs();
     else if (section === 'tools') renderAdminTools();
@@ -2378,6 +2426,190 @@
     return '<div class="admin-unreachable">Pi unreachable - ' + adminEsc(reason || 'no data') + '</div>';
   }
 
+
+  // ---- Frame config admin panel ----
+  function renderAdminFrame() {
+    adminBody.innerHTML = '<p style="font:11px ui-monospace,monospace;color:var(--ink-soft);text-align:center">loading frame config...</p>';
+    fetch('./avian/api/birdnet-api.php?action=frame_config', { credentials: 'same-origin', cache: 'no-store' })
+      .then(function (r) { return r.ok ? r.json() : Promise.reject(r.status); })
+      .then(function (fc) {
+        adminBody.innerHTML =
+          '<div class="admin-settings">'
+          + '<div class="menu-row" style="justify-content:center;padding:12px 0">'
+          + '  <button type="button" id="frameRefreshBtn" class="frame-refresh-btn">Refresh Now</button>'
+          + '</div>'
+          + '<div class="frame-section-label">Display</div>'
+          + frameSegmented('mode', 'Mode', 'how the time window works', fc.mode, [
+              { v: 'today', label: 'today' },
+              { v: 'window', label: 'window' },
+            ])
+          + frameSlider('hours', 'Window hours', 'rolling window size (window mode)', fc.hours, 1, 168, 1, 0)
+          + frameInput('start_time', 'Start time', 'daily reset time (today mode)', fc.start_time)
+          + frameToggle('hold_overnight', 'Hold overnight', 'keep old collage until first bird', fc.hold_overnight)
+          + frameSlider('quiet_start', 'Quiet start', 'hour to stop refreshing', fc.quiet_start, 0, 23, 1, 0)
+          + frameSlider('quiet_end', 'Quiet end', 'hour to resume refreshing', fc.quiet_end, 0, 23, 1, 0)
+          + frameSlider('heal_hours', 'Heal hours', 'force refresh even if unchanged', fc.heal_hours, 1, 48, 1, 0)
+          + '<div class="frame-section-label">Titles</div>'
+          + frameInput('shoot_title', 'Title', 'shown above the collage', fc.shoot_title || '')
+          + frameInput('shoot_subtitle', 'Subtitle', 'shown below the title', fc.shoot_subtitle || '')
+          + frameToggle('shoot_lowercase', 'Lowercase', 'lowercase the title text', fc.shoot_lowercase)
+          + '<div class="frame-section-label">Collage</div>'
+          + frameSlider('shoot_count_exp', 'Size exponent', 'how much detection count affects bird size', fc.shoot_count_exp, 0.3, 1.0, 0.05, 2)
+          + frameSlider('shoot_small_floor', 'Small floor', 'minimum size for rare birds', fc.shoot_small_floor, 0.01, 0.15, 0.01, 2)
+          + frameSlider('shoot_mat', 'Collage padding', 'padding around the collage area', fc.shoot_mat, 0, 0.1, 0.01, 2)
+          + frameSlider('shoot_headline_px', 'Headline size', 'title font size in px', fc.shoot_headline_px, 20, 80, 1, 0)
+          + frameSlider('shoot_eyebrow_px', 'Eyebrow size', 'subtitle font size in px', fc.shoot_eyebrow_px, 10, 40, 1, 0)
+          + '<div class="frame-section-label">Hardware</div>'
+          + frameSegmented('rotate', 'Rotation', 'orientation of the frame', fc.rotate, [
+              { v: 90, label: '90' },
+              { v: 270, label: '270' },
+            ])
+          + frameSlider('saturation', 'Saturation', 'color intensity for e-ink', fc.saturation, 0.0, 1.0, 0.05, 2)
+          + frameSlider('mat_opening_w', 'Mat width', 'matte opening width (inches, 0=default)', fc.mat_opening_w, 0, 12, 0.5, 1)
+          + frameSlider('mat_opening_h', 'Mat height', 'matte opening height (inches, 0=default)', fc.mat_opening_h, 0, 14, 0.5, 1)
+          + frameSlider('mat', 'Extra mat', 'global content shrink inside opening', fc.mat, 0, 0.1, 0.01, 2)
+          + frameInput('frame_host', 'Frame address', 'IP or hostname of the frame Pi', fc.frame_host || '')
+          + frameInput('panel', 'Panel driver', 'force driver (blank=auto)', fc.panel || '')
+          + frameSlider('timeout', 'Timeout', 'seconds to wait for page render', fc.timeout, 10, 120, 5, 0)
+          + '<div class="frame-section-label">Source</div>'
+          + frameSegmented('species_source', 'Source', 'where bird data comes from', fc.species_source, [
+              { v: '', label: 'local' },
+              { v: 'birdweather', label: 'BirdWeather' },
+            ])
+          + frameInput('zip', 'ZIP code', 'for BirdWeather mode', fc.zip || '')
+          + frameSlider('bw_days', 'BW lookback', 'BirdWeather days to look back', fc.bw_days, 1, 30, 1, 0)
+          + frameInput('bw_country', 'BW country', 'geocoder country code', fc.bw_country || 'us')
+          + frameInput('image_url', 'Image URL', 'direct image URL (overrides shoot)', fc.image_url || '')
+          + frameToggle('shoot', 'Screenshot mode', 'capture collage via headless browser', fc.shoot)
+          + '<div class="frame-section-label">Auth</div>'
+          + frameInput('basic_user', 'Username', 'basic auth username', fc.basic_user || '')
+          + frameInput('basic_pass', 'Password', 'basic auth password', fc.basic_pass || '', true)
+          + '</div>';
+        wireFrameControls(fc);
+      })
+      .catch(function (err) {
+        adminBody.innerHTML =
+          '<div class="menu-row"><span class="label">Failed to load frame config <small class="hint">' + err + '</small></span></div>';
+      });
+  }
+
+  function frameToggle(key, label, hint, on) {
+    return ''
+      + '<div class="menu-row">'
+      + '  <div><span class="label">' + label + '</span>'
+      +     (hint ? '<span class="hint">' + hint + '</span>' : '')
+      + '  </div>'
+      + '  <button type="button" class="switch" role="switch" aria-checked="' + (on ? 'true' : 'false') + '" data-frame-key="' + key + '"></button>'
+      + '</div>';
+  }
+  function frameSlider(key, label, hint, val, min, max, step, digits) {
+    return ''
+      + '<div class="slider-row">'
+      + '  <div class="head">'
+      + '    <div class="label-block">'
+      + '      <span class="label">' + label + '</span>'
+      +       (hint ? '<span class="hint">' + hint + '</span>' : '')
+      + '    </div>'
+      + '    <span class="value" data-frame-value="' + key + '">' + (+val).toFixed(digits) + '</span>'
+      + '  </div>'
+      + '  <div class="slider-track">'
+      + '    <input type="range" min="' + min + '" max="' + max + '" step="' + step + '" value="' + val + '" data-frame-key="' + key + '" data-digits="' + digits + '">'
+      + '  </div>'
+      + '</div>';
+  }
+  function frameSegmented(key, label, hint, val, opts) {
+    var btns = opts.map(function (o) {
+      var match = String(o.v) === String(val);
+      return '<button type="button" data-v="' + o.v + '" aria-current="' + (match ? 'true' : 'false') + '">' + o.label + '</button>';
+    }).join('');
+    return ''
+      + '<div class="menu-row">'
+      + '  <div><span class="label">' + label + '</span>'
+      +     (hint ? '<span class="hint">' + hint + '</span>' : '')
+      + '  </div>'
+      + '  <div class="seg" data-frame-key="' + key + '">' + btns + '</div>'
+      + '</div>';
+  }
+  function frameInput(key, label, hint, val, isPass) {
+    return ''
+      + '<div class="menu-row">'
+      + '  <div><span class="label">' + label + '</span>'
+      +     (hint ? '<span class="hint">' + hint + '</span>' : '')
+      + '  </div>'
+      + '  <input type="' + (isPass ? 'password' : 'text') + '" class="title-input" data-frame-key="' + key + '" value="' + adminEsc(val) + '" placeholder="' + label + '">'
+      + '</div>';
+  }
+
+  var frameSaveTimer = null;
+  function saveFrameConfig(updates) {
+    clearTimeout(frameSaveTimer);
+    frameSaveTimer = setTimeout(function () {
+      fetch('./avian/api/birdnet-api.php?action=frame_config', {
+        method: 'POST',
+        credentials: 'same-origin',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(updates),
+      }).catch(function (e) { console.warn('frame config save failed', e); });
+    }, 500);
+  }
+
+  function wireFrameControls(fc) {
+    var pending = {};
+    var refreshBtn = document.getElementById('frameRefreshBtn');
+    if (refreshBtn) {
+      refreshBtn.addEventListener('click', function () {
+        refreshBtn.textContent = 'Refreshing...';
+        refreshBtn.disabled = true;
+        fetch('http://' + (fc.frame_host || 'birdpic.local') + ':8080/refresh', { method: 'POST', mode: 'cors' })
+          .then(function () { refreshBtn.textContent = 'Triggered'; })
+          .catch(function () { refreshBtn.textContent = 'Failed (check LAN)'; })
+          .finally(function () { setTimeout(function () { refreshBtn.textContent = 'Refresh Now'; refreshBtn.disabled = false; }, 3000); });
+      });
+    }
+    adminBody.querySelectorAll('.switch[data-frame-key]').forEach(function (sw) {
+      sw.addEventListener('click', function () {
+        var on = sw.getAttribute('aria-checked') !== 'true';
+        sw.setAttribute('aria-checked', on ? 'true' : 'false');
+        pending[sw.dataset.frameKey] = on;
+        saveFrameConfig(pending);
+      });
+    });
+    adminBody.querySelectorAll('input[type="range"][data-frame-key]').forEach(function (sl) {
+      sl.addEventListener('input', function () {
+        var digits = +(sl.dataset.digits || 0);
+        var valEl = adminBody.querySelector('[data-frame-value="' + sl.dataset.frameKey + '"]');
+        if (valEl) valEl.textContent = (+sl.value).toFixed(digits);
+      });
+      sl.addEventListener('change', function () {
+        var v = +sl.value;
+        pending[sl.dataset.frameKey] = v;
+        saveFrameConfig(pending);
+      });
+    });
+    adminBody.querySelectorAll('.seg[data-frame-key]').forEach(function (seg) {
+      var key = seg.dataset.frameKey;
+      seg.querySelectorAll('button').forEach(function (btn) {
+        btn.addEventListener('click', function () {
+          seg.querySelectorAll('button').forEach(function (b) { b.setAttribute('aria-current', 'false'); });
+          btn.setAttribute('aria-current', 'true');
+          var v = btn.dataset.v;
+          if (v === 'true') v = true;
+          else if (v === 'false') v = false;
+          else if (!isNaN(+v) && v !== '') v = +v;
+          pending[key] = v;
+          saveFrameConfig(pending);
+        });
+      });
+    });
+    adminBody.querySelectorAll('input[type="text"][data-frame-key], input[type="password"][data-frame-key]').forEach(function (inp) {
+      var key = inp.dataset.frameKey;
+      inp.addEventListener('change', function () {
+        pending[key] = inp.value;
+        saveFrameConfig(pending);
+      });
+    });
+  }
+
   function renderAdminSettings() {
     adminBody.innerHTML = '<p style="font:11px ui-monospace,monospace;color:var(--ink-soft);text-align:center">loading settings...</p>';
     fetch('./avian/api/config.php', { credentials: 'same-origin', cache: 'no-store' })
@@ -2389,6 +2621,7 @@
           '<div class="admin-settings">'
           + themeRow()
           + titleRow()
+          + todayStartRow()
           + settingsToggle('preserve', 'Preserve all recordings', "don't auto-delete", preserve)
           + settingsSlider('CONFIDENCE',  'Confidence threshold', 'min score to log a detection', v.CONFIDENCE,  0.1, 0.95, 0.05, 2)
           + settingsSlider('SENSITIVITY', 'Sensitivity',          'analyzer sensitivity',          v.SENSITIVITY, 0.5, 1.5,  0.05, 2)

avian/frontend/index.html

@@ -27,6 +27,7 @@
   <div class="window-pick" id="winPick" role="tablist">
     <i class="seg-pill" aria-hidden="true"></i>
     <button data-h="1"   type="button">1H</button>
+    <button data-h="today" type="button">TODAY</button>
     <button data-h="12"  type="button">12H</button>
     <button data-h="24"  type="button" aria-current="true">24H</button>
     <button data-h="168" type="button">7D</button>

avian/frontend/styles.css

@@ -1622,3 +1622,29 @@
  * See avian/forwarding/. */
 body.av-local #dd-locked { display: none; }
 body.av-local #dd-items  { display: block; }
+
+  .frame-section-label {
+    font: 600 11px/1 var(--sans, ui-sans-serif, system-ui, sans-serif);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    color: var(--ink-soft, #8a8078);
+    padding: 18px 0 6px;
+    border-bottom: 1px solid rgba(26,22,18,0.08);
+    margin-bottom: 2px;
+  }
+  .frame-section-label:first-child { padding-top: 4px; }
+
+
+  .frame-refresh-btn {
+    font: 600 13px/1 var(--sans, ui-sans-serif, system-ui, sans-serif);
+    padding: 10px 24px;
+    border: 1px solid var(--ink-soft, #8a8078);
+    border-radius: 6px;
+    background: transparent;
+    color: var(--ink, #1a1612);
+    cursor: pointer;
+    transition: background 0.15s, opacity 0.15s;
+  }
+  .frame-refresh-btn:hover { background: rgba(26,22,18,0.05); }
+  .frame-refresh-btn:disabled { opacity: 0.5; cursor: default; }
+