Skip to content

Commit fd7bc88

Browse files
codeperfectpluscodeperfectplus
committed
UI improvement
1 parent 9c09a79 commit fd7bc88

10 files changed

Lines changed: 176 additions & 48 deletions

File tree

‎src/routes/other.py‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import os
22
import subprocess
3-
from flask import render_template, request, jsonify, flash, blueprints, redirect, url_for
3+
from flask import render_template, request, jsonify, flash, blueprints, redirect, url_for, session
44
from flask_login import login_required
55

66
from src.models import GeneralSettings

‎src/static/css/graphs.css‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -278,3 +278,11 @@ button i.fas {
278278
#refreshCpuFrequencyTime:hover, #refreshCurrentTempTime:hover {
279279
background-color: #2980b9; /* Darker blue on hover for specific buttons */
280280
}
281+
282+
283+
.graph {
284+
display: flex;
285+
justify-content: center;
286+
align-items: center;
287+
margin-top: 20px;
288+
}

‎src/static/css/os_info.css‎

Lines changed: 33 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,46 +1,62 @@
1-
/*
2-
1+
/* General container styles */
32
.container {
4-
background-color: #ffffff;
5-
padding: 20px;
6-
border-radius: 8px;
7-
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
8-
} */
3+
background-color: #f8f9fa;
4+
padding: 30px;
5+
border-radius: 12px;
6+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
7+
}
98

9+
/* Title styling */
1010
h1 {
11-
font-size: 1.75rem;
12-
font-weight: 600;
13-
color: #333;
11+
font-size: 2.25rem;
12+
font-weight: 700;
13+
color: #495057;
14+
text-align: center;
15+
margin-bottom: 30px;
1416
}
1517

18+
/* Table styles */
1619
.table {
20+
background-color: #ffffff;
21+
border-radius: 8px;
22+
overflow: hidden;
23+
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
1724
margin-top: 20px;
1825
border: none;
1926
}
2027

21-
.table th {
22-
background-color: #343a40;
28+
/* Header of the table */
29+
.table thead th {
30+
background-color: #6c757d;
2331
color: #fff;
24-
border: none;
2532
text-transform: uppercase;
2633
font-size: 0.875rem;
34+
letter-spacing: 0.05em;
35+
border-bottom: none;
36+
padding: 15px;
37+
text-align: left;
2738
}
2839

29-
.table td {
40+
/* Table body cells */
41+
.table tbody td {
42+
padding: 15px;
3043
vertical-align: middle;
3144
font-size: 0.875rem;
3245
border-color: #dee2e6;
3346
}
3447

35-
.table td i {
48+
/* Table icons */
49+
.table tbody td i {
3650
margin-right: 8px;
3751
color: #007bff; /* Icon color */
3852
}
3953

54+
/* Hover effect for table rows */
4055
.table-hover tbody tr:hover {
41-
background-color: #f1f1f1; /* Hover effect */
56+
background-color: #f1f1f1;
4257
}
4358

59+
/* Alternating row colors for table */
4460
.table-striped tbody tr:nth-of-type(odd) {
45-
background-color: #f9f9f9; /* Light gray for alternating rows */
61+
background-color: #f9f9f9;
4662
}

‎src/static/css/style.css‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -48,10 +48,8 @@ body {
4848

4949
.content {
5050
margin: 0 auto; /* Center the content */
51-
padding: 1rem 5rem;
52-
background-color: #f9f9f9; /* Light background color */
51+
padding: 1rem 4rem;
5352
border-radius: 8px; /* Rounded corners */
54-
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
5553
font-family: 'Arial', sans-serif; /* Font family */
5654
line-height: 1.6; /* Improve readability */
5755
}

‎src/static/js/cardChart.js‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
const maxDataPoints = 20; // Number of data points to show on the chart
2+
3+
// Generalized function to create and update a line chart
4+
function createLineChart(canvasId, label, dataStorage, updateFunc) {
5+
console.log(dataStorage);
6+
const ctx = document.getElementById(canvasId).getContext('2d');
7+
const chart = new Chart(ctx, {
8+
type: 'line',
9+
data: {
10+
labels: Array(maxDataPoints).fill(''), // Empty labels for time intervals
11+
datasets: [{
12+
label: label,
13+
data: dataStorage,
14+
borderColor: 'red',
15+
borderWidth: 2,
16+
fill: true,
17+
tension: 0.6, // Smooth line
18+
pointRadius: 0 // Removes the round tip (data points) on the line
19+
}]
20+
},
21+
options: {
22+
scales: {
23+
x: {
24+
display: false // Hide the x-axis labels and grid
25+
},
26+
y: {
27+
display: false, // Hide the y-axis labels and grid
28+
beginAtZero: true,
29+
max: 100 // Assuming max value is 100 for CPU and memory usage
30+
}
31+
},
32+
plugins: {
33+
legend: {
34+
display: false // Hide the legend
35+
}
36+
},
37+
animation: false, // Disable animation for smooth updates
38+
responsive: true
39+
}
40+
});
41+
42+
// Function to update the chart with new data
43+
function updateChart(newUsage) {
44+
// Add the new data point
45+
dataStorage.push(newUsage);
46+
47+
// Keep the data array length within the maxDataPoints
48+
if (dataStorage.length > maxDataPoints) {
49+
dataStorage.shift();
50+
}
51+
52+
// Update the chart
53+
chart.update();
54+
}
55+
56+
// Set interval to fetch and update data every 2 seconds
57+
setInterval(() => {
58+
const newUsage = updateFunc(); // Call the update function to get the current usage
59+
console.log(`${label} Usage:`, newUsage);
60+
updateChart(newUsage);
61+
}, 2000);
62+
}

‎src/static/js/graphs_experimental.js‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -91,6 +91,17 @@ function createChart(ctx, labels, datasets, yLabel) {
9191
// Ensure the parent element is positioned relatively
9292
ctx.canvas.parentNode.style.position = 'relative';
9393

94+
// // <h2><i class="fas fa-microchip"></i> CPU Usage </h2>
95+
// // add h2 element to the parent node
96+
// const h2 = document.createElement('h2');
97+
// h2.innerHTML = `<i class="fas fa-microchip"></i> ${yLabel}`;
98+
// //css top and left
99+
// h2.style.position = 'absolute';
100+
// h2.style.top = '10px';
101+
// h2.style.left = '10px';
102+
// ctx.canvas.parentNode.insertBefore(h2, ctx.canvas);
103+
104+
94105
// Create or update download button
95106
getOrCreateButton(ctx.canvas.parentNode, 'Download Chart', 'download-button', (e) => {
96107
const fileName = `${yLabel.replace(/\s+/g, '_')}_chart.png`; // Dynamic filename
@@ -144,13 +155,23 @@ function createChart(ctx, labels, datasets, yLabel) {
144155
maxTicksLimit: 6,
145156
maxRotation: 0,
146157
minRotation: 0,
158+
padding: 10,
159+
font: {
160+
size: 12,
161+
weight: 'bold'
162+
}
163+
147164
}
148165
},
149166
y: {
150167
beginAtZero: minY < 0 ? false : true,
151168
title: {
152169
display: true,
153170
text: yLabel,
171+
font: {
172+
size: 16,
173+
weight: 'bold'
174+
},
154175
},
155176
}
156177
}

‎src/templates/card_comp/cpu/usages.html‎

Lines changed: 19 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,23 @@
11
{% if card_settings.is_cpu_usage_card_enabled %}
2-
<div class="card cpu-usage-card bg-cpu shadow-sm" data-cpu-usage="{{ system_info['cpu_percent'] }}" data-bs-toggle="tooltip" title="{{ system_info['processort_name'] }} ">
3-
<div class="card-body d-flex flex-column align-items-center">
4-
<h5 class="card-title mb-3">CPU Usage <i class="fas fa-microchip"></i></h5>
5-
<p class="card-text fs-4 usage-value">
6-
{{ system_info['cpu_percent'] }}%
7-
</p>
8-
<div class="usage-indicator w-100">
9-
<div class="cpu-usage-bar" style="width: {{ system_info['cpu_percent'] }}%;"></div>
10-
</div>
2+
<div class="card cpu-usage-card bg-cpu shadow-sm" data-cpu-usage="{{ system_info['cpu_percent'] }}"
3+
data-bs-toggle="tooltip" title="{{ system_info['processort_name'] }}">
4+
<div class="card-body d-flex flex-column align-items-center">
5+
<h5 class="card-title mb-3">CPU Usage <i class="fas fa-microchip"></i></h5>
6+
<p class="card-text fs-4 cpu-usage-value">
7+
{{ system_info['cpu_percent'] }}%
8+
</p>
9+
<div class="usage-indicator w-100">
10+
<div class="cpu-usage-bar" style="width: {{ system_info['cpu_percent'] }}%;"></div>
1111
</div>
12+
<!-- CPU Usage Line Chart -->
13+
<canvas id="cpuUsageLineChart" height="30"></canvas>
1214
</div>
15+
</div>
1316
{% endif %}
17+
<script>
18+
// Initialize CPU Usage Chart
19+
const cpuUsageData = [];
20+
createLineChart('cpuUsageLineChart', '', cpuUsageData, () => {
21+
return parseFloat(document.querySelector('.cpu-usage-value').textContent);
22+
});
23+
</script>

‎src/templates/card_comp/memory/usage.html‎

Lines changed: 21 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,25 @@
11
{% if card_settings.is_memory_usage_card_enabled %}
2-
<div class="card memory-usage-percent-card" data-memory-usage="{{ system_info['memory_percent'] }}" data-bs-toggle="tooltip" title="Total Memory: {{ system_info['memory_available'] }} GB"
3-
data-memory-total="{{ system_info['memory_available'] }}">
4-
<div class="card-body d-flex flex-column align-items-center">
5-
<h5 class="card-title mb-3">Memory Usage <i class="fas fa-memory"></i></h5>
6-
<p class="card-text fs-4 usage-value">
7-
{{ system_info['memory_percent'] }}%
8-
</p>
9-
<div class="usage-indicator mt-2">
10-
<div class="memory-usage-bar" style="width: {{ system_info['memory_percent'] }}%;"></div>
11-
</div>
12-
<!-- <p class="card-text fs-6 mt-2">Total Memory: {{ system_info['memory_available'] }} GB</p> -->
2+
<div class="card memory-usage-percent-card" data-memory-usage="{{ system_info['memory_percent'] }}"
3+
data-bs-toggle="tooltip" title="Total Memory: {{ system_info['memory_available'] }} GB"
4+
data-memory-total="{{ system_info['memory_available'] }}">
5+
<div class="card-body d-flex flex-column align-items-center">
6+
<h5 class="card-title mb-3">Memory Usage <i class="fas fa-memory"></i></h5>
7+
<p class="card-text fs-4 memory-usage-value">
8+
{{ system_info['memory_percent'] }}%
9+
</p>
10+
<div class="usage-indicator mt-2">
11+
<div class="memory-usage-bar" style="width: {{ system_info['memory_percent'] }}%;"></div>
1312
</div>
13+
<!-- <p class="card-text fs-6 mt-2">Total Memory: {{ system_info['memory_available'] }} GB</p> -->
14+
<canvas id="memoryUsageLineChart" height="30"></canvas>
1415
</div>
16+
</div>
1517
{% endif %}
18+
19+
<script>
20+
// Initialize CPU Usage Chart
21+
const memoryUsageData = [];
22+
createLineChart('memoryUsageLineChart', '', memoryUsageData, () => {
23+
return parseFloat(document.querySelector('.memory-usage-value').textContent);
24+
});
25+
</script>

‎src/templates/dashboard/developer.html‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@
22
{% block title %}{{ system_info['system_username'] }}@{{ system_info['nodename'] }} - SystemGuard{% endblock %}
33
{% block extra_head %}
44
<link rel="stylesheet" href="{{ url_for('static', filename='css/refresher.css') }}">
5+
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
6+
<script src="{{ url_for('static', filename='js/cardChart.js')}}"></script>
57
{% endblock %}
68
{% block content %}
79
{% include 'card_comp/selector/refresh_button.html' %}
@@ -56,4 +58,5 @@
5658
{% block extra_scripts %}
5759
<script src="{{ url_for('static', filename='js/boot_time.js')}}"></script>
5860
<script src="{{ url_for('static', filename='js/refreshCardData.js')}}"></script>
61+
5962
{% endblock %}

‎src/templates/experimental/graphs.html‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -58,14 +58,14 @@ <h2><i class="fas fa-clock"></i> Current Server Time & Time Zone</h2>
5858
<div class="section-header d-flex justify-content-between align-items-center">
5959
<h2><i class="fas fa-microchip"></i> CPU Usage </h2>
6060
</div>
61-
<canvas id="cpuTimeChart"></canvas>
61+
<canvas class="graph" id="cpuTimeChart"></canvas>
6262
</div>
6363

6464
<div class="memory-usage col-md-6">
6565
<div class="section-header d-flex justify-content-between align-items-center">
6666
<h2><i class="fas fa-memory"></i> Memory Usage </h2>
6767
</div>
68-
<canvas id="memoryTimeChart"></canvas>
68+
<canvas class="graph" id="memoryTimeChart"></canvas>
6969
</div>
7070
</div>
7171

@@ -74,14 +74,14 @@ <h2><i class="fas fa-memory"></i> Memory Usage </h2>
7474
<div class="section-header d-flex justify-content-between align-items-center">
7575
<h2><i class="fas fa-thermometer-half"></i> Current Temperature</h2>
7676
</div>
77-
<canvas id="currentTempTimeChart"></canvas>
77+
<canvas class="graph" id="currentTempTimeChart"></canvas>
7878
</div>
7979

8080
<div class="cpu-frequency col-md-6">
8181
<div class="section-header d-flex justify-content-between align-items-center">
8282
<h2><i class="fas fa-microchip"></i> CPU Frequency</h2>
8383
</div>
84-
<canvas id="cpuFrequencyTimeChart"></canvas>
84+
<canvas class="graph" id="cpuFrequencyTimeChart"></canvas>
8585
</div>
8686
</div>
8787

@@ -90,14 +90,14 @@ <h2><i class="fas fa-microchip"></i> CPU Frequency</h2>
9090
<div class="section-header d-flex justify-content-between align-items-center">
9191
<h2><i class="fas fa-battery-half"></i> Battery Percentage</h2>
9292
</div>
93-
<canvas id="batteryTimeChart"></canvas>
93+
<canvas class="graph" id="batteryTimeChart"></canvas>
9494
</div>
9595

9696
<div class="network-usage col-md-6">
9797
<div class="section-header d-flex justify-content-between align-items-center">
9898
<h2><i class="fas fa-network-wired"></i> Network Sent & Received</h2>
9999
</div>
100-
<canvas id="networkTimeChart"></canvas>
100+
<canvas class="graph" id="networkTimeChart"></canvas>
101101
</div>
102102
</div>
103103

@@ -106,7 +106,7 @@ <h2><i class="fas fa-network-wired"></i> Network Sent & Received</h2>
106106
<div class="section-header d-flex justify-content-between align-items-center">
107107
<h2><i class="fas fa-memory"></i>Memory Usage(APP)</h2>
108108
</div>
109-
<canvas id="dashboardMemoryTimeChart"></canvas>
109+
<canvas class="graph" id="dashboardMemoryTimeChart"></canvas>
110110
</div>
111111
</div>
112112

0 commit comments

Comments
 (0)