Skip to content

Screenshots

Chris Nighswonger edited this page Apr 2, 2026 · 10 revisions

Screenshots

A visual tour of Kanfei's dashboard, features, and integrations. Click any image to view it at full resolution.

Screenshots are organized by area. Each image is captioned with a brief description. To update a screenshot, replace the corresponding file in images/ using the naming convention below and push to the wiki repo.

Naming convention: images/<section>-<description>.png (lowercase, hyphens, PNG preferred)


Dashboard

The main dashboard features SVG gauges on a drag-and-resize 12-column grid with weather-driven background imagery.

Dashboard — dark theme with weather background

Sparkline Trends

Tiles can expand to show sparkline trend charts for recent readings.

Dashboard — sparkline trends

Light Theme

Dashboard — light theme

Classic Instrumental Theme

The brass-and-cream analog aesthetic.

Dashboard — classic theme

Mobile Layout

Responsive layout on phone-width screens with stacked gauge tiles.

Dashboard — mobile Dashboard — mobile sparkline popup


History Charts

Highcharts time-series with selectable sensor, date range, and resolution.

History chart


Forecast

Zambretti barometric algorithm blended with NWS API data.

Forecast page


Astronomy

Sunrise/sunset arc, twilight bands, and moon phase with illumination.

Astronomy page


Nowcast

AI-powered hyper-local weather intelligence (optional add-on).

Screenshot needed: images/nowcast.png


Spray Advisor

Rule-based go/no-go engine with product thresholds and outcome feedback.

Spray Advisor page


Map View

Interactive full-page weather map with nearby station observations, pressure isobars, and NWS alert polygons.

Regional Overview

Station temperature badges, isobar contours, and road overlay across the surrounding region.

Map view — regional overview with stations and isobars

Station Detail

Zoomed-in view showing station popup with current conditions and tighter isobar contours.

Map view — station detail popup with isobars


NWS Alerts

Active alert monitoring for your station location.

Screenshot needed: images/nws-alerts.png


Setup Wizard

First-run wizard for hardware detection, location, preferences, and admin account creation.

Step 1: Station

Select hardware type and configure connection settings.

Setup wizard — station selection

Auto-detect confirms the station is reachable.

Setup wizard — station detected

Step 2: Location

Set station coordinates and elevation via map or manual entry.

Setup wizard — location

Step 3: Preferences

Choose display units and enable optional services.

Setup wizard — preferences

Step 4: Account

Create the admin account for Settings and management access.

Setup wizard — account creation


Settings

Station

Station connection, hardware config, and WeatherLink calibration.

Settings — station

Display

Units, theme, timezone, and weather background settings.

Settings — display

Services

Weather Underground and CWOP/APRS upload integrations.

Settings — services

Bots

Telegram and Discord bot configuration.

Settings — bots

Alerts

Custom alert threshold configuration.

Settings — alerts

Database

Database overview, table stats, and sensor reading compaction.

Settings — database

Backup

Automatic backup scheduling, manual backup, and backup archive management.

Settings — backup

System

Application logs, password management, and service management commands.

Settings — system


About

Project info, software stack, credits, and sponsorship.

About page


Telegram Bot

Commands and notifications as seen in the Telegram client.

Mobile client

Telegram — /current on mobile

Desktop client

Telegram — /current on desktop


Discord Bot

Slash commands and notifications as seen in the Discord client.

Discord — /current command in channel


Login

Session authentication login page.

Login page


Adding Screenshots

  1. Take the screenshot and save as PNG.
  2. Name it following the convention: images/<section>-<description>.png
  3. Place it in the images/ directory in the wiki repo.
  4. For desktop/landscape images, use: <a href="images/name.png" target="_blank"><img src="images/name.png" alt="Description"></a>
  5. For mobile/portrait images, add width="300": <a href="images/name.png" target="_blank"><img src="images/name.png" width="300" alt="Description"></a>
  6. Commit and push.

To replace an existing screenshot, overwrite the file with the same name — all references update automatically.

Clone this wiki locally