cb01246657
Implement ambient display mode for wall-mounted tablets with: - Canvas 2D renderer (ambient_renderer.js) with 2 Hz render rate - Time-of-day palette transitions (morning/day/evening/night) - Zone outlines, portal lines, node positions, person blobs - Lerp-interpolated smooth movement (20% factor per frame) - Auto-dim after 60s of no presence in ambient zone - Alert mode with pulsing red background and acknowledge button - Morning briefing overlay (15s display after 6am) - System status indicator and time display Files: - dashboard/js/ambient_renderer.js: Canvas 2D rendering engine - dashboard/js/ambient_briefing.js: Morning briefing overlay - dashboard/js/ambient.test.js: Test suite - dashboard/css/notifications.css: Notification styles - dashboard/css/simulator.css: Simulator styles - dashboard/js/notifications.js: Notification handling - dashboard/js/simplemode.js: Simple mode logic - dashboard/simple.html: Simple mode page Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
99 lines
4 KiB
HTML
99 lines
4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Spaxel Ambient Display</title>
|
|
<link rel="stylesheet" href="css/ambient.css">
|
|
<meta name="apple-mobile-web-app-capable" content="yes">
|
|
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
|
|
<meta name="theme-color" content="#1a1a2e">
|
|
</head>
|
|
<body class="ambient-mode">
|
|
<!-- Ambient Container -->
|
|
<div class="ambient-container" id="ambient-container">
|
|
<!-- Floor Plan Canvas -->
|
|
<div class="ambient-floorplan">
|
|
<canvas id="ambient-canvas" class="ambient-canvas"></canvas>
|
|
</div>
|
|
|
|
<!-- Status Bar -->
|
|
<div class="ambient-status">
|
|
<div class="ambient-status-item">
|
|
<div class="ambient-status-dot online" id="ambient-status-dot"></div>
|
|
<span id="ambient-status-text">Loading...</span>
|
|
</div>
|
|
<div class="ambient-status-item">
|
|
<span id="ambient-time"></span>
|
|
</div>
|
|
<div class="ambient-status-item">
|
|
<span id="ambient-nodes">0 nodes</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Alert Overlay -->
|
|
<div id="ambient-alert" class="ambient-alert hidden">
|
|
<div class="ambient-alert-icon">⚠</div>
|
|
<div class="ambient-alert-title" id="alert-title">Alert</div>
|
|
<div class="ambient-alert-message" id="alert-message"></div>
|
|
<div class="ambient-alert-actions">
|
|
<button class="ambient-alert-btn primary" id="alert-action-primary">I'm Fine</button>
|
|
<button class="ambient-alert-btn secondary" id="alert-action-secondary">Dismiss</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Morning Briefing Overlay -->
|
|
<div id="ambient-briefing" class="ambient-briefing hidden">
|
|
<div class="ambient-briefing-content">
|
|
<div class="ambient-briefing-greeting" id="briefing-greeting">Good morning!</div>
|
|
<div id="briefing-content"></div>
|
|
<button class="ambient-briefing-dismiss" id="briefing-dismiss">Got it</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- "All Secure" Message -->
|
|
<div id="ambient-secure" class="ambient-secure" style="display: none;">
|
|
<div class="ambient-secure-icon">🔒</div>
|
|
<div class="ambient-secure-text">All secure</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Authentication (required for WebSocket) -->
|
|
<script src="js/auth.js"></script>
|
|
<!-- Ambient Mode -->
|
|
<script src="js/ambient_renderer.js"></script>
|
|
<script src="js/ambient_briefing.js"></script>
|
|
<script src="js/ambient.js"></script>
|
|
|
|
<script>
|
|
// Override init to auto-enable ambient mode (no hash check needed)
|
|
(function() {
|
|
'use strict';
|
|
|
|
// Wait for auth to complete
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Check authentication first
|
|
if (window.SpaxelAuth) {
|
|
SpaxelAuth.checkStatus().then(function(isAuthenticated) {
|
|
if (isAuthenticated) {
|
|
// Auto-enable ambient mode
|
|
if (window.SpaxelAmbientMode) {
|
|
window.SpaxelAmbientMode.enable();
|
|
}
|
|
} else {
|
|
// Redirect to main dashboard for authentication
|
|
window.location.href = '/';
|
|
}
|
|
}).catch(function() {
|
|
// On auth error, redirect to main dashboard
|
|
window.location.href = '/';
|
|
});
|
|
} else {
|
|
// Auth module not loaded, redirect
|
|
window.location.href = '/';
|
|
}
|
|
});
|
|
})();
|
|
</script>
|
|
</body>
|
|
</html>
|