Merge pull request #359 from mrv777/master

fix: Add overheat alert, knob colors & max, chart dots & label #342

main/http_server/axe-os/src/app/app.module.ts

@@ -21,8 +21,7 @@ import { ANSIPipe } from './pipes/ansi.pipe';
 import { DateAgoPipe } from './pipes/date-ago.pipe';
 import { HashSuffixPipe } from './pipes/hash-suffix.pipe';
 import { PrimeNGModule } from './prime-ng.module';
-
+import { MessageModule } from 'primeng/message';
-
 
 const components = [
   AppComponent,
@@ -55,7 +54,8 @@ const components = [
     BrowserAnimationsModule,
     CommonModule,
     PrimeNGModule,
-    AppLayoutModule
+    AppLayoutModule,
+    MessageModule
   ],
   providers: [
     { provide: LocationStrategy, useClass: HashLocationStrategy },

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

@@ -157,28 +157,20 @@
             </div>
         </div>
 
-        <div class="col-12 md:col-4">
+        <div class="col-12">
             <div class="field-checkbox">
                 <p-checkbox name="invertfanpolarity" formControlName="invertfanpolarity" inputId="invertfanpolarity"
                     [binary]="true"></p-checkbox>
                 <label for="invertfanpolarity">Invert Fan Polarity</label>
             </div>
         </div>
-        <div class="col-12 md:col-4">
+        <div class="col-12">
             <div class="field-checkbox">
                 <p-checkbox name="autofanspeed" formControlName="autofanspeed" inputId="autofanspeed"
                     [binary]="true"></p-checkbox>
                 <label for="autofanspeed">Automatic Fan Control</label>
             </div>
         </div>
-        
-        <div class="col-12 md:col-4" *ngIf="form.get('overheat_mode')?.value === 1">
-            <div class="field-checkbox">
-                <p-checkbox name="overheat_mode" formControlName="overheat_mode" inputId="overheat_mode"
-                    [binary]="true"></p-checkbox>
-                <label for="overheat_mode">Disable Overheat Mode. Make sure to reset Frequency and Voltage</label>
-            </div>
-        </div>
 
         <div *ngIf="form.controls['autofanspeed'].value != true">
             <div class="col-12" *ngIf="form.controls['autofanspeed'].value != true">
@@ -190,6 +182,15 @@
                 <p-slider formControlName="fanspeed"></p-slider>
             </div>
         </div>
+
+        <div class="col-12" *ngIf="form.get('overheat_mode')?.value === 1">
+            <div class="field-checkbox">
+                <p-checkbox name="overheat_mode" formControlName="overheat_mode" inputId="overheat_mode"
+                    [binary]="true"></p-checkbox>
+                <label for="overheat_mode" style="color: #ff0000;">Disable Overheat Mode. Make sure to reset Frequency and Voltage</label>
+            </div>
+        </div>
+
         <div class="mt-2">
             <button pButton [disabled]="form.invalid" (click)="updateSystem()"
                 class="btn btn-primary mr-2">Save</button>

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

@@ -1,13 +1,19 @@
 <ng-template #loading>
     <h4>Loading...</h4>
 </ng-template>
-<ng-container>
+<ng-container *ngIf="info$ | async as info; else loading">
+    <!-- Temp warning alert -->
+    <p-message *ngIf="info.overheat_mode" 
+        severity="error" 
+        styleClass="w-full mb-4 py-4 border-round-xl"
+        text="Bitaxe has overheated - See settings">
+    </p-message>
 
     <div class="grid" *ngIf="info$ | async as info; else loading">
         <div class="col-12">
             <div class="card">
                 <div class="grid mb-4">
-                    <div class="col-12 lg:col-6 xl:col-3">
+                    <div class="col-12 md:col-6 xl:col-3">
                         <div class="card mb-0">
                             <div class="flex justify-content-between mb-3">
                                 <div>
@@ -28,7 +34,7 @@
                             </ng-container>
                         </div>
                     </div>
-                    <div class="col-12 lg:col-6 xl:col-3">
+                    <div class="col-12 md:col-6 xl:col-3">
                         <div class="card mb-0">
                             <div class="flex justify-content-between mb-3">
                                 <div>
@@ -44,7 +50,7 @@
                             <span class="text-500">rejected</span>
                         </div>
                     </div>
-                    <div class="col-12 lg:col-6 xl:col-3">
+                    <div class="col-12 md:col-6 xl:col-3">
                         <div class="card mb-0">
                             <div class="flex justify-content-between mb-3">
                                 <div>
@@ -63,7 +69,7 @@
                             <span class="text-500">since last week</span> -->
                         </div>
                     </div>
-                    <div class="col-12 lg:col-6 xl:col-3">
+                    <div class="col-12 md:col-6 xl:col-3">
                         <div class="card mb-0">
                             <div class="flex justify-content-between mb-3">
                                 <div>
@@ -95,14 +101,15 @@
                 <h5>Power</h5>
                 <div class="grid text-center">
                     <div class="col-4">
-                        <p-knob [min]="3" [max]="50" [readonly]="true" [(ngModel)]="info.power"
+                        <p-knob [min]="3" [max]="maxPower" [readonly]="true" [(ngModel)]="info.power"
                             valueTemplate="{value}W"></p-knob>
                         Power
                     </div>
 
                     <div class="col-4">
                         <p-knob [min]="4.5" [max]="5.5" [readonly]="true" [(ngModel)]="info.voltage"
-                            valueTemplate="{value}V"></p-knob>
+                            valueTemplate="{value}V"
+                            [valueColor]="info.voltage < 4.8 ? '#ff0000' : 'var(--primary-color, Black)'"></p-knob>
                         Input Voltage
                         <span class="danger" *ngIf="info.voltage < 4.8">&nbsp; Danger: Low voltage</span>
                     </div>
@@ -122,8 +129,10 @@
                 <h5>Heat</h5>
                 <div class="grid text-center">
                     <div class="col-6">
-                        <p-knob [min]="20" [max]="75" [readonly]="true" [(ngModel)]="info.temp"
+                        <p-knob [min]="20" [max]="maxTemp" [readonly]="true" [(ngModel)]="info.temp"
-                            valueTemplate="{value}C"></p-knob>
+                            valueTemplate="{value}C"
+                            [valueColor]="info.temp >= 70 ? '#ff0000' : 'var(--primary-color, Black)'">
+                        </p-knob>
                         ASIC Temperature
 
                         <span class="danger" *ngIf="info.temp >= 70">&nbsp;
@@ -132,7 +141,8 @@
                     </div>
                     <div class="col-6" *ngIf="info.vrTemp > 0">
                         <p-knob  [min]="20" [max]="145" [readonly]="true" [(ngModel)]="info.vrTemp"
-                            valueTemplate="{value}C"></p-knob>
+                            valueTemplate="{value}C"
+                            [valueColor]="info.vrTemp >= 105 ? '#ff0000' : 'var(--primary-color, Black)'"></p-knob>
                         Voltage Regulator Temperature
 
                         <span class="danger" *ngIf="info.vrTemp >= 105">&nbsp;
@@ -172,7 +182,7 @@
                 <h5>Performance</h5>
                 <div class="grid text-center">
                     <div class="col-6">
-                        <p-knob [min]="100" [max]="800" [readonly]="true" [(ngModel)]="info.frequency"
+                        <p-knob [min]="100" [max]="maxFrequency" [readonly]="true" [(ngModel)]="info.frequency"
                             valueTemplate="{value}Mhz"></p-knob>
                         ASIC Frequency
                     </div>

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

@@ -12,7 +12,6 @@ import { ISystemInfo } from 'src/models/ISystemInfo';
 })
 export class HomeComponent {
 
-
   public info$: Observable<ISystemInfo>;
 
   public quickLink$: Observable<string | undefined>;
@@ -24,11 +23,14 @@ export class HomeComponent {
   public dataData: number[] = [];
   public chartData?: any;
 
+  public maxPower: number = 50;
+  public maxTemp: number = 75;
+  public maxFrequency: number = 800;
+
   constructor(
     private systemService: SystemService
   ) {
 
-
     const documentStyle = getComputedStyle(document.documentElement);
     const textColor = documentStyle.getPropertyValue('--text-color');
     const textColorSecondary = documentStyle.getPropertyValue('--text-color-secondary');
@@ -45,8 +47,9 @@ export class HomeComponent {
           fill: false,
           backgroundColor: primaryColor,
           borderColor: primaryColor,
-          tension: .4,
+          tension: 0,
-          pointRadius: 1,
+          pointRadius: 2,
+          pointHoverRadius: 5,
           borderWidth: 1
         },
 
@@ -61,7 +64,19 @@ export class HomeComponent {
           labels: {
             color: textColor
           }
-        }
+        },
+        tooltip: {
+          callbacks: {
+            label: function(tooltipItem: any) {
+              let label = tooltipItem.dataset.label || '';
+              if (label) {
+                label += ': ';
+              }
+              label += HashSuffixPipe.transform(tooltipItem.raw);
+              return label;
+            }
+          }
+        },
       },
       scales: {
         x: {
@@ -110,12 +125,14 @@ export class HomeComponent {
         this.chartData.labels = this.dataLabel;
         this.chartData.datasets[0].data = this.dataData;
 
-
-
         this.chartData = {
           ...this.chartData
         };
 
+        this.maxPower = Math.max(50, info.power);
+        this.maxTemp = Math.max(75, info.temp);
+        this.maxFrequency = Math.max(800, info.frequency);
+
       }),
       map(info => {
         info.power = parseFloat(info.power.toFixed(1))
@@ -156,12 +173,7 @@ export class HomeComponent {
       })
     )
 
-
-
   }
 
-
-
-
 }
 

main/http_server/axe-os/src/app/pipes/hash-suffix.pipe.ts

@@ -26,6 +26,10 @@ export class HashSuffixPipe implements PipeTransform {
     const scaledValue = value / Math.pow(1000, power);
     const suffix = suffixes[power];
 
+    if (scaledValue < 10) {
+      return scaledValue.toFixed(2) + suffix;
+    }
+
     return scaledValue.toFixed(1) + suffix;
   }