Solar/Felicity-Inverter-Monitor
Solar/Felicity-Inverter-Monitor
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

improve ui and change to dark theme

Browse Source
This commit is contained in:
djnitehawk 2025-03-18 16:11:57 +05:30 committed by Dĵ ΝιΓΞΗΛψΚ
parent 2014c30909
commit 182e625b19
8 changed files with 120 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/Client/Pages/BMS.razor
View File

@ -17,7 +17,7 @@
JK BMS
</h5>
<div class="card-body p-0">
<div class="container m-0 p-0">
<div class="container m-0 p-0 jkbms">
<div class="row text-center m-0 p-0">
<div class="col">
<div class="fw-bold fs-1 mt-2 text-primary">
@ -26,7 +26,7 @@
<div class="fs-1 my-1 mx-5 border-top">
@status.CapacityPct%
</div>
<div class="fs-5 pack-capacity m-0 border-top" style="cursor: pointer;" @onclick="ToggleCapacityKwh">
<div class="fs-5 pack-capacity m-0 bg-light" style="cursor: pointer;" @onclick="ToggleCapacityKwh">
@(GetPackCapacity())
</div>
</div>
@ -62,7 +62,7 @@
</div>
</div>
</div>
<div class="row text-center m-1 p-1 fw-bold" style="font-size:0.8em; background-color:aliceblue">
<div class="row text-center m-1 p-1 fw-bold" style="font-size:0.8em; background-color:#272f36;">
<div class="col">
<div class="fw-normal">
Mosfet
@ -90,7 +90,7 @@
<div class="fw-bold">
@($"{status.MinCell.Value:0.000} V")
</div>
<div class="border-top pt-1">
<div class="pt-1">
Max Cell: <span>@status.MaxCell.Key</span>
</div>
<div class="fw-bold">
@ -104,7 +104,7 @@
<div class="fw-bold">
@($"{status.CellDiff:0.000} V")
</div>
<div class="pt-1 border-top">
<div class="pt-1">
Cell Average:
</div>
<div class="fw-bold">

18
src/Client/Pages/Index.razor
View File

@ -43,7 +43,7 @@
</h5>
<div class="card-body pt-0">
<div class="container text-center fw-bold p-0">
<div class="row bg-light rounded">
<div class="row rounded">
<div class="progress p-0" style="height:2px;">
<span class="progress-bar" role="progressbar" style="width: @status.LoadPercentage%" aria-valuenow="25"
aria-valuemin="0" aria-valuemax="100"></span>
@ -56,9 +56,7 @@
<div class="row">
<div class="col">
<div class="fs-5 text-muted">@status.OutputVoltage</div>
<span class="text-body">
V
</span>
V
</div>
<div class="col">
<div class="row h-100 align-content-center">
@ -85,7 +83,7 @@
</h5>
<div class="card-body pt-0">
<div class="container text-center fw-bold p-0">
<div class="row bg-light rounded">
<div class="row rounded">
<div class="progress p-0" style="height:2px;">
<span class="progress-bar" role="progressbar" style="width: @status.PVPotential%" aria-valuenow="25" aria-valuemin="0"
aria-valuemax="100"></span>
@ -98,9 +96,7 @@
<div class="row">
<div class="col">
<div class="fs-5 text-muted">@status.PVInputVoltage</div>
<span class="text-body">
V
</span>
V
</div>
<div class="col">
<div class="fs-5 text-muted">@status.PVInputCurrent</div>
@ -145,9 +141,9 @@
<div class="col-4">
<div class="container bg-light rounded-1 p-1 m-0 fw-bold text-muted fs-1">
<div class="fs-6 voltage">@GetChargeMode()</div>
<div class="text-black charge-discharge">@status.BatteryVoltage</div>
<div class="fs-4 text-black-50">V</div>
<div class="fs-6 bg-white text-dark">@GetCRate() C</div>
<div class="charge-discharge">@status.BatteryVoltage</div>
<div class="fs-4">V</div>
<div class="fs-6 crate">@GetCRate() C</div>
</div>
</div>
<div class="col-4">

24
src/Client/Pages/Settings.razor
View File

@ -26,7 +26,7 @@
Max Combined Charge Current (A):
</div>
<div class="col-6 p-2 bg-secondary">
<input @bind-value=settings.MaxCombinedChargeCurrent class="form-control bg-light d-inline m-1" style="width:4rem;" type="text" maxlength="4">
<input @bind-value=settings.MaxCombinedChargeCurrent class="form-control d-inline m-1" style="width:4rem;" type="text" maxlength="4">
<button type="button" class="btn btn-light d-inline m-1"
@onclick="()=>SetChargeCurrent(Setting.CombinedChargeCurrent,settings.MaxCombinedChargeCurrent)">
<span class="@Spinner(Button.MaxCombinedChargeCurrent)"></span>
@ -40,7 +40,7 @@
Max Grid Charge Current (A):
</div>
<div class="col-6 p-2 bg-secondary">
<input @bind-value=settings.MaxACChargeCurrent class="form-control bg-light d-inline m-1" style="width:4rem;" type="text" maxlength="4">
<input @bind-value=settings.MaxACChargeCurrent class="form-control d-inline m-1" style="width:4rem;" type="text" maxlength="4">
<button type="button" class="btn btn-light d-inline m-1"
@onclick="()=>SetChargeCurrent(Setting.UtilityChargeCurrent,settings.MaxACChargeCurrent)">
<span class="@Spinner(Button.MaxUtilityChargeCurrent)"></span>
@ -109,7 +109,7 @@
<div class="col-6 bg-secondary p-1">
<div class="row">
<div>
<input @bind-value=settings.BulkChargeVoltage class="form-control bg-light d-inline m-1" style="width:4rem;" type="text" maxlength="4">
<input @bind-value=settings.BulkChargeVoltage class="form-control d-inline m-1" style="width:4rem;" type="text" maxlength="4">
<button type="button" class="btn btn-light d-inline m-1" @onclick="()=>SetVoltage(Setting.BulkVoltage)">
<span class="@Spinner(Button.BulkVoltage)"></span>
<span class="@Hidden(Button.BulkVoltage)">Save</span>
@ -125,7 +125,7 @@
<div class="col-6 bg-secondary p-1">
<div class="row">
<div>
<input @bind-value=settings.FloatChargeVoltage class="form-control bg-light d-inline m-1" style="width:4rem;" type="text" maxlength="4">
<input @bind-value=settings.FloatChargeVoltage class="form-control d-inline m-1" style="width:4rem;" type="text" maxlength="4">
<button type="button" class="btn btn-light d-inline m-1" @onclick="()=>SetVoltage(Setting.FloatVoltage)">
<span class="@Spinner(Button.FloatVoltage)"></span>
<span class="@Hidden(Button.FloatVoltage)">Save</span>
@ -141,7 +141,7 @@
<div class="col-6 bg-secondary p-1">
<div class="row">
<div>
<input @bind-value=settings.DischargeCuttOffVoltage class="form-control bg-light d-inline m-1" style="width:4rem;" type="text"
<input @bind-value=settings.DischargeCuttOffVoltage class="form-control d-inline m-1" style="width:4rem;" type="text"
maxlength="4">
<button type="button" class="btn btn-light d-inline m-1" @onclick="()=>SetVoltage(Setting.DischargeCutOff)">
<span class="@Spinner(Button.DischargeCutOff)"></span>
@ -158,7 +158,7 @@
<div class="col-6 bg-secondary p-1">
<div class="row">
<div>
<input @bind-value=settings.BackToGridVoltage class="form-control bg-light d-inline m-1" style="width:4rem;" type="text" maxlength="4">
<input @bind-value=settings.BackToGridVoltage class="form-control d-inline m-1" style="width:4rem;" type="text" maxlength="4">
<button type="button" class="btn btn-light d-inline m-1" @onclick="()=>SetVoltage(Setting.BackToGrid)">
<span class="@Spinner(Button.BackToGridVoltage)"></span>
<span class="@Hidden(Button.BackToGridVoltage)">Save</span>
@ -174,7 +174,7 @@
<div class="col-6 bg-secondary p-1">
<div class="row">
<div>
<input @bind-value=settings.BackToBatteryVoltage class="form-control bg-light d-inline m-1" style="width:4rem;" type="text"
<input @bind-value=settings.BackToBatteryVoltage class="form-control d-inline m-1" style="width:4rem;" type="text"
maxlength="4">
<button type="button" class="btn btn-light d-inline m-1" @onclick="()=>SetVoltage(Setting.BackToBattery)">
<span class="@Spinner(Button.BackToBattery)"></span>
@ -194,7 +194,7 @@
<div class="col-6 p-2 bg-secondary">
<div class="row">
<div style="width:6rem;">
<input type="number" class="form-control bg-light" @bind-value=settings.SystemSpec.PV_MaxCapacity>
<input type="number" class="form-control" @bind-value=settings.SystemSpec.PV_MaxCapacity>
</div>
<div class="col-1 fw-bolder fs-5 m-1 text-white">Watts</div>
</div>
@ -207,7 +207,7 @@
<div class="col-6 p-2 bg-secondary">
<div class="row">
<div style="width:6rem;">
<input type="number" class="form-control bg-light" @bind-value=settings.SystemSpec.BatteryCapacity>
<input type="number" class="form-control" @bind-value=settings.SystemSpec.BatteryCapacity>
</div>
<div class="col-1 fw-bolder fs-5 m-1 text-white">Ah</div>
</div>
@ -220,7 +220,7 @@
<div class="col-6 p-2 bg-secondary">
<div class="row">
<div style="width:6rem;">
<input type="number" class="form-control bg-light" @bind-value=settings.SystemSpec.BatteryNominalVoltage>
<input type="number" class="form-control" @bind-value=settings.SystemSpec.BatteryNominalVoltage>
</div>
<div class="col-1 fw-bolder fs-5 m-1 text-white">V</div>
</div>
@ -233,7 +233,7 @@
<div class="col-6 p-2 bg-secondary">
<div class="row">
<div style="width:6rem;">
<input type="number" class="form-control bg-light" @bind-value=settings.SystemSpec.SunlightStartHour>
<input type="number" class="form-control" @bind-value=settings.SystemSpec.SunlightStartHour>
</div>
<div class="col-1 fw-bolder fs-5 m-1 text-white">Hrs</div>
</div>
@ -246,7 +246,7 @@
<div class="col-6 p-2 bg-secondary">
<div class="row">
<div style="width:6rem;">
<input type="number" class="form-control bg-light" @bind-value=settings.SystemSpec.SunlightEndHour>
<input type="number" class="form-control" @bind-value=settings.SystemSpec.SunlightEndHour>
</div>
<div class="col-1 fw-bolder fs-5 m-1 text-white">Hrs</div>
</div>

7
src/Client/Shared/Loader.razor
View File

@ -1,7 +1,7 @@
@if (Enabled)
{
<div class="container w-100 text-center">
<div class="my-auto p-5">
<div class="my-auto p-5 loader">
<span class="spinner-border"></span>
<div class="fw-bold">... Loading ...</div>
</div>
@ -9,5 +9,8 @@
}
@code{
[Parameter] public bool Enabled { get; set; }
[Parameter]
public bool Enabled { get; set; }
}

2
src/Client/Shared/MainLayout.razor.css
View File

@ -9,7 +9,7 @@ main {
}
.sidebar {
background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #160a19 70%) !important;
}
.top-row {

53
src/Client/wwwroot/css/app.css
View File

@ -2,6 +2,8 @@
html, body {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
background-color: #191919;;
color: #dddddd;
}
h1:focus {
@ -92,8 +94,13 @@ a, .btn-link {
height: 0.75rem;
}
.card {
background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #160a19 70%) !important;
}
.card-header {
padding: 0.2rem;
background-color: rgb(9 50 89);
}
.card-body {
@ -125,3 +132,49 @@ a, .btn-link {
opacity: 0;
}
}
.loader {
color: #e1e1e1;
}
.bg-light {
background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #160a19 70%) !important;
}
.text-muted {
color: #c3c3c3 !important;
}
.crate {
background-color: #03182c;
}
.progress {
background-color: #002952;
}
.text-danger {
color: rgb(188 36 51) !important;
}
.border-top {
border-top: 1px solid #3c3c3c !important;
}
.jkbms {
max-width: 100%;
}
.nav-tabs .nav-link.active {
background-color: #bbbbbb;
color: black;
}
.form-control {
background-color: #d0d0d0
}
.btn-light {
background-color: #7d97b1;
border-color: #656769;
}

66
src/Client/wwwroot/index.html
View File

@ -2,51 +2,51 @@
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<title>InverterMon</title>
<base href="/" />
<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
<link href="css/app.css" rel="stylesheet" />
<link href="InverterMon.Client.styles.css" rel="stylesheet" />
<link href="manifest.json" rel="manifest" />
<link rel="apple-touch-icon" sizes="512x512" href="icon-512.png" />
<link rel="apple-touch-icon" sizes="192x192" href="icon-192.png" />
<base href="/"/>
<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet"/>
<link href="css/app.css" rel="stylesheet"/>
<link href="InverterMon.Client.styles.css" rel="stylesheet"/>
<link href="manifest.json" rel="manifest"/>
<link rel="apple-touch-icon" sizes="512x512" href="icon-512.png"/>
<link rel="apple-touch-icon" sizes="192x192" href="icon-192.png"/>
<script src="bootstrap.bundle.min.js"></script>
<script src="https://unpkg.com/@antv/g2plot@1.1.28/dist/g2plot.js"></script>
<script src="_content/AntDesign.Charts/ant-design-charts-blazor.js"></script>
</head>
<body>
<div id="app">
<div class="container w-100 text-center">
<div class="my-auto p-5">
<span class="spinner-border"></span>
<div class="fw-bold">... Loading ...</div>
</div>
<div id="app">
<div class="container w-100 text-center">
<div class="my-auto p-5 loader">
<span class="spinner-border"></span>
<div class="fw-bold">... Loading ...</div>
</div>
</div>
</div>
<script src="_framework/blazor.webassembly.js"></script>
<script>
let lastVisibleTime = Date.now();
document.addEventListener("visibilitychange", function () {
if (document.hidden) {
lastVisibleTime = Date.now();
} else {
if (Date.now() - lastVisibleTime > 180000) {
location.reload();
}
<script src="_framework/blazor.webassembly.js"></script>
<script>
let lastVisibleTime = Date.now();
document.addEventListener("visibilitychange", function () {
if (document.hidden) {
lastVisibleTime = Date.now();
} else {
if (Date.now() - lastVisibleTime > 180000) {
location.reload();
}
});
</script>
<script>
if ('serviceWorker' in navigator) {
window.addEventListener('load', function () {
navigator.serviceWorker.register('service-worker.js');
});
}
</script>
});
</script>
<script>
if ('serviceWorker' in navigator) {
window.addEventListener('load', function () {
navigator.serviceWorker.register('service-worker.js');
});
}
</script>
</body>
</html>

3
src/changelog.md
View File

@ -1,3 +1,4 @@
## changelog
- fix charge mode display when not charging
- change to a dark theme
- fix ui bugs