Okay, that's a comprehensive list outlining a very sophisticated Forest Monitoring System. Building all of that at once is a significant undertaking. Let's enhance the existing structure to incorporate the core monitoring features and lay the groundwork for the other modules. We will update the dashboard to include more sensor types, refine the map section, and add more alert examples. Forest Monitoring System

Welcome to the Forest Monitoring System

Your real-time solution for forest health and safety.

Forest Monitoring Dashboard

Core Monitoring

Interactive Forest Map

Show Sensors Show Fire Risk Heatmap

Real-time Sensor Dashboards

Temperature (°C)

Humidity (%)

Smoke Level (Index)

Air Quality (CO2 ppm)

Rainfall (mm/hr)

Soil Moisture (%)

Real-time Alerts

Loading alerts...

Ecological Insights

NDVI Maps, Canopy Cover, Biodiversity Tracking, Carbon Sequestration estimates will be displayed here.

NDVI Map (Placeholder)

Camera Trap Gallery (Placeholder)

Images from camera traps will appear here.

Threat Prevention

Fire Risk Prediction, Anti-Poaching alerts (Gunshots, Vehicles), Ranger Patrol info will be displayed here.

Fire Risk Prediction (Placeholder)

High risk areas: Sector 7G, Ridge Area B

Historical Data & Trends

Time-Series Analysis, Event Archives will be accessible here.

Forest Cover Change (Placeholder)

Community & Management

Ranger Tools, Public Portal links/info will be here.

Ranger Patrol Routes (Placeholder)

Route Alpha, Route Beta scheduled.

Administrative Features

User Management, System Health, API Docs links will be here.

User Management (Placeholder)

/* General styles for dashboard and potentially other pages */ :root { --primary-color: #388e3c; /* Darker Green */ --secondary-color: #4caf50; /* Medium Green */ --light-bg: #f4f6f8; --text-color: #333; --card-bg: #fff; --border-color: #eee; --sidebar-width: 220px; --header-height: 60px; } body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; margin: 0; background-color: var(--light-bg); color: var(--text-color); line-height: 1.6; display: flex; /* Use flexbox for layout */ } header { background-color: var(--primary-color); color: white; padding: 0 20px; display: flex; justify-content: space-between; align-items: center; position: fixed; /* Fix header */ top: 0; left: var(--sidebar-width); /* Start after sidebar */ right: 0; height: var(--header-height); z-index: 1000; box-shadow: 0 2px 4px rgba(0,0,0,0.1); } header img.logo { height: 40px; } header h1 { margin: 0; font-size: 1.5em; font-weight: 400; } header button { background-color: #f44336; color: white; border: none; padding: 8px 15px; border-radius: 4px; cursor: pointer; font-size: 0.9em; transition: background-color 0.3s ease; } header button:hover { background-color: #d32f2f; } #username-display { font-size: 0.9em; opacity: 0.9; } .sidebar { width: var(--sidebar-width); background-color: #2e353d; /* Dark sidebar */ color: #e1e9f0; padding: 20px; height: 100vh; /* Full height */ position: fixed; /* Fixed sidebar */ top: 0; left: 0; overflow-y: auto; box-sizing: border-box; } .sidebar h3 { color: #fff; border-bottom: 1px solid #4f5b69; padding-bottom: 10px; margin-top: 0; } .sidebar ul { list-style: none; padding: 0; margin: 0; } .sidebar li a { display: block; color: #c8d6e5; text-decoration: none; padding: 10px 0; transition: background-color 0.2s ease, color 0.2s ease; border-radius: 4px; padding-left: 10px; } .sidebar li a:hover { background-color: #4f5b69; color: #fff; } .content { margin-left: var(--sidebar-width); /* Offset by sidebar width */ padding: 20px; padding-top: calc(var(--header-height) + 20px); /* Offset by header height */ width: calc(100% - var(--sidebar-width)); /* Take remaining width */ box-sizing: border-box; } main section { margin-bottom: 40px; padding-top: 10px; /* Space for anchor links */ } h1, h2, h3, h4, h5, h6 { color: var(--primary-color); } section > h2 { border-bottom: 2px solid var(--secondary-color); padding-bottom: 10px; margin-bottom: 20px; } a { color: #1976d2; /* Blue */ text-decoration: none; } a:hover { text-decoration: underline; } button { cursor: pointer; padding: 10px 15px; border: none; border-radius: 4px; background-color: var(--secondary-color); color: white; font-size: 1em; transition: background-color 0.3s ease; } button:hover { background-color: var(--primary-color); } /* Dashboard Grid */ .dashboard-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 20px; } .card { background-color: var(--card-bg); padding: 20px; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); overflow: hidden; /* Prevent content overflow */ } .card.full-width { grid-column: 1 / -1; /* Span full width */ } .card h3 { margin-top: 0; color: var(--primary-color); border-bottom: 1px solid var(--border-color); padding-bottom: 10px; margin-bottom: 15px; font-size: 1.2em; } /* Map Specific */ #map { height: 450px; width: 100%; margin-bottom: 10px; border-radius: 4px; border: 1px solid var(--border-color); } .map-controls { margin-bottom: 15px; font-size: 0.9em; } .map-controls label { margin-right: 15px; cursor: pointer; } /* Sensor Grid */ .sensor-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; } .sensor-grid div { text-align: center; } .sensor-grid h4 { margin-bottom: 10px; font-size: 1em; color: #555; } canvas { max-width: 100%; height: auto; } /* Alerts List */ #alerts-list ul { list-style: none; padding: 0; margin: 0; max-height: 400px; /* Adjust height as needed */ overflow-y: auto; } #alerts-list li { padding: 10px 5px; border-bottom: 1px dashed var(--border-color); font-size: 0.9em; color: #555; display: flex; justify-content: space-between; align-items: center; } #alerts-list li:last-child { border-bottom: none; } .alert-timestamp { font-size: 0.8em; color: #888; margin-left: 10px; white-space: nowrap; } .alert-high { color: #d32f2f; font-weight: bold; } .alert-medium { color: #ffa000; } .alert-low { color: #388e3c; } .alert-info { color: #1976d2; } /* Placeholder Sections */ .placeholder-section { background-color: #f9f9f9; border: 1px dashed #ccc; padding: 20px; border-radius: 8px; color: #777; } .placeholder-section h2 { color: #999; border-bottom-color: #ddd; } .placeholder-section .card { background-color: #fff; border: 1px solid #eee; } .placeholder-section img { opacity: 0.6; border: 1px solid #eee; border-radius: 4px; } /* Responsive adjustments */ @media (max-width: 768px) { body { flex-direction: column; /* Stack header, sidebar, content */ } .sidebar { width: 100%; height: auto; position: static; /* Remove fixed positioning */ box-shadow: 0 2px 4px rgba(0,0,0,0.1); } header { position: static; /* Remove fixed positioning */ left: 0; width: 100%; box-sizing: border-box; } .content { margin-left: 0; width: 100%; padding-top: 20px; /* Reset padding */ } .dashboard-grid { grid-template-columns: 1fr; /* Stack cards */ } .sensor-grid { grid-template-columns: 1fr; /* Stack sensor charts */ } #map { height: 300px; /* Adjust map height */ } } /* Styles specific to the login page */ body.auth-page { /* Add class to body in login.html if needed */ margin: 0; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background-image: url('../assets/images/forest-bg.jpg'); /* Ensure this path is correct */ background-size: cover; background-position: center; display: flex; justify-content: center; align-items: center; min-height: 100vh; color: #fff; /* Default text color for contrast */ } .login-container { background-color: rgba(0, 0, 0, 0.75); /* Darker overlay */ padding: 40px 50px; border-radius: 8px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); text-align: center; max-width: 400px; width: 90%; } .login-container .logo { max-width: 120px; margin-bottom: 20px; } .login-container h2 { margin-bottom: 30px; color: #ffffff; font-weight: 300; font-size: 1.8em; } .input-group { margin-bottom: 20px; text-align: left; } .input-group label { display: block; margin-bottom: 8px; color: #ccc; font-size: 0.9em; font-weight: 500; } .input-group input { width: 100%; padding: 12px; border: 1px solid #555; background-color: rgba(255, 255, 255, 0.1); border-radius: 4px; box-sizing: border-box; color: #fff; font-size: 1em; } .input-group input:focus { outline: none; border-color: #4caf50; /* Green focus */ background-color: rgba(255, 255, 255, 0.2); } button[type="submit"] { width: 100%; padding: 12px; background-color: #4caf50; /* Green */ color: white; border: none; border-radius: 4px; font-size: 1.1em; cursor: pointer; transition: background-color 0.3s ease; margin-top: 10px; /* Add some space above button */ } button[type="submit"]:hover { background-color: #388e3c; /* Darker Green */ } .error-message { color: #ff8a80; /* Lighter Red for dark background */ margin-top: 15px; font-size: 0.9em; min-height: 1.2em; /* Reserve space */ font-weight: 500; } const loginForm = document.getElementById('login-form'); const errorMessage = document.getElementById('error-message'); const logoutButton = document.getElementById('logout-button'); const usernameDisplay = document.getElementById('username-display'); // --- Mock Users --- const mockUsers = { 'ranger1': 'password123', 'admin': 'adminpass', 'researcher': 'sciencerocks' }; // --- Login Logic --- if (loginForm) { loginForm.addEventListener('submit', (event) => { event.preventDefault(); // Prevent actual form submission const username = loginForm.username.value; const password = loginForm.password.value; if (mockUsers[username] && mockUsers[username] === password) { // Successful login localStorage.setItem('isLoggedIn', 'true'); localStorage.setItem('username', username); // Store username errorMessage.textContent = ''; window.location.href = 'dashboard.html'; // Redirect to dashboard } else { // Failed login localStorage.removeItem('isLoggedIn'); localStorage.removeItem('username'); errorMessage.textContent = 'Invalid username or password.'; } }); } // --- Logout Logic --- if (logoutButton) { logoutButton.addEventListener('click', () => { localStorage.removeItem('isLoggedIn'); localStorage.removeItem('username'); window.location.href = 'login.html'; // Redirect to login page }); } // --- Check Login Status on Page Load --- function checkLoginStatus() { const isLoggedIn = localStorage.getItem('isLoggedIn') === 'true'; const currentPage = window.location.pathname.split('/').pop(); if (isLoggedIn) { const username = localStorage.getItem('username'); if (usernameDisplay) { usernameDisplay.textContent = `Logged in as: ${username}`; } if (currentPage === 'login.html' || currentPage === 'index.html' || currentPage === '') { // If logged in, redirect away from login/index to dashboard window.location.href = 'dashboard.html'; } } else { // If not logged in, redirect non-login/index pages to login if (currentPage !== 'login.html' && currentPage !== 'index.html' && currentPage !== '') { window.location.href = 'login.html'; } } } // Run check on appropriate pages (dashboard, potentially others later) if (window.location.pathname.includes('dashboard.html')) { checkLoginStatus(); } // Add class to body for login page specific styles if (window.location.pathname.includes('login.html')) { document.body.classList.add('auth-page'); } // Mock Sensor Data Generation and Charting const CHART_COLORS = { red: 'rgb(255, 99, 132)', orange: 'rgb(255, 159, 64)', yellow: 'rgb(255, 205, 86)', green: 'rgb(75, 192, 192)', blue: 'rgb(54, 162, 235)', purple: 'rgb(153, 102, 255)', grey: 'rgb(201, 203, 207)' }; const sensorCharts = {}; // Store chart instances // Function to generate mock time-series data function generateMockData(baseValue, variation, count = 10) { const data = []; const labels = []; let currentTime = new Date(); for (let i = 0; i < count; i++) { const value = baseValue + (Math.random() - 0.5) * variation; data.unshift(Math.max(0, value)); // Ensure non-negative values where applicable labels.unshift(new Date(currentTime.getTime() - i * 5 * 60 * 1000)); // Data points every 5 minutes } return { labels, data }; } // Function to create or update a chart function createOrUpdateChart(canvasId, label, data, labels, color, yLabel) { const ctx = document.getElementById(canvasId)?.getContext('2d'); if (!ctx) { console.error(`Canvas element with id ${canvasId} not found.`); return; } if (sensorCharts[canvasId]) { // Update existing chart sensorCharts[canvasId].data.labels = labels; sensorCharts[canvasId].data.datasets[0].data = data; sensorCharts[canvasId].update(); } else { // Create new chart sensorCharts[canvasId] = new Chart(ctx, { type: 'line', data: { labels: labels, datasets: [{ label: label, data: data, borderColor: color, backgroundColor: color + '33', // Semi-transparent fill fill: true, tension: 0.1 // Slight curve }] }, options: { responsive: true, maintainAspectRatio: false, scales: { x: { type: 'time', time: { unit: 'minute', tooltipFormat: 'PPpp', // Nicer tooltip format displayFormats: { minute: 'HH:mm' // Display format on the axis } }, title: { display: true, text: 'Time' } }, y: { beginAtZero: true, title: { display: true, text: yLabel } } }, plugins: { legend: { display: false // Hide legend if label is clear } } } }); } } // Initialize and update charts function updateSensorCharts() { // Temperature const tempData = generateMockData(25, 5); // Base 25°C, variation 5°C createOrUpdateChart('temperature-chart', 'Temperature', tempData.data, tempData.labels, CHART_COLORS.orange, '°C'); // Humidity const humidityData = generateMockData(60, 15); // Base 60%, variation 15% createOrUpdateChart('humidity-chart', 'Humidity', humidityData.data, humidityData.labels, CHART_COLORS.blue, '%'); // Smoke Level const smokeData = generateMockData(5, 4); // Base 5 index, variation 4 createOrUpdateChart('smoke-chart', 'Smoke Level', smokeData.data, smokeData.labels, CHART_COLORS.grey, 'Index'); // Air Quality (CO2) const co2Data = generateMockData(450, 50); // Base 450 ppm, variation 50 ppm createOrUpdateChart('co2-chart', 'CO2 Levels', co2Data.data, co2Data.labels, CHART_COLORS.purple, 'ppm'); // Rainfall const rainfallData = generateMockData(1, 2); // Base 1 mm/hr, variation 2 mm/hr (can be 0) createOrUpdateChart('rainfall-chart', 'Rainfall', rainfallData.data, rainfallData.labels, CHART_COLORS.green, 'mm/hr'); // Soil Moisture const soilData = generateMockData(40, 10); // Base 40%, variation 10% createOrUpdateChart('soil-moisture-chart', 'Soil Moisture', soilData.data, soilData.labels, CHART_COLORS.yellow, '%'); // console.log("Sensor charts updated at", new Date().toLocaleTimeString()); } // Initial chart creation and periodic updates function initSensorMonitoring() { if (document.getElementById('temperature-chart')) { // Check if charts are on the page updateSensorCharts(); // Initial update setInterval(updateSensorCharts, 30 * 1000); // Update every 30 seconds } } // Export functions if needed, or call init directly in main.js // export { initSensorMonitoring }; // Using modules would require type="module" in script tag // Interactive Map Logic using Leaflet.js let map; let sensorMarkersLayer; let heatmapLayer; let sensorData = []; // Store sensor locations and basic status // --- Mock Sensor Locations --- const mockSensorLocations = [ { id: 'S001', lat: 40.7128, lon: -74.0060, temp: 26, humidity: 55, status: 'ok', type: 'Weather' }, { id: 'S002', lat: 40.7580, lon: -73.9855, temp: 28, humidity: 50, status: 'warning', type: 'Air Quality' }, { id: 'S003', lat: 40.6892, lon: -74.0445, temp: 24, humidity: 65, status: 'ok', type: 'Soil' }, { id: 'S004', lat: 40.7484, lon: -73.9857, temp: 30, humidity: 45, status: 'critical', type: 'Fire Detection' }, { id: 'S005', lat: 40.7061, lon: -73.9969, temp: 25, humidity: 60, status: 'ok', type: 'Weather' }, // Add more sensors across a wider area for a realistic forest map { id: 'F010', lat: 45.5231, lon: -122.6765, temp: 18, humidity: 75, status: 'ok', type: 'Weather' }, // Portland, OR area { id: 'F011', lat: 45.5500, lon: -122.7000, temp: 19, humidity: 70, status: 'warning', type: 'Air Quality' }, { id: 'F012', lat: 45.5000, lon: -122.6500, temp: 17, humidity: 80, status: 'ok', type: 'Soil' }, { id: 'F013', lat: 45.4800, lon: -122.7200, temp: 22, humidity: 65, status: 'critical', type: 'Fire Detection' }, // Higher temp, lower humidity -> critical ]; // --- Initialize Map --- function initMap() { const mapElement = document.getElementById('map'); if (!mapElement || typeof L === 'undefined') { console.error("Map element not found or Leaflet library not loaded."); return; } // Use a forest-like area if possible, otherwise default to a known location const initialCenter = [45.52, -122.67]; // Centered around Portland, OR for forest example const initialZoom = 11; map = L.map('map').setView(initialCenter, initialZoom); // Add a base tile layer (OpenStreetMap) L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '© OpenStreetMap contributors' }).addTo(map); // Layer for sensor markers sensorMarkersLayer = L.layerGroup().addTo(map); // Layer for heatmap (initially hidden) // Heatmap data points: [lat, lng, intensity] // Intensity could represent fire risk (e.g., based on temp, humidity, smoke) const heatData = mockSensorLocations .filter(s => s.status !== 'ok') // Only use sensors with issues for risk heatmap .map(s => { let intensity = 0.5; // Base intensity for warning if (s.status === 'critical') intensity = 1.0; // Higher intensity for critical // Could add more factors: intensity = calculateFireRisk(s.temp, s.humidity, s.smokeLevel); return [s.lat, s.lon, intensity]; }); heatmapLayer = L.heatLayer(heatData, { radius: 25, blur: 15, maxZoom: 14, gradient: { 0.4: 'blue', 0.65: 'lime', 1: 'red' } // Adjust gradient colors }); // Don't add to map initially // Update sensor data and markers periodically updateSensorLocations(); // Initial load setInterval(updateSensorLocations, 60 * 1000); // Update every minute // Add map controls event listeners setupMapControls(); } // --- Update Sensor Markers --- function updateSensorLocations() { // In a real system, fetch this data from an API sensorData = mockSensorLocations.map(s => { // Simulate slight changes in status or readings for demo if (Math.random() < 0.1) { // 10% chance to change status const statuses = ['ok', 'warning', 'critical']; s.status = statuses[Math.floor(Math.random() * statuses.length)]; } s.temp += (Math.random() - 0.5) * 2; // Simulate temp fluctuation return s; }); // Clear existing markers sensorMarkersLayer.clearLayers(); // Add new markers sensorData.forEach(sensor => { const marker = L.marker([sensor.lat, sensor.lon], { icon: createSensorIcon(sensor.status) }); marker.bindPopup(` Sensor ID: ${sensor.id}
Type: ${sensor.type}
Status: ${sensor.status}
Temp: ${sensor.temp.toFixed(1)}°C
Humidity: ${sensor.humidity}% `); sensorMarkersLayer.addLayer(marker); }); // Update heatmap data if it's visible if (map.hasLayer(heatmapLayer)) { updateHeatmap(); } // console.log("Map markers updated at", new Date().toLocaleTimeString()); } // --- Create Custom Icons --- function createSensorIcon(status) { let iconUrl; let iconSize = [25, 41]; let iconAnchor = [12, 41]; let popupAnchor = [1, -34]; // Using simple colored markers for status (requires CSS or images) // For simplicity, we'll use default markers and maybe add CSS later // Or use Leaflet Awesome Markers if available let color; switch (status) { case 'critical': color = 'red'; break; case 'warning': color = 'orange'; break; case 'ok': default: color = 'green'; break; } // Basic colored circle icon using SVG for simplicity (no external images needed) const svgIcon = ``; const icon = L.divIcon({ html: svgIcon, className: `sensor-icon status-${status}`, // Add class for potential CSS styling iconSize: [24, 24], iconAnchor: [12, 12], // Center the circle popupAnchor: [0, -12] }); return icon; // Example using standard Leaflet marker paths (if you have them) // iconUrl = `assets/images/marker-${color}.png`; // return L.icon({ // iconUrl: iconUrl, // iconSize: iconSize, // iconAnchor: iconAnchor, // popupAnchor: popupAnchor, // shadowUrl: 'assets/images/marker-shadow.png', // Optional shadow // shadowSize: [41, 41], // shadowAnchor: [12, 41] // }); } // --- Update Heatmap --- function updateHeatmap() { const heatData = sensorData .map(s => { let intensity = 0.1; // Base intensity for 'ok' if (s.status === 'warning') intensity = 0.5; if (s.status === 'critical') intensity = 1.0; // Add more factors: intensity = calculateFireRisk(s.temp, s.humidity, s.smokeLevel); return [s.lat, s.lon, intensity]; }); heatmapLayer.setLatLngs(heatData); } // --- Map Controls --- function setupMapControls() { const toggleSensors = document.getElementById('toggle-sensors'); const toggleHeatmap = document.getElementById('toggle-heatmap'); if (toggleSensors) { toggleSensors.addEventListener('change', function() { if (this.checked) { map.addLayer(sensorMarkersLayer); } else { map.removeLayer(sensorMarkersLayer); } }); } if (toggleHeatmap) { toggleHeatmap.addEventListener('change', function() { if (this.checked) { updateHeatmap(); // Ensure data is current before adding map.addLayer(heatmapLayer); } else { map.removeLayer(heatmapLayer); } }); } } // Export or call init // export { initMap }; // Mock Real-time Alerts Logic const alertsListElement = document.getElementById('alerts-list')?.querySelector('ul'); // --- Mock Alert Types --- const alertTypes = [ { type: 'Fire Detection', level: 'high', message: 'High temperature and smoke detected in Sector 4B!' }, { type: 'Illegal Logging', level: 'medium', message: 'Suspected chainsaw audio detected near River Trail.' }, { type: 'Weather Warning', level: 'medium', message: 'High wind warning issued for the next 6 hours.' }, { type: 'Sensor Malfunction', level: 'low', message: 'Sensor S002 reporting inconsistent humidity data.' }, { type: 'Low Battery', level: 'low', message: 'Sensor F011 battery level below 15%.' }, { type: 'Wildlife Sighting', level: 'info', message: 'Rare bird species spotted near Observation Point 3.' }, { type: 'Equipment Check', level: 'info', message: 'Ranger patrol vehicle #3 due for maintenance.' }, { type: 'High CO2', level: 'warning', message: 'Elevated CO2 levels detected in Valley Area.' }, ]; // --- Generate a Mock Alert --- function generateMockAlert() { const randomAlert = alertTypes[Math.floor(Math.random() * alertTypes.length)]; return { ...randomAlert, // Copy type, level, message timestamp: new Date() }; } // --- Add Alert to the UI --- function addAlertToUI(alert) { if (!alertsListElement) return; const listItem = document.createElement('li'); listItem.classList.add(`alert-${alert.level}`); // Add class for styling const messageSpan = document.createElement('span'); messageSpan.textContent = `[${alert.type}] ${alert.message}`; const timeSpan = document.createElement('span'); timeSpan.classList.add('alert-timestamp'); timeSpan.textContent = alert.timestamp.toLocaleTimeString(); listItem.appendChild(messageSpan); listItem.appendChild(timeSpan); // Add to the top of the list alertsListElement.prepend(listItem); // Limit the number of alerts shown (e.g., keep last 20) while (alertsListElement.children.length > 20) { alertsListElement.removeChild(alertsListElement.lastChild); } } // --- Initialize Alert System --- function initAlerts() { if (!alertsListElement) { console.error("Alerts list element not found."); return; } // Clear the "Loading..." message alertsListElement.innerHTML = ''; // Generate a few initial alerts for (let i = 0; i < 5; i++) { addAlertToUI(generateMockAlert()); } // Simulate new alerts arriving periodically setInterval(() => { if (Math.random() < 0.3) { // 30% chance of a new alert every interval addAlertToUI(generateMockAlert()); } }, 10 * 1000); // Check for new alerts every 10 seconds } // Export or call init // export { initAlerts }; // Main application entry point document.addEventListener('DOMContentLoaded', () => { console.log('Forest Monitoring System Initializing...'); // Check login status (already handled in auth.js, but good practice) checkLoginStatus(); // Make sure auth.js defines this globally or exports it // Initialize core modules if on the dashboard page if (window.location.pathname.includes('dashboard.html')) { console.log('Initializing Dashboard Modules...'); try { initMap(); // from map.js } catch (e) { console.error("Failed to initialize map:", e); } try { initSensorMonitoring(); // from sensors.js } catch (e) { console.error("Failed to initialize sensors:", e); } try { initAlerts(); // from alerts.js } catch (e) { console.error("Failed to initialize alerts:", e); } // Smooth scrolling for sidebar links setupSidebarNavigation(); } console.log('Initialization complete.'); }); function setupSidebarNavigation() { const sidebarLinks = document.querySelectorAll('.sidebar a'); sidebarLinks.forEach(link => { link.addEventListener('click', function(e) { const targetId = this.getAttribute('href'); // Basic check if it's an internal anchor link if (targetId && targetId.startsWith('#')) { e.preventDefault(); // Prevent default anchor jump const targetElement = document.querySelector(targetId); if (targetElement) { targetElement.scrollIntoView({ behavior: 'smooth', block: 'start' // Align top of the target element to the top of the viewport }); } } }); }); } // Make checkLoginStatus globally available if not using modules // This assumes auth.js runs first and defines checkLoginStatus in the global scope // If using modules, import/export would be necessary. # Forest Monitoring System A web-based application for real-time monitoring of forest conditions, including sensor data, interactive maps, and alerts. ## Features (Implemented & Planned) ### Core Monitoring (Partially Implemented) * **Real-time Sensor Dashboards:** Displays Temperature, Humidity, Smoke Level, CO2, Rainfall, Soil Moisture (Mock Data). * **Interactive Forest Map:** Shows sensor locations with status indicators (Mock Data). Includes basic heatmap toggle for fire risk (Mock Data). * **Alert System:** Displays real-time alerts for various events (Fire, Logging, Weather, Sensor Issues - Mock Data). ### Ecological Insights (Planned) * NDVI Maps * Canopy Cover Analysis * Biodiversity Tracking (Camera Traps) * Carbon Sequestration Estimates ### Threat Prevention (Planned) * Fire Risk Prediction Models * Anti-Poaching System (Gunshot/Vehicle Detection) * Ranger Patrol Management ### Historical Data & Trends (Planned) * Time-Series Analysis * Event Archive ### Community & Management (Planned) * Ranger Tools (Patrol Planning, Reporting) * Public Portal ### Advanced Features (Planned) * AI Predictions * Satellite Integration * IoT Device Management ### Administrative Features (Planned) * User Management (Basic Login Implemented) * System Health Monitoring ## Setup 1. Ensure you have a web server or environment capable of serving HTML, CSS, and JavaScript files. 2. Place all files in the specified directory structure. 3. Access `index.html` or `login.html` through your web server. ## Usage * Navigate to the application URL. * Login using mock credentials (e.g., `ranger1` / `password123`, `admin` / `adminpass`). * The dashboard displays sensor charts, an interactive map, and an alert feed. * Use the sidebar to navigate between different planned modules (currently placeholders). * Use map controls to toggle sensor visibility and the fire risk heatmap. ## Mock Data This version uses **mock data** generated within the JavaScript files (`sensors.js`, `map.js`, `alerts.js`) for demonstration purposes. No real sensors or backend API calls are implemented yet. ## Folder Structure forest-monitoring-system/ │ ├── index.html # Landing/Redirect Page ├── login.html # Login Page ├── dashboard.html # Main Application Dashboard ├── css/ │ ├── styles.css # Main dashboard and shared styles │ └── auth.css # Login page specific styles ├── js/ │ ├── auth.js # Authentication logic │ ├── sensors.js # Sensor data simulation and charting │ ├── map.js # Interactive map logic (Leaflet) │ ├── alerts.js # Alert generation and display │ └── main.js # Main application initialization script ├── assets/ │ ├── images/ │ │ ├── logo.png # Main logo │ │ ├── logo-white.png # Logo for dark backgrounds │ │ ├── forest-bg.jpg # Background for login page │ │ ├── placeholder-ndvi.png # Placeholder image │ │ └── placeholder-change.png # Placeholder image └── README.md # This file ``` *(Note: Placeholder images need to be created or sourced)* Placeholder for logo.png Placeholder for logo-white.png Placeholder for forest-bg.jpg Placeholder for placeholder-ndvi.png Placeholder for placeholder-change.png This sets up the enhanced structure: 1. **Dashboard (`dashboard.html`, `css/styles.css`):** Updated with a sidebar navigation and content area. Sections for Core Monitoring, Ecological Insights, Threat Prevention, etc., are added. Core Monitoring includes more sensor charts and map controls. Other sections are placeholders. 2. **Sensors (`js/sensors.js`):** Added mock data generation and charts for CO2, Rainfall, and Soil Moisture. Uses `chartjs-adapter-date-fns` for better time-axis handling. 3. **Map (`js/map.js`):** Includes Leaflet.heat for heatmap visualization. Added controls to toggle sensor markers and the heatmap layer. Uses mock sensor data with varying statuses and locations. Uses SVG icons for markers. 4. **Alerts (`js/alerts.js`):** Added more diverse mock alert types (Low Battery, Wildlife Sighting, High CO2, etc.). 5. **Authentication (`js/auth.js`):** Added storing/displaying the username on the dashboard and improved redirect logic. Added a body class for login page styling. 6. **Main Script (`js/main.js`):** Initializes the map, sensors, and alerts modules on the dashboard page. Adds smooth scrolling for sidebar navigation. 7. **README (`README.md`):** Updated to reflect the new structure, features (implemented and planned), and usage instructions. 8. **Assets:** Added placeholder files for the required images. You would replace these with actual image files. This provides a solid foundation. The next steps would involve replacing mock data with real API calls and building out the functionality within the placeholder sections.