ui update

This commit is contained in:
Karl 2016-11-29 15:09:47 +00:00
parent 04d90c9e12
commit 93f5e0062f
7 changed files with 7058 additions and 0 deletions

View File

@ -2,4 +2,7 @@
$fp = fopen('/home/pi/hugh/rgb', 'w');
fwrite($fp, '0, 0, 255');
fclose($fp);
echo "<meta http-equiv = 'Refresh' content = '2; url =./index.php'/>"; // change redirectpage.php to where you want to redirect.
?>

6499
WebUI/css/css.css Normal file

File diff suppressed because it is too large Load Diff

224
WebUI/css/styles.css Normal file
View File

@ -0,0 +1,224 @@
/**
* Copyright 2015 Google Inc. All Rights Reserved.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
html, body {
font-family: 'Roboto', 'Helvetica', sans-serif;
}
.demo-avatar {
width: 48px;
height: 48px;
border-radius: 24px;
}
.demo-layout .demo-header .mdl-textfield {
padding: 0px;
margin-top: 41px;
}
.demo-layout .demo-header .mdl-textfield .mdl-textfield__expandable-holder {
bottom: 19px;
}
.demo-layout .mdl-layout__header .mdl-layout__drawer-button {
color: rgba(0, 0, 0, 0.54);
}
.mdl-layout__drawer .avatar {
margin-bottom: 16px;
}
.demo-drawer {
border: none;
}
/* iOS Safari specific workaround */
.demo-drawer .mdl-menu__container {
z-index: -1;
}
.demo-drawer .demo-navigation {
z-index: -2;
}
/* END iOS Safari specific workaround */
.demo-drawer .mdl-menu .mdl-menu__item {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
.demo-drawer-header {
box-sizing: border-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-justify-content: flex-end;
-ms-flex-pack: end;
justify-content: flex-end;
padding: 16px;
height: 151px;
}
.demo-avatar-dropdown {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
position: relative;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
width: 100%;
}
.demo-navigation {
-webkit-flex-grow: 1;
-ms-flex-positive: 1;
flex-grow: 1;
}
.demo-layout .demo-navigation .mdl-navigation__link {
display: -webkit-flex !important;
display: -ms-flexbox !important;
display: flex !important;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
color: rgba(255, 255, 255, 0.56);
font-weight: 500;
}
.demo-layout .demo-navigation .mdl-navigation__link:hover {
background-color: #00BCD4;
color: #37474F;
}
.demo-navigation .mdl-navigation__link .material-icons {
font-size: 24px;
color: rgba(255, 255, 255, 0.56);
margin-right: 32px;
}
.demo-content {
max-width: 1080px;
}
.demo-charts {
-webkit-align-items: center;
-ms-flex-align: center;
-ms-grid-row-align: center;
align-items: center;
}
.demo-chart:nth-child(1) {
color: #ACEC00;
}
.demo-chart:nth-child(2) {
color: #00BBD6;
}
.demo-chart:nth-child(3) {
color: #BA65C9;
}
.demo-chart:nth-child(4) {
color: #EF3C79;
}
.demo-graphs {
padding: 16px 32px;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-align-items: stretch;
-ms-flex-align: stretch;
align-items: stretch;
}
/* TODO: Find a proper solution to have the graphs
* not float around outside their container in IE10/11.
* Using a browserhacks.com solution for now.
*/
_:-ms-input-placeholder, :root .demo-graphs {
min-height: 664px;
}
_:-ms-input-placeholder, :root .demo-graph {
max-height: 300px;
}
/* TODO end */
.demo-graph:nth-child(1) {
color: #00b9d8;
}
.demo-graph:nth-child(2) {
color: #d9006e;
}
.demo-cards {
-webkit-align-items: flex-start;
-ms-flex-align: start;
-ms-grid-row-align: flex-start;
align-items: flex-start;
-webkit-align-content: flex-start;
-ms-flex-line-pack: start;
align-content: flex-start;
}
.demo-cards .demo-separator {
height: 32px;
}
.demo-cards .mdl-card__title.mdl-card__title {
color: white;
font-size: 24px;
font-weight: 400;
}
.demo-cards ul {
padding: 0;
}
.demo-cards h3 {
font-size: 1em;
}
.demo-updates .mdl-card__title {
min-height: 200px;
background-image: url('images/dog.png');
background-position: 90% 100%;
background-repeat: no-repeat;
}
.demo-cards .mdl-card__actions a {
color: #00BCD4;
text-decoration: none;
}
.demo-options h3 {
margin: 0;
}
.demo-options .mdl-checkbox__box-outline {
border-color: rgba(255, 255, 255, 0.89);
}
.demo-options ul {
margin: 0;
list-style-type: none;
}
.demo-options li {
margin: 4px 0;
}
.demo-options .material-icons {
color: rgba(255, 255, 255, 0.89);
}
.demo-options .mdl-card__actions {
height: 64px;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
box-sizing: border-box;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}

View File

@ -2,4 +2,6 @@
$fp = fopen('/home/pi/hugh/rgb', 'w');
fwrite($fp, '0, 255, 0');
fclose($fp);
echo "<meta http-equiv = 'Refresh' content = '2; url =./index.php'/>"; // change redirectpage.php to where you want to redirect.
?>

View File

@ -0,0 +1,326 @@
<?php
error_reporting(0);
// Config
$server = array(
'base' => 'http://192.168.0.20/',
'cups' => 'htpp://192.168.0.20:631',
'scan' => 'http://192.168.0.20/php-scanner'
);
$values = array();
// Getting System Values.
$uname = split(" ", exec("uname -a"), 4);
$values['system'] = array();
$values['system']['current_time'] = exec("date +'%d %b %Y %T %Z'");
$values['system']['frequency'] = exec("cat /sys/devices/system/cpu/cpu0/cpufreq/scaling_cur_freq") / 1000;
$values['system']['processor'] = str_replace("-compatible processor", "", explode(": ", exec("cat /proc/cpuinfo | grep Processor"))[1]);
$values['system']['cpu_temperature'] = round(exec("cat /sys/class/thermal/thermal_zone0/temp ") / 1000, 1);
$values['system']['system'] = $uname[0];
$values['system']['kernel'] = $uname[2];
$values['system']['host'] = exec('hostname -f');
// Load averages
$loadavg = explode(" ", exec("cat /proc/loadavg"));
$values['system']['load'] = $loadavg[2];
//Uptime
$uptime_array = explode(" ", exec("cat /proc/uptime"));
$seconds = round($uptime_array[0], 0);
$minutes = $seconds / 60;
$hours = $minutes / 60;
$days = floor($hours / 24);
$hours = sprintf('%02d', floor($hours - ($days * 24)));
$minutes = sprintf('%02d', floor($minutes - ($days * 24 * 60) - ($hours * 60)));
if ($days == 0) {
$values['system']['uptime'] = $hours . ":" . $minutes . " (hh:mm)";
} elseif($days == 1) {
$values['system']['uptime'] = $days . " day, " . $hours . ":" . $minutes . " (hh:mm)";
} else {
$values['system']['uptime'] = $days . " days, " . $hours . ":" . $minutes . " (hh:mm)";
}
//Memory Utilisation
$values['memory'] = array();
$meminfo = file("/proc/meminfo");
for ($i = 0; $i < count($meminfo); $i++) {
list($item, $data) = split(":", $meminfo[$i], 2);
$item = trim(chop($item));
$data = intval(preg_replace("/[^0-9]/", "", trim(chop($data)))); //Remove non numeric characters
switch($item) {
case "MemTotal": $values['memory']['total'] = $data; break;
case "MemFree": $values['memory']['free'] = $data; break;
case "SwapTotal": $values['memory']['total_swap'] = $data; break;
case "SwapFree": $values['memory']['free_swap'] = $data; break;
case "Buffers": $values['memory']['buffer'] = $data; break;
case "Cached": $values['memory']['cache'] = $data; break;
default: break;
}
}
//Disk space check, with sizes reported in kB.
$values['hdd'] = array();
exec("df -T -l -BKB -x tmpfs -x devtmpfs -x rootfs", $diskfree);
for ($count = 1; $count < sizeof($diskfree); $count ++) {
$diskinfo = split(" +", $diskfree[$count]);
$values['hdd'][] = array(
'drive' => $diskinfo[0],
'type' => $diskinfo[1],
'size' => $diskinfo[2],
'used' => $diskinfo[3],
'avail' => $diskinfo[4],
'percent' => $diskinfo[5],
'mount' => $diskinfo[6]
);
}
// Rendering Page.
?><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Raspberry Pi System Information</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="Raspberry Pi Print Server Information">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
<title>Raspberry Pi Server Info</title>
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&amp;lang=en">
<link rel="stylesheet" href="//fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="/css/css.css">
<link rel="stylesheet" href="/styles.css">
<style>
#view-source {
position: fixed;
display: block;
right: 0;
bottom: 0;
margin-right: 40px;
margin-bottom: 40px;
z-index: 900;
}
</style>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
</head>
<body>
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-drawer mdl-layout--fixed-header">
<header class="mdl-layout__header mdl-color--grey-100 mdl-color-text--grey-600">
<div class="mdl-layout__header-row">
<span class="mdl-layout-title">DeskPi</span>
<div class="mdl-layout-spacer"></div>
<button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon" id="hdrbtn">
<i class="material-icons">more_vert</i>
</button>
<ul class="mdl-menu mdl-js-menu mdl-js-ripple-effect mdl-menu--bottom-right" for="hdrbtn">
<li class="mdl-menu__item">
<a href="https://github.com/whizzzkid/RPi-System-Info-Script">About</a>
</li>
<li class="mdl-menu__item">
<a href="http://nishantarora.in">Contact</a>
</li>
</ul>
</div>
</header>
<div class="mdl-grid">
<div class="mdl-color--white mdl-shadow--2dp mdl-cell mdl-cell--12-col mdl-grid" id="gauges">
</div>
<div class="mdl-color--white mdl-shadow--2dp mdl-cell mdl-cell--6-col mdl-grid">
<h3>System Properties</h3>
<table class="mdl-data-table mdl-js-data-table" style="width:100%;">
<tbody>
<tr>
<td class="mdl-data-table__cell--non-numeric">Hostname</td>
<td id="host"></td>
</tr>
<tr>
<td class="mdl-data-table__cell--non-numeric">System Time</td>
<td id="current_time"></td>
</tr>
<tr>
<td class="mdl-data-table__cell--non-numeric">Base</td>
<td id="system"></td>
</tr>
<tr>
<td class="mdl-data-table__cell--non-numeric">Kernel</td>
<td id="kernel"></td>
</tr>
<tr>
<td class="mdl-data-table__cell--non-numeric">CPU</td>
<td id="processor"></td>
</tr>
<tr>
<td class="mdl-data-table__cell--non-numeric">CPU Frequency</td>
<td id="frequency"></td>
</tr>
<tr>
<td class="mdl-data-table__cell--non-numeric">CPU Temprature</td>
<td id="cpu_temperature"></td>
</tr>
<tr>
<td class="mdl-data-table__cell--non-numeric">Uptime</td>
<td id="uptime"></td>
</tr>
</tbody>
</table>
</div>
<div class="mdl-color--white mdl-shadow--2dp mdl-cell mdl-cell--6-col mdl-grid">
<h3>Desk Colour</h3>
<table class="mdl-data-table mdl-js-data-table" style="width:100%;">
<tbody>
<tr>
<td class="mdl-data-table__cell--non-numeric" onclick="location.href='/off.php'">Off</td>
<td id="host"></td>
</tr>
<tr>
<td class="mdl-data-table__cell--non-numeric" onclick="location.href='/red.php'">Red</td>
<td id="current_time"></td>
</tr>
<tr>
<td class="mdl-data-table__cell--non-numeric" onclick="location.href='/blue.php'">Blue</td>
<td id="system"></td>
</tr>
<tr>
<td class="mdl-data-table__cell--non-numeric" onclick="location.href='/green.php'">Green</td>
<td id="kernel"></td>
</tr>
<tr>
<td class="mdl-data-table__cell--non-numeric"></td>
<td id="processor"></td>
</tr>
<tr>
<td class="mdl-data-table__cell--non-numeric"></td>
<td id="frequency"></td>
</tr>
<tr>
<td class="mdl-data-table__cell--non-numeric"></td>
<td id="cpu_temperature"></td>
</tr>
<tr>
<td class="mdl-data-table__cell--non-numeric"></td>
<td id="uptime"></td>
</tr>
</tbody>
</table>
</div>
</div>
</main>
</div>
<script src="https://code.getmdl.io/1.1.3/material.min.js"></script>
<script type="text/javascript">
// App Namespace.
var RPiServerApp = {};
// Place holder for info from server.
RPiServerApp.info = JSON.parse('<?php echo json_encode($values); ?>');
// Updates system values.
RPiServerApp.updateValues = function() {
for (var i in this.info.system) {
this.updateText(i, this.info.system[i]);
}
};
// Draw chart callback.
RPiServerApp.drawChart = function () {
var gaugeData = google.visualization.arrayToDataTable([
['Label', 'Value'],
['Memory', this.convertToPercent(
this.info.memory.total - this.info.memory.free,
this.info.memory.total)],
['CPU Load', this.convertToPercent(this.info.system.load, 1)],
['Swap', this.convertToPercent(
this.info.memory.total_swap - this.info.memory.free_swap,
this.info.memory.total_swap)],
['Cache', this.convertToPercent(
this.info.memory.total - this.info.memory.cache,
this.info.memory.total)],
['Buffer', this.convertToPercent(
this.info.memory.total - this.info.memory.buffer,
this.info.memory.total)],
]);
var gaugeOptions = {
height: 250,
redFrom: 85, redTo: 100,
yellowFrom:70, yellowTo: 85,
minorTicks: 5
};
var gauges = new google.visualization.Gauge(
document.getElementById('gauges'));
gauges.draw(gaugeData, gaugeOptions);
};
// Convert values to GB from KB.
RPiServerApp.convertToGB = function(size) {
var inGB = (parseFloat(size.replace('/[^\d]/g', '')))/(1024*1024)
return Math.round(inGB) + 'GB';
};
// Generates drive info snippet.
RPiServerApp.generateDriveInfoSnippet = function(drive) {
return 'Type: ' + drive.type + ' | ' +
'Size: ' + this.convertToGB(drive.size) + ' | ' +
'Used: ' + drive.percent;
};
// Adds drive info.
RPiServerApp.addDriveInfo = function() {
for (var i in this.info.hdd) {
var newDrive = liElemTemplate.replace(
'#drive#', this.info.hdd[i].drive).replace(
'#info#', this.generateDriveInfoSnippet(
this.info.hdd[i]));
drivesContainer.innerHTML += newDrive;
}
};
// Inits.
RPiServerApp.init = function() {
google.charts.load('current', {'packages':['gauge', 'corechart']});
google.charts.setOnLoadCallback(
RPiServerApp.drawChart.bind(this));
this.updateValues();
this.addDriveInfo();
};
/**
* Updates text.
* @param {string} objectId
* @param {string} text
*/
RPiServerApp.updateText = function (objectId, text) {
try {
document.getElementById(objectId).textContent = text;
} catch (e) {
console.log(e);
console.log(objectId);
console.log(text);
}
};
/**
* Convert to percent
* @param {string} some_value
* @param {string} percent_of
* @return {float} percent.
*/
RPiServerApp.convertToPercent = function(some_value, percent_of) {
return Math.round(
((parseFloat(some_value)*100)/parseFloat(percent_of)));
};
// Running App.
RPiServerApp.init();
</script>
</body>
</html>

View File

@ -2,4 +2,6 @@
$fp = fopen('/home/pi/hugh/rgb', 'w');
fwrite($fp, '0, 0, 0');
fclose($fp);
echo "<meta http-equiv = 'Refresh' content = '2; url =./index.php'/>"; // change redirectpage.php to where you want to redirect.
?>

View File

@ -2,4 +2,6 @@
$fp = fopen('/home/pi/hugh/rgb', 'w');
fwrite($fp, '255, 0, 0');
fclose($fp);
echo "<meta http-equiv = 'Refresh' content = '2; url =./index.php'/>"; // change redirectpage.php to where you want to redirect.
?>