move weekdayand progressbar render logik to DrawHelper

Author: coding-lemur

src/apps/city-weather/index.ts

@@ -3,7 +3,7 @@ import dayjs from 'dayjs';
 import { App } from '../app';
 import { LastUpdated } from '../../models';
 import { SmartDisplayController } from '../../smart-display-controller';
-import { StringHelper } from '../../helper';
+import { StringHelper, DrawHelper } from '../../helper';
 import { OpenWeatherMapService } from './services';
 import { CityWeatherData, CityWeatherSetting } from './models';
 
@@ -46,29 +46,37 @@ export class CityWeatherApp implements App {
         // refresh weather data
         this._service
             .loadData()
-            .then(data => {
+            .then((data) => {
                 console.log('city weather', data);
                 this._data.value = data;
             })
-            .catch(error =>
+            .catch((error) =>
                 console.error("can't load openweathermap data", error)
             );
     }
 
     render(): void {
+        this.renderTemperature();
+
+        DrawHelper.renderPixelProgress(
+            this.controller,
+            this.calcCacheMinutesAge(),
+            CityWeatherApp.MaxCacheMinutesAge
+        );
+
+        this._wasRendered = true;
+    }
+
+    private renderTemperature(): void {
         const temperature = StringHelper.roundToFixed(
             this._data?.value?.temperature
         );
 
         this.controller.drawText({
             hexColor: '#4CFF00',
             text: `${temperature}°`,
-            position: { x: 7, y: 1 }
+            position: { x: 7, y: 1 },
         });
-
-        this.showCacheAgeProgressbar();
-
-        this._wasRendered = true;
     }
 
     private calcCacheMinutesAge(): number | null {
@@ -81,21 +89,4 @@ export class CityWeatherApp implements App {
 
         return diffMinutes;
     }
-
-    private showCacheAgeProgressbar(): void {
-        const cacheMinutesAge = this.calcCacheMinutesAge();
-
-        if (cacheMinutesAge == null) {
-            return;
-        }
-
-        const cacheAgePercent =
-            cacheMinutesAge / CityWeatherApp.MaxCacheMinutesAge;
-        const xPosition = 2 + Math.round(26 * cacheAgePercent);
-
-        this.controller.drawPixel(
-            { x: xPosition, y: 7 },
-            '#A0A0A0'
-        );
-    }
 }

src/apps/date/index.ts

@@ -1,8 +1,8 @@
 import dayjs from 'dayjs';
 
 import { App } from '../app';
-import { TimeApp } from '../time';
 import { SmartDisplayController } from '../../smart-display-controller';
+import { DrawHelper } from '../../helper';
 
 export class DateApp implements App {
     private _wasRendered = false;
@@ -24,7 +24,7 @@ export class DateApp implements App {
     render(): void {
         this.renderDate();
 
-        TimeApp.renderWeekday(this.controller);
+        DrawHelper.renderWeekday(this.controller);
 
         this._wasRendered = true;
     }

src/apps/room-weather/index.ts

@@ -1,7 +1,7 @@
 import { App } from '../app';
 import { RoomWeather } from '../../models';
 import { SmartDisplayController } from '../../smart-display-controller';
-import { StringHelper } from '../../helper';
+import { StringHelper, DrawHelper } from '../../helper';
 
 export class RoomWeatherApp implements App {
     private _wasRendered = false;
@@ -27,35 +27,26 @@ export class RoomWeatherApp implements App {
     }
 
     render(): void {
+        this.renderTemperature();
+
+        DrawHelper.renderProgressbar(
+            this.controller,
+            this._roomWeather?.humidity,
+            100
+        );
+
+        this._wasRendered = true;
+    }
+
+    private renderTemperature(): void {
         const temperature = StringHelper.roundToFixed(
             this._roomWeather?.temperature
         );
 
         this.controller.drawText({
             hexColor: '#00C8C8',
             text: `${temperature}°`,
-            position: { x: 7, y: 1 }
+            position: { x: 7, y: 1 },
         });
-
-        this.showHumidityProgressbar();
-
-        this._wasRendered = true;
-    }
-
-    private showHumidityProgressbar(): void {
-        const humidity = this._roomWeather?.humidity;
-
-        if (humidity == null) {
-            return;
-        }
-
-        const percentValue = humidity / 100;
-        const xEndPosition = 2 + Math.round(26 * percentValue);
-
-        this.controller.drawLine(
-            { x: 2, y: 7 },
-            { x: xEndPosition, y: 7 },
-            '#A0A0A0'
-        );
     }
 }

src/apps/time/index.ts

@@ -2,6 +2,7 @@ import dayjs from 'dayjs';
 
 import { App } from '../app';
 import { SmartDisplayController } from '../../smart-display-controller';
+import { DrawHelper } from '../../helper';
 
 export class TimeApp implements App {
     private showColon = true;
@@ -17,7 +18,7 @@ export class TimeApp implements App {
     render(): void {
         this.renderTime();
 
-        TimeApp.renderWeekday(this.controller);
+        DrawHelper.renderWeekday(this.controller);
 
         // toggle colon
         this.showColon = !this.showColon;
@@ -33,20 +34,4 @@ export class TimeApp implements App {
             position: { x: 7, y: 1 },
         });
     }
-
-    static renderWeekday(controller: SmartDisplayController): void {
-        const currentWeekday = dayjs().weekday();
-        const getXPositionByWeekDay = (weekday: number) => weekday * 4 + 2;
-
-        for (let weekday = 0; weekday < 7; weekday++) {
-            const xPosition = getXPositionByWeekDay(weekday);
-            const color = weekday === currentWeekday ? '#00C8C8' : '#A0A0A0';
-
-            controller.drawLine(
-                { x: xPosition, y: 7 },
-                { x: xPosition + 2, y: 7 },
-                color
-            );
-        }
-    }
 }

src/helper/draw-helper.ts

@@ -0,0 +1,69 @@
+import dayjs from 'dayjs';
+
+import { SmartDisplayController } from '../smart-display-controller';
+
+export class DrawHelper {
+    static renderWeekday(controller: SmartDisplayController): void {
+        const currentWeekday = dayjs().weekday();
+        const getXPositionByWeekDay = (weekday: number) => weekday * 4 + 2;
+
+        for (let weekday = 0; weekday < 7; weekday++) {
+            const xPosition = getXPositionByWeekDay(weekday);
+            const color = weekday === currentWeekday ? '#00C8C8' : '#A0A0A0';
+
+            controller.drawLine(
+                { x: xPosition, y: 7 },
+                { x: xPosition + 2, y: 7 },
+                color
+            );
+        }
+    }
+
+    static renderProgressbar(
+        controller: SmartDisplayController,
+        value: number | null | undefined,
+        maxValue: number,
+        hexColor = '#A0A0A0'
+    ): void {
+        const xEndPosition = this.calcProgressXPosition(value, maxValue);
+
+        if (xEndPosition == null) {
+            return;
+        }
+
+        controller.drawLine(
+            { x: 2, y: 7 },
+            { x: xEndPosition, y: 7 },
+            hexColor
+        );
+    }
+
+    static renderPixelProgress(
+        controller: SmartDisplayController,
+        value: number | null,
+        maxValue: number,
+        hexColor: string = '#A0A0A0'
+    ): void {
+        const xPosition = this.calcProgressXPosition(value, maxValue);
+
+        if (xPosition == null) {
+            return;
+        }
+
+        controller.drawPixel({ x: xPosition, y: 7 }, hexColor);
+    }
+
+    private static calcProgressXPosition(
+        value: number | null | undefined,
+        maxValue: number
+    ): number | undefined {
+        if (value == null) {
+            return;
+        }
+
+        const percentValue = value / maxValue;
+        const xPosition = 2 + Math.round(26 * percentValue);
+
+        return xPosition;
+    }
+}

src/helper/index.ts

@@ -1,2 +1,3 @@
+export * from './draw-helper';
 export * from './mqtt-helper';
 export * from './string-helper';