diff --git a/main/http_server/axe-os/src/app/app.module.ts b/main/http_server/axe-os/src/app/app.module.ts index 3af375472..11513ccd1 100644 --- a/main/http_server/axe-os/src/app/app.module.ts +++ b/main/http_server/axe-os/src/app/app.module.ts @@ -13,6 +13,7 @@ import { RadioButtonComponent } from './components/radio-button/radio-button.com import { SliderComponent } from './components/slider/slider.component'; import { AppChartComponent } from './components/chart/app-chart.component'; import { DropdownComponent } from './components/dropdown/dropdown.component'; +import { ProgressbarComponent } from './components/progressbar/progressbar.component'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; @@ -90,6 +91,7 @@ const components = [ AppChartComponent, EditComponent, SettingsComponent, + ProgressbarComponent, ANSIPipe, DateAgoPipe, HashSuffixPipe, diff --git a/main/http_server/axe-os/src/app/components/edit/edit.component.html b/main/http_server/axe-os/src/app/components/edit/edit.component.html index cdc5d9dd3..4238ef66c 100644 --- a/main/http_server/axe-os/src/app/components/edit/edit.component.html +++ b/main/http_server/axe-os/src/app/components/edit/edit.component.html @@ -63,7 +63,7 @@
diff --git a/main/http_server/axe-os/src/app/components/home/home.component.html b/main/http_server/axe-os/src/app/components/home/home.component.html index 7961bb227..1bbdefb85 100644 --- a/main/http_server/axe-os/src/app/components/home/home.component.html +++ b/main/http_server/axe-os/src/app/components/home/home.component.html @@ -238,32 +238,17 @@

Power

Power{{info.power}} W
- @let powerProgress = ((info.power / info.maxPower) * 100); -
-
-
+
Input Voltage{{info.voltage}} V
-
- @let voltageProgress = ((info.voltage / (info.nominalVoltage + .5)) * 100); -
-
-
- - -
- - {{info.nominalVoltage}} V - -
-
+ + Danger: Low Voltage @@ -273,20 +258,14 @@
ASIC Frequency{{info.actualFrequency | number: '1.0-4'}} MHz
- @let freqProgress = ((info.actualFrequency / maxFrequency) * 100); -
-
-
+
Measured ASIC Voltage{{info.coreVoltageActual}} V
- @let coreVoltProgress = ((info.coreVoltageActual / 1.8) * 100); -
-
-
+
@@ -312,10 +291,10 @@
- @let tempProgress = ((info.temp / maxTemp) * 100); -
-
-
+ + Danger: High Temperature @@ -329,10 +308,10 @@
{{info.temp2}} °C
- @let temp2Progress = ((info.temp2 / maxTemp) * 100); -
-
-
+ + Danger: High Temperature @@ -343,10 +322,7 @@
Voltage Regulator Temperature{{info.vrTemp}} °C
- @let vrTempProgress = ((info.vrTemp / 120) * 100); -
-
-
+ Danger: High Temperature @@ -375,10 +351,7 @@

Fan

{{info.fanspeed.toFixed(1)}} % - @let fanProgress = info.fanspeed; -
-
-
+ diff --git a/main/http_server/axe-os/src/app/components/home/home.component.spec.ts b/main/http_server/axe-os/src/app/components/home/home.component.spec.ts index 4335899bf..af44b5f6c 100644 --- a/main/http_server/axe-os/src/app/components/home/home.component.spec.ts +++ b/main/http_server/axe-os/src/app/components/home/home.component.spec.ts @@ -10,6 +10,7 @@ import { provideRouter } from '@angular/router'; import { AppChartComponent } from 'src/app/components/chart/app-chart.component'; import { TooltipDirective } from 'src/app/directives/tooltip.directive'; import { DropdownComponent } from 'src/app/components/dropdown/dropdown.component'; +import { ProgressbarComponent } from 'src/app/components/progressbar/progressbar.component'; import { BehaviorSubject, of } from 'rxjs'; import { HashSuffixPipe } from 'src/app/pipes/hash-suffix.pipe'; @@ -160,6 +161,7 @@ describe('HomeComponent', () => { NoopAnimationsModule, AppChartComponent, DropdownComponent, + ProgressbarComponent, TooltipDirective, HashSuffixPipe, DiffSuffixPipe, diff --git a/main/http_server/axe-os/src/app/components/home/home.component.ts b/main/http_server/axe-os/src/app/components/home/home.component.ts index d7c34d185..ec6736d23 100644 --- a/main/http_server/axe-os/src/app/components/home/home.component.ts +++ b/main/http_server/axe-os/src/app/components/home/home.component.ts @@ -859,7 +859,7 @@ export class HomeComponent implements OnInit, OnDestroy { this.maxPower = Math.max(info.maxPower || 0, info.power || 0); this.nominalVoltage = info.nominalVoltage || 5; - this.maxTemp = Math.max(75, info.temp || 0); + this.maxTemp = Math.max(75, info.temp || 0, info.temp2 || 0, info.temptarget || 0); this.maxRpm = Math.max(7000, info.fanrpm || 0, info.fan2rpm || 0); this.maxFrequency = Math.max(800, info.actualFrequency || info.frequency || 0); this.statsLimit = info.statsLimit || 720; diff --git a/main/http_server/axe-os/src/app/components/progressbar/progressbar.component.scss b/main/http_server/axe-os/src/app/components/progressbar/progressbar.component.scss new file mode 100644 index 000000000..a75e70877 --- /dev/null +++ b/main/http_server/axe-os/src/app/components/progressbar/progressbar.component.scss @@ -0,0 +1,25 @@ +:host { + display: block; + width: 100%; +} + +.progressbar-marker { + position: absolute; + width: 1px; + height: 10px; + top: -2px; + background-color: #ffffff; + box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.85); + z-index: 2; + + &-label { + position: absolute; + bottom: -0.9rem; + left: 50%; + transform: translateX(-50%); + color: var(--text-color-secondary); + white-space: nowrap; + font-size: 0.7rem; + font-weight: 500; + } +} diff --git a/main/http_server/axe-os/src/app/components/progressbar/progressbar.component.ts b/main/http_server/axe-os/src/app/components/progressbar/progressbar.component.ts new file mode 100644 index 000000000..ae5ae8dae --- /dev/null +++ b/main/http_server/axe-os/src/app/components/progressbar/progressbar.component.ts @@ -0,0 +1,39 @@ +import { Component, Input } from '@angular/core'; +import { CommonModule } from '@angular/common'; + +export interface ProgressBarMarker { + value: number; // Percentage (0 to 100) + label: string; // Text label for the marker + visible?: boolean; // Optional visibility condition +} + +@Component({ + selector: 'app-progressbar', + standalone: true, + imports: [CommonModule], + template: ` +
+ +
+
+
+ + + @for (marker of markers; track $index) { + @if (marker.visible !== false) { +
+ + {{ marker.label }} + +
+ } + } +
+ `, + styleUrl: './progressbar.component.scss' +}) +export class ProgressbarComponent { + @Input() value: number = 0; // Current progress value (0 to 100) + @Input() markers: ProgressBarMarker[] = []; // Optional marker lines + @Input() heightClass: string = 'h-[6px]'; // Custom height class (e.g. h-6 for updates) +} diff --git a/main/http_server/axe-os/src/app/components/update/update.component.html b/main/http_server/axe-os/src/app/components/update/update.component.html index 879b5825a..515082602 100644 --- a/main/http_server/axe-os/src/app/components/update/update.component.html +++ b/main/http_server/axe-os/src/app/components/update/update.component.html @@ -112,9 +112,7 @@
Upload Custom UI
@let progressVal = (updateTarget === 'AxeOS' ? websiteUpdateProgress : firmwareUpdateProgress); -
-
-
+
Please do not disconnect the power. diff --git a/main/http_server/axe-os/src/app/components/update/update.component.spec.ts b/main/http_server/axe-os/src/app/components/update/update.component.spec.ts index 286123fcd..a5beca513 100644 --- a/main/http_server/axe-os/src/app/components/update/update.component.spec.ts +++ b/main/http_server/axe-os/src/app/components/update/update.component.spec.ts @@ -4,6 +4,7 @@ import { UpdateComponent } from './update.component'; import { ModalComponent } from '../modal/modal.component'; import { CheckboxComponent } from '../checkbox/checkbox.component'; import { FormsModule } from '@angular/forms'; +import { ProgressbarComponent } from '../progressbar/progressbar.component'; import { provideHttpClient, HttpErrorResponse } from '@angular/common/http'; import { provideToastr } from 'ngx-toastr'; import { getHttpErrorMessage } from 'src/app/utils/error-handler'; @@ -15,7 +16,7 @@ describe('UpdateComponent', () => { beforeEach(() => { TestBed.configureTestingModule({ declarations: [UpdateComponent, ModalComponent], - imports: [CheckboxComponent, FormsModule], + imports: [CheckboxComponent, ProgressbarComponent, FormsModule], providers: [provideHttpClient(), provideToastr()] }); fixture = TestBed.createComponent(UpdateComponent); diff --git a/main/http_server/axe-os/src/app/layout/styles/layout/_axe-os.scss b/main/http_server/axe-os/src/app/layout/styles/layout/_axe-os.scss index b00d131f3..b259b40ee 100644 --- a/main/http_server/axe-os/src/app/layout/styles/layout/_axe-os.scss +++ b/main/http_server/axe-os/src/app/layout/styles/layout/_axe-os.scss @@ -1,3 +1,12 @@ +:root { + --text-color: var(--color-text-main); + --text-color-secondary: var(--color-text-secondary); + --font-family: 'Nippo-Regular'; + --border-radius: 2px; + + --color-surface-border: var(--color-border-content); +} + h1, h2, h3, h4, h5, h6 { color: var(--color-text-main) !important; }