Battery: update page docs and screenshots for card layout

.prettierignore

@@ -2,7 +2,7 @@
 build
 node_modules
 templates
-static
+public/openapi.yaml
 
 # Prettier mangles MDX with <Tabs> nested inside numbered lists inside <Steps>
 src/content/docs/de/installation/linux.mdx

screenshot-generator/recipes/basics.evcc.yaml

@@ -43,6 +43,7 @@ meters:
       source: js
       script: |
         42
+    batterymodes: ["normal", "hold", "charge", "holdcharge"]
     batterymode:
       source: js
       vm: shared

screenshot-generator/recipes/batterie-boost.evcc.yaml

@@ -35,6 +35,7 @@ meters:
       source: js
       script: |
         75
+    batterymodes: ["normal", "hold", "charge", "holdcharge"]
     batterymode:
       source: js
       vm: shared

screenshot-generator/recipes/battery.spec.js

@@ -1,14 +1,6 @@
 import { loop } from "./utils/loop";
 const { test, expect } = require("@playwright/test");
-import {
-  CURSOR,
-  ONE,
-  TWO,
-  THREE,
-  FOUR,
-  placeOverlay,
-  removeOverlays,
-} from "./utils/overlay";
+import { CURSOR, placeOverlay, removeOverlays } from "./utils/overlay";
 const { start, stop } = require("./utils/evcc");
 
 const BASE_PATH = "features/screenshots";
@@ -39,41 +31,35 @@ loop((screenshot) => {
     await page
       .locator('[data-testid="bottom-tab-bar"] a[href="#/battery"]')
       .click();
-    await expect(page.locator(".batteryLimits")).toBeVisible();
+    const usageCard = "main section:has(#batteryPriority)";
+    await expect(page.locator(usageCard)).toBeVisible();
 
-    await page.locator("#batterySettingsPriority").selectOption("50");
+    await page.locator("#batteryPriority").selectOption("50");
     await wait(300);
-    await placeOverlay(page, "#batterySettingsPriority", CURSOR, 0, 10);
-    await placeOverlay(page, ".battery .bg-darkest-green", ONE, -100, -21);
-    await placeOverlay(page, ".battery .bg-darker-green", TWO, -100, -21);
+    await placeOverlay(page, "#batteryPriority", CURSOR, 0, 10);
 
-    await screenshot(page, `${BASE_PATH}/battery-priority`, "main > .row", {
+    await screenshot(page, `${BASE_PATH}/battery-priority`, usageCard, {
       all: 20,
-      top: 80,
     });
     await removeOverlays(page);
 
     // buffer soc
-    await page.locator("#batterySettingsBuffer").selectOption("75");
+    await page.locator("#batteryBuffer").selectOption("75");
     await wait(300);
-    await placeOverlay(page, "#batterySettingsBuffer", CURSOR, 0, 10);
-    await placeOverlay(page, ".battery .bg-dark-green", THREE, -100, -21);
+    await placeOverlay(page, "#batteryBuffer", CURSOR, 0, 10);
 
-    await screenshot(page, `${BASE_PATH}/battery-buffer`, "main > .row", {
+    await screenshot(page, `${BASE_PATH}/battery-buffer`, usageCard, {
       all: 20,
-      top: 80,
     });
     await removeOverlays(page);
 
     // buffer start
-    await page.locator("#batterySettingsBufferStart").selectOption("90");
+    await page.locator("#batteryBufferStart").selectOption("90");
     await wait(300);
-    await placeOverlay(page, "#batterySettingsBufferStart", CURSOR, 0, 10);
-    await placeOverlay(page, ".bufferStartIndicator", FOUR, -100, -21);
+    await placeOverlay(page, "#batteryBufferStart", CURSOR, 0, 10);
 
-    await screenshot(page, `${BASE_PATH}/battery-bufferstart`, "main > .row", {
+    await screenshot(page, `${BASE_PATH}/battery-bufferstart`, usageCard, {
       all: 20,
-      top: 80,
     });
     await removeOverlays(page);
   });
@@ -91,10 +77,17 @@ loop((screenshot) => {
     await wait(300);
     await page.locator("main #smartCostLimit-battery").selectOption("0.12");
 
+    // card sits at the bottom of a long page: make it fit and hide the fixed tab bar
+    await page.setViewportSize({ width: 1280, height: 1800 });
+    await page.addStyleTag({
+      content: '[data-testid="bottom-tab-bar"] { display: none !important }',
+    });
+    await wait(300);
+
     await screenshot(
       page,
       `${BASE_PATH}/battery-grid-charging`,
-      "main > div:has(#smartCostLimit-battery)",
+      "main section:has(#smartCostLimit-battery)",
       {
         all: 20,
       },

src/content/docs/de/features/battery.mdx

@@ -25,8 +25,9 @@ Dieses Verhalten kannst du auf der **Batterie**-Seite konfigurieren, die du übe
   caption="Batterie-Seite in der Navigationsleiste"
 />
 
-Hier stellst du ein, bis zu welchem Ladestand die Hausbatterie prioritär geladen werden soll und ab wann das Elektroauto den Überschuss nutzen darf.
-Mit der unteren Grenze legst du fest, wie viel Energie für Hausverbrauch reserviert bleibt (1) und in welchem Bereich das Fahrzeug Vorrang hat (2).
+Die Seite zeigt den aktuellen Zustand jeder Batterie und den Ladestand der letzten Tage.
+Unter **Batterienutzung** stellst du ein, bis zu welchem Ladestand die Hausbatterie prioritär geladen wird.
+Oberhalb dieses Ladestands erhalten die Ladepunkte den Überschuss.
 
 <Screenshot
   name="features/screenshots/battery-priority"
@@ -45,7 +46,7 @@ Im PV-Modus versucht evcc die Ladung so zu steuern, dass nur Sonnenenergie direk
 Ein Entladen der Hausbatterie wird dabei vermieden.
 Mit der Funktion **Batterieunterstütztes Fahrzeugladen** kannst du einen Teil deiner Hausbatterie aber explizit für das Laden des Elektroautos freigeben.
 
-Die obere Grenze legt fest, welcher Teil (3) der gespeicherten Energie ins Elektroauto rüberfließen darf.
+Unter **Batterie als Ladepuffer** legst du fest, ab welchem Ladestand gespeicherte Energie ins Elektroauto fließen darf.
 
 <Screenshot
   name="features/screenshots/battery-buffer"
@@ -71,8 +72,8 @@ Im PV-Modus startet der Ladevorgang nur bei verfügbarem Überschuss.
 Steckst du dein Auto an, wenn kein Überschuss verfügbar ist, wird der Ladevorgang nicht gestartet.
 Auch nicht, wenn genügend freigegebene Energie in der Hausbatterie vorhanden ist.
 
-Mit der Option "startet automatisch ..." kannst du dieses Verhalten ändern.
-Setzt du hier bspw. den Wert auf "... wenn über 90%" startet der Ladevorgang, wenn die Hausbatterie diesen Stand erreicht hat.
+Mit der Option "PV-Ladung automatisch starten ..." kannst du dieses Verhalten ändern.
+Setzt du hier bspw. den Wert auf "... ab einem Speicherstand von 90%", startet der Ladevorgang, wenn die Hausbatterie diesen Stand erreicht hat.
 Wie auch im vorherigen Beispiel endet die Ladung, wenn der Ladestand der Hausbatterie auf das eingestellte Limit (hier 75%) abgesunken ist.
 
 <Screenshot
@@ -139,7 +140,7 @@ Szenario 2: Du hast einen dynamischen Stromtarif und möchtest dein Auto nachts
 Allerdings wird die Hausbatterie versuchen, den Ladebedarf zu decken, solange sie noch Energie hat.
 Erst wenn der Speicher leer ist, wird der günstige Nachtstrom genutzt.
 
-Unterstützt dein System aktive Batteriesteuerung, kannst du auf der **Batterie**-Seite die Option "Entladesperre beim Schnelladen" aktivieren.
+Unterstützt dein System aktive Batteriesteuerung, kannst du auf der **Batterie**-Seite die Option "Entladung der Hausbatterie im Schnell-Modus und bei geplantem Laden verhindern" aktivieren.
 Damit wird die Hausbatterie in einen Sperrzustand versetzt, wenn ein Schnellladevorgang aktiv ist.
 Dies kann durch den Schnell-Modus, smartes Netzladen, Ladeplanung oder Mindestladung ausgelöst werden.
 

src/content/docs/en/features/battery.mdx

@@ -25,8 +25,9 @@ You can configure this behavior on the **Battery** page, which you can open from
   caption="Battery page in the navigation bar"
 />
 
-Here you set the charge level up to which the home battery should be charged with priority and from when the electric car can use the surplus.
-With the lower limit you determine how much energy is reserved for home consumption (1) and in which area the vehicle has priority (2).
+The page shows the current state of each battery and the charge level over the past days.
+Under **Battery usage** you set the charge level up to which the home battery is charged with priority.
+Above this level the charging points receive the surplus.
 
 <Screenshot
   name="features/screenshots/battery-priority"
@@ -45,7 +46,7 @@ In Solar mode, evcc tries to control the charge so that only solar energy is use
 Discharging the home battery is avoided.
 With the **Battery-supported vehicle charging** function, you can explicitly release part of your home battery for charging the electric car.
 
-The upper limit determines which part (3) of the stored energy can flow into the electric car.
+Under **Battery as charging buffer** you set the level above which stored energy may flow into the electric car.
 
 <Screenshot
   name="features/screenshots/battery-buffer"
@@ -70,8 +71,8 @@ In solar mode, the charging process only starts when there is a surplus availabl
 If you plug in your car when there is no surplus available, the charging process will not start.
 Not even if there is enough released energy in the home battery.
 
-You can change this behavior with the "start automatically ..." option.
-If you set the value here to "... when over 90%", for example, the charging process will start when the home battery has reached this level.
+You can change this behavior with the "Start solar charging automatically ..." option.
+If you set it to "... once the battery is above 90%", for example, the charging process will start when the home battery has reached this level.
 As in the previous example, the charging ends when the charge level of the home battery has dropped to the set limit (here 75%).
 
 <Screenshot
@@ -138,7 +139,7 @@ Scenario 2: You have a dynamic electricity tariff and want to charge your car at
 However, the home battery will try to cover the charging demand as long as it has energy left.
 The cheap night-time electricity is only used once the home battery is empty.
 
-If your system supports active battery control, you can activate the "Prevent discharge in fast mode and planned charging" option on the **Battery** page.
+If your system supports active battery control, you can activate the "Prevent home battery discharge in fast mode and during planned charging" option on the **Battery** page.
 This puts the home battery into a locked state when a fast charging process is active. This can be triggered by fast mode, smart grid charging, charging planning or minimum charging.
 
 The blocking state applies for the period of fast charging.