El Segundo, on your home screen.

• Air and forecast from the National Weather Service LAX station.
• Next tide from NOAA's Santa Monica station, with a curve on the large size.
• Sunset or sunrise, computed on your phone with NOAA's solar formulas.
• Top story: today's edition lead when there is one, otherwise the first South Bay Today headline, labeled fact or reported.
• Rec Park courts: open courts in the next two hours from /pickleball, plus the next City drop-in.
• Stale-safe: if a feed is late it says STALE, and if you're offline it shows the last copy with its age.

1. 1

   Get Scriptable

   Scriptable is a free iPhone app that runs small JavaScript widgets. It's made by an independent developer and isn't affiliated with this site.

   Get Scriptable on the App Store
2. 2

   Copy the script

   Tap copy, open Scriptable, tap +, paste, and name it ES Live.

   Copy the scriptOpen Scriptable

   Show the script (v1.0.0, 658 lines)

   // ES Live: an El Segundo home-screen widget for Scriptable (iOS). // From elsegundo.xyz, an independent local guide. Not an official City of El Segundo page. // Reads public elsegundo.xyz feeds only. No keys, no accounts, no tracking. // Install: https://elsegundo.xyz/widget/ // Sizes: small, medium, large, and lock screen (rectangular, circular, inline). // Widget parameter (optional): "courts" makes the small widget court-focused. // variables used by Scriptable. // icon-color: deep-blue; icon-glyph: water; const ES = { version: '1.0.0', site: 'https://elsegundo.xyz', tapUrl: 'https://elsegundo.xyz/today/', courtsUrl: 'https://elsegundo.xyz/pickleball/', feeds: { conditions: 'https://elsegundo.xyz/api/v1/conditions', today: 'https://elsegundo.xyz/today.json', pickleball: 'https://elsegundo.xyz/pickleball.json', editions: 'https://elsegundo.xyz/dashboard/editions.json', }, tz: 'America/Los_Angeles', lat: 33.9192, lon: -118.4165, refreshMinutes: 30, // A feed older than this is labeled stale (minutes). staleAfter: { today: 360, pickleball: 240, conditions: 120, editions: 1440 }, cacheFile: 'es-live-cache.json', timeoutSeconds: 12, }; // Palette from elsegundo.xyz /v2.css const PAL = { navy: '#07152f', navy2: '#0d2350', blue: '#1028dc', acid: '#caff24', cream: '#f2efe4', red: '#f24b32', green: '#0d6b46', muted: '#8f9bb3', sky: '#7ee0ff', lavender: '#b8a9ff', }; const MIN = 60 * 1000; const HOUR = 60 * MIN; // ---------- time helpers (always Pacific, whatever the phone's zone) ---------- function ptParts(ms) { const f = new Intl.DateTimeFormat('en-US', { timeZone: ES.tz, year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit', hour12: false, weekday: 'short', }); const p = {}; for (const part of f.formatToParts(new Date(ms))) p[part.type] = part.value; const hour = Number(p.hour) % 24; return { date: `${p.year}-${p.month}-${p.day}`, hour, minute: Number(p.minute), dow: p.weekday }; } function fmtTime(ms) { return new Date(ms).toLocaleTimeString('en-US', { timeZone: ES.tz, hour: 'numeric', minute: '2-digit' }); } function fmtHour(h) { const hh = ((h + 11) % 12) + 1; return `${hh} ${h < 12 ? 'AM' : 'PM'}`; } function shortTime(ms) { // "6:08" without AM/PM, for tight lock-screen layouts. return fmtTime(ms).replace(/\s?[AP]M$/, ''); } function ageLabel(ms, now) { const m = Math.max(0, Math.round((now - ms) / MIN)); if (m < 1) return 'just now'; if (m < 60) return `${m}m ago`; const h = Math.round(m / 60); return h < 48 ? `${h}h ago` : `${Math.round(h / 24)}d ago`; } function addDaysIso(date, n) { const d = new Date(`${date}T12:00:00Z`); d.setUTCDate(d.getUTCDate() + n); return d.toISOString().slice(0, 10); } // ---------- sun (NOAA solar position formulas; computed on the phone) ---------- function sunTimes(dateIso, lat = ES.lat, lon = ES.lon) { const rad = Math.PI / 180; const [y, m, d] = dateIso.split('-').map(Number); const dayStart = Date.UTC(y, m - 1, d); const jd = (dayStart + 20 * HOUR) / 86400000 + 2440587.5; // ~local noon in UT const t = (jd - 2451545) / 36525; const L0 = ((280.46646 + t * (36000.76983 + 0.0003032 * t)) % 360 + 360) % 360; const M = 357.52911 + t * (35999.05029 - 0.0001537 * t); const e = 0.016708634 - t * (0.000042037 + 0.0000001267 * t); const C = Math.sin(M * rad) * (1.914602 - t * (0.004817 + 0.000014 * t)) + Math.sin(2 * M * rad) * (0.019993 - 0.000101 * t) + Math.sin(3 * M * rad) * 0.000289; const omega = 125.04 - 1934.136 * t; const lambda = L0 + C - 0.00569 - 0.00478 * Math.sin(omega * rad); const eps0 = 23 + (26 + (21.448 - t * (46.815 + t * (0.00059 - t * 0.001813))) / 60) / 60; const eps = eps0 + 0.00256 * Math.cos(omega * rad); const decl = Math.asin(Math.sin(eps * rad) * Math.sin(lambda * rad)); const yy = Math.tan((eps / 2) * rad) ** 2; const eqTime = 4 / rad * (yy * Math.sin(2 * L0 * rad) - 2 * e * Math.sin(M * rad) + 4 * e * yy * Math.sin(M * rad) * Math.cos(2 * L0 * rad) - 0.5 * yy * yy * Math.sin(4 * L0 * rad) - 1.25 * e * e * Math.sin(2 * M * rad)); const cosHa = Math.cos(90.833 * rad) / (Math.cos(lat * rad) * Math.cos(decl)) - Math.tan(lat * rad) * Math.tan(decl); const ha = Math.acos(Math.min(1, Math.max(-1, cosHa))) / rad; const noon = 720 - 4 * lon - eqTime; return { sunrise: dayStart + (noon - 4 * ha) * MIN, sunset: dayStart + (noon + 4 * ha) * MIN }; } // ---------- model: pure, testable, no Scriptable APIs ---------- function feedAge(feed, key, now) { const stamp = feed && (feed.updatedAt || feed.generatedAt || feed.checked_at || (feed.live && feed.live.as_of)); const ms = stamp ? Date.parse(stamp) : NaN; return Number.isFinite(ms) ? { ms, stale: now - ms > ES.staleAfter[key] * MIN } : { ms: null, stale: true }; } function buildModel(feeds, now) { const pt = ptParts(now); const meta = feeds.meta || {}; const model = { now, pt, stale: [], cached: [], updated: now, version: ES.version }; for (const [key, info] of Object.entries(meta)) { if (info && info.cachedAt) model.cached.push({ key, ago: ageLabel(info.cachedAt, now) }); } // Conditions: temperature, forecast, tide, water, alerts const cond = feeds.conditions; const byId = {}; if (cond && Array.isArray(cond.feeds)) for (const f of cond.feeds) byId[f.id] = f; const wx = byId.weather; const fc = byId.forecast; const period = fc && fc.data && Array.isArray(fc.data.periods) ? fc.data.periods[0] : null; if (wx && wx.data && wx.data.temperature && Number.isFinite(wx.data.temperature.value)) { model.temp = { value: Math.round(wx.data.temperature.value), kind: 'observed', stale: !!wx.stale || wx.status !== 'fresh', at: Date.parse(wx.observedAt) }; } else if (period && period.temperature) { model.temp = { value: Math.round(period.temperature.value), kind: 'forecast', stale: !!(fc && fc.stale) }; } if (model.temp && model.temp.at && now - model.temp.at > ES.staleAfter.conditions * MIN) model.temp.stale = true; if (period) model.forecast = { name: period.name, short: period.shortForecast, temp: period.temperature && Math.round(period.temperature.value) }; const water = byId.waterTemperature; if (water && water.data && water.data.temperature && Number.isFinite(water.data.temperature.value)) { model.water = { value: Math.round(water.data.temperature.value), stale: !!water.stale }; } const tides = byId.tides && byId.tides.data && Array.isArray(byId.tides.data.predictions) ? byId.tides.data.predictions : []; const upcoming = tides.map(p => ({ at: Date.parse(p.at), type: p.type, ft: p.height && p.height.value })) .filter(p => Number.isFinite(p.at) && p.at > now).sort((a, b) => a.at - b.at); if (upcoming.length) model.tide = { ...upcoming[0], next: upcoming.slice(1, 4), stale: !!byId.tides.stale }; const alerts = byId.alerts && byId.alerts.data && Array.isArray(byId.alerts.data.alerts) ? byId.alerts.data.alerts : []; const live = alerts.filter(a => !a.expires || Date.parse(a.expires) > now); if (live.length) model.alert = { event: live[0].event, count: live.length }; if (!cond) model.stale.push('conditions'); // Sun: next sunset (or sunrise when it's already dark) const today = sunTimes(pt.date); const tomorrow = sunTimes(addDaysIso(pt.date, 1)); if (now < today.sunrise) model.sun = { kind: 'sunrise', at: today.sunrise, sunset: today.sunset }; else if (now < today.sunset) model.sun = { kind: 'sunset', at: today.sunset }; else model.sun = { kind: 'sunrise', at: tomorrow.sunrise, sunset: tomorrow.sunset }; // Headline: today's edited edition lead first, then the South Bay Today river. const ed = feeds.edition; if (ed && ed.edition_date === pt.date && Array.isArray(ed.items)) { const lead = ed.items.find(i => i.id === ed.lead) || ed.items[0]; if (lead && lead.headline) { model.headline = { text: lead.headline, source: lead.source_name || 'elsegundo.xyz', label: lead.label || 'fact', url: ed.url || ES.tapUrl, from: 'edition', edition: ed.title }; } } if (!model.headline && feeds.today && Array.isArray(feeds.today.stories)) { const fresh = feeds.today.stories.find(s => s && s.headline && (!s.primary || !s.primary.publishedAt || now - Date.parse(s.primary.publishedAt) < 72 * HOUR)); if (fresh) { model.headline = { text: fresh.headline, source: (fresh.primary && fresh.primary.source) || fresh.via || 'South Bay Today', label: fresh.label || 'reported', url: ES.tapUrl, from: 'today' }; } } if (model.headline && model.headline.from === 'today') { const age = feedAge(feeds.today, 'today', now); model.headline.stale = age.stale; } if (!model.headline) model.stale.push('headline'); // Courts: Rec Park open courts in the next two hours from /pickleball.json const pb = feeds.pickleball; if (pb) { const live = pb.live || {}; const bookUrl = live.book_url || (pb.rec_park && pb.rec_park.book_url) || ES.courtsUrl; const courts = { mode: live.mode || 'off', bookUrl, total: (pb.rec_park && pb.rec_park.courts) || 8, slots: [], openNow: 0 }; if (live.mode === 'live' && Array.isArray(live.days)) { const day = live.days.find(d => d.date === pt.date); const nowMin = pt.hour * 60 + pt.minute; if (day && Array.isArray(day.hours)) { courts.slots = day.hours .filter(h => h.hour * 60 + 60 > nowMin + 15 && h.hour * 60 < nowMin + 120) .slice(0, 3) .map(h => ({ hour: h.hour, label: fmtHour(h.hour), open: Array.isArray(h.open) ? h.open.length : 0, courts: h.open || [] })); } const all = new Set(); for (const s of courts.slots) for (const c of s.courts) all.add(c); courts.openSoon = all.size; courts.openNow = courts.slots.length ? courts.slots[0].open : 0; courts.asOf = live.as_of ? Date.parse(live.as_of) : null; courts.closed = pt.hour >= 22 || pt.hour < 7; } else { courts.notice = 'Live times paused'; } courts.nextDropin = nextDropin(pb.dropins, now); model.courts = courts; } else { model.stale.push('courts'); } return model; } const DOWS = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']; function nextDropin(dropins, now) { if (!Array.isArray(dropins)) return null; const pt = ptParts(now); const nowMin = pt.hour * 60 + pt.minute; const todayIdx = DOWS.indexOf(pt.dow); let best = null; for (const d of dropins) { if (!Array.isArray(d.days) || !d.start) continue; const [sh, sm] = d.start.split(':').map(Number); for (const day of d.days) { const idx = DOWS.indexOf(day); if (idx < 0) continue; let delta = (idx - todayIdx + 7) % 7; if (delta === 0 && sh * 60 + sm <= nowMin) delta = 7; const score = delta * 1440 + sh * 60 + sm; if (!best || score < best.score) { best = { score, name: d.name.replace(/ drop-in.*$/i, ''), day: delta === 0 ? 'Today' : delta === 1 ? 'Tomorrow' : day, time: fmtHour(sh) + (sm ? `:${String(sm).padStart(2, '0')}` : '') }; } } } if (best) delete best.score; return best; } function tideText(t) { if (!t) return null; const ft = Number.isFinite(t.ft) ? `${t.ft < 0 ? '−' : ''}${Math.abs(t.ft).toFixed(1)} ft` : ''; return { title: `${t.type === 'high' ? 'High' : 'Low'} ${fmtTime(t.at)}`, ft, arrow: t.type === 'high' ? '▲' : '▼' }; } // ---------- feeds: fetch, cache, fall back ---------- async function loadFeeds(now) { const fm = FileManager.local(); const path = fm.joinPath(fm.documentsDirectory(), ES.cacheFile); let cache = {}; try { if (fm.fileExists(path)) cache = JSON.parse(fm.readString(path)) || {}; } catch (e) { cache = {}; } const out = { meta: {} }; async function get(key, url) { try { const req = new Request(url); req.timeoutInterval = ES.timeoutSeconds; req.headers = { Accept: 'application/json' }; const data = await req.loadJSON(); if (!data || typeof data !== 'object' || (req.response && req.response.statusCode >= 400)) throw new Error(`bad ${key}`); cache[key] = { data, savedAt: now }; out[key] = data; out.meta[key] = { ok: true }; } catch (e) { if (cache[key]) { out[key] = cache[key].data; out.meta[key] = { ok: false, cachedAt: cache[key].savedAt }; } else out.meta[key] = { ok: false }; } } await Promise.all(Object.entries(ES.feeds).map(([k, u]) => get(k, u))); // Today's edited edition, if there is one (index lists committed editions). const list = out.editions && Array.isArray(out.editions.editions) ? out.editions.editions : []; const pt = ptParts(now); const current = list.filter(e => e.editionDate === pt.date && Date.parse(e.publishedAt) <= now) .sort((a, b) => Date.parse(b.publishedAt) - Date.parse(a.publishedAt))[0]; if (current && current.json) await get('edition', ES.site + current.json); try { fm.writeString(path, JSON.stringify(cache)); } catch (e) { /* cache is best effort */ } return out; } // ---------- rendering ---------- const C = (hex, a = 1) => new Color(hex, a); function txt(stack, s, font, color, opts = {}) { const t = stack.addText(String(s)); t.font = font; t.textColor = color; if (opts.lines) t.lineLimit = opts.lines; if (opts.scale) t.minimumScaleFactor = opts.scale; if (opts.opacity) t.textOpacity = opts.opacity; return t; } function icon(stack, name, size, color) { const sym = SFSymbol.named(name); if (!sym) return null; sym.applyFont(Font.semiboldSystemFont(size)); const img = stack.addImage(sym.image); img.imageSize = new Size(size, size); img.tintColor = color; return img; } function background(w) { const g = new LinearGradient(); g.colors = [C(PAL.navy), C(PAL.navy2)]; g.locations = [0, 1]; g.startPoint = new Point(0, 0); g.endPoint = new Point(1, 1); w.backgroundGradient = g; } function kicker(stack, model, big) { const row = stack.addStack(); row.layoutHorizontally(); row.centerAlignContent(); const dot = row.addStack(); dot.size = new Size(big ? 9 : 7, big ? 9 : 7); dot.cornerRadius = big ? 4.5 : 3.5; dot.backgroundColor = C(PAL.acid); row.addSpacer(5); txt(row, 'ES LIVE', Font.heavySystemFont(big ? 12 : 10), C(PAL.acid)); return row; } // Eight dots, one per Rec Park court; lit when open. function courtDots(open, total, size = 7, gap = 3) { const dc = new DrawContext(); dc.opaque = false; dc.respectScreenScale = true; dc.size = new Size(total * size + (total - 1) * gap, size); const set = new Set(open); for (let i = 0; i < total; i++) { dc.setFillColor(set.has(i + 1) ? C(PAL.acid) : C('#ffffff', 0.16)); dc.fillEllipse(new Rect(i * (size + gap), 0, size, size)); } return dc.getImage(); } // A smooth tide curve through the next predictions. function tideCurve(model, width, height) { const pts = model.tide ? [model.tide, ...model.tide.next] : []; const dc = new DrawContext(); dc.opaque = false; dc.respectScreenScale = true; dc.size = new Size(width, height); if (pts.length < 2) return dc.getImage(); const t0 = model.now, t1 = pts[pts.length - 1].at; const fts = pts.map(p => p.ft); const lo = Math.min(...fts) - 0.5, hi = Math.max(...fts) + 0.5; const x = t => 4 + (t - t0) / (t1 - t0) * (width - 8); const y = f => height - 4 - (f - lo) / (hi - lo) * (height - 8); const path = new Path(); const steps = 40; for (let i = 0; i <= steps; i++) { const t = t0 + (t1 - t0) * i / steps; let k = 0; while (k < pts.length - 2 && pts[k + 1].at < t) k++; const a = t < pts[0].at ? { at: t0, ft: pts[0].ft + (pts[0].type === 'high' ? -1 : 1) * Math.abs(pts[1].ft - pts[0].ft) * 0.5 } : pts[k]; const b = t < pts[0].at ? pts[0] : pts[k + 1]; const u = Math.min(1, Math.max(0, (t - a.at) / (b.at - a.at || 1))); const f = a.ft + (b.ft - a.ft) * (1 - Math.cos(Math.PI * u)) / 2; const p = new Point(x(t), y(f)); if (i === 0) path.move(p); else path.addLine(p); } dc.addPath(path); dc.setStrokeColor(C(PAL.sky)); dc.setLineWidth(2); dc.strokePath(); for (const p of pts) { dc.setFillColor(p.type === 'high' ? C(PAL.sky) : C(PAL.acid)); dc.fillEllipse(new Rect(x(p.at) - 3, y(p.ft) - 3, 6, 6)); } return dc.getImage(); } function staleTag(stack, show) { if (!show) return; stack.addSpacer(4); txt(stack, 'STALE', Font.boldSystemFont(8), C(PAL.red)); } function courtsLine(model) { const c = model.courts; if (!c) return { big: '—', small: 'Courts unavailable' }; if (c.mode !== 'live') return { big: 'rec.us', small: c.nextDropin ? `${c.notice} · Drop-in ${c.nextDropin.day} ${c.nextDropin.time}` : c.notice }; if (c.closed) return { big: 'Closed', small: 'Rec Park courts open 8 AM' }; if (!c.slots.length) return { big: '0', small: 'No slots left today' }; return { big: String(c.openNow), small: `of ${c.total} open at ${c.slots[0].label}` }; } function renderSmall(w, model, mode) { w.setPadding(14, 14, 14, 14); const top = w.addStack(); top.layoutHorizontally(); top.centerAlignContent(); kicker(top, model); top.addSpacer(); if (model.alert) icon(top, 'exclamationmark.triangle.fill', 11, C(PAL.red)); w.addSpacer(6); if (mode === 'courts') { const cl = courtsLine(model); w.url = ES.courtsUrl; txt(w, 'REC PARK COURTS', Font.boldSystemFont(9), C(PAL.muted)); w.addSpacer(2); txt(w, cl.big, Font.heavyRoundedSystemFont(40), C(PAL.cream), { scale: 0.5, lines: 1 }); txt(w, cl.small, Font.mediumSystemFont(11), C(PAL.cream, 0.8), { lines: 2, scale: 0.8 }); w.addSpacer(); if (model.courts && model.courts.slots.length) w.addImage(courtDots(model.courts.slots[0].courts, model.courts.total, 9, 4)); return; } const tempRow = w.addStack(); tempRow.layoutHorizontally(); tempRow.bottomAlignContent(); txt(tempRow, model.temp ? `${model.temp.value}°` : '—', Font.heavyRoundedSystemFont(40), C(PAL.cream), { lines: 1 }); staleTag(tempRow, model.temp && model.temp.stale); if (model.forecast) txt(w, model.forecast.short, Font.mediumSystemFont(11), C(PAL.cream, 0.75), { lines: 1, scale: 0.8 }); w.addSpacer(); const tide = tideText(model.tide); if (tide) row(w, 'water.waves', `${tide.title}`, PAL.sky, 11); row(w, model.sun.kind === 'sunset' ? 'sunset.fill' : 'sunrise.fill', `${model.sun.kind === 'sunset' ? 'Sunset' : 'Sunrise'} ${fmtTime(model.sun.at)}`, '#ffb36b', 11); const cl = courtsLine(model); row(w, 'sportscourt.fill', model.courts && model.courts.mode === 'live' && !model.courts.closed ? `${cl.big} courts open` : cl.small.split(' · ')[0], PAL.acid, 11); } function row(stack, sf, label, color, size, opts = {}) { const r = stack.addStack(); r.layoutHorizontally(); r.centerAlignContent(); icon(r, sf, size, C(color)); r.addSpacer(5); txt(r, label, opts.bold ? Font.boldSystemFont(size) : Font.semiboldSystemFont(size), C(PAL.cream), { lines: 1, scale: 0.75 }); if (opts.stale) staleTag(r, true); return r; } function headlineCard(stack, model, lines, size) { const card = stack.addStack(); card.layoutVertically(); card.setPadding(9, 10, 9, 10); card.cornerRadius = 14; card.backgroundColor = C('#ffffff', 0.07); const h = model.headline; if (h) card.url = h.url; const tag = card.addStack(); tag.layoutHorizontally(); tag.centerAlignContent(); txt(tag, h && h.from === 'edition' ? 'TODAY\u2019S LEAD' : 'TOP STORY', Font.heavySystemFont(8), C(PAL.acid)); tag.addSpacer(5); if (h) txt(tag, h.label.toUpperCase(), Font.boldSystemFont(8), C(h.label === 'fact' ? PAL.sky : PAL.lavender)); staleTag(tag, h && h.stale); tag.addSpacer(); card.addSpacer(3); txt(card, h ? h.text : 'Headlines unavailable. Tap for South Bay Today.', Font.boldSystemFont(size), C(PAL.cream), { lines, scale: 0.85 }); if (h) { card.addSpacer(2); txt(card, h.source, Font.mediumSystemFont(9), C(PAL.muted), { lines: 1 }); } return card; } function renderMedium(w, model) { w.setPadding(14, 14, 14, 14); const body = w.addStack(); body.layoutHorizontally(); const left = body.addStack(); left.layoutVertically(); left.size = new Size(112, 0); kicker(left, model); left.addSpacer(4); const tempRow = left.addStack(); tempRow.layoutHorizontally(); tempRow.bottomAlignContent(); txt(tempRow, model.temp ? `${model.temp.value}°` : '—', Font.heavyRoundedSystemFont(36), C(PAL.cream), { lines: 1 }); staleTag(tempRow, model.temp && model.temp.stale); if (model.forecast) txt(left, model.forecast.short, Font.mediumSystemFont(10), C(PAL.cream, 0.75), { lines: 1, scale: 0.8 }); left.addSpacer(); const tide = tideText(model.tide); if (tide) row(left, 'water.waves', tide.title, PAL.sky, 10); left.addSpacer(3); row(left, model.sun.kind === 'sunset' ? 'sunset.fill' : 'sunrise.fill', `${model.sun.kind === 'sunset' ? 'Sunset' : 'Sunrise'} ${fmtTime(model.sun.at)}`, '#ffb36b', 10); body.addSpacer(10); const right = body.addStack(); right.layoutVertically(); headlineCard(right, model, 3, 12); right.addSpacer(); const cr = right.addStack(); cr.layoutHorizontally(); cr.centerAlignContent(); cr.url = ES.courtsUrl; icon(cr, 'sportscourt.fill', 10, C(PAL.acid)); cr.addSpacer(5); const cl = courtsLine(model); const c = model.courts; if (c && c.mode === 'live' && c.slots.length && !c.closed) { txt(cr, `${c.openNow}/${c.total} at ${c.slots[0].label}`, Font.boldSystemFont(10), C(PAL.cream), { lines: 1 }); cr.addSpacer(6); cr.addImage(courtDots(c.slots[0].courts, c.total, 6, 2.5)); } else { txt(cr, cl.small, Font.semiboldSystemFont(10), C(PAL.cream), { lines: 1, scale: 0.75 }); } } function renderLarge(w, model) { w.setPadding(16, 16, 14, 16); const top = w.addStack(); top.layoutHorizontally(); top.centerAlignContent(); kicker(top, model, true); top.addSpacer(); txt(top, `${model.pt.dow} ${fmtTime(model.now)}`, Font.semiboldSystemFont(10), C(PAL.muted)); w.addSpacer(8); // Conditions tiles const tiles = w.addStack(); tiles.layoutHorizontally(); const tide = tideText(model.tide); const tileData = [ { k: 'AIR', v: model.temp ? `${model.temp.value}°` : '—', s: model.forecast ? model.forecast.short : '', c: PAL.cream, stale: model.temp && model.temp.stale }, { k: tide ? (model.tide.type === 'high' ? 'HIGH TIDE' : 'LOW TIDE') : 'TIDE', v: tide ? fmtTime(model.tide.at).replace(' ', '\u2009') : '—', s: tide ? tide.ft : '', c: PAL.sky, stale: model.tide && model.tide.stale }, { k: model.sun.kind === 'sunset' ? 'SUNSET' : 'SUNRISE', v: fmtTime(model.sun.at).replace(' ', '\u2009'), s: model.water ? `Water ${model.water.value}°` : '', c: '#ffb36b' }, ]; tileData.forEach((d, i) => { if (i) tiles.addSpacer(6); const t = tiles.addStack(); t.layoutVertically(); t.setPadding(8, 9, 8, 9); t.cornerRadius = 13; t.backgroundColor = C('#ffffff', 0.07); t.size = new Size(96, 66); const kr = t.addStack(); kr.layoutHorizontally(); txt(kr, d.k, Font.heavySystemFont(8), C(d.c)); staleTag(kr, d.stale); t.addSpacer(2); txt(t, d.v, Font.heavyRoundedSystemFont(i === 0 ? 24 : 18), C(PAL.cream), { lines: 1, scale: 0.6 }); t.addSpacer(); if (d.s) txt(t, d.s, Font.mediumSystemFont(9), C(PAL.cream, 0.7), { lines: 1, scale: 0.7 }); }); w.addSpacer(6); if (model.tide && model.tide.next.length) { const curve = w.addImage(tideCurve(model, 306, 26)); curve.imageSize = new Size(306, 26); } if (model.alert) { w.addSpacer(4); const a = w.addStack(); a.layoutHorizontally(); a.centerAlignContent(); a.setPadding(5, 9, 5, 9); a.cornerRadius = 9; a.backgroundColor = C(PAL.red, 0.22); icon(a, 'exclamationmark.triangle.fill', 10, C(PAL.red)); a.addSpacer(5); txt(a, `NWS: ${model.alert.event}${model.alert.count > 1 ? ` +${model.alert.count - 1}` : ''}`, Font.boldSystemFont(10), C(PAL.cream), { lines: 1, scale: 0.8 }); a.addSpacer(); } w.addSpacer(6); headlineCard(w, model, 2, 13); w.addSpacer(6); // Courts: next two hours const box = w.addStack(); box.layoutVertically(); box.setPadding(8, 10, 8, 10); box.cornerRadius = 14; box.backgroundColor = C(PAL.acid, 0.1); box.url = ES.courtsUrl; const hr = box.addStack(); hr.layoutHorizontally(); hr.centerAlignContent(); icon(hr, 'sportscourt.fill', 10, C(PAL.acid)); hr.addSpacer(5); txt(hr, 'REC PARK PICKLEBALL', Font.heavySystemFont(8), C(PAL.acid)); hr.addSpacer(); const c = model.courts; if (c && c.asOf) txt(hr, `rec.us · ${ageLabel(c.asOf, model.now)}`, Font.mediumSystemFont(8), C(PAL.muted)); box.addSpacer(4); if (c && c.mode === 'live' && c.slots.length && !c.closed) { for (const s of c.slots.slice(0, 2)) { const r = box.addStack(); r.layoutHorizontally(); r.centerAlignContent(); const lab = r.addStack(); lab.size = new Size(46, 0); txt(lab, s.label, Font.boldSystemFont(10), C(PAL.cream)); lab.addSpacer(); r.addImage(courtDots(s.courts, c.total, 8, 3.5)); r.addSpacer(); txt(r, `${s.open} open`, Font.semiboldSystemFont(10), C(s.open ? PAL.acid : PAL.muted)); box.addSpacer(3); } } else { const cl = courtsLine(model); txt(box, c && c.mode !== 'live' ? 'Live times paused. Tap to book on rec.us.' : cl.small, Font.semiboldSystemFont(10), C(PAL.cream), { lines: 1, scale: 0.8 }); } if (c && c.nextDropin) txt(box, `Next drop-in: ${c.nextDropin.name}, ${c.nextDropin.day} ${c.nextDropin.time}`, Font.mediumSystemFont(9), C(PAL.cream, 0.7), { lines: 1, scale: 0.8 }); w.addSpacer(); const foot = w.addStack(); foot.layoutHorizontally(); txt(foot, 'Independent. Not an official City of El Segundo page.', Font.mediumSystemFont(8), C(PAL.muted), { lines: 1, scale: 0.7 }); foot.addSpacer(); txt(foot, model.cached.length ? `Offline · cached ${model.cached[0].ago}` : 'elsegundo.xyz', Font.boldSystemFont(8), C(model.cached.length ? PAL.red : PAL.cream, 0.8)); } function renderAccessory(w, model, family) { const tide = tideText(model.tide); const sunWord = model.sun.kind === 'sunset' ? 'Sunset' : 'Sunrise'; if (family === 'accessoryInline') { const parts = [model.temp ? `${model.temp.value}°` : null, tide ? `${tide.arrow}${shortTime(model.tide.at)}` : null, `☀︎${shortTime(model.sun.at)}`]; txt(w, parts.filter(Boolean).join(' '), Font.semiboldSystemFont(12), Color.white()); return; } if (family === 'accessoryCircular') { w.addAccessoryWidgetBackground = true; const s = w.addStack(); s.layoutVertically(); s.centerAlignContent(); txt(s, 'ES', Font.heavySystemFont(9), Color.white(), { opacity: 0.8 }).centerAlignText(); txt(s, model.temp ? `${model.temp.value}°` : '—', Font.heavyRoundedSystemFont(20), Color.white()).centerAlignText(); if (tide) txt(s, `${tide.arrow}${shortTime(model.tide.at)}`, Font.semiboldSystemFont(8), Color.white(), { scale: 0.7 }).centerAlignText(); return; } // accessoryRectangular const head = w.addStack(); head.layoutHorizontally(); txt(head, 'ES LIVE', Font.heavySystemFont(10), Color.white()); head.addSpacer(6); txt(head, model.temp ? `${model.temp.value}° ${sunWord} ${shortTime(model.sun.at)}` : `${sunWord} ${shortTime(model.sun.at)}`, Font.semiboldSystemFont(10), Color.white(), { lines: 1, scale: 0.7 }); if (tide) txt(w, `${tide.title} ${tide.ft}`, Font.semiboldSystemFont(12), Color.white(), { lines: 1, scale: 0.7 }); const c = model.courts; const line = c && c.mode === 'live' && c.slots.length && !c.closed ? `Courts ${c.openNow}/${c.total} open ${c.slots[0].label}` : courtsLine(model).small; txt(w, line, Font.semiboldSystemFont(12), Color.white(), { lines: 1, scale: 0.7 }); } function renderWidget(model, family, param) { const w = new ListWidget(); w.url = ES.tapUrl; w.refreshAfterDate = new Date(model.now + ES.refreshMinutes * MIN); if (family && family.startsWith('accessory')) { renderAccessory(w, model, family); return w; } background(w); if (family === 'large' || family === 'extraLarge') renderLarge(w, model); else if (family === 'medium') renderMedium(w, model); else renderSmall(w, model, (param || '').trim().toLowerCase()); return w; } // Expose the pure parts for tests and the install-page previews. globalThis.ESLive = { ES, PAL, ptParts, fmtTime, fmtHour, sunTimes, buildModel, nextDropin, tideText, courtsLine, renderWidget, loadFeeds }; async function main() { const now = Date.now(); const feeds = await loadFeeds(now); const model = buildModel(feeds, now); const inWidget = !!(config.runsInWidget || config.runsInAccessoryWidget); const family = inWidget ? config.widgetFamily : 'medium'; const widget = renderWidget(model, family, args.widgetParameter); if (inWidget) Script.setWidget(widget); else await widget.presentMedium(); Script.complete(); } if (!globalThis.ES_LIVE_NO_MAIN) await main();

   Also at /widget/es-live.js. It only reads /api/v1/conditions, /today.json, /pickleball.json and /dashboard/editions.json.

3. 3

   Add the widget

   Long-press an empty spot on your home screen, tap Edit, then Add Widget. Choose Scriptable, pick small, medium or large, and tap Add Widget. Tap the new widget while it jiggles and set Script to ES Live.

   For a court-focused small widget, type courts in Parameter.

4. 4

   Lock Screen, too

   Long-press the Lock Screen, tap Customize, then Lock Screen, and tap the widget area. Add a Scriptable widget (inline, circular or rectangular), tap it and choose ES Live.

iOS decides exactly when widgets refresh. ES Live asks for about every 30 minutes, and the feeds themselves update between every few minutes (weather) and a few times a day (courts).

Sources. Weather, forecast and advisories come from the National Weather Service. Tides and water temperature come from NOAA station 9410840 (Santa Monica), and tide predictions aren't surf or swimming safety conditions. Sun times are computed on the phone with NOAA's solar calculation for 33.9192, −118.4165; on Oct 25, 2026 it gives sunset at 6:08 PM, matching the U.S. Naval Observatory. Headlines come from today's edition or South Bay Today, labeled fact or reported. Court availability comes from rec.us through /pickleball; "open" means bookable on rec.us when we last checked.

Privacy. The script calls only elsegundo.xyz. It sends no identifiers, needs no account or key, and keeps its cache in Scriptable's folder on your phone. You can read every line above.

Limits. Scriptable widgets can't show live countdowns or Live Activities, and iOS limits how often they refresh. A native El Segundo Live app is being explored.

Corrections. Something wrong in the widget? Send it through Share a local update. Builders: see /developers.

Follow @elsegundotoday on X for local updates. Checked 2026-10-25.