Colors theme:Add battery SOC and manual SOC handling

packages/modules/web_themes/colors/source/src/assets/css/style.css

@@ -18,77 +18,83 @@ body>.container {
 	padding: 55px 15px 0 15px;
 }
 
+/* RESPONSIVE FONT SIZES */
+
 /* Extra small devices (portrait phones, less than 576px) */
 /* No media query since this is the default in Bootstrap */
 html {
 	font-size: 12px;
 }
-
+@media screen and (min-width: 240px) {
+	html {
+		font-size: 13px;
+	}
+}
+@media screen and (min-width: 330px) {
+	html {
+		font-size: 14px;
+	}
+}
 @media screen and (min-width: 400px) {
 	html {
 		font-size: 15px;
 	}
 }
-
 @media screen and (min-width: 435px) {
 	html {
 		font-size: 16px;
 	}
 }
-
 @media screen and (min-width: 470px) {
 	html {
 		font-size: 17px;
 	}
 }
-
 @media screen and (min-width: 505px) {
 	html {
 		font-size: 18px;
 	}
 }
-
-@media screen and (min-width: 440px) {
+@media screen and (min-width: 540px) {
 	html {
 		font-size: 19px;
 	}
 }
-
 /* Small devices (landscape phones, 576px and up) */
 @media screen and (min-width: 576px) {
 	html {
 		font-size: 20px;
 	}
 }
-
+@media screen and (min-width: 672px) {
+	html {
+		font-size: 21px;
+	}
+}
 /* Medium devices (tablets, 768px and up) */
 @media screen and (min-width: 768px) {
 	html {
 		font-size: 22px;
 	}
 }
-
 /* Large devices (desktops, 992px and up) */
 @media screen and (min-width: 992px) {
 	html {
 		font-size: 11px;
 	}
 }
-
 /* Extra large devices (very large desktops, 1200px and up) */
 @media screen and (min-width: 1200px) {
 	html {
 		font-size: 13px;
 	}
 }
-
 /* Extra extra large devices (very large desktops, 1400px and up) */
 @media screen and (min-width: 1400px) {
 	html {
 		font-size: 16px;
 	}
 }
-
 /* Extra extra extra large devices (very large desktops, 2000px and up) */
 @media screen and (min-width: 2000px) {
 	html {
@@ -99,29 +105,26 @@ html {
 .verySmallTextSize {
 	font-size: var(--font-verysmall);
 }
-
 .smallTextSize {
+	font-size: var(--font-small);
+}
+.mediumTextSize {
 	font-size: var(--font-medium);
 }
-
 .regularTextSize {
 	font-size: var(--font-normal);
 }
-
 .largeTextSize {
 	font-size: var(--font-large);
 }
-
 .buttonTextSize {
 	font-size: var(--font-large);
 }
-
 h3 {
 	font-size: var(--font-extralarge);
 	color: var(--color-title);
 	font-weight: bold;
 }
-
 h4 {
 	color: var(--color-axis);
 }
@@ -142,6 +145,8 @@ body>.container-fluid {
 	text-align: center;
 }
 
+/* DEFINITION OF COLOR SCHEMES */
+
 /* Overarching colors and fonts*/
 :root {
 	--fontCol: rgba(160, 160, 160, 0.82);
@@ -223,6 +228,8 @@ body>.container-fluid {
 	--padding-widget: 0px;
 }
 
+/* Smart Home Device color sets */
+
 .shcolors-normal {
 	--color-devices: #f16913;
 	--color-sh1: #fd8d3c;

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

@@ -40,6 +40,10 @@ export function formatWattH(
 	useMWh = false,
 ) {
 	let wattResult
+	if (wattH > 1000000) {
+		useMWh = true
+		wattH = wattH / 1000
+	}
 	if (wattH >= 1000 && decimalPlaces < 4) {
 		switch (decimalPlaces) {
 			case 0:

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

@@ -9,7 +9,6 @@
 
 import { reactive, ref } from 'vue'
 import { GlobalData } from './types'
-// import { ShDevice, shDevices } from '@/components/smartHome/model'
 import type { PowerItem, ItemProps } from './types'
 
 export const masterData: { [key: string]: ItemProps } = reactive({
@@ -29,20 +28,76 @@ export const masterData: { [key: string]: ItemProps } = reactive({
 	devices: { name: 'Geräte', color: 'var(--color-devices)', icon: '\uf1e6' },
 	batIn: { name: '> Bat', color: 'var(--color-battery)', icon: '\uf061\uf5df' },
 	house: { name: 'Haus', color: 'var(--color-house)', icon: '\uf015' },
+	cp1: { name: 'Ladepunkt', color: 'var(--color-cp1)', icon: 'Ladepunkt' },
+	cp2: { name: 'Ladepunkt', color: 'var(--color-cp2)', icon: 'Ladepunkt' },
+	cp3: { name: 'Ladepunkt', color: 'var(--color-cp3)', icon: 'Ladepunkt' },
+	cp4: { name: 'Ladepunkt', color: 'var(--color-cp4)', icon: 'Ladepunkt' },
+	cp5: { name: 'Ladepunkt', color: 'var(--color-cp5)', icon: 'Ladepunkt' },
+	cp6: { name: 'Ladepunkt', color: 'var(--color-cp6)', icon: 'Ladepunkt' },
+	cp7: { name: 'Ladepunkt', color: 'var(--color-cp7)', icon: 'Ladepunkt' },
+	cp8: { name: 'Ladepunkt', color: 'var(--color-cp8)', icon: 'Ladepunkt' },
+	sh1: { name: 'Gerät', color: 'var(--color-sh1)', icon: 'Gerät' },
+	sh2: { name: 'Gerät', color: 'var(--color-sh2)', icon: 'Gerät' },
+	sh3: { name: 'Gerät', color: 'var(--color-sh3)', icon: 'Gerät' },
+	sh4: { name: 'Gerät', color: 'var(--color-sh4)', icon: 'Gerät' },
+	sh5: { name: 'Gerät', color: 'var(--color-sh5)', icon: 'Gerät' },
+	sh6: { name: 'Gerät', color: 'var(--color-sh6)', icon: 'Gerät' },
+	sh7: { name: 'Gerät', color: 'var(--color-sh7)', icon: 'Gerät' },
+	sh8: { name: 'Gerät', color: 'var(--color-sh8)', icon: 'Gerät' },
+	sh9: { name: 'Gerät', color: 'var(--color-sh9)', icon: 'Gerät' },
 })
-export const historicSummary: { [key: string]: PowerItem } = reactive({
-	//evuIn: { name: 'Netz', power: 0, energy: 0, energyPv: 0, energyBat: 0, pvPercentage: 0, color: 'var(--color-evu)', icon: masterData.evuIn.icon },
-	evuIn: createPowerItem('evuIn'),
-	pv: createPowerItem('pv'),
-	batOut: createPowerItem('batOut'),
-	evuOut: createPowerItem('evuOut'),
-	charging: createPowerItem('charging'),
-	devices: createPowerItem('devices'),
-	batIn: createPowerItem('batIn'),
-	house: createPowerItem('house'),
-})
+class HistoricSummary {
+	private _items: { [key: string]: PowerItem } = {}
+	constructor() {
+		this.addItem('evuIn')
+		this.addItem('pv')
+		this.addItem('batOut')
+		this.addItem('evuOut')
+		this.addItem('charging')
+		this.addItem('devices')
+		this.addItem('batIn')
+		this.addItem('house')
+	}
+	get items() {
+		return this._items
+	}
+	keys() {
+		return Object.keys(this._items)
+	}
+	values() {
+		return Object.values(this._items)
+	}
+	addItem(key: string) {
+		this._items[key] = createPowerItem(key)
+	}
+	setEnergy(cat: string, val: number) {
+		this._items[cat].energy = val
+	}
+	setEnergyPv(cat: string, val: number) {
+		this._items[cat].energyPv = val
+	}
+	setEnergyBat(cat: string, val: number) {
+		this._items[cat].energyBat = val
+	}
+	setPvPercentage(cat: string, val: number) {
+		this._items[cat].pvPercentage = val
+	}
+	calculateHouseEnergy() {
+		this._items.house.energy =
+			this._items.evuIn.energy +
+			this._items.pv.energy +
+			this._items.batOut.energy -
+			this._items.evuOut.energy -
+			this._items.batIn.energy -
+			this._items.charging.energy -
+			this._items.devices.energy
+	}
+}
+export let historicSummary = new HistoricSummary()
+export function resetHistoricSummary() {
+	historicSummary = new HistoricSummary()
+}
 export const sourceSummary: { [key: string]: PowerItem } = reactive({
-	// evuIn: { name: 'Netz', power: 0, energy: 0, energyPv: 0, energyBat: 0, pvPercentage: 0, color: 'var(--color-evu)', icon: masterData.evuIn.icon },
 	evuIn: createPowerItem('evuIn'),
 	pv: createPowerItem('pv'),
 	batOut: createPowerItem('batOut'),
@@ -54,32 +109,23 @@ export const usageSummary: { [key: string]: PowerItem } = reactive({
 	batIn: createPowerItem('batIn'),
 	house: createPowerItem('house'),
 })
-// export const shDevices: { [key: number]: ShDevice } = reactive([])
 export const globalData = reactive(new GlobalData())
 export const etPriceList = ref('')
-// Initiate the model
-// Array.from({ length: 9 }, (v, i) => (shDevices[i] = new ShDevice(i)))
-// init colors
-
-/* Object.values(shDevices).forEach((device) => {
-	device.color = 'var(--color-sh' + (device.id + 1) + ')'
-}) */
-
+export const energyMeterNeedsRedraw = ref(false)
 function createPowerItem(key: string): PowerItem {
 	const p: PowerItem = {
-		name: masterData[key].name,
+		name: masterData[key] ? masterData[key].name : 'item',
 		power: 0,
 		energy: 0,
 		energyPv: 0,
 		energyBat: 0,
 		pvPercentage: 0,
-		color: masterData[key].color,
-		icon: masterData[key].icon,
+		color: masterData[key] ? masterData[key].color : 'var(--color-charging)',
+		icon: masterData[key] ? masterData[key].icon : '',
 	}
 	return p
 }
 export function correctHouseConsumption() {
 	usageSummary.house.power =
 		usageSummary.house.power - usageSummary.devices.power
-	// usageSummary.house.energy = usageSummary.house.energy - usageSummary.devices.energy
 }

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

@@ -8,8 +8,8 @@ import {
 } from './model'
 import { processLiveGraphMessages } from '../../components/powerGraph/processLiveGraphData'
 import { processDayGraphMessages } from '../../components/powerGraph/processDayGraphData'
-import { processMonthGraphMessages } from '../../components/powerGraph/processMonthGraphData'
-import { processYearGraphMessages } from '../../components/powerGraph/processYearGraphData'
+import { processMonthGraphMessages } from '../../components/powerGraph/processMonthYearGraphData'
+import { processYearGraphMessages } from '../../components/powerGraph/processMonthYearGraphData'
 import { initGraph } from '@/components/powerGraph/model'
 import { processBatteryMessages } from '@/components/batteryList/processMessages'
 import { processEtProviderMessages } from '@/components/priceChart/processMessages'

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

@@ -41,6 +41,8 @@ const topics: { [topic: string]: string } = {
 	shSetManual: 'openWB/set/LegacySmartHome/config/set/Devices/%/mode',
 	shSwitchOn:
 		'openWB/set/LegacySmartHome/config/set/Devices/%/device_manual_control',
+	socUpdate: 'openWB/set/vehicle/%/get/force_soc_update',
+	setSoc: 'openWB/set/vehicle/%/soc_module/calculated_soc_state/manual_soc',
 }
 export function updateServer(
 	item: string,

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

@@ -11,20 +11,21 @@ import { addShDevice, shDevices } from '@/components/smartHome/model'
 import { ChargeMode } from '@/components/chargePointList/model'
 import { sourceSummary } from './model'
 export class Config {
-	private _showRelativeArcs: boolean = false
-	showTodayGraph: boolean = true
-	private _graphPreference: string = 'today'
-	private _usageStackOrder: number = 0
-	private _displayMode: string = 'dark'
-	private _showGrid: boolean = false
-	private _smartHomeColors: string = 'normal'
-	private _decimalPlaces: number = 1
+	private _showRelativeArcs = false
+	showTodayGraph = true
+	private _graphPreference = 'today'
+	private _usageStackOrder = 0
+	private _displayMode = 'dark'
+	private _showGrid = false
+	private _smartHomeColors = 'normal'
+	private _decimalPlaces = 1
 	private _showQuickAccess = true
 	private _simpleCpList = false
 	private _showAnimations = true
 	private _preferWideBoxes = false
-	private _maxPower: number = 4000
-	private _fluidDisplay: boolean = false
+	private _maxPower = 4000
+	private _fluidDisplay = false
+	private _showClock = false
 	private _debug: boolean = false
 	isEtEnabled: boolean = false
 	etPrice: number = 20.5
@@ -167,6 +168,16 @@ export class Config {
 	setFluidDisplay(on: boolean) {
 		this._fluidDisplay = on
 	}
+	get showClock() {
+		return this._showClock
+	}
+	set showClock(on: boolean) {
+		this._showClock = on
+		savePrefs()
+	}
+	setShowClock(on: boolean) {
+		this._showClock = on
+	}
 	get debug() {
 		return this._debug
 	}
@@ -190,13 +201,6 @@ export function initConfig() {
 	doc.classed('shcolors-advanced', globalConfig.smartHomeColors == 'advanced')
 	doc.classed('shcolors-normal', globalConfig.smartHomeColors == 'normal')
 }
-export let initializeEnergyGraph = true
-export function energyGraphInitialized() {
-	initializeEnergyGraph = false
-}
-export function setInitializeEnergyGraph(val: boolean) {
-	initializeEnergyGraph = val
-}
 export let animateEnergyGraph = true
 export function setAnimateEnergyGraph(val: boolean) {
 	animateEnergyGraph = val
@@ -317,6 +321,7 @@ interface Preferences {
 	animation?: boolean
 	wideB?: boolean
 	fluidD?: boolean
+	clock?: boolean
 }
 
 function writeCookie() {
@@ -337,6 +342,7 @@ function writeCookie() {
 	prefs.animation = globalConfig.showAnimations
 	prefs.wideB = globalConfig.preferWideBoxes
 	prefs.fluidD = globalConfig.fluidDisplay
+	prefs.clock = globalConfig.showClock
 	document.cookie =
 		'openWBColorTheme=' + JSON.stringify(prefs) + '; max-age=16000000'
 }
@@ -395,5 +401,8 @@ function readCookie() {
 		if (prefs.fluidD != undefined) {
 			globalConfig.setFluidDisplay(prefs.fluidD)
 		}
+		if (prefs.clock != undefined) {
+			globalConfig.setShowClock(prefs.clock)
+		}
 	}
 }