Tommaso Stanga: System Compass
System Compass is an innovative Electron-based system monitoring application that transforms traditional performance metrics into an elegant compass-like visualization, where four expanding quadrants dynamically scale according to battery level, CPU load, RAM usage, and CPU thermometer readings, while a rotating compass needle responds to mouse movement speed and direction. The interface further evolves through a dynamic background that gradually shifts from black to white based on system uptime over seven days, complemented by a real-time statistics panel displaying numerical values. This unique fusion of functional system monitoring and artistic visualization creates an ambient desktop widget that delivers both practical utility and aesthetic appeal through its poetic interpretation of machine activity.
Desktop demo - live monitoring display
Interaction test - system load and mouse tracking
Visual Timeline Documentation
These screenshots document the dynamic background feature that evolves from black to white over a 7-day system uptime cycle, creating a visual timeline of continuous operation.
Uptime progression - background evolves from black to white over 7 days, with final state suggesting system restart
Mouse Tracking Algorithm
This code calculates real-time mouse velocity and translates it into compass rotation. Using the Pythagorean theorem, it measures pixel distance traveled between intervals, then converts this speed into directional needle movement - creating a direct physical connection between user interaction and visual feedback.
// Mouse speed calculation and compass control
const deltaX = pos.x - lastMouseX;
const deltaY = pos.y - lastMouseY;
const mouseSpeed = Math.sqrt(deltaX * deltaX + deltaY * deltaY) / deltaTime;
const rotationSpeed = mouseSpeed * 0.1 * direction;
document.getElementById("compass-needle").style.transform = `rotate(${newRotation}deg)`;Uptime Background Algorithm
This algorithm converts system uptime into a visual grayscale timeline, progressively lightening the background from black to white over a 7-day period to create a subtle temporal awareness.
// Dynamic background based on system uptime
const hours = Math.floor(timeInfo.uptime / 3600);
const maxHours = 168; // 7 days
const uptimeProgress = Math.min(hours / maxHours, 1);
const grayValue = Math.floor(uptimeProgress * 255);
document.body.style.backgroundColor = `rgb(${grayValue}, ${grayValue}, ${grayValue})`;