Show target temp on temp bars

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,

main/http_server/axe-os/src/app/components/edit/edit.component.html

@@ -63,7 +63,7 @@
             <label class="hidden md:flex w-full md:w-2/12 font-medium">Target Temperature</label>
             <div class="w-full md:w-10/12">
                 <label class="block mb-1">
-                    <span class="md:hidden mr-1">Target Temperature:</span>{{form.controls['temptarget'].value}} °C
+                    <span class="md:hidden mr-1">Target Temperature:</span>{{form.controls['temptarget'].value}} &deg;C
                 </label>
                 <app-slider [min]="35" [max]="66" formControlName="temptarget"></app-slider>
             </div>

main/http_server/axe-os/src/app/components/home/home.component.html

@@ -238,32 +238,17 @@ <h4 class="text-center font-medium">Power</h4>
                         <h6 class="flex justify-between mb-1">
                             Power<span>{{info.power}} W</span>
                         </h6>
-                        @let powerProgress = ((info.power / info.maxPower) * 100);
-                        <div class="w-full bg-progressbar rounded-sm overflow-hidden h-[6px]">
-                            <div class="bg-progressbar-value h-full transition-all duration-300" [style.width.%]="powerProgress"></div>
-                        </div>
+                        <app-progressbar [value]="(info.power / info.maxPower) * 100"></app-progressbar>
                     </div>
 
                     <div class="mb-4">
                         <h6 class="flex justify-between mb-1">
                             Input Voltage<span>{{info.voltage}} V</span>
                         </h6>
-                        <div class="relative">
-                            @let voltageProgress = ((info.voltage / (info.nominalVoltage + .5)) * 100);
-                            <div class="w-full bg-progressbar rounded-sm overflow-hidden h-[6px]">
-                                <div class="bg-progressbar-value h-full transition-all duration-300" [style.width.%]="voltageProgress"></div>
-                            </div>
-
-                            <!-- Conditional marker based on nominal voltage-->
-                            <div class="absolute bg-white h-full top-0"
-                                [style.left]="(info.nominalVoltage / (info.nominalVoltage + .5)) * 100 + '%'"
-                                style="width: 3px;">
-                                <small class="absolute text-white whitespace-nowrap text-xs"
-                                    style="bottom: -1rem; transform: translateX(-50%)">
-                                    {{info.nominalVoltage}} V
-                                </small>
-                            </div>
-                        </div>
+                        <app-progressbar
+                            [value]="(info.voltage / (info.nominalVoltage + .5)) * 100"
+                            [markers]="[{ value: (info.nominalVoltage / (info.nominalVoltage + .5)) * 100, label: info.nominalVoltage + ' V' }]">
+                        </app-progressbar>
                         <strong class="text-red-500" *ngIf="info.voltage < (info.nominalVoltage + .5) * 0.87">
                             Danger: Low Voltage
                         </strong>
@@ -273,20 +258,14 @@ <h6 class="flex justify-between mb-1">
                         <h6 class="flex justify-between mb-1">
                             ASIC Frequency<span>{{info.actualFrequency | number: '1.0-4'}} MHz</span>
                         </h6>
-                        @let freqProgress = ((info.actualFrequency / maxFrequency) * 100);
-                        <div class="w-full bg-progressbar rounded-sm overflow-hidden h-[6px]">
-                            <div class="bg-progressbar-value h-full transition-all duration-300" [style.width.%]="freqProgress"></div>
-                        </div>
+                        <app-progressbar [value]="(info.actualFrequency / maxFrequency) * 100"></app-progressbar>
                     </div>
 
                     <div>
                         <h6 class="flex justify-between mb-1">
                             Measured ASIC Voltage<span>{{info.coreVoltageActual}} V</span>
                         </h6>
-                        @let coreVoltProgress = ((info.coreVoltageActual / 1.8) * 100);
-                        <div class="w-full bg-progressbar rounded-sm overflow-hidden h-[6px]">
-                            <div class="bg-progressbar-value h-full transition-all duration-300" [style.width.%]="coreVoltProgress"></div>
-                        </div>
+                        <app-progressbar [value]="(info.coreVoltageActual / 1.8) * 100"></app-progressbar>
                     </div>
                 </div>
             </div>
@@ -312,10 +291,10 @@ <h6 class="flex justify-between mb-1">
                                 </ng-container>
                             </span>
                         </h6>
-                        @let tempProgress = ((info.temp / maxTemp) * 100);
-                        <div class="w-full bg-progressbar rounded-sm overflow-hidden h-[6px]">
-                            <div class="bg-progressbar-value h-full transition-all duration-300" [style.width.%]="tempProgress"></div>
-                        </div>
+                        <app-progressbar
+                            [value]="(info.temp / maxTemp) * 100"
+                            [markers]="[{ value: (info.temptarget / maxTemp) * 100, label: info.temptarget + ' &deg;C', visible: info.autofanspeed === 1 && 0 >= info.temp2 }]">
+                        </app-progressbar>
 
                         <strong class="text-red-500" *ngIf="info.temp >= 70">
                             Danger: High Temperature
@@ -329,10 +308,10 @@ <h6 class="flex justify-between mb-1">
                                 {{info.temp2}} &deg;C
                             </span>
                         </h6>
-                        @let temp2Progress = ((info.temp2 / maxTemp) * 100);
-                        <div class="w-full bg-progressbar rounded-sm overflow-hidden h-[6px]">
-                            <div class="bg-progressbar-value h-full transition-all duration-300" [style.width.%]="temp2Progress"></div>
-                        </div>
+                        <app-progressbar
+                            [value]="(info.temp2 / maxTemp) * 100"
+                            [markers]="[{ value: (info.temptarget / maxTemp) * 100, label: info.temptarget + ' &deg;C', visible: info.autofanspeed === 1 }]">
+                        </app-progressbar>
 
                         <strong class="text-red-500" *ngIf="info.temp2 >= 70">
                             Danger: High Temperature
@@ -343,10 +322,7 @@ <h6 class="flex justify-between mb-1">
                         <h6 class="flex justify-between mb-1">
                             Voltage Regulator Temperature<span>{{info.vrTemp}} &deg;C</span>
                         </h6>
-                        @let vrTempProgress = ((info.vrTemp / 120) * 100);
-                        <div class="w-full bg-progressbar rounded-sm overflow-hidden h-[6px]">
-                            <div class="bg-progressbar-value h-full transition-all duration-300" [style.width.%]="vrTempProgress"></div>
-                        </div>
+                        <app-progressbar [value]="(info.vrTemp / 120) * 100"></app-progressbar>
 
                         <strong class="text-red-500" *ngIf="info.vrTemp >= 105">
                             Danger: High Temperature
@@ -375,10 +351,7 @@ <h4 class="text-center font-medium">Fan</h4>
 
                             <span>{{info.fanspeed.toFixed(1)}} %</span>
                         </h6>
-                        @let fanProgress = info.fanspeed;
-                        <div class="w-full bg-progressbar rounded-sm overflow-hidden h-[6px]">
-                            <div class="bg-progressbar-value h-full transition-all duration-300" [style.width.%]="fanProgress"></div>
-                        </div>
+                        <app-progressbar [value]="info.fanspeed"></app-progressbar>
                     </div>
                 </div>
             </div>

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,

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;

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;
+  }
+}

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: `
+    <div class="relative w-full">
+      <!-- Progress Bar Track -->
+      <div class="w-full bg-progressbar rounded-sm overflow-hidden" [ngClass]="heightClass">
+        <div class="bg-progressbar-value h-full transition-all duration-300" [style.width.%]="value"></div>
+      </div>
+
+      <!-- Optional Markers -->
+      @for (marker of markers; track $index) {
+        @if (marker.visible !== false) {
+          <div class="progressbar-marker" [style.left]="'round(' + marker.value + '%, 1px)'">
+            <small class="progressbar-marker-label">
+              {{ marker.label }}
+            </small>
+          </div>
+        }
+      }
+    </div>
+  `,
+  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)
+}

main/http_server/axe-os/src/app/components/update/update.component.html

@@ -112,9 +112,7 @@ <h5 class="mt-0 mb-3 text-main">Upload Custom UI</h5>
             </div>
 
             @let progressVal = (updateTarget === 'AxeOS' ? websiteUpdateProgress : firmwareUpdateProgress);
-            <div class="w-full bg-progressbar rounded-sm overflow-hidden h-6">
-                <div class="bg-progressbar-value h-full transition-all duration-300" [style.width.%]="progressVal"></div>
-            </div>
+            <app-progressbar [value]="progressVal ?? 0" heightClass="h-6"></app-progressbar>
 
             <div class="text-center mt-3 text-secondary">
                 Please do not disconnect the power.

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);

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;
 }