ckaczor/HomeMonitor
1
0
Fork 0
mirror of https://github.com/ckaczor/HomeMonitor.git synced 2026-01-13 17:22:54 -05:00
Code Issues Packages Projects Releases Wiki Activity

Display improvements

Browse Source
This commit is contained in:
Chris Kaczor
2024-12-27 15:29:07 +00:00
parent 89a428f8e7
commit 8a15e06f35
6 changed files with 186 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
WebDisplay/components.d.ts vendored
View File

@@ -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']
}
}

5
WebDisplay/src/components/CalendarAgenda.vue
View File

@@ -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) {

1
WebDisplay/src/components/NationalDays.vue
View File

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

2
WebDisplay/src/components/PressureTrendArrow.vue
View File

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

128
WebDisplay/src/components/WindDirectionArrow.vue Normal file
View File

@@ -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>

66
WebDisplay/src/pages/kiosk.vue
View File

@@ -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">
<span class="temperature-value">{{ getTemperature() }}</span>
<span class="temperature-label">{{ showFeelsLike ? 'Feels Like' : 'Actual' }}</span>
<div class="display-item">
<span class="display-item-value">{{ getTemperature() }}</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>
{{ (weatherStore.current?.Pressure! / 100).toFixed(0) }}
</span>
<PressureTrendArrow :pressureDifference="weatherStore.current?.PressureDifferenceThreeHour" />
<div class="display-item">
<span class="display-item-value">
<span>
{{ (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;
}