# Module ## Einführung Module dienen der Visualierung von Datenpunkten und Informationen. ## Globale Einstellungen für Module Jedes Modul, dass in einem Widget (einer Box) angezeigt wird (und damit nicht fullscreen ist), unterstützt die folgenden Einstellungen: | Parameter | Beschreibung | mögliche Werte | Standard | | ----------- | ------------------------------------- | ---------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------- | | `title` | individueller Titel der Box | beliebiger Wert | | | `icon` | individuelles Icon der Box | beliebiges Icon von | `home` | | `iconStyle` | individueller Style des Icons der Box | [*CSS-Anweisungen*](https://www.w3schools.com/cssref/default.asp) *in Javascript Syntax* | `{ backgroundColor: theme.palette.primary.main, color: '#fff', fontSize: '24px' }` | ## Liste der Module * [AdapterStatus](#modul-adapterstatus) * [Calendar](#modul-calendar) * [Chart](#modul-chart) * [CustomHTML](#modul-customhtml) * [DateTime](#modul-datetime) * [DisplayImage](#modul-displayimage) * [iFrame](#modul-iframe) * [JsonTable](#modul-jsontable) * [Map](#modul-map) * [MediaControl](#modul-mediacontrol) * [StateList](#modul-statelist) * [StateListHorizontal](#modul-statelisthorizontal) * [Weather](#modul-weather) ### Modul: AdapterStatus #### Kurzbeschreibung Zeigt alle installierten Adapter mit ihren Instanzen und dem jeweiligen Status (active & alive, active & not connected, inactive) an. #### Beispiel Screenshots **Screenshot1** ![Screenshot AdapterStatus1.png](https://1985888337-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MRaoQRH-8-Ld5IfTdK_%2Fsync%2F1dc590537294a1623116e84589e252e1eb3960f5.png?generation=1611347691884093\&alt=media) #### Konfiguration | Parameter | Beschreibung | Typ | Standard | | ----------- | ------------------------------- | ------ | -------- | | `updates` | Adapter Updates | Switch | `true` | | `list` | Liste angezeigter Adapter | Text | - | | `blacklist` | Liste nicht angezeigter Adapter | Text | - | ### Modul: Calendar #### Kurzbeschreibung Zeigt ical / ics Inhalte in einem Kalender an. #### Beispiel Screenshots Keine Screenshots verfügbar #### Konfiguration | Parameter | Beschreibung | Typ | Standard | | ----------------- | ----------------------------------------- | ---------- | ---------- | | `calendarPreview` | Zeigt eine Kalender-Vorschau | Switch | `true` | | `calendarView` | Wähle die Art der Anzeige von Ereignissen | RadioGroup | `listView` | | `refresh` | Aktualisierung (in Minuten) | Number | `5` | | `daysReview` | Zeigt vergangene Ereignisse (in Tagen) | Number | - | | `daysPreview` | Zeigt zukünftige Ereignisse (in Tagen) | Number | `7` | ### Modul: Chart #### Kurzbeschreibung Stellt historische Werte (z.B. aus ioBroker.history) grafisch als Chart mittels Chart.js dar. #### Beispiel Screenshots **Screenshot1** ![Screenshot Chart1.png](https://1985888337-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MRaoQRH-8-Ld5IfTdK_%2Fsync%2Fb86c51ed86e1d4be339308210f41e38b2db01460.png?generation=1611347691674797\&alt=media) #### Konfiguration | Parameter | Beschreibung | Typ | Standard | | -------------------------------- | -------------------------------------------- | -------------------------------------------------------------------------- | -------- | | `chartConfigyLeftAxisUnitBefore` | Einheit der y-Achse (vor dem Bezeichner) | Text | - | | `chartConfigyLeftAxisUnitAfter` | Einheit der y-Achse (nach dem Bezeichner) | Text | - | | `chartFilterTimeRangeValue` | Standard-Zeit des historischen Rückblicks | Number | `1` | | `chartFilterTimeRangeUnit` | Standard-Einheit des historischen Rückblicks | Select (`seconds`, `minutes`, `hours`, `days`, `weeks`, `months`, `years`) | `days` | | `liveUpdates` | Live-Aktualisierung | Switch | `true` | | `multiplicator` | Multiplikator | Number | `1` | ### Modul: CustomHTML #### Kurzbeschreibung Zeigt dynamische HTML Inhalte von Datenpunkten an. #### Beispiel Screenshots Keine Screenshots verfügbar #### Konfiguration Keine Konfiguration ### Modul: DateTime #### Kurzbeschreibung Das Modul dient der Anzeige des aktuellen Datums und Zeit. #### Beispiel Screenshots **Screenshot1** ![Screenshot DateTime1.png](https://1985888337-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MRaoQRH-8-Ld5IfTdK_%2Fsync%2Ff21b1427469387d655f4cc1ff387197b7ca0d643.png?generation=1611347691488427\&alt=media) #### Konfiguration | Parameter | Beschreibung | Typ | Standard | | -------------- | ------------------------------------------ | ------ | ------------------------------------------------- | | `format` | Format des Datums / Uhrzeit | Text | `d. MMMM yyyy HH:mm` | | `style` | Style des Textes | Text | `{ "fontSize": "1.5rem", "textAlign": "center" }` | | `city` | Zeigt die Stadt | Switch | `true` | | `sun` | Zeigt Zeiten für Sonnenauf- und -untergang | Switch | `true` | | `calendarweek` | Zeigt die aktuelle Kalenderwoche | Switch | `true` | ### Modul: DisplayImage #### Kurzbeschreibung Zeigt ein Bild aus einer URL oder einem base64-Wert an. #### Beispiel Screenshots Keine Screenshots verfügbar #### Konfiguration | Parameter | Beschreibung | Typ | Standard | | ----------- | ------------------------------------------ | ------ | --------- | | ***`url`*** | Datenpunkt, URL oder Base64-Wert des Bilds | Text | `http://` | | `height` | Höhe des Fensters | Text | `100%` | | `width` | Breite des Fensters | Text | `100%` | | `refresh` | Aktualisierungsintervall | Number | `0` | ### Modul: iFrame #### Kurzbeschreibung Zeigt Inhalte anderer Seiten in einem iFrame an. #### Beispiel Screenshots Keine Screenshots verfügbar #### Konfiguration | Parameter | Beschreibung | Typ | Standard | | ----------- | ---------------------------------- | ------ | --------- | | ***`url`*** | URL, die zu laden / anzuzeigen ist | Text | `http://` | | `height` | Höhe des iFrame Fensters | Text | `100%` | | `width` | Breite des iFrame Fensters | Text | `100%` | | `refresh` | Aktualisierungsintervall | Number | `0` | ### Modul: JsonTable #### Kurzbeschreibung Zeigt eine Tabelle auf Basis einer JSON-Struktur an. #### Beispiel Screenshots Keine Screenshots verfügbar #### Konfiguration | Parameter | Beschreibung | Typ | Standard | | ---------- | ------------- | ------ | ------------------------------------------ | | `thead` | Spalten | Text | `[{ "label": "Spalte", "align": "left" }]` | | `sortable` | Sortierung | Switch | `true` | | `max` | Max. Einträge | Number | - | ### Modul: Map #### Kurzbeschreibung Zeigt eine Karte von OpenStreetMap. #### Beispiel Screenshots **Screenshot1** ![Screenshot Map1.png](https://1985888337-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MRaoQRH-8-Ld5IfTdK_%2Fsync%2F69024f46e2cfd6f5a664f375e0aa7b98bc320144.png?generation=1611347692493510\&alt=media) #### Konfiguration | Parameter | Beschreibung | Typ | Standard | | ------------------ | ---------------------------------- | ----------------------------------------------------------- | -------- | | `defaultZoom` | initialer Zoom der Karte | Number | `10` | | `defaultPosition` | initiale Koordinaten auf der Karte | Text | - | | `tooltipDirection` | Richtung in die der Tooltip öffnet | Select (`auto`, `center`, `top`, `left`, `right`, `bottom`) | `bottom` | | `tooltipPermanent` | Permanenter Tooltip | Switch | `true` | | `height` | Höhe der Karte | Number | `500` | ### Modul: MediaControl #### Kurzbeschreibung Zeigt ein Multimedia-Player an (z. B. Spotify). #### Beispiel Screenshots Keine Screenshots verfügbar #### Konfiguration | Parameter | Beschreibung | Typ | Standard | | --------------- | ---------------- | ------ | -------- | | ***`adapter`*** | Musik Adapter | Select | - | | `coverMode` | Cover Modus | Switch | - | | `coverHeight` | Cover Höhe | Number | `200` | | `coverUrl` | Cover Prefix URL | Text | - | ### Modul: StateList #### Kurzbeschreibung Zeigt eine Liste von States an. #### Beispiel Screenshots **Screenshot1** ![Screenshot StateList1.png](https://1985888337-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MRaoQRH-8-Ld5IfTdK_%2Fsync%2F03aab701ea7c61bf7d6bd1e0380dfa0b1a52a283.png?generation=1611347691539128\&alt=media) **Screenshot2** ![Screenshot StateList2.png](https://1985888337-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MRaoQRH-8-Ld5IfTdK_%2Fsync%2F8b7960956016e6d6db3ca4f0b9a27c1eeac83ffc.png?generation=1611347691541684\&alt=media) **Screenshot3** ![Screenshot StateList3.png](https://1985888337-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MRaoQRH-8-Ld5IfTdK_%2Fsync%2Fa4cae9bf2799fef81768698053c27f00d2b94197.png?generation=1611347691733196\&alt=media) **Screenshot4** ![Screenshot StateList4.png](https://1985888337-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MRaoQRH-8-Ld5IfTdK_%2Fsync%2F6e0a677dbd8a4fc8b3d3da240b46a50abd1a2e84.png?generation=1611347692068879\&alt=media) #### Konfiguration Keine Konfiguration ### Modul: StateListHorizontal #### Kurzbeschreibung Zeigt eine Liste von States (horizontal) an. #### Beispiel Screenshots **Screenshot1** ![Screenshot StateListHorizontal1.png](https://1985888337-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MRaoQRH-8-Ld5IfTdK_%2Fsync%2Ff84999e9333bdf03ad0cc39279b49c51fdfeea74.png?generation=1611347691628946\&alt=media) #### Konfiguration Keine Konfiguration ### Modul: Weather #### Kurzbeschreibung Zeigt die Wetter-Vorschau an. #### Beispiel Screenshots Keine Screenshots verfügbar #### Konfiguration | Parameter | Beschreibung | Typ | Standard | | --------------------- | ----------------------------------------------- | ------------------------------------------------------------- | -------- | | ***`apikey`*** | API Schlüssel (affiliate\_id) von daswetter.com | Text | - | | ***`localid`*** | Ort (localid) von daswetter.com | Text | - | | `display` | Anzeigevariante | Select (`both`, `overview`, `preview`) | `both` | | `forecastSunRain` | Zeige Sonne/Regen-Vorschau | Switch | `true` | | `iconSetWeather` | Icon Set Wetter | Select (`set1`, `set2`, `set3`, `set4`, `set5`, `set5-white`) | `set5` | | `forecastTemperature` | Zeige Temperatur-Vorschau | Switch | `true` | | `forecastWind` | Zeige Wind-Vorschau | Switch | `true` | | `iconSetWind` | Icon Set Wind | Select (`set1`, `set2`, `set5-white`) | `set2` |