= 70">
Danger: High Temperature
@@ -343,10 +322,7 @@
Voltage Regulator Temperature{{info.vrTemp}} °C
- @let vrTempProgress = ((info.vrTemp / 120) * 100);
-
+
= 105">
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;
}