kyle/SignageHTML
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
8ff9b43247e25e52551c1ae105499d98673fafe9
SignageHTML/README.md

9.7 KiB
Raw Blame History

SL Transport Departures Display

A modern digital signage system for displaying real-time transit departures and weather information. Perfect for Raspberry Pi-based information displays, kiosks, and public transport information boards.

SL Transport Departures Display

Note

: Screenshots should be added to the screenshots/ directory. The application displays real-time transit departures in a modern, optimized layout.

Features

🚌 Real-Time Transit Information

  • Multi-stop support: Display departures from up to 4 transit stops simultaneously
  • Smart grouping: Departures grouped by line number with direction indicators
  • Visual indicators:
    • Color-coded countdowns (green for "Now", red for <5 minutes, white for 5+ minutes)
    • Direction arrows showing bus/tram direction
    • Transport mode icons (Bus, Tram, Metro, Train, Ship)
  • Accurate timing: Uses expected time from API to account for delays

🌤️ Weather Display

  • Current weather conditions with icons
  • Hourly forecast (8-hour outlook)
  • Sunrise/sunset times
  • Automatic dark mode based on time of day

⚙️ Flexible Configuration

  • Screen orientations: Support for 0°, 90°, 180°, 270° rotations
  • Landscape optimization: Automatic 4-column grid layout for wide screens
  • Dark mode: Automatic, always on, or always off
  • Custom backgrounds: Upload your own background images with adjustable opacity
  • Map-based site selection: Visual map interface for selecting transit stops (no Swedish required!)

🎨 Modern Design

  • Swedish color scheme (blue/yellow gradient clock banner)
  • Compact ribbon-style clock with time and date on one line
  • Optimized spacing and typography for readability
  • Responsive design that adapts to screen size
  • Smooth animations and visual effects

Screenshots

Main Display (Landscape Layout)

Landscape Layout

Screenshot: The system automatically optimizes for landscape orientation with a 4-column grid layout, maximizing screen real estate while maintaining readability. Add your screenshot to screenshots/landscape-layout.png.

Key Features Highlighted

  • Clock Banner: Compact ribbon-style header with time and date
  • Departure Cards: Color-coded boxes with transport icons, line numbers, and direction arrows
  • Weather Widget: Fixed at bottom with current conditions and hourly forecast

Quick Start

Prerequisites

  • Node.js (v12 or higher)
  • Modern web browser with CSS3 support
  • Internet connection for API access

Installation

  1. Clone the repository

    git clone http://192.168.68.53:3000/kyle/SignageHTML.git
cd SignageHTML

  2. Start the server

    node server.js

  3. Open in browser Navigate to: http://localhost:3002

The server will start on port 3002 by default. The application will automatically load and begin fetching transit and weather data.

Configuration

Adding Transit Stops

Method 1: Search by Name

  1. Click the gear icon (⚙️) in the top-right corner
  2. Go to the "Content" tab
  3. Enter a stop name in the search box (e.g., "Ambassaderna")
  4. Click "Search" and select from results

Method 2: Select from Map

  1. Click "Select from Map" button
  2. Navigate to your location on the map
  3. Click on any transit stop marker
  4. Click "Select This Stop" in the popup

Method 3: Manual Entry

  1. Click "Add Site Manually"
  2. Enter the Site Name and Site ID
  3. Enable/disable the site as needed

Changing Weather Location

Weather location is configured in weather.js. Update the default coordinates:

window.weatherManager = new WeatherManager({
    latitude: 59.3293,  // Stockholm default
    longitude: 18.0686,
    apiKey: 'your-api-key'
});

Or use the settings panel to configure it through the UI.

Screen Orientation

The system supports multiple orientations:

  • Normal (0°): Standard portrait/landscape
  • Vertical (90°): Rotated 90° clockwise
  • Upside Down (180°): Rotated 180°
  • Vertical Reverse (270°): Rotated 270°
  • Landscape (2-column): Optimized landscape layout

Select your orientation from the settings panel (⚙️ → Display → Screen Orientation).

Raspberry Pi Setup

For a dedicated display on Raspberry Pi, we've included a setup script that:

  1. Installs Node.js if needed
  2. Creates a systemd service to run the server on boot
  3. Sets up Chromium to launch in kiosk mode on startup
  4. Disables screen blanking and screensaver
  5. Creates a desktop shortcut for manual launch

Setup Instructions

# Clone the repository
git clone http://192.168.68.53:3000/kyle/SignageHTML.git
cd SignageHTML

# Make the setup script executable
chmod +x raspberry-pi-setup.sh

# Run the setup script as root
sudo ./raspberry-pi-setup.sh

# Reboot to apply all changes
sudo reboot

After reboot, the display will automatically start in kiosk mode.

Architecture

The system consists of the following components:

  1. Node.js Server (server.js)

    • Handles API proxying (SL Transport API, OpenWeatherMap)
    • Serves static files
    • Manages site configuration

  2. Configuration Manager (config.js)

    • Manages system settings and UI customization
    • Handles site selection and map integration
    • Persists settings to localStorage

  3. Weather Component (weather.js)

    • Displays weather data from OpenWeatherMap
    • Manages dark mode based on sunrise/sunset
    • Shows hourly forecasts

  4. Clock Component (clock.js)

    • Shows current time and date
    • Swedish locale formatting
    • Updates every second

  5. Departures Component (departures.js)

    • Fetches and displays transit departure information
    • Groups departures by line number
    • Handles direction indicators and timing

  6. Main UI (index.html)

    • Responsive layout with multiple orientation support
    • CSS Grid-based landscape optimization
    • Modern styling with animations

API Integration

SL Transport API

The system uses the SL Transport API to fetch real-time departure information:

  • Endpoint: https://transport.integration.sl.se/v1/sites/{siteId}/departures
  • Returns: Real-time departure data with expected times, directions, and line information

OpenWeatherMap API

Weather data is fetched from OpenWeatherMap:

  • Requires API key (configured in weather.js)
  • Provides current conditions and hourly forecasts
  • Used for dark mode timing calculations

For detailed API response documentation, see API_RESPONSE_DOCUMENTATION.md.

UI Settings

The gear icon (⚙️) in the top-right corner opens the settings panel with tabs for:

Display

  • Screen orientation selection
  • Dark mode settings (Automatic/Sunset-Sunrise, Always On, Always Off)

Appearance

  • Background image URL or local file upload
  • Background opacity slider

Content

  • Transit site management
    • Search for stops by name
    • Select from interactive map
    • Add manually
    • Enable/disable sites
  • Option to combine departures going in the same direction

Options

  • Additional system preferences

Settings are automatically saved to localStorage and persist across sessions.

Recent Updates

Version 1.1.0 - Landscape Optimization

  • ✅ Optimized 4-column grid layout for landscape screens
  • ✅ Replaced text labels with transport mode icons
  • ✅ Reduced box sizes for better space efficiency
  • ✅ Increased font sizes after space optimization
  • ✅ Changed default box color to blue with white line numbers
  • ✅ Fixed TRAM display to correctly show from API
  • ✅ Improved time display formatting and prevented cutoff
  • ✅ Compact ribbon-style clock banner

Troubleshooting

Common Issues

  1. Server won't start

    • Check if port 3002 is already in use: netstat -ano | findstr :3002
    • Ensure Node.js is installed correctly: node --version
    • Check server logs for error messages

  2. No departures displayed

    • Verify internet connection
    • Check server console for API errors
    • Ensure site IDs are correct and enabled
    • Verify sites are configured in settings

  3. Weather data not loading

    • Check OpenWeatherMap API key in weather.js
    • Verify internet connection
    • Look for errors in browser console (F12)
    • Check API key quota/limits

  4. Map not loading

    • Ensure internet connection is active
    • Check browser console for Leaflet.js errors
    • Verify OpenStreetMap tile access

  5. Layout issues

    • Clear browser cache and refresh (Ctrl+F5)
    • Check browser console for CSS errors
    • Verify screen orientation setting matches physical setup

Development

Project Structure

SignageHTML/
├── index.html          # Main HTML file with UI and styles
├── server.js           # Node.js server for API proxying
├── config.js           # Configuration management
├── clock.js            # Clock component
├── weather.js          # Weather component
├── departures.js       # Departures component
├── sites-config.json   # Persistent site configuration
├── package.json        # Node.js dependencies
└── README.md           # This file

Contributing

  1. Fork the repository
  2. Create a feature branch
  3. Make your changes
  4. Test thoroughly
  5. Submit a pull request

License

MIT License

Acknowledgements

  • SL Transport API - Real-time transit departure information
  • OpenWeatherMap - Weather data and forecasts
  • OpenStreetMap - Map tiles for site selection
  • Leaflet.js - Interactive map functionality

Support

For issues, questions, or contributions, please use the Gitea repository:

Built for Stockholm public transport 🚌🚊

Reference in New Issue View Git Blame Copy Permalink