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 JK BMS
</h5> </h5>
<div class="card-body p-0"> <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="row text-center m-0 p-0">
<div class="col"> <div class="col">
<div class="fw-bold fs-1 mt-2 text-primary"> <div class="fw-bold fs-1 mt-2 text-primary">
@ -26,7 +26,7 @@
<div class="fs-1 my-1 mx-5 border-top"> <div class="fs-1 my-1 mx-5 border-top">
@status.CapacityPct% @status.CapacityPct%
</div> </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()) @(GetPackCapacity())
</div> </div>
</div> </div>
@ -62,7 +62,7 @@
</div> </div>
</div> </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="col">
<div class="fw-normal"> <div class="fw-normal">
Mosfet Mosfet
@ -90,7 +90,7 @@
<div class="fw-bold"> <div class="fw-bold">
@($"{status.MinCell.Value:0.000} V") @($"{status.MinCell.Value:0.000} V")
</div> </div>
<div class="border-top pt-1"> <div class="pt-1">
Max Cell: <span>@status.MaxCell.Key</span> Max Cell: <span>@status.MaxCell.Key</span>
</div> </div>
<div class="fw-bold"> <div class="fw-bold">
@ -104,7 +104,7 @@
<div class="fw-bold"> <div class="fw-bold">
@($"{status.CellDiff:0.000} V") @($"{status.CellDiff:0.000} V")
</div> </div>
<div class="pt-1 border-top"> <div class="pt-1">
Cell Average: Cell Average:
</div> </div>
<div class="fw-bold"> <div class="fw-bold">

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

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

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

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

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

@ -1,7 +1,7 @@
@if (Enabled) @if (Enabled)
{ {
<div class="container w-100 text-center"> <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> <span class="spinner-border"></span>
<div class="fw-bold">... Loading ...</div> <div class="fw-bold">... Loading ...</div>
</div> </div>
@ -9,5 +9,8 @@
} }
@code{ @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 { .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 { .top-row {

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

@ -2,6 +2,8 @@
html, body { html, body {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
background-color: #191919;;
color: #dddddd;
} }
h1:focus { h1:focus {
@ -92,8 +94,13 @@ a, .btn-link {
height: 0.75rem; height: 0.75rem;
} }
.card {
background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #160a19 70%) !important;
}
.card-header { .card-header {
padding: 0.2rem; padding: 0.2rem;
background-color: rgb(9 50 89);
} }
.card-body { .card-body {
@ -125,3 +132,49 @@ a, .btn-link {
opacity: 0; 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;
}

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

@ -20,7 +20,7 @@
<body> <body>
<div id="app"> <div id="app">
<div class="container w-100 text-center"> <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> <span class="spinner-border"></span>
<div class="fw-bold">... Loading ...</div> <div class="fw-bold">... Loading ...</div>
</div> </div>

3
src/changelog.md
View File

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