Created
October 7, 2017 07:19
-
-
Save SHelfinger/8f029112e8e5542bc599850c5443d0d4 to your computer and use it in GitHub Desktop.
Raspberry HTML Temperature Bar
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?php | |
/* rpi_tempToPercent() | |
* integer | |
function rpi_tempToPercent( $t, $rpi = 3 ) { | |
$t = round( $t ); | |
if ( $rpi === 3 ) { | |
$dT['cold'] = array( 'min' => '0', 'max' => '35', 'minP' => '0%', 'maxP' => '30%' ); | |
$dT['normal'] = array( 'min' => '36', 'max' => '62', 'minP' => '31%', 'maxP' => '65%' ); | |
$dT['warm'] = array( 'min' => '63', 'max' => '74', 'minP' => '66%', 'maxP' => '80%' ); | |
$dT['hot'] = array( 'min' => '75', 'max' => '89', 'minP' => '81%', 'maxP' => '100%' ); | |
} elseif ( $rpi === 2 ) { | |
$dT['cold'] = array( 'min' => '0', 'max' => '27', 'minP' => '0%', 'maxP' => '30%' ); | |
$dT['normal'] = array( 'min' => '28', 'max' => '58', 'minP' => '31%', 'maxP' => '65%' ); | |
$dT['warm'] = array( 'min' => '59', 'max' => '70', 'minP' => '66%', 'maxP' => '80%' ); | |
$dT['hot'] = array( 'min' => '71', 'max' => '89', 'minP' => '81%', 'maxP' => '100%' ); | |
} elseif ( $rpi === 1 ) { | |
$dT['cold'] = array( 'min' => '0', 'max' => '27', 'minP' => '0%', 'maxP' => '30%' ); | |
$dT['normal'] = array( 'min' => '28', 'max' => '37', 'minP' => '31%', 'maxP' => '65%' ); | |
$dT['warm'] = array( 'min' => '38', 'max' => '44', 'minP' => '66%', 'maxP' => '80%' ); | |
$dT['hot'] = array( 'min' => '45', 'max' => '70', 'minP' => '81%', 'maxP' => '100%' ); | |
} | |
foreach( $dT as $l => $d ) { | |
if( $t >= $d['min'] && $t <= $d['max'] ) { | |
$f = ( ( 100 * $t ) / $d['max'] ); | |
$s = ( ( $f * $d['maxP'] ) / 100 ); | |
return round( $s, 2 ); | |
} | |
} | |
} | |
function rpi_getCoreTemprature() { | |
$file = 85000; | |
while ( $file == 85000 ) | |
$file = trim( shell_exec( 'cat /sys/class/thermal/thermal_zone0/temp' ) ); | |
if ( $file != false ) | |
return round( ( trim( $file ) / 1000 ), 2 ); | |
return 0; | |
} | |
$temp = rpi_getCoreTemprature(); | |
?> | |
<html> | |
<body> | |
<style> | |
.flex-box { | |
min-width: 120px; | |
width: 25%; | |
font-weight: bold; | |
font-size: 15px; | |
text-align: center; | |
margin: 10px 10px; | |
padding: 10px 10px; | |
border-radius: 2px; | |
} | |
.flex-box strong { | |
font-size: 13px; | |
padding-bottom: 7px; | |
font-weight: normal; | |
display: block; | |
color: #999999; | |
} | |
.progressbar.temp { | |
background-color: #64B5F6; | |
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr=#64B5F6, endColorstr=#81C784); | |
background-image: -moz-linear-gradient(left, #64B5F6 30%, #81C784 30%,#81C784 65%,#FFB74D 65%,#FFB74D 80%,#E57373 90%); | |
background-image: linear-gradient(left, #64B5F6 30%, #81C784 30%,#81C784 65%,#FFB74D 65%,#FFB74D 80%,#E57373 90%); | |
background-image: -webkit-linear-gradient(left, #64B5F6 30%, #81C784 30%,#81C784 65%,#FFB74D 65%,#FFB74D 80%,#E57373 90%); | |
background-image: -o-linear-gradient(left, #64B5F6 30%, #81C784 30%,#81C784 65%,#FFB74D 65%,#FFB74D 80%,#E57373 90%); | |
background-image: -ms-linear-gradient(left, #64B5F6 30%, #81C784 30%,#81C784 65%,#FFB74D 65%,#FFB74D 80%,#E57373 90%); | |
background-image: -webkit-gradient(linear, left bottom, right bottom, color-stop(30%,#64B5F6), color-stop(30%,#81C784),color-stop(65%,#81C784),color-stop(65%,#FFB74D),color-stop(80%,#FFB74D),color-stop(90%,#E57373)); | |
} | |
.progressbar { | |
width: 100%; | |
position: relative; | |
height: 17px; | |
background: #DDDDDD; | |
border-radius: 2px; | |
} | |
.progressbar.temp > div { | |
border-right: solid 1px #000; | |
background: initial !important; | |
-webkit-animation-name: pulseBorder; | |
-webkit-animation-iteration-count: infinite; | |
-webkit-animation-timing-function: ease; | |
-webkit-animation-direction: alternate; | |
-webkit-animation-duration: 5s; | |
} | |
.progressbar > div { | |
border-radius: 2px; | |
border-bottom-right-radius: 0; | |
border-top-right-radius: 0; | |
position: absolute; | |
left: 0; | |
top: 0; | |
bottom: 0; | |
} | |
.progressbar::after { | |
content: attr(data-text); | |
position: absolute; | |
width: 100%; | |
text-align: center; | |
line-height: 17px; | |
font-size: 11px; | |
left: 0; | |
} | |
</style> | |
<div class="flex-box"> | |
<strong>CPU-Temperature</strong> | |
<div class="progressbar temp" data-text="<?php echo $temp; ?> °C"> | |
<div style="width: <?php echo rpi_tempToPercent( $temp ); ?>%" class="temp"></div> | |
</div> | |
</div> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment