kyle/SignageHTML
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Enhance README with comprehensive documentation and screenshot placeholders

Browse Source
This commit is contained in:
kyle
2025-12-31 16:30:53 +01:00
parent 738a422dc9
commit 8ff9b43247
2 changed files with 257 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

312
README.md
View File

@@ -1,30 +1,125 @@
# SL Transport Departures Display # SL Transport Departures Display
A digital signage system for displaying transit departures and weather information. Perfect for Raspberry Pi-based information displays. 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](https://example.com/screenshot.png) ![SL Transport Departures Display](screenshots/main-display.png)
> **Note**: Screenshots should be added to the `screenshots/` directory. The application displays real-time transit departures in a modern, optimized layout.
## Features ## Features
- Real-time transit departure information ### 🚌 Real-Time Transit Information
- Current weather and hourly forecast - **Multi-stop support**: Display departures from up to 4 transit stops simultaneously
- Multiple screen orientation support (0°, 90°, 180°, 270°) - **Smart grouping**: Departures grouped by line number with direction indicators
- Dark mode with automatic switching based on sunrise/sunset - **Visual indicators**:
- Custom background image support - Color-coded countdowns (green for "Now", red for <5 minutes, white for 5+ minutes)
- Responsive design for various screen sizes - 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](screenshots/landscape-layout.png)
> **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 ## Quick Start
1. Clone this repository ### Prerequisites
2. Run the server: `node server.js`
3. Open a browser and navigate to: `http://localhost:3002`
## System Requirements
- Node.js (v12 or higher) - Node.js (v12 or higher)
- Modern web browser with CSS3 support - Modern web browser with CSS3 support
- Internet connection for API access - Internet connection for API access
### Installation
1. **Clone the repository**
```bash
git clone http://192.168.68.53:3000/kyle/SignageHTML.git
cd SignageHTML
```
2. **Start the server**
```bash
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:
```javascript
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 ## Raspberry Pi Setup
For a dedicated display on Raspberry Pi, we've included a setup script that: For a dedicated display on Raspberry Pi, we've included a setup script that:
@@ -35,12 +130,12 @@ For a dedicated display on Raspberry Pi, we've included a setup script that:
4. Disables screen blanking and screensaver 4. Disables screen blanking and screensaver
5. Creates a desktop shortcut for manual launch 5. Creates a desktop shortcut for manual launch
To set up on Raspberry Pi: ### Setup Instructions
```bash ```bash
# Clone the repository # Clone the repository
git clone https://github.com/yourusername/sl-departures-display.git git clone http://192.168.68.53:3000/kyle/SignageHTML.git
cd sl-departures-display cd SignageHTML
# Make the setup script executable # Make the setup script executable
chmod +x raspberry-pi-setup.sh chmod +x raspberry-pi-setup.sh
@@ -52,71 +147,148 @@ sudo ./raspberry-pi-setup.sh
sudo reboot sudo reboot
``` ```
## Configuration After reboot, the display will automatically start in kiosk mode.
### Changing Transit Stop
To display departures for a different transit stop, modify the API_URL in server.js:
```javascript
const API_URL = 'https://transport.integration.sl.se/v1/sites/YOUR_SITE_ID/departures';
```
### Changing Weather Location
To display weather for a different location, modify the latitude and longitude in index.html:
```javascript
window.weatherManager = new WeatherManager({
latitude: YOUR_LATITUDE,
longitude: YOUR_LONGITUDE
});
```
## UI Settings
The gear icon in the top-right corner opens the settings panel where you can configure:
- Screen orientation
- Dark mode (auto/on/off)
- Background image and opacity
- Transit sites
Settings are saved to localStorage and persist across sessions.
## Architecture ## Architecture
The system consists of the following components: The system consists of the following components:
1. **Node.js Server** - Handles API proxying and serves static files 1. **Node.js Server** (`server.js`)
2. **Configuration Manager** - Manages system settings and UI customization - Handles API proxying (SL Transport API, OpenWeatherMap)
3. **Weather Component** - Displays weather data and manages dark mode - Serves static files
4. **Clock Component** - Shows current time and date - Manages site configuration
5. **Departures Component** - Displays transit departure information
6. **Main UI** - Responsive layout with multiple orientation support
## Documentation 2. **Configuration Manager** (`config.js`)
- Manages system settings and UI customization
- Handles site selection and map integration
- Persists settings to localStorage
For detailed documentation, see [documentation.md](documentation.md). 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](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 ## Troubleshooting
### Common Issues: ### Common Issues
1. **Server won't start** 1. **Server won't start**
- Check if port 3002 is already in use - Check if port 3002 is already in use: `netstat -ano | findstr :3002`
- Ensure Node.js is installed correctly - Ensure Node.js is installed correctly: `node --version`
- Check server logs for error messages
2. **No departures displayed** 2. **No departures displayed**
- Verify internet connection - Verify internet connection
- Check server console for API errors - Check server console for API errors
- Ensure the site ID is correct (currently set to 9636) - Ensure site IDs are correct and enabled
- Verify sites are configured in settings
3. **Weather data not loading** 3. **Weather data not loading**
- Check OpenWeatherMap API key - Check OpenWeatherMap API key in `weather.js`
- Verify internet connection - Verify internet connection
- Look for errors in browser console - 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 ## License
@@ -124,5 +296,17 @@ MIT License
## Acknowledgements ## Acknowledgements
- OpenWeatherMap for weather data - **SL Transport API** - Real-time transit departure information
- SL Transport API for 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:
- Repository: http://192.168.68.53:3000/kyle/SignageHTML
- Issues: http://192.168.68.53:3000/kyle/SignageHTML/issues
---
**Built for Stockholm public transport** 🚌🚊

9
screenshots/README.md Normal file
View File

@@ -0,0 +1,9 @@
# Screenshots Directory
Place screenshots of the application here for the README.
Suggested screenshots:
- `main-display.png` - Main landscape layout showing all features
- `landscape-layout.png` - Close-up of the 4-column departure grid
- `settings-panel.png` - Settings modal showing configuration options
- `map-selector.png` - Map interface for selecting transit stops