FHEMWiki - Benutzerbeiträge [de]

SmartVISU/IconHighlights in Menus

2026-02-22T09:42:15Z

Wvhn: Ergänzung um Verweis auf Beispiele und Doku

{{SEITENTITEL:smartVISU/IconHighlights in Menus}}

Mit dem folgenden Code lassen sich, zum Beispiel innerhalb vom Hauptmenu oder in der Raumübersicht die Icons farbig kennzeichnen.

Bis smartVISU v2.6

<nowiki><a href="index.php?page=room_living">
<img class="icon" src="{{ page == 'room_living' ? icon1 : icon0 }}scene_livingroom.png"/></nowiki><nowiki><h3>Wohnzimmer</h3></nowiki><nowiki></a></nowiki>

Ab smartVISU v2.7 werden svg-Icons verwendet und deren Stile mit Klassen festgelegt:
<a class="icon1" href="index.php?page=room_living" >
<img class="icon{% if page == 'room_living' %} icon1 {% else %} icon0{% endif %}" src="<nowiki>{{ icon0 }}</nowiki>scene_livingroom.svg" alt="Wohnzimmer" /><nowiki><h3>Wohnzimmer</h3></nowiki><nowiki></a></nowiki>

Ab smartVISU v3.4 gibt es die Designs mit Dark Mode. Hier ist es sinnvoll, im Raummenü die folgende Schreibweise zu nutzen:
<nowiki><a href="index.php?page=room_living">
{{ lib.svgimg (''</nowiki>, 'scene livingroom.svg', page == 'room_living'?'icon1':'icon0', <nowiki>''</nowiki>)
<nowiki> </nowiki> <nowiki><h3>Wohnzimmer</h3></nowiki>
<nowiki></a></nowiki>
Vorteil dieser Methode ist zusätzlich, dass das Icon schon während des Renderns durch Twig eingebettet wird und damit vom smartVISU-Cache gespeichert wird. Das bewirkt bei großen Seiten deutliche Performancegewinne auf langsamen Servern.

Wenn der Code in einem übergeordneten List-Element ist, muss dieses noch die Klasse
class="ui-li-has-thumb"
erhalten. Alle Beispielseiten (z.B. example1.smarthome‘) sind auf diese Schreibweise umgestellt, so dass der Code von dort kopiert werden kann.

Neben / statt der Klasse können dem SVG im Widget 'lib.svgimg‘ mit dem vierten Parameter noch weitere CSS-Eigenachaften zugewiesen werden. Siehe dazu in der Inline-Doku den Menüpunkt „Icons“.
[[Kategorie: fronthem/smartVISU]]

SmartVISU/fritz!box via TR-064

2026-02-21T21:57:07Z

Wvhn: /* fritz!box_via_TR-064 */

{{SEITENTITEL:smartVISU/fritz!box via TR-064}}

==fritz!box_via_TR-064==
'''''Update Februar 2026:'''''

Der Service "fritz!box_TR-064.php" ist seit smartVISU v2.9 Bestandteil des Pakets. Ein Download ist nicht mehr erforderlich.

Dieser Service verwendet TR-064 zum Auslesen der Anruferliste. Es ist ein Protokoll das nahe am UPnP Standard ist (SOAP).
Getestet wurde es mit den FritzOS Versionen ab v6.03 (aktuell v8.20).

Der Service wird auf der smartVISU Config-Seite ausgewählt und es muss Benutzer und Passwort der Fritzbox angegeben werden.
Wichtig ist, dass in der Fritzbox unter ->Heimnetz->Netzwerk->Netzwerkeinstellungen->"Zugriff für Anwendungen zulassen" aktiviert ist.

Die von dem Service bereitgestellten Daten werden von den Widgets phone.list und phone.missedlist in der Visu dargestellt.

[[Kategorie: fronthem/smartVISU]]

SmartVISU/Universelle ZeitSchaltUhr (UZSU)

2025-06-09T19:05:04Z

Wvhn: Initialisierung UZSU-Dict ergänzt

{{SEITENTITEL:smartVISU/Universelle ZeitSchaltUhr (UZSU)}}
Dieser Artikel behandelt die Einrichtung einer universellen Zeitschaltuhr innerhalb des Frontends [[smartVISU]].

==== UZSU-Widget ====
Das Widget „device.uzsuicon“, mit dem alle Einstellungen vorgenommen werden, ist als Standard in smartVISU enthalten. Es kann in SmartVISU-Seiten wie gewohnt eingebunden werden:

(für ein Ergebnis, das der Benutzer direkt eintippen kann, z.B. 'on' oder 'off')

<nowiki>{{ device.uzsuicon('UZSUtxt', gad_uzsu, '', '', '', 'text') }}</nowiki>

oder Text als Dropdown:

<nowiki>{{ device.uzsuicon('UZSUtxt', gad_uzsu, '', '', '', 'text', ['an', 'aus']) }}</nowiki>

oder (für eine einzugebende Ziffer zwischen 0 und 100)
<nowiki>{{ device.uzsuicon('UZSUnum', gad_uzsu, '', '', '', 'num', [0, 100]) }}</nowiki>

oder (für ein Ergebnis {0,1}, das aber als flip mit 'an' und 'aus' angezeigt wird)
<nowiki>{{ device.uzsuicon('UZSUnum', gad_uzsu, '', '', '', 'bool', ['an', 'aus']) }}</nowiki>

Weitere Beispiele sind in der Inline-Doku von smartVISU zu finden oder können mit dem Widget-Assistenten live ausprobiert werden.

=== fronthem ===
Um die Antwort des Widgets in fhem zu verarbeiten, benötigt man

1. je ein Reading uzsu an dem zu schaltenden Device, das man mit

setreading <device> uzsu <code>{"active":false,"list":[]}</code>

erzeugen MUSS.

2. eine Anbindung des UZSU-GAD per UZSU Converter aus der 99_fronthemUtils.pm (s. u.) an das Reading uzsu des zu schaltenden Device read und write in fhem

3. Den sonstigen UZSU Code aus der 99_FronthemUtils.pm aus dem http://github.com/herrmannj/fronthem (ist bei aktuellem fronthem alles schon drin)

Dieser Code erzeugt aus den Einstellungen im Widget entsprechende WeekdayTimer in fhem und löscht und erstellt neu bei jeder Änderung in SmartVISU.

4. Die Funktion muss getriggert werden. Dazu ist ein notify nötig, das auf die Veränderung der uzsu Readings reagiert:

define UZSU notify .*:uzsu:.* { UZSU_execute($NAME, $EVTPART1) }

5. GAD Editor Einstellungen:

<nowiki>
mode: item
device: <DEIN_DEVICE>
reading: uzsu
converter: UZSU
cmd set: uzsu
</nowiki>

Voila!

====Conditions====
Eine Besonderheit der UZSU in Verbindung mit FHEM ist die Verarbeitung von Bedingungen (Conditions). Diese werden durch den Button "Experte" im UZSU-Popup aufgerufen.

[[Datei:UZSU_Popup_mit_Expertenmodus.png|...|Expertenmodus im UZSU-Popup]]

Das Feld "Holiday" bietet die Möglichleit, Schaltbefehle nur an Arbeitstagen oder nur an Feiertagen / Wochenenden auszuführen. Dazu wird im WeekdayTimer das Attribut $we gesetzt (siehe [[WeekdayTimer]]).

In den Feldern "Condition" und "DelayedExec" können Bedingungen enttweder als Pearl-Anweisung (Dropdown muss auf "String" stehen) oder als Kombination aus Device, Vergleichsoperator und Vergleichswert angegeben werden.

Beispiel für Pearl-String:
''ReadingsVal("<code>Hzg_Wohnzimmer","temperature",""</code>) eq "22"''

([https://forum.fhem.de/index.php?msg=430522 Forum], [https://forum.fhem.de/index.php?topic=127432.0 Forum])

Device bei Verwendung der Vergleichsoperatoren:
<code>ReadingsVal("Hzg_Wohnzimmer","temperature","")</code>

Fronthem akzeptiert in diesem Fall Readingsval, AttrVal und InternalVal, sowie Value("device2check").

[[Kategorie: fronthem/smartVISU]]

SmartVISU

2025-06-06T14:47:39Z

Wvhn: Anpassung an smartVISU Versionen ab v2.9

{{SEITENTITEL:smartVISU}}

Dieser Artikel beschreibt das Web-Frontend smartVISU, dessen Funktionen und Konfiguration. [http://www.smartvisu.de smartVISU] ist ein Framework zur Visualisierung von Hausautomationssystemen, die eigentlich KNX-Installationen bedient. Für die Anbindung an FHEM ist die Installation und Konfiguration von [[Fronthem]] notwendig, dass das Interface für die Anbindung zur Verfügung stellt.

In einem separaten Artikel wird die [[smartVISU Installation|Basis-Installation von smartVISU]] beschrieben, die eine Voraussetzung für die Verwendung von smartVISU ist.

Ein paar Sceenshots, die einen Eindruck des Frontends vermitteln wurden im {{Link2Forum|Topic= 27291|Message=227568|LinkText=Forum}} veröffentlicht.

Alle Artikel zur Thematik fronthem/smartVISU sind [[:Kategorie:fronthem/smartVISU|hier]] kategorisiert.

----

__TOC__

Hat man die Installation durchgeführt, befindet sich im root-Verzeichnis der smartVISU Installation für die schnelle Einrichtung die Datei readme.md, in der ein 10-Schritte Guide die erste Konfiguration beschreibt.

Wurden ebenfalls die Erweiterungen für FHEM eingespielt, befindet sich in diesem Verzeichnis ebenfalls die Datei readme.txt, die etwas FHEM-spezifischer ebenfalls den 10-Schritte Guide enthält.

== Bausteine ==

[[Datei:Systemuebersicht_fronthem_smartVISU.jpg|550px|thumb|right|Systemübersicht, fronthem/smartVISU]]
Zum besseren Verständnis der Begrifflichkeiten und Zusammenhänge ist hier eine Systemübersicht dargestellt.

=== Statische Seiten ===

Für den Betrieb von smartVISU ist ein Web-Server mit PHP notwendig. Dieser stellt die statischen Inhalte des Frontends zur Verfügung. Die Oberfläche muss den eigenen Bedürfnissen per programmieren der Web-Seite anpassen werden. HTML-, PHP- oder Javascript-Kenntnisse sind hilfreich, aber nicht zwingend erforderlich.
Genügend Beispiele sind vorhanden und leicht anpassbar, so dass durch einfaches Zusammenstellen schnell eine individuelle Seite erstellt werden kann.

=== Treiber ===

==== Funktion ====

Was fronthem für FHEM ist, ist der Treiber für smartVISU. Er ist ein Stück Software (js), das in die ausgeliefertern Webseiten per Link eingebettet ist, auf dem Endgerät ausgeführt wird und die Kommunikation zwischen Endgerät und Websocketserver (fronthem) übernimmt {{Link2Forum|Topic=53881|Message=466167|LinkText=(Forum)}}.

Ein explizit auf FHEM angepasster Treiber stellt unter anderem die Mandantenfähigkeit (end-device werden seperat betrachtet und beschickt) sicher.

Der Treiber heißt "io_fhem.js" und ist im Verzeichnis smartVISU/driver/ abgelegt. Seit smartVISU v2.9 kann der in smartVISU integrierte Treiber verwendet werden. Die im Forum verbreiteten alternativen Versionen dürfen nicht mehr verwendet werden.

==== Verwendung ====

Ruft man die smartVISU-Seite auf einem Endgerät auf, wird auf der Config-Seite (Zahnrädersymbol in der oberen Menüzeile)
* als Driver "Fhem" ausgewählt,
* die Adresse des Websocketservers, auf dem fronthem ansprechbar ist unter "Address URL/IP" eingetragen und
* für den Port "2121" gesetzt.

=== Widgets ===

smartVISU bietet mit seinem Konzept der Widgets eine flexible Möglichkeit der individuellen Erweiterung an. Für viele Anwendungen gibt es bereits Widgets (z.B. Heizung, RGB, Clock, Wetter, etc.), auf die zurückgegriffen werden kann.

Mit einem Widget wird für den jeweiligen Anwendungsfall bestimmt, wie auf der Darstellungsseite das Design aussehen soll und welche Parameter auf der Verarbeitungsseite übergeben werden. So könnte man die Widgets auch als Vorlage verstehen, um diese Designelemente bei Bedarf entsprechend einzubinden.
{{Randnotiz|RNTyp=y|RNText=Schaut man sich die Dokumentation oder die Beispielhäuser an, sollte vorher den Treiber auf offline geschaltet werden, weil sich sonst fronthem die Konfiguration der Demohäuser importiert und merkt {{Link2Forum|Topic=30909|Message=235155|LinkText=(Forum)}}. Im Menüpunkt "Dokumentation" erfolgt die Umstellung automatisch.}}
Es gibt diverse Standard-Widgets, die bereits Teil der smartVISU-Installation sind. Darüber hinaus können eigene oder individualisierte Widgets hinzugefügt werden.
Die Dokumentation der verfügbaren Standard-Widgets in der Basisinstallation ist im Unterordner /pages/Docu gespeichert. Die Dokumentation kann angeschaut werden, indem man auf der Config-Seite die Page "Docu" auswählt, oder im Systemmenü den Menüpunkt "Dokumentation" auswählt. Es öffnet sich dann ein zweites Browserfenster, in dem die Widgets erklärt werden und live mit dem offline-Treiber ausprobiert werden können. Die integrierte Doku ("Inline-Doku") ist immer aktuell, währemd die in diesem Artikel verlinkte Doku auf smartvisu.de eine Kopie davon ist, die oft zeitverzögert nach den großen Releases verfügbar ist.

== Standard Seitenladeprozess ==

(Übersetzt aus readme.txt)

Ruft man die smartVISU-Seite über den Aufruf <code>http://<Server-IP>/<Installationsverzeichnis></code> (z.B. http://192.168.1.1/smartVISU) auf, läuft über die <code>index.php</code> ein vordefinierter Ladezyklus ab, der
* über die includes.php die Einstellungen der config.ini einliest
* die twig Umgebung startet
* die Pfade setzt (für pages, icons, Standardwidgets, etc.)
* über die ./pages/base/root.html alle Widgets und Skripte importiert, sowie den Treiber startet
* die index.html der in der config.ini configurierten Seite ./pages/<eigener Ordner> aufruft

Gibt es vor allen Dingen bei der Ersteinrichtung Probleme, sollte man sich den Ladeprozess und das Vorhandensein der Dateien und die richtige Konfiguration näher anschauen.

== Ersteinrichtung ==

Die folgende Beschreibung setzt voraus, dass die notwendigen Schritte für die grundsätzliche Installation von smartVISU und fronthem bereits erfolgreich durchgeführt wurden.

=== ein "eigenes-Haus" anlegen ===

Es gilt ein eigenes "Haus" anzulegen, dass man individuell konfiguriert.

* Für eine eigene neue Seite legt man unter ./pages des smartVISU-Root-Verzeichnisses ein neues Verzeichnis <code>eigenes-Haus</code> an.
* Die Dateien auf dem Ordner ./pages/_template kopiert man in dieses Verzeichnis.
* Dort editiert man die Dateien und fügt z.B. Dinge ein, die man aus der Doku z.B. auf von www.smartVISU.de heraus kopiert hat. Auch die Beispielhäuser sind sehr hilfreich zum lernen. Ein spezieller Editor oder eine grafische Oberfläche für die Programmierung ist nicht erforderlich. Als erstes passt man z.B. die Datei <code>rooms_menu.html</code> an die eigenen Bedürfnisse an.
* Die Räume richtet man ein, indem man diese durch Kopien des Beispielraumes (<code>room_sleeping.html</code>) und passende icons und Überschriften erstellt. ([https://docu.smartvisu.de/3.5/index.php?page=design/design_icons SmartVisu Icons])
* SmartVISU nutzt [http://twig.sensiolabs.org/ Twig] als Template engine und die Seiten bestehen aus Blöcken und Widgets, die immer in doppelten geschweiften Klammern stehen <nowiki>{{ ... }}</nowiki>
* Widget Syntax in der Inline-Doku auf [https://docu.smartvisu.de/3.5/index.php SmartVISU Doku] nachschlagen und kopieren. Alternativ im Systemmenü den Widget Assistenten aufrufen, mit dem ein Widget live parametriert und sofort ausprobiert werden kann. (Beachte dabei den Hinweis im Kasten !)
* Innerhalb eines Raums zwischen {% block content %} und {% endblock %} als Beispiel folgenden Abschnitt einfügen:

<pre><nowiki>
<h1><img class="icon" src='{{ icon0 }}scene_livingroom.svg'/>Wohnzimmer</h1>
<div class="preblock">
</div>
<div class="block">
<div class="set-2" data-role="collapsible-set" data-theme="c" data-content-theme="a" data-mini="true">
<div data-role="collapsible" data-collapsed="false" >
<h3>Licht</h3>
<table width="90%">
<tr>
<td align="left" width="100px"> 
{{ basic.stateswitch('Leselampe', 'Leselampe.sw', 'icon', [0,1], 'light_floor_lamp', '', ['icon0', 'icon1']) }}
</td>
<td>Leselampe</td>
</tr>
</table>
</div>
</div>
</div>
</nowiki></pre>

* Datei speichern und checken, dass die Rechte mindestens auf "755" stehen, ansonsten mit "sudo chmod 755" korrigieren.

Beim erstellen eigener Seiten oder Widgets sollte man darauf achten, nicht in die Dateien der smartVISU-Installation direkt einzugreifen, sondern vornehmlich in den eigenen Pages zu arbeiten. So steht auch einem unbeeinträchtigten späteren Update nichts im Wege.

Beispielsweise anstelle <code>root.html</code> oder <code>base.html</code> im Ordner ./pages/base direkt zu verändern, sollte man jeweils angepasste Kopien in das eigene Pages-Verzeichnis legen - diese haben dann Vorrang vor den System Dateien {{Link2Forum|Topic=30909|Message=268592|LinkText=(Forum)}}, denn die Template-Engine schaut zuerst im Ordner ./pages/<eigeneSeite> nach und anschließend im Ordner ./pages/base {{Link2Forum|Topic=30909|Message=241148|LinkText=(Forum)}}. Änderungen bei Versionsupdates müssen dann allerdings immer manuell nachgezogen werden. Für eigene Erweiterungen (Widgets, Sprache, Design ...) steht seit v2.9 das Verzeichnis ./dropins zur Verfügung, das vor Updates geschützt ist.

Für die eigenen Seiteninhalte sollten entsprechend die Dateinamen "base.html, basic.html, device.html" nicht verwendet werden, da dieses System-Seiten sind.

;fronthem
Obwohl der folgende Teil bereits zur Einrichtung von fronthem gehört, sei es der Vollständigkeit des Beispiels halber hier trotzdem erwähnt:
* In FHEM eine fronthemDevice Detailansicht öffnen
* Nun sollten die GADs aufgelistet werden. Aus der Liste ein GAD auswählen (hier: "Leselampe.sw" wie im obigen Code-Beispiel definiert.) und die Parameter vergeben:
<pre>
device: <fhem-Name-des-fhem-devices> (in diesem Fall die Leselampe.sw)
reading: state
converter: OnOff
cmd set: state
write: ja (haken setzen)
read: ja (haken setzen)
</pre>
: "state" immer klein schreiben und speichern nicht vergessen!
* Die Settings für das Device gelten für alle Endgeräte, aber die read/write Rechte müssen für jedes Endgerät separat gesetzt werden.

=== Einrichtung Endgerät ===
Auf dem Endgerät greift man auf die smartVISU-Seiten zu und stellt auf der Config-Seite den Treiber, IP der Servers und den Port ein.

Unter smartVISU in die Konfigurationsoberfläche wechseln <code>http://<IP-Adresse>/smartVISU<nowiki/>/index.php?page=config</code> bzw. Zahnradsymbol = System-Menü => Einstellungen:
* Im Feld "Interfaces" / "Benutzeroberfläche" für pages das eigenes Haus auswählen (=Ordnername)
* Der Pagecache muss während der Einrichtung ausgeschaltet sein.
* Im Feld "I/O Connection" / "Datenverbindung" den Treiber Fhem wählen
* Die IP-Adresse des Servers mit dem Websocket-Server eintragen
* Port 2121 einstellen
Nach allen Eintragungen die Konfiguration am unteren Ende der Seite speichern. Diese Einstellungen gelten global für alle Endgeräte. Soll für ein einzelnes Endgerät eine abweichende Einstellung vorgenommen werden, kann dies im Reiter "Device" / "Gerät" erfolgen.

Damit die GADs nun im GAD-Editor auf der Detailseite von einem [[fronthem#fronthemEditor|fronthemDevice]] auftauchen, ist es jetzt wichtig, die neue Seite in smartVISU einmal aufzurufen, damit im Hintergrund die GADs übertragen werden.

Vorausgesetzt, man hat vorher alle notwendigen Schritte für die Installation und Konfiguration von fronthem ausgeführt, kann man nun smartVISU in Verbindung mit FHEM benutzen.

Im Noramlbetrieb stellt man den Pagecache auf "on"- dann werden die templates compiliert gespeichert, was die Geschwindigkeit erhöht {{Link2Forum|Topic=35960|Message=283665|LinkText=(Forum)}}.

=== Die wichtigste Dateien der eigenen Seite ===
Im Folgenden sind die wichtigsten Dateien und Grundlagen beschrieben, aus der eine Seite zusammensetzt ist, die aus den Template-Dateinen erstellt wurde. Jede Seite besteht aus der Menüzeile, einer Seitenleiste auf der linken Seite und den Hauptbereich auf der rechten Seite.

Entsprechend Browser (z.B. Desktop oder Smartphone) werden die Seiten unterschiedlich dargestellt.

;index.html
Der Inhalt dieser Seite ist der erste, der aufgerufen wird. Hauptsächlich besteht er aus 2 Blöcken, gekennzeichnet durch
{% block sidebar %}
...
{% endblock %}

und
{% block content %}
...
{% endblock %}

Im Block <code>sidebar</code> steht der Inhalt, der auf der linken Seite der Startseite dargestellt wird. Im Beispiel wird wird die Uhr, das Datum, das aktuelle Wetter und die Wettervorhersage eingebunden.

Im Block <code>content</code> wird die Datei <code>rooms_menu.html</code> eingebunden. Der Inhalt dieses Blocks wird im rechten Bereich dargestellt.

;rooms_menu.html
Diese Datei enthält die Darstellung des Links für die einzelnen Räume wie z.B. <code>room_sleeping.html</code> für das Schlafzimmer. Ruft man von der Hauptseite einen Raum auf, wird auf einem Desktop-Browser die Seite <code>rooms_menu.html</code>im linken Bereich im Block Sidebar dargestellt, im rechten Bereich wird der Inhalt des Raums dargestellt.

;room_sleeping.html
Pro Raum gibt es eine Datei, die die Darstellung eines Raumes festlegen. Dort wie oben, wird der Bereich, der Darstellung über die Blockdefinition festgelegt.

;rooms.html
Im Rahmen des Ladezyklus, wird diese Datei ebenfalls geladen, läd jedoch ihrerseits gleich die nächste.

;visu.ccs
Möchte man das Design anpassen, verwendet man eine Stylesheet-Datei "visu.css" in seinem Projektordner. Diese Datei ist standardmäßig nicht Teil der Vorlage und kann bei Bedarf angelegt werden.

;visu.js
In dieser Datei kann Javascrict-Code abgelegt werden, der auf einer Seite aufgerufen wird. Diese Datei ist standardmäßig nicht Teil der Vorlage und kann bei Bedarf angelegt werden.

;menu.html
Diese Datei ist nicht Teil der Einrichtung über die Vorlage des template-Ordners. Möchte man das Menü anpassen, das oben auf der Seite angezeigt wird, kopiert man die Datei <code>menu.html</code> aus dem Verzeichnis ./base in sein Verzeichnis ./pages/<eigeneSeite> und passt diese entsprechend an. Über die Reihenfolge, in der die Ordner nach möglichen Dateien durchsucht werden, wird im Folgenden die eigene individualisierte Datei berücksichtigt.

=== Verwendung von Widgets ===

==== Einbindung ====

Eigene oder individualisierte Widgets werden seit v2.9 automatisch importiert, wenn sie in den Ordnern ./dropins/widgets oder ./pages/eigenes-Haus/widgets abgelegt sind. Dies gilt sowohl für die html-Dateien, als auch für die Skripte (.js) und die Stildefinitionen (.css).

Die bisher beschriebene Einbindung von Code in die <code>visu.ccs</code> und <code>visu.js</code> ist nicht mehr erforderlich. DIese Dateien sind eher für globale Änderungen / Erweiterungen in wenigen Spezialfällen vorgesehen.

==== Aufruf ====

Auf der Seite wird der Aufruf des Widgets eingebettet und über seinen Aufruf ebenfalls positioniert. Beispiele für das Einbetten sind im Docu-Haus enthalten.
{{ widgetname.function('<id>', '<gad>', '<weitere Parameter>') }}

Der Aufruf eines Widgets auf einer Seite besteht jeweils aus einem in doppelt geschweifte Klammern eingefassten Ausdrucks
Der Ausdruck besteht aus der Nennung des Widget-Dateinamens, gefolgt von der mit einem Punkt getrennten Funktion. Wie in FHEM üblich ist auch hier die Groß/Kleinschreibung zu berücksichtigen und eine häufige Fehlerquelle.

Im Anschluss in Klammern folgen die durch Komma getrennten Parameter in Hochkommata:
* id, die ID des Widgets ist eigentlich nur innerhalb von smartVISU wichtig, kann willkürlich gewählt werden, darf sich auf einer html-Seite allerdings nicht wiederholen. Seit v2.9 wurden fast alle Widgets so weiter entwickelt, dass die <code>id</code> nicht mehr benötigt wird. Sie kann optional eingegeben werden und dient dann vor allem dazu, die Darstellung des Widgets über die <code>visu.ccs</code> oder durch andere Widgets zu beeinflussen.
* gad, wird auch als Item bezeichnet. Dieses ist der Ausdruck, der später an fronthem übergeben wird und entsprechend im GAD-Editor auftaucht für die weitere Verarbeitung und Zuordnung.
* weitere Parameter, teilweise optional und teilweise mit Default-Werten, wenn diese nicht angegeben werden.

Detailliertere Beispiele finden sich in der [https://kurzanleitung.smartvisu.de/index.php Kurzanleitung], die allerdings auf die Kombination smarthomeNG / smartVISU abgestellt ist.

== Codebeispiele ==



=== Layout ===

* [[smartVISU/IconHighlights in Menus|IconHighlights in Menus]]


=== Standard-Widgets ===

{{Todo|Hier sollte nicht die Dokumentation der Standardwidgets wiedergegeben werden, sondern Spezifika, die nicht in der Dokumentation auftauchen oder Anwendungsbeispiele.}}

==== Basic.stateswitch ====

* [[smartVISU/lichtSzene|lichtSzene]]


=== zusätzliche Widgets ===

Es gibt diverse zusätzliche Widgets, für die es allerdings keine zentrale Quelle gibt. Stattdessen können diese aus den unterschiedlichen Repositories der Entwickler oder aus Beiträgen im Forum heruntergeladen werden. Viele haben jedoch die Entwicklung der smartVISU seit v2.8 nicht mitgemacht und müssen vor einer erneuten Verwendung aktualisiert werden.

Das Repository https://github.com/smartvisu-newstuff enthält zusätzliche Widgets, Designs und Erweiterungen, die nach den jeweils kompatiblen smartVISU-Versionen sortiert sind und regelmäßig weiter gepflegt werden.

;
;bekannte Repositories (nicht mehr aktiv gepflegt)
https://github.com/herrmannj/smartvisu-widgets
* LED
* UZSU V2.0
** [[smartVISU/Universelle ZeitSchaltUhr (UZSU)]]
* auth_switch
* basic
* basic_extra
* chart
* device_extra
* fritzbox
** [[smartVISU/fritz!box_via_TR-064|fritz!box_via_TR-064]], Einbindung Anruferliste, Telefonbuch, etc.
* homematic

* httpcmd
* icon/battery
* icons
*img
* listbutton
* phoneservice/lib/phone/service
* selectmenu
* sonos
* squeezebox
* textinput
* timcounter

https://github.com/ddtlabs/smartvisu-widgets

Voraussetzung für die meisten hier liegenden Widgets ist V2.8 von smartVISU.
* basic-devices
* hm-rtr
* hue
* media
* motionDetection
* powerDistribution
* sonos
* ventilation

https://github.com/ToGe3688/db_plot_widget
* Ein Widget für Plots (nur in Verbindung mit [[DbLog]])

https://github.com/bgewehr/smartVISU
* basic2.html (LED)
* qlock.html
* widget_calendar.html
* widget_fritzbox.html
* widget_fritzbox_list.html
* widget_list.html
* widget_popup.html

https://github.com/mworion/uzsu_widget
* uzsu_widget V5.0

https://github.com/2ndsky/quad
* quad

im Forum

* RTR für MAX! https://forum.fhem.de/index.php?topic=30909.msg241379#msg241379
* Ein weiteres Widget für ein RTR (Homematic) https://forum.fhem.de/index.php?topic=30909.msg276719#msg276719
* noch ein widget für homematic für HM-CC-RT-DN https://forum.fhem.de/index.php?topic=30909.msg248462#msg248462

== Links ==

[http://www.smartvisu.de smartVISU Hauptseite von smartVISU]

[http://twig.sensiolabs.org/documentation PHP-Twig Doku]

[https://code.google.com/archive/p/smartvisu/wikis Google-Archiv smartVISU]

[[Kategorie: fronthem/smartVISU]]

SmartVISU Installation

2025-06-05T20:18:02Z

Wvhn: Anpassung an smartVISU Versionen ab v2.9

{{SEITENTITEL:smartVISU Installation}}

Dieser Artikel beschreibt die Installation des Web-Frontends [[smartVISU]] und berücksichtigt mehrerer Alternativen für unterschiedliche Web-Server. Zum Betrieb von smartVISU mit FHEM ist die Installation und Konfiguration von [[fronthem]] erforderlich.

Alle Artikel zur Thematik fronthem/smartVISU sind [[:Kategorie:fronthem/smartVISU|hier]] kategorisiert.

----

__TOC__

Für die Installation ist es immer sinnvoll, von einem auf aktuellem Stand befindlichen System zu starten.

Für das Betriebssystem (Linuxderivat)
sudo apt-get update

sudo apt-get upgrade

Für FHEM
<code>update</code> in der Eingabezeile

Die Installation lässt sich in 4 Bereiche unterteilen.

== Webserver installieren ==

Welcher Webserver zum Einsatz kommt, ist unerheblich. Im Folgenden sind Beispiele für lighttpd, nginx und Apache2 zu finden. Es wird nur '''eine''' Installation benötigt. Der Webserver benötigt PHP, um smartVISU ausliefern zu können. Dabei sollte immer die aktuelle PHP-Version verwendet werden, die das System von sich aus anbietet. Die unten angegebenen PHP-Versionen sind deshalb durch die aktuellen Versionen zu ersetzen. Im Lauf der Entwicklung wurde smartVISU kontinuierlich an die aktuellen PHP-Versionen angepasst. Aktuell (Stand Juni 2025) ist smartVISU v3.5 zuverlässig mit PHP8.4.1 getestet.

===lighttpd ===
Dieses Beispiel basiert auf diesem {{Link2Forum|Topic= 27291|Message=208880|LinkText=Forumsbeitrag}}.

Webserver installieren:
sudo apt-get install lighttpd

PHP installieren:
sudo apt-get install php-common php-cgi php

PHP konfigurieren:
sudo lighty-enable-mod fastcgi-php

Webserver-Dienst einmal neu starten, damit die Einstellungen wirksam werden:
sudo service lighttpd force-reload

Welchseln in des Root-Verzeichnis des Webservers (bei Bedarf, wenn sich das Root-Verzeichnis einer Distribution woanders ist, muss dieser Pfad entsprechend angepasst werden):
cd /var/www

Setzen des Besitzers und der Gruppe für das Root-Verzeichnis (TODO: Ist dieser Schritt wirklich notwendig?):
sudo chown www-data:www-data /var/www

Setzen der Berechtigungen des Root-Verzeichnis (TODO: Ist dieser Schritt wirklich notwendig?):
sudo chmod 775 /var/www

===nginx ===
====mit PHP5 ====

Dieses Beispiel basiert auf diesem {{Link2Forum|Topic=30909|Message=273180|LinkText=Forumsbeitrag}}.

Für die Installation des Webservers und PHP5 werden folgende Pakete benötigt:
sudo apt-get install nginx php5-fpm

Die Konfiguration für PHP muss in der entsprechenden Konfigurationsdatei vorgenommen werden:
sudo nano /etc/nginx/sites-enabled/default

Folgende Konfiguration sollte direkt funktionieren:
<pre>
server {
listen 80;
root /var/www;
index index.html index.php;
server_name localhost;
location / {
try_files $uri $uri/ /index.php?$args;
}
location ~ \.php$ {
try_files $uri =404;
fastcgi_pass unix:/var/run/php5-fpm.sock;
fastcgi_index index.php;
fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
include fastcgi_params;
}
}
</pre>

====mit PHP7====
Ubuntu 16.04 läuft standardmäßig mit PHP7. Der Betrieb ist noch nicht zu 100% getestet und daher ohne Garantie.

Für die Installation des Webservers und PHP werden folgende Pakete benötigt:
sudo apt-get install nginx php7.0-fpm

Die Konfiguration für PHP muss in der entsprechenden Konfigurationsdatei vorgenommen werden:
sudo nano /etc/nginx/sites-enabled/default

Folgende Konfiguration sollte direkt funktionieren:
<pre>
server {
listen 80 default_server;
listen [::]:80 default_server;
root /var/www/html;
index index.php index.html index.htm index.nginx-debian.html;

server_name _;

location / {
try_files $uri $uri/ =404;
}
location ~ \.php$ {
try_files $uri =404;
fastcgi_split_path_info ^(.+\.php)(/.+)$;
fastcgi_pass unix:/run/php/php7.0-fpm.sock;
fastcgi_index index.php;
include fastcgi.conf;
fastcgi_read_timeout 600;
}
location ~* \.(js|css|png|jpg|jpeg|gif|ico|eot|otf|ttf|woff)$ {
access_log off; log_not_found off; expires 30d;
}
location = /robots.txt { access_log off; log_not_found off; }
location ~ /\. { deny all; access_log off; log_not_found off; }
}
</pre>

===Apache2 ===

Dieses Beispiel basiert auf diesem [http://www.meintechblog.de/2015/06/smartvisu-mit-fhem-die-perfekte-visualisierung-teil-1-basics/ Blogeintrag].

Für die Installation des Webservers und PHP5 werden folgende Pakete benötigt:
sudo apt-get install apache2 php5 libapache2-mod-php5

===PHP-Module===
Für die Funktion von smartVISU werden noch einige PHP-Module benötigt:
sudo apt-get install php-curl php php-json php-xml php-mbstring php-zip
Gegebenenfalls muss bei einzelnen Modulen die PHP-Version angegeben werden, wenn eine Fehlermeldung bei der Installation erscheint.

==smartVISU Installation ==

Für das Klonen (Herunterladen) wird folgendes Paket benötigt:
sudo apt-get install git
Im Folgenden wird davon ausgegangen, dass das Root-Verzeichnis des Webservers "/var/www/html" ist. Ist deis nicht der Fall, wird empfohlen, dies in den Einstellungen des Webservers entsprechend zu konfigurieren.

;Verfügbare Versionen (Stand Juli 2025)
smartVISU wird aktiv weiter entwickelt. Die aktuelle Version ist v3.5 vom Dezember 2024. Hinweise zur jeweils aktuellen Version und gegebenenfalls erforderliche Maßnahmen für den Umstieg sind im Kopfbereich des [https://knx-user-forum.de/forum/supportforen/smartvisu smartVISU-Forums] zu finden. Seit v2.9 ist smartVISU als vollständiges Paket ohne Modifikationen mit FHEM lauffähig. Die bisher veröffentlichten Anpassungen betreffen Versionen vor v2.9.

Veröffentlicht wird smartVISI auf Github unter https://github.com/Martin-Gleiss/smartvisu. Der master branch enthält die jeweils freigegebene Version, die für den produktiven Einsatz gedacht ist. Im develop branch ist laufend der aktuellste Entwicklungsstand. Tester sind jederzeit willkommen.
===Herunterladen ===
smartVISU kann direkt von Github in das Stammverzeichnis geklont werden. Dieses muss zunächst angelegt werden:
cd /var/www/html
sudo mkdir smartVISU
Das Verzeichnis kann einen beliebigen Namen haben. Hier im Beispiel wird "smartVISU" verwendet. Nach der Installation wird die Visu mit dem entsprechenden Namen aufgerufen, im vorliegenden Fall also mit <code>http://<IP-Adresse>/smartVISU</code>.

Dann werden die Rechte für das neue Verzeichnis gesetzt:
sudo chown www-data:www-data smartVISU
chmod g+rws smartVISU/
Danach wechselt man in das Verzeichnis und klont smartVISU:
cd smartVISU
git clone <nowiki>https://github.com/Martin-Gleiss/smartvisu.git</nowiki> .
Hierbei ist auf den Punkt am Ende der Zeile zu achten!

==== Berechtigungen setzen====
Später wird die Visu vom Endgerät aus konfiguriert. Damit dies funktioniert, müssen die Berechtigungen für die Verzeichnisse und Dateien entsprechend angepasst werden. Hierzu wird im Stammverzeichnis von smartVISU ein Skript aufgerufen:
sudo bash setpermissions

====ggf. Gruppenmitgliedschaft anpassen====
Dieser Schritt ist optional und dann hilfreich, wenn man mit einem normalen user z.B. über fileZilla die Dateien austauschen möchte. Da der Schritt zulasten der Sicherheit geht, sollte man ihn nach Abschluss der Konfiguration ggf. wieder rückgängig machen.

In diesem Beispiel wird der user "pi" zur Gruppe <code>www-data</code> hinzugefügt. Verwendet man einen anderen user, muss dieses selbstverständig angepasst werden.
sudo usermod -a -G www-data pi

Rückgängig machen kann man die Gruppenzugehörigkeit über
sudo deluser pi www-data

====Installation überprüfen====

Beim Aufruf der Seite <code>http://<IP-Adresse>/smartVISU</code> sollte folgende Seite angezeigt werden: {{Randnotiz|RNTyp=y|RNText=
Ggf. in der php.ini (error_reporting) die Ausgabe von Warnings abschalten, wenn so was kommt wie "Notice: Undefined index..."
}}

Diese Seite wird angezeigt, solange keine config.ini im Stammverzeichnis existiert, also die Konfiguration noch nicht durchgeführt wurde.

[[Datei:Installation_SmartVISU.png]]

Hier werden zudem einige Systemvoraussetzungen überprüft, die vor einer ersten Konfiguration erfüllt werden müssen.

Nun kann mit der Konfiguration (gelber Button mit Zahnrädern) begonnen werden. Es wird empfohlen, die Datenverbindung auf "offline" zu setzen und sich zuerst mit den Beispiel-Häusern (example1.smarthome ...) vertraut zu machen. Auf deren Basis kann man dann später seine eigene Visualisierung erstellen. Da fronthem alle über die Datenverbindung angefragten items intern anlegt und registriert, wird empfohlen, die Datenverbindung mit fronthem erst zu aktivieren, wenn die Seiten weitgehend fertig sind.

== Troubleshooting ==

===SSL===

Wird derzeit nicht unterstützt {{Link2Forum|Topic=43226|Message=352115|LinkText=(Forum)}}.

===Performanceproblem===

Während der Entwicklung wurden seit v2.8 verschiedene Maßnahmen zur Verbesserung der Performance eingeführt. Trotzdem hat die Plattform, auf der smartVISU läuft einen gehörigen Anteil an der Reaktivität der Oberfläche. Darüber hinaus hat selbstredend die Komplexität einer Seite Einfluss auf die Geschwindigkeit.
Auf langsamen Servern bringt nach Abschluss der Konfiguration und der Erstellung der eigenen Seiten die Aktivierung des smartVISU-Cache einen deutlichen Performancegewinn.

=== Config-Seite anstatt der individuellen Seite===

Es wurde noch keine Konfiguration durchgeführt und <u>'''abgespeichert'''</u>.

=== Zugriffsprobleme mit Apache===
Anscheinend gab es vereinzelt Zugriffsprobleme auf das smartVISU-Vereichnis, die sich aber mit dieser Erweiterung der Apache-Konfiguration beheben lies {{Link2Forum|Topic=30909|Message=239882|LinkText=(Forum)}}:

<pre>
<Directory "/var/www/smartvisu">
Options +Indexes FollowSymLinks +ExecCGI
AllowOverride AuthConfig FileInfo
Order allow,deny
Allow from all
</Directory>
</pre>

===404 not found===

Wird noch nicht einmal die Seite gefunden (404), sind bereits die statischen Seiteninhalte der Webseite nicht richtig konfiguriert. Es muss sichergestellt werden, dass eine Datei im Verzeichnis von smartVISU von einem Endgerät angezeigt werden kann {{Link2Forum|Topic= 46501|Message=49524|LinkText=(Forum)}}.

===verschiedene Devices, verschiedene Anzeigen===

Die Konfigurationsseite beinhaltet 3 Reiter für die globalen, seitenspezifischen und gerätespezifischen Einstellungen. Alle Reiter enthalten dieselben Konfigurationsmöglichkeiten. Globale Einstellungen werden in der config.ini im Stammverzeichnis der smartVISU gespeichert. Sofern vorhanden erhalten seitenspezifische Einstellungen eine eigene config.ini im Verzeichnis der eigenen Seiten und gerätespezifische Einstellungen werden in einem Cookie auf dem Endgerät gespeichert. Die gerätespezifischen Einstellungen müssen mit dem jeweiligen Endgerät gemacht werden. Durch Klick auf die jeweiligen Felder werden die einzelnen Einstellungen für Seiten / Geräte aktiviert und deaktiviert (ausgegraut).

===neue Clients===

Das Anlegen neuer Clients In smartVISU erfolgt automatisch ohne weitere Konfiguration.

===Ordner und Dateien===
Auch wenn es im Normalfall nicht notwendig ist sollte, kann es manchmal sinnvoll sein, den genauen Speicherort aller Dateien und Konfigurationsdateien zu kennen und entsprechend Debugging-Trigger hinzuzufügen oder Konfigurationen direkt zu korrigieren.

Die folgenden Pfadangaben gehen davon aus, dass das Root-Verzeichnis des eingesetzten Webservers /var/www/html/ ist und smartVISU im Unterordner /var/www/html/sv liegt.

Dokumenten Root für smartVISU:
/var/www/html/smartVISU/

Konfigurationsdatei von smartVISU:
/var/www/html/smartVISU/config.ini

Treiber:
/var/www/html/smartVISU/driver/io_fhem.js

Temp-Ordner:
/var/www/html/smartVISU/temp

Template-Ordner für neue "page":
/var/www/html/smartVISU/pages/_template

Eigener Page-Ordner
/var/www/html/smartVISU/pages/<eigeneSeite>

[[Kategorie:fronthem/smartVISU]]

SmartVISU/fritz!box via TR-064

2025-06-05T16:51:00Z

Wvhn: Anpassung an smartVISU Versionen ab v2.9

{{SEITENTITEL:smartVISU/fritz!box via TR-064}}

==fritz!box_via_TR-064==
'''''Update Juni 2025:'''''

Der Service "fritz!box_TR-064.php" ist seit smartVISU v2.9 Bestandteil des Pakets. Ein Download ist nicht mehr erforderlich.

Download: https://github.com/herrmannj/smartvisu-widgets/tree/master/phoneservice/lib/phone/service

Dieses Widget verwendet TR-064 zum Auslesen der Anruferliste. Es ist ein Protokoll das nahe am UPnP Standard ist (SOAP).
Getestet wurde es mit den FritzOS Versionen 6.03 und 6.20.
Dieses Widget wird unter der Smartvisu-Config Seite ausgewählt und es muss gegebenenfalls Benutzer und Passwort der Fritzbox in SmartVisu angegeben werden.
Wichtig ist, dass in der Fritzbox unter ->Heimnetz->Netzwerk->Netzwerkeinstellungen->"Zugriff für Anwendungen zulassen" aktiviert ist.

[[Kategorie: fronthem/smartVISU]]

Fronthem Installation

2025-06-05T16:29:52Z

Wvhn: Hinweis auf alternatives Repository mit allen bekannten Verbesserungen

{{SEITENTITEL:fronthem Installation}}

Dieser Artikel befasst sich mit der Installation von "fronthem". Es stellt ein Interface zur Verfügung, um ein Webfrontends wie z.B. [[smartVISU]] an FHEM anzubinden. Die Konfiguration und das Interface selbst sind im [[fronthem|Hauptartikel von fronthem]] beschrieben.

Alle Artikel zur Thematik fronthem/smartVISU sind [[:Kategorie:fronthem/smartVISU|hier]] kategorisiert.

----

__TOC__

== Vorraussetzungen schaffen ==

In Abhängigkeit der verwendeten Distribution gibt es mehrere Möglichkeiten, die einzelnen Pakete zu installieren {{Link2Forum|Topic=38639|Message=309479|LinkText=(Forum)}}. Für einige Installationsschritte ist das Paket build-essential, dass über diesen Befehlt installiert werden kann. Sonst können die make's während der folgenden Schritte nicht ausgeführt werden {{Link2Forum|Topic=30909|Message=235986|LinkText=(Forum)}}.
sudo apt-get install build-essential

=== cpanmin ===
curl -L https://cpanmin.us | perl - --sudo App::cpanminus

oder

sudo apt-get install cpanminus

=== WebSocket ===

sudo cpanm Net::WebSocket::Server
oder {{Link2Forum|Topic=47120|Message=388577|LinkText=(Forum)}}
sudo cpan install Net::WebSocket::Server

=== JSON ===

sudo cpanm JSON
oder
sudo cpan install JSON
oder falls es Probleme mit CPAN und Debian z.B. auf dem RPi gibt, kann man JSON auch über die normale Paketverwaltung installieren {{Link2Forum|Topic=30909|Message=237576|LinkText=(Forum)}}:
sudo apt-get install libjson-perl

== Module herunterladen ==

Mit folgendem Befehl kann man fronthem installieren / updaten (in Eingabezeile von FHEM eingeben):
update force https://raw.githubusercontent.com/herrmannj/fronthem/master/controls_fronthem.txt

Durch die Option <code>force</code> werden bei erneutem Aufruf auch erneut alle Dateien heruntergeladen und das Update so erzwungen.

'''''Update Juni 2025:'''''

Derzeit wird fronthem nicht aktiv weiterentwickelt. Es haben sich jedoch über die Jahre einige Verbesserungen im Forum angesammelt, die entweder den Austausch einzelner Dateien erforderten, oder die Änderung von Codezeilen. Um hier ein funktionierendes Gesamtpaket anzubieten, wurden alle Änderungen behelfsmäßig in ein alternatives Repository eingearbeitet: https://github.com/wvhn/fronthem. Im master branch ist dort eine gut getestete Version, die ohne weitere Modifikation lauffähig ist. Der develop branch enthält weitere Neuerungen vor allerm bei der universellen Zeitschaltuhr und den Plots. Allerdings sind diese Änderungen nicht breit getestet und die Dokumentation ist noch lückenhaft ([https://forum.fhem.de/index.php?topic=127432.msg1234367#msg1234367 Forum], [https://forum.fhem.de/index.php?topic=129106.0 Forum], [https://forum.fhem.de/index.php?topic=118668.msg1259044#msg1259044 Forum]).

== Ersteinrichtung innerhalb von FHEM ==

Die Konfiguration von fronthem in FHEM (Eingabe in der Fhem Web Kommandozeile):
define <Name Webservice> fronthem

define <Name Endgerät> fronthemDevice <IP Endgerät>

Beispiel:
define meinfronthem fronthem

define meiniphone fronthemDevice 192.168.178.25

Näheres zur Einrichtung und Konfiguration innerhalb von FHEM findet sich im [[fronthem|Hauptartikel]] von fronthem.

==Troubleshooting==

=== Fehler bei Installation von WebSocket ===

Zum einen ist für die Installation das Paket build-essential notwendig, dass z.B. über folgenden Befehl installiert werden kann:
sudo apt-get install build-essential

Darüber hinaus muss die Konfiguration des Netzwerk-Interfaces korrekt und vollständig sein {{Link2Forum|Topic=52694|Message=445277|LinkText=(Forum)}}.

=== Port 2121 belegt ===

Ist der Port 2121 bereits durch einen anderen Dienst belegt, z.B. ein OWS Server, gibt es beim Versuch den Websocketserver zu starten eine Fehlermeldung {{Link2Forum|Topic=38639|Message=313193|LinkText=(Forum)}}.

[[Kategorie:fronthem/smartVISU]]

SmartVISU/IconHighlights in Menus

2025-06-05T12:18:25Z

Wvhn: Anpassung an smartVISU Versionen ab v2.9

SmartVISU/ical

2025-06-05T11:32:28Z

Wvhn: Anpassung an smartVISU Versionen ab v2.9

'''Diese Seite beschreibt eine Vorgehensweise, die für smartVISU bis v2.7 erforderlich war. Bei allen späteren Versionen ist der iCal-Service enthalten und wird über die Konfigurationsseite ausgewählt und parametriert.'''

Um einen Kalender in [[SmartVISU]] mit dem Widget widget_ical einzubinden, ist folgendes zu tun:

* Die Datei iCalcreator.class.php aus dem Paket http://kigkonsult.se/downloads/index.php#iCalcreator unter einem beliebigen Pfad ablegen, der aber in der ical.php eingetragen werden muss.
* Ablegen der Datei ical.php in das Verzeichnis /smartVISU/lib/calendar/service
* Ablegen der Datei widget_ical.html in das Homeverzeichnis der eigenen Seite z.b. /smartVISU/pages/fhem
* Definition der Kalender findet in den Settings statt. Die Kalender werden wie folgt definiert:
: - wie bisher nur die Url
: <code><nowiki>http://xxx:xxx@xxx.xxx.xxx.xxx/davical/caldav.php/norbert/calendar</nowiki></code>
: - die Url mit Parameter Farbe und Icon
: <code><nowiki>http://xxx:xxx@xxx.xxx.xxx.xxx/davical/caldav.php/norbert/calendar(Default Farbe,Default Icon)</nowiki></code>
: - die Url mit Parameter Farbe
: <code><nowiki>http://xxx:xxx@xxx.xxx.xxx.xxx/davical/caldav.php/norbert/calendar(Default Farbe)</nowiki></code>
: - die Url mit Parameter Icon
: <code><nowiki>http://xxx:xxx@xxx.xxx.xxx.xxx/davical/caldav.php/norbert/calendar(,Default Icon)</nowiki></code>
: - zwei Kalenderurls mit unterschiedlichen Parametern
: <code><nowiki>http://xxx:xxx@xxx.xxx.xxx.xxx/davical/caldav.php/norbert/calendar(,message_garbage);http://xxx:xxx@xxx.xxx.xxx.xxx/davical/caldav.php/norbert/Geburtstage(#ff69b4,scene_party)</nowiki></code>
: - eine lokale Url
: <code><nowiki>file:/tmp/calendar.ics</nowiki></code>
: - zwei Kalenderurls eine lokale und eine auf einem Caldav/Webserver
: <code><nowiki>file:/tmp/calendar.ics(,message_garbage);http://xxx:xxx@xxx.xxx.xxx.xxx/davical/caldav.php/norbert/Geburtstage(#ff69b4,scene_party)</nowiki></code>
: Die Icons sind die Namen der png-Dateien ohne .png. Wenn keine Parameter, für Farbe und Icon mitgegeben werden und auch keine in den Terminen hinterlegt sind, wird ein Standardicon und eine Standardfarbe gesetzt. Das setzen dieser Parameter pro Termin erfolgt im Beschreibungsfeld des jeweiligen Termin.
:Bei allen abgelegten Dateien muss auf die Rechte geachtet werden. Es sollten die gleichen User/Group-Rechte verwendet werden, wie auch bei den Dateien im pages Ordner.
* Einbinden es Kalenders auf einer SV-Seite:
: <code>{% import "widget_ical.html" as calendar %}</code>
: <code><nowiki>{{ calendar.list('calendarlist', 'Termine', 6, 21) }}</nowiki></code>
: Die erste Zahl (6) ist die Anzahl der Termine die aufgelistet werden. Die zweite Zahl (21) ist die Anzahl der Tage, die im Kalender in die Zukunft geprüft wird, ob sich ein Termin wiederholt.

Quelle und Download benötigter Dateien: {{Link2Forum|Topic=35831}}

[[Kategorie: fronthem/smartVISU]]

SmartVISU/Universelle ZeitSchaltUhr (UZSU)

2025-06-05T11:12:02Z

Wvhn: Fehlerkorrektur

{{SEITENTITEL:smartVISU/Universelle ZeitSchaltUhr (UZSU)}}
Dieser Artikel behandelt die Einrichtung einer universellen Zeitschaltuhr innerhalb des Frontends [[smartVISU]].

==== UZSU-Widget ====
Das Widget „device.uzsuicon“, mit dem alle Einstellungen vorgenommen werden, ist als Standard in smartVISU enthalten. Es kann in SmartVISU-Seiten wie gewohnt eingebunden werden:

(für ein Ergebnis, das der Benutzer direkt eintippen kann, z.B. 'on' oder 'off')

<nowiki>{{ device.uzsuicon('UZSUtxt', gad_uzsu, '', '', '', 'text') }}</nowiki>

oder Text als Dropdown:

<nowiki>{{ device.uzsuicon('UZSUtxt', gad_uzsu, '', '', '', 'text', ['an', 'aus']) }}</nowiki>

oder (für eine einzugebende Ziffer zwischen 0 und 100)
<nowiki>{{ device.uzsuicon('UZSUnum', gad_uzsu, '', '', '', 'num', [0, 100]) }}</nowiki>

oder (für ein Ergebnis {0,1}, das aber als flip mit 'an' und 'aus' angezeigt wird)
<nowiki>{{ device.uzsuicon('UZSUnum', gad_uzsu, '', '', '', 'bool', ['an', 'aus']) }}</nowiki>

Weitere Beispiele sind in der Inline-Doku von smartVISU zu finden oder können mit dem Widget-Assistenten live ausprobiert werden.

=== fronthem ===
Um die Antwort des Widgets in fhem zu verarbeiten, benötigt man

1. je ein Reading uzsu an dem zu schaltenden Device, das man mit

<nowiki>
setreading <device> uzsu {}
</nowiki>

erzeugen MUSS.

2. eine Anbindung des UZSU-GAD per UZSU Converter aus der 99_fronthemUtils.pm (s. u.) an das Reading uzsu des zu schaltenden Device read und write in fhem

3. Den sonstigen UZSU Code aus der 99_FronthemUtils.pm aus dem http://github.com/herrmannj/fronthem (ist bei aktuellem fronthem alles schon drin)

Dieser Code erzeugt aus den Einstellungen im Widget entsprechende WeekdayTimer in fhem und löscht und erstellt neu bei jeder Änderung in SmartVISU.

4. Die Funktion muss getriggert werden. Dazu ist ein notify nötig, das auf die Veränderung der uzsu Readings reagiert:

define UZSU notify .*:uzsu:.* { UZSU_execute($NAME, $EVTPART1) }

5. GAD Editor Einstellungen:

<nowiki>
mode: item
device: <DEIN_DEVICE>
reading: uzsu
converter: UZSU
cmd set: uzsu
</nowiki>

Voila!

====Conditions====
Eine Besonderheit der UZSU in Verbindung mit FHEM ist die Verarbeitung von Bedingungen (Conditions). Diese werden durch den Button "Experte" im UZSU-Popup aufgerufen.

[[Datei:UZSU_Popup_mit_Expertenmodus.png|...|Expertenmodus im UZSU-Popup]]

Das Feld "Holiday" bietet die Möglichleit, Schaltbefehle nur an Arbeitstagen oder nur an Feiertagen / Wochenenden auszuführen. Dazu wird im WeekdayTimer das Attribut $we gesetzt (siehe [[WeekdayTimer]]).

In den Feldern "Condition" und "DelayedExec" können Bedingungen enttweder als Pearl-Anweisung (Dropdown muss auf "String" stehen) oder als Kombination aus Device, Vergleichsoperator und Vergleichswert angegeben werden.

Beispiel für Pearl-String:
''ReadingsVal("<code>Hzg_Wohnzimmer","temperature",""</code>) eq "22"''

([https://forum.fhem.de/index.php?msg=430522 Forum], [https://forum.fhem.de/index.php?topic=127432.0 Forum])

Device bei Verwendung der Vergleichsoperatoren:
<code>ReadingsVal("Hzg_Wohnzimmer","temperature","")</code>

Fronthem akzeptiert in diesem Fall Readingsval, AttrVal und InternalVal, sowie Value("device2check").

[[Kategorie: fronthem/smartVISU]]

SmartVISU/Universelle ZeitSchaltUhr (UZSU)

2025-06-04T23:32:58Z

Wvhn: Erweiterung um UZSU Conditions

{{SEITENTITEL:smartVISU/Universelle ZeitSchaltUhr (UZSU)}}
Dieser Artikel behandelt die Einrichtung einer universellen Zeitschaltuhr innerhalb des Frontends [[smartVISU]].

==== UZSU-Widget ====
Das Widget „device.uzsuicon“, mit dem alle Einstellungen vorgenommen werden, ist als Standard in smartVISU enthalten. Es kann in SmartVISU-Seiten wie gewohnt eingebunden werden:

(für ein Ergebnis, das der Benutzer direkt eintippen kann, z.B. 'on' oder 'off')

<nowiki>{{ device.uzsuicon('UZSUtxt', gad_uzsu, '', '', '', 'text') }}</nowiki>

oder Text als Dropdown:

<nowiki>{{ device.uzsuicon('UZSUtxt', gad_uzsu, '', '', '', 'text', ['an', 'aus']) }}</nowiki>

oder (für eine einzugebende Ziffer zwischen 0 und 100)
<nowiki>{{ device.uzsuicon('UZSUnum', gad_uzsu, '', '', '', 'num', [0, 100]) }}</nowiki>

oder (für ein Ergebnis {0,1}, das aber als flip mit 'an' und 'aus' angezeigt wird)
<nowiki>{{ device.uzsuicon('UZSUnum', gad_uzsu, '', '', '', 'bool', ['an', 'aus']) }}</nowiki>

Weitere Beispiele sind in der Inline-Doku von smartVISU zu finden oder können mit dem Widget-Assistenten live ausprobiert werden.

=== fronthem ===
Um die Antwort des Widgets in fhem zu verarbeiten, benötigt man

1. je ein Reading uzsu an dem zu schaltenden Device, das man mit

<nowiki>
setreading <device> uzsu {}
</nowiki>

erzeugen MUSS.

2. eine Anbindung des UZSU-GAD per UZSU Converter aus der 99_fronthemUtils.pm (s. u.) an das Reading uzsu des zu schaltenden Device read und write in fhem

3. Den sonstigen UZSU Code aus der 99_FronthemUtils.pm aus dem http://github.com/herrmannj/fronthem (ist bei aktuellem fronthem alles schon drin)

Dieser Code erzeugt aus den Einstellungen im Widget entsprechende WeekdayTimer in fhem und löscht und erstellt neu bei jeder Änderung in SmartVISU.

4. Die Funktion muss getriggert werden. Dazu ist ein notify nötig, das auf die Veränderung der uzsu Readings reagiert:

define UZSU notify .*:uzsu:.* { UZSU_execute($NAME, $EVTPART1) }

5. GAD Editor Einstellungen:

<nowiki>
mode: item
device: <DEIN_DEVICE>
reading: uzsu
converter: UZSU
cmd set: uzsu
</nowiki>

Voila!

====Conditions====
Eine Besonderheit der UZSU in Verbindung mit FHEM ist die Verarbeitung von Bedingungen (Conditions). Diese werden durch den Button "Experte" im UZSU-Popup aufgerufen.

[[Datei:UZSU_Popup_mit_Expertenmodus.png|...|Expertenmodus im UZSU-Popup]]

Das Feld "Holiday" bietet die Möglichleit, Schaltbefehle nur an Arbeitstagen oder nur an Feiertagen / Wochenenden auszuführen. Dazu wird im WeekdayTimer das Attribut $we gesetzt (siehe [[WeekdayTimer]]).

In den Feldern "Condition" und "DelayedExec" können Bedingungen enttweder als Pearl-Anweisung (Dropdown muss auf "String" stehen) oder als Kombination aus Device, Vergleichsoperator und Vergleichswert angegeben werden.

Beispiel für Pearl-String:
''ReadingsVal("<code>Wohnzimmer","temperature"</code>"") eq "22"''

([https://forum.fhem.de/index.php?msg=430522 Forum], [https://forum.fhem.de/index.php?topic=127432.0 Forum])

Device bei Verwendung der Vergleichsoperatoren:
<code>ReadingsVal("Wohnzimmer","temperature","")</code>

Fronthem akzeptiert in diesem Fall Readingsval, AttrVal und InternalVal, sowie Value("device2check").

[[Kategorie: fronthem/smartVISU]]

Datei:UZSU Popup mit Expertenmodus.png

2025-06-04T22:05:20Z

Wvhn:

Darstellung der Felder für den Expertenmodus für Conditions und Delayed Execution

SmartVISU/Universelle ZeitSchaltUhr (UZSU)

2025-06-04T21:49:42Z

Wvhn:

SmartVISU/lichtSzene

2025-06-04T11:48:43Z

Wvhn:

{{SEITENTITEL:smartVISU/lichtSzene}}

mit dem folgenden Code lässt sich eine Auswahl für Lichtszenen in smartVisu / fhem erstellen.

So soll es aussehen:

[[Datei:Smartvisu_Lichtszene_radio_buttons.png|600px|thumb|left|Screenshot Frontend smartVISU]]

Die Radio Buttons sollen dabei in einem Raum folgende Lichtszenen steuern:

* automatische Beleuchtung
* Fernsehen
* Arbeitsbeleuchtung
* Essen
* Party
* volle Beleuchtung
* Weihnachtsbeleuchtung
* alles Aus

Die gewünschte Funktionalität ist dabei das sich die Lichtszenen umschalten lassen. Wenn eine bereits aktivierte Funktion nochmal betätigt wird entspricht das "aus". Die Weihnachtsbeleuchtung soll sich unabhängig von den anderen Beleuchtungs Szenen aktivieren oder deaktivieren lassen.

Das bisher hier verwendete Widget "basic.dual" wurde in Version 2.9 ungültig gemacht und in v3.0 gelöscht. Es wird durch "basic.stateswitch" ersetzt, für das es ausführliche Beispiele in der Inline-Doku gibt, oder (meist mit zeitlicher Verzögerung) auch online:
[https://docu.smartvisu.de/3.5/index.php?page=basic/widget_basic.stateswitch]

Der Screenshot oben wird mit diesem code in sv erzeugt:

<nowiki><span style="display:inline-block; width: 40%">Lichtszene</span></nowiki>
<nowiki><span data-role="controlgroup" data-type="horizontal">
{{ basic.stateswitch(''</nowiki>, 'wz.light.szene.auto', 'midi', ['auto', 'off'], 'time_automatic', <nowiki>''</nowiki>''<nowiki>, ['icon1', 'icon0'] ) }}</nowiki>''
<nowiki> </nowiki> {{ basic.stateswitch(<nowiki>''</nowiki>, 'wz.light.szene.tv', 'midi', ['tv', 'off'], 'it_television', <nowiki>''</nowiki>''<nowiki>, ['icon1', 'icon0'] ) }}</nowiki>''
<nowiki> </nowiki> {{ basic.stateswitch(<nowiki>''</nowiki>, 'wz.light.szene.work', 'midi', ['work', 'off'], 'light_ceiling_light', <nowiki>''</nowiki>''<nowiki>, ['icon1', 'icon0'] ) }}</nowiki>''
<nowiki> </nowiki> {{ basic.stateswitch(<nowiki>''</nowiki>, 'wz.light.szene.eat', 'midi', ['eat', 'off'], 'light_dinner_table', <nowiki>''</nowiki>''<nowiki>, ['icon1', 'icon0'] ) }}</nowiki>''
<nowiki> </nowiki> {{ basic.stateswitch(<nowiki>''</nowiki>, 'wz.light.szene.party','midi', ['party', 'off'], 'light_party', <nowiki>''</nowiki>''<nowiki>, ['icon1', 'icon0'] ) }}</nowiki>''
<nowiki> </nowiki> {{ basic.stateswitch(<nowiki>''</nowiki>, 'wz.light.szene.full', 'midi', ['full', 'off'], 'light_light_dim_100', ''<nowiki>''</nowiki>, ['icon1', 'icon0'] ) }}''
<nowiki> </nowiki> {{ basic.stateswitch(<nowiki>''</nowiki>, 'wz.light.szene.xmas', 'midi', ['on', 'off'], 'scene_x-mas', <nowiki>''</nowiki>''<nowiki>, ['icon1', 'icon0'] ) }}</nowiki>''
<nowiki> </nowiki> {{ basic.stateswitch(<nowiki>''</nowiki>, 'wz.light.szene.off', 'midi', ['off', 'off'], 'control_on_off', <nowiki>''</nowiki>''<nowiki>, ['icon1', 'icon0'] ) }}</nowiki>''
<nowiki></span></nowiki>

In diesem Beispiel wird in fhem dazu ein dummy erzeugt, über den die Lichtszenen gesteuert werden. Natürlich gäbe es auch alternative Umsetzungen, bspw mit lightscene)

Der dummy (name wz.licht.scene) bekommt diese setlist
<nowiki>
define wz.licht.scene dummy
attr wz.licht.scene setList off auto tv eat work party full
</nowiki>

[[Datei:fronthem_gadeditor_lichtszene.png|600px|thumb|right|ronthem Editor]]

Nach einem reload der sv Seite werden die oben definierten GADs vom fronthemDevice in fhem angezeigt (hier mit bereits definierten GAD). Jetzt müssen die buttons (über ihr GAD) mit der fhem Funktionalität verbunden werden. Hier soll jeder button mit seinem Value den dummy setzen.

Mit den folgenden Einstellungen, die für jedes GAD der Button Group durchgefühert werden müssen, wird das erwünschte Verhalten erreicht. Jeder Button der Group setzt das dummy jetzt auf den den seinen "ON-VALUE" (dritt - vorletzter Wert in der definition oben). Ein weiterer Click (oder der rechte Button) setzt alles aus.

Für die Weihanchtsbeleuchtung wird unabhängig ein Steckdose geschaltet, das ist hier nicht dargestellt.

[[Kategorie: fronthem/smartVISU]]

SmartVISU/lichtSzene

2025-06-04T11:37:57Z

Wvhn: Anpassung an smartVISU Versionen ab v2.9

{{SEITENTITEL:smartVISU/lichtSzene}}

mit dem folgenden Code lässt sich eine Auswahl für Lichtszenen in smartVisu / fhem erstellen.

So soll es aussehen:

[[Datei:Smartvisu_Lichtszene_radio_buttons.png|600px|thumb|left|Screenshot Frontend smartVISU]]

Die Radio Buttons sollen dabei in einem Raum folgende Lichtszenen steuern:

* automatische Beleuchtung
* Fernsehen
* Arbeitsbeleuchtung
* Essen
* Party
* volle Beleuchtung
* Weihnachtsbeleuchtung
* alles Aus

Die gewünschte Funktionalität ist dabei das sich die Lichtszenen umschalten lassen. Wenn eine bereits aktivierte Funktion nochmal betätigt wird entspricht das "aus". Die Weihnachtsbeleuchtung soll sich unabhängig von den anderen Beleuchtungs Szenen aktivieren oder deaktivieren lassen.

Das bisher hier verwendete Widget "basic.dual" wurde in Version 2.9 ungültig gemacht und in v3.0 gelöscht. Es wird durch "basic.stateswitch" ersetzt, für das es ausführliche Beispiele in der Inline-Doku gibt, oder (meist mit zeitlicher Verzögerung) auch online:
[https://docu.smartvisu.de/3.5/index.php?page=basic/widget_basic.stateswitch]

Der Screenshot oben wird mit diesem code in sv erzeugt:

<nowiki><span style="display:inline-block; width: 40%">Lichtszene</span></nowiki>
<nowiki><span data-role="controlgroup" data-type="horizontal">
{{ basic.stateswitch('light.a', 'wz.light.szene.auto', 'midi', ['auto', 'off'], 'time_automatic', </nowiki>''<nowiki>, ['icon1', 'icon0'] ) }}</nowiki>''<nowiki>
{{ basic.stateswitch('light.b', 'wz.light.szene.tv', 'midi', ['tv', 'off'], 'it_television', </nowiki>''<nowiki>, ['icon1', 'icon0'] ) }}</nowiki>''<nowiki>
{{ basic.stateswitch('light.c', 'wz.light.szene.work', 'midi', ['work', 'off'], 'light_ceiling_light',</nowiki>''<nowiki>, ['icon1', 'icon0'] ) }}</nowiki>''<nowiki>
{{ basic.stateswitch('light.d', 'wz.light.szene.eat', 'midi', ['eat', 'off'], 'light_dinner_table', </nowiki>''<nowiki>, ['icon1', 'icon0'] ) }}</nowiki>''<nowiki>
{{ basic.stateswitch('light.e', 'wz.light.szene.party','midi', ['party', 'off'],'light_party', </nowiki>''<nowiki>, ['icon1', 'icon0'] ) }}</nowiki>''<nowiki>
{{ basic.stateswitch('light.f', 'wz.light.szene.full', 'midi', ['full', 'off'], 'light_light_dim_100',</nowiki>''<nowiki>, ['icon1', 'icon0'] ) }}</nowiki>''<nowiki>
{{ basic.stateswitch('light.g', 'wz.light.szene.xmas', 'midi', ['on', 'off'], 'scene_x-mas', </nowiki>''<nowiki>, ['icon1', 'icon0'] ) }}</nowiki>''<nowiki>
{{ basic.stateswitch('light.h', 'wz.light.szene.off', 'midi', ['off', 'off'], 'control_on_off', </nowiki>''<nowiki>, ['icon1', 'icon0'] ) }}</nowiki>''
<nowiki></span></nowiki>

In diesem Beispiel wird in fhem dazu ein dummy erzeugt, über den die Lichtszenen gesteuert werden. Natürlich gäbe es auch alternative Umsetzungen, bspw mit lightscene)

Der dummy (name wz.licht.scene) bekommt diese setlist
<nowiki>
define wz.licht.scene dummy
attr wz.licht.scene setList off auto tv eat work party full
</nowiki>

[[Datei:fronthem_gadeditor_lichtszene.png|600px|thumb|right|ronthem Editor]]

Nach einem reload der sv Seite werden die oben definierten GADs vom fronthemDevice in fhem angezeigt (hier mit bereits definierten GAD). Jetzt müssen die buttons (über ihr GAD) mit der fhem Funktionalität verbunden werden. Hier soll jeder button mit seinem Value den dummy setzen.

Mit den folgenden Einstellungen, die für jedes GAD der Button Group durchgefühert werden müssen, wird das erwünschte Verhalten erreicht. Jeder Button der Group setzt das dummy jetzt auf den den seinen "ON-VALUE" (dritt - vorletzter Wert in der definition oben). Ein weiterer Click (oder der rechte Button) setzt alles aus.

Für die Weihanchtsbeleuchtung wird unabhängig ein Steckdose geschaltet, das ist hier nicht dargestellt.

[[Kategorie: fronthem/smartVISU]]

SmartVISU/Universelle ZeitSchaltUhr (UZSU)

2025-06-04T08:26:32Z

Wvhn: Anpassung auf aktuelle smartVISU Version (ab v2.9)