From 5788210ad17f87d61827a8324cc79bd9333c2c31 Mon Sep 17 00:00:00 2001 From: electron Date: Sun, 11 Oct 2026 08:44:38 +0100 Subject: [PATCH 1/6] add consumer debug output, hide consumer widget if not needed --- .../colors/source/package-lock.json | 86 +++++++++++++++++++ .../web_themes/colors/source/package.json | 1 + .../components/energyMeter/EnergyMeter.vue | 3 +- .../src/components/powerMeter/PMUsageArc.vue | 17 ++-- .../colors/source/src/stores/mqttMessages.ts | 0 .../colors/source/src/views/ColorsTheme.vue | 16 +++- 6 files changed, 113 insertions(+), 10 deletions(-) create mode 100644 packages/modules/web_themes/colors/source/src/stores/mqttMessages.ts diff --git a/packages/modules/web_themes/colors/source/package-lock.json b/packages/modules/web_themes/colors/source/package-lock.json index 2fc8ff7153..1caa863129 100644 --- a/packages/modules/web_themes/colors/source/package-lock.json +++ b/packages/modules/web_themes/colors/source/package-lock.json @@ -13,6 +13,7 @@ "bootstrap": "^5.3.8", "d3": "^7.9.0", "mqtt": "^5.16.0", + "pinia": "^4.0.3", "process": "^0.11.10", "swiper": "^14.2.0", "vue": "^3.5.43" @@ -2552,6 +2553,36 @@ "@vue/shared": "3.5.43" } }, + "node_modules/@vue/devtools-api": { + "version": "8.2.1", + "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-8.2.1.tgz", + "integrity": "sha512-6u4vXBlIBAC1wMplIZgpyPn7uh/s4Bf6F5bMzvLv+EdJ0aHs/+4B7Ygv864EStQSjRbsRzTko/kUG1A1IejQ3A==", + "license": "MIT", + "peer": true, + "dependencies": { + "@vue/devtools-kit": "^8.2.1" + } + }, + "node_modules/@vue/devtools-kit": { + "version": "8.2.1", + "resolved": "https://registry.npmjs.org/@vue/devtools-kit/-/devtools-kit-8.2.1.tgz", + "integrity": "sha512-FIGIuq3AWReEpbAHY/cRGeHDfI0qOb8OCQ3YjbEAX04uaxIDbGc9rhkbVcG7rnfHPXE3RsU5KrWOu9V/okd8AQ==", + "license": "MIT", + "peer": true, + "dependencies": { + "@vue/devtools-shared": "^8.2.1", + "birpc": "^2.6.1", + "hookable": "^5.5.3", + "perfect-debounce": "^2.0.0" + } + }, + "node_modules/@vue/devtools-shared": { + "version": "8.2.1", + "resolved": "https://registry.npmjs.org/@vue/devtools-shared/-/devtools-shared-8.2.1.tgz", + "integrity": "sha512-Fkac7lUdGReh6pVOi3AYPRGe82LQqRmAfThW7RRligOAP0ZA/Z1z9XLHDM9dv34pV2HRc79DK8uKPeG2fLnA/g==", + "license": "MIT", + "peer": true + }, "node_modules/@vue/eslint-config-prettier": { "version": "10.2.0", "resolved": "https://registry.npmjs.org/@vue/eslint-config-prettier/-/eslint-config-prettier-10.2.0.tgz", @@ -2847,6 +2878,16 @@ ], "license": "MIT" }, + "node_modules/birpc": { + "version": "2.9.0", + "resolved": "https://registry.npmjs.org/birpc/-/birpc-2.9.0.tgz", + "integrity": "sha512-KrayHS5pBi69Xi9JmvoqrIgYGDkD6mcSe/i6YKi3w5kekCLzrX4+nawcXqrj2tIp50Kw/mT/s3p+GVK0A0sKxw==", + "license": "MIT", + "peer": true, + "funding": { + "url": "https://github.com/sponsors/antfu" + } + }, "node_modules/bl": { "version": "6.1.6", "resolved": "https://registry.npmjs.org/bl/-/bl-6.1.6.tgz", @@ -4791,6 +4832,13 @@ "minimalistic-crypto-utils": "^1.0.1" } }, + "node_modules/hookable": { + "version": "5.5.3", + "resolved": "https://registry.npmjs.org/hookable/-/hookable-5.5.3.tgz", + "integrity": "sha512-Yc+BQe8SvoXH1643Qez1zqLRmbA5rCL+sSmk6TVos0LWVfNIB7PGncdlId77WzLGSIB5KaWgTaNTs2lNVEI6VQ==", + "license": "MIT", + "peer": true + }, "node_modules/hookified": { "version": "1.15.1", "resolved": "https://registry.npmjs.org/hookified/-/hookified-1.15.1.tgz", @@ -5727,6 +5775,12 @@ "node": ">= 6" } }, + "node_modules/nostics": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/nostics/-/nostics-1.3.0.tgz", + "integrity": "sha512-wzRsrJwNlFbqIRQt8aCeL2WE8USip/uuvGSOZV1D02CxX8ABTMbw8IywKjH7yWHETMXbWJI4OBpihg9rmz2Vyg==", + "license": "MIT" + }, "node_modules/npm-normalize-package-bin": { "version": "6.0.0", "resolved": "https://registry.npmjs.org/npm-normalize-package-bin/-/npm-normalize-package-bin-6.0.0.tgz", @@ -6023,6 +6077,13 @@ "node": ">= 0.10" } }, + "node_modules/perfect-debounce": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/perfect-debounce/-/perfect-debounce-2.1.0.tgz", + "integrity": "sha512-LjgdTytVFXeUgtHZr9WYViYSM/g8MkcTPYDlPa3cDqMirHjKiSZPYd6DoL7pK8AJQr+uWkQvCjHNdiMqsrJs+g==", + "license": "MIT", + "peer": true + }, "node_modules/picocolors": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz", @@ -6055,6 +6116,31 @@ "node": ">=18" } }, + "node_modules/pinia": { + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/pinia/-/pinia-4.0.3.tgz", + "integrity": "sha512-XMQqpvjgG7LMqVhhFUzKLT4KEbsYbfZZ0CZU9PgdFm1O2VKBmIkykL8+SfNhOaT7sR0wT6BEgKT0YNDYWgmVRA==", + "license": "MIT", + "dependencies": { + "nostics": "^1.1.4" + }, + "funding": { + "url": "https://github.com/sponsors/posva" + }, + "peerDependencies": { + "@vue/devtools-api": "^8.1.5", + "typescript": ">=5.6.0", + "vue": "^3.5.11" + }, + "peerDependenciesMeta": { + "@vue/devtools-api": { + "optional": false + }, + "typescript": { + "optional": true + } + } + }, "node_modules/pkg-dir": { "version": "5.0.0", "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-5.0.0.tgz", diff --git a/packages/modules/web_themes/colors/source/package.json b/packages/modules/web_themes/colors/source/package.json index cd4cd2c489..8df15fce9f 100755 --- a/packages/modules/web_themes/colors/source/package.json +++ b/packages/modules/web_themes/colors/source/package.json @@ -18,6 +18,7 @@ "bootstrap": "^5.3.8", "d3": "^7.9.0", "mqtt": "^5.16.0", + "pinia": "^4.0.3", "process": "^0.11.10", "swiper": "^14.2.0", "vue": "^3.5.43" diff --git a/packages/modules/web_themes/colors/source/src/components/energyMeter/EnergyMeter.vue b/packages/modules/web_themes/colors/source/src/components/energyMeter/EnergyMeter.vue index c52dac03f3..76ee3feb94 100755 --- a/packages/modules/web_themes/colors/source/src/components/energyMeter/EnergyMeter.vue +++ b/packages/modules/web_themes/colors/source/src/components/energyMeter/EnergyMeter.vue @@ -168,7 +168,8 @@ const yScale = computed(() => { const graphScope = computed(() => (graphData.usePastData ? 'past' : 'now')) const heading = 'Energie' function printDebugOutput() { - console.debug(['all items:', registry]) + console.debug('--- Energy Meter Input:') + console.debug(registry) } function zoomGraph() { globalConfig.zoomedWidget = 2 diff --git a/packages/modules/web_themes/colors/source/src/components/powerMeter/PMUsageArc.vue b/packages/modules/web_themes/colors/source/src/components/powerMeter/PMUsageArc.vue index df84121b39..9d2022287c 100755 --- a/packages/modules/web_themes/colors/source/src/components/powerMeter/PMUsageArc.vue +++ b/packages/modules/web_themes/colors/source/src/components/powerMeter/PMUsageArc.vue @@ -17,6 +17,7 @@ import { counters } from '../counterList/model' import { computed } from 'vue' import { chargePoints } from '../chargePointList/model' import PMArc from './PMArc.vue' +import { globalConfig } from '@/assets/js/themeConfig.ts' // props const props = defineProps<{ radius: number @@ -54,8 +55,14 @@ const emptyPowerItem = computed(() => { showInGraph: true, } }) -const plotdata = computed(() => - [registry.getItem('evuOut')].concat( +const plotdata = computed(() => { + if (globalConfig.debug) { + console.debug('CONSUMER VALUES FOR ENERGY METER') + console.debug(['configured consumers:', consumers]) + console.debug(['consumers in graph:', consumersToShow.value]) + } + + return [registry.getItem('evuOut')].concat( chargePointsToShow.value, devicesToShow.value, consumersToShow.value, @@ -64,8 +71,8 @@ const plotdata = computed(() => invertersToShow.value, registry.getItem('house'), emptyPowerItem.value, - ), -) + ) +}) const chargePointsToShow = computed(() => { return Object.values(chargePoints).length > 1 @@ -74,6 +81,7 @@ const chargePointsToShow = computed(() => { }) : [registry.getItem('charging')] }) +// devices const devicesToShow = computed(() => { let summarizedPower = 0 for (const d of shDevices.values()) { @@ -121,7 +129,6 @@ const consumersToShow = computed(() => { return b.power - a.power }) }) - const batteriesToShow = computed(() => batteries.value.size > 1 ? [...batteries.value.values()] diff --git a/packages/modules/web_themes/colors/source/src/stores/mqttMessages.ts b/packages/modules/web_themes/colors/source/src/stores/mqttMessages.ts new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/modules/web_themes/colors/source/src/views/ColorsTheme.vue b/packages/modules/web_themes/colors/source/src/views/ColorsTheme.vue index 136a73356e..4adc38a3f4 100644 --- a/packages/modules/web_themes/colors/source/src/views/ColorsTheme.vue +++ b/packages/modules/web_themes/colors/source/src/views/ColorsTheme.vue @@ -41,7 +41,7 @@ Hagen */ - + @@ -100,7 +100,7 @@ Hagen */ Smart Home - + @@ -198,12 +198,16 @@ Hagen */
-
+
@@ -273,6 +277,7 @@ import { globalData } from '../assets/js/model' import { shDevices } from '@/components/smartHome/model' import { initConfig } from '@/assets/js/themeConfig' import { batteries } from '@/components/batteryList/model' +import { consumers } from '@/components/consumerList/model' import PowerMeter from '@/components/powerMeter/PowerMeter.vue' import PowerGraph from '@/components/powerGraph/PowerGraph.vue' import EnergyMeter from '@/components/energyMeter/EnergyMeter.vue' @@ -302,6 +307,9 @@ const showMQ = ref(false) const showSH = computed(() => { return [...shDevices.values()].filter((dev) => dev.configured).length > 0 }) +const showConsumers = computed(() => { + return [...consumers.values()].length > 0 +}) // methods function init() { initConfig() From b8731efb9d5771003ee5fad63d4f318f34e33483 Mon Sep 17 00:00:00 2001 From: electron Date: Sun, 11 Oct 2026 16:14:41 +0100 Subject: [PATCH 2/6] add chargemode buttons to consumers --- .../source/src/assets/js/sendMessages.ts | 7 ++ .../consumerList/ConsumerDevice.vue | 86 ++++++------------- .../src/components/consumerList/model.ts | 62 ++++++++++++- .../consumerList/processMessages.ts | 32 +++---- .../powerGraph/processDayGraphData.ts | 9 -- 5 files changed, 102 insertions(+), 94 deletions(-) diff --git a/packages/modules/web_themes/colors/source/src/assets/js/sendMessages.ts b/packages/modules/web_themes/colors/source/src/assets/js/sendMessages.ts index 053c9a7c0e..7a1db859b2 100644 --- a/packages/modules/web_themes/colors/source/src/assets/js/sendMessages.ts +++ b/packages/modules/web_themes/colors/source/src/assets/js/sendMessages.ts @@ -101,3 +101,10 @@ export function updateChargeTemplate(cp: number) { JSON.stringify(chargePoints[cp].chargeTemplate), ) } + +export function updateConsumerUsage(consumerId: number, usage: object) { + mqttPublish( + 'openWB/set/consumer/' + consumerId + '/usage', + JSON.stringify(usage), + ) +} 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 712317a8c8..2cf22e507f 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 @@ -12,7 +12,24 @@ >{{ formatWatt(device.power) }} +
+ @@ -26,10 +43,13 @@