diff --git a/app/css/custom.css b/app/css/custom.css index c20ebfa0..3d5d22d6 100644 --- a/app/css/custom.css +++ b/app/css/custom.css @@ -6,8 +6,9 @@ body { margin: 20px 0 20px; } -.page-header .logo { - margin-right: 5px; +.navbar-logo { + margin-top: 0.5em; + margin-left: 0.5em; } /* Small devices (portrait phones, up to 576px) */ @@ -100,6 +101,11 @@ i.fa.fa-bars:hover{ float: left; } +.info-item-xs { + font-size: 0.7rem; + margin-left: 0.3rem; +} + .info-item-wifi { width: 6rem; float: left; @@ -125,11 +131,15 @@ i.fa.fa-bars:hover{ } .service-status-up { - color: green; + color: #a1ec38; +} + +.service-status-warn { + color: #f6f044; } .service-status-down { - color: red; + color: #f80107; animation: flash 1s linear infinite; } @keyframes flash { @@ -191,3 +201,15 @@ pre.unstyled { font-size: 0.9rem!important; } +canvas#divDBChartBandwidthhourly { + height: 350px!important; +} + +.chart-container { + height: 150px; + width: 200px; +} + +.table { + margin-bottom: 0rem; +} diff --git a/app/css/hackernews.css b/app/css/hackernews.css index d5f7ae63..33a7a9cb 100644 --- a/app/css/hackernews.css +++ b/app/css/hackernews.css @@ -215,3 +215,14 @@ pre.unstyled { font-size: 0.9rem!important; } +canvas#divDBChartBandwidthhourly { + height: 350px!important; +} + +.chart-container { + height: 150px; + width: 200px; +} +.table { + margin-bottom: 0rem; +} diff --git a/app/css/terminal.css b/app/css/terminal.css index 3ac3a1fb..f1413c66 100644 --- a/app/css/terminal.css +++ b/app/css/terminal.css @@ -394,3 +394,15 @@ pre { font-size: 0.9rem!important; } +canvas#divDBChartBandwidthhourly { + height: 350px!important; +} + +.chart-container { + height: 150px; + width: 200px; +} + +.table { + margin-bottom: 0rem; +} diff --git a/app/img/raspAP-logo.png b/app/img/raspAP-logo.png index 3943725f..d1da5e19 100644 Binary files a/app/img/raspAP-logo.png and b/app/img/raspAP-logo.png differ diff --git a/app/img/raspAP-logo.svg b/app/img/raspAP-logo.svg new file mode 100644 index 00000000..294fd2cb --- /dev/null +++ b/app/img/raspAP-logo.svg @@ -0,0 +1,46 @@ + +image/svg+xml \ No newline at end of file diff --git a/app/img/raspAP-logo64px.png b/app/img/raspAP-logo64px.png deleted file mode 100644 index 3c424683..00000000 Binary files a/app/img/raspAP-logo64px.png and /dev/null differ diff --git a/app/js/dashboardchart.js b/app/js/dashboardchart.js new file mode 100644 index 00000000..e9b039fa --- /dev/null +++ b/app/js/dashboardchart.js @@ -0,0 +1,106 @@ +(function($, _t) { + "use strict"; + + /** + * Create a Chart.js barchart. + */ + function CreateChart(ctx, labels) { + var barchart = new Chart(ctx,{ + type: 'line', + options: { + responsive: true, + maintainAspectRatio: false, + scales: { + xAxes: [{ + scaleLabel: { + display: true + }, + ticks: { + maxRotation: 0, + minRotation: 0 + } + }], + yAxes: [{ + id: 'y-axis-1', + type: 'linear', + display: true, + position: 'left', + ticks: { + beginAtZero: true + } + }] + } + }, + data: { + labels: labels, + datasets: [] + } + }); + return barchart; + } + + function ShowBandwidthChartHandler(e) { + // Remove hourly chartjs chart + $('#divDBChartBandwidthhourly').empty(); + // Construct ajax uri for getting the proper data + var timeunit = 'hourly'; + var uri = 'ajax/bandwidth/get_bandwidth.php?'; + uri += 'inet='; + uri += encodeURIComponent($('#divInterface').text()); + uri += '&tu='; + uri += encodeURIComponent(timeunit.substr(0, 1)); + var datasizeunits = 'mb'; + uri += '&dsu='+encodeURIComponent(datasizeunits); + // Get data for chart + $.ajax({ + url: uri, + dataType: 'json', + beforeSend: function() {} + }).done(function(jsondata) { + // Map json values to label array + var labels = jsondata.map(function(e) { + return e.date; + }); + // Init. chart with label series + var barchart = CreateChart('divDBChartBandwidth'+timeunit, labels); + var dataRx = jsondata.map(function(e) { + return e.rx; + }); + var dataTx = jsondata.map(function(e) { + return e.tx; + }); + addData(barchart, dataTx, dataRx, datasizeunits); + }).fail(function(xhr, textStatus) { + if (window.console) { + console.error('server error'); + } else { + alert("server error"); + } + }); + } + /** + * Add data array to datasets of current chart. + */ + function addData(chart, dataTx, dataRx, datasizeunits) { + chart.data.datasets.push({ + label: 'Send'+' '+datasizeunits.toUpperCase(), + yAxisID: 'y-axis-1', + borderColor: 'rgba(75, 192, 192, 1)', + backgroundColor: 'rgba(75, 192, 192, 0.2)', + data: dataTx + }); + chart.data.datasets.push({ + label: 'Receive'+' '+datasizeunits.toUpperCase(), + yAxisID: 'y-axis-1', + borderColor: 'rgba(192, 192, 192, 1)', + backgroundColor: 'rgba(192, 192, 192, 0.2)', + data: dataRx + }); + chart.update(); + } + $(document).ready(function() { + ShowBandwidthChartHandler(); + }); + +})(jQuery, t); + diff --git a/app/js/linkquality.js b/app/js/linkquality.js index 6e8dd34b..2de34512 100644 --- a/app/js/linkquality.js +++ b/app/js/linkquality.js @@ -3,84 +3,84 @@ // Support for dark terminal theme theme = getCookie('theme'); if (theme == 'terminal.css') { - var bgColor1 = '#000'; - var bgColor2 = '#000'; - var borderColor = 'rgba(46, 230, 0, 1)'; - var labelColor = 'rgba(46, 230, 0, 1)'; + var bgColor1 = '#000'; + var bgColor2 = '#000'; + var borderColor = 'rgba(46, 230, 0, 1)'; + var labelColor = 'rgba(46, 230, 0, 1)'; } else { - var bgColor1 = '#d4edda'; - var bgColor2 = '#eaecf4'; - var borderColor = 'rgba(147, 210, 162, 1)'; - var labelColor = 'rgba(130, 130, 130, 1)'; + var bgColor1 = '#d4edda'; + var bgColor2 = '#eaecf4'; + var borderColor = 'rgba(147, 210, 162, 1)'; + var labelColor = 'rgba(130, 130, 130, 1)'; } let data1 = { - datasets: [{ - data: [linkQ, 100-linkQ], - backgroundColor: [bgColor1, bgColor2], - borderColor: borderColor, - }], + datasets: [{ + data: [linkQ, 100-linkQ], + backgroundColor: [bgColor1, bgColor2], + borderColor: borderColor, + }], }; let config = { - type: 'doughnut', - data: data1, - options: { - aspectRatio: 2, - responsive: true, - tooltips: {enabled: false}, - hover: {mode: null}, - legend: { - display: false, - }, - rotation: (2/3)*Math.PI,//2+(1/3), - circumference: (1+(2/3)) * Math.PI, // * Math.PI, - cutoutPercentage: 80, - animation: { - animateScale: false, - animateRotate: true - }, - tooltips: { - enabled: false - } + type: 'doughnut', + data: data1, + options: { + aspectRatio: 2, + responsive: true, + maintainAspectRatio: false, + tooltips: {enabled: false}, + hover: {mode: null}, + legend: { + display: false, }, - centerText: { - display: true, - text: linkQ + "%" + rotation: (2/3)*Math.PI,//2+(1/3), + circumference: (1+(2/3)) * Math.PI, // * Math.PI, + cutoutPercentage: 80, + animation: { + animateScale: false, + animateRotate: true + }, + tooltips: { + enabled: false } -}; - -Chart.Chart.pluginService.register({ + }, + centerText: { + display: true, + text: linkQ + "%" + }, + plugins: [{ beforeDraw: function(chart) { - if (chart.config.centerText.display !== null && - typeof chart.config.centerText.display !== 'undefined' && - chart.config.centerText.display) { - drawLinkQ(chart); - } + if (chart.config.centerText.display !== null && + typeof chart.config.centerText.display !== 'undefined' && + chart.config.centerText.display) { + drawLinkQ(chart); + } } -}); + }] +}; function drawLinkQ(chart) { - let width = chart.chart.width; - let height = chart.chart.height; - let ctx = chart.chart.ctx; + let width = chart.chart.width; + let height = chart.chart.height; + let ctx = chart.chart.ctx; - ctx.restore(); - let fontSize = (height / 100).toFixed(2); - ctx.font = fontSize + "em sans-serif"; - ctx.fillStyle = labelColor; - ctx.textBaseline = "middle"; + ctx.restore(); + let fontSize = (height / 100).toFixed(2); + ctx.font = fontSize + "em sans-serif"; + ctx.fillStyle = labelColor; + ctx.textBaseline = "middle"; - let text = chart.config.centerText.text; - let textX = Math.round((width - ctx.measureText(text).width) * 0.5); - let textY = height / 2; - ctx.fillText(text, textX, textY); - ctx.save(); + let text = chart.config.centerText.text; + let textX = Math.round((width - ctx.measureText(text).width) * 0.5); + let textY = height / 2; + ctx.fillText(text, textX, textY); + ctx.save(); } window.onload = function() { - let ctx = document.getElementById("canvas").getContext("2d"); - window.myDoughnut = new Chart(ctx, config); + let ctx = document.getElementById("divChartLinkQ").getContext("2d"); + var chart = new Chart(ctx, config); }; diff --git a/app/lib/system.php b/app/lib/system.php index 4e4c8879..9e374d5c 100644 --- a/app/lib/system.php +++ b/app/lib/system.php @@ -50,5 +50,10 @@ class System { $cpuTemp = file_get_contents("/sys/class/thermal/thermal_zone0/temp"); return number_format($cpuTemp/1000, 1); } -} + public function hostapdStatus() { + exec('pidof hostapd | wc -l', $status); + return $status; + } + +} diff --git a/includes/dashboard.php b/includes/dashboard.php index aea43cb1..fc03c0aa 100755 --- a/includes/dashboard.php +++ b/includes/dashboard.php @@ -3,7 +3,7 @@ /** * Show dashboard page. */ -function DisplayDashboard() +function DisplayDashboard(&$extraFooterScripts) { $status = new StatusMessages(); @@ -102,7 +102,7 @@ function DisplayDashboard() if (!preg_match('/SSID: ([^ ]{1,'.SSIDMAXLEN.'})/', $stdoutIwWRepSpaces, $matchesSSID)) { $wlanHasLink = false; - $matchesSSID[1] = 'Not connected'; + $matchesSSID[1] = 'None'; } $connectedSSID = $matchesSSID[1]; @@ -194,6 +194,7 @@ function DisplayDashboard() "strLinkQuality", "wlan0up" )); + $extraFooterScripts[] = array('src'=>'app/js/dashboardchart.js', 'defer'=>false); } diff --git a/includes/hostapd.php b/includes/hostapd.php index aa06ebbb..d8a6810b 100755 --- a/includes/hostapd.php +++ b/includes/hostapd.php @@ -1,6 +1,7 @@ hostapdStatus(); $serviceStatus = $hostapdstatus[0] == 0 ? "down" : "up"; foreach ($hostapdconfig as $hostapdconfigline) { diff --git a/includes/sysstats.php b/includes/sysstats.php new file mode 100755 index 00000000..f6e58b48 --- /dev/null +++ b/includes/sysstats.php @@ -0,0 +1,57 @@ +hostname(); +$uptime = $system->uptime(); +$cores = $system->processorCount(); + +// mem used +$memused = $system->usedMemory(); +$memused_status = "primary"; +if ($memused > 90) { + $memused_status = "danger"; + $memused_led = "service-status-down"; +} elseif ($memused > 75) { + $memused_status = "warning"; + $memused_led = "service-status-warn"; +} elseif ($memused > 0) { + $memused_status = "success"; + $memused_led = "service-status-up"; +} + +// cpu load +$cpuload = $system->systemLoadPercentage(); +if ($cpuload > 90) { + $cpuload_status = "danger"; +} elseif ($cpuload > 75) { + $cpuload_status = "warning"; +} elseif ($cpuload > 0) { + $cpuload_status = "success"; +} + +// cpu temp +$cputemp = $system->systemTemperature(); +if ($cputemp > 70) { + $cputemp_status = "danger"; + $cputemp_led = "service-status-down"; +} elseif ($cputemp > 50) { + $cputemp_status = "warning"; + $cputemp_led = "service-status-warn"; +} else { + $cputemp_status = "success"; + $cputemp_led = "service-status-up"; +} + +// hostapd status +$hostapd = $system->hostapdStatus(); +if ($hostapd[0] ==1) { + $hostapd_status = "active"; + $hostapd_led = "service-status-up"; +} else { + $hostapd_status = "inactive"; + $hostapd_led = "service-status-down"; +} + diff --git a/includes/system.php b/includes/system.php index bd174af9..3993c160 100755 --- a/includes/system.php +++ b/includes/system.php @@ -1,7 +1,6 @@ " id="accordionSidebar"> -
- -
-
RaspAP
- +
RaspAP
+
-
  • - -
    • - -
  • - -
    • - - -
  • - -
    • - - -
  • - -
    • - - -
  • - -
    • - - -
  • - -
    • - - -
  • - -
    • - - -
  • - -
    • - - -
  • - -
    • - - -
  • - -
    • - - -
  • - -
    • - -
  • - -
    • - -
    - - -
    - -
    - - - - - -
    - - -
    - - - - -
    - -
    -
    - - - -
    +
    +
    Status
    +
    Hotspot
    +
    Memory Use: %
    +
    CPU Temp: °C
    +
    + +
  • + +
    • + +
  • + +
    • + + +
  • + +
    • + + +
  • + +
    • + + +
  • + +
    • + + +
  • + +
    • + + +
  • + +
    • + + +
  • + +
    • + + +
  • + +
    • + + +
  • + +
    • + + +
  • + +
    • + +
  • + +
    • + +
    + + +
    + +
    + + + + + +
    + + +
    + + + + +
    + +
    +
    + + + +
    @@ -304,7 +313,7 @@ if ($_COOKIE['sidebarToggled'] == 'true' ) { foreach ($extraFooterScripts as $script) { echo ' ' , PHP_EOL; } diff --git a/templates/dashboard.php b/templates/dashboard.php index 074d54f9..893e18fa 100755 --- a/templates/dashboard.php +++ b/templates/dashboard.php @@ -13,59 +13,59 @@ $ifaceStatus = $wlan0up ? "up" : "down";
    -
    - -
    -
    - -
    +
    + +
    +
    + +
    +
    -
    + +
    +
    +
    +

    +
    +
    + +
    +
    +
    +
    + +
    -

    +

    +
    +
    -
    +
    +
    - +
    +
    +
    -
    -
    +
    +
    -

    -
    -
    -
    -
    -
    -
    -
    -
    -
    -

    -
    -
    -
    -
    -
    -
    -
    -

    @@ -77,7 +77,7 @@ $ifaceStatus = $wlan0up ? "up" : "down"; - + @@ -87,13 +87,20 @@ $ifaceStatus = $wlan0up ? "up" : "down";
    + 2) : ?> +
    + +
    + +
    +
    -
    +
    @@ -114,3 +121,9 @@ $ifaceStatus = $wlan0up ? "up" : "down";
    + diff --git a/templates/system.php b/templates/system.php index 37ff7370..56f21423 100755 --- a/templates/system.php +++ b/templates/system.php @@ -1,39 +1,6 @@ hostname(); -$uptime = $system->uptime(); -$cores = $system->processorCount(); - -// mem used -$memused = $system->usedMemory(); -$memused_status = "primary"; -if ($memused > 90) { - $memused_status = "danger"; -} elseif ($memused > 75) { - $memused_status = "warning"; -} elseif ($memused > 0) { - $memused_status = "success"; -} - -// cpu load -$cpuload = $system->systemLoadPercentage(); -if ($cpuload > 90) { - $cpuload_status = "danger"; -} elseif ($cpuload > 75) { - $cpuload_status = "warning"; -} elseif ($cpuload > 0) { - $cpuload_status = "success"; -} - -// cpu temp -$cputemp = $system->systemTemperature(); -if ($cputemp > 70) { - $cputemp_status = "danger"; -} elseif ($cputemp > 50) { - $cputemp_status = "warning"; -} else { - $cputemp_status = "success"; -} +include('includes/sysstats.php'); ?>