scootercam-24

by

ScooterCam 24-Hour Forecast

Version: 1.0.0
WordPress Plugin

Description

Displays a responsive 24-hour weather forecast table with 3-hour increments using data from Visual Crossing Weather API.

Features

  • ✅ 24-hour forecast in tabular format
  • ✅ 3-hour interval weather data
  • ✅ Responsive design with W3.CSS framework
  • ✅ Mobile-optimized (hides non-essential columns on small screens)
  • ✅ Real-time data from Visual Crossing hourly.json

Data Displayed

  • Time – Forecast period
  • Icon – Weather condition icon
  • Conditions – Weather description (hidden on mobile)
  • Temperature – Current temperature in °F
  • Wind – Direction and speed (e.g., “NW @ 12 mph”)
  • Precipitation – Chance of precipitation (%)
  • Visibility – Distance in miles (hidden on mobile)
  • UV Index – UV radiation level (hidden on mobile)

Installation

  1. Upload the scootercam-24 folder to /wp-content/plugins/
  2. Activate the plugin through the WordPress ‘Plugins’ menu
  3. Ensure Visual Crossing hourly data is being updated to /home/scootercam/public_html/wx/hourly.json

Usage

Basic Shortcode

[scootercam-24]

Custom JSON Path

[scootercam-24 json_path="/path/to/your/hourly.json"]

Data Source

This plugin reads from hourly.json which is generated from Visual Crossing Weather API data for the ScooterCam location.

Default JSON Path: /home/scootercam/public_html/wx/hourly.json

Requirements

  • WordPress 5.0+
  • PHP 7.4+
  • Valid Visual Crossing hourly.json file
  • Internet connection for W3.CSS stylesheet

Data Format

The plugin expects hourly.json in this format:

{
  "forecast": [
    {
      "time": "12:00 PM",
      "icon": "partly-cloudy-day",
      "conditions": "Partly Cloudy",
      "temp": 72.5,
      "windSpeed": 12.3,
      "windDir": 225,
      "precipChance": 20,
      "visibility": 10.0,
      "uvindex": 5
    }
  ]
}

Wind Direction Conversion

The plugin automatically converts wind degrees to cardinal directions:

  • 0°/360° = N
  • 45° = NE
  • 90° = E
  • 135° = SE
  • 180° = S
  • 225° = SW
  • 270° = W
  • 315° = NW

Styling

Uses W3.CSS framework for responsive table styling. Custom CSS can be added to override default styles.

CSS Classes:

  • .w3-table – Main table wrapper
  • .w3-striped – Alternating row colors
  • .w3-hide-small – Hidden on mobile devices

License

GPL v2 or later

Author

ScooterCam
https://scootercam.com

Changelog

1.0.0

  • Initial release
  • 24-hour forecast table
  • W3.CSS responsive design
  • Mobile optimization