Optimize landscape layout: 4-column grid, transport icons, improved sizing and spacing
This commit is contained in:
@@ -2,7 +2,7 @@
|
||||
|
||||
## System Overview
|
||||
|
||||
This is a comprehensive digital signage system designed to display transit departures, weather information, and news tickers. The system is built with a modular architecture, making it easy to maintain and extend. It's specifically designed to work well on a Raspberry Pi for dedicated display purposes.
|
||||
This is a comprehensive digital signage system designed to display transit departures and weather information. The system is built with a modular architecture, making it easy to maintain and extend. It's specifically designed to work well on a Raspberry Pi for dedicated display purposes.
|
||||
|
||||
## Architecture
|
||||
|
||||
@@ -12,7 +12,7 @@ The system consists of the following components:
|
||||
2. **Configuration Manager** - Manages system settings and UI customization
|
||||
3. **Weather Component** - Displays weather data and manages dark mode
|
||||
4. **Clock Component** - Shows current time and date
|
||||
5. **Ticker Component** - Displays scrolling news from RSS feeds
|
||||
5. **Departures Component** - Displays transit departure information
|
||||
6. **Main UI** - Responsive layout with multiple orientation support
|
||||
|
||||
## File Structure
|
||||
@@ -22,7 +22,7 @@ The system consists of the following components:
|
||||
- `config.js` - Configuration management module
|
||||
- `weather.js` - Weather display and dark mode management
|
||||
- `clock.js` - Time and date display
|
||||
- `ticker.js` - News ticker component
|
||||
- `departures.js` - Transit departure display component
|
||||
|
||||
## Detailed Component Documentation
|
||||
|
||||
@@ -35,7 +35,6 @@ The server component acts as a proxy for external APIs and serves the static fil
|
||||
- **Port**: Runs on port 3002
|
||||
- **API Proxying**:
|
||||
- `/api/departures` - Proxies requests to SL Transport API
|
||||
- `/api/rss` - Proxies and parses RSS feeds
|
||||
- **Error Handling**: Provides structured error responses
|
||||
- **Static File Serving**: Serves HTML, CSS, JavaScript, and image files
|
||||
- **CORS Support**: Allows cross-origin requests
|
||||
@@ -43,7 +42,6 @@ The server component acts as a proxy for external APIs and serves the static fil
|
||||
#### API Endpoints:
|
||||
|
||||
- `GET /api/departures` - Returns transit departure information
|
||||
- `GET /api/rss` - Returns parsed RSS feed items
|
||||
- `GET /` or `/index.html` - Serves the main application
|
||||
- `GET /*.js|css|png|jpg|jpeg|gif|ico` - Serves static assets
|
||||
|
||||
@@ -60,7 +58,6 @@ The Configuration Manager handles all system settings and provides a UI for chan
|
||||
- **Screen Orientation**: Controls display rotation (0°, 90°, 180°, 270°, landscape)
|
||||
- **Dark Mode**: Automatic (based on sunrise/sunset), always on, or always off
|
||||
- **Background Image**: Custom background with opacity control
|
||||
- **Ticker Speed**: Controls the scrolling speed of the news ticker
|
||||
- **Settings Persistence**: Saves settings to localStorage
|
||||
- **Configuration UI**: Modal-based interface with live previews
|
||||
|
||||
@@ -70,7 +67,6 @@ The Configuration Manager handles all system settings and provides a UI for chan
|
||||
- `darkMode`: Dark mode setting (`auto`, `on`, `off`)
|
||||
- `backgroundImage`: URL or data URL of background image
|
||||
- `backgroundOpacity`: Opacity value between 0 and 1
|
||||
- `tickerSpeed`: Scroll speed in seconds for one complete cycle
|
||||
|
||||
#### Implementation Details:
|
||||
|
||||
@@ -109,21 +105,16 @@ The Clock component displays the current time and date.
|
||||
|
||||
The Clock class creates and updates time and date elements. It uses the browser's Date object with the specified timezone and formats the output using toLocaleTimeString and toLocaleDateString.
|
||||
|
||||
### 5. Ticker Component (ticker.js)
|
||||
### 5. Departures Component (departures.js)
|
||||
|
||||
The Ticker component displays scrolling news or announcements at the bottom of the screen.
|
||||
The Departures component displays transit departure information from the SL Transport API.
|
||||
|
||||
#### Key Features:
|
||||
|
||||
- **RSS Integration**: Fetches and displays items from RSS feeds
|
||||
- **Smooth Animation**: CSS-based scrolling with configurable speed
|
||||
- **Fallback Content**: Provides default items when RSS feed is unavailable
|
||||
- **Themed Display**: Red, white, and blue color scheme
|
||||
- **Orientation Support**: Properly rotates with screen orientation changes
|
||||
|
||||
#### Implementation Details:
|
||||
|
||||
The TickerManager class creates a fixed container at the bottom of the screen and populates it with items from an RSS feed. It uses CSS animations for scrolling and adjusts the animation direction based on screen orientation.
|
||||
- **Real-time Updates**: Fetches departure data periodically
|
||||
- **Multiple Sites**: Supports displaying departures from multiple transit stops
|
||||
- **Grouped Display**: Groups departures by line and direction
|
||||
- **Countdown Timers**: Shows time until departure
|
||||
|
||||
### 6. Main UI (index.html)
|
||||
|
||||
@@ -214,9 +205,6 @@ The HTML file contains the structure and styling for the application. It initial
|
||||
- Verify internet connection
|
||||
- Look for errors in browser console
|
||||
|
||||
4. **Ticker not scrolling**
|
||||
- Check if RSS feed is accessible
|
||||
- Verify ticker speed setting is not set to 0
|
||||
- Look for JavaScript errors in console
|
||||
|
||||
5. **Screen orientation issues**
|
||||
@@ -245,14 +233,6 @@ window.weatherManager = new WeatherManager({
|
||||
});
|
||||
```
|
||||
|
||||
### Changing RSS Feed:
|
||||
|
||||
To display a different news source, modify the RSS_URL in server.js:
|
||||
|
||||
```javascript
|
||||
const RSS_URL = 'https://your-rss-feed-url.xml';
|
||||
```
|
||||
|
||||
### Adding Custom Styles:
|
||||
|
||||
Add custom CSS to the style section in index.html to modify the appearance.
|
||||
@@ -274,7 +254,7 @@ Add custom CSS to the style section in index.html to modify the appearance.
|
||||
| UI Components | | External APIs |
|
||||
| - Clock | | - SL Transport API |
|
||||
| - Weather | | - OpenWeatherMap |
|
||||
| - Ticker | | - RSS Feeds |
|
||||
| - Departures | | |
|
||||
| - Config Manager | | |
|
||||
+---------------------+ +----------------------+
|
||||
```
|
||||
@@ -283,7 +263,7 @@ Add custom CSS to the style section in index.html to modify the appearance.
|
||||
|
||||
1. User loads the application in a browser
|
||||
2. Node.js server serves the HTML, CSS, and JavaScript files
|
||||
3. Browser initializes all components (Clock, Weather, Config, Ticker)
|
||||
3. Browser initializes all components (Clock, Weather, Config, Departures)
|
||||
4. Components make API requests through the Node.js server
|
||||
5. Server proxies requests to external APIs and returns responses
|
||||
6. Components update their UI based on the data
|
||||
|
||||
Reference in New Issue
Block a user