Indoor Sensor Dashboard Edge App

[vpetersson]

User description

Summary

This PR introduces a new Edge App: Indoor Sensor Dashboard. The app provides a real-time, responsive dashboard for monitoring indoor environmental metrics (Temperature, Humidity, VOC, and eCO₂) using data from a Prometheus endpoint.

Features

• Real-time display of temperature, humidity, VOC, and eCO₂ metrics
• Configurable Prometheus endpoint and metric IDs via settings
• Fully responsive design supporting 4K, 1080p, 720p, and Raspberry Pi touch display resolutions (landscape & portrait)
• Clean, modern UI inspired by professional dashboards

Files Added

• index.html: Responsive dashboard UI with real-time metric fetching and display
• screenly.yml: Edge App manifest with all relevant settings and documentation
• README.md: Documentation covering features, settings, usage, supported resolutions, and a link to the live coding session

Settings

Setting	Type	Default Value	Description
prometheus_endpoint	string	(none)	Required. URL to the Prometheus metrics endpoint (e.g., http://192.168.3.80/metrics).
temperature_metric_id	string	airing_cabinet_temperature	Metric ID for temperature.
humidity_metric_id	string	airing_cabinet_humidity	Metric ID for humidity.
voc_metric_id	string	airing_cabinet_total_volatile_organic_compound	Metric ID for VOC (Volatile Organic Compounds).
eco2_metric_id	string	airing_cabinet_eco2_value	Metric ID for eCO₂.

Documentation

• Screenly Edge App Developer Documentation
• Supported Resolutions
• Live Coding Session on YouTube

---

This PR was created as part of a live coding session.

---

PR Type

Enhancement, Documentation

---

Description

• Introduce real-time indoor sensor dashboard UI

• Implement responsive design for multiple resolutions

• Fetch and parse Prometheus metrics in JS

• Include Edge App manifest and documentation

---

Changes walkthrough 📝

	Relevant files
Enhancement	index.html Add responsive dashboard HTML and logic                                    edge-apps/indoor-sensor-dashboard/index.html Add full HTML dashboard structure Implement responsive CSS design Add JS for Prometheus metrics parsing and fetching Handle missing endpoint warnings +273/-0
Documentation	README.md Add README documentation                                                                  edge-apps/indoor-sensor-dashboard/README.md Create README with app overview and usage Document configurable settings schema List supported responsive resolutions Link to developer docs and live session +52/-0
Configuration changes	screenly.yml Add Edge App manifest schema                                                          edge-apps/indoor-sensor-dashboard/screenly.yml Add Edge App manifest_v1 schema Define settings for Prometheus endpoint and metrics +35/-0

---

Need help?

Type /help how to ... in the comments thread for any questions about PR-Agent usage.

Check out the documentation for more information.

[github-actions]

PR Reviewer Guide 🔍

Here are some key observations to aid the review process:

⏱️ Estimated effort to review: 2 🔵🔵⚪⚪⚪

🧪 No relevant tests

🔒 No security concerns identified

⚡ Recommended focus areas for review Hardcoded Metric Filter The parsing function only looks for lines starting with esphome_sensor_value instead of using the configured metric IDs from settings, which may cause valid metrics to be ignored. if (line.startsWith('esphome_sensor_value')) { const match = line.match(/esphome_sensor_value\{([^}]*)\}\s+([\d.\-eE]+)/); if (match) { const labels = {}; match[1].split(',').forEach(pair => { const [k, v] = pair.split('='); if (k && v) labels[k.trim()] = v.trim().replace(/^"|"$/g, ''); }); metrics[labels.id] = { value: match[2], unit: labels.unit || '' Missing HTTP Status Check The code calls resp.text() without verifying resp.ok or the HTTP status, so error responses (e.g., 404, 500) aren't handled explicitly. const resp = await fetch(endpoint); const text = await resp.text(); const metrics = parsePrometheusMetrics(text); Undefined Entrypoint The manifest declares an entrypoint section but does not specify the actual file to launch, which will prevent the app from loading. id: entrypoint: type: file settings:

[github-actions]

PR Code Suggestions ✨

Explore these optional code suggestions:

Category	Suggestion	Impact
Possible issue	Add response status check Check the HTTP response status before reading the body to catch non-200 errors. Throwing on bad status will allow the catch block to handle errors consistently. edge-apps/indoor-sensor-dashboard/index.html [231-232] const resp = await fetch(endpoint); +if (!resp.ok) { + throw new Error(`Fetch error: ${resp.status}`); +} const text = await resp.text(); Suggestion importance[1-10]: 7 __ Why: Checking resp.ok ensures non-200 responses are caught and routed to the existing catch block, improving error handling without major changes.	Medium
General	Reset units and log errors Also reset all metric units and log the error in the catch block to ensure a clear UI and aid debugging. edge-apps/indoor-sensor-dashboard/index.html [262-267] } catch (e) { document.getElementById('temperature-value').innerText = '--'; + document.getElementById('temperature-unit').innerText = '°C'; document.getElementById('humidity-value').innerText = '--'; + document.getElementById('humidity-unit').innerText = '%'; document.getElementById('voc-value').innerText = '--'; + document.getElementById('voc-unit').innerText = 'ppb'; document.getElementById('eco2-value').innerText = '--'; + document.getElementById('eco2-unit').innerText = 'ppm'; + console.error('Metric fetch failed:', e); } Suggestion importance[1-10]: 7 __ Why: Clearing all units and logging the error in the catch block enhances both UI consistency and debugging, improving overall robustness.	Medium
	Reset unit on missing metric Reset the unit display when a metric is missing so the unit doesn't remain from a previous update. Apply similar resets for other metrics. edge-apps/indoor-sensor-dashboard/index.html [238-240] } else { document.getElementById('temperature-value').innerText = '--'; + document.getElementById('temperature-unit').innerText = '°C'; } Suggestion importance[1-10]: 6 __ Why: Resetting the unit prevents stale units from persisting when data is missing, a useful but minor UI consistency fix.	Low