VTSTech · December 19, 2024 21:27 · VTSTech · Dec 18, 2024 · VTSTech · Dec 18, 2024
diff --git a/rpi.php b/rpi.php
 <html>
 <!-- If you get /dev/vcio error then 'sudo usermod -aG video www-data' -->
 <?php
 // Handle theme selection and refresh rate from GET parameters
 $isDarkMode = isset($_GET['dark_mode']) ? ($_GET['dark_mode'] === 'on') : true; // Default to dark mode
 $refreshRate = isset($_GET['refresh_rate']) && is_numeric($_GET['refresh_rate']) ? (int)$_GET['refresh_rate'] : 10; // Default to 10 seconds

 // Define styles for light and dark themes
 if ($isDarkMode) {
    $bgColor = '000000';
    $textColor = 'ffffff';
    $linkColor = '00ff00';
 } else {
    $bgColor = 'ffffff';
    $textColor = '000000';
    $linkColor = '0000ff';
 }

 // Get temperature data
 echo '<font color="'.$bgColor.'">';
 $tempOutput = shell_exec("vcgencmd measure_temp");
 $temp = (float)substr($tempOutput, 5, -2); // Extract temperature as float
 $output = system("vcgencmd measure_clock arm"); // Retrieve CPU speed
 $speed = substr($output, 13);
 $speed = round($speed / 1000000000, 1);
 // Get Raspberry Pi model using grep
 $modelOutput = shell_exec("grep Model /proc/cpuinfo");
 $piModel = trim(str_replace("Model           :", "", $modelOutput));
 echo '</font>';

 // Map detailed model names to simplified $rpi values
 if (strpos($piModel, 'Pi 5') !== false) {
    $rpi = 'RPi5';
 } elseif (strpos($piModel, 'Pi 4') !== false) {
    $rpi = 'RPi4';
 } elseif (strpos($piModel, 'Pi 3') !== false) {
    $rpi = 'RPi3';
 } elseif (strpos($piModel, 'Pi 2') !== false) {
    $rpi = 'RPi2';
 } elseif (strpos($piModel, 'Pi Zero W') !== false) {
    $rpi = 'RPi0W';
 } elseif (strpos($piModel, 'Pi Zero') !== false) {
    $rpi = 'RPi0';
 } elseif (strpos($piModel, 'Pi') !== false) {
    $rpi = 'RPi';
 } else {
    $rpi = 'Unknown Pi';
 }
 ?>
 <head>
    <meta http-equiv="refresh" content="<?php echo $refreshRate; ?>">
    <?php echo '<title>' . $rpi . ' ' . $temp . ' ' . $speed . 'GHz</title>';?>
 </head>

 <body bgcolor="<?php echo $bgColor; ?>" text="<?php echo $textColor; ?>" link="<?php echo $linkColor; ?>">
    <b><br>Raspberry Pi RPi Temperature Monitor</b>
    <br>Written by <b><a href='https://www.vts-tech.org/' style="color:<?php echo $linkColor; ?>">VTSTech</a>
    (<a href='https://github.com/VTSTech' style="color:<?php echo $linkColor; ?>">GitHub</a></b>)

    <!-- Settings form -->
    <form method="get" style="margin-bottom: 10px;">
        <!-- Refresh rate input -->
        <label for="refresh_rate">Refresh:</label>
        <input type="number" name="refresh_rate" id="refresh_rate"
               value="<?php echo $refreshRate; ?>" min="1" max="999"
               onchange="this.form.submit()">
        <!-- Dark mode toggle -->
        <label for="dark_mode">
            <input type="checkbox" name="dark_mode" id="dark_mode"
                   <?php echo $isDarkMode ? 'checked' : ''; ?>
                   onchange="this.form.submit()"> Dark Mode
        </label>
    </form>
    <?php
        echo $piModel . '<br>Speed: ' . $speed . 'GHz';
        $uptimeContents = file_get_contents('/proc/uptime');
        if ($uptimeContents !== false) {
            // Extract the uptime in seconds (first value in /proc/uptime)
            $uptimeSeconds = (float)explode(' ', $uptimeContents)[0];

            // Convert uptime into days, hours, minutes, and seconds
            $days = floor($uptimeSeconds / 86400);
            $hours = floor(($uptimeSeconds % 86400) / 3600);
            $minutes = floor(($uptimeSeconds % 3600) / 60);
            $seconds = $uptimeSeconds % 60;

            // Display the uptime
            printf("<br>Uptime: %d days, %02d:%02d:%02d\n", $days, $hours, $minutes, $seconds);
        } else {
            echo "Unable to read uptime information.";
        }
        //$output = system("neofetch --stdout --disable shell cpu");
    //<!-- Display temperature -->
    echo '<h3 style="color:' . $textColor . ';">Temperature: ' . $temp . '°C</h3>';
    ?>

    <!-- Graph for temperature -->
    <canvas id="tempGraph" width="600" height="300" style="border:1px solid #<?php echo $textColor; ?>;"></canvas>

 <script>
    // Initialize graph data
    const tempData = JSON.parse(localStorage.getItem('tempData')) || [];
    const maxPoints = 50; // Max points to display on the graph
    const currentTemp = <?php echo $temp; ?>;
    tempData.push(currentTemp);
    if (tempData.length > maxPoints) tempData.shift(); // Remove oldest point if max is reached
    localStorage.setItem('tempData', JSON.stringify(tempData)); // Store data locally

    // Draw graph
    const canvas = document.getElementById('tempGraph');
    const ctx = canvas.getContext('2d');

    // Clear canvas
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    // Set graph style
    ctx.strokeStyle = "#<?php echo $textColor; ?>";
    ctx.lineWidth = 2;

    const width = canvas.width;
    const height = canvas.height;

    // Graph margins and scales
    const margin = 50;
    const graphWidth = width - margin * 2;
    const graphHeight = height - margin * 2;
    const maxTemp = 100; // Adjust based on expected max temperature
    const minTemp = 0;

    // Draw axis
    ctx.beginPath();
    ctx.moveTo(margin, margin);
    ctx.lineTo(margin, height - margin);
    ctx.lineTo(width - margin, height - margin);
    ctx.stroke();

    // Add axis labels
    ctx.fillStyle = "#<?php echo $textColor; ?>";
    ctx.font = "12px Arial";
    ctx.fillText("Temperature (°C)", margin - 40, margin - 10); // Y-axis label
    ctx.fillText("Time (refresh intervals)", width - margin - 100, height - margin + 24); // X-axis label

    // Draw gridlines and Y-axis scale
    ctx.strokeStyle = "#666666";
    ctx.lineWidth = 1;
    const numGridlines = 5;
    for (let i = 0; i <= numGridlines; i++) {
        const y = margin + (i * (graphHeight / numGridlines));
        const tempValue = maxTemp - (i * ((maxTemp - minTemp) / numGridlines));

        // Horizontal gridline
        ctx.beginPath();
        ctx.moveTo(margin, y);
        ctx.lineTo(width - margin, y);
        ctx.stroke();

        // Y-axis label
        ctx.fillText(tempValue.toFixed(1), margin - 40, y + 5);
    }

    // Draw graph line
    ctx.strokeStyle = "#<?php echo $textColor; ?>";
    ctx.lineWidth = 2;
    ctx.beginPath();
    for (let i = 0; i < tempData.length; i++) {
        // Reverse X scale for right to left
        const x = margin + (i * (graphWidth / (maxPoints - 1))); // X values increase from left to right
        const y = height - margin - ((tempData[i] - minTemp) * (graphHeight / (maxTemp - minTemp))); // Scale Y
        if (i === 0) ctx.moveTo(x, y);
        else ctx.lineTo(x, y);

        // Add time labels along X-axis
        if (i % Math.ceil(maxPoints / 9) === 0) { // Reduce clutter by labeling every nth point
            const timeLabel = (maxPoints - 1 - i) * <?php echo $refreshRate; ?>; // Adjust time label to reflect reverse direction
            ctx.fillText(timeLabel + 's', x - 10, height - margin + 15); // Time labels
        }

        // Add numerical labels every 10th point (or change 10 to any other interval)
        if (i % 6 === 0) { // Modify this number to adjust the interval of labels
            ctx.fillText(tempData[i].toFixed(1) + '°C', x + 5, y - 5); // Temperature label
        }
    }
    ctx.stroke();
 </script>
 </body>
 </html>
	<html>
	<!-- If you get /dev/vcio error then 'sudo usermod -aG video www-data' -->
	<?php
	// Handle theme selection and refresh rate from GET parameters
	$isDarkMode = isset($_GET['dark_mode']) ? ($_GET['dark_mode'] === 'on') : true; // Default to dark mode
	$refreshRate = isset($_GET['refresh_rate']) && is_numeric($_GET['refresh_rate']) ? (int)$_GET['refresh_rate'] : 10; // Default to 10 seconds

	// Define styles for light and dark themes
	if ($isDarkMode) {
	$bgColor = '000000';
	$textColor = 'ffffff';
	$linkColor = '00ff00';
	} else {
	$bgColor = 'ffffff';
	$textColor = '000000';
	$linkColor = '0000ff';
	}

	// Get temperature data
	echo '<font color="'.$bgColor.'">';
	$tempOutput = shell_exec("vcgencmd measure_temp");
	$temp = (float)substr($tempOutput, 5, -2); // Extract temperature as float
	$output = system("vcgencmd measure_clock arm"); // Retrieve CPU speed
	$speed = substr($output, 13);
	$speed = round($speed / 1000000000, 1);
	// Get Raspberry Pi model using grep
	$modelOutput = shell_exec("grep Model /proc/cpuinfo");
	$piModel = trim(str_replace("Model :", "", $modelOutput));
	echo '</font>';

	// Map detailed model names to simplified $rpi values
	if (strpos($piModel, 'Pi 5') !== false) {
	$rpi = 'RPi5';
	} elseif (strpos($piModel, 'Pi 4') !== false) {
	$rpi = 'RPi4';
	} elseif (strpos($piModel, 'Pi 3') !== false) {
	$rpi = 'RPi3';
	} elseif (strpos($piModel, 'Pi 2') !== false) {
	$rpi = 'RPi2';
	} elseif (strpos($piModel, 'Pi Zero W') !== false) {
	$rpi = 'RPi0W';
	} elseif (strpos($piModel, 'Pi Zero') !== false) {
	$rpi = 'RPi0';
	} elseif (strpos($piModel, 'Pi') !== false) {
	$rpi = 'RPi';
	} else {
	$rpi = 'Unknown Pi';
	}
	?>
	<head>
	<meta http-equiv="refresh" content="<?php echo $refreshRate; ?>">
	<?php echo '<title>' . $rpi . ' ' . $temp . ' ' . $speed . 'GHz</title>';?>
	</head>

	<body bgcolor="<?php echo $bgColor; ?>" text="<?php echo $textColor; ?>" link="<?php echo $linkColor; ?>">
	<b><br>Raspberry Pi RPi Temperature Monitor</b>
	<br>Written by <b><a href='https://www.vts-tech.org/' style="color:<?php echo $linkColor; ?>">VTSTech</a>
	(<a href='https://github.com/VTSTech' style="color:<?php echo $linkColor; ?>">GitHub</a></b>)

	<!-- Settings form -->
	<form method="get" style="margin-bottom: 10px;">
	<!-- Refresh rate input -->
	<label for="refresh_rate">Refresh:</label>
	<input type="number" name="refresh_rate" id="refresh_rate"
	value="<?php echo $refreshRate; ?>" min="1" max="999"
	onchange="this.form.submit()">
	<!-- Dark mode toggle -->
	<label for="dark_mode">
	<input type="checkbox" name="dark_mode" id="dark_mode"
	<?php echo $isDarkMode ? 'checked' : ''; ?>
	onchange="this.form.submit()"> Dark Mode
	</label>
	</form>
	<?php
	echo $piModel . '<br>Speed: ' . $speed . 'GHz';
	$uptimeContents = file_get_contents('/proc/uptime');
	if ($uptimeContents !== false) {
	// Extract the uptime in seconds (first value in /proc/uptime)
	$uptimeSeconds = (float)explode(' ', $uptimeContents)[0];

	// Convert uptime into days, hours, minutes, and seconds
	$days = floor($uptimeSeconds / 86400);
	$hours = floor(($uptimeSeconds % 86400) / 3600);
	$minutes = floor(($uptimeSeconds % 3600) / 60);
	$seconds = $uptimeSeconds % 60;

	// Display the uptime
	printf("<br>Uptime: %d days, %02d:%02d:%02d\n", $days, $hours, $minutes, $seconds);
	} else {
	echo "Unable to read uptime information.";
	}
	//$output = system("neofetch --stdout --disable shell cpu");
	//<!-- Display temperature -->
	echo '<h3 style="color:' . $textColor . ';">Temperature: ' . $temp . '°C</h3>';
	?>

	<!-- Graph for temperature -->
	<canvas id="tempGraph" width="600" height="300" style="border:1px solid #<?php echo $textColor; ?>;"></canvas>

	<script>
	// Initialize graph data
	const tempData = JSON.parse(localStorage.getItem('tempData')) \|\| [];
	const maxPoints = 50; // Max points to display on the graph
	const currentTemp = <?php echo $temp; ?>;
	tempData.push(currentTemp);
	if (tempData.length > maxPoints) tempData.shift(); // Remove oldest point if max is reached
	localStorage.setItem('tempData', JSON.stringify(tempData)); // Store data locally

	// Draw graph
	const canvas = document.getElementById('tempGraph');
	const ctx = canvas.getContext('2d');

	// Clear canvas
	ctx.clearRect(0, 0, canvas.width, canvas.height);

	// Set graph style
	ctx.strokeStyle = "#<?php echo $textColor; ?>";
	ctx.lineWidth = 2;

	const width = canvas.width;
	const height = canvas.height;

	// Graph margins and scales
	const margin = 50;
	const graphWidth = width - margin * 2;
	const graphHeight = height - margin * 2;
	const maxTemp = 100; // Adjust based on expected max temperature
	const minTemp = 0;

	// Draw axis
	ctx.beginPath();
	ctx.moveTo(margin, margin);
	ctx.lineTo(margin, height - margin);
	ctx.lineTo(width - margin, height - margin);
	ctx.stroke();

	// Add axis labels
	ctx.fillStyle = "#<?php echo $textColor; ?>";
	ctx.font = "12px Arial";
	ctx.fillText("Temperature (°C)", margin - 40, margin - 10); // Y-axis label
	ctx.fillText("Time (refresh intervals)", width - margin - 100, height - margin + 24); // X-axis label

	// Draw gridlines and Y-axis scale
	ctx.strokeStyle = "#666666";
	ctx.lineWidth = 1;
	const numGridlines = 5;
	for (let i = 0; i <= numGridlines; i++) {
	const y = margin + (i * (graphHeight / numGridlines));
	const tempValue = maxTemp - (i * ((maxTemp - minTemp) / numGridlines));

	// Horizontal gridline
	ctx.beginPath();
	ctx.moveTo(margin, y);
	ctx.lineTo(width - margin, y);
	ctx.stroke();

	// Y-axis label
	ctx.fillText(tempValue.toFixed(1), margin - 40, y + 5);
	}

	// Draw graph line
	ctx.strokeStyle = "#<?php echo $textColor; ?>";
	ctx.lineWidth = 2;
	ctx.beginPath();
	for (let i = 0; i < tempData.length; i++) {
	// Reverse X scale for right to left
	const x = margin + (i * (graphWidth / (maxPoints - 1))); // X values increase from left to right
	const y = height - margin - ((tempData[i] - minTemp) * (graphHeight / (maxTemp - minTemp))); // Scale Y
	if (i === 0) ctx.moveTo(x, y);
	else ctx.lineTo(x, y);

	// Add time labels along X-axis
	if (i % Math.ceil(maxPoints / 9) === 0) { // Reduce clutter by labeling every nth point
	const timeLabel = (maxPoints - 1 - i) * <?php echo $refreshRate; ?>; // Adjust time label to reflect reverse direction
	ctx.fillText(timeLabel + 's', x - 10, height - margin + 15); // Time labels
	}

	// Add numerical labels every 10th point (or change 10 to any other interval)
	if (i % 6 === 0) { // Modify this number to adjust the interval of labels
	ctx.fillText(tempData[i].toFixed(1) + '°C', x + 5, y - 5); // Temperature label
	}
	}
	ctx.stroke();
	</script>
	</body>
	</html>