LUMINA Widgets

Bring LUMINA's real-time astronomical data to your website. Free, embeddable, and beautifully designed.

What Are LUMINA Widgets?

Science Data for Everyone

LUMINA Widgets are ready-to-use web components that bring astronomical and environmental data to any website. No coding expertise required — just copy a few lines of HTML and you're done.

Perfect for weather sites, astronomy clubs, educational pages, or anyone interested in the night sky. Each widget is self-contained, beautifully styled, and automatically updates with real-time data.

All widgets are free and open for public use.

Available Widgets

Currently available components

Darkness Clock

A beautiful 24-hour clock showing sunrise, sunset, twilight phases, and astronomical events for any location.

View Details →

Sky Quality Graph

Coming soon — Historical sky brightness data for your location.

Under Development

Satellite Pass Tracker

Coming soon — Track LUMINA satellite passes over your area.

Under Development

Darkness Clock Widget

24-Hour Darkness Clock

A stunning visual representation of day, night, and twilight phases. Shows precise times for sunrise, sunset, civil/nautical/astronomical twilight, moon events, golden/blue hour photography times, and more.

Any Location

Just provide latitude and longitude

Beautifully Styled

Lumina branding with dark theme aesthetics

Zero Dependencies

Pure HTML/CSS, no JavaScript required

Responsive

Adapts to any screen size automatically

How to Add to Your Site

RECOMMENDED

Method 1: Direct Injection

For developers — inject directly into your page. Better SEO, full control, but requires JavaScript.

fetch('https://lumina-project.org/project/widgets/darkness-clock?lat=YOUR_LAT&long=YOUR_LONG&mode=small&civil=true&moon=true&solar=true&fragment=true')
  .then(res => res.text())
  .then(html => {
    document.getElementById('widget')
      .innerHTML = html;
  });

SECONDARY

Method 2: iframe Embed

Safest option — the widget loads in an isolated frame. No CSS conflicts, works on any site.

<iframe 
  src="https://lumina-project.org/project/widgets/darkness-clock?lat=YOUR_LAT&long=YOUR_LONG&mode=small&civil=true&moon=true&solar=true&fragment=true" 
  width="100%" 
  height="400"
  frameborder="0">
</iframe>

Configuration Options

Customize the widget to show exactly what you need. Choose 2-4 toggles for best results — too many options can make the widget feel crowded.

Required Parameters

Parameter	Description	Example
`lat`	Latitude of the location (-90 to 90)	`51.5074`
`long`	Longitude of the location (-180 to 180)	`-0.1278`

Display Modes

mode=list

List Mode

Shows events in detailed list format with times and durations. Best for information-rich displays.

Recommended for most uses

mode=small

Small Mode

Clock dial only, no event list. Compact and visual.

mode=large

Large Mode

Clock dial with simplified event list below.

Event Visibility Toggles

Control which astronomical events appear. Tip: Select 2-4 toggles to keep the widget clean and focused. All toggles default to false, so you only enable what you need.

Toggle	What It Shows	Usage
`civil=true`	Civil twilight periods (morning & evening) and civil dawn/dusk events	Popular
`nautical=true`	Nautical twilight periods and nautical dawn/dusk events	Mariners
`astro=true`	Astronomical twilight and true darkness periods (best for stargazing)	Astronomers
`moon=true`	Moonrise/moonset times, phase, illumination, zodiac sign, distance, visibility	Popular
`photo=true`	Golden Hour and Blue Hour times for photographers	Photographers
`solar=true`	Night duration, solar noon, solar midnight with sun altitude/zenith	Technical

Advanced Parameters

Parameter	Description	Default
`date`	Calculate for specific date (YYYY-MM-DD format)	`today`
`fragment=true`	Return just the widget div (for AJAX injection, not iframe)	`false`
`utc=true`	Render times in UTC (default is local time for the provided location)	`false`
`astroSegments=true`	Render astronomical twilight segments on the clock ring	`false`
`nauticalSegments=true`	Render nautical twilight segments on the clock ring	`false`
`civilSegments=true`	Render civil twilight segments on the clock ring	`false`

Example Configurations

Ready-to-use examples for different use cases

For Weather Sites

Basic sun and moon times

?lat=51.5074&long=-0.1278
&mode=small&moon=true

Shows: Sunrise, sunset, moonrise, moonset, phase

For Astronomy Clubs

Darkness and observation planning

?lat=51.5074&long=-0.1278
&mode=small&astro=true&moon=true

Shows: Astronomical twilight, true darkness, moon data

For Photographers

Golden hour and blue hour times

?lat=51.5074&long=-0.1278
&mode=small&photo=true&civil=true

Shows: Golden/blue hours, civil twilight

For Education

Comprehensive day/night cycle

?lat=51.5074&long=-0.1278
&mode=small&civil=true&moon=true
&solar=true

Shows: All twilight phases, moon, solar data

Best Practices & Tips

Do: Keep It Focused

Select 2-4 toggles that match your audience. A photography site doesn't need nautical twilight, and a marine weather site doesn't need golden hour.

Do: Test Different Locations

Polar regions and equatorial locations behave differently. Test your widget with relevant latitudes.

Don't: Enable Everything

Turning on all toggles (civil + nautical + astro + moon + photo + solar) makes the widget overwhelming and hard to read.

Don't: Hardcode Dates

Unless showing historical data, omit the date parameter so the widget always shows today's times.

Questions or Feedback?

LUMINA Widgets are provided free for public use. If you have questions, feature requests, or just want to share how you're using them, we'd love to hear from you.

Get in Touch Learn About LUMINA