147 lines
9.0 KiB
HTML
147 lines
9.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>On-screen features · SunScope</title>
|
|
<meta name="description" content="The interactive parts of SunScope beyond the table — the sky scope, day-strip weather icons, weather-event banners and popups, and the What's Coming cosmic events almanac." />
|
|
<meta name="robots" content="index, follow" />
|
|
<link rel="canonical" href="https://sunscope.net/features.html" />
|
|
|
|
<meta property="og:title" content="On-screen features · SunScope" />
|
|
<meta property="og:description" content="The sky scope, day-strip weather icons, weather-event banners and popups, and the What's Coming cosmic events almanac." />
|
|
<meta property="og:url" content="https://sunscope.net/features.html" />
|
|
<meta property="og:type" content="article" />
|
|
<meta property="og:image" content="https://sunscope.net/og-image.png" />
|
|
<meta name="twitter:card" content="summary_large_image" />
|
|
<meta name="twitter:title" content="On-screen features · SunScope" />
|
|
<meta name="twitter:description" content="The sky scope, day-strip weather icons, weather-event banners and popups, and the What's Coming cosmic events almanac." />
|
|
<meta name="twitter:image" content="https://sunscope.net/og-image.png" />
|
|
|
|
<link rel="icon" type="image/svg+xml" href="./favicon.svg" />
|
|
<link rel="stylesheet" href="./assets/about.css?v=15a">
|
|
|
|
<script type="application/ld+json">
|
|
{
|
|
"@context": "https://schema.org",
|
|
"@type": "Article",
|
|
"headline": "On-screen features",
|
|
"about": "Interactive features of the SunScope forecast page.",
|
|
"publisher": { "@type": "Organization", "name": "SunScope", "url": "https://sunscope.net" },
|
|
"mainEntityOfPage": "https://sunscope.net/features.html"
|
|
}
|
|
</script>
|
|
</head>
|
|
<body>
|
|
|
|
<header id="site-nav">
|
|
<div class="nav-overlay" onclick="toggleNav(false)"></div>
|
|
<a href="./index.html" class="logo"><span class="logo-sun">Sun</span><svg class="logo-icon" viewBox="0 0 174 173" aria-hidden="true" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;"><g transform="matrix(0.986226,0,0,0.986226,-585.724252,-110.041209)"><clipPath id="ss-clip-fe"><circle cx="681.9838" cy="199.4502" r="83.2987"/></clipPath><g clip-path="url(#ss-clip-fe)"><g transform="matrix(0.948836,0,0,0.948836,19.787839,-2.49381)"><path d="M666.992,233.0768C666.3949,230.6581 666.1785,228.6317 666.1785,226.0296C666.1785,208.6786 680.2653,194.5919 697.6163,194.5919C714.9672,194.5919 729.054,208.6786 729.054,226.0296C729.054,228.4125 728.9892,230.9346 728.4859,233.1663" fill="none" stroke="#c8922a" stroke-width="7.48"/></g><g transform="matrix(0.520349,0,0,0.520349,304.766642,64.226716)"><path d="M724.9315,291.8131C777.359,291.8131 826.5862,305.6245 869.1698,329.8044" fill="none" stroke="currentColor" stroke-width="13.64"/></g><g transform="matrix(0.520349,0,0,0.520349,304.766642,64.226716)"><path d="M580.8436,329.719C623.3927,305.592 672.5657,291.8131 724.9315,291.8131" fill="none" stroke="currentColor" stroke-width="13.64"/></g></g><circle cx="681.9838" cy="199.4502" r="83.2987" fill="none" stroke="currentColor" stroke-width="9.13"/></g></svg><span class="logo-scope">Scope</span></a>
|
|
<div class="nav-links" id="nav-drawer">
|
|
<a href="./index.html">Forecast</a>
|
|
<div class="nav-dropdown">
|
|
<a href="./about.html" class="nav-dropdown-toggle active">About<span class="caret">▾</span></a>
|
|
<div class="nav-dropdown-menu">
|
|
<a href="./about.html">Overview</a>
|
|
<a href="./sunsoak.html">SunSoak & the science</a>
|
|
<a href="./profiles.html">Forecast profiles</a>
|
|
<a href="./columns.html">Column reference</a>
|
|
<a href="./temperatures.html">Derived temperatures</a>
|
|
<a href="./features.html" class="active">On-screen features</a>
|
|
<a href="./stress-bands.html">Stress bands</a>
|
|
</div>
|
|
</div>
|
|
<a href="./faq.html">FAQ</a>
|
|
<a href="https://billing.stripe.com/p/login/9B63cw7vl8k15Ei9DQd7q00" target="_blank" rel="noopener noreferrer">Account</a>
|
|
</div>
|
|
<button class="utci-burger" aria-label="Open menu" aria-expanded="false" id="burger-btn" onclick="toggleNav()">
|
|
<span></span><span></span><span></span>
|
|
</button>
|
|
</header>
|
|
<script>
|
|
function toggleNav(force) {
|
|
const nav = document.getElementById('site-nav');
|
|
const drawer = document.getElementById('nav-drawer');
|
|
const btn = document.getElementById('burger-btn');
|
|
const open = force !== undefined ? force : !nav.classList.contains('nav-open');
|
|
nav.classList.toggle('nav-open', open);
|
|
drawer.classList.toggle('is-open', open);
|
|
btn.setAttribute('aria-expanded', open ? 'true' : 'false');
|
|
}
|
|
</script>
|
|
|
|
<main>
|
|
<h1>On-screen features</h1>
|
|
<p class="tagline">The interactive bits around the forecast table.</p>
|
|
|
|
<h2>The sky scope</h2>
|
|
<p>
|
|
The large circular visualisation at the top of the page shows the sky conditions. The sky colour
|
|
smoothly interpolates through a full set of elevation-keyed gradients — from deep pre-dawn navy
|
|
through golden sunrise, bright midday blue, warm sunset amber, and back to night — with a sun disc
|
|
whose glow radius and intensity scale with the shortwave radiation at that moment. It's a live
|
|
weather simulation, not just a colour wheel: cloud, rain, snow, and haze are all rendered from the
|
|
forecast, so the scope actually looks overcast, wet, or misty when the weather is. By default it
|
|
tracks the real current time and refreshes automatically alongside the forecast.
|
|
</p>
|
|
|
|
<h2>Day-cycle time-lapse</h2>
|
|
<p>
|
|
Press the <strong>Day cycle</strong> play button (▶) on the scope to run a 24-hour time-lapse.
|
|
SunScope drives the scope smoothly through the next 24 hours — roughly 15 simulated minutes per
|
|
real second, so a full day plays out in about a minute and a half — animating the sky gradients,
|
|
the sun's rise and fall, and the evolving weather as cloud rolls in, rain starts, or fog lifts. A
|
|
live clock label shows the simulated time as it plays; press again to stop and snap back to now.
|
|
</p>
|
|
|
|
<h2>The draggable timeline</h2>
|
|
<p>
|
|
Below the scope sits a 24-hour <strong>timeline bar</strong>. Its background is a gradient built
|
|
from the actual per-hour sky colours across the coming day, so the bar itself previews how the sky
|
|
will shift from dawn to dusk. <strong>Sunrise (↑)</strong> and <strong>sunset (↓)</strong> markers
|
|
sit at their real times on the bar, with clock ticks at the quarter points. Grab the thumb and
|
|
scrub to any instant to jump the scope — and the "why it feels like this" breakdown — to that
|
|
moment, with everything interpolated smoothly between the hourly rows rather than snapping.
|
|
</p>
|
|
|
|
<h2>Day strip weather and temperatures</h2>
|
|
<p>
|
|
Each day tab in the date selector shows the day's forecast at a glance: a weather icon representing
|
|
the dominant daytime conditions (sun, cloud variants, or precipitation), plus the day's high and low
|
|
SunSoak felt temperatures in warm and cool colours. The icon uses the actual daytime solar elevation
|
|
and cloud category data, so it reflects the real character of the day rather than a generic symbol.
|
|
</p>
|
|
|
|
<h2>Weather event banners and popups</h2>
|
|
<p>
|
|
When notable conditions are forecast — a frost, strong winds, fog, or a heat event — a banner appears
|
|
above the forecast table with a brief alert. Wind banners classify conditions from Strong Breeze
|
|
through to Violent Storm using standard Beaufort categories. Tapping or clicking the event icon opens
|
|
a detailed popup explaining what the condition means and what to watch out for. Multiple events can
|
|
appear at once.
|
|
</p>
|
|
|
|
<h2>What's Coming — cosmic events almanac</h2>
|
|
<p>
|
|
A 🔭 panel below the forecast table shows upcoming astronomical events for your location over the
|
|
next 90 days: meteor showers, lunar and solar eclipses, planetary conjunctions, and oppositions. Each
|
|
entry shows the event name, peak date, a countdown, a short description, and a visibility note where
|
|
the event is better from a particular hemisphere or location. When a cosmic event is currently active,
|
|
it also appears as a banner above the forecast table alongside the weather alerts.
|
|
</p>
|
|
|
|
<p>
|
|
For how the numbers behind these features are calculated, see
|
|
<a href="./sunsoak.html">SunSoak & the science</a> and the
|
|
<a href="./columns.html">column reference</a>.
|
|
</p>
|
|
|
|
</main>
|
|
|
|
<footer>
|
|
© 2026 <a href="https://fraxle.net" target="_blank" rel="noopener noreferrer">Fraxle.NET</a> · <a href="./index.html">Forecast</a> · <a href="./about.html">About</a> · <a href="./faq.html">FAQ</a> · <a href="https://billing.stripe.com/p/login/9B63cw7vl8k15Ei9DQd7q00" target="_blank" rel="noopener noreferrer">Account</a> · Data: <a href="https://open-meteo.com/" target="_blank" rel="noopener noreferrer">Open-Meteo</a> · UTCI: <a href="https://utci.org/" target="_blank" rel="noopener noreferrer">Bröde 2012</a>
|
|
</footer>
|
|
|
|
</body>
|
|
</html>
|