@@ -624,10 +716,28 @@ export default {
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg"
>
+
+
+
+
+
+
+
@@ -664,9 +775,13 @@ export default {
:key="component.id"
:class="component.class.base"
:transform="`translate(${calcColumnX(component.position.column)}, ${calcRowY(component.position.row)})`"
- @click="beginAnimation(`animate-label-${component.id}`); component.clicked ? component.clicked() : null"
+ @click="
+ beginAnimation(`animate-label-${component.id}`);
+ component.clicked ? component.clicked() : null;
+ "
>
+
+
+
-
+
+
{{ component.label[0] }}
+
{{ component.label[1] }}
@@ -750,27 +876,33 @@ export default {
+
+
-
+
+
-
@@ -857,16 +991,12 @@ path.animatedReverse.vehicle {
}
circle {
- fill: black;
+ fill: #3b3b3d;
fill-opacity: 1;
- stroke: gray;
- stroke-width: v-bind(svgStrokeWidth);
- stroke-miterlimit: 2;
- stroke-opacity: 1;
}
rect {
- stroke-width: v-bind(svgStrokeWidth);
+ fill: #3b3b3d;
}
@keyframes dash {
@@ -885,7 +1015,7 @@ text {
font-size: v-bind(svgFontSize);
line-height: 1.25;
font-family: Arial;
- fill: white;
+ fill: #e8eaee;
fill-opacity: 1;
}
@@ -901,85 +1031,43 @@ text .fill-dark {
fill: var(--color--dark);
}
-.grid text {
- fill: var(--color--danger);
-}
-
-.grid circle,
-.grid rect {
- stroke: var(--color--danger);
-}
-
-.grid circle {
- fill: var(--color--danger-90);
-}
-
-.pv text {
- fill: var(--color--success);
-}
-
-.pv circle,
-.pv rect {
- stroke: var(--color--success);
-}
-
-.pv circle {
- fill: var(--color--success-90);
-}
-
-.battery text {
+.battery .value {
fill: var(--color--warning);
}
-.battery circle,
-.battery rect {
- stroke: var(--color--warning);
-}
-
-.battery circle:not(.soc) {
- fill: var(--color--warning-90);
-}
-
-.battery-mode-button {
- stroke: var(--color--warning) !important;
+.battery circle.soc {
+ fill: var(--color--warning-80);
}
-.home text {
+.home .value {
fill: var(--color--light);
}
-.home circle,
-.home rect {
- stroke: var(--color--light);
+#value-charge-point-1 {
+ fill: v-bind(chargePoint1Color);
}
-.home circle {
- fill: var(--color--dark-70);
+#value-charge-point-2 {
+ fill: v-bind(chargePoint2Color);
}
-.charge-point text {
- fill: var(--color--primary);
+#value-charge-point-3 {
+ fill: v-bind(chargePoint3Color);
}
-.charge-point circle,
-.charge-point rect {
- stroke: var(--color--primary);
-}
-
-.charge-point circle {
- fill: var(--color--primary-85);
+#value-vehicle-1 {
+ fill: v-bind(chargePoint1ConnectedVehicleColor);
}
-.vehicle text {
- fill: var(--color--teal);
+#value-vehicle-2 {
+ fill: v-bind(chargePoint2ConnectedVehicleColor);
}
-.vehicle circle,
-.vehicle rect {
- stroke: var(--color--teal);
+#value-vehicle-3 {
+ fill: v-bind(chargePoint3ConnectedVehicleColor);
}
-.vehicle circle:not(.soc) {
- fill: var(--color--teal-85);
+.vehicle circle.soc {
+ fill: var(--color--teal-70);
}
diff --git a/packages/modules/display_themes/cards/source/src/components/DashboardCard.vue b/packages/modules/display_themes/cards/source/src/components/DashboardCard.vue
index 09d914b62f..ec74f5c788 100644
--- a/packages/modules/display_themes/cards/source/src/components/DashboardCard.vue
+++ b/packages/modules/display_themes/cards/source/src/components/DashboardCard.vue
@@ -3,6 +3,12 @@ export default {
name: "DashboardCard",
props: {
color: { type: String, required: true },
+ highlightColor: { type: String, required: false, default: undefined },
+ },
+ computed: {
+ cardBorderColor() {
+ return this.highlightColor || "#00000000"; // default to transparent if highlightColor is not provided
+ },
},
};
@@ -40,5 +46,6 @@ export default {
.card {
----background: inherit !important;
----body--color: var(--contrast-color-for-dark-background) !important;
+ box-shadow: -4px 0px v-bind(cardBorderColor);
}
diff --git a/packages/modules/display_themes/cards/source/src/components/NavItem.vue b/packages/modules/display_themes/cards/source/src/components/NavItem.vue
index 5161c71036..6d6e7977dd 100644
--- a/packages/modules/display_themes/cards/source/src/components/NavItem.vue
+++ b/packages/modules/display_themes/cards/source/src/components/NavItem.vue
@@ -14,7 +14,7 @@ export default {
@@ -24,9 +24,11 @@ export default {
.nav-item {
margin-bottom: var(--spacing) !important;
border-radius: var(--border-radius);
+ border-color: var(--color--light);
}
.nav-item.-active {
- background-color: var(--color--primary);
+ background-color: var(--color--dark-40);
+ color: var(--color--light);
}
diff --git a/packages/modules/display_themes/cards/source/src/main.scss b/packages/modules/display_themes/cards/source/src/main.scss
index dddef1ca46..815184bfc9 100644
--- a/packages/modules/display_themes/cards/source/src/main.scss
+++ b/packages/modules/display_themes/cards/source/src/main.scss
@@ -3,6 +3,7 @@
:root {
--spacing: 0.5rem;
+ --body--background--dark: #242526;
}
/* prevent touch gestures */
diff --git a/packages/modules/display_themes/cards/source/src/stores/mqtt.js b/packages/modules/display_themes/cards/source/src/stores/mqtt.js
index ce7bd2de80..aa4c0218ba 100644
--- a/packages/modules/display_themes/cards/source/src/stores/mqtt.js
+++ b/packages/modules/display_themes/cards/source/src/stores/mqtt.js
@@ -481,6 +481,18 @@ export const useMqttStore = defineStore("mqtt", {
return undefined;
};
},
+ getChargePointColor(state) {
+ return (chargePointId) => {
+ if (
+ state.topics[`openWB/chargepoint/${chargePointId}/config`] !==
+ undefined
+ ) {
+ return state.topics[`openWB/chargepoint/${chargePointId}/config`]
+ .color;
+ }
+ return undefined;
+ };
+ },
getChargePointPower(state) {
return (chargePointId, returnType = "textValue") => {
var power = state.getValueString(
@@ -688,11 +700,28 @@ export const useMqttStore = defineStore("mqtt", {
return undefined;
};
},
- getChargePointConnectedVehicleSoc(state) {
+ getChargePointConnectedVehicleColor(state) {
return (chargePointId) => {
+ const vehicleId = state.getChargePointConnectedVehicleId(chargePointId);
+ if (vehicleId === undefined) {
+ return undefined;
+ }
+ return state.getVehicleColor(vehicleId);
+ };
+ },
+ getVehicleColor(state) {
+ return (vehicleId) => {
return state.topics[
+ `openWB/vehicle/${vehicleId}/color`
+ ];
+ };
+ },
+ getChargePointConnectedVehicleSoc(state) {
+ return (chargePointId) => {
+ let socState = state.topics[
`openWB/chargepoint/${chargePointId}/get/connected_vehicle/soc`
];
+ return socState ? {...socState, soc: Math.round(socState.soc)} : undefined;
};
},
getChargePointConnectedVehicleTimeChargingActive(state) {
@@ -1099,7 +1128,7 @@ export const useMqttStore = defineStore("mqtt", {
case "eco_charging":
return { mode: mode, label: "Eco", class: "secondary" };
case "stop":
- return { mode: mode, label: "Stop", class: "dark" };
+ return { mode: mode, label: "Stop", class: "light" };
default:
console.warn("unknown charge mode:", mode);
return { mode: mode, label: mode, class: mode };
diff --git a/packages/modules/display_themes/cards/source/src/views/StatusView.vue b/packages/modules/display_themes/cards/source/src/views/StatusView.vue
index 7190d61b2a..6664e07917 100644
--- a/packages/modules/display_themes/cards/source/src/views/StatusView.vue
+++ b/packages/modules/display_themes/cards/source/src/views/StatusView.vue
@@ -25,7 +25,7 @@ export default {
-
+
Status
diff --git a/packages/modules/display_themes/cards/source/vite.config.js b/packages/modules/display_themes/cards/source/vite.config.js
index 0c5ee731ad..30ab5c5e2c 100644
--- a/packages/modules/display_themes/cards/source/vite.config.js
+++ b/packages/modules/display_themes/cards/source/vite.config.js
@@ -1,7 +1,8 @@
import { fileURLToPath, URL } from "node:url";
import { defineConfig } from "vite";
-import Vue from "@vitejs/plugin-vue";
+import vue from "@vitejs/plugin-vue";
+import svgLoader from "vite-svg-loader";
import { nodePolyfills } from "vite-plugin-node-polyfills";
import rollupNodePolyfills from "rollup-plugin-polyfill-node";
@@ -11,7 +12,7 @@ import terser from '@rollup/plugin-terser';
// https://vitejs.dev/config/
export default defineConfig(({ command, mode }) => {
var myConfiguration = {
- plugins: [Vue()],
+ plugins: [vue(), svgLoader()],
base: "/openWB/web/display/themes/cards/",
resolve: {
alias: {