diff --git a/astro.config.mjs b/astro.config.mjs index ed61e2d1f..b6ec73bbc 100644 --- a/astro.config.mjs +++ b/astro.config.mjs @@ -214,6 +214,7 @@ export default defineConfig({ }, { label: "Plugins", slug: "reference/plugins" }, { label: "Modbus", slug: "reference/modbus" }, + { label: "Web UI", slug: "reference/web-ui" }, { label: "CLI", collapsed: true, diff --git a/src/content/docs/de/reference/web-ui.md b/src/content/docs/de/reference/web-ui.md new file mode 100644 index 000000000..aea567408 --- /dev/null +++ b/src/content/docs/de/reference/web-ui.md @@ -0,0 +1,84 @@ +--- +title: "Web UI" +sidebar: + order: 3 +--- + +Die Weboberfläche läuft auf Port `7070` und nutzt Hash-Routing. +Über die URL lassen sich Seite und Anzeigeeinstellungen festlegen. + +## Verfügbare Seiten {#links} + +Jede Seite hat ihre eigene Hash-Route. +Du kannst direkt darauf verlinken oder sie als Lesezeichen speichern. + +| Seite | Route | Login | Parameter | +| ------------------ | ------------ | ----- | ------------------------------------------------- | +| Start / Ladepunkte | `#/` | nein | `lp` | +| Hausbatterie | `#/battery` | nein | — | +| Vorhersage | `#/forecast` | nein | — | +| Ladevorgänge | `#/sessions` | nein | `month`, `year`, `loadpoint`, `vehicle`, `period` | +| Konfiguration | `#/config` | ja | — | +| Logs | `#/log` | ja | `areas`, `level` | +| Historie 🧪 | `#/history` | nein | `day`, `month`, `year`, `period` | +| Optimize 🧪 | `#/optimize` | nein | — | +| Problem melden | `#/issue` | ja | — | + +🧪 kennzeichnet experimentelle Seiten. + +| Parameter | Beschreibung | +| ----------- | --------------------------------------------- | +| `lp` | Ladepunkt-Nummer, beginnend bei `1` | +| `year` | Anzuzeigendes Jahr, z. B. `2026` | +| `month` | Monat, `1`–`12` | +| `day` | Tag des Monats, `1`–`31` | +| `period` | Zeitraum: `day`, `month`, `year` oder `total` | +| `loadpoint` | Titel des Ladepunkts | +| `vehicle` | Titel des Fahrzeugs | +| `areas` | Anzuzeigende Log-Bereiche, kommagetrennt | +| `level` | Minimales Log-Level | + +### Beispiele {#examples} + +Wählt einen Ladepunkt auf dem Startbildschirm vor: + +``` +http://evcc.local:7070/#/?lp=1 +``` + +Am einfachsten kommst du an den passenden Link, indem du den Ladepunkt in der Oberfläche auswählst und die Adresse aus dem Browser kopierst. + +Filtere **Ladevorgänge** oder **Historie** nach Zeitraum oder Gerät: + +``` +http://evcc.local:7070/#/sessions?year=2026&month=3 +``` + +## Einstellungen anwenden {#settings} + +Die unter **Mehr → Darstellung** wählbaren Einstellungen lassen sich auch über die URL setzen. +So lässt sich das Aussehen der Oberfläche unabhängig von den im Browser gespeicherten Einstellungen erzwingen, etwa für Kiosk-Bildschirme, Dashboards und iframe-Einbindungen: + +| Name | Parameter | Werte | +| ---------- | --------- | ----------------------- | +| Design | `theme` | `auto`, `light`, `dark` | +| Sprache | `lang` | `auto`, `de`, … | +| Einheit | `unit` | `km`, `mi` | +| Zeitformat | `format` | `12`, `24` | + +### Beispiel {#example} + +``` +http://evcc.local:7070/?theme=dark&lang=de&unit=mi&format=24 +``` + +Die Werte werden beim Laden einmalig angewendet, als Browser-Einstellung gespeichert und dann aus der Adresszeile entfernt. + +`lang` akzeptiert jeden Sprachcode mit Übersetzung im [`i18n`-Ordner](https://github.com/evcc-io/evcc/tree/master/i18n) (z. B. `de`, `fr`, `zh-Hans`) oder `auto` für die Browsersprache. + +Einstellungen und eine Seite lassen sich in einer URL kombinieren. +Die Einstellungen stehen vor dem `#`, die Seite dahinter: + +``` +http://evcc.local:7070/?theme=dark&lang=de#/sessions +``` diff --git a/src/content/docs/en/reference/web-ui.md b/src/content/docs/en/reference/web-ui.md new file mode 100644 index 000000000..30f1496bd --- /dev/null +++ b/src/content/docs/en/reference/web-ui.md @@ -0,0 +1,84 @@ +--- +title: "Web UI" +sidebar: + order: 3 +--- + +The web UI runs on port `7070` and uses hash routing. +The URL can set both the page and the display settings. + +## Available Pages {#links} + +Each page has its own hash route. +Link to it directly or bookmark it. + +| Page | Route | Login | Parameters | +| ----------------- | ------------ | ----- | ------------------------------------------------- | +| Home / loadpoints | `#/` | no | `lp` | +| Home Battery | `#/battery` | no | — | +| Forecast | `#/forecast` | no | — | +| Charging Sessions | `#/sessions` | no | `month`, `year`, `loadpoint`, `vehicle`, `period` | +| Configuration | `#/config` | yes | — | +| Logs | `#/log` | yes | `areas`, `level` | +| History 🧪 | `#/history` | no | `day`, `month`, `year`, `period` | +| Optimize 🧪 | `#/optimize` | no | — | +| Report a problem | `#/issue` | yes | — | + +🧪 marks experimental pages. + +| Parameter | Description | +| ----------- | --------------------------------------------- | +| `lp` | Loadpoint number, starting at `1` | +| `year` | Year to show, e.g. `2026` | +| `month` | Month, `1`–`12` | +| `day` | Day of month, `1`–`31` | +| `period` | Time range: `day`, `month`, `year` or `total` | +| `loadpoint` | Loadpoint title | +| `vehicle` | Vehicle title | +| `areas` | Log areas to show, comma-separated | +| `level` | Minimum log level | + +### Examples {#examples} + +Pre-select a loadpoint on the home screen: + +``` +http://evcc.local:7070/#/?lp=1 +``` + +The simplest way to get the right link is to select the loadpoint in the UI and copy the address from your browser. + +Filter **Charging Sessions** or **History** by time range or device: + +``` +http://evcc.local:7070/#/sessions?year=2026&month=3 +``` + +## Applying Settings {#settings} + +The options under **More → User Interface** can also be set through the URL. +This forces the UI's appearance regardless of any stored browser preference, useful for kiosk screens, dashboards and iframe embeds: + +| Name | Parameter | Values | +| ----------- | --------- | ----------------------- | +| Design | `theme` | `auto`, `light`, `dark` | +| Language | `lang` | `auto`, `de`, … | +| Units | `unit` | `km`, `mi` | +| Time format | `format` | `12`, `24` | + +### Example {#example} + +``` +http://evcc.local:7070/?theme=dark&lang=de&unit=mi&format=24 +``` + +The values are applied once on load, stored as a browser preference and then removed from the address bar. + +`lang` accepts any language code with a translation in the [`i18n` folder](https://github.com/evcc-io/evcc/tree/master/i18n) (e.g. `de`, `fr`, `zh-Hans`) or `auto` to follow the browser language. + +Settings and a page can be combined in one URL. +Settings go before the `#`, the page after it: + +``` +http://evcc.local:7070/?theme=dark&lang=de#/sessions +```