Skip to content

Text und Bilder

Stefan Apetz edited this page Nov 10, 2026 · 6 revisions

Text, Bilder und Dokumentlinks

Das Textwidget verbindet redaktionelle Inhalte mit Bildern und aktuellen FHEM-Werten. Geeignet für Raumüberschriften, Erklärungen, Tabellen und Anleitungen.

Textwidget mit Solax-Bild, formatiertem Text und Live-Werten

Vom Anwender bereitgestellte Aufnahme: Bild und Text stehen nebeneinander, Live-Werte sind farbig hervorgehoben. Für die Dokumentation proportional verkleinert und in denselben dunklen Bildrahmen eingebettet; der Inhalt bleibt unverändert.

Einstellungsdialog: Text

Einstellungsdialog des Solax-Textwidgets mit Bild und zwei Live-Platzhaltern

Vom Anwender bereitgestellter Einstellungsdialog zum oben gezeigten Widget „Solax SK SU 500 E“. Proportional verkleinert, ohne den Inhalt zu verändern.

Vom Editor zur fertigen Anzeige

Im Dialog siehst du dieselben Inhalte wie in der Widgetaufnahme darüber:

  1. Im Feld Titel steht „Solax SK SU 500 E“. Mit Titel anzeigen blendest du die Widgettitelzeile ein oder aus.
  2. Das Wechselrichterbild ist links angeordnet; der Beschreibungstext fließt rechts daneben. Über Bild öffnest du den Assetmanager. Ein eingefügtes Bild kannst du anklicken, ausrichten und in der Größe ändern.
  3. Die beiden grünen Bausteine im Text stehen für aktuelle FHEM-Werte. Im Editor siehst du Device, Reading und Filter; in der fertigen Anzeige stehen an diesen Stellen die aktuellen Zahlen mit Einheit.
  4. Über Farbe formatierst du markierten Text bzw. einen markierten Platzhalter. So lassen sich die Live-Werte wie in der fertigen Aufnahme rot hervorheben.
  5. Speichern übernimmt deine Änderungen in den Entwurf. Nach dem Veröffentlichen erscheinen sie in der normalen Ansicht. Abbrechen verwirft die Dialogänderungen; Widget löschen entfernt den gesamten Textbaustein, nicht die Bilddatei im Assetmanager.

Text bearbeiten

  1. Bearbeiten → Widget hinzufügen → Text wählen.
  2. Titel vergeben und bei Bedarf Titel anzeigen deaktivieren.
  3. Inhalt im WYSIWYG-Editor eingeben.
  4. Text markieren und formatieren.
  5. Speichern; später den Entwurf veröffentlichen.

Die Werkzeugleiste bietet unter anderem Fett, Kursiv, Unterstrichen, Durchgestrichen, Überschriften, Listen, Ausrichtung, Links und Tabellen. Für Textfarbe oder Hervorhebung unter Farbe einen Farbwert wählen und Anwenden benutzen; Entfernen nimmt die Farbformatierung zurück.

Die Widgettitelzeile folgt der gemeinsamen Widgetgestaltung. Frei formatierte Überschriften im Textinhalt sind davon unabhängig.

Live-Werte in Text einfügen

Den Cursor an die gewünschte Stelle setzen und {{ }} wählen. Device suchen, Reading auswählen, Filter/Einheit einstellen und einfügen. Im Editor erscheint ein grüner Baustein:

  • Klick darauf öffnet die Auswahl zum Ändern.
  • Entf entfernt ihn.
  • Die umgebende Textformatierung lässt sich wie bei anderem Text verwenden.

Die beiden Platzhalter aus dem Solax-Beispiel:

{{virtualSolar:pv_total_power|suffix( W)}}
{{virtualSolar:EnergyTotal|round(2)|suffix( kWh)}}

Der erste liefert die aktuelle Leistung in W, der zweite den Energieertrag mit zwei Nachkommastellen und der Einheit kWh. In der Widgetaufnahme oben siehst du dafür 0 W und 48126.26 kWh. Das sind die Werte zum Zeitpunkt der Aufnahme; im Betrieb werden sie durch die jeweils aktuellen Werte ersetzt.

virtualSolar, pv_total_power und EnergyTotal gehören zum gezeigten Anwenderbeispiel. Wähle in deiner Installation die passenden Devices und Readings aus. Eine angehängte Einheit rechnet den Readingwert nicht um.

Details zu Filtern und Schreibweisen: Platzhalter und HTML.

Bilder einfügen

Bild hinzufügen … öffnet den gemeinsamen Assetmanager. Dort ein bestehendes Bild auswählen oder eine Datei hochladen. Standardmäßig sind PNG, JPEG und GIF bis 3 MiB erlaubt; die Administration kann die Grenzen anpassen.

Bereits im LinkWidget verwendete oder früher hochgeladene Bilder stehen auch hier zur Verfügung. Dateien gehören zum aktuellen CMS-Device.

Ausrichtung und Größe

Ein Bild im Texteditor anklicken:

  • Links, mittig, rechts oder volle Breite wählen.
  • Einen aussagekräftigen Alternativtext vergeben.
  • Am grünen Griff unten rechts die Größe ändern.
  • Beim Ziehen bleibt das Seitenverhältnis erhalten; die Auflösung beträgt 1 Prozent der Textbreite.
  • Den Griff fokussieren und die vorgesehenen Pfeiltasten zur Größenänderung nutzen.

Nicht das Bildformat mit der Größe des äußeren Textwidgets verwechseln: Das Widget wird separat im Seitenraster skaliert.

Bild entfernen

Entfernen im Widget löscht nur den Verweis im Text. Die Datei bleibt im Assetmanager, auch wenn sie in keinem Widget mehr sichtbar ist. Eine echte Dateilöschung erfolgt separat dort mit Bestätigung und Verwendungsprüfung.

Dokumente verlinken

Für PDF-, Office- oder andere freigegebene Dokumente die Dokumentauswahl im Linkablauf verwenden. Der Assetmanager zeigt dann Dokumente statt Bilder. Ein Dokument wird heruntergeladen, nicht als Office-Dokument im CMS ausgeführt.

Alternativ einen LinkWidget-Dokumentlink anlegen. Keine privaten Dateisystempfade als öffentliche Downloadadresse eintragen.

Tabellen im Text oder Tabellenwidget?

  • Eine Texttabelle eignet sich für frei gestaltete Inhalte und gemischten Text.
  • Das Tabellenwidget bietet strukturierte Readingzeilen und optionale Summe.

Grenzen

Eingefügte und gespeicherte Inhalte werden bereinigt. Freie Skripte und fremde Bildquellen sind nicht vorgesehen. Alte Markdown-Bausteine werden beim Bearbeiten umgewandelt; vor größeren Überarbeitungen vorhandene Inhalte sichern.

Assetmanager · Platzhalter

Clone this wiki locally