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

Refactor: Complete codebase reorganization and modernization

Browse Source 
- Split server.js routes into modular files (server/routes/)
  - departures.js: Departure data endpoints
  - sites.js: Site search and nearby sites
  - config.js: Configuration endpoints

- Reorganized file structure following Node.js best practices:
  - Moved sites-config.json to config/sites.json
  - Moved API_RESPONSE_DOCUMENTATION.md to docs/
  - Moved raspberry-pi-setup.sh to scripts/
  - Archived legacy files to archive/ directory

- Updated all code references to new file locations
- Added archive/ to .gitignore to exclude legacy files from repo
- Updated README.md with new structure and organization
- All functionality tested and working correctly

Version: 1.2.0
This commit is contained in:
kyle
2026-01-01 10:51:58 +01:00
parent d15142f1c6
commit 1c44b8ccde
28 changed files with 3196 additions and 3294 deletions
Download Patch File Download Diff File Expand all files Collapse all files

128
README.md
View File

@@ -64,15 +64,35 @@ A modern digital signage system for displaying real-time transit departures and
cd SignageHTML
```
2. **Start the server**
2. **Install dependencies**
```bash
node server.js
npm install
```
3. **Open in browser**
3. **Configure environment variables**
Create a `.env` file in the root directory (or copy from `.env.example` if it exists):
```bash
PORT=3002
OPENWEATHERMAP_API_KEY=your_openweathermap_api_key_here
DEFAULT_LATITUDE=59.3293
DEFAULT_LONGITUDE=18.0686
DEFAULT_LOCATION_NAME=Stockholm
```
Get your OpenWeatherMap API key from [openweathermap.org](https://openweathermap.org/api).
4. **Start the server**
```bash
npm start
# or for development with auto-reload:
npm run dev
```
5. **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.
The server will start on port 3002 by default (or the port specified in `.env`). The application will automatically load and begin fetching transit and weather data.
## Configuration
@@ -95,19 +115,24 @@ The server will start on port 3002 by default. The application will automaticall
2. Enter the Site Name and Site ID
3. Enable/disable the site as needed
### Changing Weather Location
### Environment Variables
Weather location is configured in `weather.js`. Update the default coordinates:
The application uses environment variables for configuration. Create a `.env` file in the root directory:
```javascript
window.weatherManager = new WeatherManager({
latitude: 59.3293, // Stockholm default
longitude: 18.0686,
apiKey: 'your-api-key'
});
```bash
# Server port (default: 3002)
PORT=3002
# OpenWeatherMap API key (required for weather features)
OPENWEATHERMAP_API_KEY=your_api_key_here
# Default location coordinates (Stockholm, Sweden)
DEFAULT_LATITUDE=59.3293
DEFAULT_LONGITUDE=18.0686
DEFAULT_LOCATION_NAME=Stockholm
```
Or use the settings panel to configure it through the UI.
**Note**: The OpenWeatherMap API key is injected into the HTML at runtime by the server. You can also configure the weather location through the settings panel in the UI.
### Screen Orientation
@@ -138,10 +163,10 @@ git clone http://192.168.68.53:3000/kyle/SignageHTML.git
cd SignageHTML
# Make the setup script executable
chmod +x raspberry-pi-setup.sh
chmod +x scripts/raspberry-pi-setup.sh
# Run the setup script as root
sudo ./raspberry-pi-setup.sh
sudo ./scripts/raspberry-pi-setup.sh
# Reboot to apply all changes
sudo reboot
@@ -155,33 +180,44 @@ The system consists of the following components:
1. **Node.js Server** (`server.js`)
- Handles API proxying (SL Transport API, OpenWeatherMap)
- Serves static files
- Serves static files from `public/` directory
- Manages site configuration
- Route handlers organized in `server/routes/`:
- `departures.js` - Transit departure data endpoints
- `sites.js` - Site search and nearby sites
- `config.js` - Configuration management endpoints
2. **Configuration Manager** (`config.js`)
2. **Configuration Manager** (`public/js/components/ConfigManager.js`)
- Manages system settings and UI customization
- Handles site selection and map integration
- Persists settings to localStorage
3. **Weather Component** (`weather.js`)
3. **Weather Component** (`public/js/components/WeatherManager.js`)
- Displays weather data from OpenWeatherMap
- Manages dark mode based on sunrise/sunset
- Shows hourly forecasts
4. **Clock Component** (`clock.js`)
4. **Clock Component** (`public/js/components/Clock.js`)
- Shows current time and date
- Swedish locale formatting
- Updates every second
5. **Departures Component** (`departures.js`)
5. **Departures Component** (`public/js/components/DeparturesManager.js`)
- Fetches and displays transit departure information
- Groups departures by line number
- Handles direction indicators and timing
6. **Main UI** (`index.html`)
6. **Utilities** (`public/js/utils/`)
- `constants.js` - Application constants and configuration
- `logger.js` - Centralized logging utility
7. **Main UI** (`index.html`)
- Responsive layout with multiple orientation support
- CSS Grid-based landscape optimization
- Modern styling with animations
- External CSS in `public/css/`:
- `main.css` - Base styles, dark mode, orientation styles
- `components.css` - Component-specific styles
## API Integration
@@ -196,7 +232,7 @@ Weather data is fetched from OpenWeatherMap:
- 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).
For detailed API response documentation, see [docs/API_RESPONSE_DOCUMENTATION.md](docs/API_RESPONSE_DOCUMENTATION.md).
## UI Settings
@@ -251,10 +287,13 @@ Settings are automatically saved to localStorage and persist across sessions.
- Verify sites are configured in settings
3. **Weather data not loading**
- Check OpenWeatherMap API key in `weather.js`
- Check OpenWeatherMap API key in `.env` file
- Ensure `.env` file exists in the root directory
- Verify the API key is correctly set: `OPENWEATHERMAP_API_KEY=your_key_here`
- Restart the server after changing `.env` file
- Verify internet connection
- Look for errors in browser console (F12)
- Check API key quota/limits
- Check API key quota/limits on openweathermap.org
4. **Map not loading**
- Ensure internet connection is active
@@ -271,15 +310,38 @@ Settings are automatically saved to localStorage and persist across sessions.
### 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
├── index.html # Main HTML file
├── server.js # Node.js server entry point
├── server/
│ └── routes/ # API route handlers
│ ├── departures.js # Departure data endpoints
│ ├── sites.js # Site search endpoints
│ └── config.js # Configuration endpoints
├── public/ # Static assets
│ ├── css/
│ │ ├── main.css # Base styles, dark mode, orientations
│ │ └── components.css # Component-specific styles
│ └── js/
│ ├── main.js # Application initialization
│ ├── components/ # Component classes
│ │ ├── Clock.js
│ │ ├── ConfigManager.js
│ │ ├── DeparturesManager.js
│ │ └── WeatherManager.js
│ └── utils/ # Utility modules
│ ├── constants.js
│ └── logger.js
├── config/
│ └── sites.json # Persistent site configuration
├── docs/
│ └── API_RESPONSE_DOCUMENTATION.md # API response documentation
├── scripts/
│ └── raspberry-pi-setup.sh # Raspberry Pi deployment script
├── package.json # Node.js dependencies
├── .env # Environment variables (create from .env.example)
├── .env.example # Environment variable template
├── archive/ # Archived legacy files (see archive/README.md)
└── README.md # This file
```
### Contributing