Colors theme: fixes

packages/modules/web_themes/colors/source/src/assets/js/helpers.ts

@@ -141,7 +141,10 @@ export function fgColor(colorname: string) {
 	const root = document.documentElement
 	const style = getComputedStyle(root)
 	colorname = colorname.slice(4, -1) // remove 'var(...)'
-	const bgColor = style.getPropertyValue(colorname).trim()
+	let bgColor = style.getPropertyValue(colorname).trim()
+	if (bgColor.length === 4) {
+		bgColor = `#${bgColor[1]}${bgColor[1]}${bgColor[2]}${bgColor[2]}${bgColor[3]}${bgColor[3]}` // convert #RGB to #RRGGBB
+	}
 	const r = parseInt(bgColor.slice(1, 3), 16)
 	const g = parseInt(bgColor.slice(3, 5), 16)
 	const b = parseInt(bgColor.slice(5, 7), 16)

packages/modules/web_themes/colors/source/src/assets/js/mqttClient.ts

@@ -17,7 +17,8 @@ const mqttConnection = {
 	protocol: (location.protocol == 'https:' ? 'wss' : 'ws') as mqtt.MqttProtocol,
 	connectTimeout: 4000,
 	reconnectPeriod: 4000,
-	clean: false,
+	//clean: false,
+	resubscribe: true,
 	clientId: Math.random()
 		.toString(36)
 		.replace(/[^a-z]+/g, '')

packages/modules/web_themes/colors/source/src/assets/js/processMessages.ts

@@ -307,6 +307,7 @@ function processSystemMessages(topic: string, message: string) {
 				break
 			case 'inverter':
 			case 'inverter_secondary':
+			case 'external_inverter':
 				if (!pvSystems.value.has(config.id)) {
 					pvSystems.value.set(config.id, new PvSystem(config.id))
 				}

packages/modules/web_themes/colors/source/src/assets/js/themeConfig.ts

@@ -11,6 +11,7 @@ import { addShDevice, shDevices } from '@/components/smartHome/model'
 import { registry } from './model'
 import { updateServer } from './sendMessages'
 import { counters } from '@/components/counterList/model'
+import { vehicles } from '@/components/chargePointList/model'
 export class Config {
 	private _showRelativeArcs = false
 	showTodayGraph = true
@@ -48,6 +49,7 @@ export class Config {
 	zoomGraph = false
 	zoomedWidget = 1
 	countersToShow: number[] = []
+	vehiclesWithSocToShow: number[] = []
 	priorities: Map<number, number> = new Map()
 	constructor() {}
 	get showRelativeArcs() {
@@ -405,6 +407,7 @@ export const infotext: { [key: string]: string } = {
 interface Preferences {
 	hideSH?: string[]
 	showCtr?: string[]
+	showSoc?: string[]
 	showLG?: boolean
 	displayM?: string
 	stackO?: number
@@ -441,6 +444,9 @@ function writeCookie() {
 	prefs.showCtr = [...counters.values()]
 		.filter((ctr) => ctr.showInGraph)
 		.map((ctr) => ctr.id.toString())
+	prefs.showSoc = Object.values(vehicles)
+		.filter((v) => v.showSoc)
+		.map((v) => v.id.toString())
 	prefs.showLG = globalConfig.graphPreference == 'live'
 	prefs.stackO = globalConfig.usageStackOrder
 	prefs.maxPow = globalConfig.maxPower
@@ -479,6 +485,9 @@ function readCookie() {
 		if (prefs.showCtr !== undefined) {
 			globalConfig.countersToShow = prefs.showCtr.map((i) => +i)
 		}
+		if (prefs.showSoc != undefined) {
+			globalConfig.vehiclesWithSocToShow = prefs.showSoc.map((i) => +i)
+		}
 		if (prefs.showLG !== undefined) {
 			globalConfig.setGraphPreference(prefs.showLG ? 'live' : 'today')
 		}

packages/modules/web_themes/colors/source/src/components/chargePointList/compactList/CompactListItem.vue

@@ -49,19 +49,19 @@
 					class="d-flex justify-content-center align-items-center vehiclestatus"
 				>
 					<BatterySymbol
-						v-if="chargepoint.soc"
+						v-if="chargepoint.soc != undefined"
 						class="me-1"
 						:soc="chargepoint.soc"
 					/>
 					<i
-						v-if="chargepoint.isSocConfigured && chargepoint.isSocManual"
+						v-if="chargepoint.isSocManual"
 						type="button"
 						class="fa-solid fa-sm fas fa-edit"
 						:style="{ color: 'var(--color-menu)' }"
 						@click="editSoc = !editSoc"
 					/>
 					<i
-						v-if="chargepoint.isSocConfigured && !chargepoint.isSocManual"
+						v-else
 						type="button"
 						class="fa-solid fa-sm me-2"
 						:class="
@@ -139,7 +139,12 @@
 
 <script setup lang="ts">
 import { ref, computed } from 'vue'
-import { chargePoints, type ChargeLimit, type ChargePoint } from '../model'
+import {
+	chargePoints,
+	vehicles,
+	type ChargeLimit,
+	type ChargePoint,
+} from '../model'
 import { chargemodes, globalConfig } from '@/assets/js/themeConfig'
 import { formatWatt, formatWattH } from '@/assets/js/helpers'
 import ChargeConfigPanel from '../cpConfig/ChargeConfigPanel.vue'

packages/modules/web_themes/colors/source/src/components/chargePointList/cpConfig/ConfigPv.vue

@@ -18,7 +18,7 @@
 						id="minCurrent"
 						v-model="cp.pvMinCurrent"
 						:min="6"
-						:max="32"
+						:max="16"
 						:step="1"
 						unit="A"
 					/>
@@ -66,7 +66,7 @@
 						v-model="cp.pvMinSocCurrent"
 						class="grid-col-2"
 						:min="6"
-						:max="32"
+						:max="16"
 						:step="1"
 						unit="A"
 					/>

packages/modules/web_themes/colors/source/src/components/chargePointList/model.ts

@@ -6,7 +6,7 @@ import {
 	type EnergyData,
 	type PowerItem,
 } from '@/assets/js/types'
-import { globalConfig } from '@/assets/js/themeConfig'
+import { globalConfig, savePrefs } from '@/assets/js/themeConfig'
 import { getColor } from '@/assets/js/model'
 export class ChargePoint implements PowerItem {
 	id: number
@@ -392,6 +392,7 @@ export class Vehicle {
 	private _chargeTemplateId = 0
 	isSocConfigured = false
 	isSocManual = false
+	private _showSoc = true
 	get chargeTemplateId() {
 		return this._chargeTemplateId
 	}
@@ -427,6 +428,13 @@ export class Vehicle {
 			(this.id != 0 || globalConfig.showStandardVehicle)
 		)
 	}
+	get showSoc(): boolean {
+		return this._showSoc
+	}
+	set showSoc(b: boolean) {
+		this._showSoc = b
+		savePrefs()
+	}
 }
 export interface ConnectedVehicleConfig {
 	average_consumption: number
@@ -582,13 +590,15 @@ export const topVehicles = computed(() => {
 		.filter(
 			(cp) =>
 				vehicles[cp.connectedVehicle] &&
-				vehicles[cp.connectedVehicle].isSocConfigured,
+				vehicles[cp.connectedVehicle].isSocConfigured &&
+				vehicles[cp.connectedVehicle].showSoc,
 		)
 		.map((cp) => cp.connectedVehicle)
 	const otherVehicles = Object.values(vehicles).filter(
 		(v) =>
 			v.visible &&
 			v.isSocConfigured &&
+			v.showSoc &&
 			!connectedVehiclesWithSoc.includes(v.id),
 	)
 	result = connectedVehiclesWithSoc

packages/modules/web_themes/colors/source/src/components/chargePointList/processMessages.ts

@@ -126,6 +126,7 @@ export function processVehicleMessages(topic: string, message: string) {
 			const v = new Vehicle(index)
 			vehicles[index] = v
 			v.priority = globalConfig.priorities.get(index) ?? 0
+			v.showSoc = globalConfig.vehiclesWithSocToShow.includes(index)
 			// console.info('New vehicle created: ' + index)
 		}
 		if (topic.match(/^openwb\/vehicle\/[0-9]+\/name$/i)) {
@@ -138,7 +139,7 @@ export function processVehicleMessages(topic: string, message: string) {
 			vehicles[index].name = JSON.parse(message)
 		} else if (topic.match(/^openwb\/vehicle\/[0-9]+\/get\/soc$/i)) {
 			// set soc for cp
-			vehicles[index].soc = JSON.parse(message)
+			vehicles[index].soc = JSON.parse(message) ?? 0
 		} else if (topic.match(/^openwb\/vehicle\/[0-9]+\/get\/range$/i)) {
 			if (isNaN(+message)) {
 				vehicles[index].range = 0

packages/modules/web_themes/colors/source/src/components/consumerList/ConsumerDevice.vue

@@ -20,6 +20,11 @@
 			</div>
 		</template>
 		<template #buttons>
+			<span v-for="(temp, idx) in device.temp" :key="idx">
+				<WbBadge v-if="temp < 300" :small="true" bgcolor="var(--color-battery)">
+					<span>{{ formatTemp(temp) }} </span>
+				</WbBadge>
+			</span>
 			<WbBadge
 				v-if="device.priority > 0"
 				:small="true"
@@ -43,6 +48,11 @@
 				</div>
 			</transition>
 			<RadioBarInput
+				v-if="
+					device.consumerType == 'suspendable_onoff' ||
+					device.consumerType == 'suspendable_tunable' ||
+					device.consumerType == 'continuous'
+				"
 				:id="'chargemode-' + device.name"
 				v-model="device.chargeMode"
 				class="chargemodes mt-3 mb-3"
@@ -74,7 +84,7 @@
 <script setup lang="ts">
 import WbSubwidget from '@/components/shared/WbSubwidget.vue'
 import type { Consumer } from './model.ts'
-import { formatWatt, formatTime } from '@/assets/js/helpers'
+import { formatWatt, formatTime, formatTemp } from '@/assets/js/helpers'
 import { chargemodes } from '@/assets/js/themeConfig'
 import WbBadge from '@/components/shared/WbBadge.vue'
 import InfoItem from '@/components/shared/InfoItem.vue'

packages/modules/web_themes/colors/source/src/components/consumerList/model.ts

@@ -68,6 +68,9 @@ export class Consumer implements PowerItem {
 	statusText = ''
 	faultState = 0
 	faultText = ''
+	temp = []
+	countAsHouse = false
+	consumerType = ''
 	now: EnergyData = {
 		energy: 0,
 		energyPv: 0,
@@ -80,6 +83,7 @@ export class Consumer implements PowerItem {
 		energyBat: 0,
 		pvPercentage: 0,
 	}
+
 	constructor(index: number, showInList = true) {
 		this.id = index
 		this.showInList = showInList

packages/modules/web_themes/colors/source/src/components/consumerList/processMessages.ts

@@ -56,16 +56,29 @@ function processConsumerDeviceMessages(topic: string, message: string) {
 						JSON.stringify(usage),
 				)
 				dev.usage = usage
+				dev.consumerType = usage.type
 			}
 		} catch (e) {
 			console.warn('Error parsing consumer usage data: ' + e)
 		}
+	} else if (topic.match(/^openWB\/consumer\/[0-9]+\/config$/i)) {
+		const config = JSON.parse(message)
+		dev.countAsHouse = config.is_home_consumption_consumer == 'home_consumption'
 	} 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)
+	} else if (topic.match(/^openWB\/consumer\/[0-9]+\/get\/temperatures$/i)) {
+		dev.temp = JSON.parse(message)
+	} else if (
+		topic.match(
+			/^openWB\/consumer\/[0-9]+\/get\/is_home_consumption_consumer$/i,
+		)
+	) {
+		console.log(message)
+		dev.countAsHouse = JSON.parse(message) != 'no_home_consumption'
 	}
 }
 

packages/modules/web_themes/colors/source/src/components/powerGraph/processDayGraphData.ts

@@ -172,16 +172,17 @@ function transformRow(currentRow: RawDayGraphDataItem): GraphDataItem {
 	currentItem.consumers = 0
 	Object.entries(currentRow.consumer).forEach(([id, values]) => {
 		if (id != 'all') {
-			currentItem[id] = values.power_imported ?? 0
-			if (!registry.keys().includes(id)) {
-				const consumer = consumers.get(+id.slice(8))
-				if (!consumer) {
-					addConsumer(+id.slice(8), false)
+			registry.duplicateItem(id, <PowerItem>consumers.get(+id.slice(8)))
+			if (!consumers.get(+id.slice(8))?.countAsHouse) {
+				currentItem[id] = values.power_imported ?? 0
+				if (!registry.keys().includes(id)) {
+					const consumer = consumers.get(+id.slice(8))
+					if (!consumer) {
+						addConsumer(+id.slice(8), false)
+					}
 				}
-
-				registry.duplicateItem(id, <PowerItem>consumers.get(+id.slice(8)))
+				currentItem.consumers += values.power_imported ?? 0
 			}
-			currentItem.consumers += values.power_imported ?? 0
 		}
 	})
 	// Prices

packages/modules/web_themes/colors/source/src/components/powerMeter/PMUsageArc.vue

@@ -91,7 +91,7 @@ const devicesToShow = computed(() => {
 })
 const consumersToShow = computed(() => {
 	return [...consumers.values()]
-		.filter((c) => c.showInGraph)
+		.filter((c) => c.showInGraph && !c.countAsHouse)
 		.sort((a, b) => {
 			return b.power - a.power
 		})

packages/modules/web_themes/colors/source/src/components/vehicleList/VlVehicle.vue

@@ -3,6 +3,17 @@
 		<template #title>
 			<span class="vehiclename">{{ props.vehicle.name }}</span>
 		</template>
+		<template #buttons>
+			<WbBadge
+				v-if="props.vehicle.isSocConfigured"
+				:bgcolor="socBadgeColor"
+				:small="true"
+				@click="props.vehicle.showSoc = !props.vehicle.showSoc"
+				type="button"
+			>
+				SoC
+			</WbBadge>
+		</template>
 		<div class="subgrid">
 			<InfoItem heading="Status:" :small="true" class="grid-left grid-col-4">
 				<span
@@ -28,6 +39,7 @@
 import { computed } from 'vue'
 import InfoItem from '../shared/InfoItem.vue'
 import WbSubwidget from '../shared/WbSubwidget.vue'
+import WbBadge from '../shared/WbBadge.vue'
 import type { Vehicle } from '@/components/chargePointList/model.ts'
 
 const props = defineProps<{
@@ -63,6 +75,10 @@ const statusColor = computed(() => {
 		return 'var(--color-axis)'
 	}
 })
+
+const socBadgeColor = computed(() =>
+	props.vehicle.showSoc ? 'var(--color-pv)' : 'var(--color-menu)',
+)
 </script>
 <style scoped>
 .idWbBadge {