From a74063d7e4e94ef963d34c78336626c3d5d978f8 Mon Sep 17 00:00:00 2001 From: electron Date: Thu, 15 Oct 2026 17:42:50 +0100 Subject: [PATCH 1/9] fix price calculator --- .../chargePointList/cpConfig/PriceCalculator.vue | 1 - .../source/src/components/chargePointList/model.ts | 10 +++++++++- .../colors/source/src/components/powerGraph/model.ts | 1 - 3 files changed, 9 insertions(+), 3 deletions(-) diff --git a/packages/modules/web_themes/colors/source/src/components/chargePointList/cpConfig/PriceCalculator.vue b/packages/modules/web_themes/colors/source/src/components/chargePointList/cpConfig/PriceCalculator.vue index 9dc4365d32..dcfa2c7d3b 100644 --- a/packages/modules/web_themes/colors/source/src/components/chargePointList/cpConfig/PriceCalculator.vue +++ b/packages/modules/web_themes/colors/source/src/components/chargePointList/cpConfig/PriceCalculator.vue @@ -98,7 +98,6 @@ const currentSoc = ref(cp.value?.soc ?? 0) var targetSoc = ref(currentSoc.value < 80 ? 80 : 100) const bufferMinutes = ref(30) const evTemplate = computed(() => evTemplates[cp.value?.evTemplate]) -//const chargeTemplate = computed(() => chargeTemplates[cp.value?.evTemplate]) const price = computed({ get() { diff --git a/packages/modules/web_themes/colors/source/src/components/chargePointList/model.ts b/packages/modules/web_themes/colors/source/src/components/chargePointList/model.ts index a798795b27..ea915771c4 100755 --- a/packages/modules/web_themes/colors/source/src/components/chargePointList/model.ts +++ b/packages/modules/web_themes/colors/source/src/components/chargePointList/model.ts @@ -25,7 +25,7 @@ export class ChargePoint implements PowerItem { private _isLocked = false private _connectedVehicle = 0 chargeTemplate: ChargeTemplate | null = null - evTemplate = 0 + _evTemplate = 0 private _chargeMode = ChargeMode.pv_charging private _hasPriority = false currentPlan = '' @@ -369,6 +369,14 @@ export class ChargePoint implements PowerItem { get priority() { return vehicles[this.connectedVehicle]?.priority ?? 0 } + get evTemplate() { + // get this from teh connected vehicle, if any + if (vehicles[this.connectedVehicle]) { + return vehicles[this.connectedVehicle].evTemplateId + } else { + return 0 + } + } } export class Vehicle { id: number diff --git a/packages/modules/web_themes/colors/source/src/components/powerGraph/model.ts b/packages/modules/web_themes/colors/source/src/components/powerGraph/model.ts index 09281bbf6a..984c600582 100755 --- a/packages/modules/web_themes/colors/source/src/components/powerGraph/model.ts +++ b/packages/modules/web_themes/colors/source/src/components/powerGraph/model.ts @@ -112,7 +112,6 @@ export function setGraphData(d: GraphDataItem[]) { } else { graphData.data = d graphData.waitForData = false - console.log('graph data set') } } // LIVE GRAPH From bd03ce0b4de9a7b6d6c87555abb8bda4607a218f Mon Sep 17 00:00:00 2001 From: electron Date: Fri, 16 Oct 2026 22:02:10 +0100 Subject: [PATCH 2/9] show consumer status --- .../components/batteryList/BatteryList.vue | 2 +- .../chargePointList/CPChargePoint.vue | 8 +-- .../chargePointList/VehicleData.vue | 6 +- .../consumerList/ConsumerDevice.vue | 57 ++++++++++++------- .../src/components/consumerList/model.ts | 3 + .../consumerList/processMessages.ts | 6 ++ 6 files changed, 57 insertions(+), 25 deletions(-) diff --git a/packages/modules/web_themes/colors/source/src/components/batteryList/BatteryList.vue b/packages/modules/web_themes/colors/source/src/components/batteryList/BatteryList.vue index e9fb3e56f5..6c3b7af031 100755 --- a/packages/modules/web_themes/colors/source/src/components/batteryList/BatteryList.vue +++ b/packages/modules/web_themes/colors/source/src/components/batteryList/BatteryList.vue @@ -64,7 +64,7 @@ const batteryState = computed(() => { } else if (registry.getPower('batIn') > 0) { return `Lädt (${formatWatt(registry.getPower('batIn'))})` } else { - return `Bereit:` + return `Bereit` } }) diff --git a/packages/modules/web_themes/colors/source/src/components/chargePointList/CPChargePoint.vue b/packages/modules/web_themes/colors/source/src/components/chargePointList/CPChargePoint.vue index 09b4f41054..f69a2273be 100644 --- a/packages/modules/web_themes/colors/source/src/components/chargePointList/CPChargePoint.vue +++ b/packages/modules/web_themes/colors/source/src/components/chargePointList/CPChargePoint.vue @@ -25,7 +25,7 @@ -
+
@@ -38,9 +38,7 @@ - - {{ chargepoint.priority }} - +
 
@@ -157,9 +155,11 @@ function toggleConfigMode() { .fa-ellipsis-vertical { color: var(--color-menu); } + .fa-circle-check { color: var(--color-menu); } + .errorWbBadge { color: var(--color-bg); background-color: var(--color-evu); diff --git a/packages/modules/web_themes/colors/source/src/components/chargePointList/VehicleData.vue b/packages/modules/web_themes/colors/source/src/components/chargePointList/VehicleData.vue index 570a6be4ba..41a06989f8 100644 --- a/packages/modules/web_themes/colors/source/src/components/chargePointList/VehicleData.vue +++ b/packages/modules/web_themes/colors/source/src/components/chargePointList/VehicleData.vue @@ -18,6 +18,9 @@ />
+ + Prio: {{ chargepoint.priority }} + - + {{ chargedRangeString }} @@ -93,6 +96,7 @@ }} km +
 
{{ device.name }} + + + +
+
+ {{ device.statusText }} +
+
+ {{ device.faultText }} +
- + - + {{ formatTime(device.runningTime) }}
@@ -53,30 +71,17 @@ import WbBadge from '@/components/shared/WbBadge.vue' import InfoItem from '@/components/shared/InfoItem.vue' import FormatWattH from '@/components/shared/FormatWattH.vue' import RadioBarInput from '../shared/RadioBarInput.vue' +import { ref } from 'vue' const props = defineProps<{ device: Consumer }>() + +const showInfo = ref(false) +const showFault = ref(false) diff --git a/packages/modules/web_themes/colors/source/src/components/consumerList/model.ts b/packages/modules/web_themes/colors/source/src/components/consumerList/model.ts index 0712e2033f..f1e6cd6be0 100644 --- a/packages/modules/web_themes/colors/source/src/components/consumerList/model.ts +++ b/packages/modules/web_themes/colors/source/src/components/consumerList/model.ts @@ -65,6 +65,9 @@ export class Consumer implements PowerItem { showInList = true priority = 0 usage: ConsumerUsage | null = null + statusText = '' + faultState = 0 + faultText = '' now: EnergyData = { energy: 0, energyPv: 0, diff --git a/packages/modules/web_themes/colors/source/src/components/consumerList/processMessages.ts b/packages/modules/web_themes/colors/source/src/components/consumerList/processMessages.ts index 3af92b1fc3..b97db227cd 100644 --- a/packages/modules/web_themes/colors/source/src/components/consumerList/processMessages.ts +++ b/packages/modules/web_themes/colors/source/src/components/consumerList/processMessages.ts @@ -48,6 +48,12 @@ function processConsumerDeviceMessages(topic: string, message: string) { } catch (e) { console.warn('Error parsing consumer usage data: ' + e) } + } else if (topic.match(/^openWB\/consumer\/[0-9]+\/get\/state_str$/i)) { + dev.statusText = JSON.parse(message) + } else if (topic.match(/^openWB\/consumer\/[0-9]+\/get\/fault_state$/i)) { + dev.faultState = JSON.parse(message) + } else if (topic.match(/^openWB\/consumer\/[0-9]+\/get\/fault_str$/i)) { + dev.faultText = JSON.parse(message) } } From 1ee42663c6c3b9672169d6c8e69f7020b673082a Mon Sep 17 00:00:00 2001 From: electron Date: Sat, 17 Oct 2026 09:10:40 +0100 Subject: [PATCH 3/9] add info button to chargepoint --- .../chargePointList/CPChargePoint.vue | 89 +++++++++++++++++-- .../consumerList/ConsumerDevice.vue | 50 +++++++++-- 2 files changed, 127 insertions(+), 12 deletions(-) diff --git a/packages/modules/web_themes/colors/source/src/components/chargePointList/CPChargePoint.vue b/packages/modules/web_themes/colors/source/src/components/chargePointList/CPChargePoint.vue index f69a2273be..9c24d6b826 100644 --- a/packages/modules/web_themes/colors/source/src/components/chargePointList/CPChargePoint.vue +++ b/packages/modules/web_themes/colors/source/src/components/chargePointList/CPChargePoint.vue @@ -10,11 +10,18 @@   {{ props.chargepoint.name }} - Fehler + + + + @@ -26,6 +33,22 @@
+ +
+ {{ cp.stateStr }} +
+ + +
+ {{ cp.faultStr }} +
+
@@ -104,6 +127,8 @@ const props = defineProps<{ }>() const cp = ref(props.chargepoint) const configmode = ref(false) +const showInfo = ref(false) +const showFault = ref(false) // computed const statusString = computed(() => { @@ -172,4 +197,58 @@ function toggleConfigMode() { grid-column: 11 / span 2; font-size: var(--font-settings-button); } + +.statustext { + grid-column: 1 / 13; + justify-self: center; + font-size: var(--font-small); + color: black; + background: var(--color-menu); +} + +.faulttext { + grid-column: 1 / 13; + border: 1px solid var(--color-battery); + justify-self: center; + font-size: var(--font-small); + color: black; + background: var(--color-battery); +} + +.status-entry { + overflow: hidden; + transform-origin: top center; + will-change: opacity, transform; +} + +.status-fade-enter-active, +.status-fade-leave-active { + transition: + opacity 0.22s cubic-bezier(0.22, 1, 0.36, 1), + transform 0.22s cubic-bezier(0.22, 1, 0.36, 1); +} + +.status-fade-enter-from { + opacity: 0; + transform: translateY(-6px) scaleY(0.96); +} + +.status-fade-leave-to { + opacity: 0; + transform: translateY(-4px) scaleY(0.94); +} + +.status-fade-enter-to, +.status-fade-leave-from { + opacity: 1; + transform: translateY(0) scaleY(1); +} + +.fa-circle-info { + color: var(--color-menu); +} + +.fa-triangle-exclamation { + color: var(--color-battery); +} diff --git a/packages/modules/web_themes/colors/source/src/components/consumerList/ConsumerDevice.vue b/packages/modules/web_themes/colors/source/src/components/consumerList/ConsumerDevice.vue index 5539a3e70a..600665dd79 100644 --- a/packages/modules/web_themes/colors/source/src/components/consumerList/ConsumerDevice.vue +++ b/packages/modules/web_themes/colors/source/src/components/consumerList/ConsumerDevice.vue @@ -29,12 +29,16 @@
-
- {{ device.statusText }} -
-
- {{ device.faultText }} -
+ +
+ {{ device.statusText }} +
+ + +
+ {{ device.faultText }} +
+ Date: Sat, 17 Oct 2026 09:36:12 +0100 Subject: [PATCH 4/9] improve badge display in consumer, battery, inverter --- .../colors/source/src/assets/css/style.css | 1 + .../colors/source/src/assets/js/model.ts | 8 -------- .../src/components/batteryList/BLBattery.vue | 2 +- .../consumerList/ConsumerDevice.vue | 19 +++++++++++-------- .../components/consumerList/ConsumerList.vue | 8 +++++++- .../components/inverterList/IlInverter.vue | 5 ++++- .../source/src/components/shared/WbBadge.vue | 3 ++- 7 files changed, 26 insertions(+), 20 deletions(-) diff --git a/packages/modules/web_themes/colors/source/src/assets/css/style.css b/packages/modules/web_themes/colors/source/src/assets/css/style.css index 832aaaa97c..8757709758 100644 --- a/packages/modules/web_themes/colors/source/src/assets/css/style.css +++ b/packages/modules/web_themes/colors/source/src/assets/css/style.css @@ -213,6 +213,7 @@ body>.container-fluid { --font-large: 1.6rem; --font-medium: 1.2rem; --font-small: 1rem; + --font-smallbadge: 0.8rem; --font-verysmall: 0.7rem; --font-extralarge: 1.7rem; --font-settings: 16px; diff --git a/packages/modules/web_themes/colors/source/src/assets/js/model.ts b/packages/modules/web_themes/colors/source/src/assets/js/model.ts index dd46f2a388..341658e67b 100644 --- a/packages/modules/web_themes/colors/source/src/assets/js/model.ts +++ b/packages/modules/web_themes/colors/source/src/assets/js/model.ts @@ -344,14 +344,6 @@ export const sourceSummary: { [key: string]: PowerItem } = reactive({ pv: createPowerItem('pv', PowerItemType.pvSummary), batOut: createPowerItem('batOut', PowerItemType.batterySummary), }) -/* export const usageSummary: { [key: string]: PowerItem } = reactive({ - evuOut: createPowerItem('evuOut', PowerItemType.counter), - charging: createPowerItem('charging', PowerItemType.chargeSummary), - devices: createPowerItem('devices', PowerItemType.deviceSummary), - counters: createPowerItem('counters', PowerItemType.counterSummary), - batIn: createPowerItem('batIn', PowerItemType.batterySummary), - house: createPowerItem('house', PowerItemType.house), -}) */ export const globalData = reactive(new GlobalData()) export const etPriceList = ref('') export const energyMeterNeedsRedraw = ref(false) diff --git a/packages/modules/web_themes/colors/source/src/components/batteryList/BLBattery.vue b/packages/modules/web_themes/colors/source/src/components/batteryList/BLBattery.vue index 326a0d2f76..c57409af5b 100755 --- a/packages/modules/web_themes/colors/source/src/components/batteryList/BLBattery.vue +++ b/packages/modules/web_themes/colors/source/src/components/batteryList/BLBattery.vue @@ -7,7 +7,7 @@ Hagen */ {{ bat.name }}
diff --git a/packages/modules/web_themes/colors/source/src/components/consumerList/ConsumerDevice.vue b/packages/modules/web_themes/colors/source/src/components/consumerList/ConsumerDevice.vue index 600665dd79..9d0fb0b68b 100644 --- a/packages/modules/web_themes/colors/source/src/components/consumerList/ConsumerDevice.vue +++ b/packages/modules/web_themes/colors/source/src/components/consumerList/ConsumerDevice.vue @@ -20,12 +20,12 @@
@@ -55,10 +55,13 @@ }) " /> - + + + + - + {{ formatTime(device.runningTime) }}
@@ -69,11 +72,11 @@ import WbSubwidget from '@/components/shared/WbSubwidget.vue' import type { Consumer } from './model.ts' import { formatWatt, formatTime } from '@/assets/js/helpers' -import { type ChargeModeInfo } from '@/assets/js/types' import { chargemodes } from '@/assets/js/themeConfig' import WbBadge from '@/components/shared/WbBadge.vue' import InfoItem from '@/components/shared/InfoItem.vue' import FormatWattH from '@/components/shared/FormatWattH.vue' +import FormatWatt from '@/components/shared/FormatWatt.vue' import RadioBarInput from '../shared/RadioBarInput.vue' import { ref } from 'vue' @@ -142,7 +145,7 @@ const showFault = ref(false) transform: translateY(0) scaleY(1); } .fa-circle-info { - color: var(--color-charging); + color: var(--color-menu); } .fa-triangle-exclamation { color: var(--color-battery); diff --git a/packages/modules/web_themes/colors/source/src/components/consumerList/ConsumerList.vue b/packages/modules/web_themes/colors/source/src/components/consumerList/ConsumerList.vue index 80280c11dd..4b00971593 100644 --- a/packages/modules/web_themes/colors/source/src/components/consumerList/ConsumerList.vue +++ b/packages/modules/web_themes/colors/source/src/components/consumerList/ConsumerList.vue @@ -5,6 +5,9 @@ Verbraucher diff --git a/packages/modules/web_themes/colors/source/src/components/shared/WbBadge.vue b/packages/modules/web_themes/colors/source/src/components/shared/WbBadge.vue index 190e532c93..9159abf115 100644 --- a/packages/modules/web_themes/colors/source/src/components/shared/WbBadge.vue +++ b/packages/modules/web_themes/colors/source/src/components/shared/WbBadge.vue @@ -10,12 +10,14 @@ import { computed } from 'vue' const props = defineProps<{ color?: string bgcolor?: string + small?: boolean }>() const WbBadgestyle = computed(() => { let result = { color: props.color ?? 'var(--color-bg)', 'background-color': props.bgcolor ?? 'var(--color-menu)', + 'font-size': props.small ? 'var(--font-smallbadge)' : 'var(--font-small)', } return result }) @@ -23,7 +25,6 @@ const WbBadgestyle = computed(() => { diff --git a/packages/modules/web_themes/colors/source/src/components/powerGraph/model.ts b/packages/modules/web_themes/colors/source/src/components/powerGraph/model.ts index 984c600582..fa6c42486a 100755 --- a/packages/modules/web_themes/colors/source/src/components/powerGraph/model.ts +++ b/packages/modules/web_themes/colors/source/src/components/powerGraph/model.ts @@ -62,6 +62,7 @@ export interface RawDayGraphDataItem { export class GraphData { data: GraphDataItem[] = [] private _graphMode = '' + errors: string[] = [] waitForData = true get graphMode() { diff --git a/packages/modules/web_themes/colors/source/src/components/powerGraph/processDayGraphData.ts b/packages/modules/web_themes/colors/source/src/components/powerGraph/processDayGraphData.ts index c64e88fb4d..9fe46a10ed 100755 --- a/packages/modules/web_themes/colors/source/src/components/powerGraph/processDayGraphData.ts +++ b/packages/modules/web_themes/colors/source/src/components/powerGraph/processDayGraphData.ts @@ -15,7 +15,7 @@ import { addCounter, Counter, counters } from '../counterList/model' import { chargePoints } from '../chargePointList/model' import { addConsumer, consumers } from '../consumerList/model' import { PowerItemType, type PowerItem } from '@/assets/js/types' -import { add } from '../mqttViewer/model' + // methods: let gridCounters: string[] = [] // Process incoming day graph data @@ -24,7 +24,9 @@ export function processDayGraphMessages(topic: string, message: string) { entries: inputTable, names: itemNames2, totals: energyValues, + message: errorTextBlock, } = JSON.parse(message) + graphData.errors = errorTextBlock.split('\n') itemNames.value = new Map(Object.entries(itemNames2)) resetHistoricData() gridCounters = [] From 885af7833a68f5157901daeb95e7980c8c1b71f9 Mon Sep 17 00:00:00 2001 From: electron Date: Sat, 17 Oct 2026 14:11:36 +0100 Subject: [PATCH 6/9] modify settings menu --- .../source/src/components/NavigationBar.vue | 55 +++++++++---------- .../colors/source/src/views/ThemeSettings.vue | 38 ++++--------- 2 files changed, 36 insertions(+), 57 deletions(-) diff --git a/packages/modules/web_themes/colors/source/src/components/NavigationBar.vue b/packages/modules/web_themes/colors/source/src/components/NavigationBar.vue index 3ce17540ea..39faa02fe1 100755 --- a/packages/modules/web_themes/colors/source/src/components/NavigationBar.vue +++ b/packages/modules/web_themes/colors/source/src/components/NavigationBar.vue @@ -44,36 +44,17 @@ >
-
- -
- openWB - -
-
+
@@ -81,6 +62,11 @@
+ + + + +