Display improvements

WebDisplay/components.d.ts

@@ -23,5 +23,6 @@ declare module 'vue' {
     TimeRange: typeof import('./src/components/TimeRange.vue')['default']
     ValueChart: typeof import('./src/components/ValueChart.vue')['default']
     WeatherSummary: typeof import('./src/components/WeatherSummary.vue')['default']
+    WindDirectionArrow: typeof import('./src/components/WindDirectionArrow.vue')['default']
   }
 }

WebDisplay/src/components/CalendarAgenda.vue

@@ -71,7 +71,7 @@
                 <div>
                     <div class="calendar-day-item-header">
                         <span class="calendar-day-item-number">
-                            {{ format(calendarDay.date, 'dd') }}
+                            {{ format(calendarDay.date, 'd') }}
                         </span>
                         <span class="calendar-day-item-name">
                             {{ format(calendarDay.date, 'EEEE') }}
@@ -115,6 +115,8 @@
     .calendar-day-item-number {
         font-size: 1.25em;
         padding-right: 0.5em;
+        width: 2rem;
+        text-align: right;
     }
 
     .calendar-day-item-name {
@@ -125,6 +127,7 @@
         margin-left: 10px;
         overflow: auto;
         flex: 1;
+        scrollbar-width: none;
     }
 
     .calendar-day-item:not(:last-child) {

WebDisplay/src/components/NationalDays.vue

@@ -92,6 +92,7 @@
     .national-days-list {
         overflow: auto;
         flex: 1;
+        scrollbar-width: none;
     }
 
     .national-day {

WebDisplay/src/components/PressureTrendArrow.vue

@@ -25,7 +25,7 @@
         class="pressure-trend-arrow"
         :class="rotationClass(props.pressureDifference)"
         :title="'3 Hour Change: ' + props.pressureDifference.toFixed(1)">
-        ➜
+        ➝
     </span>
 </template>
 

WebDisplay/src/components/WindDirectionArrow.vue

@@ -0,0 +1,128 @@
+<script lang="ts" setup>
+    import WindDirection from '@/models/weather/wind-direction';
+
+    const props = defineProps(['windDirection']);
+
+    function rotationClass(windDirection: WindDirection | undefined) {
+        switch (windDirection) {
+            case WindDirection.None:
+                return 'None';
+            case WindDirection.North:
+                return 'N';
+            case WindDirection.East:
+                return 'E';
+            case WindDirection.South:
+                return 'S';
+            case WindDirection.West:
+                return 'W';
+            case WindDirection.NorthEast:
+                return 'NE';
+            case WindDirection.SouthEast:
+                return 'SE';
+            case WindDirection.SouthWest:
+                return 'SW';
+            case WindDirection.NorthWest:
+                return 'NW';
+            case WindDirection.NorthNorthEast:
+                return 'NNE';
+            case WindDirection.EastNorthEast:
+                return 'ENE';
+            case WindDirection.EastSouthEast:
+                return 'ESE';
+            case WindDirection.SouthSouthEast:
+                return 'SSE';
+            case WindDirection.SouthSouthWest:
+                return 'SSW';
+            case WindDirection.WestSouthWest:
+                return 'WSW';
+            case WindDirection.WestNorthWest:
+                return 'WNW';
+            case WindDirection.NorthNorthWest:
+                return 'NNW';
+        }
+        return windDirection!.toString();
+    }
+</script>
+
+<template>
+    <span
+        class="wind-direction-arrow"
+        :class="rotationClass(props.windDirection)"
+        :title="props.windDirection">
+        ➳
+    </span>
+</template>
+
+<style scoped>
+    .wind-direction-arrow {
+        display: inline-block;
+    }
+
+    .None {
+        display: none;
+    }
+
+    .N {
+        transform: rotate(calc(-90deg + 0deg));
+    }
+
+    .E {
+        transform: rotate(calc(-90deg + 90deg));
+    }
+
+    .S {
+        transform: rotate(calc(-90deg + 180deg));
+    }
+
+    .W {
+        transform: rotate(calc(-90deg + 270deg));
+    }
+
+    .NE {
+        transform: rotate(calc(-90deg + 45deg));
+    }
+
+    .SE {
+        transform: rotate(calc(-90deg + 135deg));
+    }
+
+    .SW {
+        transform: rotate(calc(-90deg + 225deg));
+    }
+
+    .NW {
+        transform: rotate(calc(-90deg + 315deg));
+    }
+
+    .NNE {
+        transform: rotate(calc(-90deg + 22.5deg));
+    }
+
+    .ENE {
+        transform: rotate(calc(-90deg + 67.5deg));
+    }
+
+    .ESE {
+        transform: rotate(calc(-90deg + 112.5deg));
+    }
+
+    .SSE {
+        transform: rotate(calc(-90deg + 157.5deg));
+    }
+
+    .SSW {
+        transform: rotate(calc(-90deg + 202.5deg));
+    }
+
+    .WSW {
+        transform: rotate(calc(-90deg + 247.5deg));
+    }
+
+    .WNW {
+        transform: rotate(calc(-90deg + 292.5deg));
+    }
+
+    .NNW {
+        transform: rotate(calc(-90deg + 337.5deg));
+    }
+</style>

WebDisplay/src/pages/kiosk.vue

@@ -4,12 +4,11 @@
     import { useLaundryStore } from '@/stores/laundryStore';
     import { usePowerStore } from '@/stores/powerStore';
     import { useHomeAssistantStore } from '@/stores/homeAssistantStore';
-    import { ShortenWindDirection } from '@/windFormatter';
     import CalendarAgenda from '@/components/CalendarAgenda.vue';
     import LongPressButton from '@/components/LongPressButton.vue';
     import PressureTrendArrow from '@/components/PressureTrendArrow.vue';
 
-    const showFeelsLike = ref(false);
+    const showFeelsLike = ref(true);
 
     const weatherStore = useWeatherStore();
     weatherStore.start();
@@ -61,6 +60,26 @@
         }
     }
 
+    function dewPointDescription(dewPoint: number | undefined): string {
+        if (dewPoint === undefined) {
+            return '';
+        } else if (dewPoint < 55) {
+            return 'Dry';
+        } else if (dewPoint <= 60) {
+            return 'Comfortable';
+        } else if (dewPoint <= 65) {
+            return 'Slightly Humid';
+        } else if (dewPoint <= 70) {
+            return 'Humid';
+        } else if (dewPoint <= 75) {
+            return 'Very Humid';
+        } else if (dewPoint > 75) {
+            return 'Oppressive';
+        }
+
+        return '';
+    }
+
     setInterval(() => (currentTime.value = new Date()), 1000);
 </script>
 
@@ -82,28 +101,46 @@
                 :class="getTemperatureClass()"
                 @click="showFeelsLike = !showFeelsLike"
                 v-if="weatherStore.current">
-                <div class="temperature">
+                <div class="display-item">
-                    <span class="temperature-value">{{ getTemperature() }}</span>
+                    <span class="display-item-value">{{ getTemperature() }}</span>
-                    <span class="temperature-label">{{ showFeelsLike ? 'Feels Like' : 'Actual' }}</span>
+                    <span class="display-item-label">{{ showFeelsLike ? 'Feels Like' : 'Actual' }}</span>
                 </div>
             </div>
             <div
                 class="kiosk-humidity text-center pb-3"
                 v-if="weatherStore.current">
-                {{ weatherStore.current?.Humidity?.toFixed(0) + '%' }}
+                <div class="display-item">
+                    <span class="display-item-value">
+                        {{ weatherStore.current?.Humidity?.toFixed(0) + '%' }}
+                    </span>
+                    <span class="display-item-label">{{ dewPointDescription(weatherStore.current?.DewPoint) }}</span>
+                </div>
             </div>
             <div
                 class="kiosk-wind text-center pb-3"
                 v-if="weatherStore.current">
-                {{ weatherStore.current?.WindSpeed?.toFixed(0) + '&hairsp;' + ShortenWindDirection(weatherStore.current?.WindDirection) }}
+                <div class="display-item">
+                    <span class="display-item-value">
+                        <span>
+                            {{ weatherStore.current?.WindSpeed?.toFixed(1) }}
+                        </span>
+                        <WindDirectionArrow :windDirection="weatherStore.current?.WindDirection" />
+                    </span>
+                    <span class="display-item-label">MPH</span>
+                </div>
             </div>
             <div
                 class="kiosk-pressure text-center pb-3"
                 v-if="weatherStore.current">
-                <span>
+                <div class="display-item">
-                    {{ (weatherStore.current?.Pressure! / 100).toFixed(0) }}
+                    <span class="display-item-value">
-                </span>
+                        <span>
-                <PressureTrendArrow :pressureDifference="weatherStore.current?.PressureDifferenceThreeHour" />
+                            {{ (weatherStore.current?.Pressure! / 100).toFixed(0) }}
+                        </span>
+                        <PressureTrendArrow :pressureDifference="weatherStore.current?.PressureDifferenceThreeHour" />
+                    </span>
+                    <span class="display-item-label">MB</span>
+                </div>
             </div>
             <div
                 class="kiosk-generation text-center pt-4"
@@ -310,7 +347,6 @@
 
     .kiosk-national-days {
         grid-area: kiosk-national-days;
-        scrollbar-width: thin;
     }
 
     .warning {
@@ -321,16 +357,16 @@
         color: #208b20;
     }
 
-    .temperature {
+    .display-item {
         display: flex;
         flex-direction: column;
     }
 
-    .temperature-value {
+    .display-item-value {
         height: calc(1em + 10px);
     }
 
-    .temperature-label {
+    .display-item-label {
         font-size: 10pt;
     }