# KPI-Karte Widget type: `opendash-widget-hc-kpi-canvas` · Plugin: `@opendash/plugin-highcharts`  ### Beschreibung Das **KPI-Karte Widget** ermöglicht es dir, wichtige Leistungskennzahlen (Key Performance Indicators) sowie benutzerdefinierte Elemente übersichtlich auf deinem Dashboard zu platzieren. Durch die Option, ein individuelles Hintergrundbild hochzuladen und interaktive Markierungen zu setzen, kannst du Datenpunkte direkt im passenden visuellen Kontext (z. B. auf einem Hallenplan oder einer Maschinenzeichnung) darstellen. ### Voraussetzungen * Ein Dashboard mit Administrations- oder Bearbeitungsrechten. * Optionale Bilddateien (z. B. PNG oder JPEG), die als Hintergrund für die Karte dienen sollen. * Bereits konfigurierte Datenpunkte oder Links innerhalb der IoT-Plattform, die auf der Karte platziert werden können. --- ## 1. Konfiguration und Einrichtung 1. **Einstellungen öffnen**: Klicke oben rechts am Widget auf die drei vertikalen Punkte und wähle im Dropdown-Menü den Punkt **Einstellungen** aus. 2. **Hintergrundbild hochladen**: Klicke im Konfigurationsfenster auf die Schaltfläche **Bild hochladen**. Ziehe die gewünschte Bilddatei per Drag-and-Drop in die markierte Fläche oder klicke auf **Upload**, um eine Datei von deinem Computer auszuwählen. Bestätige anschließend im Hauptfenster der Widget-Einstellungen mit **Speichern**. 3. **Markierung bearbeiten**: Klicke direkt auf das auf der Karte eingeblendete Label **Neue Markierung**, um in das Bearbeitungsfenster zu gelangen. 4. **Art der Markierung wählen**: Öffne das Dropdown-Menü unter **Bitte wählen Sie eine Art der Markierung und die passenden Parameter** und wähle die gewünschte Visualisierungsart aus (z. B. *Text-Markierung*, *Dashboard-Link-Markierung*, *Daten-Markierung*, *Widget-Markierung* oder *Icon-Markierung*). 5. **Details anpassen**: Vergib unter **Einstellungen** einen passenden **Namen** für die Markierung, passe bei Bedarf Schriftgröße oder Rotation an und wähle das gewünschte Rahmen- und Schattierungs-Layout aus den Vorlagen aus. 6. **Konfiguration abschließen**: Klicke unten rechts im Bearbeitungsfenster auf **Speichern**, um die Markierung auf deiner KPI-Karte zu sichern. --- ## 2. Erweiterte Einstellungen & Formatierung | Option | Beschreibung | Funktion | | :--- | :--- | :--- | | **Bild hochladen** | Ermöglicht das Hinterlegen einer Grafik für das Widget. | Definiert das visuelle Fundament bzw. das Hintergrundbild der Karte. | | **Art der Markierung** | Dropdown-Menü zur Auswahl des Inhaltstyps (z. B. Text, Daten oder Links). | Bestimmt, ob die gesetzte Markierung einen statischen Text, Live-IoT-Daten oder eine Weiterleitung anzeigt. | | **Schrift skalieren & Rotieren** | Schieberegler und Eingabefelder für Größe (z. B. `T 0.9`) und Winkel (z. B. `0`). | Passt die Dimensionen und die Ausrichtung des Textes innerhalb der Markierung an. | | **Rahmen und Schattierung** | Schaltflächen mit verschiedenen Kontur- und Rastermustern. | Bestimmt das optische Design und die Abgrenzung der Markierungskachel auf dem Bild. | | **Sichtbarkeitsregel** | Erweiterbarer Bereich für logische Bedingungen. | Steuert, unter welchen Voraussetzungen oder Grenzwerten die Markierung auf der Karte ein- oder ausgeblendet wird. | | **Zurücksetzen** | Steuerungs-Schaltfläche auf der Widget-Oberfläche. | Setzt die Ansicht oder die Positionierungen innerhalb der Karte auf die Standardwerte zurück. | --- ## 3. Das fertige Dashboard-Ergebnis Nach der erfolgreichen Einrichtung präsentiert sich die KPI-Karte als interaktives Element auf deinem Dashboard. Das hochgeladene Hintergrundbild füllt die Kachel aus, während die konfigurierten Markierungen präzise an den von dir definierten Stellen als Overlays platziert sind. Endnutzer können die Werte direkt im räumlichen oder prozessualen Kontext ablesen und – je nach gewählter Markierungsart – durch Anklicken direkt zu verknüpften Dashboards oder tiefergehenden Datenanalysen springen. > 💡 **Praxis-Tipp:** Nutze als Hintergrundbild am besten eine vereinfachte Schemagraphik oder einen Grundriss deiner Werkshalle. Platziere die Daten-Markierungen genau dort, wo sich die echten Maschinen befinden. So sieht jeder Anwender auf den ersten Blick, welche Anlage welchen Wert liefert, ohne Bezeichnungen auswendig lernen zu müssen.