mirror of
https://github.com/screentinker/screentinker.git
synced 2026-06-29 09:23:16 -06:00
0b138f10c6
Self-contained examples for the PiP overlay API (POST /api/pip), each with a CSP-safe query-param overlay (external JS), config.example.json, zero runtime deps, an offline test, and a README: - PIP-Announce-Broadcast manual one-shot message to a screen/group - PIP-Weather-Widget Open-Meteo current conditions (keyless) - PIP-Air-Quality Open-Meteo US AQI widget (keyless) - PIP-Crypto-Ticker CoinGecko price strip (keyless) - PIP-News-Ticker scrolling RSS/Atom headlines - PIP-Room-Status-Calendar ICS-driven Available/Busy room sign - PIP-Event-Countdown client-side countdown, auto-clears at zero - PIP-Welcome-Board rotating welcome/birthday cards from CSV - PIP-Fundraiser-Thermometer goal-progress bar from local/URL JSON - PIP-QR-Rotator rotating QR codes, encoded client-side - PIP-Incident-Webhook event-driven: red on firing, clear on resolved Also includes the CAP-AU (NSW RFS) and US NWS/NOAA emergency-alert monitors that push expiry-aware PiP overlays. Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
39 lines
1.7 KiB
JavaScript
39 lines
1.7 KiB
JavaScript
// External overlay script — same-origin so the server CSP (scriptSrc 'self') permits it.
|
|
// Reads the air-quality fields from the URL query string and populates the widget.
|
|
(function () {
|
|
var q = new URLSearchParams(location.search);
|
|
var get = function (k) { return (q.get(k) || '').trim(); };
|
|
var set = function (id, txt) { var el = document.getElementById(id); if (el) el.textContent = txt; };
|
|
|
|
var color = '#' + (get('color').replace(/[^0-9a-fA-F]/g, '') || '888888');
|
|
|
|
set('loc', get('location') || 'Air Quality');
|
|
set('aqi', get('aqi') !== '' ? get('aqi') : '--');
|
|
set('cat', get('category') || '');
|
|
|
|
// Category color drives the AQI number, the left accent, and a pill badge.
|
|
document.getElementById('aqi').style.color = color;
|
|
document.getElementById('card').style.borderLeftColor = color;
|
|
var badge = document.getElementById('badge');
|
|
if (get('category')) { badge.textContent = get('category'); badge.style.background = color; }
|
|
|
|
var parts = [];
|
|
if (get('pm25') !== '') parts.push('<b>PM2.5</b> ' + esc(get('pm25')));
|
|
if (get('pm10') !== '') parts.push('<b>PM10</b> ' + esc(get('pm10')));
|
|
if (get('ozone') !== '') parts.push('<b>O₃</b> ' + esc(get('ozone')));
|
|
if (get('no2') !== '') parts.push('<b>NO₂</b> ' + esc(get('no2')));
|
|
document.getElementById('grid').innerHTML = parts.join('');
|
|
|
|
var updated = get('updated');
|
|
if (updated) {
|
|
var d = new Date(updated);
|
|
set('updated', isNaN(d) ? ('· ' + updated) : ('· updated ' + d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })));
|
|
}
|
|
|
|
function esc(s) {
|
|
return s.replace(/[&<>"']/g, function (c) {
|
|
return { '&': '&', '<': '<', '>': '>', '"': '"', "'": ''' }[c];
|
|
});
|
|
}
|
|
})();
|