FHEMWiki - Benutzerbeiträge [de]

FHEMWEB/VoiceControl: Web-STT & Hardware-Wakeword

2026-04-07T19:53:42Z

Schwatter:

[[Datei:Voicecontrol.png|mini]]

== VoiceControl – Sprachsteuerung via Browser und Atom Echo s3r ==

Diese Lösung ermöglicht eine flexible Sprachsteuerung für [[FHEM]]. Sprache wird in Text (Speech-to-Text) umgewandelt und als Reading <code>STT</code> im Device <code>global</code> bereitgestellt. Dieses Reading kann anschließend zentral (z. B. über <code>notify</code> oder <code>DOIF</code>) ausgewertet werden.

'''Unterstützt werden nur Chrome-basierte Browser (Chrome, Edge, Fully Browser). Firefox und Chromium haben
leider kein Backend.'''

Es gibt zwei unterschiedliche Wege zur Spracherfassung:

* Weg 1️⃣ (Software): Browser-basierte Komplettlösung
* Weg 2️⃣ (Hybrid): Hardware-Wakeword + Browser-Spracherkennung

=== Hilfe ===
* Forenthread zum {{Link2Forum|Topic=144147|LinkText=VoiceControl Sprachsteuerung}}

=== Funktionen ===

==== Grundprinzip ====
* Sprache → Speech-to-Text
* Ergebnis → Reading <code>STT</code> im Device <code>global</code>
* Zentrale Logik verarbeitet Befehle

==== Betriebsarten ====
* Push-to-Talk (nur Browser)
* Always-On mit Wakeword
* Hardware-Wakeword (Hybrid)

==== Rückmeldungen ====
* Sprachausgabe (TTS)
* Visuelle Bubble im Browser
* Optional gezielte Rückmeldung per Client-ID

== Weg 1️⃣: Browser-Lösung (voicecontrol.js) ==

Das Script nutzt nur die Google Web Speech API.

=== Bedienung ===

==== Push-to-Talk ====
* Button gedrückt halten
* Wakeword erforderlich (Standard: „James“)
* Nach Aktivierung ca.6sek Zeit für Befehl

==== Always-On ====
* Kurzer Klick aktiviert Dauerbetrieb
* Wakeword erforderlich (Standard: „James“)
* Nach Aktivierung ca.6sek Zeit für Befehl
* JS wird neu gestartet udn Schleife fängt von vorne an

==== Wakeword ====
* Standard: <code>james</code>
* Anpassbar im Script:
<syntaxhighlight lang="javascript">
const wakewords = ["james"];</syntaxhighlight>

=== Installation ===

==== Datei kopieren ====
<syntaxhighlight lang="Perl">
{ Svn_GetFile('contrib/voicecontrol.js', 'www/pgm2/voicecontrol.js') }
</syntaxhighlight>

==== Einbindung ====
<syntaxhighlight lang="perl">
attr WEBphone JavaScripts www/pgm2/voicecontrol.js
</syntaxhighlight>

==== Hinweis (HTTP ohne HTTPS) ====
Chrome benötigt Freigabe für Mikrofon:

* <code>chrome://flags/#unsafely-treat-insecure-origin-as-secure</code>
* Eigene URL hinzufügen
* Auf <code>Enabled</code> setzen

== Weg 2️⃣: Hybrid-Lösung mit Fully Kiosk Browser + Atom Echo (voicecontrol_echo.js) ==

Diese Variante kombiniert Hardware und Software. Daher ist sie besonders geeignet für
ein Tablet mit Fully Kiosk Browser oder ähnlich, welches das Webinterface dauerhaft anzeigt.

* Wakeword-Erkennung erfolgt auf dem ESP (Atom Echo s3r)
* Die eigentliche Sprachverarbeitung (Speech-to-Text) erfolgt im Browser

=== Funktionsweise ===

# Wakeword wird auf dem ESP erkannt
# FHEM erzeugt Event (z. B. <code>james_detected</code>)
# Browser empfängt Event via WebSocket
# Speech-to-Text startet im Browser
# Ergebnis wird an FHEM übertragen

=== Aktivierung ===

* Kurzer Klick auf Button aktiviert/deaktiviert System
* Baut WebSocket-Verbindung zu FHEM auf
* Kein Push-to-Talk-Modus

=== Installation ===

==== Datei kopieren ====

Die Datei voicecontrol_echo.js ist hier zu finden:
{{Link2Forum|Topic=144147|LinkText=VoiceControl Sprachsteuerung}}
und muss nach www/pgm2/voicecontrol_echo.js kopiert werden.

Die echo_s3r.yaml ist für den Atom Echo s3r. Die Konfuguration ist weiter unten beschrieben.

==== Einbindung in Fhem ====

<syntaxhighlight lang="perl">
attr WEBtablet JavaScripts www/pgm2/voicecontrol_echo.js
</syntaxhighlight>

* Das Skript voicecontrol_echo.js muss in dem FHEMWEB-Device angelegt werden, das für den Fully Kiosk Browser zuständig ist

<syntaxhighlight lang="perl">
attr WEBtablet additionalInform atom_echos3r_9888e00f4280,global
</syntaxhighlight>

* atom_echos3r_9********** = da kommt das Wakeword an, bzw. der Devicename vom Echo
* global = das ist zum auswerten der Sprachausgabe wichtig

=== Konfiguration im Javascript ===

<syntaxhighlight lang="javascript">
const DEVICE = "atom_echos3r_9888e00f4280";
const TRIGGER = "james_detected";
const FHEM_IP = "192.168.1.76:8085";
</syntaxhighlight>

* <code>DEVICE</code> → FHEM-Device des ESP
* <code>TRIGGER</code> → Event bei Wakeword
* <code>FHEM_IP</code> → FHEM-Server

=== Konfiguration in der Yaml ===

Damit sich der ESP mit eurem MQTT-Server und WLAN verbindet, müssen folgende Stellen angepasst werden.

wifi:
ssid: "YOUR_SSID"
password: "YOUR_PW"
fast_connect: true

mqtt:
broker: 192.168.1.76
port: 1884
username: "YOUR_USERNAME"
password: "YOUR_PW"
topic_prefix: atom_echo

=== Wakeword (ESP / ESPHome) ===

Das Wakeword wird direkt auf dem ESP definiert:

* Umsetzung über ESPHome
* Eine große Auswahl an Wakewords sind hier zu finden:
https://github.com/TaterTotterson/microWakeWords

Hier ein Beispiel, wie das Wakeword definiert wird.

micro_wake_word:
id: mww
microphone: echo_mic
models:
- model: "https://github.com/TaterTotterson/microWakeWords/raw/main/microWakeWordsV2/james.json"
id: james_model
probability_cutoff: 0.45

=== Kommunikation ===

* WebSocket-Verbindung zu FHEM
* Lauscht auf Device-Events
* Automatischer Reconnect bei Abbruch

=== Ablauf nach Wakeword ===

# System sagt „Ja?“
# Browser startet SpeechRecognition
# Nutzer spricht Befehl
# Befehl wird verarbeitet
# Rückmeldung „Erledigt“

== Zentrale Auswertung (Logik) ==

Beide Wege schreiben in:

<code>global:STT</code>

Die Verarbeitung erfolgt zentral über ein <code>notify</code>. Ein Device wird in der Mappingtabelle eingetragen.

Beispiel:
<code>"esszimmer:licht|lampe|deckenlampe" => { dev => "Lampe01_Ez", label => "Licht Esszimmer", cmdOn => "on", cmdOff => "off" }</code>

Aufschlüsselung:
<code>"hauptkeyword:Filter1|Filter3|Filter3" => { dev => "Devicename", label => "Übersichtname", cmdOn => "on", cmdOff => "off" }</code>

=== Beispiel: notify ===

<syntaxhighlight lang="perl">
defmod n_VoiceControl notify global:STT:.* {\
# --- VORBEREITUNG ---\
my ($cleanEvent, $clientId) = $EVENT =~ /^(.*)\s\[(.*)\]$/;;\
$cleanEvent //= $EVENT;;\
$clientId //= "unknown";;\
\
# --- KONFIGURATION: Zentrales Mapping ---\
my %smartHomeDevices = (\
"esszimmer:licht|lampe|deckenlampe" => { dev => "Lampe01_Ez", label => "Licht Esszimmer", cmdOn => "on", cmdOff => "off" },\
"esszimmer:aquarium" => { dev => "Aquarium_Aktor", label => "Aquarium", cmdOn => "on", cmdOff => "off" },\
"küche" => { dev => "Deckenlampe_Kue", label => "Licht Küche", cmdOn => "on", cmdOff => "off" },\
"wohnzimmer" => { dev => "Lampe06_Dek", label => "Licht Wohnzimmer", cmdOn => "on", cmdOff => "off" },\
"fernseher|tv" => { dev => "VuPlus", label => "Fernseher", cmdOn => "on", cmdOff => "off" },\
"rechner|pc" => { dev => "PC_Aktor", label => "PC", cmdOn => "on", cmdOff => "off" },\
"garage|tor" => { dev => "Garagentor_Aktor", label => "Garagentor öffnen/schließen", cmdOn => "open", cmdOff => "close" },\
"kaffee" => { dev => "Kaffeemaschine", label => "Kaffeemaschine", cmdOn => "on", cmdOff => "off" },\
"roberto" => { dev => "MQTT2_valetudo_FlusteredUnequaledFish", label => "Lade Roberto", cmdOn => "charge" },\
"ambiente" => { dev => "LampeSzeneAlle", label => "Zentrales Licht", type => "dimmer", cmdOn => "on", cmdOff => "off" },\
"sauge|reinige|putze|staubsauger|roboter" => { dev => "MQTT2_valetudo_FlusteredUnequaledFish", label => "Staubsauger", type => "vacuum" },\
"ambilight" => { label => "Ambilight", type => "system", cmd => "sshpass -p 'GEHEIMESPASSWORD' ssh -o StrictHostKeyChecking=no root\@192.168.1.46 '/usr/share/hyperhdr/scripts/hyperhdr_toggle.sh'" }\
);;\
\
my %vacRooms = ("arbeitszimmer" => "Arbeitszimmer", "badezimmer" => "Badezimmer", "esszimmer" => "Esszimmer", "flur" => "Flur", "küche" => "Küche", "wohnzimmer" => "Wohnzimmer");;\
\
my $onRegEx = '\b(an|ein|einschalten|starte|aktivier|aktiviere|öffne|öffnen|auf|hoch|lade)\b';;\
my $offRegEx = '\b(aus|ausschalten|stop|stoppe|beende|deaktivier|deaktiviere|schließe|schließen|zu|runter)\b';;\
\
my @commands = split(/\s*(?:und|dann|,)\s*/, lc($cleanEvent));;\
\
# --- DER BEFEHLS-LOOP ---\
foreach my $cmd_part (@commands) {\
$cmd_part =~ s/^\s+|\s+$//g;;\
my $is_on = ($cmd_part =~ /$onRegEx/) ? 1 : 0;;\
my $is_off = ($cmd_part =~ /$offRegEx/) ? 1 : 0;;\
$cmd_part =~ s/\b(ich|brauche|mach|bitte|kannst du|würdest du|mal|doch|den|das|die|im|in der)\b//g;;\
\
# --- GENERISCHE STEUERUNG ---\
my $match = 0;;\
# Sortierung stellt sicher, dass 'dimmer/vacuum' Vorrang haben\
foreach my $key (sort { ($smartHomeDevices{$b}{type}//"") cmp ($smartHomeDevices{$a}{type}//"") } keys %smartHomeDevices) {\
\
my ($main, $must) = split(/:/, $key);;\
\
# Prüfe Hauptwort\
if ($cmd_part =~ /\b($main)\b/i) {\
# Prüfe Pflichtwort falls vorhanden\
next if ($must && $cmd_part !~ /\b($must)\b/i);;\
\
my $d = $smartHomeDevices{$key};;\
\
# A) System\
if (($d->{type} // "") eq "system") {\
system($d->{cmd});;\
}\
\
# B) Staubsauger\
if (($d->{type} // "") eq "vacuum") {\
my @found = grep { $cmd_part =~ /\b$_\b/ } keys %vacRooms;;\
fhem(@found ? "set $d->{dev} clean_segment ".join(",", map { $vacRooms{$_} } @found) : "set $d->{dev} start");;\
}\
# C) Dimmer (Kompakt & korrigiert)\
elsif (($d->{type} // "") eq "dimmer") {\
$cmd_part =~ /(\d+)/ \
? fhem("set $d->{dev} brightness " . int(($1 > 100 ? 100 : $1) * 2.55)) \
: ($is_on || $is_off) && fhem("set $d->{dev} " . ($is_off ? "off" : "on"));;\
}\
# D) Standard An/Aus\
else {\
my $fhem_cmd = $is_off ? ($d->{cmdOff} // "off") : ($d->{cmdOn} // "on");;\
fhem("set $d->{dev} $fhem_cmd") if ($is_on || $is_off);;\
}\
\
$match = 1;; last;;\
}\
}\
next if $match;;\
\
# --- HILFE ---\
if ($cmd_part =~ /(hilfe|kommandos|übersicht)/) {\
my $h = '<div style="text-align:left;;min-width:250px;;font-family:sans-serif;;">Befehlsübersicht: ';;\
my %seen;;\
for my $k (sort keys %smartHomeDevices) {\
my $d = $smartHomeDevices{$k};;\
next if $seen{$d->{label}}++;; \
my $suffix = ($d->{cmdOn} && $d->{cmdOff} && $d->{label} !~ /(an\/aus|öffnen\/schließen)/i) ? " (an/aus)" : "";;\
$suffix = " [0-100%]" if ($d->{type} // "") eq "dimmer";;\
$h .= "• $d->{label}$suffix ";;\
}\
$h .= ' Staubsauger Räume • '.join(", ", map { ucfirst($_) } sort keys %vacRooms).' </div>';;\
$h =~ s/'/\\"/g;;\
my $js = "if((document.querySelector('input[name=\"fw_id\"]')||{}).value==='$clientId'){FW_okDialog('$h')}";;\
FW_directNotify("#FHEMWEB:$_", $js, "") for devspec2array("TYPE=FHEMWEB");;\
}\
}\
}
</syntaxhighlight>

== Unterschiede der Wege ==

{| class="wikitable"
! Feature
! Browser
! Hybrid (Atom Echo S3)
|-
| Wakeword
| Browser
| ESP (Hardware)
|-
| Push-to-Talk
| Ja
| Nein
|-
| Always-On
| Ja (bedingt)
| Ja
|-
| Architektur
| Software
| Software + Hardware
|-
| Stabilität
| Sehr stabil
| Sehr stabil (Wakeword extern)
|}

== FireOS mit Fully Browser (Plus) ==

Damit die Spracherkennung funktioniert:

* Apps installieren:
Google
Speech Recognition & Synthesis
* FireOS:
„Tastatur und Sprache“ → „Text-to-Speech“
* Fully Browser:
<code>Enable JavaScriptInterface (PLUS)</code> aktivieren

[[Kategorie:Code Snippets]]
[[Kategorie:FHEM Frontends]]
[[Kategorie:Sprachsteuerung]]

FHEMWEB/VoiceControl: Web-STT & Hardware-Wakeword

2026-04-07T19:41:10Z

Schwatter:

[[Datei:Voicecontrol.png|mini]]

== VoiceControl – Sprachsteuerung via Browser und Atom Echo s3r ==

Diese Lösung ermöglicht eine flexible Sprachsteuerung für [[FHEM]]. Sprache wird in Text (Speech-to-Text) umgewandelt und als Reading <code>STT</code> im Device <code>global</code> bereitgestellt. Dieses Reading kann anschließend zentral (z. B. über <code>notify</code> oder <code>DOIF</code>) ausgewertet werden.

'''Unterstützt werden nur Chrome-basierte Browser (Chrome, Edge, Fully Browser). Firefox und Chromium haben
leider kein Backend.'''

Es gibt zwei unterschiedliche Wege zur Spracherfassung:

* Weg 1️⃣ (Software): Browser-basierte Komplettlösung
* Weg 2️⃣ (Hybrid): Hardware-Wakeword + Browser-Spracherkennung

=== Hilfe ===
* Forenthread zum {{Link2Forum|Topic=144147|LinkText=VoiceControl Sprachsteuerung}}

=== Funktionen ===

==== Grundprinzip ====
* Sprache → Speech-to-Text
* Ergebnis → Reading <code>STT</code> im Device <code>global</code>
* Zentrale Logik verarbeitet Befehle

==== Betriebsarten ====
* Push-to-Talk (nur Browser)
* Always-On mit Wakeword
* Hardware-Wakeword (Hybrid)

==== Rückmeldungen ====
* Sprachausgabe (TTS)
* Visuelle Bubble im Browser
* Optional gezielte Rückmeldung per Client-ID

== Weg 1️⃣: Browser-Lösung (voicecontrol.js) ==

Das Script nutzt nur die Google Web Speech API.

=== Bedienung ===

==== Push-to-Talk ====
* Button gedrückt halten
* Wakeword erforderlich (Standard: „James“)
* Nach Aktivierung ca.6sek Zeit für Befehl

==== Always-On ====
* Kurzer Klick aktiviert Dauerbetrieb
* Wakeword erforderlich (Standard: „James“)
* Nach Aktivierung ca.6sek Zeit für Befehl
* JS wird neu gestartet udn Schleife fängt von vorne an

==== Wakeword ====
* Standard: <code>james</code>
* Anpassbar im Script:
<syntaxhighlight lang="javascript">
const wakewords = ["james"];</syntaxhighlight>

=== Installation ===

==== Datei kopieren ====
<syntaxhighlight lang="Perl">
{ Svn_GetFile('contrib/voicecontrol.js', 'www/pgm2/voicecontrol.js') }
</syntaxhighlight>

==== Einbindung ====
<syntaxhighlight lang="perl">
attr WEBphone JavaScripts www/pgm2/voicecontrol.js
</syntaxhighlight>

==== Hinweis (HTTP ohne HTTPS) ====
Chrome benötigt Freigabe für Mikrofon:

* <code>chrome://flags/#unsafely-treat-insecure-origin-as-secure</code>
* Eigene URL hinzufügen
* Auf <code>Enabled</code> setzen

== Weg 2️⃣: Hybrid-Lösung mit Fully Kiosk Browser + Atom Echo (voicecontrol_echo.js) ==

Diese Variante kombiniert Hardware und Software. Daher ist sie besonders geeignet für
ein Tablet mit Fully Kiosk Browser oder ähnlich, welches das Webinterface dauerhaft anzeigt.

* Wakeword-Erkennung erfolgt auf dem ESP (Atom Echo s3r)
* Die eigentliche Sprachverarbeitung (Speech-to-Text) erfolgt im Browser

=== Funktionsweise ===

# Wakeword wird auf dem ESP erkannt
# FHEM erzeugt Event (z. B. <code>james_detected</code>)
# Browser empfängt Event via WebSocket
# Speech-to-Text startet im Browser
# Ergebnis wird an FHEM übertragen

=== Aktivierung ===

* Kurzer Klick auf Button aktiviert/deaktiviert System
* Baut WebSocket-Verbindung zu FHEM auf
* Kein Push-to-Talk-Modus

=== Installation ===

==== Datei kopieren ====

Die Datei voicecontrol_echo.js ist hier zu finden:
{{Link2Forum|Topic=144147|LinkText=VoiceControl Sprachsteuerung}}
und muss nach www/pgm2/voicecontrol_echo.js kopiert werden.

Die echo_s3r.yaml ist für den Atom Echo s3r. Die Konfuguration ist weiter unten beschrieben.

==== Einbindung in Fhem ====

<syntaxhighlight lang="perl">
attr WEBtablet JavaScripts www/pgm2/voicecontrol_echo.js
</syntaxhighlight>

Das Skript voicecontrol_echo.js muss im FHEMWEB-Device angelegt werden, das für den Fully Kiosk Browser zuständig ist

<syntaxhighlight lang="perl">
attr WEBtablet additionalInform atom_echos3r_9888e00f4280,global
</syntaxhighlight>

atom_echos3r_9********** = da kommt das Wakeword an, bzw. der Devicename vom Echo
global = das ist zum auswerten der Sprachausgabe wichtig

=== Konfiguration im Javascript ===

<syntaxhighlight lang="javascript">
const DEVICE = "atom_echos3r_9888e00f4280";
const TRIGGER = "james_detected";
const FHEM_IP = "192.168.1.76:8085";
</syntaxhighlight>

* <code>DEVICE</code> → FHEM-Device des ESP
* <code>TRIGGER</code> → Event bei Wakeword
* <code>FHEM_IP</code> → FHEM-Server

=== Konfiguration in der Yaml ===

Damit sich der ESP mit eurem MQTT-Server und WLAN verbindet, müssen folgende Stellen angepasst werden.

wifi:
ssid: "YOUR_SSID"
password: "YOUR_PW"
fast_connect: true

mqtt:
broker: 192.168.1.76
port: 1884
username: "YOUR_USERNAME"
password: "YOUR_PW"
topic_prefix: atom_echo

=== Wakeword (ESP / ESPHome) ===

Das Wakeword wird direkt auf dem ESP definiert:

* Umsetzung über ESPHome
* Eine große Auswahl an Wakewords sind hier zu finden:
https://github.com/TaterTotterson/microWakeWords

Hier ein Beispiel, wie das Wakeword definiert wird.

micro_wake_word:
id: mww
microphone: echo_mic
models:
- model: "https://github.com/TaterTotterson/microWakeWords/raw/main/microWakeWordsV2/james.json"
id: james_model
probability_cutoff: 0.45

=== Kommunikation ===

* WebSocket-Verbindung zu FHEM
* Lauscht auf Device-Events
* Automatischer Reconnect bei Abbruch

=== Ablauf nach Wakeword ===

# System sagt „Ja?“
# Browser startet SpeechRecognition
# Nutzer spricht Befehl
# Befehl wird verarbeitet
# Rückmeldung „Erledigt“

== Zentrale Auswertung (Logik) ==

Beide Wege schreiben in:

<code>global:STT</code>

Die Verarbeitung erfolgt zentral über ein <code>notify</code>. Ein Device wird in der Mappingtabelle eingetragen.

Beispiel:
<code>"esszimmer:licht|lampe|deckenlampe" => { dev => "Lampe01_Ez", label => "Licht Esszimmer", cmdOn => "on", cmdOff => "off" }</code>

Aufschlüsselung:
<code>"hauptkeyword:Filter1|Filter3|Filter3" => { dev => "Devicename", label => "Übersichtname", cmdOn => "on", cmdOff => "off" }</code>

=== Beispiel: notify ===

<syntaxhighlight lang="perl">
defmod n_VoiceControl notify global:STT:.* {\
# --- VORBEREITUNG ---\
my ($cleanEvent, $clientId) = $EVENT =~ /^(.*)\s\[(.*)\]$/;;\
$cleanEvent //= $EVENT;;\
$clientId //= "unknown";;\
\
# --- KONFIGURATION: Zentrales Mapping ---\
my %smartHomeDevices = (\
"esszimmer:licht|lampe|deckenlampe" => { dev => "Lampe01_Ez", label => "Licht Esszimmer", cmdOn => "on", cmdOff => "off" },\
"esszimmer:aquarium" => { dev => "Aquarium_Aktor", label => "Aquarium", cmdOn => "on", cmdOff => "off" },\
"küche" => { dev => "Deckenlampe_Kue", label => "Licht Küche", cmdOn => "on", cmdOff => "off" },\
"wohnzimmer" => { dev => "Lampe06_Dek", label => "Licht Wohnzimmer", cmdOn => "on", cmdOff => "off" },\
"fernseher|tv" => { dev => "VuPlus", label => "Fernseher", cmdOn => "on", cmdOff => "off" },\
"rechner|pc" => { dev => "PC_Aktor", label => "PC", cmdOn => "on", cmdOff => "off" },\
"garage|tor" => { dev => "Garagentor_Aktor", label => "Garagentor öffnen/schließen", cmdOn => "open", cmdOff => "close" },\
"kaffee" => { dev => "Kaffeemaschine", label => "Kaffeemaschine", cmdOn => "on", cmdOff => "off" },\
"roberto" => { dev => "MQTT2_valetudo_FlusteredUnequaledFish", label => "Lade Roberto", cmdOn => "charge" },\
"ambiente" => { dev => "LampeSzeneAlle", label => "Zentrales Licht", type => "dimmer", cmdOn => "on", cmdOff => "off" },\
"sauge|reinige|putze|staubsauger|roboter" => { dev => "MQTT2_valetudo_FlusteredUnequaledFish", label => "Staubsauger", type => "vacuum" },\
"ambilight" => { label => "Ambilight", type => "system", cmd => "sshpass -p 'GEHEIMESPASSWORD' ssh -o StrictHostKeyChecking=no root\@192.168.1.46 '/usr/share/hyperhdr/scripts/hyperhdr_toggle.sh'" }\
);;\
\
my %vacRooms = ("arbeitszimmer" => "Arbeitszimmer", "badezimmer" => "Badezimmer", "esszimmer" => "Esszimmer", "flur" => "Flur", "küche" => "Küche", "wohnzimmer" => "Wohnzimmer");;\
\
my $onRegEx = '\b(an|ein|einschalten|starte|aktivier|aktiviere|öffne|öffnen|auf|hoch|lade)\b';;\
my $offRegEx = '\b(aus|ausschalten|stop|stoppe|beende|deaktivier|deaktiviere|schließe|schließen|zu|runter)\b';;\
\
my @commands = split(/\s*(?:und|dann|,)\s*/, lc($cleanEvent));;\
\
# --- DER BEFEHLS-LOOP ---\
foreach my $cmd_part (@commands) {\
$cmd_part =~ s/^\s+|\s+$//g;;\
my $is_on = ($cmd_part =~ /$onRegEx/) ? 1 : 0;;\
my $is_off = ($cmd_part =~ /$offRegEx/) ? 1 : 0;;\
$cmd_part =~ s/\b(ich|brauche|mach|bitte|kannst du|würdest du|mal|doch|den|das|die|im|in der)\b//g;;\
\
# --- GENERISCHE STEUERUNG ---\
my $match = 0;;\
# Sortierung stellt sicher, dass 'dimmer/vacuum' Vorrang haben\
foreach my $key (sort { ($smartHomeDevices{$b}{type}//"") cmp ($smartHomeDevices{$a}{type}//"") } keys %smartHomeDevices) {\
\
my ($main, $must) = split(/:/, $key);;\
\
# Prüfe Hauptwort\
if ($cmd_part =~ /\b($main)\b/i) {\
# Prüfe Pflichtwort falls vorhanden\
next if ($must && $cmd_part !~ /\b($must)\b/i);;\
\
my $d = $smartHomeDevices{$key};;\
\
# A) System\
if (($d->{type} // "") eq "system") {\
system($d->{cmd});;\
}\
\
# B) Staubsauger\
if (($d->{type} // "") eq "vacuum") {\
my @found = grep { $cmd_part =~ /\b$_\b/ } keys %vacRooms;;\
fhem(@found ? "set $d->{dev} clean_segment ".join(",", map { $vacRooms{$_} } @found) : "set $d->{dev} start");;\
}\
# C) Dimmer (Kompakt & korrigiert)\
elsif (($d->{type} // "") eq "dimmer") {\
$cmd_part =~ /(\d+)/ \
? fhem("set $d->{dev} brightness " . int(($1 > 100 ? 100 : $1) * 2.55)) \
: ($is_on || $is_off) && fhem("set $d->{dev} " . ($is_off ? "off" : "on"));;\
}\
# D) Standard An/Aus\
else {\
my $fhem_cmd = $is_off ? ($d->{cmdOff} // "off") : ($d->{cmdOn} // "on");;\
fhem("set $d->{dev} $fhem_cmd") if ($is_on || $is_off);;\
}\
\
$match = 1;; last;;\
}\
}\
next if $match;;\
\
# --- HILFE ---\
if ($cmd_part =~ /(hilfe|kommandos|übersicht)/) {\
my $h = '<div style="text-align:left;;min-width:250px;;font-family:sans-serif;;">Befehlsübersicht: ';;\
my %seen;;\
for my $k (sort keys %smartHomeDevices) {\
my $d = $smartHomeDevices{$k};;\
next if $seen{$d->{label}}++;; \
my $suffix = ($d->{cmdOn} && $d->{cmdOff} && $d->{label} !~ /(an\/aus|öffnen\/schließen)/i) ? " (an/aus)" : "";;\
$suffix = " [0-100%]" if ($d->{type} // "") eq "dimmer";;\
$h .= "• $d->{label}$suffix ";;\
}\
$h .= ' Staubsauger Räume • '.join(", ", map { ucfirst($_) } sort keys %vacRooms).' </div>';;\
$h =~ s/'/\\"/g;;\
my $js = "if((document.querySelector('input[name=\"fw_id\"]')||{}).value==='$clientId'){FW_okDialog('$h')}";;\
FW_directNotify("#FHEMWEB:$_", $js, "") for devspec2array("TYPE=FHEMWEB");;\
}\
}\
}
</syntaxhighlight>

== Unterschiede der Wege ==

{| class="wikitable"
! Feature
! Browser
! Hybrid (Atom Echo S3)
|-
| Wakeword
| Browser
| ESP (Hardware)
|-
| Push-to-Talk
| Ja
| Nein
|-
| Always-On
| Ja (bedingt)
| Ja
|-
| Architektur
| Software
| Software + Hardware
|-
| Stabilität
| Sehr stabil
| Sehr stabil (Wakeword extern)
|}

== FireOS mit Fully Browser (Plus) ==

Damit die Spracherkennung funktioniert:

* Apps installieren:
Google
Speech Recognition & Synthesis
* FireOS:
„Tastatur und Sprache“ → „Text-to-Speech“
* Fully Browser:
<code>Enable JavaScriptInterface (PLUS)</code> aktivieren

[[Kategorie:Code Snippets]]
[[Kategorie:FHEM Frontends]]
[[Kategorie:Sprachsteuerung]]

FHEMWEB/VoiceControl: Web-STT & Hardware-Wakeword

2026-04-07T19:20:31Z

Schwatter:

[[Datei:Voicecontrol.png|mini]]

== VoiceControl – Sprachsteuerung via Browser und Atom Echo s3r ==

Diese Lösung ermöglicht eine flexible Sprachsteuerung für [[FHEM]]. Sprache wird in Text (Speech-to-Text) umgewandelt und als Reading <code>STT</code> im Device <code>global</code> bereitgestellt. Dieses Reading kann anschließend zentral (z. B. über <code>notify</code> oder <code>DOIF</code>) ausgewertet werden.

'''Unterstützt werden nur Chrome-basierte Browser (Chrome, Edge, Fully Browser). Firefox und Chromium haben
leider kein Backend.'''

Es gibt zwei unterschiedliche Wege zur Spracherfassung:

* Weg 1️⃣ (Software): Browser-basierte Komplettlösung
* Weg 2️⃣ (Hybrid): Hardware-Wakeword + Browser-Spracherkennung

=== Hilfe ===
* Forenthread zum {{Link2Forum|Topic=144147|LinkText=VoiceControl Sprachsteuerung}}

=== Funktionen ===

==== Grundprinzip ====
* Sprache → Speech-to-Text
* Ergebnis → Reading <code>STT</code> im Device <code>global</code>
* Zentrale Logik verarbeitet Befehle

==== Betriebsarten ====
* Push-to-Talk (nur Browser)
* Always-On mit Wakeword
* Hardware-Wakeword (Hybrid)

==== Rückmeldungen ====
* Sprachausgabe (TTS)
* Visuelle Bubble im Browser
* Optional gezielte Rückmeldung per Client-ID

== Weg 1️⃣: Browser-Lösung (voicecontrol.js) ==

Das Script nutzt nur die Google Web Speech API.

=== Bedienung ===

==== Push-to-Talk ====
* Button gedrückt halten
* Wakeword erforderlich (Standard: „James“)
* Nach Aktivierung ca.6sek Zeit für Befehl

==== Always-On ====
* Kurzer Klick aktiviert Dauerbetrieb
* Wakeword erforderlich (Standard: „James“)
* Nach Aktivierung ca.6sek Zeit für Befehl
* JS wird neu gestartet udn Schleife fängt von vorne an

==== Wakeword ====
* Standard: <code>james</code>
* Anpassbar im Script:
<syntaxhighlight lang="javascript">
const wakewords = ["james"];</syntaxhighlight>

=== Installation ===

==== Datei kopieren ====
<syntaxhighlight lang="Perl">
{ Svn_GetFile('contrib/voicecontrol.js', 'www/pgm2/voicecontrol.js') }
</syntaxhighlight>

==== Einbindung ====
<syntaxhighlight lang="perl">
attr WEBphone JavaScripts www/pgm2/voicecontrol.js
</syntaxhighlight>

==== Hinweis (HTTP ohne HTTPS) ====
Chrome benötigt Freigabe für Mikrofon:

* <code>chrome://flags/#unsafely-treat-insecure-origin-as-secure</code>
* Eigene URL hinzufügen
* Auf <code>Enabled</code> setzen

== Weg 2️⃣: Hybrid-Lösung mit Browser + Atom Echo (voicecontrol_echo.js) ==

Diese Variante kombiniert Hardware und Software:

* Wakeword-Erkennung erfolgt auf dem ESP (Atom Echo s3r)
* Die eigentliche Sprachverarbeitung (Speech-to-Text) erfolgt im Browser

=== Funktionsweise ===

# Wakeword wird auf dem ESP erkannt
# FHEM erzeugt Event (z. B. <code>james_detected</code>)
# Browser empfängt Event via WebSocket
# Speech-to-Text startet im Browser
# Ergebnis wird an FHEM übertragen

=== Aktivierung ===

* Kurzer Klick auf Button aktiviert/deaktiviert System
* Baut WebSocket-Verbindung zu FHEM auf
* Kein Push-to-Talk-Modus

=== Installation ===

==== Datei kopieren ====

Die Datei voicecontrol_echo.js ist hier zu finden:
{{Link2Forum|Topic=144147|LinkText=VoiceControl Sprachsteuerung}}
und muss nach www/pgm2/voicecontrol_echo.js kopiert werden.

Die echo_s3r.yaml ist für den Atom Echo s3r. Die Konfuguration ist weiter unten beschrieben.

==== Einbindung ====
<syntaxhighlight lang="perl">
attr WEBtablet JavaScripts www/pgm2/voicecontrol_echo.js
</syntaxhighlight>

=== Konfiguration im Javascript ===

<syntaxhighlight lang="javascript">
const DEVICE = "atom_echos3r_9888e00f4280";
const TRIGGER = "james_detected";
const FHEM_IP = "192.168.1.76:8085";
</syntaxhighlight>

* <code>DEVICE</code> → FHEM-Device des ESP
* <code>TRIGGER</code> → Event bei Wakeword
* <code>FHEM_IP</code> → FHEM-Server

=== Konfiguration in der Yaml ===

Damit sich der ESP mit eurem MQTT-Server und WLAN verbindet, müssen folgende Stellen angepasst werden.

wifi:
ssid: "YOUR_SSID"
password: "YOUR_PW"
fast_connect: true

mqtt:
broker: 192.168.1.76
port: 1884
username: "YOUR_USERNAME"
password: "YOUR_PW"
topic_prefix: atom_echo

=== Wakeword (ESP / ESPHome) ===

Das Wakeword wird direkt auf dem ESP definiert:

* Umsetzung über ESPHome
* Eine große Auswahl an Wakewords sind hier zu finden:
https://github.com/TaterTotterson/microWakeWords

Hier ein Beispiel, wie das Wakeword definiert wird.

micro_wake_word:
id: mww
microphone: echo_mic
models:
- model: "https://github.com/TaterTotterson/microWakeWords/raw/main/microWakeWordsV2/james.json"
id: james_model
probability_cutoff: 0.6

=== Kommunikation ===

* WebSocket-Verbindung zu FHEM
* Lauscht auf Device-Events
* Automatischer Reconnect bei Abbruch

=== Ablauf nach Wakeword ===

# System sagt „Ja?“
# Browser startet SpeechRecognition
# Nutzer spricht Befehl
# Befehl wird verarbeitet
# Rückmeldung „Erledigt“

== Zentrale Auswertung (Logik) ==

Beide Wege schreiben in:

<code>global:STT</code>

Die Verarbeitung erfolgt zentral über ein <code>notify</code>. Ein Device wird in der Mappingtabelle eingetragen.

Beispiel:
<code>"esszimmer:licht|lampe|deckenlampe" => { dev => "Lampe01_Ez", label => "Licht Esszimmer", cmdOn => "on", cmdOff => "off" }</code>

Aufschlüsselung:
<code>"hauptkeyword:Filter1|Filter3|Filter3" => { dev => "Devicename", label => "Übersichtname", cmdOn => "on", cmdOff => "off" }</code>

=== Beispiel: notify ===

<syntaxhighlight lang="perl">
defmod n_VoiceControl notify global:STT:.* {\
# --- VORBEREITUNG ---\
my ($cleanEvent, $clientId) = $EVENT =~ /^(.*)\s\[(.*)\]$/;;\
$cleanEvent //= $EVENT;;\
$clientId //= "unknown";;\
\
# --- KONFIGURATION: Zentrales Mapping ---\
my %smartHomeDevices = (\
"esszimmer:licht|lampe|deckenlampe" => { dev => "Lampe01_Ez", label => "Licht Esszimmer", cmdOn => "on", cmdOff => "off" },\
"esszimmer:aquarium" => { dev => "Aquarium_Aktor", label => "Aquarium", cmdOn => "on", cmdOff => "off" },\
"küche" => { dev => "Deckenlampe_Kue", label => "Licht Küche", cmdOn => "on", cmdOff => "off" },\
"wohnzimmer" => { dev => "Lampe06_Dek", label => "Licht Wohnzimmer", cmdOn => "on", cmdOff => "off" },\
"fernseher|tv" => { dev => "VuPlus", label => "Fernseher", cmdOn => "on", cmdOff => "off" },\
"rechner|pc" => { dev => "PC_Aktor", label => "PC", cmdOn => "on", cmdOff => "off" },\
"garage|tor" => { dev => "Garagentor_Aktor", label => "Garagentor öffnen/schließen", cmdOn => "open", cmdOff => "close" },\
"kaffee" => { dev => "Kaffeemaschine", label => "Kaffeemaschine", cmdOn => "on", cmdOff => "off" },\
"roberto" => { dev => "MQTT2_valetudo_FlusteredUnequaledFish", label => "Lade Roberto", cmdOn => "charge" },\
"ambiente" => { dev => "LampeSzeneAlle", label => "Zentrales Licht", type => "dimmer", cmdOn => "on", cmdOff => "off" },\
"sauge|reinige|putze|staubsauger|roboter" => { dev => "MQTT2_valetudo_FlusteredUnequaledFish", label => "Staubsauger", type => "vacuum" },\
"ambilight" => { label => "Ambilight", type => "system", cmd => "sshpass -p 'GEHEIMESPASSWORD' ssh -o StrictHostKeyChecking=no root\@192.168.1.46 '/usr/share/hyperhdr/scripts/hyperhdr_toggle.sh'" }\
);;\
\
my %vacRooms = ("arbeitszimmer" => "Arbeitszimmer", "badezimmer" => "Badezimmer", "esszimmer" => "Esszimmer", "flur" => "Flur", "küche" => "Küche", "wohnzimmer" => "Wohnzimmer");;\
\
my $onRegEx = '\b(an|ein|einschalten|starte|aktivier|aktiviere|öffne|öffnen|auf|hoch|lade)\b';;\
my $offRegEx = '\b(aus|ausschalten|stop|stoppe|beende|deaktivier|deaktiviere|schließe|schließen|zu|runter)\b';;\
\
my @commands = split(/\s*(?:und|dann|,)\s*/, lc($cleanEvent));;\
\
# --- DER BEFEHLS-LOOP ---\
foreach my $cmd_part (@commands) {\
$cmd_part =~ s/^\s+|\s+$//g;;\
my $is_on = ($cmd_part =~ /$onRegEx/) ? 1 : 0;;\
my $is_off = ($cmd_part =~ /$offRegEx/) ? 1 : 0;;\
$cmd_part =~ s/\b(ich|brauche|mach|bitte|kannst du|würdest du|mal|doch|den|das|die|im|in der)\b//g;;\
\
# --- GENERISCHE STEUERUNG ---\
my $match = 0;;\
# Sortierung stellt sicher, dass 'dimmer/vacuum' Vorrang haben\
foreach my $key (sort { ($smartHomeDevices{$b}{type}//"") cmp ($smartHomeDevices{$a}{type}//"") } keys %smartHomeDevices) {\
\
my ($main, $must) = split(/:/, $key);;\
\
# Prüfe Hauptwort\
if ($cmd_part =~ /\b($main)\b/i) {\
# Prüfe Pflichtwort falls vorhanden\
next if ($must && $cmd_part !~ /\b($must)\b/i);;\
\
my $d = $smartHomeDevices{$key};;\
\
# A) System\
if (($d->{type} // "") eq "system") {\
system($d->{cmd});;\
}\
\
# B) Staubsauger\
if (($d->{type} // "") eq "vacuum") {\
my @found = grep { $cmd_part =~ /\b$_\b/ } keys %vacRooms;;\
fhem(@found ? "set $d->{dev} clean_segment ".join(",", map { $vacRooms{$_} } @found) : "set $d->{dev} start");;\
}\
# C) Dimmer (Kompakt & korrigiert)\
elsif (($d->{type} // "") eq "dimmer") {\
$cmd_part =~ /(\d+)/ \
? fhem("set $d->{dev} brightness " . int(($1 > 100 ? 100 : $1) * 2.55)) \
: ($is_on || $is_off) && fhem("set $d->{dev} " . ($is_off ? "off" : "on"));;\
}\
# D) Standard An/Aus\
else {\
my $fhem_cmd = $is_off ? ($d->{cmdOff} // "off") : ($d->{cmdOn} // "on");;\
fhem("set $d->{dev} $fhem_cmd") if ($is_on || $is_off);;\
}\
\
$match = 1;; last;;\
}\
}\
next if $match;;\
\
# --- HILFE ---\
if ($cmd_part =~ /(hilfe|kommandos|übersicht)/) {\
my $h = '<div style="text-align:left;;min-width:250px;;font-family:sans-serif;;">Befehlsübersicht: ';;\
my %seen;;\
for my $k (sort keys %smartHomeDevices) {\
my $d = $smartHomeDevices{$k};;\
next if $seen{$d->{label}}++;; \
my $suffix = ($d->{cmdOn} && $d->{cmdOff} && $d->{label} !~ /(an\/aus|öffnen\/schließen)/i) ? " (an/aus)" : "";;\
$suffix = " [0-100%]" if ($d->{type} // "") eq "dimmer";;\
$h .= "• $d->{label}$suffix ";;\
}\
$h .= ' Staubsauger Räume • '.join(", ", map { ucfirst($_) } sort keys %vacRooms).' </div>';;\
$h =~ s/'/\\"/g;;\
my $js = "if((document.querySelector('input[name=\"fw_id\"]')||{}).value==='$clientId'){FW_okDialog('$h')}";;\
FW_directNotify("#FHEMWEB:$_", $js, "") for devspec2array("TYPE=FHEMWEB");;\
}\
}\
}
</syntaxhighlight>

== Unterschiede der Wege ==

{| class="wikitable"
! Feature
! Browser
! Hybrid (Atom Echo S3)
|-
| Wakeword
| Browser
| ESP (Hardware)
|-
| Push-to-Talk
| Ja
| Nein
|-
| Always-On
| Ja (bedingt)
| Ja
|-
| Architektur
| Software
| Software + Hardware
|-
| Stabilität
| Sehr stabil
| Sehr stabil (Wakeword extern)
|}

== FireOS mit Fully Browser (Plus) ==

Damit die Spracherkennung funktioniert:

* Apps installieren:
Google
Speech Recognition & Synthesis
* FireOS:
„Tastatur und Sprache“ → „Text-to-Speech“
* Fully Browser:
<code>Enable JavaScriptInterface (PLUS)</code> aktivieren

[[Kategorie:Code Snippets]]
[[Kategorie:FHEM Frontends]]
[[Kategorie:Sprachsteuerung]]

FHEMWEB/VoiceControl: Web-STT & Hardware-Wakeword

2026-04-03T17:00:31Z

Schwatter:

[[Datei:Voicecontrol.png|mini]]

== VoiceControl – Sprachsteuerung via Browser und Atom Echo s3r ==

Diese Lösung ermöglicht eine flexible Sprachsteuerung für [[FHEM]]. Sprache wird in Text (Speech-to-Text) umgewandelt und als Reading <code>STT</code> im Device <code>global</code> bereitgestellt. Dieses Reading kann anschließend zentral (z. B. über <code>notify</code> oder <code>DOIF</code>) ausgewertet werden.

'''Unterstützt werden nur Chromium-basierte Browser (Chrome, Edge, Fully Browser). Firefox hat leider kein Backend.'''

Es gibt zwei unterschiedliche Wege zur Spracherfassung:

* Weg 1️⃣ (Software): Browser-basierte Komplettlösung
* Weg 2️⃣ (Hybrid): Hardware-Wakeword + Browser-Spracherkennung

=== Hilfe ===
* Forenthread zum {{Link2Forum|Topic=144147|LinkText=VoiceControl Sprachsteuerung}}

=== Funktionen ===

==== Grundprinzip ====
* Sprache → Speech-to-Text
* Ergebnis → Reading <code>STT</code> im Device <code>global</code>
* Zentrale Logik verarbeitet Befehle

==== Betriebsarten ====
* Push-to-Talk (nur Browser)
* Always-On mit Wakeword
* Hardware-Wakeword (Hybrid)

==== Rückmeldungen ====
* Sprachausgabe (TTS)
* Visuelle Bubble im Browser
* Optional gezielte Rückmeldung per Client-ID

== Weg 1️⃣: Browser-Lösung (voicecontrol.js) ==

Das Script nutzt die Google Web Speech API. Unterstützt werden Chromium-basierte Browser (Chrome, Edge, Fully Browser). Firefox wird aktuell nicht unterstützt.

=== Bedienung ===

==== Push-to-Talk ====
* Button gedrückt halten
* Wakeword erforderlich (Standard: „James“)
* Nach Aktivierung ca.6sek Zeit für Befehl

==== Always-On ====
* Kurzer Klick aktiviert Dauerbetrieb
* Wakeword erforderlich (Standard: „James“)
* Nach Aktivierung ca.6sek Zeit für Befehl
* JS wird neu gestartet udn Schleife fängt von vorne an

==== Wakeword ====
* Standard: <code>james</code>
* Anpassbar im Script:
<syntaxhighlight lang="javascript">
const wakewords = ["james"];</syntaxhighlight>

=== Installation ===

==== Datei kopieren ====
<syntaxhighlight lang="Perl">
{ Svn_GetFile('contrib/voicecontrol.js', 'www/pgm2/voicecontrol.js') }
</syntaxhighlight>

==== Einbindung ====
<syntaxhighlight lang="perl">
attr WEBphone JavaScripts www/pgm2/voicecontrol.js
</syntaxhighlight>

==== Hinweis (HTTP ohne HTTPS) ====
Chrome benötigt Freigabe für Mikrofon:

* <code>chrome://flags/#unsafely-treat-insecure-origin-as-secure</code>
* Eigene URL hinzufügen
* Auf <code>Enabled</code> setzen

== Weg 2️⃣: Hybrid-Lösung mit Browser + Atom Echo (voicecontrol_echo.js) ==

Diese Variante kombiniert Hardware und Software:

* Wakeword-Erkennung erfolgt auf dem ESP (Atom Echo s3r)
* Die eigentliche Sprachverarbeitung (Speech-to-Text) erfolgt im Browser

=== Funktionsweise ===

# Wakeword wird auf dem ESP erkannt
# FHEM erzeugt Event (z. B. <code>james_detected</code>)
# Browser empfängt Event via WebSocket
# Speech-to-Text startet im Browser
# Ergebnis wird an FHEM übertragen

=== Aktivierung ===

* Kurzer Klick auf Button aktiviert/deaktiviert System
* Baut WebSocket-Verbindung zu FHEM auf
* Kein Push-to-Talk-Modus

=== Installation ===

==== Datei kopieren ====

Die Datei voicecontrol_echo.js ist hier zu finden:
{{Link2Forum|Topic=144147|LinkText=VoiceControl Sprachsteuerung}}
und muss nach www/pgm2/voicecontrol_echo.js kopiert werden.

Die echo_s3r.yaml ist für den Atom Echo s3r. Die Konfuguration ist weiter unten beschrieben.

==== Einbindung ====
<syntaxhighlight lang="perl">
attr WEBtablet JavaScripts www/pgm2/voicecontrol_echo.js
</syntaxhighlight>

=== Konfiguration im Javascript ===

<syntaxhighlight lang="javascript">
const DEVICE = "atom_echos3r_9888e00f4280";
const TRIGGER = "james_detected";
const FHEM_IP = "192.168.1.76:8085";
</syntaxhighlight>

* <code>DEVICE</code> → FHEM-Device des ESP
* <code>TRIGGER</code> → Event bei Wakeword
* <code>FHEM_IP</code> → FHEM-Server

=== Konfiguration in der Yaml ===

Damit sich der ESP mit eurem MQTT-Server und WLAN verbindet, müssen folgende Stellen angepasst werden.

wifi:
ssid: "YOUR_SSID"
password: "YOUR_PW"
fast_connect: true

mqtt:
broker: 192.168.1.76
port: 1884
username: "YOUR_USERNAME"
password: "YOUR_PW"
topic_prefix: atom_echo

=== Wakeword (ESP / ESPHome) ===

Das Wakeword wird direkt auf dem ESP definiert:

* Umsetzung über ESPHome
* Eine große Auswahl an Wakewords sind hier zu finden:
https://github.com/TaterTotterson/microWakeWords

Hier ein Beispiel, wie das Wakeword definiert wird.

micro_wake_word:
id: mww
microphone: echo_mic
models:
- model: "https://github.com/TaterTotterson/microWakeWords/raw/main/microWakeWordsV2/james.json"
id: james_model
probability_cutoff: 0.6

=== Kommunikation ===

* WebSocket-Verbindung zu FHEM
* Lauscht auf Device-Events
* Automatischer Reconnect bei Abbruch

=== Ablauf nach Wakeword ===

# System sagt „Ja?“
# Browser startet SpeechRecognition
# Nutzer spricht Befehl
# Befehl wird verarbeitet
# Rückmeldung „Erledigt“

== Zentrale Auswertung (Logik) ==

Beide Wege schreiben in:

<code>global:STT</code>

Die Verarbeitung erfolgt zentral über ein <code>notify</code>. Ein Device wird in der Mappingtabelle eingetragen.

Beispiel:
<code>"esszimmer:licht|lampe|deckenlampe" => { dev => "Lampe01_Ez", label => "Licht Esszimmer", cmdOn => "on", cmdOff => "off" }</code>

Aufschlüsselung:
<code>"hauptkeyword:Filter1|Filter3|Filter3" => { dev => "Devicename", label => "Übersichtname", cmdOn => "on", cmdOff => "off" }</code>

=== Beispiel: notify ===

<syntaxhighlight lang="perl">
defmod n_VoiceControl notify global:STT:.* {\
# --- VORBEREITUNG ---\
my ($cleanEvent, $clientId) = $EVENT =~ /^(.*)\s\[(.*)\]$/;;\
$cleanEvent //= $EVENT;;\
$clientId //= "unknown";;\
\
# --- KONFIGURATION: Zentrales Mapping ---\
my %smartHomeDevices = (\
"esszimmer:licht|lampe|deckenlampe" => { dev => "Lampe01_Ez", label => "Licht Esszimmer", cmdOn => "on", cmdOff => "off" },\
"esszimmer:aquarium" => { dev => "Aquarium_Aktor", label => "Aquarium", cmdOn => "on", cmdOff => "off" },\
"küche" => { dev => "Deckenlampe_Kue", label => "Licht Küche", cmdOn => "on", cmdOff => "off" },\
"wohnzimmer" => { dev => "Lampe06_Dek", label => "Licht Wohnzimmer", cmdOn => "on", cmdOff => "off" },\
"fernseher|tv" => { dev => "VuPlus", label => "Fernseher", cmdOn => "on", cmdOff => "off" },\
"rechner|pc" => { dev => "PC_Aktor", label => "PC", cmdOn => "on", cmdOff => "off" },\
"garage|tor" => { dev => "Garagentor_Aktor", label => "Garagentor öffnen/schließen", cmdOn => "open", cmdOff => "close" },\
"kaffee" => { dev => "Kaffeemaschine", label => "Kaffeemaschine", cmdOn => "on", cmdOff => "off" },\
"roberto" => { dev => "MQTT2_valetudo_FlusteredUnequaledFish", label => "Lade Roberto", cmdOn => "charge" },\
"ambiente" => { dev => "LampeSzeneAlle", label => "Zentrales Licht", type => "dimmer", cmdOn => "on", cmdOff => "off" },\
"sauge|reinige|putze|staubsauger|roboter" => { dev => "MQTT2_valetudo_FlusteredUnequaledFish", label => "Staubsauger", type => "vacuum" },\
"ambilight" => { label => "Ambilight", type => "system", cmd => "sshpass -p 'GEHEIMESPASSWORD' ssh -o StrictHostKeyChecking=no root\@192.168.1.46 '/usr/share/hyperhdr/scripts/hyperhdr_toggle.sh'" }\
);;\
\
my %vacRooms = ("arbeitszimmer" => "Arbeitszimmer", "badezimmer" => "Badezimmer", "esszimmer" => "Esszimmer", "flur" => "Flur", "küche" => "Küche", "wohnzimmer" => "Wohnzimmer");;\
\
my $onRegEx = '\b(an|ein|einschalten|starte|aktivier|aktiviere|öffne|öffnen|auf|hoch|lade)\b';;\
my $offRegEx = '\b(aus|ausschalten|stop|stoppe|beende|deaktivier|deaktiviere|schließe|schließen|zu|runter)\b';;\
\
my @commands = split(/\s*(?:und|dann|,)\s*/, lc($cleanEvent));;\
\
# --- DER BEFEHLS-LOOP ---\
foreach my $cmd_part (@commands) {\
$cmd_part =~ s/^\s+|\s+$//g;;\
my $is_on = ($cmd_part =~ /$onRegEx/) ? 1 : 0;;\
my $is_off = ($cmd_part =~ /$offRegEx/) ? 1 : 0;;\
$cmd_part =~ s/\b(ich|brauche|mach|bitte|kannst du|würdest du|mal|doch|den|das|die|im|in der)\b//g;;\
\
# --- GENERISCHE STEUERUNG ---\
my $match = 0;;\
# Sortierung stellt sicher, dass 'dimmer/vacuum' Vorrang haben\
foreach my $key (sort { ($smartHomeDevices{$b}{type}//"") cmp ($smartHomeDevices{$a}{type}//"") } keys %smartHomeDevices) {\
\
my ($main, $must) = split(/:/, $key);;\
\
# Prüfe Hauptwort\
if ($cmd_part =~ /\b($main)\b/i) {\
# Prüfe Pflichtwort falls vorhanden\
next if ($must && $cmd_part !~ /\b($must)\b/i);;\
\
my $d = $smartHomeDevices{$key};;\
\
# A) System\
if (($d->{type} // "") eq "system") {\
system($d->{cmd});;\
}\
\
# B) Staubsauger\
if (($d->{type} // "") eq "vacuum") {\
my @found = grep { $cmd_part =~ /\b$_\b/ } keys %vacRooms;;\
fhem(@found ? "set $d->{dev} clean_segment ".join(",", map { $vacRooms{$_} } @found) : "set $d->{dev} start");;\
}\
# C) Dimmer (Kompakt & korrigiert)\
elsif (($d->{type} // "") eq "dimmer") {\
$cmd_part =~ /(\d+)/ \
? fhem("set $d->{dev} brightness " . int(($1 > 100 ? 100 : $1) * 2.55)) \
: ($is_on || $is_off) && fhem("set $d->{dev} " . ($is_off ? "off" : "on"));;\
}\
# D) Standard An/Aus\
else {\
my $fhem_cmd = $is_off ? ($d->{cmdOff} // "off") : ($d->{cmdOn} // "on");;\
fhem("set $d->{dev} $fhem_cmd") if ($is_on || $is_off);;\
}\
\
$match = 1;; last;;\
}\
}\
next if $match;;\
\
# --- HILFE ---\
if ($cmd_part =~ /(hilfe|kommandos|übersicht)/) {\
my $h = '<div style="text-align:left;;min-width:250px;;font-family:sans-serif;;">Befehlsübersicht: ';;\
my %seen;;\
for my $k (sort keys %smartHomeDevices) {\
my $d = $smartHomeDevices{$k};;\
next if $seen{$d->{label}}++;; \
my $suffix = ($d->{cmdOn} && $d->{cmdOff} && $d->{label} !~ /(an\/aus|öffnen\/schließen)/i) ? " (an/aus)" : "";;\
$suffix = " [0-100%]" if ($d->{type} // "") eq "dimmer";;\
$h .= "• $d->{label}$suffix ";;\
}\
$h .= ' Staubsauger Räume • '.join(", ", map { ucfirst($_) } sort keys %vacRooms).' </div>';;\
$h =~ s/'/\\"/g;;\
my $js = "if((document.querySelector('input[name=\"fw_id\"]')||{}).value==='$clientId'){FW_okDialog('$h')}";;\
FW_directNotify("#FHEMWEB:$_", $js, "") for devspec2array("TYPE=FHEMWEB");;\
}\
}\
}
</syntaxhighlight>

== Unterschiede der Wege ==

{| class="wikitable"
! Feature
! Browser
! Hybrid (Atom Echo S3)
|-
| Wakeword
| Browser
| ESP (Hardware)
|-
| Push-to-Talk
| Ja
| Nein
|-
| Always-On
| Ja (bedingt)
| Ja
|-
| Architektur
| Software
| Software + Hardware
|-
| Stabilität
| Sehr stabil
| Sehr stabil (Wakeword extern)
|}

== FireOS mit Fully Browser (Plus) ==

Damit die Spracherkennung funktioniert:

* Apps installieren:
Google
Speech Recognition & Synthesis
* FireOS:
„Tastatur und Sprache“ → „Text-to-Speech“
* Fully Browser:
<code>Enable JavaScriptInterface (PLUS)</code> aktivieren

[[Kategorie:Code Snippets]]
[[Kategorie:FHEM Frontends]]

FHEMWEB/VoiceControl: Web-STT & Hardware-Wakeword

2026-04-03T16:59:09Z

Schwatter:

[[Datei:Voicecontrol.png|mini]]

== VoiceControl – Sprachsteuerung via Browser und Atom Echo s3r ==

Diese Lösung ermöglicht eine flexible Sprachsteuerung für [[FHEM]]. Sprache wird in Text (Speech-to-Text) umgewandelt und als Reading <code>STT</code> im Device <code>global</code> bereitgestellt. Dieses Reading kann anschließend zentral (z. B. über <code>notify</code> oder <code>DOIF</code>) ausgewertet werden.

'''Unterstützt werden nur Chromium-basierte Browser (Chrome, Edge, Fully Browser). Firefox hat leider kein Backend.'''

Es gibt zwei unterschiedliche Wege zur Spracherfassung:

* Weg 1️⃣ (Software): Browser-basierte Komplettlösung
* Weg 2️⃣ (Hybrid): Hardware-Wakeword + Browser-Spracherkennung

=== Hilfe ===
* Forenthread zum {{Link2Forum|Topic=144147|LinkText=VoiceControl Sprachsteuerung}}

=== Funktionen ===

==== Grundprinzip ====
* Sprache → Speech-to-Text
* Ergebnis → Reading <code>STT</code> im Device <code>global</code>
* Zentrale Logik verarbeitet Befehle

==== Betriebsarten ====
* Push-to-Talk (nur Browser)
* Always-On mit Wakeword
* Hardware-Wakeword (Hybrid)

==== Rückmeldungen ====
* Sprachausgabe (TTS)
* Visuelle Bubble im Browser
* Optional gezielte Rückmeldung per Client-ID

== Weg 1️⃣: Browser-Lösung (voicecontrol.js) ==

Das Script nutzt die Google Web Speech API. Unterstützt werden Chromium-basierte Browser (Chrome, Edge, Fully Browser). Firefox wird aktuell nicht unterstützt.

=== Bedienung ===

==== Push-to-Talk ====
* Button gedrückt halten
* Wakeword erforderlich (Standard: „James“)
* Nach Aktivierung ca.6sek Zeit für Befehl

==== Always-On ====
* Kurzer Klick aktiviert Dauerbetrieb
* Wakeword erforderlich (Standard: „James“)
* Nach Aktivierung ca.6sek Zeit für Befehl
* JS wird neu gestartet udn Schleife fängt von vorne an

==== Wakeword ====
* Standard: <code>james</code>
* Anpassbar im Script:
<syntaxhighlight lang="javascript">
const wakewords = ["james"];</syntaxhighlight>

=== Installation ===

==== Datei kopieren ====
<syntaxhighlight lang="Perl">
{ Svn_GetFile('contrib/voicecontrol.js', 'www/pgm2/voicecontrol.js') }
</syntaxhighlight>

==== Einbindung ====
<syntaxhighlight lang="perl">
attr WEBphone JavaScripts www/pgm2/voicecontrol.js
</syntaxhighlight>

==== Hinweis (HTTP ohne HTTPS) ====
Chrome benötigt Freigabe für Mikrofon:

* <code>chrome://flags/#unsafely-treat-insecure-origin-as-secure</code>
* Eigene URL hinzufügen
* Auf <code>Enabled</code> setzen

== Weg 2️⃣: Hybrid-Lösung mit Browser + Atom Echo (voicecontrol_echo.js) ==

Diese Variante kombiniert Hardware und Software:

* Wakeword-Erkennung erfolgt auf dem ESP (Atom Echo s3r)
* Die eigentliche Sprachverarbeitung (Speech-to-Text) erfolgt im Browser

=== Funktionsweise ===

# Wakeword wird auf dem ESP erkannt
# FHEM erzeugt Event (z. B. <code>james_detected</code>)
# Browser empfängt Event via WebSocket
# Speech-to-Text startet im Browser
# Ergebnis wird an FHEM übertragen

=== Aktivierung ===

* Kurzer Klick auf Button aktiviert/deaktiviert System
* Baut WebSocket-Verbindung zu FHEM auf
* Kein Push-to-Talk-Modus

=== Installation ===

==== Datei kopieren ====

Die Datei voicecontrol_echo.js ist hier zu finden:
{{Link2Forum|Topic=144147|LinkText=VoiceControl Sprachsteuerung}}
und muss nach www/pgm2/voicecontrol_echo.js kopiert werden.

Die echo_s3r.yaml ist für den Atom Echo s3r. Die Konfuguration ist weiter unten beschrieben.

==== Einbindung ====
<syntaxhighlight lang="perl">
attr WEBtablet JavaScripts www/pgm2/voicecontrol_echo.js
</syntaxhighlight>

=== Konfiguration im Javascript ===

<syntaxhighlight lang="javascript">
const DEVICE = "atom_echos3r_9888e00f4280";
const TRIGGER = "james_detected";
const FHEM_IP = "192.168.1.76:8085";
</syntaxhighlight>

* <code>DEVICE</code> → FHEM-Device des ESP
* <code>TRIGGER</code> → Event bei Wakeword
* <code>FHEM_IP</code> → FHEM-Server

=== Konfiguration in der Yaml ===

Damit sich der ESP mit eurem MQTT-Server und WLAN verbindet, müssen folgende Stellen angepasst werden.

wifi:
ssid: "YOUR_SSID"
password: "YOUR_PW"
fast_connect: true

mqtt:
broker: 192.168.1.76
port: 1884
username: "YOUR_USERNAME"
password: "YOUR_PW"
topic_prefix: atom_echo

=== Wakeword (ESP / ESPHome) ===

Das Wakeword wird direkt auf dem ESP definiert:

* Umsetzung über ESPHome
* Eine große Auswahl an Wakewords sind hier zu finden:
https://github.com/TaterTotterson/microWakeWords

Hier ein Beispiel, wie das Wakeword definiert wird.

micro_wake_word:
id: mww
microphone: echo_mic
models:
- model: "https://github.com/TaterTotterson/microWakeWords/raw/main/microWakeWordsV2/james.json"
id: james_model
probability_cutoff: 0.6

=== Kommunikation ===

* WebSocket-Verbindung zu FHEM
* Lauscht auf Device-Events
* Automatischer Reconnect bei Abbruch

=== Ablauf nach Wakeword ===

# System sagt „Ja?“
# Browser startet SpeechRecognition
# Nutzer spricht Befehl
# Befehl wird verarbeitet
# Rückmeldung „Erledigt“

== Zentrale Auswertung (Logik) ==

Beide Wege schreiben in:

<code>global:STT</code>

Die Verarbeitung erfolgt zentral über ein <code>notify</code>. Ein Device wird in der Mappingtabelle eingetragen.

Beispiel:
<code>"esszimmer:licht|lampe|deckenlampe" => { dev => "Lampe01_Ez", label => "Licht Esszimmer", cmdOn => "on", cmdOff => "off" }</code>

Aufschlüsselung:
<code>"hauptkeyword:Filter1|Filter3|Filter3" => { dev => "Devicename", label => "Übersichtname", cmdOn => "on", cmdOff => "off" }</code>

=== Beispiel: notify ===

<syntaxhighlight lang="perl">
defmod n_VoiceControl notify global:STT:.* {\
# --- VORBEREITUNG ---\
my ($cleanEvent, $clientId) = $EVENT =~ /^(.*)\s\[(.*)\]$/;;\
$cleanEvent //= $EVENT;;\
$clientId //= "unknown";;\
\
# --- KONFIGURATION: Zentrales Mapping ---\
my %smartHomeDevices = (\
"esszimmer:licht|lampe|deckenlampe" => { dev => "Lampe01_Ez", label => "Licht Esszimmer", cmdOn => "on", cmdOff => "off" },\
"esszimmer:aquarium" => { dev => "Aquarium_Aktor", label => "Aquarium", cmdOn => "on", cmdOff => "off" },\
"küche" => { dev => "Deckenlampe_Kue", label => "Licht Küche", cmdOn => "on", cmdOff => "off" },\
"wohnzimmer" => { dev => "Lampe06_Dek", label => "Licht Wohnzimmer", cmdOn => "on", cmdOff => "off" },\
"fernseher|tv" => { dev => "VuPlus", label => "Fernseher", cmdOn => "on", cmdOff => "off" },\
"rechner|pc" => { dev => "PC_Aktor", label => "PC", cmdOn => "on", cmdOff => "off" },\
"garage|tor" => { dev => "Garagentor_Aktor", label => "Garagentor öffnen/schließen", cmdOn => "open", cmdOff => "close" },\
"kaffee" => { dev => "Kaffeemaschine", label => "Kaffeemaschine", cmdOn => "on", cmdOff => "off" },\
"roberto" => { dev => "MQTT2_valetudo_FlusteredUnequaledFish", label => "Lade Roberto", cmdOn => "charge" },\
"ambiente" => { dev => "LampeSzeneAlle", label => "Zentrales Licht", type => "dimmer", cmdOn => "on", cmdOff => "off" },\
"sauge|reinige|putze|staubsauger|roboter" => { dev => "MQTT2_valetudo_FlusteredUnequaledFish", label => "Staubsauger", type => "vacuum" },\
"ambilight" => { label => "Ambilight", type => "system", cmd => "sshpass -p 'GEHEIMESPASSWORD' ssh -o StrictHostKeyChecking=no root\@192.168.1.46 '/usr/share/hyperhdr/scripts/hyperhdr_toggle.sh'" }\
);;\
\
my %vacRooms = ("arbeitszimmer" => "Arbeitszimmer", "badezimmer" => "Badezimmer", "esszimmer" => "Esszimmer", "flur" => "Flur", "küche" => "Küche", "wohnzimmer" => "Wohnzimmer");;\
\
my $onRegEx = '\b(an|ein|einschalten|starte|aktivier|aktiviere|öffne|öffnen|auf|hoch|lade)\b';;\
my $offRegEx = '\b(aus|ausschalten|stop|stoppe|beende|deaktivier|deaktiviere|schließe|schließen|zu|runter)\b';;\
\
my @commands = split(/\s*(?:und|dann|,)\s*/, lc($cleanEvent));;\
\
# --- DER BEFEHLS-LOOP ---\
foreach my $cmd_part (@commands) {\
$cmd_part =~ s/^\s+|\s+$//g;;\
my $is_on = ($cmd_part =~ /$onRegEx/) ? 1 : 0;;\
my $is_off = ($cmd_part =~ /$offRegEx/) ? 1 : 0;;\
$cmd_part =~ s/\b(ich|brauche|mach|bitte|kannst du|würdest du|mal|doch|den|das|die|im|in der)\b//g;;\
\
# --- GENERISCHE STEUERUNG ---\
my $match = 0;;\
# Sortierung stellt sicher, dass 'dimmer/vacuum' Vorrang haben\
foreach my $key (sort { ($smartHomeDevices{$b}{type}//"") cmp ($smartHomeDevices{$a}{type}//"") } keys %smartHomeDevices) {\
\
my ($main, $must) = split(/:/, $key);;\
\
# Prüfe Hauptwort\
if ($cmd_part =~ /\b($main)\b/i) {\
# Prüfe Pflichtwort falls vorhanden\
next if ($must && $cmd_part !~ /\b($must)\b/i);;\
\
my $d = $smartHomeDevices{$key};;\
\
# A) System\
if (($d->{type} // "") eq "system") {\
system($d->{cmd});;\
}\
\
# B) Staubsauger\
if (($d->{type} // "") eq "vacuum") {\
my @found = grep { $cmd_part =~ /\b$_\b/ } keys %vacRooms;;\
fhem(@found ? "set $d->{dev} clean_segment ".join(",", map { $vacRooms{$_} } @found) : "set $d->{dev} start");;\
}\
# C) Dimmer (Kompakt & korrigiert)\
elsif (($d->{type} // "") eq "dimmer") {\
$cmd_part =~ /(\d+)/ \
? fhem("set $d->{dev} brightness " . int(($1 > 100 ? 100 : $1) * 2.55)) \
: ($is_on || $is_off) && fhem("set $d->{dev} " . ($is_off ? "off" : "on"));;\
}\
# D) Standard An/Aus\
else {\
my $fhem_cmd = $is_off ? ($d->{cmdOff} // "off") : ($d->{cmdOn} // "on");;\
fhem("set $d->{dev} $fhem_cmd") if ($is_on || $is_off);;\
}\
\
$match = 1;; last;;\
}\
}\
next if $match;;\
\
# --- HILFE ---\
if ($cmd_part =~ /(hilfe|kommandos|übersicht)/) {\
my $h = '<div style="text-align:left;;min-width:250px;;font-family:sans-serif;;">Befehlsübersicht: ';;\
my %seen;;\
for my $k (sort keys %smartHomeDevices) {\
my $d = $smartHomeDevices{$k};;\
next if $seen{$d->{label}}++;; \
my $suffix = ($d->{cmdOn} && $d->{cmdOff} && $d->{label} !~ /(an\/aus|öffnen\/schließen)/i) ? " (an/aus)" : "";;\
$suffix = " [0-100%]" if ($d->{type} // "") eq "dimmer";;\
$h .= "• $d->{label}$suffix ";;\
}\
$h .= ' Staubsauger Räume • '.join(", ", map { ucfirst($_) } sort keys %vacRooms).' </div>';;\
$h =~ s/'/\\"/g;;\
my $js = "if((document.querySelector('input[name=\"fw_id\"]')||{}).value==='$clientId'){FW_okDialog('$h')}";;\
FW_directNotify("#FHEMWEB:$_", $js, "") for devspec2array("TYPE=FHEMWEB");;\
}\
}\
}
</syntaxhighlight>

== Unterschiede der Wege ==

{| class="wikitable"
! Feature
! Browser
! Hybrid (Atom Echo S3)
|-
| Wakeword
| Browser
| ESP (Hardware)
|-
| Push-to-Talk
| Ja
| Nein
|-
| Always-On
| Ja (bedingt)
| Ja
|-
| Architektur
| Software
| Software + Hardware
|-
| Stabilität
| Sehr stabil
| Sehr stabil (Wakeword extern)
|}

== FireOS mit Fully Browser (Plus) ==

Damit die Spracherkennung funktioniert:

* Apps installieren:
Google
Speech Recognition & Synthesis
* FireOS:
„Tastatur und Sprache“ → „Text-to-Speech“
* Fully Browser:
<code>Enable JavaScriptInterface (PLUS)</code> aktivieren

[[Kategorie:Code Snippets]]
[[Kategorie:FHEM Frontends]]

FHEMWEB/VoiceControl: Web-STT & Hardware-Wakeword

2026-04-03T16:58:24Z

Schwatter:

[[Datei:Voicecontrol.png|mini]]

== VoiceControl – Sprachsteuerung via Browser und Atom Echo s3r ==

Diese Lösung ermöglicht eine flexible Sprachsteuerung für [[FHEM]]. Sprache wird in Text (Speech-to-Text) umgewandelt und als Reading <code>STT</code> im Device <code>global</code> bereitgestellt. Dieses Reading kann anschließend zentral (z. B. über <code>notify</code> oder <code>DOIF</code>) ausgewertet werden.

'''Unterstützt werden nur Chromium-basierte Browser (Chrome, Edge, Fully Browser). Firefox hat leider kein Backend.'''

Es gibt zwei unterschiedliche Wege zur Spracherfassung:

* Weg 1️⃣ (Software): Browser-basierte Komplettlösung
* Weg 2️⃣ (Hybrid): Hardware-Wakeword + Browser-Spracherkennung

=== Hilfe ===
* Forenthread zum {{Link2Forum|Topic=144147|LinkText=VoiceControl Sprachsteuerung}}
Dort befinden sich in Post #1 auch alle benötigten Dateien.

=== Funktionen ===

==== Grundprinzip ====
* Sprache → Speech-to-Text
* Ergebnis → Reading <code>STT</code> im Device <code>global</code>
* Zentrale Logik verarbeitet Befehle

==== Betriebsarten ====
* Push-to-Talk (nur Browser)
* Always-On mit Wakeword
* Hardware-Wakeword (Hybrid)

==== Rückmeldungen ====
* Sprachausgabe (TTS)
* Visuelle Bubble im Browser
* Optional gezielte Rückmeldung per Client-ID

== Weg 1️⃣: Browser-Lösung (voicecontrol.js) ==

Das Script nutzt die Google Web Speech API. Unterstützt werden Chromium-basierte Browser (Chrome, Edge, Fully Browser). Firefox wird aktuell nicht unterstützt.

=== Bedienung ===

==== Push-to-Talk ====
* Button gedrückt halten
* Wakeword erforderlich (Standard: „James“)
* Nach Aktivierung ca.6sek Zeit für Befehl

==== Always-On ====
* Kurzer Klick aktiviert Dauerbetrieb
* Wakeword erforderlich (Standard: „James“)
* Nach Aktivierung ca.6sek Zeit für Befehl
* JS wird neu gestartet udn Schleife fängt von vorne an

==== Wakeword ====
* Standard: <code>james</code>
* Anpassbar im Script:
<syntaxhighlight lang="javascript">
const wakewords = ["james"];</syntaxhighlight>

=== Installation ===

==== Datei kopieren ====
<syntaxhighlight lang="Perl">
{ Svn_GetFile('contrib/voicecontrol.js', 'www/pgm2/voicecontrol.js') }
</syntaxhighlight>

==== Einbindung ====
<syntaxhighlight lang="perl">
attr WEBphone JavaScripts www/pgm2/voicecontrol.js
</syntaxhighlight>

==== Hinweis (HTTP ohne HTTPS) ====
Chrome benötigt Freigabe für Mikrofon:

* <code>chrome://flags/#unsafely-treat-insecure-origin-as-secure</code>
* Eigene URL hinzufügen
* Auf <code>Enabled</code> setzen

== Weg 2️⃣: Hybrid-Lösung mit Browser + Atom Echo (voicecontrol_echo.js) ==

Diese Variante kombiniert Hardware und Software:

* Wakeword-Erkennung erfolgt auf dem ESP (Atom Echo s3r)
* Die eigentliche Sprachverarbeitung (Speech-to-Text) erfolgt im Browser

=== Funktionsweise ===

# Wakeword wird auf dem ESP erkannt
# FHEM erzeugt Event (z. B. <code>james_detected</code>)
# Browser empfängt Event via WebSocket
# Speech-to-Text startet im Browser
# Ergebnis wird an FHEM übertragen

=== Aktivierung ===

* Kurzer Klick auf Button aktiviert/deaktiviert System
* Baut WebSocket-Verbindung zu FHEM auf
* Kein Push-to-Talk-Modus

=== Installation ===

==== Datei kopieren ====

Die Datei voicecontrol_echo.js ist hier zu finden:
{{Link2Forum|Topic=144147|LinkText=VoiceControl Sprachsteuerung}}
und muss nach www/pgm2/voicecontrol_echo.js kopiert werden.

Die echo_s3r.yaml ist für den Atom Echo s3r. Die Konfuguration ist weiter unten beschrieben.

==== Einbindung ====
<syntaxhighlight lang="perl">
attr WEBtablet JavaScripts www/pgm2/voicecontrol_echo.js
</syntaxhighlight>

=== Konfiguration im Javascript ===

<syntaxhighlight lang="javascript">
const DEVICE = "atom_echos3r_9888e00f4280";
const TRIGGER = "james_detected";
const FHEM_IP = "192.168.1.76:8085";
</syntaxhighlight>

* <code>DEVICE</code> → FHEM-Device des ESP
* <code>TRIGGER</code> → Event bei Wakeword
* <code>FHEM_IP</code> → FHEM-Server

=== Konfiguration in der Yaml ===

Damit sich der ESP mit eurem MQTT-Server und WLAN verbindet, müssen folgende Stellen angepasst werden.

wifi:
ssid: "YOUR_SSID"
password: "YOUR_PW"
fast_connect: true

mqtt:
broker: 192.168.1.76
port: 1884
username: "YOUR_USERNAME"
password: "YOUR_PW"
topic_prefix: atom_echo

=== Wakeword (ESP / ESPHome) ===

Das Wakeword wird direkt auf dem ESP definiert:

* Umsetzung über ESPHome
* Eine große Auswahl an Wakewords sind hier zu finden:
https://github.com/TaterTotterson/microWakeWords

Hier ein Beispiel, wie das Wakeword definiert wird.

micro_wake_word:
id: mww
microphone: echo_mic
models:
- model: "https://github.com/TaterTotterson/microWakeWords/raw/main/microWakeWordsV2/james.json"
id: james_model
probability_cutoff: 0.6

=== Kommunikation ===

* WebSocket-Verbindung zu FHEM
* Lauscht auf Device-Events
* Automatischer Reconnect bei Abbruch

=== Ablauf nach Wakeword ===

# System sagt „Ja?“
# Browser startet SpeechRecognition
# Nutzer spricht Befehl
# Befehl wird verarbeitet
# Rückmeldung „Erledigt“

== Zentrale Auswertung (Logik) ==

Beide Wege schreiben in:

<code>global:STT</code>

Die Verarbeitung erfolgt zentral über ein <code>notify</code>. Ein Device wird in der Mappingtabelle eingetragen.

Beispiel:
<code>"esszimmer:licht|lampe|deckenlampe" => { dev => "Lampe01_Ez", label => "Licht Esszimmer", cmdOn => "on", cmdOff => "off" }</code>

Aufschlüsselung:
<code>"hauptkeyword:Filter1|Filter3|Filter3" => { dev => "Devicename", label => "Übersichtname", cmdOn => "on", cmdOff => "off" }</code>

=== Beispiel: notify ===

<syntaxhighlight lang="perl">
defmod n_VoiceControl notify global:STT:.* {\
# --- VORBEREITUNG ---\
my ($cleanEvent, $clientId) = $EVENT =~ /^(.*)\s\[(.*)\]$/;;\
$cleanEvent //= $EVENT;;\
$clientId //= "unknown";;\
\
# --- KONFIGURATION: Zentrales Mapping ---\
my %smartHomeDevices = (\
"esszimmer:licht|lampe|deckenlampe" => { dev => "Lampe01_Ez", label => "Licht Esszimmer", cmdOn => "on", cmdOff => "off" },\
"esszimmer:aquarium" => { dev => "Aquarium_Aktor", label => "Aquarium", cmdOn => "on", cmdOff => "off" },\
"küche" => { dev => "Deckenlampe_Kue", label => "Licht Küche", cmdOn => "on", cmdOff => "off" },\
"wohnzimmer" => { dev => "Lampe06_Dek", label => "Licht Wohnzimmer", cmdOn => "on", cmdOff => "off" },\
"fernseher|tv" => { dev => "VuPlus", label => "Fernseher", cmdOn => "on", cmdOff => "off" },\
"rechner|pc" => { dev => "PC_Aktor", label => "PC", cmdOn => "on", cmdOff => "off" },\
"garage|tor" => { dev => "Garagentor_Aktor", label => "Garagentor öffnen/schließen", cmdOn => "open", cmdOff => "close" },\
"kaffee" => { dev => "Kaffeemaschine", label => "Kaffeemaschine", cmdOn => "on", cmdOff => "off" },\
"roberto" => { dev => "MQTT2_valetudo_FlusteredUnequaledFish", label => "Lade Roberto", cmdOn => "charge" },\
"ambiente" => { dev => "LampeSzeneAlle", label => "Zentrales Licht", type => "dimmer", cmdOn => "on", cmdOff => "off" },\
"sauge|reinige|putze|staubsauger|roboter" => { dev => "MQTT2_valetudo_FlusteredUnequaledFish", label => "Staubsauger", type => "vacuum" },\
"ambilight" => { label => "Ambilight", type => "system", cmd => "sshpass -p 'GEHEIMESPASSWORD' ssh -o StrictHostKeyChecking=no root\@192.168.1.46 '/usr/share/hyperhdr/scripts/hyperhdr_toggle.sh'" }\
);;\
\
my %vacRooms = ("arbeitszimmer" => "Arbeitszimmer", "badezimmer" => "Badezimmer", "esszimmer" => "Esszimmer", "flur" => "Flur", "küche" => "Küche", "wohnzimmer" => "Wohnzimmer");;\
\
my $onRegEx = '\b(an|ein|einschalten|starte|aktivier|aktiviere|öffne|öffnen|auf|hoch|lade)\b';;\
my $offRegEx = '\b(aus|ausschalten|stop|stoppe|beende|deaktivier|deaktiviere|schließe|schließen|zu|runter)\b';;\
\
my @commands = split(/\s*(?:und|dann|,)\s*/, lc($cleanEvent));;\
\
# --- DER BEFEHLS-LOOP ---\
foreach my $cmd_part (@commands) {\
$cmd_part =~ s/^\s+|\s+$//g;;\
my $is_on = ($cmd_part =~ /$onRegEx/) ? 1 : 0;;\
my $is_off = ($cmd_part =~ /$offRegEx/) ? 1 : 0;;\
$cmd_part =~ s/\b(ich|brauche|mach|bitte|kannst du|würdest du|mal|doch|den|das|die|im|in der)\b//g;;\
\
# --- GENERISCHE STEUERUNG ---\
my $match = 0;;\
# Sortierung stellt sicher, dass 'dimmer/vacuum' Vorrang haben\
foreach my $key (sort { ($smartHomeDevices{$b}{type}//"") cmp ($smartHomeDevices{$a}{type}//"") } keys %smartHomeDevices) {\
\
my ($main, $must) = split(/:/, $key);;\
\
# Prüfe Hauptwort\
if ($cmd_part =~ /\b($main)\b/i) {\
# Prüfe Pflichtwort falls vorhanden\
next if ($must && $cmd_part !~ /\b($must)\b/i);;\
\
my $d = $smartHomeDevices{$key};;\
\
# A) System\
if (($d->{type} // "") eq "system") {\
system($d->{cmd});;\
}\
\
# B) Staubsauger\
if (($d->{type} // "") eq "vacuum") {\
my @found = grep { $cmd_part =~ /\b$_\b/ } keys %vacRooms;;\
fhem(@found ? "set $d->{dev} clean_segment ".join(",", map { $vacRooms{$_} } @found) : "set $d->{dev} start");;\
}\
# C) Dimmer (Kompakt & korrigiert)\
elsif (($d->{type} // "") eq "dimmer") {\
$cmd_part =~ /(\d+)/ \
? fhem("set $d->{dev} brightness " . int(($1 > 100 ? 100 : $1) * 2.55)) \
: ($is_on || $is_off) && fhem("set $d->{dev} " . ($is_off ? "off" : "on"));;\
}\
# D) Standard An/Aus\
else {\
my $fhem_cmd = $is_off ? ($d->{cmdOff} // "off") : ($d->{cmdOn} // "on");;\
fhem("set $d->{dev} $fhem_cmd") if ($is_on || $is_off);;\
}\
\
$match = 1;; last;;\
}\
}\
next if $match;;\
\
# --- HILFE ---\
if ($cmd_part =~ /(hilfe|kommandos|übersicht)/) {\
my $h = '<div style="text-align:left;;min-width:250px;;font-family:sans-serif;;">Befehlsübersicht: ';;\
my %seen;;\
for my $k (sort keys %smartHomeDevices) {\
my $d = $smartHomeDevices{$k};;\
next if $seen{$d->{label}}++;; \
my $suffix = ($d->{cmdOn} && $d->{cmdOff} && $d->{label} !~ /(an\/aus|öffnen\/schließen)/i) ? " (an/aus)" : "";;\
$suffix = " [0-100%]" if ($d->{type} // "") eq "dimmer";;\
$h .= "• $d->{label}$suffix ";;\
}\
$h .= ' Staubsauger Räume • '.join(", ", map { ucfirst($_) } sort keys %vacRooms).' </div>';;\
$h =~ s/'/\\"/g;;\
my $js = "if((document.querySelector('input[name=\"fw_id\"]')||{}).value==='$clientId'){FW_okDialog('$h')}";;\
FW_directNotify("#FHEMWEB:$_", $js, "") for devspec2array("TYPE=FHEMWEB");;\
}\
}\
}
</syntaxhighlight>

== Unterschiede der Wege ==

{| class="wikitable"
! Feature
! Browser
! Hybrid (Atom Echo S3)
|-
| Wakeword
| Browser
| ESP (Hardware)
|-
| Push-to-Talk
| Ja
| Nein
|-
| Always-On
| Ja (bedingt)
| Ja
|-
| Architektur
| Software
| Software + Hardware
|-
| Stabilität
| Sehr stabil
| Sehr stabil (Wakeword extern)
|}

== FireOS mit Fully Browser (Plus) ==

Damit die Spracherkennung funktioniert:

* Apps installieren:
Google
Speech Recognition & Synthesis
* FireOS:
„Tastatur und Sprache“ → „Text-to-Speech“
* Fully Browser:
<code>Enable JavaScriptInterface (PLUS)</code> aktivieren

[[Kategorie:Code Snippets]]
[[Kategorie:FHEM Frontends]]

FHEMWEB/VoiceControl: Web-STT & Hardware-Wakeword

2026-04-03T16:55:59Z

Schwatter:

[[Datei:Voicecontrol.png|mini]]

== VoiceControl – Sprachsteuerung via Browser und Atom Echo s3r ==

Diese Lösung ermöglicht eine flexible Sprachsteuerung für [[FHEM]]. Sprache wird in Text (Speech-to-Text) umgewandelt und als Reading <code>STT</code> im Device <code>global</code> bereitgestellt. Dieses Reading kann anschließend zentral (z. B. über <code>notify</code> oder <code>DOIF</code>) ausgewertet werden.

'''Unterstützt werden nur Chromium-basierte Browser (Chrome, Edge, Fully Browser). Firefox hat leider kein Backend.'''

Es gibt zwei unterschiedliche Wege zur Spracherfassung:

* Weg 1️⃣ (Software): Browser-basierte Komplettlösung
* Weg 2️⃣ (Hybrid): Hardware-Wakeword + Browser-Spracherkennung

=== Hilfe ===
* Forenthread zum {{Link2Forum|Topic=144147|LinkText=VoiceControl Sprachsteuerung}}
Dort befinden sich in Post #1 auch alle benötigten Dateien.

=== Funktionen ===

==== Grundprinzip ====
* Sprache → Speech-to-Text
* Ergebnis → Reading <code>STT</code> im Device <code>global</code>
* Zentrale Logik verarbeitet Befehle

==== Betriebsarten ====
* Push-to-Talk (nur Browser)
* Always-On mit Wakeword
* Hardware-Wakeword (Hybrid)

==== Rückmeldungen ====
* Sprachausgabe (TTS)
* Visuelle Bubble im Browser
* Optional gezielte Rückmeldung per Client-ID

== Weg 1️⃣: Browser-Lösung (voicecontrol.js) ==

Das Script nutzt die Google Web Speech API. Unterstützt werden Chromium-basierte Browser (Chrome, Edge, Fully Browser). Firefox wird aktuell nicht unterstützt.

=== Bedienung ===

==== Push-to-Talk ====
* Button gedrückt halten
* Wakeword erforderlich (Standard: „James“)
* Nach Aktivierung ca.6sek Zeit für Befehl

==== Always-On ====
* Kurzer Klick aktiviert Dauerbetrieb
* Wakeword erforderlich (Standard: „James“)
* Nach Aktivierung ca.6sek Zeit für Befehl
* JS wird neu gestartet udn Schleife fängt von vorne an

==== Wakeword ====
* Standard: <code>james</code>
* Anpassbar im Script:
<syntaxhighlight lang="javascript">
const wakewords = ["james"];</syntaxhighlight>

Ablauf:
# „James“ sagen
# System antwortet „Ja?“
# Zeitfenster (~6 Sekunden) für Befehl
# Danach automatische Verarbeitung oder Abbruch

=== Installation ===

==== Datei kopieren ====
<syntaxhighlight lang="Perl">
{ Svn_GetFile('contrib/voicecontrol.js', 'www/pgm2/voicecontrol.js') }
</syntaxhighlight>

==== Einbindung ====
<syntaxhighlight lang="perl">
attr WEBphone JavaScripts www/pgm2/voicecontrol.js
</syntaxhighlight>

==== Hinweis (HTTP ohne HTTPS) ====
Chrome benötigt Freigabe für Mikrofon:

* <code>chrome://flags/#unsafely-treat-insecure-origin-as-secure</code>
* Eigene URL hinzufügen
* Auf <code>Enabled</code> setzen

== Weg 2️⃣: Hybrid-Lösung mit Browser + Atom Echo (voicecontrol_echo.js) ==

Diese Variante kombiniert Hardware und Software:

* Wakeword-Erkennung erfolgt auf dem ESP (Atom Echo s3r)
* Die eigentliche Sprachverarbeitung (Speech-to-Text) erfolgt im Browser

=== Funktionsweise ===

# Wakeword wird auf dem ESP erkannt
# FHEM erzeugt Event (z. B. <code>james_detected</code>)
# Browser empfängt Event via WebSocket
# Speech-to-Text startet im Browser
# Ergebnis wird an FHEM übertragen

=== Aktivierung ===

* Kurzer Klick auf Button aktiviert/deaktiviert System
* Baut WebSocket-Verbindung zu FHEM auf
* Kein Push-to-Talk-Modus

=== Installation ===

==== Datei kopieren ====

Die Datei voicecontrol_echo.js ist hier zu finden:
{{Link2Forum|Topic=144147|LinkText=VoiceControl Sprachsteuerung}}
und muss nach www/pgm2/voicecontrol_echo.js kopiert werden.

Die echo_s3r.yaml ist für den Atom Echo s3r. Die Konfuguration ist weiter unten beschrieben.

==== Einbindung ====
<syntaxhighlight lang="perl">
attr WEBtablet JavaScripts www/pgm2/voicecontrol_echo.js
</syntaxhighlight>

=== Konfiguration im Javascript ===

<syntaxhighlight lang="javascript">
const DEVICE = "atom_echos3r_9888e00f4280";
const TRIGGER = "james_detected";
const FHEM_IP = "192.168.1.76:8085";
</syntaxhighlight>

* <code>DEVICE</code> → FHEM-Device des ESP
* <code>TRIGGER</code> → Event bei Wakeword
* <code>FHEM_IP</code> → FHEM-Server

=== Konfiguration in der Yaml ===

Damit sich der ESP mit eurem MQTT-Server und WLAN verbindet, müssen folgende Stellen angepasst werden.

wifi:
ssid: "YOUR_SSID"
password: "YOUR_PW"
fast_connect: true

mqtt:
broker: 192.168.1.76
port: 1884
username: "YOUR_USERNAME"
password: "YOUR_PW"
topic_prefix: atom_echo

=== Wakeword (ESP / ESPHome) ===

Das Wakeword wird direkt auf dem ESP definiert:

* Umsetzung über ESPHome
* Eine große Auswahl an Wakewords sind hier zu finden:
https://github.com/TaterTotterson/microWakeWords

Hier ein Beispiel, wie das Wakeword definiert wird.

micro_wake_word:
id: mww
microphone: echo_mic
models:
- model: "https://github.com/TaterTotterson/microWakeWords/raw/main/microWakeWordsV2/james.json"
id: james_model
probability_cutoff: 0.6

=== Kommunikation ===

* WebSocket-Verbindung zu FHEM
* Lauscht auf Device-Events
* Automatischer Reconnect bei Abbruch

=== Ablauf nach Wakeword ===

# System sagt „Ja?“
# Browser startet SpeechRecognition
# Nutzer spricht Befehl
# Befehl wird verarbeitet
# Rückmeldung „Erledigt“

== Zentrale Auswertung (Logik) ==

Beide Wege schreiben in:

<code>global:STT</code>

Die Verarbeitung erfolgt zentral über ein <code>notify</code>. Ein Device wird in der Mappingtabelle eingetragen.

Beispiel:
<code>"esszimmer:licht|lampe|deckenlampe" => { dev => "Lampe01_Ez", label => "Licht Esszimmer", cmdOn => "on", cmdOff => "off" }</code>

Aufschlüsselung:
<code>"hauptkeyword:Filter1|Filter3|Filter3" => { dev => "Devicename", label => "Übersichtname", cmdOn => "on", cmdOff => "off" }</code>

=== Beispiel: notify ===

<syntaxhighlight lang="perl">
defmod n_VoiceControl notify global:STT:.* {\
# --- VORBEREITUNG ---\
my ($cleanEvent, $clientId) = $EVENT =~ /^(.*)\s\[(.*)\]$/;;\
$cleanEvent //= $EVENT;;\
$clientId //= "unknown";;\
\
# --- KONFIGURATION: Zentrales Mapping ---\
my %smartHomeDevices = (\
"esszimmer:licht|lampe|deckenlampe" => { dev => "Lampe01_Ez", label => "Licht Esszimmer", cmdOn => "on", cmdOff => "off" },\
"esszimmer:aquarium" => { dev => "Aquarium_Aktor", label => "Aquarium", cmdOn => "on", cmdOff => "off" },\
"küche" => { dev => "Deckenlampe_Kue", label => "Licht Küche", cmdOn => "on", cmdOff => "off" },\
"wohnzimmer" => { dev => "Lampe06_Dek", label => "Licht Wohnzimmer", cmdOn => "on", cmdOff => "off" },\
"fernseher|tv" => { dev => "VuPlus", label => "Fernseher", cmdOn => "on", cmdOff => "off" },\
"rechner|pc" => { dev => "PC_Aktor", label => "PC", cmdOn => "on", cmdOff => "off" },\
"garage|tor" => { dev => "Garagentor_Aktor", label => "Garagentor öffnen/schließen", cmdOn => "open", cmdOff => "close" },\
"kaffee" => { dev => "Kaffeemaschine", label => "Kaffeemaschine", cmdOn => "on", cmdOff => "off" },\
"roberto" => { dev => "MQTT2_valetudo_FlusteredUnequaledFish", label => "Lade Roberto", cmdOn => "charge" },\
"ambiente" => { dev => "LampeSzeneAlle", label => "Zentrales Licht", type => "dimmer", cmdOn => "on", cmdOff => "off" },\
"sauge|reinige|putze|staubsauger|roboter" => { dev => "MQTT2_valetudo_FlusteredUnequaledFish", label => "Staubsauger", type => "vacuum" },\
"ambilight" => { label => "Ambilight", type => "system", cmd => "sshpass -p 'GEHEIMESPASSWORD' ssh -o StrictHostKeyChecking=no root\@192.168.1.46 '/usr/share/hyperhdr/scripts/hyperhdr_toggle.sh'" }\
);;\
\
my %vacRooms = ("arbeitszimmer" => "Arbeitszimmer", "badezimmer" => "Badezimmer", "esszimmer" => "Esszimmer", "flur" => "Flur", "küche" => "Küche", "wohnzimmer" => "Wohnzimmer");;\
\
my $onRegEx = '\b(an|ein|einschalten|starte|aktivier|aktiviere|öffne|öffnen|auf|hoch|lade)\b';;\
my $offRegEx = '\b(aus|ausschalten|stop|stoppe|beende|deaktivier|deaktiviere|schließe|schließen|zu|runter)\b';;\
\
my @commands = split(/\s*(?:und|dann|,)\s*/, lc($cleanEvent));;\
\
# --- DER BEFEHLS-LOOP ---\
foreach my $cmd_part (@commands) {\
$cmd_part =~ s/^\s+|\s+$//g;;\
my $is_on = ($cmd_part =~ /$onRegEx/) ? 1 : 0;;\
my $is_off = ($cmd_part =~ /$offRegEx/) ? 1 : 0;;\
$cmd_part =~ s/\b(ich|brauche|mach|bitte|kannst du|würdest du|mal|doch|den|das|die|im|in der)\b//g;;\
\
# --- GENERISCHE STEUERUNG ---\
my $match = 0;;\
# Sortierung stellt sicher, dass 'dimmer/vacuum' Vorrang haben\
foreach my $key (sort { ($smartHomeDevices{$b}{type}//"") cmp ($smartHomeDevices{$a}{type}//"") } keys %smartHomeDevices) {\
\
my ($main, $must) = split(/:/, $key);;\
\
# Prüfe Hauptwort\
if ($cmd_part =~ /\b($main)\b/i) {\
# Prüfe Pflichtwort falls vorhanden\
next if ($must && $cmd_part !~ /\b($must)\b/i);;\
\
my $d = $smartHomeDevices{$key};;\
\
# A) System\
if (($d->{type} // "") eq "system") {\
system($d->{cmd});;\
}\
\
# B) Staubsauger\
if (($d->{type} // "") eq "vacuum") {\
my @found = grep { $cmd_part =~ /\b$_\b/ } keys %vacRooms;;\
fhem(@found ? "set $d->{dev} clean_segment ".join(",", map { $vacRooms{$_} } @found) : "set $d->{dev} start");;\
}\
# C) Dimmer (Kompakt & korrigiert)\
elsif (($d->{type} // "") eq "dimmer") {\
$cmd_part =~ /(\d+)/ \
? fhem("set $d->{dev} brightness " . int(($1 > 100 ? 100 : $1) * 2.55)) \
: ($is_on || $is_off) && fhem("set $d->{dev} " . ($is_off ? "off" : "on"));;\
}\
# D) Standard An/Aus\
else {\
my $fhem_cmd = $is_off ? ($d->{cmdOff} // "off") : ($d->{cmdOn} // "on");;\
fhem("set $d->{dev} $fhem_cmd") if ($is_on || $is_off);;\
}\
\
$match = 1;; last;;\
}\
}\
next if $match;;\
\
# --- HILFE ---\
if ($cmd_part =~ /(hilfe|kommandos|übersicht)/) {\
my $h = '<div style="text-align:left;;min-width:250px;;font-family:sans-serif;;">Befehlsübersicht: ';;\
my %seen;;\
for my $k (sort keys %smartHomeDevices) {\
my $d = $smartHomeDevices{$k};;\
next if $seen{$d->{label}}++;; \
my $suffix = ($d->{cmdOn} && $d->{cmdOff} && $d->{label} !~ /(an\/aus|öffnen\/schließen)/i) ? " (an/aus)" : "";;\
$suffix = " [0-100%]" if ($d->{type} // "") eq "dimmer";;\
$h .= "• $d->{label}$suffix ";;\
}\
$h .= ' Staubsauger Räume • '.join(", ", map { ucfirst($_) } sort keys %vacRooms).' </div>';;\
$h =~ s/'/\\"/g;;\
my $js = "if((document.querySelector('input[name=\"fw_id\"]')||{}).value==='$clientId'){FW_okDialog('$h')}";;\
FW_directNotify("#FHEMWEB:$_", $js, "") for devspec2array("TYPE=FHEMWEB");;\
}\
}\
}
</syntaxhighlight>

== Unterschiede der Wege ==

{| class="wikitable"
! Feature
! Browser
! Hybrid (Atom Echo S3)
|-
| Wakeword
| Browser
| ESP (Hardware)
|-
| Push-to-Talk
| Ja
| Nein
|-
| Always-On
| Ja (bedingt)
| Ja
|-
| Architektur
| Software
| Software + Hardware
|-
| Stabilität
| Sehr stabil
| Sehr stabil (Wakeword extern)
|}

== FireOS mit Fully Browser (Plus) ==

Damit die Spracherkennung funktioniert:

* Apps installieren:
Google
Speech Recognition & Synthesis
* FireOS:
„Tastatur und Sprache“ → „Text-to-Speech“
* Fully Browser:
<code>Enable JavaScriptInterface (PLUS)</code> aktivieren

[[Kategorie:Code Snippets]]
[[Kategorie:FHEM Frontends]]

FHEMWEB/VoiceControl: Web-STT & Hardware-Wakeword

2026-04-03T16:28:02Z

Schwatter:

[[Datei:Voicecontrol.png|mini]]

== VoiceControl – Sprachsteuerung via Browser und Atom Echo s3r ==

Diese Lösung ermöglicht eine flexible Sprachsteuerung für [[FHEM]]. Sprache wird in Text (Speech-to-Text) umgewandelt und als Reading <code>STT</code> im Device <code>global</code> bereitgestellt. Dieses Reading kann anschließend zentral (z. B. über <code>notify</code> oder <code>DOIF</code>) ausgewertet werden.

'''Unterstützt werden nur Chromium-basierte Browser (Chrome, Edge, Fully Browser). Firefox hat leider kein Backend.'''

Es gibt zwei unterschiedliche Wege zur Spracherfassung:

* Weg 1️⃣ (Software): Browser-basierte Komplettlösung
* Weg 2️⃣ (Hybrid): Hardware-Wakeword + Browser-Spracherkennung

=== Hilfe ===
* Forenthread zum {{Link2Forum|Topic=144147|LinkText=VoiceControl Sprachsteuerung}}
Dort befinden sich in Post #1 auch alle benötigten Dateien.

=== Funktionen ===

==== Grundprinzip ====
* Sprache → Speech-to-Text
* Ergebnis → Reading <code>STT</code> im Device <code>global</code>
* Zentrale Logik verarbeitet Befehle

==== Betriebsarten ====
* Push-to-Talk (nur Browser)
* Always-On mit Wakeword
* Hardware-Wakeword (Hybrid)

==== Rückmeldungen ====
* Sprachausgabe (TTS)
* Visuelle Bubble im Browser
* Optional gezielte Rückmeldung per Client-ID

== Weg 1️⃣: Browser-Lösung (voicecontrol.js) ==

Das Script nutzt die Google Web Speech API. Unterstützt werden Chromium-basierte Browser (Chrome, Edge, Fully Browser). Firefox wird aktuell nicht unterstützt.

=== Bedienung ===

==== Push-to-Talk ====
* Button gedrückt halten (~450 ms)
* Direkt sprechen (kein Wakeword nötig)
* Befehl wird sofort verarbeitet

==== Always-On ====
* Kurzer Klick aktiviert Dauerbetrieb
* Wakeword erforderlich (Standard: „James“)
* Nach Aktivierung permanentes Mithören

==== Wakeword ====
* Standard: <code>james</code>
* Anpassbar im Script:
<syntaxhighlight lang="javascript">
const wakewords = ["james"];</syntaxhighlight>

Ablauf:
# „James“ sagen
# System antwortet „Ja?“
# Zeitfenster (~6 Sekunden) für Befehl
# Danach automatische Verarbeitung oder Abbruch

=== Installation ===

==== Datei kopieren ====
<syntaxhighlight lang="Perl">
{ Svn_GetFile('contrib/voicecontrol.js', 'www/pgm2/voicecontrol.js') }
</syntaxhighlight>

==== Einbindung ====
<syntaxhighlight lang="perl">
attr WEBphone JavaScripts www/pgm2/voicecontrol.js
</syntaxhighlight>

==== Hinweis (HTTP ohne HTTPS) ====
Chrome benötigt Freigabe für Mikrofon:

* <code>chrome://flags/#unsafely-treat-insecure-origin-as-secure</code>
* Eigene URL hinzufügen
* Auf <code>Enabled</code> setzen

== Weg 2️⃣: Hybrid-Lösung mit Browser + Atom Echo (voicecontrol_echo.js) ==

Diese Variante kombiniert Hardware und Software:

* Wakeword-Erkennung erfolgt auf dem ESP (Atom Echo s3r)
* Die eigentliche Sprachverarbeitung (Speech-to-Text) erfolgt im Browser

=== Funktionsweise ===

# Wakeword wird auf dem ESP erkannt
# FHEM erzeugt Event (z. B. <code>james_detected</code>)
# Browser empfängt Event via WebSocket
# Speech-to-Text startet im Browser
# Ergebnis wird an FHEM übertragen

=== Aktivierung ===

* Kurzer Klick auf Button aktiviert/deaktiviert System
* Baut WebSocket-Verbindung zu FHEM auf
* Kein Push-to-Talk-Modus

=== Installation ===

==== Datei kopieren ====

Die Datei voicecontrol_echo.js ist hier zu finden:
{{Link2Forum|Topic=144147|LinkText=VoiceControl Sprachsteuerung}}
und muss nach www/pgm2/voicecontrol_echo.js kopiert werden.

Die echo_s3r.yaml ist für den Atom Echo s3r. Die Konfuguration ist weiter unten beschrieben.

==== Einbindung ====
<syntaxhighlight lang="perl">
attr WEBtablet JavaScripts www/pgm2/voicecontrol_echo.js
</syntaxhighlight>

=== Konfiguration im Javascript ===

<syntaxhighlight lang="javascript">
const DEVICE = "atom_echos3r_9888e00f4280";
const TRIGGER = "james_detected";
const FHEM_IP = "192.168.1.76:8085";
</syntaxhighlight>

* <code>DEVICE</code> → FHEM-Device des ESP
* <code>TRIGGER</code> → Event bei Wakeword
* <code>FHEM_IP</code> → FHEM-Server

=== Konfiguration in der Yaml ===

Damit sich der ESP mit eurem MQTT-Server und WLAN verbindet, müssen folgende Stellen angepasst werden.

wifi:
ssid: "YOUR_SSID"
password: "YOUR_PW"
fast_connect: true

mqtt:
broker: 192.168.1.76
port: 1884
username: "YOUR_USERNAME"
password: "YOUR_PW"
topic_prefix: atom_echo

=== Wakeword (ESP / ESPHome) ===

Das Wakeword wird direkt auf dem ESP definiert:

* Umsetzung über ESPHome
* Eine große Auswahl an Wakewords sind hier zu finden:
https://github.com/TaterTotterson/microWakeWords

Hier ein Beispiel, wie das Wakeword definiert wird.

micro_wake_word:
id: mww
microphone: echo_mic
models:
- model: "https://github.com/TaterTotterson/microWakeWords/raw/main/microWakeWordsV2/james.json"
id: james_model
probability_cutoff: 0.6

=== Kommunikation ===

* WebSocket-Verbindung zu FHEM
* Lauscht auf Device-Events
* Automatischer Reconnect bei Abbruch

=== Ablauf nach Wakeword ===

# System sagt „Ja?“
# Browser startet SpeechRecognition
# Nutzer spricht Befehl
# Befehl wird verarbeitet
# Rückmeldung „Erledigt“

== Zentrale Auswertung (Logik) ==

Beide Wege schreiben in:

<code>global:STT</code>

Die Verarbeitung erfolgt zentral über ein <code>notify</code>. Ein Device wird in der Mappingtabelle eingetragen.

Beispiel:
<code>"esszimmer:licht|lampe|deckenlampe" => { dev => "Lampe01_Ez", label => "Licht Esszimmer", cmdOn => "on", cmdOff => "off" }</code>

Aufschlüsselung:
<code>"hauptkeyword:Filter1|Filter3|Filter3" => { dev => "Devicename", label => "Übersichtname", cmdOn => "on", cmdOff => "off" }</code>

=== Beispiel: notify ===

<syntaxhighlight lang="perl">
defmod n_VoiceControl notify global:STT:.* {\
# --- VORBEREITUNG ---\
my ($cleanEvent, $clientId) = $EVENT =~ /^(.*)\s\[(.*)\]$/;;\
$cleanEvent //= $EVENT;;\
$clientId //= "unknown";;\
\
# --- KONFIGURATION: Zentrales Mapping ---\
my %smartHomeDevices = (\
"esszimmer:licht|lampe|deckenlampe" => { dev => "Lampe01_Ez", label => "Licht Esszimmer", cmdOn => "on", cmdOff => "off" },\
"esszimmer:aquarium" => { dev => "Aquarium_Aktor", label => "Aquarium", cmdOn => "on", cmdOff => "off" },\
"küche" => { dev => "Deckenlampe_Kue", label => "Licht Küche", cmdOn => "on", cmdOff => "off" },\
"wohnzimmer" => { dev => "Lampe06_Dek", label => "Licht Wohnzimmer", cmdOn => "on", cmdOff => "off" },\
"fernseher|tv" => { dev => "VuPlus", label => "Fernseher", cmdOn => "on", cmdOff => "off" },\
"rechner|pc" => { dev => "PC_Aktor", label => "PC", cmdOn => "on", cmdOff => "off" },\
"garage|tor" => { dev => "Garagentor_Aktor", label => "Garagentor öffnen/schließen", cmdOn => "open", cmdOff => "close" },\
"kaffee" => { dev => "Kaffeemaschine", label => "Kaffeemaschine", cmdOn => "on", cmdOff => "off" },\
"roberto" => { dev => "MQTT2_valetudo_FlusteredUnequaledFish", label => "Lade Roberto", cmdOn => "charge" },\
"ambiente" => { dev => "LampeSzeneAlle", label => "Zentrales Licht", type => "dimmer", cmdOn => "on", cmdOff => "off" },\
"sauge|reinige|putze|staubsauger|roboter" => { dev => "MQTT2_valetudo_FlusteredUnequaledFish", label => "Staubsauger", type => "vacuum" },\
"ambilight" => { label => "Ambilight", type => "system", cmd => "sshpass -p 'GEHEIMESPASSWORD' ssh -o StrictHostKeyChecking=no root\@192.168.1.46 '/usr/share/hyperhdr/scripts/hyperhdr_toggle.sh'" }\
);;\
\
my %vacRooms = ("arbeitszimmer" => "Arbeitszimmer", "badezimmer" => "Badezimmer", "esszimmer" => "Esszimmer", "flur" => "Flur", "küche" => "Küche", "wohnzimmer" => "Wohnzimmer");;\
\
my $onRegEx = '\b(an|ein|einschalten|starte|aktivier|aktiviere|öffne|öffnen|auf|hoch|lade)\b';;\
my $offRegEx = '\b(aus|ausschalten|stop|stoppe|beende|deaktivier|deaktiviere|schließe|schließen|zu|runter)\b';;\
\
my @commands = split(/\s*(?:und|dann|,)\s*/, lc($cleanEvent));;\
\
# --- DER BEFEHLS-LOOP ---\
foreach my $cmd_part (@commands) {\
$cmd_part =~ s/^\s+|\s+$//g;;\
my $is_on = ($cmd_part =~ /$onRegEx/) ? 1 : 0;;\
my $is_off = ($cmd_part =~ /$offRegEx/) ? 1 : 0;;\
$cmd_part =~ s/\b(ich|brauche|mach|bitte|kannst du|würdest du|mal|doch|den|das|die|im|in der)\b//g;;\
\
# --- GENERISCHE STEUERUNG ---\
my $match = 0;;\
# Sortierung stellt sicher, dass 'dimmer/vacuum' Vorrang haben\
foreach my $key (sort { ($smartHomeDevices{$b}{type}//"") cmp ($smartHomeDevices{$a}{type}//"") } keys %smartHomeDevices) {\
\
my ($main, $must) = split(/:/, $key);;\
\
# Prüfe Hauptwort\
if ($cmd_part =~ /\b($main)\b/i) {\
# Prüfe Pflichtwort falls vorhanden\
next if ($must && $cmd_part !~ /\b($must)\b/i);;\
\
my $d = $smartHomeDevices{$key};;\
\
# A) System\
if (($d->{type} // "") eq "system") {\
system($d->{cmd});;\
}\
\
# B) Staubsauger\
if (($d->{type} // "") eq "vacuum") {\
my @found = grep { $cmd_part =~ /\b$_\b/ } keys %vacRooms;;\
fhem(@found ? "set $d->{dev} clean_segment ".join(",", map { $vacRooms{$_} } @found) : "set $d->{dev} start");;\
}\
# C) Dimmer (Kompakt & korrigiert)\
elsif (($d->{type} // "") eq "dimmer") {\
$cmd_part =~ /(\d+)/ \
? fhem("set $d->{dev} brightness " . int(($1 > 100 ? 100 : $1) * 2.55)) \
: ($is_on || $is_off) && fhem("set $d->{dev} " . ($is_off ? "off" : "on"));;\
}\
# D) Standard An/Aus\
else {\
my $fhem_cmd = $is_off ? ($d->{cmdOff} // "off") : ($d->{cmdOn} // "on");;\
fhem("set $d->{dev} $fhem_cmd") if ($is_on || $is_off);;\
}\
\
$match = 1;; last;;\
}\
}\
next if $match;;\
\
# --- HILFE ---\
if ($cmd_part =~ /(hilfe|kommandos|übersicht)/) {\
my $h = '<div style="text-align:left;;min-width:250px;;font-family:sans-serif;;">Befehlsübersicht: ';;\
my %seen;;\
for my $k (sort keys %smartHomeDevices) {\
my $d = $smartHomeDevices{$k};;\
next if $seen{$d->{label}}++;; \
my $suffix = ($d->{cmdOn} && $d->{cmdOff} && $d->{label} !~ /(an\/aus|öffnen\/schließen)/i) ? " (an/aus)" : "";;\
$suffix = " [0-100%]" if ($d->{type} // "") eq "dimmer";;\
$h .= "• $d->{label}$suffix ";;\
}\
$h .= ' Staubsauger Räume • '.join(", ", map { ucfirst($_) } sort keys %vacRooms).' </div>';;\
$h =~ s/'/\\"/g;;\
my $js = "if((document.querySelector('input[name=\"fw_id\"]')||{}).value==='$clientId'){FW_okDialog('$h')}";;\
FW_directNotify("#FHEMWEB:$_", $js, "") for devspec2array("TYPE=FHEMWEB");;\
}\
}\
}
</syntaxhighlight>

== Unterschiede der Wege ==

{| class="wikitable"
! Feature
! Browser
! Hybrid (Atom Echo S3)
|-
| Wakeword
| Browser
| ESP (Hardware)
|-
| Push-to-Talk
| Ja
| Nein
|-
| Always-On
| Ja (bedingt)
| Ja
|-
| Architektur
| Software
| Software + Hardware
|-
| Stabilität
| Sehr stabil
| Sehr stabil (Wakeword extern)
|}

== FireOS mit Fully Browser (Plus) ==

Damit die Spracherkennung funktioniert:

* Apps installieren:
Google
Speech Recognition & Synthesis
* FireOS:
„Tastatur und Sprache“ → „Text-to-Speech“
* Fully Browser:
<code>Enable JavaScriptInterface (PLUS)</code> aktivieren

[[Kategorie:Code Snippets]]
[[Kategorie:FHEM Frontends]]

FHEMWEB/VoiceControl: Web-STT & Hardware-Wakeword

2026-04-03T16:17:23Z

Schwatter:

[[Datei:Voicecontrol.png|mini]]

== VoiceControl – Sprachsteuerung via Browser und Atom Echo s3r ==

Diese Lösung ermöglicht eine flexible Sprachsteuerung für [[FHEM]]. Sprache wird in Text (Speech-to-Text) umgewandelt und als Reading <code>STT</code> im Device <code>global</code> bereitgestellt. Dieses Reading kann anschließend zentral (z. B. über <code>notify</code> oder <code>DOIF</code>) ausgewertet werden.

'''Unterstützt werden nur Chromium-basierte Browser (Chrome, Edge, Fully Browser). Firefox hat leider kein Backend.'''

Es gibt zwei unterschiedliche Wege zur Spracherfassung:

* Weg 1️⃣ (Software): Browser-basierte Komplettlösung
* Weg 2️⃣ (Hybrid): Hardware-Wakeword + Browser-Spracherkennung

=== Hilfe ===
* Forenthread zum {{Link2Forum|Topic=144147|LinkText=VoiceControl Sprachsteuerung}}
Dort befinden sich in Post #1 auch alle benötigten Dateien.

=== Funktionen ===

==== Grundprinzip ====
* Sprache → Speech-to-Text
* Ergebnis → Reading <code>STT</code> im Device <code>global</code>
* Zentrale Logik verarbeitet Befehle

==== Betriebsarten ====
* Push-to-Talk (nur Browser)
* Always-On mit Wakeword
* Hardware-Wakeword (Hybrid)

==== Rückmeldungen ====
* Sprachausgabe (TTS)
* Visuelle Bubble im Browser
* Optional gezielte Rückmeldung per Client-ID

== Weg 1️⃣: Browser-Lösung (voicecontrol.js) ==

Das Script nutzt die Google Web Speech API. Unterstützt werden Chromium-basierte Browser (Chrome, Edge, Fully Browser). Firefox wird aktuell nicht unterstützt.

=== Bedienung ===

==== Push-to-Talk ====
* Button gedrückt halten (~450 ms)
* Direkt sprechen (kein Wakeword nötig)
* Befehl wird sofort verarbeitet

==== Always-On ====
* Kurzer Klick aktiviert Dauerbetrieb
* Wakeword erforderlich (Standard: „James“)
* Nach Aktivierung permanentes Mithören

==== Wakeword ====
* Standard: <code>james</code>
* Anpassbar im Script:
<syntaxhighlight lang="javascript">
const wakewords = ["james"];</syntaxhighlight>

Ablauf:
# „James“ sagen
# System antwortet „Ja?“
# Zeitfenster (~6 Sekunden) für Befehl
# Danach automatische Verarbeitung oder Abbruch

=== Installation ===

==== Datei kopieren ====
<syntaxhighlight lang="Perl">
{ Svn_GetFile('contrib/voicecontrol.js', 'www/pgm2/voicecontrol.js') }
</syntaxhighlight>

==== Einbindung ====
<syntaxhighlight lang="perl">
attr WEBphone JavaScripts www/pgm2/voicecontrol.js
</syntaxhighlight>

==== Hinweis (HTTP ohne HTTPS) ====
Chrome benötigt Freigabe für Mikrofon:

* <code>chrome://flags/#unsafely-treat-insecure-origin-as-secure</code>
* Eigene URL hinzufügen
* Auf <code>Enabled</code> setzen

== Weg 2️⃣: Hybrid-Lösung mit Browser + Atom Echo (voicecontrol_echo.js) ==

Diese Variante kombiniert Hardware und Software:

* Wakeword-Erkennung erfolgt auf dem ESP (Atom Echo s3r)
* Die eigentliche Sprachverarbeitung (Speech-to-Text) erfolgt im Browser

=== Funktionsweise ===

# Wakeword wird auf dem ESP erkannt
# FHEM erzeugt Event (z. B. <code>james_detected</code>)
# Browser empfängt Event via WebSocket
# Speech-to-Text startet im Browser
# Ergebnis wird an FHEM übertragen

=== Aktivierung ===

* Kurzer Klick auf Button aktiviert/deaktiviert System
* Baut WebSocket-Verbindung zu FHEM auf
* Kein Push-to-Talk-Modus

=== Installation ===

==== Datei kopieren ====

Die Datei voicecontrol_echo.js ist hier zu finden:
{{Link2Forum|Topic=144147|LinkText=VoiceControl Sprachsteuerung}}
und muss nach www/pgm2/voicecontrol_echo.js kopiert werden.

Die echo_s3r.yaml ist für den Atom Echo s3r. Die Konfuguration ist weiter unten beschrieben.

==== Einbindung ====
<syntaxhighlight lang="perl">
attr WEBtablet JavaScripts www/pgm2/voicecontrol_echo.js
</syntaxhighlight>

=== Konfiguration im Javascript ===

<syntaxhighlight lang="javascript">
const DEVICE = "atom_echos3r_9888e00f4280";
const TRIGGER = "james_detected";
const FHEM_IP = "192.168.1.76:8085";
</syntaxhighlight>

* <code>DEVICE</code> → FHEM-Device des ESP
* <code>TRIGGER</code> → Event bei Wakeword
* <code>FHEM_IP</code> → FHEM-Server

=== Konfiguration in der Yaml ===

Damit sich der ESP mit eurem MQTT-Server und WLAN verbindet, müssen folgende Stellen angepasst werden.

wifi:
ssid: "YOUR_SSID"
password: "YOUR_PW"
fast_connect: true

mqtt:
broker: 192.168.1.76
port: 1884
username: "YOUR_USERNAME"
password: "YOUR_PW"
topic_prefix: atom_echo

=== Wakeword (ESP / ESPHome) ===

Das Wakeword wird direkt auf dem ESP definiert:

* Umsetzung über ESPHome
* Eine große Auswahl an Wakewords sind hier zu finden:
https://github.com/TaterTotterson/microWakeWords

Hier ein Beispiel, wie das Wakeword definiert wird.

micro_wake_word:
id: mww
microphone: echo_mic
models:
- model: "https://github.com/TaterTotterson/microWakeWords/raw/main/microWakeWordsV2/james.json"
id: james_model
probability_cutoff: 0.6

=== Kommunikation ===

* WebSocket-Verbindung zu FHEM
* Lauscht auf Device-Events
* Automatischer Reconnect bei Abbruch

=== Ablauf nach Wakeword ===

# System sagt „Ja?“
# Browser startet SpeechRecognition
# Nutzer spricht Befehl
# Befehl wird verarbeitet
# Rückmeldung „Erledigt“

== Zentrale Auswertung (Logik) ==

Beide Wege schreiben in:

<code>global:STT</code>

Die Verarbeitung erfolgt zentral über ein <code>notify</code>. Ein Device wird in der Mappingtabelle eingetragen.

Beispiel:
<code>"esszimmer:licht|lampe|deckenlampe" => { dev => "Lampe01_Ez", label => "Licht Esszimmer", cmdOn => "on", cmdOff => "off" }</code>

Aufschlüsselung:
<code>"hauptkeyword:Filter1|Filter3|Filter3" => { dev => "Devicename", label => "Übersichtname", cmdOn => "on", cmdOff => "off" }</code>

=== Beispiel: notify ===

<syntaxhighlight lang="perl">
defmod n_VoiceControl notify global:STT:.* {\
# --- VORBEREITUNG ---\
my ($cleanEvent, $clientId) = $EVENT =~ /^(.*)\s\[(.*)\]$/;;\
$cleanEvent //= $EVENT;;\
$clientId //= "unknown";;\
\
# --- KONFIGURATION: Zentrales Mapping ---\
my %smartHomeDevices = (\
"esszimmer:licht|lampe|deckenlampe" => { dev => "Lampe01_Ez", label => "Licht Esszimmer", cmdOn => "on", cmdOff => "off" },\
"esszimmer:aquarium" => { dev => "Aquarium_Aktor", label => "Aquarium", cmdOn => "on", cmdOff => "off" },\
"küche" => { dev => "Deckenlampe_Kue", label => "Licht Küche", cmdOn => "on", cmdOff => "off" },\
"wohnzimmer" => { dev => "Lampe06_Dek", label => "Licht Wohnzimmer", cmdOn => "on", cmdOff => "off" },\
"fernseher|tv" => { dev => "VuPlus", label => "Fernseher", cmdOn => "on", cmdOff => "off" },\
"rechner|pc" => { dev => "PC_Aktor", label => "PC", cmdOn => "on", cmdOff => "off" },\
"garage|tor" => { dev => "Garagentor_Aktor", label => "Garagentor öffnen/schließen", cmdOn => "open", cmdOff => "close" },\
"kaffee" => { dev => "Kaffeemaschine", label => "Kaffeemaschine", cmdOn => "on", cmdOff => "off" },\
"roberto" => { dev => "MQTT2_valetudo_FlusteredUnequaledFish", label => "Lade Roberto", cmdOn => "charge" },\
"ambiente" => { dev => "LampeSzeneAlle", label => "Zentrales Licht", type => "dimmer", cmdOn => "on", cmdOff => "off" },\
"sauge|reinige|putze|staubsauger|roboter" => { dev => "MQTT2_valetudo_FlusteredUnequaledFish", label => "Staubsauger", type => "vacuum" }\
);;\
\
my %vacRooms = ("arbeitszimmer" => "Arbeitszimmer", "badezimmer" => "Badezimmer", "esszimmer" => "Esszimmer", "flur" => "Flur", "küche" => "Küche", "wohnzimmer" => "Wohnzimmer");;\
\
my $onRegEx = '\b(an|ein|einschalten|starte|aktivier|aktiviere|öffne|öffnen|auf|hoch|lade)\b';;\
my $offRegEx = '\b(aus|ausschalten|stop|stoppe|beende|deaktivier|deaktiviere|schließe|schließen|zu|runter)\b';;\
\
my @commands = split(/\s*(?:und|dann|,)\s*/, lc($cleanEvent));;\
\
# --- DER BEFEHLS-LOOP ---\
foreach my $cmd_part (@commands) {\
$cmd_part =~ s/^\s+|\s+$//g;;\
my $is_on = ($cmd_part =~ /$onRegEx/) ? 1 : 0;;\
my $is_off = ($cmd_part =~ /$offRegEx/) ? 1 : 0;;\
$cmd_part =~ s/\b(ich|brauche|mach|bitte|kannst du|würdest du|mal|doch|den|das|die|im|in der)\b//g;;\
\
# --- AMBILIGHT ---\
if ($cmd_part =~ /ambilight/) {\
system("sshpass -p '1431Fhem1982' ssh -o StrictHostKeyChecking=no root\@192.168.1.46 '/usr/share/hyperhdr/scripts/hyperhdr_toggle.sh'");;\
next;;\
}\
\
# --- GENERISCHE STEUERUNG ---\
my $match = 0;;\
# Sortierung stellt sicher, dass 'dimmer/vacuum' Vorrang haben\
foreach my $key (sort { ($smartHomeDevices{$b}{type}//"") cmp ($smartHomeDevices{$a}{type}//"") } keys %smartHomeDevices) {\
\
my ($main, $must) = split(/:/, $key);;\
\
# Prüfe Hauptwort\
if ($cmd_part =~ /\b($main)\b/i) {\
# Prüfe Pflichtwort falls vorhanden\
next if ($must && $cmd_part !~ /\b($must)\b/i);;\
\
my $d = $smartHomeDevices{$key};;\
\
# A) Staubsauger\
if (($d->{type} // "") eq "vacuum") {\
my @found = grep { $cmd_part =~ /\b$_\b/ } keys %vacRooms;;\
fhem(@found ? "set $d->{dev} clean_segment ".join(",", map { $vacRooms{$_} } @found) : "set $d->{dev} start");;\
}\
# B) Dimmer (Kompakt & korrigiert)\
elsif (($d->{type} // "") eq "dimmer") {\
$cmd_part =~ /(\d+)/ \
? fhem("set $d->{dev} brightness " . int(($1 > 100 ? 100 : $1) * 2.55)) \
: ($is_on || $is_off) && fhem("set $d->{dev} " . ($is_off ? "off" : "on"));;\
}\
# C) Standard An/Aus\
else {\
my $fhem_cmd = $is_off ? ($d->{cmdOff} // "off") : ($d->{cmdOn} // "on");;\
fhem("set $d->{dev} $fhem_cmd") if ($is_on || $is_off);;\
}\
\
$match = 1;; last;;\
}\
}\
next if $match;;\
\
# --- HILFE ---\
if ($cmd_part =~ /(hilfe|kommandos|übersicht)/) {\
my $h = '<div style="text-align:left;;min-width:250px;;font-family:sans-serif;;">Befehlsübersicht: ';;\
my %seen;;\
for my $k (sort keys %smartHomeDevices) {\
my $d = $smartHomeDevices{$k};;\
next if $seen{$d->{label}}++;; \
my $suffix = ($d->{cmdOn} && $d->{cmdOff} && $d->{label} !~ /(an\/aus|öffnen\/schließen)/i) ? " (an/aus)" : "";;\
$suffix = " [0-100%]" if ($d->{type} // "") eq "dimmer";;\
$h .= "• $d->{label}$suffix ";;\
}\
$h .= ' Staubsauger Räume • '.join(", ", map { ucfirst($_) } sort keys %vacRooms).' </div>';;\
$h =~ s/'/\\"/g;;\
my $js = "if((document.querySelector('input[name=\"fw_id\"]')||{}).value==='$clientId'){FW_okDialog('$h')}";;\
FW_directNotify("#FHEMWEB:$_", $js, "") for devspec2array("TYPE=FHEMWEB");;\
}\
}\
}
</syntaxhighlight>

== Unterschiede der Wege ==

{| class="wikitable"
! Feature
! Browser
! Hybrid (Atom Echo S3)
|-
| Wakeword
| Browser
| ESP (Hardware)
|-
| Push-to-Talk
| Ja
| Nein
|-
| Always-On
| Ja (bedingt)
| Ja
|-
| Architektur
| Software
| Software + Hardware
|-
| Stabilität
| Sehr stabil
| Sehr stabil (Wakeword extern)
|}

== FireOS mit Fully Browser (Plus) ==

Damit die Spracherkennung funktioniert:

* Apps installieren:
Google
Speech Recognition & Synthesis
* FireOS:
„Tastatur und Sprache“ → „Text-to-Speech“
* Fully Browser:
<code>Enable JavaScriptInterface (PLUS)</code> aktivieren

[[Kategorie:Code Snippets]]
[[Kategorie:FHEM Frontends]]

FHEMWEB/VoiceControl: Web-STT & Hardware-Wakeword

2026-04-03T16:15:29Z

Schwatter:

[[Datei:Voicecontrol.png|mini]]

== VoiceControl – Sprachsteuerung via Browser und Atom Echo s3r ==

Diese Lösung ermöglicht eine flexible Sprachsteuerung für [[FHEM]]. Sprache wird in Text (Speech-to-Text) umgewandelt und als Reading <code>STT</code> im Device <code>global</code> bereitgestellt. Dieses Reading kann anschließend zentral (z. B. über <code>notify</code> oder <code>DOIF</code>) ausgewertet werden.

'''Unterstützt werden nur Chromium-basierte Browser (Chrome, Edge, Fully Browser). Firefox hat leider kein Backend.'''

Es gibt zwei unterschiedliche Wege zur Spracherfassung:

* Weg 1️⃣ (Software): Browser-basierte Komplettlösung
* Weg 2️⃣ (Hybrid): Hardware-Wakeword + Browser-Spracherkennung

=== Hilfe ===
* Forenthread zum {{Link2Forum|Topic=144147|LinkText=VoiceControl Sprachsteuerung}}
Dort befinden sich in Post #1 auch alle benötigten Dateien.

=== Funktionen ===

==== Grundprinzip ====
* Sprache → Speech-to-Text
* Ergebnis → Reading <code>STT</code> im Device <code>global</code>
* Zentrale Logik verarbeitet Befehle

==== Betriebsarten ====
* Push-to-Talk (nur Browser)
* Always-On mit Wakeword
* Hardware-Wakeword (Hybrid)

==== Rückmeldungen ====
* Sprachausgabe (TTS)
* Visuelle Bubble im Browser
* Optional gezielte Rückmeldung per Client-ID

== Weg 1️⃣: Browser-Lösung (voicecontrol.js) ==

Das Script nutzt die Google Web Speech API. Unterstützt werden Chromium-basierte Browser (Chrome, Edge, Fully Browser). Firefox wird aktuell nicht unterstützt.

=== Bedienung ===

==== Push-to-Talk ====
* Button gedrückt halten (~450 ms)
* Direkt sprechen (kein Wakeword nötig)
* Befehl wird sofort verarbeitet

==== Always-On ====
* Kurzer Klick aktiviert Dauerbetrieb
* Wakeword erforderlich (Standard: „James“)
* Nach Aktivierung permanentes Mithören

==== Wakeword ====
* Standard: <code>james</code>
* Anpassbar im Script:
<syntaxhighlight lang="javascript">
const wakewords = ["james"];</syntaxhighlight>

Ablauf:
# „James“ sagen
# System antwortet „Ja?“
# Zeitfenster (~6 Sekunden) für Befehl
# Danach automatische Verarbeitung oder Abbruch

=== Installation ===

==== Datei kopieren ====
<syntaxhighlight lang="Perl">
{ Svn_GetFile('contrib/voicecontrol.js', 'www/pgm2/voicecontrol.js') }
</syntaxhighlight>

==== Einbindung ====
<syntaxhighlight lang="perl">
attr WEBphone JavaScripts www/pgm2/voicecontrol.js
</syntaxhighlight>

==== Hinweis (HTTP ohne HTTPS) ====
Chrome benötigt Freigabe für Mikrofon:

* <code>chrome://flags/#unsafely-treat-insecure-origin-as-secure</code>
* Eigene URL hinzufügen
* Auf <code>Enabled</code> setzen

== Weg 2️⃣: Hybrid-Lösung mit Browser + Atom Echo (voicecontrol_echo.js) ==

Diese Variante kombiniert Hardware und Software:

* Wakeword-Erkennung erfolgt auf dem ESP (Atom Echo s3r)
* Die eigentliche Sprachverarbeitung (Speech-to-Text) erfolgt im Browser

=== Funktionsweise ===

# Wakeword wird auf dem ESP erkannt
# FHEM erzeugt Event (z. B. <code>james_detected</code>)
# Browser empfängt Event via WebSocket
# Speech-to-Text startet im Browser
# Ergebnis wird an FHEM übertragen

=== Aktivierung ===

* Kurzer Klick auf Button aktiviert/deaktiviert System
* Baut WebSocket-Verbindung zu FHEM auf
* Kein Push-to-Talk-Modus

=== Installation ===

==== Datei kopieren ====

Die Datei voicecontrol_echo.js ist hier zu finden:
{{Link2Forum|Topic=144147|LinkText=VoiceControl Sprachsteuerung}}
und muss nach www/pgm2/voicecontrol_echo.js kopiert werden.

Die echo_s3r.yaml ist für den Atom Echo s3r. Die Konfuguration ist weiter unten beschrieben.

==== Einbindung ====
<syntaxhighlight lang="perl">
attr WEBtablet JavaScripts www/pgm2/voicecontrol_echo.js
</syntaxhighlight>

=== Konfiguration im Javascript ===

<syntaxhighlight lang="javascript">
const DEVICE = "atom_echos3r_9888e00f4280";
const TRIGGER = "james_detected";
const FHEM_IP = "192.168.1.76:8085";
</syntaxhighlight>

* <code>DEVICE</code> → FHEM-Device des ESP
* <code>TRIGGER</code> → Event bei Wakeword
* <code>FHEM_IP</code> → FHEM-Server

=== Konfiguration in der Yaml ===

Damit sich der ESP mit eurem MQTT-Server und WLAN verbindet, müssen folgende Stellen angepasst werden.

wifi:
ssid: "YOUR_SSID"
password: "YOUR_PW"
fast_connect: true

mqtt:
broker: 192.168.1.76
port: 1884
username: "YOUR_USERNAME"
password: "YOUR_PW"
topic_prefix: atom_echo

=== Wakeword (ESP / ESPHome) ===

Das Wakeword wird direkt auf dem ESP definiert:

* Umsetzung über ESPHome
* Eine große Auswahl an Wakewords sind hier zu finden:
https://github.com/TaterTotterson/microWakeWords

Hier ein Beispiel, wie das Wakeword definiert wird.

micro_wake_word:
id: mww
microphone: echo_mic
models:
- model: "https://github.com/TaterTotterson/microWakeWords/raw/main/microWakeWordsV2/james.json"
id: james_model
probability_cutoff: 0.6

=== Kommunikation ===

* WebSocket-Verbindung zu FHEM
* Lauscht auf Device-Events
* Automatischer Reconnect bei Abbruch

=== Ablauf nach Wakeword ===

# System sagt „Ja?“
# Browser startet SpeechRecognition
# Nutzer spricht Befehl
# Befehl wird verarbeitet
# Rückmeldung „Erledigt“

== Zentrale Auswertung (Logik) ==

Beide Wege schreiben in:

<code>global:STT</code>

Die Verarbeitung erfolgt zentral über ein <code>notify</code>. In der Mappingtabelle wird das Device eingetragen.

Beispiel:
<code>"esszimmer:licht|lampe|deckenlampe" => { dev => "Lampe01_Ez", label => "Licht Esszimmer", cmdOn => "on", cmdOff => "off" }</code>

Aufschlüsselung:
<code>"hauptkeyword:Filter1|Filter3|Filter3" => { dev => "Devicename", label => "Übersichtname", cmdOn => "on", cmdOff => "off" }</code>

=== Beispiel: notify ===

<syntaxhighlight lang="perl">
defmod n_VoiceControl notify global:STT:.* {\
# --- VORBEREITUNG ---\
my ($cleanEvent, $clientId) = $EVENT =~ /^(.*)\s\[(.*)\]$/;;\
$cleanEvent //= $EVENT;;\
$clientId //= "unknown";;\
\
# --- KONFIGURATION: Zentrales Mapping ---\
my %smartHomeDevices = (\
"esszimmer:licht|lampe|deckenlampe" => { dev => "Lampe01_Ez", label => "Licht Esszimmer", cmdOn => "on", cmdOff => "off" },\
"esszimmer:aquarium" => { dev => "Aquarium_Aktor", label => "Aquarium", cmdOn => "on", cmdOff => "off" },\
"küche" => { dev => "Deckenlampe_Kue", label => "Licht Küche", cmdOn => "on", cmdOff => "off" },\
"wohnzimmer" => { dev => "Lampe06_Dek", label => "Licht Wohnzimmer", cmdOn => "on", cmdOff => "off" },\
"fernseher|tv" => { dev => "VuPlus", label => "Fernseher", cmdOn => "on", cmdOff => "off" },\
"rechner|pc" => { dev => "PC_Aktor", label => "PC", cmdOn => "on", cmdOff => "off" },\
"garage|tor" => { dev => "Garagentor_Aktor", label => "Garagentor öffnen/schließen", cmdOn => "open", cmdOff => "close" },\
"kaffee" => { dev => "Kaffeemaschine", label => "Kaffeemaschine", cmdOn => "on", cmdOff => "off" },\
"roberto" => { dev => "MQTT2_valetudo_FlusteredUnequaledFish", label => "Lade Roberto", cmdOn => "charge" },\
"ambiente" => { dev => "LampeSzeneAlle", label => "Zentrales Licht", type => "dimmer", cmdOn => "on", cmdOff => "off" },\
"sauge|reinige|putze|staubsauger|roboter" => { dev => "MQTT2_valetudo_FlusteredUnequaledFish", label => "Staubsauger", type => "vacuum" }\
);;\
\
my %vacRooms = ("arbeitszimmer" => "Arbeitszimmer", "badezimmer" => "Badezimmer", "esszimmer" => "Esszimmer", "flur" => "Flur", "küche" => "Küche", "wohnzimmer" => "Wohnzimmer");;\
\
my $onRegEx = '\b(an|ein|einschalten|starte|aktivier|aktiviere|öffne|öffnen|auf|hoch|lade)\b';;\
my $offRegEx = '\b(aus|ausschalten|stop|stoppe|beende|deaktivier|deaktiviere|schließe|schließen|zu|runter)\b';;\
\
my @commands = split(/\s*(?:und|dann|,)\s*/, lc($cleanEvent));;\
\
# --- DER BEFEHLS-LOOP ---\
foreach my $cmd_part (@commands) {\
$cmd_part =~ s/^\s+|\s+$//g;;\
my $is_on = ($cmd_part =~ /$onRegEx/) ? 1 : 0;;\
my $is_off = ($cmd_part =~ /$offRegEx/) ? 1 : 0;;\
$cmd_part =~ s/\b(ich|brauche|mach|bitte|kannst du|würdest du|mal|doch|den|das|die|im|in der)\b//g;;\
\
# --- AMBILIGHT ---\
if ($cmd_part =~ /ambilight/) {\
system("sshpass -p '1431Fhem1982' ssh -o StrictHostKeyChecking=no root\@192.168.1.46 '/usr/share/hyperhdr/scripts/hyperhdr_toggle.sh'");;\
next;;\
}\
\
# --- GENERISCHE STEUERUNG ---\
my $match = 0;;\
# Sortierung stellt sicher, dass 'dimmer/vacuum' Vorrang haben\
foreach my $key (sort { ($smartHomeDevices{$b}{type}//"") cmp ($smartHomeDevices{$a}{type}//"") } keys %smartHomeDevices) {\
\
my ($main, $must) = split(/:/, $key);;\
\
# Prüfe Hauptwort\
if ($cmd_part =~ /\b($main)\b/i) {\
# Prüfe Pflichtwort falls vorhanden\
next if ($must && $cmd_part !~ /\b($must)\b/i);;\
\
my $d = $smartHomeDevices{$key};;\
\
# A) Staubsauger\
if (($d->{type} // "") eq "vacuum") {\
my @found = grep { $cmd_part =~ /\b$_\b/ } keys %vacRooms;;\
fhem(@found ? "set $d->{dev} clean_segment ".join(",", map { $vacRooms{$_} } @found) : "set $d->{dev} start");;\
}\
# B) Dimmer (Kompakt & korrigiert)\
elsif (($d->{type} // "") eq "dimmer") {\
$cmd_part =~ /(\d+)/ \
? fhem("set $d->{dev} brightness " . int(($1 > 100 ? 100 : $1) * 2.55)) \
: ($is_on || $is_off) && fhem("set $d->{dev} " . ($is_off ? "off" : "on"));;\
}\
# C) Standard An/Aus\
else {\
my $fhem_cmd = $is_off ? ($d->{cmdOff} // "off") : ($d->{cmdOn} // "on");;\
fhem("set $d->{dev} $fhem_cmd") if ($is_on || $is_off);;\
}\
\
$match = 1;; last;;\
}\
}\
next if $match;;\
\
# --- HILFE ---\
if ($cmd_part =~ /(hilfe|kommandos|übersicht)/) {\
my $h = '<div style="text-align:left;;min-width:250px;;font-family:sans-serif;;">Befehlsübersicht: ';;\
my %seen;;\
for my $k (sort keys %smartHomeDevices) {\
my $d = $smartHomeDevices{$k};;\
next if $seen{$d->{label}}++;; \
my $suffix = ($d->{cmdOn} && $d->{cmdOff} && $d->{label} !~ /(an\/aus|öffnen\/schließen)/i) ? " (an/aus)" : "";;\
$suffix = " [0-100%]" if ($d->{type} // "") eq "dimmer";;\
$h .= "• $d->{label}$suffix ";;\
}\
$h .= ' Staubsauger Räume • '.join(", ", map { ucfirst($_) } sort keys %vacRooms).' </div>';;\
$h =~ s/'/\\"/g;;\
my $js = "if((document.querySelector('input[name=\"fw_id\"]')||{}).value==='$clientId'){FW_okDialog('$h')}";;\
FW_directNotify("#FHEMWEB:$_", $js, "") for devspec2array("TYPE=FHEMWEB");;\
}\
}\
}
</syntaxhighlight>

== Unterschiede der Wege ==

{| class="wikitable"
! Feature
! Browser
! Hybrid (Atom Echo S3)
|-
| Wakeword
| Browser
| ESP (Hardware)
|-
| Push-to-Talk
| Ja
| Nein
|-
| Always-On
| Ja (bedingt)
| Ja
|-
| Architektur
| Software
| Software + Hardware
|-
| Stabilität
| Sehr stabil
| Sehr stabil (Wakeword extern)
|}

== FireOS mit Fully Browser (Plus) ==

Damit die Spracherkennung funktioniert:

* Apps installieren:
Google
Speech Recognition & Synthesis
* FireOS:
„Tastatur und Sprache“ → „Text-to-Speech“
* Fully Browser:
<code>Enable JavaScriptInterface (PLUS)</code> aktivieren

[[Kategorie:Code Snippets]]
[[Kategorie:FHEM Frontends]]

FHEMWEB/VoiceControl: Web-STT & Hardware-Wakeword

2026-04-03T16:07:19Z

Schwatter:

[[Datei:Voicecontrol.png|mini]]

== VoiceControl – Sprachsteuerung via Browser und Atom Echo s3r ==

Diese Lösung ermöglicht eine flexible Sprachsteuerung für [[FHEM]]. Sprache wird in Text (Speech-to-Text) umgewandelt und als Reading <code>STT</code> im Device <code>global</code> bereitgestellt. Dieses Reading kann anschließend zentral (z. B. über <code>notify</code> oder <code>DOIF</code>) ausgewertet werden.

'''Unterstützt werden nur Chromium-basierte Browser (Chrome, Edge, Fully Browser). Firefox hat leider kein Backend.'''

Es gibt zwei unterschiedliche Wege zur Spracherfassung:

* Weg 1️⃣ (Software): Browser-basierte Komplettlösung
* Weg 2️⃣ (Hybrid): Hardware-Wakeword + Browser-Spracherkennung

=== Hilfe ===
* Forenthread zum {{Link2Forum|Topic=144147|LinkText=VoiceControl Sprachsteuerung}}
Dort befinden sich in Post #1 auch alle benötigten Dateien.

=== Funktionen ===

==== Grundprinzip ====
* Sprache → Speech-to-Text
* Ergebnis → Reading <code>STT</code> im Device <code>global</code>
* Zentrale Logik verarbeitet Befehle

==== Betriebsarten ====
* Push-to-Talk (nur Browser)
* Always-On mit Wakeword
* Hardware-Wakeword (Hybrid)

==== Rückmeldungen ====
* Sprachausgabe (TTS)
* Visuelle Bubble im Browser
* Optional gezielte Rückmeldung per Client-ID

== Weg 1️⃣: Browser-Lösung (voicecontrol.js) ==

Das Script nutzt die Google Web Speech API. Unterstützt werden Chromium-basierte Browser (Chrome, Edge, Fully Browser). Firefox wird aktuell nicht unterstützt.

=== Bedienung ===

==== Push-to-Talk ====
* Button gedrückt halten (~450 ms)
* Direkt sprechen (kein Wakeword nötig)
* Befehl wird sofort verarbeitet

==== Always-On ====
* Kurzer Klick aktiviert Dauerbetrieb
* Wakeword erforderlich (Standard: „James“)
* Nach Aktivierung permanentes Mithören

==== Wakeword ====
* Standard: <code>james</code>
* Anpassbar im Script:
<syntaxhighlight lang="javascript">
const wakewords = ["james"];</syntaxhighlight>

Ablauf:
# „James“ sagen
# System antwortet „Ja?“
# Zeitfenster (~6 Sekunden) für Befehl
# Danach automatische Verarbeitung oder Abbruch

=== Installation ===

==== Datei kopieren ====
<syntaxhighlight lang="Perl">
{ Svn_GetFile('contrib/voicecontrol.js', 'www/pgm2/voicecontrol.js') }
</syntaxhighlight>

==== Einbindung ====
<syntaxhighlight lang="perl">
attr WEBphone JavaScripts www/pgm2/voicecontrol.js
</syntaxhighlight>

==== Hinweis (HTTP ohne HTTPS) ====
Chrome benötigt Freigabe für Mikrofon:

* <code>chrome://flags/#unsafely-treat-insecure-origin-as-secure</code>
* Eigene URL hinzufügen
* Auf <code>Enabled</code> setzen

== Weg 2️⃣: Hybrid-Lösung mit Browser + Atom Echo (voicecontrol_echo.js) ==

Diese Variante kombiniert Hardware und Software:

* Wakeword-Erkennung erfolgt auf dem ESP (Atom Echo s3r)
* Die eigentliche Sprachverarbeitung (Speech-to-Text) erfolgt im Browser

=== Funktionsweise ===

# Wakeword wird auf dem ESP erkannt
# FHEM erzeugt Event (z. B. <code>james_detected</code>)
# Browser empfängt Event via WebSocket
# Speech-to-Text startet im Browser
# Ergebnis wird an FHEM übertragen

=== Aktivierung ===

* Kurzer Klick auf Button aktiviert/deaktiviert System
* Baut WebSocket-Verbindung zu FHEM auf
* Kein Push-to-Talk-Modus

=== Installation ===

==== Datei kopieren ====

Die Datei voicecontrol_echo.js ist hier zu finden:
{{Link2Forum|Topic=144147|LinkText=VoiceControl Sprachsteuerung}}
und muss nach www/pgm2/voicecontrol_echo.js kopiert werden.

Die echo_s3r.yaml ist für den Atom Echo s3r. Die Konfuguration ist weiter unten beschrieben.

==== Einbindung ====
<syntaxhighlight lang="perl">
attr WEBtablet JavaScripts www/pgm2/voicecontrol_echo.js
</syntaxhighlight>

=== Konfiguration im Javascript ===

<syntaxhighlight lang="javascript">
const DEVICE = "atom_echos3r_9888e00f4280";
const TRIGGER = "james_detected";
const FHEM_IP = "192.168.1.76:8085";
</syntaxhighlight>

* <code>DEVICE</code> → FHEM-Device des ESP
* <code>TRIGGER</code> → Event bei Wakeword
* <code>FHEM_IP</code> → FHEM-Server

=== Konfiguration in der Yaml ===

Damit sich der ESP mit eurem MQTT-Server und WLAN verbindet, müssen folgende Stellen angepasst werden.

wifi:
ssid: "YOUR_SSID"
password: "YOUR_PW"
fast_connect: true

mqtt:
broker: 192.168.1.76
port: 1884
username: "YOUR_USERNAME"
password: "YOUR_PW"
topic_prefix: atom_echo

=== Wakeword (ESP / ESPHome) ===

Das Wakeword wird direkt auf dem ESP definiert:

* Umsetzung über ESPHome
* Eine große Auswahl an Wakewords sind hier zu finden:
https://github.com/TaterTotterson/microWakeWords

Hier ein Beispiel, wie das Wakeword definiert wird.

micro_wake_word:
id: mww
microphone: echo_mic
models:
- model: "https://github.com/TaterTotterson/microWakeWords/raw/main/microWakeWordsV2/james.json"
id: james_model
probability_cutoff: 0.6

=== Kommunikation ===

* WebSocket-Verbindung zu FHEM
* Lauscht auf Device-Events
* Automatischer Reconnect bei Abbruch

=== Ablauf nach Wakeword ===

# System sagt „Ja?“
# Browser startet SpeechRecognition
# Nutzer spricht Befehl
# Befehl wird verarbeitet
# Rückmeldung „Erledigt“

== Zentrale Auswertung (Logik) ==

Beide Wege schreiben in:

<code>global:STT</code>

Die Verarbeitung erfolgt zentral über ein <code>notify</code>.

=== Beispiel: notify ===

<syntaxhighlight lang="perl">
defmod n_VoiceControl notify global:STT:.* {\
# --- VORBEREITUNG ---\
my ($cleanEvent, $clientId) = $EVENT =~ /^(.*)\s\[(.*)\]$/;;\
$cleanEvent //= $EVENT;;\
$clientId //= "unknown";;\
\
# --- KONFIGURATION: Zentrales Mapping ---\
my %smartHomeDevices = (\
"esszimmer:licht|lampe|deckenlampe" => { dev => "Lampe01_Ez", label => "Licht Esszimmer", cmdOn => "on", cmdOff => "off" },\
"esszimmer:aquarium" => { dev => "Aquarium_Aktor", label => "Aquarium", cmdOn => "on", cmdOff => "off" },\
"küche" => { dev => "Deckenlampe_Kue", label => "Licht Küche", cmdOn => "on", cmdOff => "off" },\
"wohnzimmer" => { dev => "Lampe06_Dek", label => "Licht Wohnzimmer", cmdOn => "on", cmdOff => "off" },\
"fernseher|tv" => { dev => "VuPlus", label => "Fernseher", cmdOn => "on", cmdOff => "off" },\
"rechner|pc" => { dev => "PC_Aktor", label => "PC", cmdOn => "on", cmdOff => "off" },\
"garage|tor" => { dev => "Garagentor_Aktor", label => "Garagentor öffnen/schließen", cmdOn => "open", cmdOff => "close" },\
"kaffee" => { dev => "Kaffeemaschine", label => "Kaffeemaschine", cmdOn => "on", cmdOff => "off" },\
"roberto" => { dev => "MQTT2_valetudo_FlusteredUnequaledFish", label => "Lade Roberto", cmdOn => "charge" },\
"ambiente" => { dev => "LampeSzeneAlle", label => "Zentrales Licht", type => "dimmer", cmdOn => "on", cmdOff => "off" },\
"sauge|reinige|putze|staubsauger|roboter" => { dev => "MQTT2_valetudo_FlusteredUnequaledFish", label => "Staubsauger", type => "vacuum" }\
);;\
\
my %vacRooms = ("arbeitszimmer" => "Arbeitszimmer", "badezimmer" => "Badezimmer", "esszimmer" => "Esszimmer", "flur" => "Flur", "küche" => "Küche", "wohnzimmer" => "Wohnzimmer");;\
\
my $onRegEx = '\b(an|ein|einschalten|starte|aktivier|aktiviere|öffne|öffnen|auf|hoch|lade)\b';;\
my $offRegEx = '\b(aus|ausschalten|stop|stoppe|beende|deaktivier|deaktiviere|schließe|schließen|zu|runter)\b';;\
\
my @commands = split(/\s*(?:und|dann|,)\s*/, lc($cleanEvent));;\
\
# --- DER BEFEHLS-LOOP ---\
foreach my $cmd_part (@commands) {\
$cmd_part =~ s/^\s+|\s+$//g;;\
my $is_on = ($cmd_part =~ /$onRegEx/) ? 1 : 0;;\
my $is_off = ($cmd_part =~ /$offRegEx/) ? 1 : 0;;\
$cmd_part =~ s/\b(ich|brauche|mach|bitte|kannst du|würdest du|mal|doch|den|das|die|im|in der)\b//g;;\
\
# --- AMBILIGHT ---\
if ($cmd_part =~ /ambilight/) {\
system("sshpass -p '1431Fhem1982' ssh -o StrictHostKeyChecking=no root\@192.168.1.46 '/usr/share/hyperhdr/scripts/hyperhdr_toggle.sh'");;\
next;;\
}\
\
# --- GENERISCHE STEUERUNG ---\
my $match = 0;;\
# Sortierung stellt sicher, dass 'dimmer/vacuum' Vorrang haben\
foreach my $key (sort { ($smartHomeDevices{$b}{type}//"") cmp ($smartHomeDevices{$a}{type}//"") } keys %smartHomeDevices) {\
\
my ($main, $must) = split(/:/, $key);;\
\
# Prüfe Hauptwort\
if ($cmd_part =~ /\b($main)\b/i) {\
# Prüfe Pflichtwort falls vorhanden\
next if ($must && $cmd_part !~ /\b($must)\b/i);;\
\
my $d = $smartHomeDevices{$key};;\
\
# A) Staubsauger\
if (($d->{type} // "") eq "vacuum") {\
my @found = grep { $cmd_part =~ /\b$_\b/ } keys %vacRooms;;\
fhem(@found ? "set $d->{dev} clean_segment ".join(",", map { $vacRooms{$_} } @found) : "set $d->{dev} start");;\
}\
# B) Dimmer (Kompakt & korrigiert)\
elsif (($d->{type} // "") eq "dimmer") {\
$cmd_part =~ /(\d+)/ \
? fhem("set $d->{dev} brightness " . int(($1 > 100 ? 100 : $1) * 2.55)) \
: ($is_on || $is_off) && fhem("set $d->{dev} " . ($is_off ? "off" : "on"));;\
}\
# C) Standard An/Aus\
else {\
my $fhem_cmd = $is_off ? ($d->{cmdOff} // "off") : ($d->{cmdOn} // "on");;\
fhem("set $d->{dev} $fhem_cmd") if ($is_on || $is_off);;\
}\
\
$match = 1;; last;;\
}\
}\
next if $match;;\
\
# --- HILFE ---\
if ($cmd_part =~ /(hilfe|kommandos|übersicht)/) {\
my $h = '<div style="text-align:left;;min-width:250px;;font-family:sans-serif;;">Befehlsübersicht: ';;\
my %seen;;\
for my $k (sort keys %smartHomeDevices) {\
my $d = $smartHomeDevices{$k};;\
next if $seen{$d->{label}}++;; \
my $suffix = ($d->{cmdOn} && $d->{cmdOff} && $d->{label} !~ /(an\/aus|öffnen\/schließen)/i) ? " (an/aus)" : "";;\
$suffix = " [0-100%]" if ($d->{type} // "") eq "dimmer";;\
$h .= "• $d->{label}$suffix ";;\
}\
$h .= ' Staubsauger Räume • '.join(", ", map { ucfirst($_) } sort keys %vacRooms).' </div>';;\
$h =~ s/'/\\"/g;;\
my $js = "if((document.querySelector('input[name=\"fw_id\"]')||{}).value==='$clientId'){FW_okDialog('$h')}";;\
FW_directNotify("#FHEMWEB:$_", $js, "") for devspec2array("TYPE=FHEMWEB");;\
}\
}\
}
</syntaxhighlight>

== Unterschiede der Wege ==

{| class="wikitable"
! Feature
! Browser
! Hybrid (Atom Echo S3)
|-
| Wakeword
| Browser
| ESP (Hardware)
|-
| Push-to-Talk
| Ja
| Nein
|-
| Always-On
| Ja (bedingt)
| Ja
|-
| Architektur
| Software
| Software + Hardware
|-
| Stabilität
| Sehr stabil
| Sehr stabil (Wakeword extern)
|}

== FireOS mit Fully Browser (Plus) ==

Damit die Spracherkennung funktioniert:

* Apps installieren:
Google
Speech Recognition & Synthesis
* FireOS:
„Tastatur und Sprache“ → „Text-to-Speech“
* Fully Browser:
<code>Enable JavaScriptInterface (PLUS)</code> aktivieren

[[Kategorie:Code Snippets]]
[[Kategorie:FHEM Frontends]]

FHEMWEB/VoiceControl: Web-STT & Hardware-Wakeword

2026-04-03T09:00:47Z

Schwatter:

[[Datei:Voicecontrol.png|mini]]

== VoiceControl – Sprachsteuerung via Browser und Atom Echo s3r ==

Diese Lösung ermöglicht eine flexible Sprachsteuerung für [[FHEM]]. Sprache wird in Text (Speech-to-Text) umgewandelt und als Reading <code>STT</code> im Device <code>global</code> bereitgestellt. Dieses Reading kann anschließend zentral (z. B. über <code>notify</code> oder <code>DOIF</code>) ausgewertet werden.

'''Unterstützt werden nur Chromium-basierte Browser (Chrome, Edge, Fully Browser). Firefox hat leider kein Backend.'''

Es gibt zwei unterschiedliche Wege zur Spracherfassung:

* Weg 1️⃣ (Software): Browser-basierte Komplettlösung
* Weg 2️⃣ (Hybrid): Hardware-Wakeword + Browser-Spracherkennung

=== Hilfe ===
* Forenthread zum {{Link2Forum|Topic=144147|LinkText=VoiceControl Sprachsteuerung}}
Dort befinden sich in Post #1 auch alle benötigten Dateien.

=== Funktionen ===

==== Grundprinzip ====
* Sprache → Speech-to-Text
* Ergebnis → Reading <code>STT</code> im Device <code>global</code>
* Zentrale Logik verarbeitet Befehle

==== Betriebsarten ====
* Push-to-Talk (nur Browser)
* Always-On mit Wakeword
* Hardware-Wakeword (Hybrid)

==== Rückmeldungen ====
* Sprachausgabe (TTS)
* Visuelle Bubble im Browser
* Optional gezielte Rückmeldung per Client-ID

== Weg 1️⃣: Browser-Lösung (voicecontrol.js) ==

Das Script nutzt die Google Web Speech API. Unterstützt werden Chromium-basierte Browser (Chrome, Edge, Fully Browser). Firefox wird aktuell nicht unterstützt.

=== Bedienung ===

==== Push-to-Talk ====
* Button gedrückt halten (~450 ms)
* Direkt sprechen (kein Wakeword nötig)
* Befehl wird sofort verarbeitet

==== Always-On ====
* Kurzer Klick aktiviert Dauerbetrieb
* Wakeword erforderlich (Standard: „James“)
* Nach Aktivierung permanentes Mithören

==== Wakeword ====
* Standard: <code>james</code>
* Anpassbar im Script:
<syntaxhighlight lang="javascript">
const wakewords = ["james"];</syntaxhighlight>

Ablauf:
# „James“ sagen
# System antwortet „Ja?“
# Zeitfenster (~6 Sekunden) für Befehl
# Danach automatische Verarbeitung oder Abbruch

=== Installation ===

==== Datei kopieren ====
<syntaxhighlight lang="Perl">
{ Svn_GetFile('contrib/voicecontrol.js', 'www/pgm2/voicecontrol.js') }
</syntaxhighlight>

==== Einbindung ====
<syntaxhighlight lang="perl">
attr WEBphone JavaScripts www/pgm2/voicecontrol.js
</syntaxhighlight>

==== Hinweis (HTTP ohne HTTPS) ====
Chrome benötigt Freigabe für Mikrofon:

* <code>chrome://flags/#unsafely-treat-insecure-origin-as-secure</code>
* Eigene URL hinzufügen
* Auf <code>Enabled</code> setzen

== Weg 2️⃣: Hybrid-Lösung mit Browser + Atom Echo (voicecontrol_echo.js) ==

Diese Variante kombiniert Hardware und Software:

* Wakeword-Erkennung erfolgt auf dem ESP (Atom Echo s3r)
* Die eigentliche Sprachverarbeitung (Speech-to-Text) erfolgt im Browser

=== Funktionsweise ===

# Wakeword wird auf dem ESP erkannt
# FHEM erzeugt Event (z. B. <code>james_detected</code>)
# Browser empfängt Event via WebSocket
# Speech-to-Text startet im Browser
# Ergebnis wird an FHEM übertragen

=== Aktivierung ===

* Kurzer Klick auf Button aktiviert/deaktiviert System
* Baut WebSocket-Verbindung zu FHEM auf
* Kein Push-to-Talk-Modus

=== Installation ===

==== Datei kopieren ====

Die Datei voicecontrol_echo.js ist hier zu finden:
{{Link2Forum|Topic=144147|LinkText=VoiceControl Sprachsteuerung}}
und muss nach www/pgm2/voicecontrol_echo.js kopiert werden.

Die echo_s3r.yaml ist für den Atom Echo s3r. Die Konfuguration ist weiter unten beschrieben.

==== Einbindung ====
<syntaxhighlight lang="perl">
attr WEBtablet JavaScripts www/pgm2/voicecontrol_echo.js
</syntaxhighlight>

=== Konfiguration im Javascript ===

<syntaxhighlight lang="javascript">
const DEVICE = "atom_echos3r_9888e00f4280";
const TRIGGER = "james_detected";
const FHEM_IP = "192.168.1.76:8085";
</syntaxhighlight>

* <code>DEVICE</code> → FHEM-Device des ESP
* <code>TRIGGER</code> → Event bei Wakeword
* <code>FHEM_IP</code> → FHEM-Server

=== Konfiguration in der Yaml ===

Damit sich der ESP mit eurem MQTT-Server und WLAN verbindet, müssen folgende Stellen angepasst werden.

wifi:
ssid: "YOUR_SSID"
password: "YOUR_PW"
fast_connect: true

mqtt:
broker: 192.168.1.76
port: 1884
username: "YOUR_USERNAME"
password: "YOUR_PW"
topic_prefix: atom_echo

=== Wakeword (ESP / ESPHome) ===

Das Wakeword wird direkt auf dem ESP definiert:

* Umsetzung über ESPHome
* Eine große Auswahl an Wakewords sind hier zu finden:
https://github.com/TaterTotterson/microWakeWords

Hier ein Beispiel, wie das Wakeword definiert wird.

micro_wake_word:
id: mww
microphone: echo_mic
models:
- model: "https://github.com/TaterTotterson/microWakeWords/raw/main/microWakeWordsV2/james.json"
id: james_model
probability_cutoff: 0.6

=== Kommunikation ===

* WebSocket-Verbindung zu FHEM
* Lauscht auf Device-Events
* Automatischer Reconnect bei Abbruch

=== Ablauf nach Wakeword ===

# System sagt „Ja?“
# Browser startet SpeechRecognition
# Nutzer spricht Befehl
# Befehl wird verarbeitet
# Rückmeldung „Erledigt“

== Zentrale Auswertung (Logik) ==

Beide Wege schreiben in:

<code>global:STT</code>

Die Verarbeitung erfolgt zentral über ein <code>notify</code>.

=== Beispiel: notify ===

<syntaxhighlight lang="perl">
defmod n_VoiceControl notify global:STT:.* {\
# 1. VORBEREITUNG\
my ($cleanEvent, $clientId) = $EVENT =~ /^(.*)\s\[(.*)\]$/;;\
$cleanEvent //= $EVENT;;\
$clientId //= "unknown";;\
\
my %lightRooms = (\
"esszimmer" => { dev => "Lampe01_Ez", label => "Licht Esszimmer" },\
"küche" => { dev => "Deckenlampe_Kue", label => "Licht Küche" },\
"wohnzimmer" => { dev => "Lampe06_Dek", label => "Licht Wohnzimmer" }\
);;\
\
my %vacRooms = (\
"arbeitszimmer" => "Arbeitszimmer",\
"badezimmer" => "Badezimmer",\
"esszimmer" => "Esszimmer",\
"flur" => "Flur",\
"küche" => "Küche",\
"wohnzimmer" => "Wohnzimmer"\
);;\
\
my $onRegEx = '\b(an|ein|einschalten|starte|aktivier|aktiviere)\b';;\
my $offRegEx = '\b(aus|ausschalten|stop|stoppe|beende|deaktivier|deaktiviere)\b';;\
\
my @commands = split(/\s*(?:und|dann|,)\s*/, lc($cleanEvent));;\
\
# 2. DER BEFEHLS-LOOP\
foreach my $cmd_part (@commands) {\
\
$cmd_part =~ s/^\s+|\s+$//g;;\
\
my $is_on = ($cmd_part =~ /$onRegEx/) ? 1 : 0;;\
my $is_off = ($cmd_part =~ /$offRegEx/) ? 1 : 0;;\
\
$cmd_part =~ s/\b(ich|brauche|mach|bitte|kannst du|würdest du|mal|doch|den|das|die|im|in der)\b//g;;\
\
# --- INTENT: STAUBSAUGER ---\
if ($cmd_part =~ /(reinige|sauge|putze|staubsauger|roboter)/) {\
my @found = grep { $cmd_part =~ /\b$_\b/ } keys %vacRooms;;\
if (@found) {\
fhem("set MQTT2_valetudo_FlusteredUnequaledFish clean_segment " . join(",", map { $vacRooms{$_} } @found));;\
} else {\
fhem("set MQTT2_valetudo_FlusteredUnequaledFish start");;\
}\
next;;\
} elsif ($cmd_part =~ /(lade|aufladen|dock|station|home)/) {\
fhem("set MQTT2_valetudo_FlusteredUnequaledFish charge");;\
next;;\
}\
\
# --- INTENT: FERNSEHER ---\
if ($cmd_part =~ /(fernseher|tv|vuplus)/) {\
fhem("set VuPlus " . ($is_off ? "off" : "on"));;\
next;;\
}\
\
# --- INTENT: AMBIENTE ---\
if ($cmd_part =~ /ambiente/) {\
if ($cmd_part =~ /(\d+)/) {\
my $b = ($1 > 255 ? 255 : ($1 < 1 ? 1 : $1));;\
fhem("set LampeSzeneAlle brightness $b");;\
} else {\
fhem("set LampeSzeneAlle " . ($is_off ? "off" : "on"));;\
}\
next;;\
}\
\
# --- INTENT: AMBILIGHT ---\
if ($cmd_part =~ /ambilight/) {\
system("sshpass -p 'GEHEIMESPASSWORT' ssh -o StrictHostKeyChecking=no root\@192.168.1.46 '/usr/share/hyperhdr/scripts/hyperhdr_toggle.sh'");;\
next;;\
}\
\
# --- INTENT: LICHT ---\
my ($lightRoom) = grep { $cmd_part =~ /\b$_\b/ } keys %lightRooms;;\
if ($lightRoom || $cmd_part =~ /(licht|lampe)/) {\
my $dev = $lightRooms{$lightRoom}{dev} // "LampeSzeneAlle";;\
fhem("set $dev " . ($is_off ? "off" : "on")) if ($is_on || $is_off);;\
next;;\
}\
\
# --- HILFE (DYNAMISCH) ---\
if ($cmd_part =~ /(hilfe|kommandos|übersicht)/) {\
\
my $h = '<div style="text-align:left;;min-width:250px;;font-family:sans-serif;;">';;\
$h .= 'Befehlsübersicht: ';;\
\
# Licht\
$h .= 'Licht ';;\
for my $k (sort keys %lightRooms) {\
$h .= "• ".$lightRooms{$k}{label}." an/aus ";;\
}\
\
# Staubsauger\
$h .= ' Staubsauger ';;\
$h .= "• Sauge [Raum] ";;\
$h .= " Räume: ".join(", ", map { ucfirst($_) } sort keys %vacRooms)." ";;\
$h .= "• Lade Roberto ";;\
\
# Sonstiges\
$h .= ' Sonstiges ';;\
$h .= "• Fernseher an/aus ";;\
$h .= "• Ambiente [an|aus|1-255] ";;\
$h .= "• Ambilight ";;\
\
$h .= '</div>';;\
\
$h =~ s/'/\\"/g;;\
\
my $js = "if((document.querySelector('input[name=\"fw_id\"]')||{}).value==='$clientId'){FW_okDialog('$h')}";;\
\
FW_directNotify("#FHEMWEB:$_", $js, "")\
for devspec2array("TYPE=FHEMWEB");;\
\
next;;\
}\
}\
}
</syntaxhighlight>

== Unterschiede der Wege ==

{| class="wikitable"
! Feature
! Browser
! Hybrid (Atom Echo S3)
|-
| Wakeword
| Browser
| ESP (Hardware)
|-
| Push-to-Talk
| Ja
| Nein
|-
| Always-On
| Ja (bedingt)
| Ja
|-
| Architektur
| Software
| Software + Hardware
|-
| Stabilität
| Sehr stabil
| Sehr stabil (Wakeword extern)
|}

== FireOS mit Fully Browser (Plus) ==

Damit die Spracherkennung funktioniert:

* Apps installieren:
Google
Speech Recognition & Synthesis
* FireOS:
„Tastatur und Sprache“ → „Text-to-Speech“
* Fully Browser:
<code>Enable JavaScriptInterface (PLUS)</code> aktivieren

[[Kategorie:Code Snippets]]
[[Kategorie:FHEM Frontends]]

FHEMWEB/VoiceControl: Web-STT & Hardware-Wakeword

2026-04-03T08:49:43Z

Schwatter:

[[Datei:Voicecontrol.png|mini]]

== VoiceControl – Sprachsteuerung via Browser und Atom Echo s3r ==

Diese Lösung ermöglicht eine flexible Sprachsteuerung für [[FHEM]]. Sprache wird in Text (Speech-to-Text) umgewandelt und als Reading <code>STT</code> im Device <code>global</code> bereitgestellt. Dieses Reading kann anschließend zentral (z. B. über <code>notify</code> oder <code>DOIF</code>) ausgewertet werden.

'''Unterstützt werden nur Chromium-basierte Browser (Chrome, Edge, Fully Browser). Firefox hat leider kein Backend.'''

Es gibt zwei unterschiedliche Wege zur Spracherfassung:

* Weg 1️⃣ (Software): Browser-basierte Komplettlösung
* Weg 2️⃣ (Hybrid): Hardware-Wakeword + Browser-Spracherkennung

=== Hilfe ===
* Forenthread zum {{Link2Forum|Topic=144147|LinkText=VoiceControl Sprachsteuerung}}
Dort befinden sich in Post #1 auch alle benötigten Dateien.

=== Funktionen ===

==== Grundprinzip ====
* Sprache → Speech-to-Text
* Ergebnis → Reading <code>STT</code> im Device <code>global</code>
* Zentrale Logik verarbeitet Befehle

==== Betriebsarten ====
* Push-to-Talk (nur Browser)
* Always-On mit Wakeword
* Hardware-Wakeword (Hybrid)

==== Rückmeldungen ====
* Sprachausgabe (TTS)
* Visuelle Bubble im Browser
* Optional gezielte Rückmeldung per Client-ID

== Weg 1️⃣: Browser-Lösung (voicecontrol.js) ==

Das Script nutzt die Google Web Speech API. Unterstützt werden Chromium-basierte Browser (Chrome, Edge, Fully Browser). Firefox wird aktuell nicht unterstützt.

=== Bedienung ===

==== Push-to-Talk ====
* Button gedrückt halten (~450 ms)
* Direkt sprechen (kein Wakeword nötig)
* Befehl wird sofort verarbeitet

==== Always-On ====
* Kurzer Klick aktiviert Dauerbetrieb
* Wakeword erforderlich (Standard: „James“)
* Nach Aktivierung permanentes Mithören

==== Wakeword ====
* Standard: <code>james</code>
* Anpassbar im Script:
<syntaxhighlight lang="javascript">
const wakewords = ["james"];</syntaxhighlight>

Ablauf:
# „James“ sagen
# System antwortet „Ja?“
# Zeitfenster (~6 Sekunden) für Befehl
# Danach automatische Verarbeitung oder Abbruch

=== Installation ===

==== Datei kopieren ====
<syntaxhighlight lang="Perl">
{ Svn_GetFile('contrib/voicecontrol.js', 'www/pgm2/voicecontrol.js') }
</syntaxhighlight>

==== Einbindung ====
<syntaxhighlight lang="perl">
attr WEBphone JavaScripts pgm2/voicecontrol.js
</syntaxhighlight>

==== Hinweis (HTTP ohne HTTPS) ====
Chrome benötigt Freigabe für Mikrofon:

* <code>chrome://flags/#unsafely-treat-insecure-origin-as-secure</code>
* Eigene URL hinzufügen
* Auf <code>Enabled</code> setzen

== Weg 2️⃣: Hybrid-Lösung mit Browser + Atom Echo (voicecontrol_echo.js) ==

Diese Variante kombiniert Hardware und Software:

* Wakeword-Erkennung erfolgt auf dem ESP (Atom Echo s3r)
* Die eigentliche Sprachverarbeitung (Speech-to-Text) erfolgt im Browser

=== Funktionsweise ===

# Wakeword wird auf dem ESP erkannt
# FHEM erzeugt Event (z. B. <code>james_detected</code>)
# Browser empfängt Event via WebSocket
# Speech-to-Text startet im Browser
# Ergebnis wird an FHEM übertragen

=== Aktivierung ===

* Kurzer Klick auf Button aktiviert/deaktiviert System
* Baut WebSocket-Verbindung zu FHEM auf
* Kein Push-to-Talk-Modus

=== Installation ===

==== Datei kopieren ====

Die Datei voicecontrol_echo.js ist hier zu finden:
{{Link2Forum|Topic=144147|LinkText=VoiceControl Sprachsteuerung}}
und muss nach www/pgm2/voicecontrol_echo.js kopiert werden.

Die echo_s3r.yaml ist für den Atom Echo s3r. Die Konfuguration ist weiter unten beschrieben.

==== Einbindung ====
<syntaxhighlight lang="perl">
attr WEBtablet JavaScripts pgm2/voicecontrol_echo.js
</syntaxhighlight>

=== Konfiguration im Javascript ===

<syntaxhighlight lang="javascript">
const DEVICE = "atom_echos3r_9888e00f4280";
const TRIGGER = "james_detected";
const FHEM_IP = "192.168.1.76:8085";
</syntaxhighlight>

* <code>DEVICE</code> → FHEM-Device des ESP
* <code>TRIGGER</code> → Event bei Wakeword
* <code>FHEM_IP</code> → FHEM-Server

=== Konfiguration in der Yaml ===

Damit sich der ESP mit eurem MQTT-Server und WLAN verbindet, müssen folgende Stellen angepasst werden.

wifi:
ssid: "YOUR_SSID"
password: "YOUR_PW"
fast_connect: true

mqtt:
broker: 192.168.1.76
port: 1884
username: "YOUR_USERNAME"
password: "YOUR_PW"
topic_prefix: atom_echo

=== Wakeword (ESP / ESPHome) ===

Das Wakeword wird direkt auf dem ESP definiert:

* Umsetzung über ESPHome
* Eine große Auswahl an Wakewords sind hier zu finden:
https://github.com/TaterTotterson/microWakeWords

Hier ein Beispiel, wie das Wakeword definiert wird.

micro_wake_word:
id: mww
microphone: echo_mic
models:
- model: "https://github.com/TaterTotterson/microWakeWords/raw/main/microWakeWordsV2/james.json"
id: james_model
probability_cutoff: 0.6

=== Kommunikation ===

* WebSocket-Verbindung zu FHEM
* Lauscht auf Device-Events
* Automatischer Reconnect bei Abbruch

=== Ablauf nach Wakeword ===

# System sagt „Ja?“
# Browser startet SpeechRecognition
# Nutzer spricht Befehl
# Befehl wird verarbeitet
# Rückmeldung „Erledigt“

== Zentrale Auswertung (Logik) ==

Beide Wege schreiben in:

<code>global:STT</code>

Die Verarbeitung erfolgt zentral über ein <code>notify</code>.

=== Beispiel: notify ===

<syntaxhighlight lang="perl">
defmod n_VoiceControl notify global:STT:.* {\
# 1. VORBEREITUNG\
my ($cleanEvent, $clientId) = $EVENT =~ /^(.*)\s\[(.*)\]$/;;\
$cleanEvent //= $EVENT;;\
$clientId //= "unknown";;\
\
my %lightRooms = (\
"esszimmer" => { dev => "Lampe01_Ez", label => "Licht Esszimmer" },\
"küche" => { dev => "Deckenlampe_Kue", label => "Licht Küche" },\
"wohnzimmer" => { dev => "Lampe06_Dek", label => "Licht Wohnzimmer" }\
);;\
\
my %vacRooms = (\
"arbeitszimmer" => "Arbeitszimmer",\
"badezimmer" => "Badezimmer",\
"esszimmer" => "Esszimmer",\
"flur" => "Flur",\
"küche" => "Küche",\
"wohnzimmer" => "Wohnzimmer"\
);;\
\
my $onRegEx = '\b(an|ein|einschalten|starte|aktivier|aktiviere)\b';;\
my $offRegEx = '\b(aus|ausschalten|stop|stoppe|beende|deaktivier|deaktiviere)\b';;\
\
my @commands = split(/\s*(?:und|dann|,)\s*/, lc($cleanEvent));;\
\
# 2. DER BEFEHLS-LOOP\
foreach my $cmd_part (@commands) {\
\
$cmd_part =~ s/^\s+|\s+$//g;;\
\
my $is_on = ($cmd_part =~ /$onRegEx/) ? 1 : 0;;\
my $is_off = ($cmd_part =~ /$offRegEx/) ? 1 : 0;;\
\
$cmd_part =~ s/\b(ich|brauche|mach|bitte|kannst du|würdest du|mal|doch|den|das|die|im|in der)\b//g;;\
\
# --- INTENT: STAUBSAUGER ---\
if ($cmd_part =~ /(reinige|sauge|putze|staubsauger|roboter)/) {\
my @found = grep { $cmd_part =~ /\b$_\b/ } keys %vacRooms;;\
if (@found) {\
fhem("set MQTT2_valetudo_FlusteredUnequaledFish clean_segment " . join(",", map { $vacRooms{$_} } @found));;\
} else {\
fhem("set MQTT2_valetudo_FlusteredUnequaledFish start");;\
}\
next;;\
} elsif ($cmd_part =~ /(lade|aufladen|dock|station|home)/) {\
fhem("set MQTT2_valetudo_FlusteredUnequaledFish charge");;\
next;;\
}\
\
# --- INTENT: FERNSEHER ---\
if ($cmd_part =~ /(fernseher|tv|vuplus)/) {\
fhem("set VuPlus " . ($is_off ? "off" : "on"));;\
next;;\
}\
\
# --- INTENT: AMBIENTE ---\
if ($cmd_part =~ /ambiente/) {\
if ($cmd_part =~ /(\d+)/) {\
my $b = ($1 > 255 ? 255 : ($1 < 1 ? 1 : $1));;\
fhem("set LampeSzeneAlle brightness $b");;\
} else {\
fhem("set LampeSzeneAlle " . ($is_off ? "off" : "on"));;\
}\
next;;\
}\
\
# --- INTENT: AMBILIGHT ---\
if ($cmd_part =~ /ambilight/) {\
system("sshpass -p 'GEHEIMESPASSWORT' ssh -o StrictHostKeyChecking=no root\@192.168.1.46 '/usr/share/hyperhdr/scripts/hyperhdr_toggle.sh'");;\
next;;\
}\
\
# --- INTENT: LICHT ---\
my ($lightRoom) = grep { $cmd_part =~ /\b$_\b/ } keys %lightRooms;;\
if ($lightRoom || $cmd_part =~ /(licht|lampe)/) {\
my $dev = $lightRooms{$lightRoom}{dev} // "LampeSzeneAlle";;\
fhem("set $dev " . ($is_off ? "off" : "on")) if ($is_on || $is_off);;\
next;;\
}\
\
# --- HILFE (DYNAMISCH) ---\
if ($cmd_part =~ /(hilfe|kommandos|übersicht)/) {\
\
my $h = '<div style="text-align:left;;min-width:250px;;font-family:sans-serif;;">';;\
$h .= 'Befehlsübersicht: ';;\
\
# Licht\
$h .= 'Licht ';;\
for my $k (sort keys %lightRooms) {\
$h .= "• ".$lightRooms{$k}{label}." an/aus ";;\
}\
\
# Staubsauger\
$h .= ' Staubsauger ';;\
$h .= "• Sauge [Raum] ";;\
$h .= " Räume: ".join(", ", map { ucfirst($_) } sort keys %vacRooms)." ";;\
$h .= "• Lade Roberto ";;\
\
# Sonstiges\
$h .= ' Sonstiges ';;\
$h .= "• Fernseher an/aus ";;\
$h .= "• Ambiente [an|aus|1-255] ";;\
$h .= "• Ambilight ";;\
\
$h .= '</div>';;\
\
$h =~ s/'/\\"/g;;\
\
my $js = "if((document.querySelector('input[name=\"fw_id\"]')||{}).value==='$clientId'){FW_okDialog('$h')}";;\
\
FW_directNotify("#FHEMWEB:$_", $js, "")\
for devspec2array("TYPE=FHEMWEB");;\
\
next;;\
}\
}\
}
</syntaxhighlight>

== Unterschiede der Wege ==

{| class="wikitable"
! Feature
! Browser
! Hybrid (Atom Echo S3)
|-
| Wakeword
| Browser
| ESP (Hardware)
|-
| Push-to-Talk
| Ja
| Nein
|-
| Always-On
| Ja (bedingt)
| Ja
|-
| Architektur
| Software
| Software + Hardware
|-
| Stabilität
| Sehr stabil
| Sehr stabil (Wakeword extern)
|}

== FireOS mit Fully Browser (Plus) ==

Damit die Spracherkennung funktioniert:

* Apps installieren:
Google
Speech Recognition & Synthesis
* FireOS:
„Tastatur und Sprache“ → „Text-to-Speech“
* Fully Browser:
<code>Enable JavaScriptInterface (PLUS)</code> aktivieren

[[Kategorie:Code Snippets]]
[[Kategorie:FHEM Frontends]]

FHEMWEB/VoiceControl: Web-STT & Hardware-Wakeword

2026-04-03T08:38:08Z

Schwatter:

[[Datei:Voicecontrol.png|mini]]

== VoiceControl – Sprachsteuerung via Browser und Atom Echo s3r ==

Diese Lösung ermöglicht eine flexible Sprachsteuerung für [[FHEM]]. Sprache wird in Text (Speech-to-Text) umgewandelt und als Reading <code>STT</code> im Device <code>global</code> bereitgestellt. Dieses Reading kann anschließend zentral (z. B. über <code>notify</code> oder <code>DOIF</code>) ausgewertet werden.

'''Unterstützt werden nur Chromium-basierte Browser (Chrome, Edge, Fully Browser). Firefox hat leider kein Backend.'''

Es gibt zwei unterschiedliche Wege zur Spracherfassung:

* Weg 1️⃣ (Software): Browser-basierte Komplettlösung
* Weg 2️⃣ (Hybrid): Hardware-Wakeword + Browser-Spracherkennung

=== Hilfe ===
* Forenthread zum {{Link2Forum|Topic=144147|LinkText=VoiceControl Sprachsteuerung}}
Dort befinden sich in Post #1 auch alle benötigten Dateien.

=== Funktionen ===

==== Grundprinzip ====
* Sprache → Speech-to-Text
* Ergebnis → Reading <code>STT</code> im Device <code>global</code>
* Zentrale Logik verarbeitet Befehle

==== Betriebsarten ====
* Push-to-Talk (nur Browser)
* Always-On mit Wakeword
* Hardware-Wakeword (Hybrid)

==== Rückmeldungen ====
* Sprachausgabe (TTS)
* Visuelle Bubble im Browser
* Optional gezielte Rückmeldung per Client-ID

== Weg 1️⃣: Browser-Lösung (voicecontrol.js) ==

Das Script nutzt die Google Web Speech API. Unterstützt werden Chromium-basierte Browser (Chrome, Edge, Fully Browser). Firefox wird aktuell nicht unterstützt.

=== Bedienung ===

==== Push-to-Talk ====
* Button gedrückt halten (~450 ms)
* Direkt sprechen (kein Wakeword nötig)
* Befehl wird sofort verarbeitet

==== Always-On ====
* Kurzer Klick aktiviert Dauerbetrieb
* Wakeword erforderlich (Standard: „James“)
* Nach Aktivierung permanentes Mithören

==== Wakeword ====
* Standard: <code>james</code>
* Anpassbar im Script:
<syntaxhighlight lang="javascript">
const wakewords = ["james"];</syntaxhighlight>

Ablauf:
# „James“ sagen
# System antwortet „Ja?“
# Zeitfenster (~6 Sekunden) für Befehl
# Danach automatische Verarbeitung oder Abbruch

=== Installation ===

==== Datei kopieren ====
<syntaxhighlight lang="Perl">
{ Svn_GetFile('contrib/voicecontrol.js', 'www/pgm2/voicecontrol.js') }
</syntaxhighlight>

==== Einbindung ====
<syntaxhighlight lang="perl">
attr WEBphone JavaScripts pgm2/voicecontrol.js
</syntaxhighlight>

==== Hinweis (HTTP ohne HTTPS) ====
Chrome benötigt Freigabe für Mikrofon:

* <code>chrome://flags/#unsafely-treat-insecure-origin-as-secure</code>
* Eigene URL hinzufügen
* Auf <code>Enabled</code> setzen

== Weg 2️⃣: Hybrid-Lösung mit Browser + Atom Echo (voicecontrol_echo.js) ==

Diese Variante kombiniert Hardware und Software:

* Wakeword-Erkennung erfolgt auf dem ESP (Atom Echo s3r)
* Die eigentliche Sprachverarbeitung (Speech-to-Text) erfolgt im Browser

=== Funktionsweise ===

# Wakeword wird auf dem ESP erkannt
# FHEM erzeugt Event (z. B. <code>james_detected</code>)
# Browser empfängt Event via WebSocket
# Speech-to-Text startet im Browser
# Ergebnis wird an FHEM übertragen

=== Aktivierung ===

* Kurzer Klick auf Button aktiviert/deaktiviert System
* Baut WebSocket-Verbindung zu FHEM auf
* Kein Push-to-Talk-Modus

=== Konfiguration im Javascript ===

<syntaxhighlight lang="javascript">
const DEVICE = "atom_echos3r_9888e00f4280";
const TRIGGER = "james_detected";
const FHEM_IP = "192.168.1.76:8085";
</syntaxhighlight>

* <code>DEVICE</code> → FHEM-Device des ESP
* <code>TRIGGER</code> → Event bei Wakeword
* <code>FHEM_IP</code> → FHEM-Server

=== Konfiguration in der Yaml ===

Damit sich der ESP mit eurem MQTT-Server und WLAN verbindet, müssen folgende Stellen angepasst werden.

wifi:
ssid: "YOUR_SSID"
password: "YOUR_PW"
fast_connect: true

mqtt:
broker: 192.168.1.76
port: 1884
username: "YOUR_USERNAME"
password: "YOUR_PW"
topic_prefix: atom_echo

=== Wakeword (ESP / ESPHome) ===

Das Wakeword wird direkt auf dem ESP definiert:

* Umsetzung über ESPHome
* Eine große Auswahl an Wakewords sind hier zu finden:
https://github.com/TaterTotterson/microWakeWords

Hier ein Beispiel, wie das Wakeword definiert wird.

micro_wake_word:
id: mww
microphone: echo_mic
models:
- model: "https://github.com/TaterTotterson/microWakeWords/raw/main/microWakeWordsV2/james.json"
id: james_model
probability_cutoff: 0.6

=== Kommunikation ===

* WebSocket-Verbindung zu FHEM
* Lauscht auf Device-Events
* Automatischer Reconnect bei Abbruch

=== Ablauf nach Wakeword ===

# System sagt „Ja?“
# Browser startet SpeechRecognition
# Nutzer spricht Befehl
# Befehl wird verarbeitet
# Rückmeldung „Erledigt“

=== Installation ===

siehe oben wie unter Punkt 1.

== Zentrale Auswertung (Logik) ==

Beide Wege schreiben in:

<code>global:STT</code>

Die Verarbeitung erfolgt zentral über ein <code>notify</code>.

=== Beispiel: notify ===

<syntaxhighlight lang="perl">
defmod n_VoiceControl notify global:STT:.* {\
# 1. VORBEREITUNG\
my ($cleanEvent, $clientId) = $EVENT =~ /^(.*)\s\[(.*)\]$/;;\
$cleanEvent //= $EVENT;;\
$clientId //= "unknown";;\
\
my %lightRooms = (\
"esszimmer" => { dev => "Lampe01_Ez", label => "Licht Esszimmer" },\
"küche" => { dev => "Deckenlampe_Kue", label => "Licht Küche" },\
"wohnzimmer" => { dev => "Lampe06_Dek", label => "Licht Wohnzimmer" }\
);;\
\
my %vacRooms = (\
"arbeitszimmer" => "Arbeitszimmer",\
"badezimmer" => "Badezimmer",\
"esszimmer" => "Esszimmer",\
"flur" => "Flur",\
"küche" => "Küche",\
"wohnzimmer" => "Wohnzimmer"\
);;\
\
my $onRegEx = '\b(an|ein|einschalten|starte|aktivier|aktiviere)\b';;\
my $offRegEx = '\b(aus|ausschalten|stop|stoppe|beende|deaktivier|deaktiviere)\b';;\
\
my @commands = split(/\s*(?:und|dann|,)\s*/, lc($cleanEvent));;\
\
# 2. DER BEFEHLS-LOOP\
foreach my $cmd_part (@commands) {\
\
$cmd_part =~ s/^\s+|\s+$//g;;\
\
my $is_on = ($cmd_part =~ /$onRegEx/) ? 1 : 0;;\
my $is_off = ($cmd_part =~ /$offRegEx/) ? 1 : 0;;\
\
$cmd_part =~ s/\b(ich|brauche|mach|bitte|kannst du|würdest du|mal|doch|den|das|die|im|in der)\b//g;;\
\
# --- INTENT: STAUBSAUGER ---\
if ($cmd_part =~ /(reinige|sauge|putze|staubsauger|roboter)/) {\
my @found = grep { $cmd_part =~ /\b$_\b/ } keys %vacRooms;;\
if (@found) {\
fhem("set MQTT2_valetudo_FlusteredUnequaledFish clean_segment " . join(",", map { $vacRooms{$_} } @found));;\
} else {\
fhem("set MQTT2_valetudo_FlusteredUnequaledFish start");;\
}\
next;;\
} elsif ($cmd_part =~ /(lade|aufladen|dock|station|home)/) {\
fhem("set MQTT2_valetudo_FlusteredUnequaledFish charge");;\
next;;\
}\
\
# --- INTENT: FERNSEHER ---\
if ($cmd_part =~ /(fernseher|tv|vuplus)/) {\
fhem("set VuPlus " . ($is_off ? "off" : "on"));;\
next;;\
}\
\
# --- INTENT: AMBIENTE ---\
if ($cmd_part =~ /ambiente/) {\
if ($cmd_part =~ /(\d+)/) {\
my $b = ($1 > 255 ? 255 : ($1 < 1 ? 1 : $1));;\
fhem("set LampeSzeneAlle brightness $b");;\
} else {\
fhem("set LampeSzeneAlle " . ($is_off ? "off" : "on"));;\
}\
next;;\
}\
\
# --- INTENT: AMBILIGHT ---\
if ($cmd_part =~ /ambilight/) {\
system("sshpass -p 'GEHEIMESPASSWORT' ssh -o StrictHostKeyChecking=no root\@192.168.1.46 '/usr/share/hyperhdr/scripts/hyperhdr_toggle.sh'");;\
next;;\
}\
\
# --- INTENT: LICHT ---\
my ($lightRoom) = grep { $cmd_part =~ /\b$_\b/ } keys %lightRooms;;\
if ($lightRoom || $cmd_part =~ /(licht|lampe)/) {\
my $dev = $lightRooms{$lightRoom}{dev} // "LampeSzeneAlle";;\
fhem("set $dev " . ($is_off ? "off" : "on")) if ($is_on || $is_off);;\
next;;\
}\
\
# --- HILFE (DYNAMISCH) ---\
if ($cmd_part =~ /(hilfe|kommandos|übersicht)/) {\
\
my $h = '<div style="text-align:left;;min-width:250px;;font-family:sans-serif;;">';;\
$h .= 'Befehlsübersicht: ';;\
\
# Licht\
$h .= 'Licht ';;\
for my $k (sort keys %lightRooms) {\
$h .= "• ".$lightRooms{$k}{label}." an/aus ";;\
}\
\
# Staubsauger\
$h .= ' Staubsauger ';;\
$h .= "• Sauge [Raum] ";;\
$h .= " Räume: ".join(", ", map { ucfirst($_) } sort keys %vacRooms)." ";;\
$h .= "• Lade Roberto ";;\
\
# Sonstiges\
$h .= ' Sonstiges ';;\
$h .= "• Fernseher an/aus ";;\
$h .= "• Ambiente [an|aus|1-255] ";;\
$h .= "• Ambilight ";;\
\
$h .= '</div>';;\
\
$h =~ s/'/\\"/g;;\
\
my $js = "if((document.querySelector('input[name=\"fw_id\"]')||{}).value==='$clientId'){FW_okDialog('$h')}";;\
\
FW_directNotify("#FHEMWEB:$_", $js, "")\
for devspec2array("TYPE=FHEMWEB");;\
\
next;;\
}\
}\
}
</syntaxhighlight>

== Unterschiede der Wege ==

{| class="wikitable"
! Feature
! Browser
! Hybrid (Atom Echo S3)
|-
| Wakeword
| Browser
| ESP (Hardware)
|-
| Push-to-Talk
| Ja
| Nein
|-
| Always-On
| Ja (bedingt)
| Ja
|-
| Architektur
| Software
| Software + Hardware
|-
| Stabilität
| Sehr stabil
| Sehr stabil (Wakeword extern)
|}

== FireOS mit Fully Browser (Plus) ==

Damit die Spracherkennung funktioniert:

* Apps installieren:
Google
Speech Recognition & Synthesis
* FireOS:
„Tastatur und Sprache“ → „Text-to-Speech“
* Fully Browser:
<code>Enable JavaScriptInterface (PLUS)</code> aktivieren

[[Kategorie:Code Snippets]]
[[Kategorie:FHEM Frontends]]

FHEMWEB/VoiceControl: Web-STT & Hardware-Wakeword

2026-04-03T08:34:50Z

Schwatter:

[[Datei:VoiceControl_Logo.png|Mini|rechts]]

[[Datei:Voicecontrol.png|mini]]

== VoiceControl – Sprachsteuerung via Browser und Atom Echo s3r ==

Diese Lösung ermöglicht eine flexible Sprachsteuerung für [[FHEM]]. Sprache wird in Text (Speech-to-Text) umgewandelt und als Reading <code>STT</code> im Device <code>global</code> bereitgestellt. Dieses Reading kann anschließend zentral (z. B. über <code>notify</code> oder <code>DOIF</code>) ausgewertet werden.

'''Unterstützt werden nur Chromium-basierte Browser (Chrome, Edge, Fully Browser). Firefox hat leider kein Backend.'''

Es gibt zwei unterschiedliche Wege zur Spracherfassung:

* Weg 1️⃣ (Software): Browser-basierte Komplettlösung
* Weg 2️⃣ (Hybrid): Hardware-Wakeword + Browser-Spracherkennung

=== Hilfe ===
* Forenthread zum {{Link2Forum|Topic=144147|LinkText=VoiceControl Sprachsteuerung}}
Dort befinden sich in Post #1 auch alle benötigten Dateien.

=== Funktionen ===

==== Grundprinzip ====
* Sprache → Speech-to-Text
* Ergebnis → Reading <code>STT</code> im Device <code>global</code>
* Zentrale Logik verarbeitet Befehle

==== Betriebsarten ====
* Push-to-Talk (nur Browser)
* Always-On mit Wakeword
* Hardware-Wakeword (Hybrid)

==== Rückmeldungen ====
* Sprachausgabe (TTS)
* Visuelle Bubble im Browser
* Optional gezielte Rückmeldung per Client-ID

== Weg 1️⃣: Browser-Lösung (voicecontrol.js) ==

Das Script nutzt die Google Web Speech API. Unterstützt werden Chromium-basierte Browser (Chrome, Edge, Fully Browser). Firefox wird aktuell nicht unterstützt.

=== Bedienung ===

==== Push-to-Talk ====
* Button gedrückt halten (~450 ms)
* Direkt sprechen (kein Wakeword nötig)
* Befehl wird sofort verarbeitet

==== Always-On ====
* Kurzer Klick aktiviert Dauerbetrieb
* Wakeword erforderlich (Standard: „James“)
* Nach Aktivierung permanentes Mithören

==== Wakeword ====
* Standard: <code>james</code>
* Anpassbar im Script:
<syntaxhighlight lang="javascript">
const wakewords = ["james"];</syntaxhighlight>

Ablauf:
# „James“ sagen
# System antwortet „Ja?“
# Zeitfenster (~6 Sekunden) für Befehl
# Danach automatische Verarbeitung oder Abbruch

=== Installation ===

==== Datei kopieren ====
<syntaxhighlight lang="Perl">
{ Svn_GetFile('contrib/voicecontrol.js', 'www/pgm2/voicecontrol.js') }
</syntaxhighlight>

==== Einbindung ====
<syntaxhighlight lang="perl">
attr WEBphone JavaScripts pgm2/voicecontrol.js
</syntaxhighlight>

==== Hinweis (HTTP ohne HTTPS) ====
Chrome benötigt Freigabe für Mikrofon:

* <code>chrome://flags/#unsafely-treat-insecure-origin-as-secure</code>
* Eigene URL hinzufügen
* Auf <code>Enabled</code> setzen

== Weg 2️⃣: Hybrid-Lösung mit Browser + Atom Echo (voicecontrol_echo.js) ==

Diese Variante kombiniert Hardware und Software:

* Wakeword-Erkennung erfolgt auf dem ESP (Atom Echo s3r)
* Die eigentliche Sprachverarbeitung (Speech-to-Text) erfolgt im Browser

=== Funktionsweise ===

# Wakeword wird auf dem ESP erkannt
# FHEM erzeugt Event (z. B. <code>james_detected</code>)
# Browser empfängt Event via WebSocket
# Speech-to-Text startet im Browser
# Ergebnis wird an FHEM übertragen

=== Aktivierung ===

* Kurzer Klick auf Button aktiviert/deaktiviert System
* Baut WebSocket-Verbindung zu FHEM auf
* Kein Push-to-Talk-Modus

=== Konfiguration im Javascript ===

<syntaxhighlight lang="javascript">
const DEVICE = "atom_echos3r_9888e00f4280";
const TRIGGER = "james_detected";
const FHEM_IP = "192.168.1.76:8085";
</syntaxhighlight>

* <code>DEVICE</code> → FHEM-Device des ESP
* <code>TRIGGER</code> → Event bei Wakeword
* <code>FHEM_IP</code> → FHEM-Server

=== Konfiguration in der Yaml ===

Damit sich der ESP mit eurem MQTT-Server und WLAN verbindet, müssen folgende Stellen angepasst werden.

wifi:
ssid: "YOUR_SSID"
password: "YOUR_PW"
fast_connect: true

mqtt:
broker: 192.168.1.76
port: 1884
username: "YOUR_USERNAME"
password: "YOUR_PW"
topic_prefix: atom_echo

=== Wakeword (ESP / ESPHome) ===

Das Wakeword wird direkt auf dem ESP definiert:

* Umsetzung über ESPHome
* Eine große Auswahl an Wakewords sind hier zu finden:
https://github.com/TaterTotterson/microWakeWords

Hier ein Beispiel, wie das Wakeword definiert wird.

micro_wake_word:
id: mww
microphone: echo_mic
models:
- model: "https://github.com/TaterTotterson/microWakeWords/raw/main/microWakeWordsV2/james.json"
id: james_model
probability_cutoff: 0.6

=== Kommunikation ===

* WebSocket-Verbindung zu FHEM
* Lauscht auf Device-Events
* Automatischer Reconnect bei Abbruch

=== Ablauf nach Wakeword ===

# System sagt „Ja?“
# Browser startet SpeechRecognition
# Nutzer spricht Befehl
# Befehl wird verarbeitet
# Rückmeldung „Erledigt“

=== Installation ===

siehe oben wie unter Punkt 1.

== Zentrale Auswertung (Logik) ==

Beide Wege schreiben in:

<code>global:STT</code>

Die Verarbeitung erfolgt zentral über ein <code>notify</code>.

=== Beispiel: notify ===

<syntaxhighlight lang="perl">
defmod n_VoiceControl notify global:STT:.* {\
# 1. VORBEREITUNG\
my ($cleanEvent, $clientId) = $EVENT =~ /^(.*)\s\[(.*)\]$/;;\
$cleanEvent //= $EVENT;;\
$clientId //= "unknown";;\
\
my %lightRooms = (\
"esszimmer" => { dev => "Lampe01_Ez", label => "Licht Esszimmer" },\
"küche" => { dev => "Deckenlampe_Kue", label => "Licht Küche" },\
"wohnzimmer" => { dev => "Lampe06_Dek", label => "Licht Wohnzimmer" }\
);;\
\
my %vacRooms = (\
"arbeitszimmer" => "Arbeitszimmer",\
"badezimmer" => "Badezimmer",\
"esszimmer" => "Esszimmer",\
"flur" => "Flur",\
"küche" => "Küche",\
"wohnzimmer" => "Wohnzimmer"\
);;\
\
my $onRegEx = '\b(an|ein|einschalten|starte|aktivier|aktiviere)\b';;\
my $offRegEx = '\b(aus|ausschalten|stop|stoppe|beende|deaktivier|deaktiviere)\b';;\
\
my @commands = split(/\s*(?:und|dann|,)\s*/, lc($cleanEvent));;\
\
# 2. DER BEFEHLS-LOOP\
foreach my $cmd_part (@commands) {\
\
$cmd_part =~ s/^\s+|\s+$//g;;\
\
my $is_on = ($cmd_part =~ /$onRegEx/) ? 1 : 0;;\
my $is_off = ($cmd_part =~ /$offRegEx/) ? 1 : 0;;\
\
$cmd_part =~ s/\b(ich|brauche|mach|bitte|kannst du|würdest du|mal|doch|den|das|die|im|in der)\b//g;;\
\
# --- INTENT: STAUBSAUGER ---\
if ($cmd_part =~ /(reinige|sauge|putze|staubsauger|roboter)/) {\
my @found = grep { $cmd_part =~ /\b$_\b/ } keys %vacRooms;;\
if (@found) {\
fhem("set MQTT2_valetudo_FlusteredUnequaledFish clean_segment " . join(",", map { $vacRooms{$_} } @found));;\
} else {\
fhem("set MQTT2_valetudo_FlusteredUnequaledFish start");;\
}\
next;;\
} elsif ($cmd_part =~ /(lade|aufladen|dock|station|home)/) {\
fhem("set MQTT2_valetudo_FlusteredUnequaledFish charge");;\
next;;\
}\
\
# --- INTENT: FERNSEHER ---\
if ($cmd_part =~ /(fernseher|tv|vuplus)/) {\
fhem("set VuPlus " . ($is_off ? "off" : "on"));;\
next;;\
}\
\
# --- INTENT: AMBIENTE ---\
if ($cmd_part =~ /ambiente/) {\
if ($cmd_part =~ /(\d+)/) {\
my $b = ($1 > 255 ? 255 : ($1 < 1 ? 1 : $1));;\
fhem("set LampeSzeneAlle brightness $b");;\
} else {\
fhem("set LampeSzeneAlle " . ($is_off ? "off" : "on"));;\
}\
next;;\
}\
\
# --- INTENT: AMBILIGHT ---\
if ($cmd_part =~ /ambilight/) {\
system("sshpass -p 'GEHEIMESPASSWORT' ssh -o StrictHostKeyChecking=no root\@192.168.1.46 '/usr/share/hyperhdr/scripts/hyperhdr_toggle.sh'");;\
next;;\
}\
\
# --- INTENT: LICHT ---\
my ($lightRoom) = grep { $cmd_part =~ /\b$_\b/ } keys %lightRooms;;\
if ($lightRoom || $cmd_part =~ /(licht|lampe)/) {\
my $dev = $lightRooms{$lightRoom}{dev} // "LampeSzeneAlle";;\
fhem("set $dev " . ($is_off ? "off" : "on")) if ($is_on || $is_off);;\
next;;\
}\
\
# --- HILFE (DYNAMISCH) ---\
if ($cmd_part =~ /(hilfe|kommandos|übersicht)/) {\
\
my $h = '<div style="text-align:left;;min-width:250px;;font-family:sans-serif;;">';;\
$h .= 'Befehlsübersicht: ';;\
\
# Licht\
$h .= 'Licht ';;\
for my $k (sort keys %lightRooms) {\
$h .= "• ".$lightRooms{$k}{label}." an/aus ";;\
}\
\
# Staubsauger\
$h .= ' Staubsauger ';;\
$h .= "• Sauge [Raum] ";;\
$h .= " Räume: ".join(", ", map { ucfirst($_) } sort keys %vacRooms)." ";;\
$h .= "• Lade Roberto ";;\
\
# Sonstiges\
$h .= ' Sonstiges ';;\
$h .= "• Fernseher an/aus ";;\
$h .= "• Ambiente [an|aus|1-255] ";;\
$h .= "• Ambilight ";;\
\
$h .= '</div>';;\
\
$h =~ s/'/\\"/g;;\
\
my $js = "if((document.querySelector('input[name=\"fw_id\"]')||{}).value==='$clientId'){FW_okDialog('$h')}";;\
\
FW_directNotify("#FHEMWEB:$_", $js, "")\
for devspec2array("TYPE=FHEMWEB");;\
\
next;;\
}\
}\
}
</syntaxhighlight>

== Unterschiede der Wege ==

{| class="wikitable"
! Feature
! Browser
! Hybrid (Atom Echo S3)
|-
| Wakeword
| Browser
| ESP (Hardware)
|-
| Push-to-Talk
| Ja
| Nein
|-
| Always-On
| Ja (bedingt)
| Ja
|-
| Architektur
| Software
| Software + Hardware
|-
| Stabilität
| Sehr stabil
| Sehr stabil (Wakeword extern)
|}

== FireOS mit Fully Browser (Plus) ==

Damit die Spracherkennung funktioniert:

* Apps installieren:
Google
Speech Recognition & Synthesis
* FireOS:
„Tastatur und Sprache“ → „Text-to-Speech“
* Fully Browser:
<code>Enable JavaScriptInterface (PLUS)</code> aktivieren

[[Kategorie:Code Snippets]]
[[Kategorie:FHEM Frontends]]

Datei:Voicecontrol.png

2026-04-03T08:34:07Z

Schwatter:

Voicecontrol

FHEMWEB/VoiceControl: Web-STT & Hardware-Wakeword

2026-04-03T08:25:51Z

Schwatter:

[[Datei:VoiceControl_Logo.png|Mini|rechts]]

== VoiceControl – Sprachsteuerung via Browser und Atom Echo s3r ==

Diese Lösung ermöglicht eine flexible Sprachsteuerung für [[FHEM]]. Sprache wird in Text (Speech-to-Text) umgewandelt und als Reading <code>STT</code> im Device <code>global</code> bereitgestellt. Dieses Reading kann anschließend zentral (z. B. über <code>notify</code> oder <code>DOIF</code>) ausgewertet werden.

'''Unterstützt werden nur Chromium-basierte Browser (Chrome, Edge, Fully Browser). Firefox hat leider kein Backend.'''

Es gibt zwei unterschiedliche Wege zur Spracherfassung:

* Weg 1️⃣ (Software): Browser-basierte Komplettlösung
* Weg 2️⃣ (Hybrid): Hardware-Wakeword + Browser-Spracherkennung

=== Hilfe ===
* Forenthread zum {{Link2Forum|Topic=144147|LinkText=VoiceControl Sprachsteuerung}}
Dort befinden sich in Post #1 auch alle benötigten Dateien.

=== Funktionen ===

==== Grundprinzip ====
* Sprache → Speech-to-Text
* Ergebnis → Reading <code>STT</code> im Device <code>global</code>
* Zentrale Logik verarbeitet Befehle

==== Betriebsarten ====
* Push-to-Talk (nur Browser)
* Always-On mit Wakeword
* Hardware-Wakeword (Hybrid)

==== Rückmeldungen ====
* Sprachausgabe (TTS)
* Visuelle Bubble im Browser
* Optional gezielte Rückmeldung per Client-ID

== Weg 1️⃣: Browser-Lösung (voicecontrol.js) ==

Das Script nutzt die Google Web Speech API. Unterstützt werden Chromium-basierte Browser (Chrome, Edge, Fully Browser). Firefox wird aktuell nicht unterstützt.

=== Bedienung ===

==== Push-to-Talk ====
* Button gedrückt halten (~450 ms)
* Direkt sprechen (kein Wakeword nötig)
* Befehl wird sofort verarbeitet

==== Always-On ====
* Kurzer Klick aktiviert Dauerbetrieb
* Wakeword erforderlich (Standard: „James“)
* Nach Aktivierung permanentes Mithören

==== Wakeword ====
* Standard: <code>james</code>
* Anpassbar im Script:
<syntaxhighlight lang="javascript">
const wakewords = ["james"];</syntaxhighlight>

Ablauf:
# „James“ sagen
# System antwortet „Ja?“
# Zeitfenster (~6 Sekunden) für Befehl
# Danach automatische Verarbeitung oder Abbruch

=== Installation ===

==== Datei kopieren ====
<syntaxhighlight lang="Perl">
{ Svn_GetFile('contrib/voicecontrol.js', 'www/pgm2/voicecontrol.js') }
</syntaxhighlight>

==== Einbindung ====
<syntaxhighlight lang="perl">
attr WEBphone JavaScripts pgm2/voicecontrol.js
</syntaxhighlight>

==== Hinweis (HTTP ohne HTTPS) ====
Chrome benötigt Freigabe für Mikrofon:

* <code>chrome://flags/#unsafely-treat-insecure-origin-as-secure</code>
* Eigene URL hinzufügen
* Auf <code>Enabled</code> setzen

== Weg 2️⃣: Hybrid-Lösung mit Browser + Atom Echo (voicecontrol_echo.js) ==

Diese Variante kombiniert Hardware und Software:

* Wakeword-Erkennung erfolgt auf dem ESP (Atom Echo s3r)
* Die eigentliche Sprachverarbeitung (Speech-to-Text) erfolgt im Browser

=== Funktionsweise ===

# Wakeword wird auf dem ESP erkannt
# FHEM erzeugt Event (z. B. <code>james_detected</code>)
# Browser empfängt Event via WebSocket
# Speech-to-Text startet im Browser
# Ergebnis wird an FHEM übertragen

=== Aktivierung ===

* Kurzer Klick auf Button aktiviert/deaktiviert System
* Baut WebSocket-Verbindung zu FHEM auf
* Kein Push-to-Talk-Modus

=== Konfiguration im Javascript ===

<syntaxhighlight lang="javascript">
const DEVICE = "atom_echos3r_9888e00f4280";
const TRIGGER = "james_detected";
const FHEM_IP = "192.168.1.76:8085";
</syntaxhighlight>

* <code>DEVICE</code> → FHEM-Device des ESP
* <code>TRIGGER</code> → Event bei Wakeword
* <code>FHEM_IP</code> → FHEM-Server

=== Konfiguration in der Yaml ===

Damit sich der ESP mit eurem MQTT-Server und WLAN verbindet, müssen folgende Stellen angepasst werden.

wifi:
ssid: "YOUR_SSID"
password: "YOUR_PW"
fast_connect: true

mqtt:
broker: 192.168.1.76
port: 1884
username: "YOUR_USERNAME"
password: "YOUR_PW"
topic_prefix: atom_echo

=== Wakeword (ESP / ESPHome) ===

Das Wakeword wird direkt auf dem ESP definiert:

* Umsetzung über ESPHome
* Eine große Auswahl an Wakewords sind hier zu finden:
https://github.com/TaterTotterson/microWakeWords

Hier ein Beispiel, wie das Wakeword definiert wird.

micro_wake_word:
id: mww
microphone: echo_mic
models:
- model: "https://github.com/TaterTotterson/microWakeWords/raw/main/microWakeWordsV2/james.json"
id: james_model
probability_cutoff: 0.6

=== Kommunikation ===

* WebSocket-Verbindung zu FHEM
* Lauscht auf Device-Events
* Automatischer Reconnect bei Abbruch

=== Ablauf nach Wakeword ===

# System sagt „Ja?“
# Browser startet SpeechRecognition
# Nutzer spricht Befehl
# Befehl wird verarbeitet
# Rückmeldung „Erledigt“

=== Installation ===

siehe oben wie unter Punkt 1.

== Zentrale Auswertung (Logik) ==

Beide Wege schreiben in:

<code>global:STT</code>

Die Verarbeitung erfolgt zentral über ein <code>notify</code>.

=== Beispiel: notify ===

<syntaxhighlight lang="perl">
defmod n_VoiceControl notify global:STT:.* {\
# 1. VORBEREITUNG\
my ($cleanEvent, $clientId) = $EVENT =~ /^(.*)\s\[(.*)\]$/;;\
$cleanEvent //= $EVENT;;\
$clientId //= "unknown";;\
\
my %lightRooms = (\
"esszimmer" => { dev => "Lampe01_Ez", label => "Licht Esszimmer" },\
"küche" => { dev => "Deckenlampe_Kue", label => "Licht Küche" },\
"wohnzimmer" => { dev => "Lampe06_Dek", label => "Licht Wohnzimmer" }\
);;\
\
my %vacRooms = (\
"arbeitszimmer" => "Arbeitszimmer",\
"badezimmer" => "Badezimmer",\
"esszimmer" => "Esszimmer",\
"flur" => "Flur",\
"küche" => "Küche",\
"wohnzimmer" => "Wohnzimmer"\
);;\
\
my $onRegEx = '\b(an|ein|einschalten|starte|aktivier|aktiviere)\b';;\
my $offRegEx = '\b(aus|ausschalten|stop|stoppe|beende|deaktivier|deaktiviere)\b';;\
\
my @commands = split(/\s*(?:und|dann|,)\s*/, lc($cleanEvent));;\
\
# 2. DER BEFEHLS-LOOP\
foreach my $cmd_part (@commands) {\
\
$cmd_part =~ s/^\s+|\s+$//g;;\
\
my $is_on = ($cmd_part =~ /$onRegEx/) ? 1 : 0;;\
my $is_off = ($cmd_part =~ /$offRegEx/) ? 1 : 0;;\
\
$cmd_part =~ s/\b(ich|brauche|mach|bitte|kannst du|würdest du|mal|doch|den|das|die|im|in der)\b//g;;\
\
# --- INTENT: STAUBSAUGER ---\
if ($cmd_part =~ /(reinige|sauge|putze|staubsauger|roboter)/) {\
my @found = grep { $cmd_part =~ /\b$_\b/ } keys %vacRooms;;\
if (@found) {\
fhem("set MQTT2_valetudo_FlusteredUnequaledFish clean_segment " . join(",", map { $vacRooms{$_} } @found));;\
} else {\
fhem("set MQTT2_valetudo_FlusteredUnequaledFish start");;\
}\
next;;\
} elsif ($cmd_part =~ /(lade|aufladen|dock|station|home)/) {\
fhem("set MQTT2_valetudo_FlusteredUnequaledFish charge");;\
next;;\
}\
\
# --- INTENT: FERNSEHER ---\
if ($cmd_part =~ /(fernseher|tv|vuplus)/) {\
fhem("set VuPlus " . ($is_off ? "off" : "on"));;\
next;;\
}\
\
# --- INTENT: AMBIENTE ---\
if ($cmd_part =~ /ambiente/) {\
if ($cmd_part =~ /(\d+)/) {\
my $b = ($1 > 255 ? 255 : ($1 < 1 ? 1 : $1));;\
fhem("set LampeSzeneAlle brightness $b");;\
} else {\
fhem("set LampeSzeneAlle " . ($is_off ? "off" : "on"));;\
}\
next;;\
}\
\
# --- INTENT: AMBILIGHT ---\
if ($cmd_part =~ /ambilight/) {\
system("sshpass -p 'GEHEIMESPASSWORT' ssh -o StrictHostKeyChecking=no root\@192.168.1.46 '/usr/share/hyperhdr/scripts/hyperhdr_toggle.sh'");;\
next;;\
}\
\
# --- INTENT: LICHT ---\
my ($lightRoom) = grep { $cmd_part =~ /\b$_\b/ } keys %lightRooms;;\
if ($lightRoom || $cmd_part =~ /(licht|lampe)/) {\
my $dev = $lightRooms{$lightRoom}{dev} // "LampeSzeneAlle";;\
fhem("set $dev " . ($is_off ? "off" : "on")) if ($is_on || $is_off);;\
next;;\
}\
\
# --- HILFE (DYNAMISCH) ---\
if ($cmd_part =~ /(hilfe|kommandos|übersicht)/) {\
\
my $h = '<div style="text-align:left;;min-width:250px;;font-family:sans-serif;;">';;\
$h .= 'Befehlsübersicht: ';;\
\
# Licht\
$h .= 'Licht ';;\
for my $k (sort keys %lightRooms) {\
$h .= "• ".$lightRooms{$k}{label}." an/aus ";;\
}\
\
# Staubsauger\
$h .= ' Staubsauger ';;\
$h .= "• Sauge [Raum] ";;\
$h .= " Räume: ".join(", ", map { ucfirst($_) } sort keys %vacRooms)." ";;\
$h .= "• Lade Roberto ";;\
\
# Sonstiges\
$h .= ' Sonstiges ';;\
$h .= "• Fernseher an/aus ";;\
$h .= "• Ambiente [an|aus|1-255] ";;\
$h .= "• Ambilight ";;\
\
$h .= '</div>';;\
\
$h =~ s/'/\\"/g;;\
\
my $js = "if((document.querySelector('input[name=\"fw_id\"]')||{}).value==='$clientId'){FW_okDialog('$h')}";;\
\
FW_directNotify("#FHEMWEB:$_", $js, "")\
for devspec2array("TYPE=FHEMWEB");;\
\
next;;\
}\
}\
}
</syntaxhighlight>

== Unterschiede der Wege ==

{| class="wikitable"
! Feature
! Browser
! Hybrid (Atom Echo S3)
|-
| Wakeword
| Browser
| ESP (Hardware)
|-
| Push-to-Talk
| Ja
| Nein
|-
| Always-On
| Ja (bedingt)
| Ja
|-
| Architektur
| Software
| Software + Hardware
|-
| Stabilität
| Sehr stabil
| Sehr stabil (Wakeword extern)
|}

== FireOS mit Fully Browser (Plus) ==

Damit die Spracherkennung funktioniert:

* Apps installieren:
Google
Speech Recognition & Synthesis
* FireOS:
„Tastatur und Sprache“ → „Text-to-Speech“
* Fully Browser:
<code>Enable JavaScriptInterface (PLUS)</code> aktivieren

[[Kategorie:Code Snippets]]
[[Kategorie:FHEM Frontends]]

FHEMWEB/VoiceControl: Web-STT & Hardware-Wakeword

2026-04-03T08:21:34Z

Schwatter:

[[Datei:VoiceControl_Logo.png|Mini|rechts]]

== VoiceControl – Sprachsteuerung via Browser und Atom Echo s3r ==

Diese Lösung ermöglicht eine flexible Sprachsteuerung für [[FHEM]]. Sprache wird in Text (Speech-to-Text) umgewandelt und als Reading <code>STT</code> im Device <code>global</code> bereitgestellt. Dieses Reading kann anschließend zentral (z. B. über <code>notify</code> oder <code>DOIF</code>) ausgewertet werden.

Das System unterstützt zwei unterschiedliche Wege zur Spracherfassung:

* Weg 1️⃣ (Software): Browser-basierte Komplettlösung
* Weg 2️⃣ (Hybrid): Hardware-Wakeword + Browser-Spracherkennung

=== Hilfe ===
* Forenthread zum {{Link2Forum|Topic=144147|LinkText=VoiceControl Sprachsteuerung}}
Dort befinden sich in Post #1 auch alle benötigten Dateien.

=== Funktionen ===

==== Grundprinzip ====
* Sprache → Speech-to-Text
* Ergebnis → Reading <code>STT</code> im Device <code>global</code>
* Zentrale Logik verarbeitet Befehle

==== Betriebsarten ====
* Push-to-Talk (nur Browser)
* Always-On mit Wakeword
* Hardware-Wakeword (Hybrid)

==== Rückmeldungen ====
* Sprachausgabe (TTS)
* Visuelle Bubble im Browser
* Optional gezielte Rückmeldung per Client-ID

== Weg 1️⃣: Browser-Lösung (voicecontrol.js) ==

Das Script nutzt die Google Web Speech API. Unterstützt werden Chromium-basierte Browser (Chrome, Edge, Fully Browser). Firefox wird aktuell nicht unterstützt.

=== Bedienung ===

==== Push-to-Talk ====
* Button gedrückt halten (~450 ms)
* Direkt sprechen (kein Wakeword nötig)
* Befehl wird sofort verarbeitet

==== Always-On ====
* Kurzer Klick aktiviert Dauerbetrieb
* Wakeword erforderlich (Standard: „James“)
* Nach Aktivierung permanentes Mithören

==== Wakeword ====
* Standard: <code>james</code>
* Anpassbar im Script:
<syntaxhighlight lang="javascript">
const wakewords = ["james"];</syntaxhighlight>

Ablauf:
# „James“ sagen
# System antwortet „Ja?“
# Zeitfenster (~6 Sekunden) für Befehl
# Danach automatische Verarbeitung oder Abbruch

=== Installation ===

==== Datei kopieren ====
<syntaxhighlight lang="Perl">
{ Svn_GetFile('contrib/voicecontrol.js', 'www/pgm2/voicecontrol.js') }
</syntaxhighlight>

==== Einbindung ====
<syntaxhighlight lang="perl">
attr WEBphone JavaScripts pgm2/voicecontrol.js
</syntaxhighlight>

==== Hinweis (HTTP ohne HTTPS) ====
Chrome benötigt Freigabe für Mikrofon:

* <code>chrome://flags/#unsafely-treat-insecure-origin-as-secure</code>
* Eigene URL hinzufügen
* Auf <code>Enabled</code> setzen

== Weg 2️⃣: Hybrid-Lösung mit Browser + Atom Echo (voicecontrol_echo.js) ==

Diese Variante kombiniert Hardware und Software:

* Wakeword-Erkennung erfolgt auf dem ESP (Atom Echo s3r)
* Die eigentliche Sprachverarbeitung (Speech-to-Text) erfolgt im Browser

=== Funktionsweise ===

# Wakeword wird auf dem ESP erkannt
# FHEM erzeugt Event (z. B. <code>james_detected</code>)
# Browser empfängt Event via WebSocket
# Speech-to-Text startet im Browser
# Ergebnis wird an FHEM übertragen

=== Aktivierung ===

* Kurzer Klick auf Button aktiviert/deaktiviert System
* Baut WebSocket-Verbindung zu FHEM auf
* Kein Push-to-Talk-Modus

=== Konfiguration im Javascript ===

<syntaxhighlight lang="javascript">
const DEVICE = "atom_echos3r_9888e00f4280";
const TRIGGER = "james_detected";
const FHEM_IP = "192.168.1.76:8085";
</syntaxhighlight>

* <code>DEVICE</code> → FHEM-Device des ESP
* <code>TRIGGER</code> → Event bei Wakeword
* <code>FHEM_IP</code> → FHEM-Server

=== Konfiguration in der Yaml ===

Damit sich der ESP mit eurem MQTT-Server und WLAN verbindet, müssen folgende Stellen angepasst werden.

wifi:
ssid: "YOUR_SSID"
password: "YOUR_PW"
fast_connect: true

mqtt:
broker: 192.168.1.76
port: 1884
username: "YOUR_USERNAME"
password: "YOUR_PW"
topic_prefix: atom_echo

=== Wakeword (ESP / ESPHome) ===

Das Wakeword wird direkt auf dem ESP definiert:

* Umsetzung über ESPHome
* Eine große Auswahl an Wakewords sind hier zu finden:
https://github.com/TaterTotterson/microWakeWords

Hier ein Beispiel, wie das Wakeword definiert wird.

micro_wake_word:
id: mww
microphone: echo_mic
models:
- model: "https://github.com/TaterTotterson/microWakeWords/raw/main/microWakeWordsV2/james.json"
id: james_model
probability_cutoff: 0.6

=== Kommunikation ===

* WebSocket-Verbindung zu FHEM
* Lauscht auf Device-Events
* Automatischer Reconnect bei Abbruch

=== Ablauf nach Wakeword ===

# System sagt „Ja?“
# Browser startet SpeechRecognition
# Nutzer spricht Befehl
# Befehl wird verarbeitet
# Rückmeldung „Erledigt“

=== Installation ===

siehe oben wie unter Punkt 1.

== Zentrale Auswertung (Logik) ==

Beide Wege schreiben in:

<code>global:STT</code>

Die Verarbeitung erfolgt zentral über ein <code>notify</code>.

=== Beispiel: notify ===

<syntaxhighlight lang="perl">
defmod n_VoiceControl notify global:STT:.* {\
# 1. VORBEREITUNG\
my ($cleanEvent, $clientId) = $EVENT =~ /^(.*)\s\[(.*)\]$/;;\
$cleanEvent //= $EVENT;;\
$clientId //= "unknown";;\
\
my %lightRooms = (\
"esszimmer" => { dev => "Lampe01_Ez", label => "Licht Esszimmer" },\
"küche" => { dev => "Deckenlampe_Kue", label => "Licht Küche" },\
"wohnzimmer" => { dev => "Lampe06_Dek", label => "Licht Wohnzimmer" }\
);;\
\
my %vacRooms = (\
"arbeitszimmer" => "Arbeitszimmer",\
"badezimmer" => "Badezimmer",\
"esszimmer" => "Esszimmer",\
"flur" => "Flur",\
"küche" => "Küche",\
"wohnzimmer" => "Wohnzimmer"\
);;\
\
my $onRegEx = '\b(an|ein|einschalten|starte|aktivier|aktiviere)\b';;\
my $offRegEx = '\b(aus|ausschalten|stop|stoppe|beende|deaktivier|deaktiviere)\b';;\
\
my @commands = split(/\s*(?:und|dann|,)\s*/, lc($cleanEvent));;\
\
# 2. DER BEFEHLS-LOOP\
foreach my $cmd_part (@commands) {\
\
$cmd_part =~ s/^\s+|\s+$//g;;\
\
my $is_on = ($cmd_part =~ /$onRegEx/) ? 1 : 0;;\
my $is_off = ($cmd_part =~ /$offRegEx/) ? 1 : 0;;\
\
$cmd_part =~ s/\b(ich|brauche|mach|bitte|kannst du|würdest du|mal|doch|den|das|die|im|in der)\b//g;;\
\
# --- INTENT: STAUBSAUGER ---\
if ($cmd_part =~ /(reinige|sauge|putze|staubsauger|roboter)/) {\
my @found = grep { $cmd_part =~ /\b$_\b/ } keys %vacRooms;;\
if (@found) {\
fhem("set MQTT2_valetudo_FlusteredUnequaledFish clean_segment " . join(",", map { $vacRooms{$_} } @found));;\
} else {\
fhem("set MQTT2_valetudo_FlusteredUnequaledFish start");;\
}\
next;;\
} elsif ($cmd_part =~ /(lade|aufladen|dock|station|home)/) {\
fhem("set MQTT2_valetudo_FlusteredUnequaledFish charge");;\
next;;\
}\
\
# --- INTENT: FERNSEHER ---\
if ($cmd_part =~ /(fernseher|tv|vuplus)/) {\
fhem("set VuPlus " . ($is_off ? "off" : "on"));;\
next;;\
}\
\
# --- INTENT: AMBIENTE ---\
if ($cmd_part =~ /ambiente/) {\
if ($cmd_part =~ /(\d+)/) {\
my $b = ($1 > 255 ? 255 : ($1 < 1 ? 1 : $1));;\
fhem("set LampeSzeneAlle brightness $b");;\
} else {\
fhem("set LampeSzeneAlle " . ($is_off ? "off" : "on"));;\
}\
next;;\
}\
\
# --- INTENT: AMBILIGHT ---\
if ($cmd_part =~ /ambilight/) {\
system("sshpass -p 'GEHEIMESPASSWORT' ssh -o StrictHostKeyChecking=no root\@192.168.1.46 '/usr/share/hyperhdr/scripts/hyperhdr_toggle.sh'");;\
next;;\
}\
\
# --- INTENT: LICHT ---\
my ($lightRoom) = grep { $cmd_part =~ /\b$_\b/ } keys %lightRooms;;\
if ($lightRoom || $cmd_part =~ /(licht|lampe)/) {\
my $dev = $lightRooms{$lightRoom}{dev} // "LampeSzeneAlle";;\
fhem("set $dev " . ($is_off ? "off" : "on")) if ($is_on || $is_off);;\
next;;\
}\
\
# --- HILFE (DYNAMISCH) ---\
if ($cmd_part =~ /(hilfe|kommandos|übersicht)/) {\
\
my $h = '<div style="text-align:left;;min-width:250px;;font-family:sans-serif;;">';;\
$h .= 'Befehlsübersicht: ';;\
\
# Licht\
$h .= 'Licht ';;\
for my $k (sort keys %lightRooms) {\
$h .= "• ".$lightRooms{$k}{label}." an/aus ";;\
}\
\
# Staubsauger\
$h .= ' Staubsauger ';;\
$h .= "• Sauge [Raum] ";;\
$h .= " Räume: ".join(", ", map { ucfirst($_) } sort keys %vacRooms)." ";;\
$h .= "• Lade Roberto ";;\
\
# Sonstiges\
$h .= ' Sonstiges ';;\
$h .= "• Fernseher an/aus ";;\
$h .= "• Ambiente [an|aus|1-255] ";;\
$h .= "• Ambilight ";;\
\
$h .= '</div>';;\
\
$h =~ s/'/\\"/g;;\
\
my $js = "if((document.querySelector('input[name=\"fw_id\"]')||{}).value==='$clientId'){FW_okDialog('$h')}";;\
\
FW_directNotify("#FHEMWEB:$_", $js, "")\
for devspec2array("TYPE=FHEMWEB");;\
\
next;;\
}\
}\
}
</syntaxhighlight>

== Unterschiede der Wege ==

{| class="wikitable"
! Feature
! Browser
! Hybrid (Atom Echo S3)
|-
| Wakeword
| Browser
| ESP (Hardware)
|-
| Push-to-Talk
| Ja
| Nein
|-
| Always-On
| Ja (bedingt)
| Ja
|-
| Architektur
| Software
| Software + Hardware
|-
| Stabilität
| Sehr stabil
| Sehr stabil (Wakeword extern)
|}

== FireOS mit Fully Browser (Plus) ==

Damit die Spracherkennung funktioniert:

* Apps installieren:
Google
Speech Recognition & Synthesis
* FireOS:
„Tastatur und Sprache“ → „Text-to-Speech“
* Fully Browser:
<code>Enable JavaScriptInterface (PLUS)</code> aktivieren

[[Kategorie:Code Snippets]]
[[Kategorie:FHEM Frontends]]

FHEMWEB/VoiceControl: Web-STT & Hardware-Wakeword

2026-04-03T07:50:19Z

Schwatter:

[[Datei:VoiceControl_Logo.png|Mini|rechts]]

== VoiceControl – Sprachsteuerung via Browser und Atom Echo s3r ==

Diese Lösung ermöglicht eine flexible Sprachsteuerung für [[FHEM]]. Sprache wird in Text (Speech-to-Text) umgewandelt und als Reading <code>STT</code> im Device <code>global</code> bereitgestellt. Dieses Reading kann anschließend zentral (z. B. über <code>notify</code> oder <code>DOIF</code>) ausgewertet werden.

Das System unterstützt zwei unterschiedliche Wege zur Spracherfassung:

* Weg 1️⃣ (Software): Browser-basierte Komplettlösung
* Weg 2️⃣ (Hybrid): Hardware-Wakeword + Browser-Spracherkennung

=== Hilfe ===
* Forenthread zum {{Link2Forum|Topic=144147|LinkText=VoiceControl Sprachsteuerung}}
Dort befinden sich in Post #1 auch alle benötigten Dateien.

=== Funktionen ===

==== Grundprinzip ====
* Sprache → Speech-to-Text
* Ergebnis → Reading <code>STT</code> im Device <code>global</code>
* Zentrale Logik verarbeitet Befehle

==== Betriebsarten ====
* Push-to-Talk (nur Browser)
* Always-On mit Wakeword
* Hardware-Wakeword (Hybrid)

==== Rückmeldungen ====
* Sprachausgabe (TTS)
* Visuelle Bubble im Browser
* Optional gezielte Rückmeldung per Client-ID

== Weg 1️⃣: Browser-Lösung (voicecontrol.js) ==

Das Script nutzt die Google Web Speech API. Unterstützt werden Chromium-basierte Browser (Chrome, Edge, Fully Browser). Firefox wird aktuell nicht unterstützt.

=== Bedienung ===

==== Push-to-Talk ====
* Button gedrückt halten (~450 ms)
* Direkt sprechen (kein Wakeword nötig)
* Befehl wird sofort verarbeitet

==== Always-On ====
* Kurzer Klick aktiviert Dauerbetrieb
* Wakeword erforderlich (Standard: „James“)
* Nach Aktivierung permanentes Mithören

==== Wakeword ====
* Standard: <code>james</code>
* Anpassbar im Script:
<syntaxhighlight lang="javascript">
const wakewords = ["james"];</syntaxhighlight>

Ablauf:
# „James“ sagen
# System antwortet „Ja?“
# Zeitfenster (~6 Sekunden) für Befehl
# Danach automatische Verarbeitung oder Abbruch

=== Installation ===

==== Datei kopieren ====
<code>voicecontrol.js</code> nach:
<code>/opt/fhem/www/voicecontrol/</code>

==== Einbindung ====
<syntaxhighlight lang="perl">
attr WEBphone JavaScripts voicecontrol/voicecontrol.js
</syntaxhighlight>

==== Hinweis (HTTP ohne HTTPS) ====
Chrome benötigt Freigabe für Mikrofon:

* <code>chrome://flags/#unsafely-treat-insecure-origin-as-secure</code>
* Eigene URL hinzufügen
* Auf <code>Enabled</code> setzen

== Weg 2️⃣: Hybrid-Lösung mit Browser + Atom Echo (voicecontrol_echo.js) ==

Diese Variante kombiniert Hardware und Software:

* Wakeword-Erkennung erfolgt auf dem ESP (Atom Echo s3r)
* Die eigentliche Sprachverarbeitung (Speech-to-Text) erfolgt im Browser

=== Funktionsweise ===

# Wakeword wird auf dem ESP erkannt
# FHEM erzeugt Event (z. B. <code>james_detected</code>)
# Browser empfängt Event via WebSocket
# Speech-to-Text startet im Browser
# Ergebnis wird an FHEM übertragen

=== Aktivierung ===

* Kurzer Klick auf Button aktiviert/deaktiviert System
* Baut WebSocket-Verbindung zu FHEM auf
* Kein Push-to-Talk-Modus

=== Konfiguration im Javascript ===

<syntaxhighlight lang="javascript">
const DEVICE = "atom_echos3r_9888e00f4280";
const TRIGGER = "james_detected";
const FHEM_IP = "192.168.1.76:8085";
</syntaxhighlight>

* <code>DEVICE</code> → FHEM-Device des ESP
* <code>TRIGGER</code> → Event bei Wakeword
* <code>FHEM_IP</code> → FHEM-Server

=== Konfiguration in der Yaml ===

Damit sich der ESP mit eurem MQTT-Server und WLAN verbindet, müssen folgende Stellen angepasst werden.

wifi:
ssid: "YOUR_SSID"
password: "YOUR_PW"
fast_connect: true

mqtt:
broker: 192.168.1.76
port: 1884
username: "YOUR_USERNAME"
password: "YOUR_PW"
topic_prefix: atom_echo

=== Wakeword (ESP / ESPHome) ===

Das Wakeword wird direkt auf dem ESP definiert:

* Umsetzung über ESPHome
* Eine große Auswahl an Wakewords sind hier zu finden:
https://github.com/TaterTotterson/microWakeWords

Hier ein Beispiel, wie das Wakeword definiert wird.

micro_wake_word:
id: mww
microphone: echo_mic
models:
- model: "https://github.com/TaterTotterson/microWakeWords/raw/main/microWakeWordsV2/james.json"
id: james_model
probability_cutoff: 0.6

=== Kommunikation ===

* WebSocket-Verbindung zu FHEM
* Lauscht auf Device-Events
* Automatischer Reconnect bei Abbruch

=== Ablauf nach Wakeword ===

# System sagt „Ja?“
# Browser startet SpeechRecognition
# Nutzer spricht Befehl
# Befehl wird verarbeitet
# Rückmeldung „Erledigt“

=== Installation ===

siehe oben wie unter Punkt 1.

== Zentrale Auswertung (Logik) ==

Beide Wege schreiben in:

<code>global:STT</code>

Die Verarbeitung erfolgt zentral über ein <code>notify</code>.

=== Beispiel: notify ===

<syntaxhighlight lang="perl">
defmod n_VoiceControl notify global:STT:.* {\
# 1. VORBEREITUNG\
my ($cleanEvent, $clientId) = $EVENT =~ /^(.*)\s\[(.*)\]$/;;\
$cleanEvent //= $EVENT;;\
$clientId //= "unknown";;\
\
my %lightRooms = (\
"esszimmer" => { dev => "Lampe01_Ez", label => "Licht Esszimmer" },\
"küche" => { dev => "Deckenlampe_Kue", label => "Licht Küche" },\
"wohnzimmer" => { dev => "Lampe06_Dek", label => "Licht Wohnzimmer" }\
);;\
\
my %vacRooms = (\
"arbeitszimmer" => "Arbeitszimmer",\
"badezimmer" => "Badezimmer",\
"esszimmer" => "Esszimmer",\
"flur" => "Flur",\
"küche" => "Küche",\
"wohnzimmer" => "Wohnzimmer"\
);;\
\
my $onRegEx = '\b(an|ein|einschalten|starte|aktivier|aktiviere)\b';;\
my $offRegEx = '\b(aus|ausschalten|stop|stoppe|beende|deaktivier|deaktiviere)\b';;\
\
my @commands = split(/\s*(?:und|dann|,)\s*/, lc($cleanEvent));;\
\
# 2. DER BEFEHLS-LOOP\
foreach my $cmd_part (@commands) {\
\
$cmd_part =~ s/^\s+|\s+$//g;;\
\
my $is_on = ($cmd_part =~ /$onRegEx/) ? 1 : 0;;\
my $is_off = ($cmd_part =~ /$offRegEx/) ? 1 : 0;;\
\
$cmd_part =~ s/\b(ich|brauche|mach|bitte|kannst du|würdest du|mal|doch|den|das|die|im|in der)\b//g;;\
\
# --- INTENT: STAUBSAUGER ---\
if ($cmd_part =~ /(reinige|sauge|putze|staubsauger|roboter)/) {\
my @found = grep { $cmd_part =~ /\b$_\b/ } keys %vacRooms;;\
if (@found) {\
fhem("set MQTT2_valetudo_FlusteredUnequaledFish clean_segment " . join(",", map { $vacRooms{$_} } @found));;\
} else {\
fhem("set MQTT2_valetudo_FlusteredUnequaledFish start");;\
}\
next;;\
} elsif ($cmd_part =~ /(lade|aufladen|dock|station|home)/) {\
fhem("set MQTT2_valetudo_FlusteredUnequaledFish charge");;\
next;;\
}\
\
# --- INTENT: FERNSEHER ---\
if ($cmd_part =~ /(fernseher|tv|vuplus)/) {\
fhem("set VuPlus " . ($is_off ? "off" : "on"));;\
next;;\
}\
\
# --- INTENT: AMBIENTE ---\
if ($cmd_part =~ /ambiente/) {\
if ($cmd_part =~ /(\d+)/) {\
my $b = ($1 > 255 ? 255 : ($1 < 1 ? 1 : $1));;\
fhem("set LampeSzeneAlle brightness $b");;\
} else {\
fhem("set LampeSzeneAlle " . ($is_off ? "off" : "on"));;\
}\
next;;\
}\
\
# --- INTENT: AMBILIGHT ---\
if ($cmd_part =~ /ambilight/) {\
system("sshpass -p 'GEHEIMESPASSWORT' ssh -o StrictHostKeyChecking=no root\@192.168.1.46 '/usr/share/hyperhdr/scripts/hyperhdr_toggle.sh'");;\
next;;\
}\
\
# --- INTENT: LICHT ---\
my ($lightRoom) = grep { $cmd_part =~ /\b$_\b/ } keys %lightRooms;;\
if ($lightRoom || $cmd_part =~ /(licht|lampe)/) {\
my $dev = $lightRooms{$lightRoom}{dev} // "LampeSzeneAlle";;\
fhem("set $dev " . ($is_off ? "off" : "on")) if ($is_on || $is_off);;\
next;;\
}\
\
# --- HILFE (DYNAMISCH) ---\
if ($cmd_part =~ /(hilfe|kommandos|übersicht)/) {\
\
my $h = '<div style="text-align:left;;min-width:250px;;font-family:sans-serif;;">';;\
$h .= 'Befehlsübersicht: ';;\
\
# Licht\
$h .= 'Licht ';;\
for my $k (sort keys %lightRooms) {\
$h .= "• ".$lightRooms{$k}{label}." an/aus ";;\
}\
\
# Staubsauger\
$h .= ' Staubsauger ';;\
$h .= "• Sauge [Raum] ";;\
$h .= " Räume: ".join(", ", map { ucfirst($_) } sort keys %vacRooms)." ";;\
$h .= "• Lade Roberto ";;\
\
# Sonstiges\
$h .= ' Sonstiges ';;\
$h .= "• Fernseher an/aus ";;\
$h .= "• Ambiente [an|aus|1-255] ";;\
$h .= "• Ambilight ";;\
\
$h .= '</div>';;\
\
$h =~ s/'/\\"/g;;\
\
my $js = "if((document.querySelector('input[name=\"fw_id\"]')||{}).value==='$clientId'){FW_okDialog('$h')}";;\
\
FW_directNotify("#FHEMWEB:$_", $js, "")\
for devspec2array("TYPE=FHEMWEB");;\
\
next;;\
}\
}\
}
</syntaxhighlight>

== Unterschiede der Wege ==

{| class="wikitable"
! Feature
! Browser
! Hybrid (Atom Echo S3)
|-
| Wakeword
| Browser
| ESP (Hardware)
|-
| Push-to-Talk
| Ja
| Nein
|-
| Always-On
| Ja (bedingt)
| Ja
|-
| Architektur
| Software
| Software + Hardware
|-
| Stabilität
| Sehr stabil
| Sehr stabil (Wakeword extern)
|}

== FireOS mit Fully Browser (Plus) ==

Damit die Spracherkennung funktioniert:

* Apps installieren:
Google
Speech Recognition & Synthesis
* FireOS:
„Tastatur und Sprache“ → „Text-to-Speech“
* Fully Browser:
<code>Enable JavaScriptInterface (PLUS)</code> aktivieren

[[Kategorie:Code Snippets]]
[[Kategorie:Schnittstellen]]

FHEMWEB/VoiceControl: Web-STT & Hardware-Wakeword

2026-03-30T18:14:13Z

Schwatter:

[[Datei:VoiceControl_Logo.png|Mini|rechts]]

== VoiceControl – Sprachsteuerung via Browser und Atom Echo s3r ==

Diese Lösung ermöglicht eine flexible Sprachsteuerung für [[FHEM]]. Sprache wird in Text (Speech-to-Text) umgewandelt und als Reading <code>STT</code> im Device <code>global</code> bereitgestellt. Dieses Reading kann anschließend zentral (z. B. über <code>notify</code> oder <code>DOIF</code>) ausgewertet werden.

Das System unterstützt zwei unterschiedliche Wege zur Spracherfassung:

* Weg 1️⃣ (Software): Browser-basierte Komplettlösung
* Weg 2️⃣ (Hybrid): Hardware-Wakeword + Browser-Spracherkennung

=== Hilfe ===
* Forenthread zum {{Link2Forum|Topic=144147|LinkText=VoiceControl Sprachsteuerung}}
Dort befinden sich in Post #1 auch alle benötigten Dateien.

=== Funktionen ===

==== Grundprinzip ====
* Sprache → Speech-to-Text
* Ergebnis → Reading <code>STT</code> im Device <code>global</code>
* Zentrale Logik verarbeitet Befehle

==== Betriebsarten ====
* Push-to-Talk (nur Browser)
* Always-On mit Wakeword
* Hardware-Wakeword (Hybrid)

==== Rückmeldungen ====
* Sprachausgabe (TTS)
* Visuelle Bubble im Browser
* Optional gezielte Rückmeldung per Client-ID

== Weg 1️⃣: Browser-Lösung (voicecontrol.js) ==

Das Script nutzt die Google Web Speech API. Unterstützt werden Chromium-basierte Browser (Chrome, Edge, Fully Browser). Firefox wird aktuell nicht unterstützt.

=== Bedienung ===

==== Push-to-Talk ====
* Button gedrückt halten (~450 ms)
* Direkt sprechen (kein Wakeword nötig)
* Befehl wird sofort verarbeitet

==== Always-On ====
* Kurzer Klick aktiviert Dauerbetrieb
* Wakeword erforderlich (Standard: „James“)
* Nach Aktivierung permanentes Mithören

==== Wakeword ====
* Standard: <code>james</code>
* Anpassbar im Script:
<syntaxhighlight lang="javascript">
const wakewords = ["james"];</syntaxhighlight>

Ablauf:
# „James“ sagen
# System antwortet „Ja?“
# Zeitfenster (~6 Sekunden) für Befehl
# Danach automatische Verarbeitung oder Abbruch

=== Installation ===

==== Datei kopieren ====
<code>voicecontrol.js</code> nach:
<code>/opt/fhem/www/voicecontrol/</code>

==== Einbindung ====
<syntaxhighlight lang="perl">
attr WEBphone JavaScripts voicecontrol/voicecontrol.js
</syntaxhighlight>

==== Hinweis (HTTP ohne HTTPS) ====
Chrome benötigt Freigabe für Mikrofon:

* <code>chrome://flags/#unsafely-treat-insecure-origin-as-secure</code>
* Eigene URL hinzufügen
* Auf <code>Enabled</code> setzen

== Weg 2️⃣: Hybrid-Lösung mit Browser + Atom Echo (voicecontrol_echo.js) ==

Diese Variante kombiniert Hardware und Software:

* Wakeword-Erkennung erfolgt auf dem ESP (Atom Echo s3r)
* Die eigentliche Sprachverarbeitung (Speech-to-Text) erfolgt im Browser

=== Funktionsweise ===

# Wakeword wird auf dem ESP erkannt
# FHEM erzeugt Event (z. B. <code>james_detected</code>)
# Browser empfängt Event via WebSocket
# Speech-to-Text startet im Browser
# Ergebnis wird an FHEM übertragen

=== Aktivierung ===

* Kurzer Klick auf Button aktiviert/deaktiviert System
* Baut WebSocket-Verbindung zu FHEM auf
* Kein Push-to-Talk-Modus

=== Konfiguration im Javascript ===

<syntaxhighlight lang="javascript">
const DEVICE = "atom_echos3r_9888e00f4280";
const TRIGGER = "james_detected";
const FHEM_IP = "192.168.1.76:8085";
</syntaxhighlight>

* <code>DEVICE</code> → FHEM-Device des ESP
* <code>TRIGGER</code> → Event bei Wakeword
* <code>FHEM_IP</code> → FHEM-Server

=== Konfiguration in der Yaml ===

Damit sich der ESP mit eurem MQTT-Server und WLAN verbindet, müssen folgende Stellen angepasst werden.

wifi:
ssid: "YOUR_SSID"
password: "YOUR_PW"
fast_connect: true

mqtt:
broker: 192.168.1.76
port: 1884
username: "YOUR_USERNAME"
password: "YOUR_PW"
topic_prefix: atom_echo

=== Wakeword (ESP / ESPHome) ===

Das Wakeword wird direkt auf dem ESP definiert:

* Umsetzung über ESPHome
* Eine große Auswahl an Wakewords sind hier zu finden:
https://github.com/TaterTotterson/microWakeWords

Hier ein Beispiel, wie das Wakeword definiert wird.

micro_wake_word:
id: mww
microphone: echo_mic
models:
- model: "https://github.com/TaterTotterson/microWakeWords/raw/main/microWakeWordsV2/james.json"
id: james_model
probability_cutoff: 0.6

=== Kommunikation ===

* WebSocket-Verbindung zu FHEM
* Lauscht auf Device-Events
* Automatischer Reconnect bei Abbruch

=== Ablauf nach Wakeword ===

# System sagt „Ja?“
# Browser startet SpeechRecognition
# Nutzer spricht Befehl
# Befehl wird verarbeitet
# Rückmeldung „Erledigt“

=== Installation ===

siehe oben wie unter Punkt 1.

== Zentrale Auswertung (Logik) ==

Beide Wege schreiben in:

<code>global:STT</code>

Die Verarbeitung erfolgt zentral über ein <code>notify</code>.

=== Beispiel: notify ===

<syntaxhighlight lang="perl">
defmod n_VoiceControl notify global:STT:.* {\
# Parsing: Befehl und ID trennen\
my ($cleanEvent, $clientId) = $EVENT =~ /^(.*)\s\[(.*)\]$/;;\
$cleanEvent //= $EVENT;;\
$clientId //= "unknown";;\
my $event_lc = lc($cleanEvent);;\
\
# Befehlmapping\
my %simpleCmds = (\
"stt: esszimmer licht an" => "set Lampe01_Ez on",\
"stt: esszimmer licht aus" => "set Lampe01_Ez off",\
"stt: küche licht an" => "set Deckenlampe_Kue on",\
"stt: küche licht aus" => "set Deckenlampe_Kue off",\
"stt: fernseher an" => "set VuPlus on",\
"stt: fernseher aus" => "set VuPlus off",\
"stt: lade roberto" => "set MQTT2_valetudo_FlusteredUnequaledFish charge",\
"stt: ambilight" => '{ system("sshpass -p \'1431Fhem1982\' ssh -o StrictHostKeyChecking=no root\@192.168.1.46 \"/usr/share/hyperhdr/scripts/hyperhdr_toggle.sh\"") }',\
);;\
\
if (exists $simpleCmds{$event_lc}) {\
fhem($simpleCmds{$event_lc});;\
}\
\
# Valetudo\
elsif ($event_lc =~ /reinige/) {\
my %rooms = (\
"arbeitszimmer" =>"Arbeitszimmer",\
"badezimmer" =>"Badezimmer",\
"esszimmer" =>"Esszimmer",\
"flur" =>"Flur",\
"küche" =>"Küche",\
"wohnzimmer" =>"Wohnzimmer");;\
my @found = grep { index($event_lc, $_) != -1 } keys %rooms;;\
fhem("set MQTT2_valetudo_FlusteredUnequaledFish clean_segment ".join(",", map { $rooms{$_} } @found)) if @found;;\
}\
# Lampenscene\
elsif ($event_lc =~ /ambiente/) {\
if ($event_lc =~ /(\d+)/) { my $b = ($1 > 255 ? 255 : ($1 < 1 ? 1 : $1));; fhem("set LampeSzeneAlle brightness $b") }\
elsif ($event_lc =~ /an/) { fhem("set LampeSzeneAlle on") }\
elsif ($event_lc =~ /aus/) { fhem("set LampeSzeneAlle off") }\
}\
# Kommandoübersicht\
elsif ($event_lc =~ /kommandos/) {\
my $h = '<div style="text-align:left;;min-width:200px;;font-family:sans-serif;;">Befehlsübersicht: ';;\
$h .= "• ".($_ =~ s/^stt: //r)." " for sort keys %simpleCmds;;\
$h .= "• reinige [küche, bad, ...] • ambiente [an|aus|0-255]</div>";;\
$h =~ s/'/\\"/g;;\
\
my $js = "if((document.querySelector('input[name=\"fw_id\"]')||{}).value==='$clientId'){FW_okDialog('$h')}";;\
FW_directNotify("#FHEMWEB:$_", $js, "")\
for devspec2array("TYPE=FHEMWEB");;\
}\
}
</syntaxhighlight>

== Unterschiede der Wege ==

{| class="wikitable"
! Feature
! Browser
! Hybrid (Atom Echo S3)
|-
| Wakeword
| Browser
| ESP (Hardware)
|-
| Push-to-Talk
| Ja
| Nein
|-
| Always-On
| Ja (bedingt)
| Ja
|-
| Audioaufnahme
| Möglich
| Nur nach Trigger
|-
| Architektur
| Software
| Software + Hardware
|-
| Stabilität
| Stabil
| Sehr stabil (Wakeword extern)
|}

== FireOS mit Fully Browser (Plus) ==

Damit die Spracherkennung funktioniert:

* Apps installieren:
Google
Speech Recognition & Synthesis
* FireOS:
„Tastatur und Sprache“ → „Text-to-Speech“
* Fully Browser:
<code>Enable JavaScriptInterface (PLUS)</code> aktivieren

[[Kategorie:Code Snippets]]
[[Kategorie:Schnittstellen]]

FHEMWEB/VoiceControl: Web-STT & Hardware-Wakeword

2026-03-30T18:07:40Z

Schwatter:

[[Datei:VoiceControl_Logo.png|Mini|rechts]]

== VoiceControl – Sprachsteuerung via Browser und Atom Echo S3 ==

Diese Lösung ermöglicht eine flexible Sprachsteuerung für [[FHEM]]. Sprache wird in Text (Speech-to-Text) umgewandelt und als Reading <code>STT</code> im Device <code>global</code> bereitgestellt. Dieses Reading kann anschließend zentral (z. B. über <code>notify</code> oder <code>DOIF</code>) ausgewertet werden.

Das System unterstützt zwei unterschiedliche Wege zur Spracherfassung:

* Weg 1️⃣ (Software): Browser-basierte Komplettlösung
* Weg 2️⃣ (Hybrid): Hardware-Wakeword + Browser-Spracherkennung

=== Hilfe ===
* Forenthread zum {{Link2Forum|Topic=144147|LinkText=VoiceControl Sprachsteuerung}}
Dort befinden sich in Post #1 auch alle benötigten Dateien.

=== Funktionen ===

==== Grundprinzip ====
* Sprache → Speech-to-Text
* Ergebnis → Reading <code>STT</code> im Device <code>global</code>
* Zentrale Logik verarbeitet Befehle

==== Betriebsarten ====
* Push-to-Talk (nur Browser)
* Always-On mit Wakeword
* Hardware-Wakeword (Hybrid)

==== Rückmeldungen ====
* Sprachausgabe (TTS)
* Visuelle Bubble im Browser
* Optional gezielte Rückmeldung per Client-ID

== Weg 1️⃣: Browser-Lösung (voicecontrol.js) ==

Das Script nutzt die Google Web Speech API. Unterstützt werden Chromium-basierte Browser (Chrome, Edge, Fully Browser). Firefox wird aktuell nicht unterstützt.

=== Bedienung ===

==== Push-to-Talk ====
* Button gedrückt halten (~450 ms)
* Direkt sprechen (kein Wakeword nötig)
* Befehl wird sofort verarbeitet

==== Always-On ====
* Kurzer Klick aktiviert Dauerbetrieb
* Wakeword erforderlich (Standard: „James“)
* Nach Aktivierung permanentes Mithören

==== Wakeword ====
* Standard: <code>james</code>
* Anpassbar im Script:
<syntaxhighlight lang="javascript">
const wakewords = ["james"];</syntaxhighlight>

Ablauf:
# „James“ sagen
# System antwortet „Ja?“
# Zeitfenster (~6 Sekunden) für Befehl
# Danach automatische Verarbeitung oder Abbruch

=== Installation ===

==== Datei kopieren ====
<code>voicecontrol.js</code> nach:
<code>/opt/fhem/www/voicecontrol/</code>

==== Einbindung ====
<syntaxhighlight lang="perl">
attr WEBphone JavaScripts voicecontrol/voicecontrol.js
</syntaxhighlight>

==== Hinweis (HTTP ohne HTTPS) ====
Chrome benötigt Freigabe für Mikrofon:

* <code>chrome://flags/#unsafely-treat-insecure-origin-as-secure</code>
* Eigene URL hinzufügen
* Auf <code>Enabled</code> setzen

== Weg 2️⃣: Hybrid-Lösung mit Browser + Atom Echo (voicecontrol_echo.js) ==

Diese Variante kombiniert Hardware und Software:

* Wakeword-Erkennung erfolgt auf dem ESP (Atom Echo S3)
* Die eigentliche Sprachverarbeitung (Speech-to-Text) erfolgt im Browser

=== Funktionsweise ===

# Wakeword wird auf dem ESP erkannt
# FHEM erzeugt Event (z. B. <code>james_detected</code>)
# Browser empfängt Event via WebSocket
# Speech-to-Text startet im Browser
# Ergebnis wird an FHEM übertragen

=== Aktivierung ===

* Kurzer Klick auf Button aktiviert/deaktiviert System
* Baut WebSocket-Verbindung zu FHEM auf
* Kein Push-to-Talk-Modus

=== Konfiguration im Javascript ===

<syntaxhighlight lang="javascript">
const DEVICE = "atom_echos3r_9888e00f4280";
const TRIGGER = "james_detected";
const FHEM_IP = "192.168.1.76:8085";
</syntaxhighlight>

* <code>DEVICE</code> → FHEM-Device des ESP
* <code>TRIGGER</code> → Event bei Wakeword
* <code>FHEM_IP</code> → FHEM-Server

=== Konfiguration in der Yaml ===

Damit sich der ESP mit eurem MQTT-Server und WLAN verbindet, müssen folgende Stellen angepasst werden.

wifi:
ssid: "YOUR_SSID"
password: "YOUR_PW"
fast_connect: true

mqtt:
broker: 192.168.1.76
port: 1884
username: "YOUR_USERNAME"
password: "YOUR_PW"
topic_prefix: atom_echo

=== Wakeword (ESP / ESPHome) ===

Das Wakeword wird direkt auf dem ESP definiert:

* Umsetzung über ESPHome
* Eine große Auswahl an Wakewords sind hier zu finden:
https://github.com/TaterTotterson/microWakeWords

Hier ein Beispiel, wie das Wakeword definiert wird.

micro_wake_word:
id: mww
microphone: echo_mic
models:
- model: "https://github.com/TaterTotterson/microWakeWords/raw/main/microWakeWordsV2/james.json"
id: james_model
probability_cutoff: 0.6

=== Kommunikation ===

* WebSocket-Verbindung zu FHEM
* Lauscht auf Device-Events
* Automatischer Reconnect bei Abbruch

=== Ablauf nach Wakeword ===

# System sagt „Ja?“
# Browser startet SpeechRecognition
# Nutzer spricht Befehl
# Befehl wird verarbeitet
# Rückmeldung „Erledigt“

=== Installation ===

siehe oben wie unter Punkt 1.

== Zentrale Auswertung (Logik) ==

Beide Wege schreiben in:

<code>global:STT</code>

Die Verarbeitung erfolgt zentral über ein <code>notify</code>.

=== Beispiel: notify ===

<syntaxhighlight lang="perl">
defmod n_VoiceControl notify global:STT:.* {\
# Parsing: Befehl und ID trennen\
my ($cleanEvent, $clientId) = $EVENT =~ /^(.*)\s\[(.*)\]$/;;\
$cleanEvent //= $EVENT;;\
$clientId //= "unknown";;\
my $event_lc = lc($cleanEvent);;\
\
# Befehlmapping\
my %simpleCmds = (\
"stt: esszimmer licht an" => "set Lampe01_Ez on",\
"stt: esszimmer licht aus" => "set Lampe01_Ez off",\
"stt: küche licht an" => "set Deckenlampe_Kue on",\
"stt: küche licht aus" => "set Deckenlampe_Kue off",\
"stt: fernseher an" => "set VuPlus on",\
"stt: fernseher aus" => "set VuPlus off",\
"stt: lade roberto" => "set MQTT2_valetudo_FlusteredUnequaledFish charge",\
"stt: ambilight" => '{ system("sshpass -p \'1431Fhem1982\' ssh -o StrictHostKeyChecking=no root\@192.168.1.46 \"/usr/share/hyperhdr/scripts/hyperhdr_toggle.sh\"") }',\
);;\
\
if (exists $simpleCmds{$event_lc}) {\
fhem($simpleCmds{$event_lc});;\
}\
\
# Valetudo\
elsif ($event_lc =~ /reinige/) {\
my %rooms = (\
"arbeitszimmer" =>"Arbeitszimmer",\
"badezimmer" =>"Badezimmer",\
"esszimmer" =>"Esszimmer",\
"flur" =>"Flur",\
"küche" =>"Küche",\
"wohnzimmer" =>"Wohnzimmer");;\
my @found = grep { index($event_lc, $_) != -1 } keys %rooms;;\
fhem("set MQTT2_valetudo_FlusteredUnequaledFish clean_segment ".join(",", map { $rooms{$_} } @found)) if @found;;\
}\
# Lampenscene\
elsif ($event_lc =~ /ambiente/) {\
if ($event_lc =~ /(\d+)/) { my $b = ($1 > 255 ? 255 : ($1 < 1 ? 1 : $1));; fhem("set LampeSzeneAlle brightness $b") }\
elsif ($event_lc =~ /an/) { fhem("set LampeSzeneAlle on") }\
elsif ($event_lc =~ /aus/) { fhem("set LampeSzeneAlle off") }\
}\
# Kommandoübersicht\
elsif ($event_lc =~ /kommandos/) {\
my $h = '<div style="text-align:left;;min-width:200px;;font-family:sans-serif;;">Befehlsübersicht: ';;\
$h .= "• ".($_ =~ s/^stt: //r)." " for sort keys %simpleCmds;;\
$h .= "• reinige [küche, bad, ...] • ambiente [an|aus|0-255]</div>";;\
$h =~ s/'/\\"/g;;\
\
my $js = "if((document.querySelector('input[name=\"fw_id\"]')||{}).value==='$clientId'){FW_okDialog('$h')}";;\
FW_directNotify("#FHEMWEB:$_", $js, "")\
for devspec2array("TYPE=FHEMWEB");;\
}\
}
</syntaxhighlight>

== Unterschiede der Wege ==

{| class="wikitable"
! Feature
! Browser
! Hybrid (Atom Echo S3)
|-
| Wakeword
| Browser
| ESP (Hardware)
|-
| Push-to-Talk
| Ja
| Nein
|-
| Always-On
| Ja (bedingt)
| Ja
|-
| Audioaufnahme
| Möglich
| Nur nach Trigger
|-
| Architektur
| Software
| Software + Hardware
|-
| Stabilität
| Stabil
| Sehr stabil (Wakeword extern)
|}

== FireOS mit Fully Browser (Plus) ==

Damit die Spracherkennung funktioniert:

* Apps installieren:
Google
Speech Recognition & Synthesis
* FireOS:
„Tastatur und Sprache“ → „Text-to-Speech“
* Fully Browser:
<code>Enable JavaScriptInterface (PLUS)</code> aktivieren

[[Kategorie:Code Snippets]]
[[Kategorie:Schnittstellen]]

FHEMWEB/VoiceControl: Web-STT & Hardware-Wakeword

2026-03-30T17:51:08Z

Schwatter: Die Seite wurde neu angelegt: „rechts == VoiceControl – Sprachsteuerung via Browser und Atom Echo S3 == Diese Lösung ermöglicht eine flexible Sprachsteuerung für FHEM. Sprache wird in Text (Speech-to-Text) umgewandelt und als Reading <code>STT</code> im Device <code>global</code> bereitgestellt. Dieses Reading kann anschließend zentral (z. B. über <code>notify</code> oder <code>DOIF</code>) ausgewertet werden. Das System unterstützt z…“

[[Datei:VoiceControl_Logo.png|Mini|rechts]]

== VoiceControl – Sprachsteuerung via Browser und Atom Echo S3 ==

Diese Lösung ermöglicht eine flexible Sprachsteuerung für [[FHEM]]. Sprache wird in Text (Speech-to-Text) umgewandelt und als Reading <code>STT</code> im Device <code>global</code> bereitgestellt. Dieses Reading kann anschließend zentral (z. B. über <code>notify</code> oder <code>DOIF</code>) ausgewertet werden.

Das System unterstützt zwei unterschiedliche Wege zur Spracherfassung:

* Weg 1️⃣ (Software): Browser-basierte Komplettlösung
* Weg 2️⃣ (Hybrid): Hardware-Wakeword + Browser-Spracherkennung

=== Hilfe ===
* Forenthread zum {{Link2Forum|Topic=144147|LinkText=VoiceControl Sprachsteuerung}}
Dort befinden sich in Post #1 auch alle benötigten Dateien.

=== Funktionen ===

==== Grundprinzip ====
* Sprache → Speech-to-Text
* Ergebnis → Reading <code>STT</code> im Device <code>global</code>
* Zentrale Logik verarbeitet Befehle

==== Betriebsarten ====
* Push-to-Talk (nur Browser)
* Always-On mit Wakeword
* Hardware-Wakeword (Hybrid)

==== Rückmeldungen ====
* Sprachausgabe (TTS)
* Visuelle Bubble im Browser
* Optional gezielte Rückmeldung per Client-ID

== Weg 1️⃣: Browser-Lösung (voicecontrol.js) ==

Das Script nutzt die Google Web Speech API. Unterstützt werden Chromium-basierte Browser (Chrome, Edge, Fully Browser). Firefox wird aktuell nicht unterstützt.

=== Bedienung ===

==== Push-to-Talk ====
* Button gedrückt halten (~450 ms)
* Direkt sprechen (kein Wakeword nötig)
* Befehl wird sofort verarbeitet

==== Always-On ====
* Kurzer Klick aktiviert Dauerbetrieb
* Wakeword erforderlich (Standard: „James“)
* Nach Aktivierung permanentes Mithören

==== Wakeword ====
* Standard: <code>james</code>
* Anpassbar im Script:
<syntaxhighlight lang="javascript">
const wakewords = ["james"];</syntaxhighlight>

Ablauf:
# „James“ sagen
# System antwortet „Ja?“
# Zeitfenster (~6 Sekunden) für Befehl
# Danach automatische Verarbeitung oder Abbruch

=== Installation ===

==== Datei kopieren ====
<code>voicecontrol.js</code> nach:
<code>/opt/fhem/www/voicecontrol/</code>

==== Einbindung ====
<syntaxhighlight lang="perl">
attr WEBphone JavaScripts voicecontrol/voicecontrol.js
</syntaxhighlight>

==== Hinweis (HTTP ohne HTTPS) ====
Chrome benötigt Freigabe für Mikrofon:

* <code>chrome://flags/#unsafely-treat-insecure-origin-as-secure</code>
* Eigene URL hinzufügen
* Auf <code>Enabled</code> setzen

== Weg 2️⃣: Hybrid-Lösung mit Browser + Atom Echo (voicecontrol_echo.js) ==

Diese Variante kombiniert Hardware und Software:

* Wakeword-Erkennung erfolgt auf dem ESP (Atom Echo S3)
* Die eigentliche Sprachverarbeitung (Speech-to-Text) erfolgt im Browser

=== Funktionsweise ===

# Wakeword wird auf dem ESP erkannt
# FHEM erzeugt Event (z. B. <code>james_detected</code>)
# Browser empfängt Event via WebSocket
# Speech-to-Text startet im Browser
# Ergebnis wird an FHEM übertragen

=== Aktivierung ===

* Kurzer Klick auf Button aktiviert/deaktiviert System
* Baut WebSocket-Verbindung zu FHEM auf
* Kein Push-to-Talk-Modus

=== Konfiguration im Javascript ===

<syntaxhighlight lang="javascript">
const DEVICE = "atom_echos3r_9888e00f4280";
const TRIGGER = "james_detected";
const FHEM_IP = "192.168.1.76:8085";
</syntaxhighlight>

* <code>DEVICE</code> → FHEM-Device des ESP
* <code>TRIGGER</code> → Event bei Wakeword
* <code>FHEM_IP</code> → FHEM-Server

=== Konfiguration in der Yaml ===

Damit sich der ESP mit eurem MQTT-Server und WLAN verbindet, müssen folgende Stellen angepasst werden.

wifi:
ssid: "YOUR_SSID"
password: "YOUR_PW"
fast_connect: true

mqtt:
broker: 192.168.1.76
port: 1884
username: "YOUR_USERNAME"
password: "YOUR_PW"
topic_prefix: atom_echo

=== Wakeword (ESP / ESPHome) ===

Das Wakeword wird direkt auf dem ESP definiert:

* Umsetzung über ESPHome
* Eine große Auswahl an Wakewords sind hier zu finden:
https://github.com/TaterTotterson/microWakeWords

Hier ein Beispiel, wie das Wakeword definiert wird.

micro_wake_word:
id: mww
microphone: echo_mic
models:
- model: "https://github.com/TaterTotterson/microWakeWords/raw/main/microWakeWordsV2/james.json"
id: james_model
probability_cutoff: 0.6

=== Kommunikation ===

* WebSocket-Verbindung zu FHEM
* Lauscht auf Device-Events
* Automatischer Reconnect bei Abbruch

=== Ablauf nach Wakeword ===

# System sagt „Ja?“
# Browser startet SpeechRecognition
# Nutzer spricht Befehl
# Befehl wird verarbeitet
# Rückmeldung „Erledigt“

=== Installation ===

siehe oben wie unter Punkt 1.

== Zentrale Auswertung (Logik) ==

Beide Wege schreiben in:

<code>global:STT</code>

Die Verarbeitung erfolgt zentral über ein <code>notify</code>.

=== Beispiel: notify ===

<syntaxhighlight lang="perl">
defmod n_VoiceControl notify global:STT:.* {\
# Parsing: Befehl und ID trennen\
my ($cleanEvent, $clientId) = $EVENT =~ /^(.*)\s\[(.*)\]$/;;\
$cleanEvent //= $EVENT;;\
$clientId //= "unknown";;\
my $event_lc = lc($cleanEvent);;\
\
# Befehlmapping\
my %simpleCmds = (\
"stt: esszimmer licht an" => "set Lampe01_Ez on",\
"stt: esszimmer licht aus" => "set Lampe01_Ez off",\
"stt: küche licht an" => "set Deckenlampe_Kue on",\
"stt: küche licht aus" => "set Deckenlampe_Kue off",\
"stt: fernseher an" => "set VuPlus on",\
"stt: fernseher aus" => "set VuPlus off",\
"stt: lade roberto" => "set MQTT2_valetudo_FlusteredUnequaledFish charge",\
"stt: ambilight" => '{ system("sshpass -p \'1431Fhem1982\' ssh -o StrictHostKeyChecking=no root\@192.168.1.46 \"/usr/share/hyperhdr/scripts/hyperhdr_toggle.sh\"") }',\
);;\
\
if (exists $simpleCmds{$event_lc}) {\
fhem($simpleCmds{$event_lc});;\
}\
\
# Valetudo\
elsif ($event_lc =~ /reinige/) {\
my %rooms = (\
"arbeitszimmer" =>"Arbeitszimmer",\
"badezimmer" =>"Badezimmer",\
"esszimmer" =>"Esszimmer",\
"flur" =>"Flur",\
"küche" =>"Küche",\
"wohnzimmer" =>"Wohnzimmer");;\
my @found = grep { index($event_lc, $_) != -1 } keys %rooms;;\
fhem("set MQTT2_valetudo_FlusteredUnequaledFish clean_segment ".join(",", map { $rooms{$_} } @found)) if @found;;\
}\
# Lampenscene\
elsif ($event_lc =~ /ambiente/) {\
if ($event_lc =~ /(\d+)/) { my $b = ($1 > 255 ? 255 : ($1 < 1 ? 1 : $1));; fhem("set LampeSzeneAlle brightness $b") }\
elsif ($event_lc =~ /an/) { fhem("set LampeSzeneAlle on") }\
elsif ($event_lc =~ /aus/) { fhem("set LampeSzeneAlle off") }\
}\
# Kommandoübersicht\
elsif ($event_lc =~ /kommandos/) {\
my $h = '<div style="text-align:left;;min-width:200px;;font-family:sans-serif;;">Befehlsübersicht: ';;\
$h .= "• ".($_ =~ s/^stt: //r)." " for sort keys %simpleCmds;;\
$h .= "• reinige [küche, bad, ...] • ambiente [an|aus|0-255]</div>";;\
$h =~ s/'/\\"/g;;\
\
my $js = "if((document.querySelector('input[name=\"fw_id\"]')||{}).value==='$clientId'){FW_okDialog('$h')}";;\
FW_directNotify("#FHEMWEB:$_", $js, "")\
for devspec2array("TYPE=FHEMWEB");;\
}\
}
</syntaxhighlight>

== Unterschiede der Wege ==

{| class="wikitable"
! Feature
! Browser
! Hybrid (Atom Echo S3)
|-
| Wakeword
| Browser
| ESP (Hardware)
|-
| Push-to-Talk
| Ja
| Nein
|-
| Always-On
| Ja
| Ja
|-
| Audioaufnahme
| Permanent möglich
| Nur nach Trigger
|-
| Architektur
| Software
| Software + Hardware
|-
| Stabilität
| Stabil
| Sehr stabil (Wakeword extern)
|}

== FireOS mit Fully Browser (Plus) ==

Damit die Spracherkennung funktioniert:

* Apps installieren:
Google
Speech Recognition & Synthesis
* FireOS:
„Tastatur und Sprache“ → „Text-to-Speech“
* Fully Browser:
<code>Enable JavaScriptInterface (PLUS)</code> aktivieren

[[Kategorie:Code Snippets]]
[[Kategorie:Schnittstellen]]

FHEMWEB/Widgets

2026-01-03T09:38:44Z

Schwatter:

Widgets sind Frontendelemente, die der Dateneingabe und -anzeige dienen. Die hier gezeigten Frontendelemente werden durch [[FHEMWEB]] ([[PGM2]]) bereitgestellt.

== Syntax ==
Die Syntax der Widgets ist unter dem Attribut [https://fhem.de/commandref_DE.html#widgetOverride widgetOverride] in der Befehlreferenz beschrieben.

== Verwendung ==
Viele Module (u.a. [[DOIF]], [[dummy]], [[MQTT_DEVICE]], [[MQTT2_DEVICE]], [[MYSENSORS_DEVICE]], [[readingsGroup]]) bieten die Möglichkeit eine Benutzerschnittstelle zu erstellen.

Widgets werden über <code><name>:<modifier></code>-Paare an [[Readings]] oder [[Attribute]] gebunden, dabei ist:

* <code><name></code> ein Readingsname, ein Attribut oder ein Mapping-Argument.
* <code><modifier></code> ein Widget einschliesslich Parameter.

Bei der Erstellung spielen verschiedene Attribute zusammen:

* Mit readingList (bzw. bei Modulen, die dies nicht kennen: widgetOverride) ist es möglich den Set-Befehl auf [[Readings]] zu erweitern, siehe [https://fhem.de/commandref_DE.html#readingList readingList].
* Mit [[setList]] (bzw. widgetOverride) werden die Widgets einem Reading zugeordnet und parametrisiert, siehe [https://fhem.de/commandref_DE.html#setList setList].
* Mit [[webCmd]] werden die Widgets angezeigt, siehe [https://fhem.de/commandref_DE.html#setList webCmd].
* Mit webCmdLabel werden die Widgets beschriftet und tabellarisch angeordnet, siehe [https://fhem.de/commandref_DE.html#webCmdLabel webCmdLabel].
* Mit widgetOverride ist es möglich, die im Modul festgelegten Widgets zu überschreiben, siehe [https://fhem.de/commandref_DE.html#widgetOverride widgetOverride].
* Mit [[eventMap]] ist es möglich Widgets an Mapping-Argumente zu binden, siehe [https://fhem.de/commandref_DE.html#eventMap eventMap] und {{Link2Forum|Topic=76755|LinkText=eventMap und Widget-Anbindung}}.
Das Zusammenspiel dieser Attribute ist u.A. im Artikel [[DeviceOverview anpassen#webCmd .26 Co|DeviceOverview anpassen]] näher erläutert.

== Zusammenstellung der Widgets ==
[[Datei:fhemweb_widgets_1.png|mini|rechts]]
Die Bildschirmkopie zeigt das Benutzerinterface des Dummys mit den Widgets

=== weitere Konfiguration ===
* '''knob''', siehe https://github.com/aterrien/jQuery-Knob
* '''colorpicker''', siehe [[Color]]

 
== Das Beispiel für [[DOIF/Import_von_Code_Snippets|Raw definition]] zum Ausprobieren ==
In der vorstehenden Abbildung fehlt das Look and Feel der Widgets. Mit dem folgenden Code-Snippet zum Ausprobieren, wird dies ergänzt.

<pre>
defmod widgets dummy
attr widgets readingList 00select 01select 02selectnumbers 03selectnumbers 04textField 05textFieldNL 06textField-long 07textFieldNL-long 08slider 09multiple 10multiple-strict 11knob 12sortable 13sortable-strict 14sortable-given 15uzsuToggle 16uzsuSelect 17uzsuSelectRadio 18uzsuDropDown 19colorpicker_RGB 19colorpicker_HSV 19colorpicker_CT 19colorpicker_HUE 19colorpicker_BRI 20time 21iconRadio 21iconRadio_use4icon 22iconSwitch 23iconLabel 24iconButtons 24iconButtons_use4icon 25bitfield 26widgetList
attr widgets room 0_Test
attr widgets setList 00select:1,2,3,4,5,0,a,b,c,def,hik \
01select:select,1,2,3,4,5,0,a,b,c,def,hik \
02selectnumbers:selectnumbers,-30,3,33,1,lin \
03selectnumbers:selectnumbers,1,0.0625,140000,0,log10 \
04textField:textField \
05textFieldNL:textFieldNL\
06textField-long:textField-long,87 \
07textFieldNL-long:textFieldNL-long,87 \
08slider:slider,7,0.5,30,1 \
09multiple:multiple,shirt,shoes,skirt,trowsers \
10multiple-strict:multiple-strict,red,green,blue,yellow \
11knob:knob,min:0,max:360,width:50,height:50,step:1,lineCap:round,angleOffset:180,cursor:3,thickness:.3 \
12sortable:sortable,blue,shirt,white,shoes,brown,skirt,black,jeans\
13sortable-strict:sortable-strict,blue,shirt,white,shoes,brown,skirt,black,jeans\
14sortable-given:sortable-given,blue,shirt,white,shoes,brown,skirt,black,jeans\
15uzsuToggle:uzsuToggle,ON,OFF\
16uzsuSelect:uzsuSelect,blue,shirt,white,shoes,brown,skirt,black,jeans\
17uzsuSelectRadio:uzsuSelectRadio,MW,KW,UKW\
18uzsuDropDown:uzsuDropDown,red,green,blue,yellow \
19colorpicker_RGB:colorpicker,RGB \
19colorpicker_HSV:colorpicker,HSV \
19colorpicker_CT:colorpicker,CT,2000,10,6500 \
19colorpicker_HUE:colorpicker,HUE,0,1,359 \
19colorpicker_BRI:colorpicker,BRI,0,1,100 \
20time:time \
21iconRadio:iconRadio,#808080,10,fts_shutter_10@FFA500,20,fts_shutter_20@orange,30,fts_shutter_30@orange,40,fts_shutter_40@orange,50,fts_shutter_50@orange,60,fts_shutter_60@orange,70,fts_shutter_70@orange,80,fts_shutter_80@orange,90,fts_shutter_90@orange,100,fts_shutter_100@orange \
21iconRadio_use4icon:iconRadio,use4icon@808080,10,fts_shutter_10@FFA500,20,fts_shutter_20@orange,30,fts_shutter_30@orange,40,fts_shutter_40@orange,50,fts_shutter_50@orange,60,fts_shutter_60@orange,70,fts_shutter_70@orange,80,fts_shutter_80@orange,90,fts_shutter_90@orange,100,fts_shutter_100@orange \
22iconSwitch:iconSwitch,wide#open,@red,half#open,fts_shutter_50@%23cd2906,totally#closed,fts_shutter_100@magenta,half#closed, \
23iconLabel:iconLabel,wide#open,@red,half#open,fts_shutter_50@%23cd2906,totally#closed,fts_shutter_100@magenta,half#closed,\
24iconButtons:iconButtons,orange,Bad,sani_heating@green,Wohnzimmer_1,sani_heating@green,Wohnzimmer_2,sani_heating@green,Esszimmer,sani_heating@green,Diele,sani_heating@green,Gäste_WC,sani_heating@green,Büro,sani_heating@green,Wintergarten,sani_heating@green,Werkstatt,sani_heating@green,Schlafzimmer,sani_heating@green \
24iconButtons_use4icon:iconButtons,use4icon@red,Bad,sani_heating@0000FF,Wohnzimmer_1,sani_heating@blue,Wohnzimmer_2,sani_heating@blue,Esszimmer,sani_heating@blue,Diele,sani_heating@blue,Gäste_WC,sani_heating@blue,Büro,sani_heating@blue,Wintergarten,sani_heating@blue,Werkstatt,sani_heating@blue,Schlafzimmer,sani_heating@0000FF\
25bitfield:bitfield\
26widgetList:widgetList,4,select,Bad,Küche,Wohnzimmer,6,selectnumbers,7,1,30,0,lin
attr widgets userReadings 23iconLabel:22iconSwitch.* {ReadingsVal($name,"22iconSwitch","wideopen")}
attr widgets webCmd 00select:01select:02selectnumbers:03selectnumbers:04textField:05textFieldNL:06textField-long:07textFieldNL-long:08slider:20time:09multiple:10multiple-strict:11knob:12sortable:13sortable-strict:14sortable-given:15uzsuToggle:16uzsuSelect:17uzsuSelectRadio:18uzsuDropDown:19colorpicker_RGB:19colorpicker_HSV:19colorpicker_CT:19colorpicker_HUE:19colorpicker_BRI:21iconRadio:21iconRadio_use4icon:24iconButtons:24iconButtons_use4icon:22iconSwitch:23iconLabel:25bitfield:26widgetList
attr widgets webCmdLabel select (default)\
:select (explicit)\
:selectnumbers (linear)\
:selectnumbers (logarithmic)\
:textField\
:textFieldNL (no label)\
:textField-long (multi-line)\
:textFieldNL-long (multi-line,no label)\
:slider\
:time\
:multiple\
:multiple-strict\
:knob\
:sortable\
:sortable-strict\
:sortable-given\
:uzsuToggle\
:uzsuSelect\
:uzsuSelectRadio\
:uzsuDropDown\
:colorpicker RGB\
:colorpicker HSV\
:colorpicker Farbtemperatur\
:colorpicker Farbton\
:colorpicker Helligkeit\
:iconRadio\
:iconRadio prefix use4icon\
:iconButtons\
:iconButtons prefix use4icon\
:iconSwitch\
:iconLabel\
:bitfield\
:widgetList (Raum Temperatur)
attr widgets widgetOverride readingList|setList|webCmd|webCmdLabel|widgetOverride:textField-long,86

setstate widgets iconSwitch wide#open
setstate widgets 2024-03-19 20:18:38 00select 1
setstate widgets 2021-09-27 18:52:48 01select 0
setstate widgets 2021-09-27 18:52:33 02selectnumbers 0.0
setstate widgets 2021-09-27 12:13:35 03selectnumbers 64938
setstate widgets 2023-01-03 14:32:14 04textField Hello
setstate widgets 2017-08-24 17:39:22 05textField Hallo
setstate widgets 2023-01-03 14:47:53 05textFieldNL Hello
setstate widgets 2023-01-08 19:25:46 06textField-long Hello
setstate widgets 2022-11-28 18:23:30 07textFieldNL-long Hello
setstate widgets 2017-08-24 18:22:07 08slider 17.0
setstate widgets 2017-08-24 18:22:40 09multiple shirt,shoes
setstate widgets 2017-08-24 18:22:57 10multiple-strict red,green
setstate widgets 2021-09-27 03:19:35 11knob 207
setstate widgets 2017-08-24 18:21:09 12sortable blue,shirt,brown,skirt,white,shoes,black,jeans
setstate widgets 2017-08-24 18:48:17 13sortable-strict blue,white,shirt,shoes,brown,skirt,black,jeans
setstate widgets 2017-08-24 18:49:34 14sortable-given blue,shirt,white,shoes,brown,skirt,black,jeans
setstate widgets 2024-03-19 20:11:06 15uzsuToggle OFF
setstate widgets 2024-03-19 20:10:53 16uzsuSelect brown
setstate widgets 2024-03-19 20:11:16 17uzsuSelectRadio UKW
setstate widgets 2024-03-19 20:11:09 18uzsuDropDown blue
setstate widgets 2017-10-07 07:56:43 19colorpicker_BRI 54
setstate widgets 2017-10-07 07:56:31 19colorpicker_CT 5100
setstate widgets 2017-10-07 07:59:26 19colorpicker_HSV 208c20
setstate widgets 2017-10-07 07:56:29 19colorpicker_HUE 94
setstate widgets 2017-10-07 07:53:01 19colorpicker_RGB c95918
setstate widgets 2017-08-24 19:03:20 20time 12:00
setstate widgets 2021-09-27 18:54:56 21iconRadio 90
setstate widgets 2021-09-27 03:19:18 21iconRadio_use4icon 40
setstate widgets 2024-03-20 18:55:18 22iconSwitch half closed
setstate widgets 2024-03-20 18:55:18 23iconLabel half closed
setstate widgets 2021-09-27 18:57:53 24iconButtons Büro,Schlafzimmer
setstate widgets 2017-10-25 08:20:05 24iconButtons_use4icon Bad,Wohnzimmer_2,Diele,Büro,Werkstatt
setstate widgets 2024-03-19 20:07:03 25bitfield 25
setstate widgets 2024-04-11 19:25:52 26widgetList Küche,23
setstate widgets 2021-09-27 19:02:25 state iconSwitch wide#open
</pre>

== Beigesteuerte Widgets ==
[[Datei:datetimepicker.png|mini|rechts]]
* Forenthread zu {{Link2Forum|Topic=35736|LinkText= DateTimePicker Widget}}
 [[Datei:Controlminidash.png|mini|rechts]]
* Wiki Seite zu [[FHEMWEB/ControlMiniDash| ControlMiniDash Widget]]
 [[Datei:Minichart flex mobile.png|mini|rechts]]
* Wiki Seite zu [[FHEMWEB/MiniChart| MiniChart Widget]]
 [[Datei:AnimatedSVG.gif|mini|rechts]]
* Wiki Seite zu [[FHEMWEB/iconAnimated| iconAnimated Widget]] (Bild drücken für Gif)

[[Kategorie:Code Snippets]]
[[Kategorie:FHEM Frontends]]
[[Kategorie:Glossary]]
[[Kategorie:HOWTOS]]

FHEMWEB/Widgets

2026-01-03T09:15:39Z

Schwatter:

Widgets sind Frontendelemente, die der Dateneingabe und -anzeige dienen. Die hier gezeigten Frontendelemente werden durch [[FHEMWEB]] ([[PGM2]]) bereitgestellt.

== Syntax ==
Die Syntax der Widgets ist unter dem Attribut [https://fhem.de/commandref_DE.html#widgetOverride widgetOverride] in der Befehlreferenz beschrieben.

== Verwendung ==
Viele Module (u.a. [[DOIF]], [[dummy]], [[MQTT_DEVICE]], [[MQTT2_DEVICE]], [[MYSENSORS_DEVICE]], [[readingsGroup]]) bieten die Möglichkeit eine Benutzerschnittstelle zu erstellen.

Widgets werden über <code><name>:<modifier></code>-Paare an [[Readings]] oder [[Attribute]] gebunden, dabei ist:

* <code><name></code> ein Readingsname, ein Attribut oder ein Mapping-Argument.
* <code><modifier></code> ein Widget einschliesslich Parameter.

Bei der Erstellung spielen verschiedene Attribute zusammen:

* Mit readingList (bzw. bei Modulen, die dies nicht kennen: widgetOverride) ist es möglich den Set-Befehl auf [[Readings]] zu erweitern, siehe [https://fhem.de/commandref_DE.html#readingList readingList].
* Mit [[setList]] (bzw. widgetOverride) werden die Widgets einem Reading zugeordnet und parametrisiert, siehe [https://fhem.de/commandref_DE.html#setList setList].
* Mit [[webCmd]] werden die Widgets angezeigt, siehe [https://fhem.de/commandref_DE.html#setList webCmd].
* Mit webCmdLabel werden die Widgets beschriftet und tabellarisch angeordnet, siehe [https://fhem.de/commandref_DE.html#webCmdLabel webCmdLabel].
* Mit widgetOverride ist es möglich, die im Modul festgelegten Widgets zu überschreiben, siehe [https://fhem.de/commandref_DE.html#widgetOverride widgetOverride].
* Mit [[eventMap]] ist es möglich Widgets an Mapping-Argumente zu binden, siehe [https://fhem.de/commandref_DE.html#eventMap eventMap] und {{Link2Forum|Topic=76755|LinkText=eventMap und Widget-Anbindung}}.
Das Zusammenspiel dieser Attribute ist u.A. im Artikel [[DeviceOverview anpassen#webCmd .26 Co|DeviceOverview anpassen]] näher erläutert.

== Zusammenstellung der Widgets ==
[[Datei:fhemweb_widgets_1.png|mini|rechts]]
Die Bildschirmkopie zeigt das Benutzerinterface des Dummys mit den Widgets

=== weitere Konfiguration ===
* '''knob''', siehe http://anthonyterrien.com/knob/
* '''colorpicker''', siehe [[Color]]

 
== Das Beispiel für [[DOIF/Import_von_Code_Snippets|Raw definition]] zum Ausprobieren ==
In der vorstehenden Abbildung fehlt das Look and Feel der Widgets. Mit dem folgenden Code-Snippet zum Ausprobieren, wird dies ergänzt.

<pre>
defmod widgets dummy
attr widgets readingList 00select 01select 02selectnumbers 03selectnumbers 04textField 05textFieldNL 06textField-long 07textFieldNL-long 08slider 09multiple 10multiple-strict 11knob 12sortable 13sortable-strict 14sortable-given 15uzsuToggle 16uzsuSelect 17uzsuSelectRadio 18uzsuDropDown 19colorpicker_RGB 19colorpicker_HSV 19colorpicker_CT 19colorpicker_HUE 19colorpicker_BRI 20time 21iconRadio 21iconRadio_use4icon 22iconSwitch 23iconLabel 24iconButtons 24iconButtons_use4icon 25bitfield 26widgetList
attr widgets room 0_Test
attr widgets setList 00select:1,2,3,4,5,0,a,b,c,def,hik \
01select:select,1,2,3,4,5,0,a,b,c,def,hik \
02selectnumbers:selectnumbers,-30,3,33,1,lin \
03selectnumbers:selectnumbers,1,0.0625,140000,0,log10 \
04textField:textField \
05textFieldNL:textFieldNL\
06textField-long:textField-long,87 \
07textFieldNL-long:textFieldNL-long,87 \
08slider:slider,7,0.5,30,1 \
09multiple:multiple,shirt,shoes,skirt,trowsers \
10multiple-strict:multiple-strict,red,green,blue,yellow \
11knob:knob,min:0,max:360,width:50,height:50,step:1,lineCap:round,angleOffset:180,cursor:3,thickness:.3 \
12sortable:sortable,blue,shirt,white,shoes,brown,skirt,black,jeans\
13sortable-strict:sortable-strict,blue,shirt,white,shoes,brown,skirt,black,jeans\
14sortable-given:sortable-given,blue,shirt,white,shoes,brown,skirt,black,jeans\
15uzsuToggle:uzsuToggle,ON,OFF\
16uzsuSelect:uzsuSelect,blue,shirt,white,shoes,brown,skirt,black,jeans\
17uzsuSelectRadio:uzsuSelectRadio,MW,KW,UKW\
18uzsuDropDown:uzsuDropDown,red,green,blue,yellow \
19colorpicker_RGB:colorpicker,RGB \
19colorpicker_HSV:colorpicker,HSV \
19colorpicker_CT:colorpicker,CT,2000,10,6500 \
19colorpicker_HUE:colorpicker,HUE,0,1,359 \
19colorpicker_BRI:colorpicker,BRI,0,1,100 \
20time:time \
21iconRadio:iconRadio,#808080,10,fts_shutter_10@FFA500,20,fts_shutter_20@orange,30,fts_shutter_30@orange,40,fts_shutter_40@orange,50,fts_shutter_50@orange,60,fts_shutter_60@orange,70,fts_shutter_70@orange,80,fts_shutter_80@orange,90,fts_shutter_90@orange,100,fts_shutter_100@orange \
21iconRadio_use4icon:iconRadio,use4icon@808080,10,fts_shutter_10@FFA500,20,fts_shutter_20@orange,30,fts_shutter_30@orange,40,fts_shutter_40@orange,50,fts_shutter_50@orange,60,fts_shutter_60@orange,70,fts_shutter_70@orange,80,fts_shutter_80@orange,90,fts_shutter_90@orange,100,fts_shutter_100@orange \
22iconSwitch:iconSwitch,wide#open,@red,half#open,fts_shutter_50@%23cd2906,totally#closed,fts_shutter_100@magenta,half#closed, \
23iconLabel:iconLabel,wide#open,@red,half#open,fts_shutter_50@%23cd2906,totally#closed,fts_shutter_100@magenta,half#closed,\
24iconButtons:iconButtons,orange,Bad,sani_heating@green,Wohnzimmer_1,sani_heating@green,Wohnzimmer_2,sani_heating@green,Esszimmer,sani_heating@green,Diele,sani_heating@green,Gäste_WC,sani_heating@green,Büro,sani_heating@green,Wintergarten,sani_heating@green,Werkstatt,sani_heating@green,Schlafzimmer,sani_heating@green \
24iconButtons_use4icon:iconButtons,use4icon@red,Bad,sani_heating@0000FF,Wohnzimmer_1,sani_heating@blue,Wohnzimmer_2,sani_heating@blue,Esszimmer,sani_heating@blue,Diele,sani_heating@blue,Gäste_WC,sani_heating@blue,Büro,sani_heating@blue,Wintergarten,sani_heating@blue,Werkstatt,sani_heating@blue,Schlafzimmer,sani_heating@0000FF\
25bitfield:bitfield\
26widgetList:widgetList,4,select,Bad,Küche,Wohnzimmer,6,selectnumbers,7,1,30,0,lin
attr widgets userReadings 23iconLabel:22iconSwitch.* {ReadingsVal($name,"22iconSwitch","wideopen")}
attr widgets webCmd 00select:01select:02selectnumbers:03selectnumbers:04textField:05textFieldNL:06textField-long:07textFieldNL-long:08slider:20time:09multiple:10multiple-strict:11knob:12sortable:13sortable-strict:14sortable-given:15uzsuToggle:16uzsuSelect:17uzsuSelectRadio:18uzsuDropDown:19colorpicker_RGB:19colorpicker_HSV:19colorpicker_CT:19colorpicker_HUE:19colorpicker_BRI:21iconRadio:21iconRadio_use4icon:24iconButtons:24iconButtons_use4icon:22iconSwitch:23iconLabel:25bitfield:26widgetList
attr widgets webCmdLabel select (default)\
:select (explicit)\
:selectnumbers (linear)\
:selectnumbers (logarithmic)\
:textField\
:textFieldNL (no label)\
:textField-long (multi-line)\
:textFieldNL-long (multi-line,no label)\
:slider\
:time\
:multiple\
:multiple-strict\
:knob\
:sortable\
:sortable-strict\
:sortable-given\
:uzsuToggle\
:uzsuSelect\
:uzsuSelectRadio\
:uzsuDropDown\
:colorpicker RGB\
:colorpicker HSV\
:colorpicker Farbtemperatur\
:colorpicker Farbton\
:colorpicker Helligkeit\
:iconRadio\
:iconRadio prefix use4icon\
:iconButtons\
:iconButtons prefix use4icon\
:iconSwitch\
:iconLabel\
:bitfield\
:widgetList (Raum Temperatur)
attr widgets widgetOverride readingList|setList|webCmd|webCmdLabel|widgetOverride:textField-long,86

setstate widgets iconSwitch wide#open
setstate widgets 2024-03-19 20:18:38 00select 1
setstate widgets 2021-09-27 18:52:48 01select 0
setstate widgets 2021-09-27 18:52:33 02selectnumbers 0.0
setstate widgets 2021-09-27 12:13:35 03selectnumbers 64938
setstate widgets 2023-01-03 14:32:14 04textField Hello
setstate widgets 2017-08-24 17:39:22 05textField Hallo
setstate widgets 2023-01-03 14:47:53 05textFieldNL Hello
setstate widgets 2023-01-08 19:25:46 06textField-long Hello
setstate widgets 2022-11-28 18:23:30 07textFieldNL-long Hello
setstate widgets 2017-08-24 18:22:07 08slider 17.0
setstate widgets 2017-08-24 18:22:40 09multiple shirt,shoes
setstate widgets 2017-08-24 18:22:57 10multiple-strict red,green
setstate widgets 2021-09-27 03:19:35 11knob 207
setstate widgets 2017-08-24 18:21:09 12sortable blue,shirt,brown,skirt,white,shoes,black,jeans
setstate widgets 2017-08-24 18:48:17 13sortable-strict blue,white,shirt,shoes,brown,skirt,black,jeans
setstate widgets 2017-08-24 18:49:34 14sortable-given blue,shirt,white,shoes,brown,skirt,black,jeans
setstate widgets 2024-03-19 20:11:06 15uzsuToggle OFF
setstate widgets 2024-03-19 20:10:53 16uzsuSelect brown
setstate widgets 2024-03-19 20:11:16 17uzsuSelectRadio UKW
setstate widgets 2024-03-19 20:11:09 18uzsuDropDown blue
setstate widgets 2017-10-07 07:56:43 19colorpicker_BRI 54
setstate widgets 2017-10-07 07:56:31 19colorpicker_CT 5100
setstate widgets 2017-10-07 07:59:26 19colorpicker_HSV 208c20
setstate widgets 2017-10-07 07:56:29 19colorpicker_HUE 94
setstate widgets 2017-10-07 07:53:01 19colorpicker_RGB c95918
setstate widgets 2017-08-24 19:03:20 20time 12:00
setstate widgets 2021-09-27 18:54:56 21iconRadio 90
setstate widgets 2021-09-27 03:19:18 21iconRadio_use4icon 40
setstate widgets 2024-03-20 18:55:18 22iconSwitch half closed
setstate widgets 2024-03-20 18:55:18 23iconLabel half closed
setstate widgets 2021-09-27 18:57:53 24iconButtons Büro,Schlafzimmer
setstate widgets 2017-10-25 08:20:05 24iconButtons_use4icon Bad,Wohnzimmer_2,Diele,Büro,Werkstatt
setstate widgets 2024-03-19 20:07:03 25bitfield 25
setstate widgets 2024-04-11 19:25:52 26widgetList Küche,23
setstate widgets 2021-09-27 19:02:25 state iconSwitch wide#open
</pre>

== Beigesteuerte Widgets ==
[[Datei:datetimepicker.png|mini|rechts]]
* Forenthread zu {{Link2Forum|Topic=35736|LinkText= DateTimePicker Widget}}
 [[Datei:Controlminidash.png|mini|rechts]]
* Wiki Seite zu [[FHEMWEB/ControlMiniDash| ControlMiniDash Widget]]
 [[Datei:Minichart flex mobile.png|mini|rechts]]
* Wiki Seite zu [[FHEMWEB/MiniChart| MiniChart Widget]]
 [[Datei:AnimatedSVG.gif|mini|rechts]]
* Wiki Seite zu [[FHEMWEB/iconAnimated| iconAnimated Widget]] (Bild drücken für Gif)

[[Kategorie:Code Snippets]]
[[Kategorie:FHEM Frontends]]
[[Kategorie:Glossary]]
[[Kategorie:HOWTOS]]

FHEMWEB/ControlMiniDash

2026-01-03T09:09:02Z

Schwatter:

[[Datei:Controlminidash.png|Mini|rechts]]
== ControlMiniDash – kompaktes Dashboard-Widget ==

Dieses Widget stellt ein kompaktes Dashboard bereit, das direkt in einem Device im [[FHEMWEB]] ([[PGM2]]) Frontend
definiert werden kann. Es wurde ursprünglich für ein Klimaanlagen-Setup entwickelt und dient als flexibles,
visuelles Bedienelement für Geräte wie z. B. den HmIP-WTH-2.

Das Widget besteht aus zentralen Informationstexten, einem farbigen Außenring, einem Sliderbutton für die
Solltemperatur sowie bis zu sechs frei definierbaren Buttons.

=== Hilfe ===
* Forenthread zum {{Link2Forum|Topic=142831|LinkText=ControlMiniDash Widget}}

=== Funktionen ===

==== Zentrale Textelemente ====
Vier Textelemente werden in der Mitte angezeigt:

* Gemessene Temperatur
* Luftfeuchtigkeit
* Solltemperatur
* Freitextfeld / Statusfeld

==== Interaktion ====
* Der runde Button auf dem Außenring ermöglicht das direkte Erhöhen oder Verringern der Solltemperatur.
* Der Außenring ändert seine Farbe abhängig von der aktuellen Temperatur (7 °C bis 30 °C).
* Links (1–3) und rechts (4–6) können jeweils drei frei belegbare Buttons definiert werden.
* Für die Buttons können sowohl Data-URL-SVG als auch FHEM-SVG-Icons verwendet werden.

=== Einrichtung im Device ===

Das Widget wird über <code>webCmd</code> und <code>widgetOverride</code> aktiviert.

==== Beispiele ====

===== Fhemicon + Fhemcmd only =====
<syntaxhighlight lang="perl">
attr tcmdWidget webCmd climacontrol
attr tcmdWidget widgetOverride climacontrol:controlminidash,measured-temp,desired-temp,measured-temp@°C,humidity@%,desired-temp@°C,state,#,rc_MINUS@boost.off,#,#,rc_PLUS@boost.on,#
</syntaxhighlight>

===== Fhemicon + Fhemcmd bzw. Perlcmd aus userattr =====
<syntaxhighlight lang="perl">
attr tcmdWidget webCmd climacontrol
attr tcmdWidget widgetOverride climacontrol:controlminidash,measured-temp,desired-temp,measured-temp@°C,humidity@%,desired-temp@°C,state,#,rc_MINUS@#,#,#,rc_PLUS@#,#
</syntaxhighlight>

===== SVG Data URL aus userattr + Fhemcmd bzw. Perlcmd aus userattr =====
<syntaxhighlight lang="perl">
attr tcmdWidget webCmd climacontrol
attr tcmdWidget widgetOverride climacontrol:controlminidash,measured-temp,desired-temp,measured-temp@°C,humidity@%,desired-temp@°C,state,#,#,#,#,#,#
</syntaxhighlight>

==== Dummy-Device für die Beispiele ====

<syntaxhighlight lang="perl">
defmod tcmdWidget dummy
attr tcmdWidget userattr btn2Cmd btn2Color btn2Icon btn5Cmd btn5Color btn5Icon
attr tcmdWidget btn2Cmd { fhem("set tcmdWidget desired-temp ".(ReadingsVal("tcmdWidget","desired-temp",0) - 0.5)) }
attr tcmdWidget btn2Color blue
attr tcmdWidget btn2Icon data:image/svg+xml;;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M12%2C20C7.59%2C20%204%2C16.41%204%2C12C4%2C7.59%207.59%2C4%2012%2C4C16.41%2C4%2020%2C7.59%2020%2C12C20%2C16.41%2016.41%2C20%2012%2C20M12%2C2A10%2C10%200%200%2C0%202%2C12A10%2C10%200%200%2C0%2012%2C22A10%2C10%200%200%2C0%2022%2C12A10%2C10%200%200%2C0%2012%2C2M7%2C13H17V11H7%22%20%2F%3E%3C%2Fsvg%3E
attr tcmdWidget btn5Cmd { fhem("set tcmdWidget desired-temp ".(ReadingsVal("tcmdWidget","desired-temp",0) + 0.5)) }
attr tcmdWidget btn5Color red
attr tcmdWidget btn5Icon data:image/svg+xml;;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M12%2C20C7.59%2C20%204%2C16.41%204%2C12C4%2C7.59%207.59%2C4%2012%2C4C16.41%2C4%2020%2C7.59%2020%2C12C20%2C16.41%2016.41%2C20%2012%2C20M12%2C2A10%2C10%200%200%2C0%202%2C12A10%2C10%200%200%2C0%2012%2C22A10%2C10%200%200%2C0%2022%2C12A10%2C10%200%200%2C0%2012%2C2M13%2C7H11V11H7V13H11V17H13V13H17V11H13V7Z%22%20%2F%3E%3C%2Fsvg%3E
attr tcmdWidget readingList measured-temp desired-temp humidity state
attr tcmdWidget room Test
attr tcmdWidget setList measured-temp desired-temp humidity state
attr tcmdWidget webCmd climacontrol
attr tcmdWidget widgetOverride climacontrol:controlminidash,measured-temp,desired-temp,measured-temp@°C,humidity@%,desired-temp@°C,state,#,rc_MINUS@boost.off,#,#,rc_PLUS@boost.on,#

setstate tcmdWidget boost on
setstate tcmdWidget 2025-12-28 16:40:00 desired-temp 18.5
setstate tcmdWidget 2025-12-28 14:11:59 humidity 55
setstate tcmdWidget 2025-12-28 15:48:53 measured-temp 22
setstate tcmdWidget 2025-12-28 16:45:38 state boost on
</syntaxhighlight>

=== Parameterübersicht ===

{| class="wikitable"
! Abschnitt
! Bedeutung
! Beschreibung
|-
| <code><beliebigerName></code>
| webCmd-Zuweisung
| Gibt an, welches <code>webCmd</code> das Widget repräsentiert.
|-
| <code>controlminidash</code>
| Widget-Typ
| Aktiviert das Dashboard-Widget.
|-
|<code>ring1Val</code>
|Istwert
|Zeigt nach dem Setzen des Sollwerts den aktuellen Istwert an.
|-
|<code>ring2Val</code>
|Sollwert
|Zu setzender Wert.
|-
| <code>info1@unit</code>
| Status-/Textfeld
| Freiwählbares Reading.
|-
| <code>info2@unit</code>
| Status-/Textfeld
| Freiwählbares Reading.
|-
| <code>info3@unit</code>
| Status-/Textfeld
| Freiwählbares Reading.
|-
| <code>info4@unit</code>
| Status-/Textfeld
| Freiwählbares Reading.
|-
| <code>btnXIcon@btnXCmd </code>
| Button-Attribute
| Individuelle Definition von Icon und Befehl für die sechs möglichen Buttons.
Beispiel:sani_heating_automatic@controlMode.automatic
|-
| <code>#</code>
| Button ausblenden
| Beispiel:
<code>climacontrol:controlminidash,measured-temp,humidity,desired-temp,state,#,#,#,#,#,#</code>
|}

=== Individualisierung per userattr ===

Damit können Fhemcmd's, Farbe und Icon für jeden der sechs Buttons separat konfiguriert werden.

Beispiel-Definition:

<syntaxhighlight lang="perl">
defmod widgetControlUserAttr dummy
attr widgetControlUserAttr userattr btn1Cmd btn1Color btn1Icon btn2Cmd btn2Color btn2Icon btn3Cmd btn3Color btn3Icon btn4Cmd btn4Color btn4Icon btn5Cmd btn5Color btn5Icon btn6Cmd btn6Color btn6Icon
attr widgetControlUserAttr btn1Cmd set widgetControlUserAttr state cooling
attr widgetControlUserAttr btn1Color blue
attr widgetControlUserAttr btn1Icon data:image/svg+xml;;charset=utf-8,%3Csvg%20xmlns...
attr widgetControlUserAttr btn2Cmd { fhem("set widgetControlUserAttr desired-temp ".(ReadingsVal("widgetControlUserAttr","desired-temp",0)-0.5)) }
attr widgetControlUserAttr btn2Color blue
attr widgetControlUserAttr btn2Icon data:image/svg+xml;;charset=utf-8,%3Csvg%20xmlns...
attr widgetControlUserAttr btn3Cmd set widgetControlUserAttr state off
attr widgetControlUserAttr btn3Icon data:image/svg+xml...
attr widgetControlUserAttr btn4Cmd set widgetControlUserAttr state heating
attr widgetControlUserAttr btn4Color red
attr widgetControlUserAttr btn4Icon data:image/svg+xml...
attr widgetControlUserAttr btn5Cmd { fhem("set widgetControlUserAttr desired-temp ".(ReadingsVal("widgetControlUserAttr","desired-temp",0)+0.5)) }
attr widgetControlUserAttr btn5Color red
attr widgetControlUserAttr btn5Icon data:image/svg+xml...
attr widgetControlUserAttr btn6Cmd set widgetControlUserAttr state on
attr widgetControlUserAttr btn6Color green
attr widgetControlUserAttr btn6Icon data:image/svg+xml...
attr widgetControlUserAttr readingList measured-temp humidity desired-temp state
attr widgetControlUserAttr room Test
attr widgetControlUserAttr setList measured-temp humidity desired-temp state
attr widgetControlUserAttr subType Thermostat
attr widgetControlUserAttr webCmd climacontrol
attr widgetControlUserAttr widgetOverride climacontrol:controlminidash,measured-temp,desired-temp,measured-temp,humidity,desired-temp,state,#,#,#,#,#,#
setstate widgetControlUserAttr heating
setstate widgetControlUserAttr 2025-11-30 11:51:37 desired-temp 20.0
setstate widgetControlUserAttr 2025-11-30 11:42:42 humidity 56
setstate widgetControlUserAttr 2025-11-30 11:42:48 measured-temp 19
setstate widgetControlUserAttr 2025-11-30 11:51:21 state heating
</syntaxhighlight>

=== Mit DOIF diverse Widgets in einem Table zusammenfassen ===

<syntaxhighlight lang="perl">
defmod di_widget DOIF ##
attr di_widget room Test
attr di_widget uiTable {package ui_Table;;\
$_param='controlminidash,measured-temp,desired-temp,measured-temp,humidity,desired-temp,state,sani_heating_manual@controlMode.manual,rc_MINUS@#,sani_heating_boost@boost,sani_heating_automatic@controlMode.automatic,rc_PLUS@#,sani_heating_mode@night_day';;\
$_set="set desired-temp";;\
}\
widget([TH_DG_HM:desired-temp],$_param,$_set)|\
widget([TH_Kz_w_HM:desired-temp],$_param,$_set)\
widget([TH_Kz_o_HM:desired-temp],$_param,$_set)|\
widget([TH_Kueche_HM:desired-temp],$_param,$_set)\
widget([TH_Keller_HM:desired-temp],$_param,$_set)|\
widget([TH_Bad_HM:desired-temp],$_param,$_set)
</syntaxhighlight>

=== Einrichtungen für KNX RaumThermostat_/_HeizungsAktor ===

siehe: [[KNX_Device_Definition_-_Beispiele#RaumThermostat_/_HeizungsAktor_mit_widget_controlminidash| RaumThermostat_/_HeizungsAktor_mit_widget_controlminidash]]

[[Kategorie:Code Snippets]]
[[Kategorie:FHEM Frontends]]

FHEMWEB/ControlMiniDash

2026-01-03T09:07:10Z

Schwatter:

FHEMWEB/ControlMiniDash

2026-01-03T08:58:20Z

Schwatter:

[[Datei:Controlminidash.png|Mini|rechts]]
== ControlMiniDash – kompaktes Dashboard-Widget ==

Dieses Widget stellt ein kompaktes Dashboard bereit, das direkt in einem Device im [[FHEMWEB]] ([[PGM2]]) Frontend
definiert werden kann. Es wurde ursprünglich für ein Klimaanlagen-Setup entwickelt und dient als flexibles,
visuelles Bedienelement für Geräte wie z. B. den HmIP-WTH-2.

Das Widget besteht aus zentralen Informationstexten, einem farbigen Außenring, einem Sliderbutton für die
Solltemperatur sowie bis zu sechs frei definierbaren Buttons.

=== Hilfe ===
* Forenthread zum {{Link2Forum|Topic=142831|LinkText=ControlMiniDash Widget}}

=== Funktionen ===

==== Zentrale Textelemente ====
Vier Textelemente werden in der Mitte angezeigt:

* Gemessene Temperatur
* Luftfeuchtigkeit
* Solltemperatur
* Freitextfeld / Statusfeld

==== Interaktion ====
* Der runde Button auf dem Außenring ermöglicht das direkte Erhöhen oder Verringern der Solltemperatur.
* Der Außenring ändert seine Farbe abhängig von der aktuellen Temperatur (7 °C bis 30 °C).
* Links (1–3) und rechts (4–6) können jeweils drei frei belegbare Buttons definiert werden.
* Für die Buttons können sowohl Data-URL-SVG als auch FHEM-SVG-Icons verwendet werden.

=== Einrichtung im Device ===

Das Widget wird über <code>webCmd</code> und <code>widgetOverride</code> aktiviert.

==== Beispiele ====

===== Fhemicon + Fhemcmd only =====
<syntaxhighlight lang="perl">
attr tcmdWidget webCmd climacontrol
attr tcmdWidget widgetOverride climacontrol:controlminidash,measured-temp,desired-temp,measured-temp@°C,humidity@%,desired-temp@°C,state,#,rc_MINUS@boost.off,#,#,rc_PLUS@boost.on,#
</syntaxhighlight>

===== Fhemicon + Fhemcmd bzw. Perlcmd aus userattr =====
<syntaxhighlight lang="perl">
attr tcmdWidget webCmd climacontrol
attr tcmdWidget widgetOverride climacontrol:controlminidash,measured-temp,desired-temp,measured-temp@°C,humidity@%,desired-temp@°C,state,#,rc_MINUS@#,#,#,rc_PLUS@#,#
</syntaxhighlight>

===== SVG Data URL aus userattr + Fhemcmd bzw. Perlcmd aus userattr =====
<syntaxhighlight lang="perl">
attr tcmdWidget webCmd climacontrol
attr tcmdWidget widgetOverride climacontrol:controlminidash,measured-temp,desired-temp,measured-temp@°C,humidity@%,desired-temp@°C,state,#,#,#,#,#,#
</syntaxhighlight>

==== Dummy-Device für die Beispiele ====

<syntaxhighlight lang="perl">
defmod tcmdWidget dummy
attr tcmdWidget userattr btn2Cmd btn2Color btn2Icon btn5Cmd btn5Color btn5Icon
attr tcmdWidget btn2Cmd { fhem("set tcmdWidget desired-temp ".(ReadingsVal("tcmdWidget","desired-temp",0) - 0.5)) }
attr tcmdWidget btn2Color blue
attr tcmdWidget btn2Icon data:image/svg+xml;;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M12%2C20C7.59%2C20%204%2C16.41%204%2C12C4%2C7.59%207.59%2C4%2012%2C4C16.41%2C4%2020%2C7.59%2020%2C12C20%2C16.41%2016.41%2C20%2012%2C20M12%2C2A10%2C10%200%200%2C0%202%2C12A10%2C10%200%200%2C0%2012%2C22A10%2C10%200%200%2C0%2022%2C12A10%2C10%200%200%2C0%2012%2C2M7%2C13H17V11H7%22%20%2F%3E%3C%2Fsvg%3E
attr tcmdWidget btn5Cmd { fhem("set tcmdWidget desired-temp ".(ReadingsVal("tcmdWidget","desired-temp",0) + 0.5)) }
attr tcmdWidget btn5Color red
attr tcmdWidget btn5Icon data:image/svg+xml;;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M12%2C20C7.59%2C20%204%2C16.41%204%2C12C4%2C7.59%207.59%2C4%2012%2C4C16.41%2C4%2020%2C7.59%2020%2C12C20%2C16.41%2016.41%2C20%2012%2C20M12%2C2A10%2C10%200%200%2C0%202%2C12A10%2C10%200%200%2C0%2012%2C22A10%2C10%200%200%2C0%2022%2C12A10%2C10%200%200%2C0%2012%2C2M13%2C7H11V11H7V13H11V17H13V13H17V11H13V7Z%22%20%2F%3E%3C%2Fsvg%3E
attr tcmdWidget readingList measured-temp desired-temp humidity state
attr tcmdWidget room Test
attr tcmdWidget setList measured-temp desired-temp humidity state
attr tcmdWidget webCmd climacontrol
attr tcmdWidget widgetOverride climacontrol:controlminidash,measured-temp,desired-temp,measured-temp@°C,humidity@%,desired-temp@°C,state,#,rc_MINUS@boost.off,#,#,rc_PLUS@boost.on,#

setstate tcmdWidget boost on
setstate tcmdWidget 2025-12-28 16:40:00 desired-temp 18.5
setstate tcmdWidget 2025-12-28 14:11:59 humidity 55
setstate tcmdWidget 2025-12-28 15:48:53 measured-temp 22
setstate tcmdWidget 2025-12-28 16:45:38 state boost on
</syntaxhighlight>

=== Parameterübersicht ===

{| class="wikitable"
! Abschnitt
! Bedeutung
! Beschreibung
|-
| <code><beliebigerName></code>
| webCmd-Zuweisung
| Gibt an, welches <code>webCmd</code> das Widget repräsentiert.
|-
| <code>controlminidash</code>
| Widget-Typ
| Aktiviert das Dashboard-Widget.
|-
|<code>ring1Val</code>
|Istwert
|Zeigt nach dem Setzen des Sollwerts den aktuellen Istwert an.
|-
|<code>ring2Val</code>
|Sollwert
|Zu setzender Wert.
|-
| <code>info1@unit</code>
| Status-/Textfeld
| Freiwählbares Reading.
|-
| <code>info2@unit</code>
| Status-/Textfeld
| Freiwählbares Reading.
|-
| <code>info3@unit</code>
| Status-/Textfeld
| Freiwählbares Reading.
|-
| <code>info4@unit</code>
| Status-/Textfeld
| Freiwählbares Reading.
|-
| <code>btnXIcon@btnXCmd </code>
| Button-Attribute
| Individuelle Definition von Icon und Befehl für die sechs möglichen Buttons.
Beispiel:sani_heating_automatic@controlMode.automatic
|-
| <code>#</code>
| Button ausblenden
| Beispiel:
<code>climacontrol:controlminidash,measured-temp,humidity,desired-temp,state,#,#,#,#,#,#</code>
|}

=== Individualisierung per userattr ===

Damit können Fhemcmd's, Farbe und Icon für jeden der sechs Buttons separat konfiguriert werden.

Beispiel-Definition:

<syntaxhighlight lang="perl">
defmod widgetControlUserAttr dummy
attr widgetControlUserAttr userattr btn1Cmd btn1Color btn1Icon btn2Cmd btn2Color btn2Icon btn3Cmd btn3Color btn3Icon btn4Cmd btn4Color btn4Icon btn5Cmd btn5Color btn5Icon btn6Cmd btn6Color btn6Icon
attr widgetControlUserAttr btn1Cmd set widgetControlUserAttr state cooling
attr widgetControlUserAttr btn1Color blue
attr widgetControlUserAttr btn1Icon data:image/svg+xml;;charset=utf-8,%3Csvg%20xmlns...
attr widgetControlUserAttr btn2Cmd { fhem("set widgetControlUserAttr desired-temp ".(ReadingsVal("widgetControlUserAttr","desired-temp",0)-0.5)) }
attr widgetControlUserAttr btn2Color blue
attr widgetControlUserAttr btn2Icon data:image/svg+xml;;charset=utf-8,%3Csvg%20xmlns...
attr widgetControlUserAttr btn3Cmd set widgetControlUserAttr state off
attr widgetControlUserAttr btn3Icon data:image/svg+xml...
attr widgetControlUserAttr btn4Cmd set widgetControlUserAttr state heating
attr widgetControlUserAttr btn4Color red
attr widgetControlUserAttr btn4Icon data:image/svg+xml...
attr widgetControlUserAttr btn5Cmd { fhem("set widgetControlUserAttr desired-temp ".(ReadingsVal("widgetControlUserAttr","desired-temp",0)+0.5)) }
attr widgetControlUserAttr btn5Color red
attr widgetControlUserAttr btn5Icon data:image/svg+xml...
attr widgetControlUserAttr btn6Cmd set widgetControlUserAttr state on
attr widgetControlUserAttr btn6Color green
attr widgetControlUserAttr btn6Icon data:image/svg+xml...
attr widgetControlUserAttr readingList measured-temp humidity desired-temp state
attr widgetControlUserAttr room Test
attr widgetControlUserAttr setList measured-temp humidity desired-temp state
attr widgetControlUserAttr subType Thermostat
attr widgetControlUserAttr webCmd climacontrol
attr widgetControlUserAttr widgetOverride climacontrol:controlminidash,measured-temp,desired-temp,measured-temp,humidity,desired-temp,state,#,#,#,#,#,#
setstate widgetControlUserAttr heating
setstate widgetControlUserAttr 2025-11-30 11:51:37 desired-temp 20.0
setstate widgetControlUserAttr 2025-11-30 11:42:42 humidity 56
setstate widgetControlUserAttr 2025-11-30 11:42:48 measured-temp 19
setstate widgetControlUserAttr 2025-11-30 11:51:21 state heating
</syntaxhighlight>

=== Mit DOIF diverse Widgets in einem Table zusammenfassen ===

<syntaxhighlight lang="perl">
defmod di_widget DOIF ##
attr di_widget room Test
attr di_widget uiTable {package ui_Table;;\
$_param='controlminidash,measured-temp,desired-temp,measured-temp,humidity,desired-temp,state,sani_heating_manual@controlMode.manual,rc_MINUS@#,sani_heating_boost@boost,sani_heating_automatic@controlMode.automatic,rc_PLUS@#,sani_heating_mode@night_day';;\
$_set="set desired-temp";;\
}\
widget([TH_DG_HM:desired-temp],$_param,$_set)|\
widget([TH_Kz_w_HM:desired-temp],$_param,$_set)\
widget([TH_Kz_o_HM:desired-temp],$_param,$_set)|\
widget([TH_Kueche_HM:desired-temp],$_param,$_set)\
widget([TH_Keller_HM:desired-temp],$_param,$_set)|\
widget([TH_Bad_HM:desired-temp],$_param,$_set)
</syntaxhighlight>

[[Kategorie:Code Snippets]]
[[Kategorie:FHEM Frontends]]

FHEMWEB/ControlMiniDash

2026-01-03T00:05:18Z

Schwatter: /* Parameterübersicht */

[[Datei:Controlminidash.png|Mini|rechts]]
== ControlMiniDash – kompaktes Dashboard-Widget ==

Dieses Widget stellt ein kompaktes Dashboard bereit, das direkt in einem Device im [[FHEMWEB]] ([[PGM2]]) Frontend
definiert werden kann. Es wurde ursprünglich für ein Klimaanlagen-Setup entwickelt und dient als flexibles,
visuelles Bedienelement für Geräte wie z. B. den HmIP-WTH-2.

Das Widget besteht aus zentralen Informationstexten, einem farbigen Außenring, einem Sliderbutton für die
Solltemperatur sowie bis zu sechs frei definierbaren Buttons.

=== Hilfe ===
* Forenthread zum {{Link2Forum|Topic=142831|LinkText=ControlMiniDash Widget}}

=== Funktionen ===

==== Zentrale Textelemente ====
Vier Textelemente werden in der Mitte angezeigt:

* Gemessene Temperatur
* Luftfeuchtigkeit
* Solltemperatur
* Freitextfeld / Statusfeld

==== Interaktion ====
* Der runde Button auf dem Außenring ermöglicht das direkte Erhöhen oder Verringern der Solltemperatur.
* Der Außenring ändert seine Farbe abhängig von der aktuellen Temperatur (7 °C bis 30 °C).
* Links (1–3) und rechts (4–6) können jeweils drei frei belegbare Buttons definiert werden.
* Für die Buttons können sowohl Data-URL-SVG als auch FHEM-SVG-Icons verwendet werden.

=== Einrichtung im Device ===

Das Widget wird über <code>webCmd</code> und <code>widgetOverride</code> aktiviert.

Beispiel ohne Buttons:
<syntaxhighlight lang="perl">
attr <device> webCmd climacontrol
attr <device> widgetOverride climacontrol:controlminidash,measured-temp,desired-temp,measured-temp,humidity,desired-temp,state,#,#,#,#,#,#
</syntaxhighlight>

Beispiel mit FhemSVG-Buttons:
<syntaxhighlight lang="perl">
attr <device> webCmd climacontrol
attr <device> widgetOverride climacontrol:controlminidash,measured-temp,desired-temp,measured-temp,humidity,desired-temp,state,sani_heating_manual@controlMode.manual,rc_MINUS@temp-5,sani_heating_boost@boost,sani_heating_automatic@controlMode.automatic,rc_PLUS@temp+5,sani_heating_mode@night_day'
</syntaxhighlight>

Wenn im Device keine Luftfeuchte/Humidity vorhanden ist, kann diese mit # an der dritten Position ausgeblendet werden.
<syntaxhighlight lang="perl">
attr HmIP_KLHR_STHD webCmd controlMD auto:manu:boost:on:off
attr HmIP_KLHR_STHD widgetOverride controlMD:controlminidash,measured-temp,desired-temp,measured-temp,#,desired-temp,HEATING_COOLING,#,#,#,#,#,#
</syntaxhighlight>

=== Parameterübersicht ===

{| class="wikitable"
! Abschnitt
! Bedeutung
! Beschreibung
|-
| <code><beliebigerName></code>
| webCmd-Zuweisung
| Gibt an, welches <code>webCmd</code> das Widget repräsentiert.
|-
| <code>controlminidash</code>
| Widget-Typ
| Aktiviert das Dashboard-Widget.
|-
|<code>ring1Val</code>
|Istwert
|Zeigt nach dem Setzen des Sollwerts den aktuellen Istwert an.
|-
|<code>ring2Val</code>
|Sollwert
|Zu setzender Wert.
|-
| <code>info1@unit</code>
| Status-/Textfeld
| Freiwählbares Reading.
|-
| <code>info2@unit</code>
| Status-/Textfeld
| Freiwählbares Reading.
|-
| <code>info3@unit</code>
| Status-/Textfeld
| Freiwählbares Reading.
|-
| <code>info4@unit</code>
| Status-/Textfeld
| Freiwählbares Reading.
|-
| <code>btnXIcon@btnXCmd </code>
| Button-Attribute
| Individuelle Definition von Icon und Befehl für die sechs möglichen Buttons.
Beispiel:sani_heating_automatic@controlMode.automatic
|-
| <code>#</code>
| Button ausblenden
| Beispiel:
<code>climacontrol:controlminidash,measured-temp,humidity,desired-temp,state,#,#,#,#,#,#</code>
|}

=== Individualisierung per userattr ===

Damit können Fhemcmd's, Farbe und Icon für jeden der sechs Buttons separat konfiguriert werden.

Beispiel-Definition:

<syntaxhighlight lang="perl">
defmod widgetControlUserAttr dummy
attr widgetControlUserAttr userattr btn1Cmd btn1Color btn1Icon btn2Cmd btn2Color btn2Icon btn3Cmd btn3Color btn3Icon btn4Cmd btn4Color btn4Icon btn5Cmd btn5Color btn5Icon btn6Cmd btn6Color btn6Icon
attr widgetControlUserAttr btn1Cmd set widgetControlUserAttr state cooling
attr widgetControlUserAttr btn1Color blue
attr widgetControlUserAttr btn1Icon data:image/svg+xml;;charset=utf-8,%3Csvg%20xmlns...
attr widgetControlUserAttr btn2Cmd { fhem("set widgetControlUserAttr desired-temp ".(ReadingsVal("widgetControlUserAttr","desired-temp",0)-0.5)) }
attr widgetControlUserAttr btn2Color blue
attr widgetControlUserAttr btn2Icon data:image/svg+xml;;charset=utf-8,%3Csvg%20xmlns...
attr widgetControlUserAttr btn3Cmd set widgetControlUserAttr state off
attr widgetControlUserAttr btn3Icon data:image/svg+xml...
attr widgetControlUserAttr btn4Cmd set widgetControlUserAttr state heating
attr widgetControlUserAttr btn4Color red
attr widgetControlUserAttr btn4Icon data:image/svg+xml...
attr widgetControlUserAttr btn5Cmd { fhem("set widgetControlUserAttr desired-temp ".(ReadingsVal("widgetControlUserAttr","desired-temp",0)+0.5)) }
attr widgetControlUserAttr btn5Color red
attr widgetControlUserAttr btn5Icon data:image/svg+xml...
attr widgetControlUserAttr btn6Cmd set widgetControlUserAttr state on
attr widgetControlUserAttr btn6Color green
attr widgetControlUserAttr btn6Icon data:image/svg+xml...
attr widgetControlUserAttr readingList measured-temp humidity desired-temp state
attr widgetControlUserAttr room Test
attr widgetControlUserAttr setList measured-temp humidity desired-temp state
attr widgetControlUserAttr subType Thermostat
attr widgetControlUserAttr webCmd climacontrol
attr widgetControlUserAttr widgetOverride climacontrol:controlminidash,measured-temp,desired-temp,measured-temp,humidity,desired-temp,state,#,#,#,#,#,#
setstate widgetControlUserAttr heating
setstate widgetControlUserAttr 2025-11-30 11:51:37 desired-temp 20.0
setstate widgetControlUserAttr 2025-11-30 11:42:42 humidity 56
setstate widgetControlUserAttr 2025-11-30 11:42:48 measured-temp 19
setstate widgetControlUserAttr 2025-11-30 11:51:21 state heating
</syntaxhighlight>

=== Mit DOIF diverse Widgets in einem Table zusammenfassen ===

<syntaxhighlight lang="perl">
defmod di_widget DOIF ##
attr di_widget room Test
attr di_widget uiTable {package ui_Table;;\
$_param='controlminidash,measured-temp,desired-temp,measured-temp,humidity,desired-temp,state,sani_heating_manual@controlMode.manual,rc_MINUS@temp-5,sani_heating_boost@boost,sani_heating_automatic@controlMode.automatic,rc_PLUS@temp+5,sani_heating_mode@night_day';;\
$_set="set desired-temp";;\
}\
widget([TH_DG_HM:desired-temp],$_param,$_set)|\
widget([TH_Kz_w_HM:desired-temp],$_param,$_set)\
widget([TH_Kz_o_HM:desired-temp],$_param,$_set)|\
widget([TH_Kueche_HM:desired-temp],$_param,$_set)\
widget([TH_Keller_HM:desired-temp],$_param,$_set)|\
widget([TH_Bad_HM:desired-temp],$_param,$_set)
</syntaxhighlight>

[[Kategorie:Code Snippets]]
[[Kategorie:FHEM Frontends]]

FHEMWEB/MiniChart

2026-01-02T16:01:56Z

Schwatter:

[[Datei:Minichart flex mobile.png|Mini|rechts]]
== MiniChart – kompaktes Chart-Widget (Line & Bar) ==
Das MiniChart-Widget visualisiert Messwertverläufe als kompaktes Liniendiagramm oder Balkendiagramm für die Darstellung im [[FHEMWEB]] ([[PGM2]]) Frontend.
Zusätzlich zeigt es drei aktuelle Werte, die aus Label, Reading und Einheit bestehen. Zum Einrichten sind drei Schritte notwendig.

=== Hilfe ===
* Forenthread zum {{Link2Forum|Topic=141857|LinkText=MiniChart Widget}}

== 1️⃣ 99_myUtils.pm – Hilfsfunktion zum Speichern von historischen Werten ==
Zuerst wird eine Subroutine in [[99_myUtils_anlegen|99_myUtils.pm]] angelegt, die neue Werte an ein Fixed-Array anhängt und alte Werte entfernt, falls die maximale Größe überschritten wird.
<syntaxhighlight lang="Perl">
sub AppendToFixedArray {
my ($dev, $reading, $newVal, $maxSize) = @_;
$maxSize //= 250; # Standard: 250 Werte
my $current = ReadingsVal($dev, $reading, '');
my @values = split(',', $current);
if (@values >= $maxSize) {
@values = @values[-($maxSize - 1) .. -1]; # Älteste Werte entfernen
}
push @values, $newVal;
return join(',', @values);
}
</syntaxhighlight>

== 2️⃣ at-Timer zum regelmäßigen Aktualisieren ==
Mit einem `[[at]]`-Timer werden die Werte der Messgeräte regelmäßig in die `chartArray`-Readings geschrieben.
<syntaxhighlight lang="Perl">
defmod chartUpdate at +*00:05 {\
my @devices = (\
# ["Devicename", "Readingname"]\
["Smartmeter_2E1F50", "APOX_Power"],\
["OpenDTU", "power"],\
["Kuehlschrank", "power"],\
["Luftentfeuchter", "ENERGY_Power"],\
["Geschirrspueler", "power"],\
["Trockner", "power"],\
["Waschmaschine", "power"],\
["Pumpe_FBH_Pwr", "power"],\
["Heizstab_BW_Pwr", "power"],\
);;\
\
for my $d (@devices) {\
my ($dev, $reading) = @$d;;\
\
my $val = ReadingsVal($dev, $reading, 0);;\
my $new = AppendToFixedArray($dev, "chartArray", $val);;\
fhem("setreading $dev chartArray $new");;\
}\
}\
</syntaxhighlight>

== 3️⃣ Minichart ==
=== 1. Widget-Datei aus contrib laden ===
Bevor das MiniChart-Widget genutzt werden kann, muss die JS-Datei ins FHEM-Webverzeichnis kopiert werden.
Dies kann mit der Perlfunktion <code>{ Svn_GetFile('from SVN Path', 'to local Path') }</code> direkt in der FHEM Kommandozeile erfolgen.
<syntaxhighlight lang="Perl">
{ Svn_GetFile('contrib/fhemweb_minichart.js', 'www/pgm2/fhemweb_minichart.js') }
</syntaxhighlight>

=== 2. Widget im Device mit widgetOverride einrichten ===
=== Werteanzeige ===
Drei Textzeilen können angezeigt werden, jeweils im Format:
:<code>Label@Reading@Einheit</code>

Beispiel:
:<code>Jetzt@power@W,Heute@yieldday@kWh,Gesamt@yieldtotal@kWh</code>

==== Ausblenden einzelner Zeilen ====
Jede der drei Zeilen kann vollständig oder teilweise ausgeblendet werden, indem das jeweilige Element leer gelassen wird. Das Widget setzt intern automatisch ein geschütztes Leerzeichen ( ).

Beispiele:
* Nur Label ausblenden:
:<code>@reading@W</code>
* Nur Reading ausblenden:
:<code>Label@@W</code>
* Nur Einheit ausblenden:
:<code>Label@reading@</code>
* Ganze Zeile ausblenden:
:<code> </code>

=== Diagrammtypen ===
MiniChart unterstützt zwei Diagrammtypen:
* line – geglättetes Liniendiagramm mit Farbverlauf
* bar – Balkendiagramm mit positiver/negativer Farbgebung

Das Chart-Reading benötigt eine kommagetrennte Zahlenliste, z. B.:
:<code>10,20,15,18,25</code>

Chartoptionen:
:<code>chartType@colorPositive@colorNegative</code>

Beispiele:
:<code>line@#3b82f6@#ff0000</code>
:<code>bar@#00cc88@#cc0044</code>

Fallback (nur ChartReading angegeben):
:<code>dann wird automatisch line@#3b82f6@#3b82f6 gesetzt</code>

=== Einrichtung im Device ===
Syntax:
:<code><webCmd>:minichart,Label1@Reading1@Einheit,Label2@Reading2@Einheit,Label3@Reading3@Einheit,ChartReading,chartType@colorPos@colorNeg</code>

Beispiel Liniendiagramm:
<syntaxhighlight lang="Perl" line>
attr <device> webCmd minichart
attr <device> widgetOverride minichart:minichart,Jetzt@power@W,Heute@yieldday@kWh,Gesamt@yieldtotal@kWh,chartArray,line@#3b82f6@#ff0000
</syntaxhighlight>

Beispiel Balkendiagramm:
:<code>...,chartArray,bar@#00cc88@#cc0044</code>

Fallback (Standard line + Standardfarbe):
:<code>...,chartArray</code>

=== Parameterübersicht ===
{| class="wikitable"
! Abschnitt
! Bedeutung
! Beschreibung
|-
| <code><beliebigerName></code>
| webCmd-Zuweisung
| Definiert die Instanz des Widgets.
|-
| <code>minichart</code>
| Widget-Typ
| Aktiviert das MiniChart-Widget.
|-
| <code>Label1@Reading1@Einheit1</code>
| Anzeigezeilen
| Drei frei definierbare Werte-/Statusfelder; mit <code> </code> komplett ausblendbar.
|-
| <code>Label2@Reading2@Einheit2</code>
| Anzeigezeilen
| Drei frei definierbare Werte-/Statusfelder; mit <code> </code> komplett ausblendbar.
|-
| <code>Label3@Reading3@Einheit3</code>
| Anzeigezeilen
| Drei frei definierbare Werte-/Statusfelder; mit <code> </code> komplett ausblendbar.
|-
| <code>ChartReading</code>
| Datenquelle
| Liefert Array-Werte für das Diagramm .
|-
| <code>chartType@colorPos@colorNeg</code>
| Chart-Optionen
| line oder bar; Farben optional.
|}

[[Kategorie:Code Snippets]]
[[Kategorie:FHEM Frontends]]

FHEMWEB/Widgets

2026-01-02T15:59:49Z

Schwatter:

Widgets sind Frontendelemente, die der Dateneingabe und -anzeige dienen. Die hier gezeigten Frontendelemente werden durch [[FHEMWEB]] ([[PGM2]]) bereitgestellt.

== Syntax ==
Die Syntax der Widgets ist unter dem Attribut [https://fhem.de/commandref_DE.html#widgetOverride widgetOverride] in der Befehlreferenz beschrieben.

== Verwendung ==
Viele Module (u.a. [[DOIF]], [[dummy]], [[MQTT_DEVICE]], [[MQTT2_DEVICE]], [[MYSENSORS_DEVICE]], [[readingsGroup]]) bieten die Möglichkeit eine Benutzerschnittstelle zu erstellen.

Widgets werden über <code><name>:<modifier></code>-Paare an [[Readings]] oder [[Attribute]] gebunden, dabei ist:

* <code><name></code> ein Readingsname, ein Attribut oder ein Mapping-Argument.
* <code><modifier></code> ein Widget einschliesslich Parameter.

Bei der Erstellung spielen verschiedene Attribute zusammen:

* Mit readingList (bzw. bei Modulen, die dies nicht kennen: widgetOverride) ist es möglich den Set-Befehl auf [[Readings]] zu erweitern, siehe [https://fhem.de/commandref_DE.html#readingList readingList].
* Mit [[setList]] (bzw. widgetOverride) werden die Widgets einem Reading zugeordnet und parametrisiert, siehe [https://fhem.de/commandref_DE.html#setList setList].
* Mit [[webCmd]] werden die Widgets angezeigt, siehe [https://fhem.de/commandref_DE.html#setList webCmd].
* Mit webCmdLabel werden die Widgets beschriftet und tabellarisch angeordnet, siehe [https://fhem.de/commandref_DE.html#webCmdLabel webCmdLabel].
* Mit widgetOverride ist es möglich, die im Modul festgelegten Widgets zu überschreiben, siehe [https://fhem.de/commandref_DE.html#widgetOverride widgetOverride].
* Mit [[eventMap]] ist es möglich Widgets an Mapping-Argumente zu binden, siehe [https://fhem.de/commandref_DE.html#eventMap eventMap] und {{Link2Forum|Topic=76755|LinkText=eventMap und Widget-Anbindung}}.
Das Zusammenspiel dieser Attribute ist u.A. im Artikel [[DeviceOverview anpassen#webCmd .26 Co|DeviceOverview anpassen]] näher erläutert.

== Zusammenstellung der Widgets ==
[[Datei:fhemweb_widgets_1.png|mini|rechts]]
Die Bildschirmkopie zeigt das Benutzerinterface des Dummys mit den Widgets

=== weitere Konfiguration ===
* '''knob''', siehe http://anthonyterrien.com/knob/
* '''colorpicker''', siehe [[Color]]

 
== Das Beispiel für [[DOIF/Import_von_Code_Snippets|Raw definition]] zum Ausprobieren ==
In der vorstehenden Abbildung fehlt das Look and Feel der Widgets. Mit dem folgenden Code-Snippet zum Ausprobieren, wird dies ergänzt.

<pre>
defmod widgets dummy
attr widgets readingList 00select 01select 02selectnumbers 03selectnumbers 04textField 05textFieldNL 06textField-long 07textFieldNL-long 08slider 09multiple 10multiple-strict 11knob 12sortable 13sortable-strict 14sortable-given 15uzsuToggle 16uzsuSelect 17uzsuSelectRadio 18uzsuDropDown 19colorpicker_RGB 19colorpicker_HSV 19colorpicker_CT 19colorpicker_HUE 19colorpicker_BRI 20time 21iconRadio 21iconRadio_use4icon 22iconSwitch 23iconLabel 24iconButtons 24iconButtons_use4icon 25bitfield 26widgetList
attr widgets room 0_Test
attr widgets setList 00select:1,2,3,4,5,0,a,b,c,def,hik \
01select:select,1,2,3,4,5,0,a,b,c,def,hik \
02selectnumbers:selectnumbers,-30,3,33,1,lin \
03selectnumbers:selectnumbers,1,0.0625,140000,0,log10 \
04textField:textField \
05textFieldNL:textFieldNL\
06textField-long:textField-long,87 \
07textFieldNL-long:textFieldNL-long,87 \
08slider:slider,7,0.5,30,1 \
09multiple:multiple,shirt,shoes,skirt,trowsers \
10multiple-strict:multiple-strict,red,green,blue,yellow \
11knob:knob,min:0,max:360,width:50,height:50,step:1,lineCap:round,angleOffset:180,cursor:3,thickness:.3 \
12sortable:sortable,blue,shirt,white,shoes,brown,skirt,black,jeans\
13sortable-strict:sortable-strict,blue,shirt,white,shoes,brown,skirt,black,jeans\
14sortable-given:sortable-given,blue,shirt,white,shoes,brown,skirt,black,jeans\
15uzsuToggle:uzsuToggle,ON,OFF\
16uzsuSelect:uzsuSelect,blue,shirt,white,shoes,brown,skirt,black,jeans\
17uzsuSelectRadio:uzsuSelectRadio,MW,KW,UKW\
18uzsuDropDown:uzsuDropDown,red,green,blue,yellow \
19colorpicker_RGB:colorpicker,RGB \
19colorpicker_HSV:colorpicker,HSV \
19colorpicker_CT:colorpicker,CT,2000,10,6500 \
19colorpicker_HUE:colorpicker,HUE,0,1,359 \
19colorpicker_BRI:colorpicker,BRI,0,1,100 \
20time:time \
21iconRadio:iconRadio,#808080,10,fts_shutter_10@FFA500,20,fts_shutter_20@orange,30,fts_shutter_30@orange,40,fts_shutter_40@orange,50,fts_shutter_50@orange,60,fts_shutter_60@orange,70,fts_shutter_70@orange,80,fts_shutter_80@orange,90,fts_shutter_90@orange,100,fts_shutter_100@orange \
21iconRadio_use4icon:iconRadio,use4icon@808080,10,fts_shutter_10@FFA500,20,fts_shutter_20@orange,30,fts_shutter_30@orange,40,fts_shutter_40@orange,50,fts_shutter_50@orange,60,fts_shutter_60@orange,70,fts_shutter_70@orange,80,fts_shutter_80@orange,90,fts_shutter_90@orange,100,fts_shutter_100@orange \
22iconSwitch:iconSwitch,wide#open,@red,half#open,fts_shutter_50@%23cd2906,totally#closed,fts_shutter_100@magenta,half#closed, \
23iconLabel:iconLabel,wide#open,@red,half#open,fts_shutter_50@%23cd2906,totally#closed,fts_shutter_100@magenta,half#closed,\
24iconButtons:iconButtons,orange,Bad,sani_heating@green,Wohnzimmer_1,sani_heating@green,Wohnzimmer_2,sani_heating@green,Esszimmer,sani_heating@green,Diele,sani_heating@green,Gäste_WC,sani_heating@green,Büro,sani_heating@green,Wintergarten,sani_heating@green,Werkstatt,sani_heating@green,Schlafzimmer,sani_heating@green \
24iconButtons_use4icon:iconButtons,use4icon@red,Bad,sani_heating@0000FF,Wohnzimmer_1,sani_heating@blue,Wohnzimmer_2,sani_heating@blue,Esszimmer,sani_heating@blue,Diele,sani_heating@blue,Gäste_WC,sani_heating@blue,Büro,sani_heating@blue,Wintergarten,sani_heating@blue,Werkstatt,sani_heating@blue,Schlafzimmer,sani_heating@0000FF\
25bitfield:bitfield\
26widgetList:widgetList,4,select,Bad,Küche,Wohnzimmer,6,selectnumbers,7,1,30,0,lin
attr widgets userReadings 23iconLabel:22iconSwitch.* {ReadingsVal($name,"22iconSwitch","wideopen")}
attr widgets webCmd 00select:01select:02selectnumbers:03selectnumbers:04textField:05textFieldNL:06textField-long:07textFieldNL-long:08slider:20time:09multiple:10multiple-strict:11knob:12sortable:13sortable-strict:14sortable-given:15uzsuToggle:16uzsuSelect:17uzsuSelectRadio:18uzsuDropDown:19colorpicker_RGB:19colorpicker_HSV:19colorpicker_CT:19colorpicker_HUE:19colorpicker_BRI:21iconRadio:21iconRadio_use4icon:24iconButtons:24iconButtons_use4icon:22iconSwitch:23iconLabel:25bitfield:26widgetList
attr widgets webCmdLabel select (default)\
:select (explicit)\
:selectnumbers (linear)\
:selectnumbers (logarithmic)\
:textField\
:textFieldNL (no label)\
:textField-long (multi-line)\
:textFieldNL-long (multi-line,no label)\
:slider\
:time\
:multiple\
:multiple-strict\
:knob\
:sortable\
:sortable-strict\
:sortable-given\
:uzsuToggle\
:uzsuSelect\
:uzsuSelectRadio\
:uzsuDropDown\
:colorpicker RGB\
:colorpicker HSV\
:colorpicker Farbtemperatur\
:colorpicker Farbton\
:colorpicker Helligkeit\
:iconRadio\
:iconRadio prefix use4icon\
:iconButtons\
:iconButtons prefix use4icon\
:iconSwitch\
:iconLabel\
:bitfield\
:widgetList (Raum Temperatur)
attr widgets widgetOverride readingList|setList|webCmd|webCmdLabel|widgetOverride:textField-long,86

setstate widgets iconSwitch wide#open
setstate widgets 2024-03-19 20:18:38 00select 1
setstate widgets 2021-09-27 18:52:48 01select 0
setstate widgets 2021-09-27 18:52:33 02selectnumbers 0.0
setstate widgets 2021-09-27 12:13:35 03selectnumbers 64938
setstate widgets 2023-01-03 14:32:14 04textField Hello
setstate widgets 2017-08-24 17:39:22 05textField Hallo
setstate widgets 2023-01-03 14:47:53 05textFieldNL Hello
setstate widgets 2023-01-08 19:25:46 06textField-long Hello
setstate widgets 2022-11-28 18:23:30 07textFieldNL-long Hello
setstate widgets 2017-08-24 18:22:07 08slider 17.0
setstate widgets 2017-08-24 18:22:40 09multiple shirt,shoes
setstate widgets 2017-08-24 18:22:57 10multiple-strict red,green
setstate widgets 2021-09-27 03:19:35 11knob 207
setstate widgets 2017-08-24 18:21:09 12sortable blue,shirt,brown,skirt,white,shoes,black,jeans
setstate widgets 2017-08-24 18:48:17 13sortable-strict blue,white,shirt,shoes,brown,skirt,black,jeans
setstate widgets 2017-08-24 18:49:34 14sortable-given blue,shirt,white,shoes,brown,skirt,black,jeans
setstate widgets 2024-03-19 20:11:06 15uzsuToggle OFF
setstate widgets 2024-03-19 20:10:53 16uzsuSelect brown
setstate widgets 2024-03-19 20:11:16 17uzsuSelectRadio UKW
setstate widgets 2024-03-19 20:11:09 18uzsuDropDown blue
setstate widgets 2017-10-07 07:56:43 19colorpicker_BRI 54
setstate widgets 2017-10-07 07:56:31 19colorpicker_CT 5100
setstate widgets 2017-10-07 07:59:26 19colorpicker_HSV 208c20
setstate widgets 2017-10-07 07:56:29 19colorpicker_HUE 94
setstate widgets 2017-10-07 07:53:01 19colorpicker_RGB c95918
setstate widgets 2017-08-24 19:03:20 20time 12:00
setstate widgets 2021-09-27 18:54:56 21iconRadio 90
setstate widgets 2021-09-27 03:19:18 21iconRadio_use4icon 40
setstate widgets 2024-03-20 18:55:18 22iconSwitch half closed
setstate widgets 2024-03-20 18:55:18 23iconLabel half closed
setstate widgets 2021-09-27 18:57:53 24iconButtons Büro,Schlafzimmer
setstate widgets 2017-10-25 08:20:05 24iconButtons_use4icon Bad,Wohnzimmer_2,Diele,Büro,Werkstatt
setstate widgets 2024-03-19 20:07:03 25bitfield 25
setstate widgets 2024-04-11 19:25:52 26widgetList Küche,23
setstate widgets 2021-09-27 19:02:25 state iconSwitch wide#open
</pre>

== Beigesteuerte Widgets ==
[[Datei:datetimepicker.png|mini|rechts]]
* Forenthread zu {{Link2Forum|Topic=35736|LinkText= DateTimePicker Widget}}
 [[Datei:Controlminidash.png|mini|rechts]]
* Wiki Seite zu [[FHEMWEB/ControlMiniDash| ControlMiniDash Widget]]
 [[Datei:Minichart flex mobile.png|mini|rechts]]
* Wiki Seite zu [[FHEMWEB/MiniChart| MiniChart Widget]]
 [[Datei:AnimatedSVG.gif|mini|rechts]]
* Wiki Seite zu [[FHEMWEB/iconAnimated| iconAnimated Widget]] (Bild drücken für Gif)

[[Kategorie:Code Snippets]]
[[Kategorie:Glossary]]
[[Kategorie:HOWTOS]]

FHEMWEB/iconAnimated

2025-12-17T20:18:15Z

Schwatter:

[[Datei:AnimatedSVG.gif|mini|rechts]]
== iconAnimated – animiertes SVG-Icon-Widget ==

Das '''iconAnimated'''-Widget visualisiert Gerätezustände als animiertes SVG-Icon im [[FHEMWEB]] ([[PGM2]]) Frontend.
Farbe und Animation des Icons passen sich dynamisch an ein konfiguriertes Reading an.

Neben inline eingebetteten SVGs werden auch '''FHEM-Icons direkt unterstützt''' (Attribut <code>icon</code>).

=== Hilfe ===
* Forenthread zum {{Link2Forum|Topic=143313|LinkText=iconAnimated Widget}}

== 1️⃣ Widget-Datei aus contrib laden ==
Die JavaScript-Datei muss ins FHEM-Webverzeichnis kopiert werden.

<syntaxhighlight lang="Perl">
{ Svn_GetFile('contrib/fhemweb_iconAnimated.js', 'www/pgm2/fhemweb_iconAnimated.js') }
</syntaxhighlight>

== 2️⃣ Widget im Device einrichten ==
=== Syntax ===
:<code><webCmd>:iconAnimated,<Reading>,<StateOn@ColorOn>,<StateOff@ColorOff>,<AnimationType>,[size@Px]</code>

=== Parameter ===
{| class="wikitable"
! Parameter
! Beschreibung
|-
| <code>Reading</code>
| Name des Readings, dessen Wert das Icon steuert (Standard: <code>state</code>)
|-
| <code>StateOn@ColorOn</code>
| Zustand für „ein“ (z. B. <code>on@#00ff00</code>).
Numerischer Vergleich möglich, z. B. <code>>=1</code>
|-
| <code>StateOff@ColorOff</code>
| Zustand für „aus“ (z. B. <code>off@#666</code>).
Numerischer Vergleich möglich, z. B. <code><1</code>
|-
| <code>AnimationType</code>
| Art der Animation (siehe unten)
|-
| <code>size@Px</code>
| Optional: Icongröße in Pixel (Standard: 40px)
|}

=== Beispiele ===
* Zeichenfolge:
:<code>attr MyDevice widgetOverride webCmd:iconAnimated,state,on@#00ff00,off@#666,pulse,size@32</code>

* Numerischer Vergleich:
:<code>attr MyDevice widgetOverride webCmd:iconAnimated,power,>=1@#ff0000,<1@#666,bounce,size@32</code>

Hier wird das Icon animiert „on“, wenn <code>power</code> ≥ 1 ist, und „off“, wenn < 1.

== Animationen ==
* '''alarm''' – Alarmartige Skalierung + Rotation
* '''blink''' – Blinkende Anzeige
* '''flow''' – sanfte vertikale Bewegung
* '''heat''' – Hitze-/Flammenanimation
* '''heatDevice''' – Geräte die Hitze ausstrahlen
* '''pulse''' – pulsierende Skalierung
* '''ring''' – klingelnde Bewegung
* '''robot''' – Roboterartige Rotation
* '''rotateLeft''' – Rotation nach links
* '''rotateRight''' – Rotation nach rechts
* '''rotate2d''' – 3D-Drehung um Y-Achse
* '''bounce''' – leichtes Hüpfen
* '''shake''' – seitliches Wackeln
* '''swing''' – pendelnde Bewegung

== Icon laden ==
=== FHEM-Icons ===
SVG-Icons aus der FHEM-Icon-Bibliothek werden '''direkt unterstützt''':

<syntaxhighlight lang="Perl">
attr <Device> icon <fhem-svg-iconname>
</syntaxhighlight>

Das Widget lädt das SVG automatisch aus dem attr icon und animiert es entsprechend.

=== Inline-SVG ===
Alternativ kann ein SVG direkt als Data-URL hinterlegt werden.

<syntaxhighlight lang="Perl">
attr <Device> userattr iconAnimated
</syntaxhighlight>

<syntaxhighlight lang="Perl">
attr <Device> iconAnimated data:image/svg+xml;base64,...
</syntaxhighlight>

In diesem Fall hat <code>iconAnimated</code> Vorrang vor dem <code>icon</code>-Attribut.
Eine gute Icon-Quelle dafür ist [https://pictogrammers.com/libraries/ pictogrammers.com].

== Hinweise ==
* Das Widget funktioniert nur mit '''SVG-Icons'''.
* PNG/JPG werden ignoriert.
* Fhemicons sind etwas zickig. Beispiel rotateLeft und das Icon "aurora".

[[Kategorie:Code Snippets]]
[[Kategorie:FHEM Frontends]]

FHEMWEB/Widgets

2025-12-17T19:42:11Z

Schwatter:

Widgets sind Frontendelemente, die der Dateneingabe und -anzeige dienen. Die hier gezeigten Frontendelemente werden durch [[FHEMWEB]] ([[PGM2]]) bereitgestellt.

== Syntax ==
Die Syntax der Widgets ist unter dem Attribut [https://fhem.de/commandref_DE.html#widgetOverride widgetOverride] in der Befehlreferenz beschrieben.

== Verwendung ==
Viele Module (u.a. [[DOIF]], [[dummy]], [[MQTT_DEVICE]], [[MQTT2_DEVICE]], [[MYSENSORS_DEVICE]], [[readingsGroup]]) bieten die Möglichkeit eine Benutzerschnittstelle zu erstellen.

Widgets werden über <code><name>:<modifier></code>-Paare an [[Readings]] oder [[Attribute]] gebunden, dabei ist:

* <code><name></code> ein Readingsname, ein Attribut oder ein Mapping-Argument.
* <code><modifier></code> ein Widget einschliesslich Parameter.

Bei der Erstellung spielen verschiedene Attribute zusammen:

* Mit readingList (bzw. bei Modulen, die dies nicht kennen: widgetOverride) ist es möglich den Set-Befehl auf [[Readings]] zu erweitern, siehe [https://fhem.de/commandref_DE.html#readingList readingList].
* Mit [[setList]] (bzw. widgetOverride) werden die Widgets einem Reading zugeordnet und parametrisiert, siehe [https://fhem.de/commandref_DE.html#setList setList].
* Mit [[webCmd]] werden die Widgets angezeigt, siehe [https://fhem.de/commandref_DE.html#setList webCmd].
* Mit webCmdLabel werden die Widgets beschriftet und tabellarisch angeordnet, siehe [https://fhem.de/commandref_DE.html#webCmdLabel webCmdLabel].
* Mit widgetOverride ist es möglich, die im Modul festgelegten Widgets zu überschreiben, siehe [https://fhem.de/commandref_DE.html#widgetOverride widgetOverride].
* Mit [[eventMap]] ist es möglich Widgets an Mapping-Argumente zu binden, siehe [https://fhem.de/commandref_DE.html#eventMap eventMap] und {{Link2Forum|Topic=76755|LinkText=eventMap und Widget-Anbindung}}.
Das Zusammenspiel dieser Attribute ist u.A. im Artikel [[DeviceOverview anpassen#webCmd .26 Co|DeviceOverview anpassen]] näher erläutert.

== Zusammenstellung der Widgets ==
[[Datei:fhemweb_widgets_1.png|mini|rechts]]
Die Bildschirmkopie zeigt das Benutzerinterface des Dummys mit den Widgets

=== weitere Konfiguration ===
* '''knob''', siehe http://anthonyterrien.com/knob/
* '''colorpicker''', siehe [[Color]]

 
== Das Beispiel für [[DOIF/Import_von_Code_Snippets|Raw definition]] zum Ausprobieren ==
In der vorstehenden Abbildung fehlt das Look and Feel der Widgets. Mit dem folgenden Code-Snippet zum Ausprobieren, wird dies ergänzt.

<pre>
defmod widgets dummy
attr widgets readingList 00select 01select 02selectnumbers 03selectnumbers 04textField 05textFieldNL 06textField-long 07textFieldNL-long 08slider 09multiple 10multiple-strict 11knob 12sortable 13sortable-strict 14sortable-given 15uzsuToggle 16uzsuSelect 17uzsuSelectRadio 18uzsuDropDown 19colorpicker_RGB 19colorpicker_HSV 19colorpicker_CT 19colorpicker_HUE 19colorpicker_BRI 20time 21iconRadio 21iconRadio_use4icon 22iconSwitch 23iconLabel 24iconButtons 24iconButtons_use4icon 25bitfield 26widgetList
attr widgets room 0_Test
attr widgets setList 00select:1,2,3,4,5,0,a,b,c,def,hik \
01select:select,1,2,3,4,5,0,a,b,c,def,hik \
02selectnumbers:selectnumbers,-30,3,33,1,lin \
03selectnumbers:selectnumbers,1,0.0625,140000,0,log10 \
04textField:textField \
05textFieldNL:textFieldNL\
06textField-long:textField-long,87 \
07textFieldNL-long:textFieldNL-long,87 \
08slider:slider,7,0.5,30,1 \
09multiple:multiple,shirt,shoes,skirt,trowsers \
10multiple-strict:multiple-strict,red,green,blue,yellow \
11knob:knob,min:0,max:360,width:50,height:50,step:1,lineCap:round,angleOffset:180,cursor:3,thickness:.3 \
12sortable:sortable,blue,shirt,white,shoes,brown,skirt,black,jeans\
13sortable-strict:sortable-strict,blue,shirt,white,shoes,brown,skirt,black,jeans\
14sortable-given:sortable-given,blue,shirt,white,shoes,brown,skirt,black,jeans\
15uzsuToggle:uzsuToggle,ON,OFF\
16uzsuSelect:uzsuSelect,blue,shirt,white,shoes,brown,skirt,black,jeans\
17uzsuSelectRadio:uzsuSelectRadio,MW,KW,UKW\
18uzsuDropDown:uzsuDropDown,red,green,blue,yellow \
19colorpicker_RGB:colorpicker,RGB \
19colorpicker_HSV:colorpicker,HSV \
19colorpicker_CT:colorpicker,CT,2000,10,6500 \
19colorpicker_HUE:colorpicker,HUE,0,1,359 \
19colorpicker_BRI:colorpicker,BRI,0,1,100 \
20time:time \
21iconRadio:iconRadio,#808080,10,fts_shutter_10@FFA500,20,fts_shutter_20@orange,30,fts_shutter_30@orange,40,fts_shutter_40@orange,50,fts_shutter_50@orange,60,fts_shutter_60@orange,70,fts_shutter_70@orange,80,fts_shutter_80@orange,90,fts_shutter_90@orange,100,fts_shutter_100@orange \
21iconRadio_use4icon:iconRadio,use4icon@808080,10,fts_shutter_10@FFA500,20,fts_shutter_20@orange,30,fts_shutter_30@orange,40,fts_shutter_40@orange,50,fts_shutter_50@orange,60,fts_shutter_60@orange,70,fts_shutter_70@orange,80,fts_shutter_80@orange,90,fts_shutter_90@orange,100,fts_shutter_100@orange \
22iconSwitch:iconSwitch,wide#open,@red,half#open,fts_shutter_50@%23cd2906,totally#closed,fts_shutter_100@magenta,half#closed, \
23iconLabel:iconLabel,wide#open,@red,half#open,fts_shutter_50@%23cd2906,totally#closed,fts_shutter_100@magenta,half#closed,\
24iconButtons:iconButtons,orange,Bad,sani_heating@green,Wohnzimmer_1,sani_heating@green,Wohnzimmer_2,sani_heating@green,Esszimmer,sani_heating@green,Diele,sani_heating@green,Gäste_WC,sani_heating@green,Büro,sani_heating@green,Wintergarten,sani_heating@green,Werkstatt,sani_heating@green,Schlafzimmer,sani_heating@green \
24iconButtons_use4icon:iconButtons,use4icon@red,Bad,sani_heating@0000FF,Wohnzimmer_1,sani_heating@blue,Wohnzimmer_2,sani_heating@blue,Esszimmer,sani_heating@blue,Diele,sani_heating@blue,Gäste_WC,sani_heating@blue,Büro,sani_heating@blue,Wintergarten,sani_heating@blue,Werkstatt,sani_heating@blue,Schlafzimmer,sani_heating@0000FF\
25bitfield:bitfield\
26widgetList:widgetList,4,select,Bad,Küche,Wohnzimmer,6,selectnumbers,7,1,30,0,lin
attr widgets userReadings 23iconLabel:22iconSwitch.* {ReadingsVal($name,"22iconSwitch","wideopen")}
attr widgets webCmd 00select:01select:02selectnumbers:03selectnumbers:04textField:05textFieldNL:06textField-long:07textFieldNL-long:08slider:20time:09multiple:10multiple-strict:11knob:12sortable:13sortable-strict:14sortable-given:15uzsuToggle:16uzsuSelect:17uzsuSelectRadio:18uzsuDropDown:19colorpicker_RGB:19colorpicker_HSV:19colorpicker_CT:19colorpicker_HUE:19colorpicker_BRI:21iconRadio:21iconRadio_use4icon:24iconButtons:24iconButtons_use4icon:22iconSwitch:23iconLabel:25bitfield:26widgetList
attr widgets webCmdLabel select (default)\
:select (explicit)\
:selectnumbers (linear)\
:selectnumbers (logarithmic)\
:textField\
:textFieldNL (no label)\
:textField-long (multi-line)\
:textFieldNL-long (multi-line,no label)\
:slider\
:time\
:multiple\
:multiple-strict\
:knob\
:sortable\
:sortable-strict\
:sortable-given\
:uzsuToggle\
:uzsuSelect\
:uzsuSelectRadio\
:uzsuDropDown\
:colorpicker RGB\
:colorpicker HSV\
:colorpicker Farbtemperatur\
:colorpicker Farbton\
:colorpicker Helligkeit\
:iconRadio\
:iconRadio prefix use4icon\
:iconButtons\
:iconButtons prefix use4icon\
:iconSwitch\
:iconLabel\
:bitfield\
:widgetList (Raum Temperatur)
attr widgets widgetOverride readingList|setList|webCmd|webCmdLabel|widgetOverride:textField-long,86

setstate widgets iconSwitch wide#open
setstate widgets 2024-03-19 20:18:38 00select 1
setstate widgets 2021-09-27 18:52:48 01select 0
setstate widgets 2021-09-27 18:52:33 02selectnumbers 0.0
setstate widgets 2021-09-27 12:13:35 03selectnumbers 64938
setstate widgets 2023-01-03 14:32:14 04textField Hello
setstate widgets 2017-08-24 17:39:22 05textField Hallo
setstate widgets 2023-01-03 14:47:53 05textFieldNL Hello
setstate widgets 2023-01-08 19:25:46 06textField-long Hello
setstate widgets 2022-11-28 18:23:30 07textFieldNL-long Hello
setstate widgets 2017-08-24 18:22:07 08slider 17.0
setstate widgets 2017-08-24 18:22:40 09multiple shirt,shoes
setstate widgets 2017-08-24 18:22:57 10multiple-strict red,green
setstate widgets 2021-09-27 03:19:35 11knob 207
setstate widgets 2017-08-24 18:21:09 12sortable blue,shirt,brown,skirt,white,shoes,black,jeans
setstate widgets 2017-08-24 18:48:17 13sortable-strict blue,white,shirt,shoes,brown,skirt,black,jeans
setstate widgets 2017-08-24 18:49:34 14sortable-given blue,shirt,white,shoes,brown,skirt,black,jeans
setstate widgets 2024-03-19 20:11:06 15uzsuToggle OFF
setstate widgets 2024-03-19 20:10:53 16uzsuSelect brown
setstate widgets 2024-03-19 20:11:16 17uzsuSelectRadio UKW
setstate widgets 2024-03-19 20:11:09 18uzsuDropDown blue
setstate widgets 2017-10-07 07:56:43 19colorpicker_BRI 54
setstate widgets 2017-10-07 07:56:31 19colorpicker_CT 5100
setstate widgets 2017-10-07 07:59:26 19colorpicker_HSV 208c20
setstate widgets 2017-10-07 07:56:29 19colorpicker_HUE 94
setstate widgets 2017-10-07 07:53:01 19colorpicker_RGB c95918
setstate widgets 2017-08-24 19:03:20 20time 12:00
setstate widgets 2021-09-27 18:54:56 21iconRadio 90
setstate widgets 2021-09-27 03:19:18 21iconRadio_use4icon 40
setstate widgets 2024-03-20 18:55:18 22iconSwitch half closed
setstate widgets 2024-03-20 18:55:18 23iconLabel half closed
setstate widgets 2021-09-27 18:57:53 24iconButtons Büro,Schlafzimmer
setstate widgets 2017-10-25 08:20:05 24iconButtons_use4icon Bad,Wohnzimmer_2,Diele,Büro,Werkstatt
setstate widgets 2024-03-19 20:07:03 25bitfield 25
setstate widgets 2024-04-11 19:25:52 26widgetList Küche,23
setstate widgets 2021-09-27 19:02:25 state iconSwitch wide#open
</pre>

== Beigesteuerte Widgets ==
[[Datei:datetimepicker.png|mini|rechts]]
* Forenthread zu {{Link2Forum|Topic=35736|LinkText= DateTimePicker Widget}}
 [[Datei:Controlminidash.png|mini|rechts]]
* Wiki Seite zu [[FHEMWEB/ControlMiniDash| ControlMiniDash Widget]]
 [[Datei:Minichart flex mobile.png|mini|rechts]]
* Wiki Seite zu [[FHEMWEB/MiniChart| MiniChart Widget]]
 [[Datei:AnimatedSVG.gif|mini|rechts]]
* Wiki Seite zu [[FHEMWEB/iconAnimated| iconanimated Widget]] (Bild drücken für Gif)

[[Kategorie:Code Snippets]]
[[Kategorie:Glossary]]
[[Kategorie:HOWTOS]]

FHEMWEB/iconAnimated

2025-12-17T19:39:25Z

Schwatter: Die Seite wurde neu angelegt: „rechts == iconAnimated – animiertes SVG-Icon-Widget == Das '''iconAnimated'''-Widget visualisiert Gerätezustände als animiertes SVG-Icon im FHEMWEB (PGM2) Frontend. Farbe und Animation des Icons passen sich dynamisch an ein konfiguriertes Reading an. Neben inline eingebetteten SVGs werden auch '''FHEM-Icons direkt unterstützt''' (Attribut <code>icon</code>). === Hilfe === * Forenthread zum {{Link2Forum|Topi…“

[[Datei:AnimatedSVG.gif|mini|rechts]]
== iconAnimated – animiertes SVG-Icon-Widget ==

Das '''iconAnimated'''-Widget visualisiert Gerätezustände als animiertes SVG-Icon im [[FHEMWEB]] ([[PGM2]]) Frontend.
Farbe und Animation des Icons passen sich dynamisch an ein konfiguriertes Reading an.

Neben inline eingebetteten SVGs werden auch '''FHEM-Icons direkt unterstützt''' (Attribut <code>icon</code>).

=== Hilfe ===
* Forenthread zum {{Link2Forum|Topic=143313|LinkText=iconAnimated Widget}}

== 1️⃣ Widget-Datei aus contrib laden ==
Die JavaScript-Datei muss ins FHEM-Webverzeichnis kopiert werden.

<syntaxhighlight lang="Perl">
{ Svn_GetFile('contrib/fhemweb_iconAnimated.js', 'www/pgm2/fhemweb_iconAnimated.js') }
</syntaxhighlight>

== 2️⃣ Widget im Device einrichten ==
=== Syntax ===
:<code><webCmd>:iconAnimated,<Reading>,<StateOn@ColorOn>,<StateOff@ColorOff>,<AnimationType>,[size@Px]</code>

=== Parameter ===
{| class="wikitable"
! Parameter
! Beschreibung
|-
| <code>Reading</code>
| Name des Readings, dessen Wert das Icon steuert (Standard: <code>state</code>)
|-
| <code>StateOn@ColorOn</code>
| Zustand für „ein“ (z. B. <code>on@#00ff00</code>).
Numerischer Vergleich möglich, z. B. <code>>=1</code>
|-
| <code>StateOff@ColorOff</code>
| Zustand für „aus“ (z. B. <code>off@#666</code>).
Numerischer Vergleich möglich, z. B. <code><1</code>
|-
| <code>AnimationType</code>
| Art der Animation (siehe unten)
|-
| <code>size@Px</code>
| Optional: Icongröße in Pixel (Standard: 40px)
|}

=== Beispiele ===
* Zeichenfolge:
:<code>attr MyDevice widgetOverride webCmd:iconAnimated,state,on@#00ff00,off@#666,pulse,size@32</code>

* Numerischer Vergleich:
:<code>attr MyDevice widgetOverride webCmd:iconAnimated,power,>=1@#ff0000,<1@#666,bounce,size@32</code>

Hier wird das Icon animiert „on“, wenn <code>power</code> ≥ 1 ist, und „off“, wenn < 1.

== Animationen ==
* '''alarm''' – Alarmartige Skalierung + Rotation
* '''blink''' – Blinkende Anzeige
* '''flow''' – sanfte vertikale Bewegung
* '''heat''' – Hitze-/Flammenanimation
* '''heatDevice''' – Geräte die Hitze ausstrahlen
* '''pulse''' – pulsierende Skalierung
* '''ring''' – klingelnde Bewegung
* '''robot''' – Roboterartige Rotation
* '''rotateLeft''' – Rotation nach links
* '''rotateRight''' – Rotation nach rechts
* '''rotate2d''' – 3D-Drehung um Y-Achse
* '''bounce''' – leichtes Hüpfen
* '''shake''' – seitliches Wackeln
* '''swing''' – pendelnde Bewegung

== Icon laden ==
=== FHEM-Icons (empfohlen) ===
SVG-Icons aus der FHEM-Icon-Bibliothek werden '''direkt unterstützt''':

<syntaxhighlight lang="Perl">
attr <Device> icon <fhem-svg-iconname>
</syntaxhighlight>

Das Widget lädt das SVG automatisch aus dem attr icon und animiert es entsprechend.

=== Inline-SVG (optional) ===
Alternativ kann ein SVG direkt als Data-URL hinterlegt werden.

<syntaxhighlight lang="Perl">
attr <Device> userattr iconAnimated
</syntaxhighlight>

<syntaxhighlight lang="Perl">
attr <Device> iconAnimated data:image/svg+xml;base64,...
</syntaxhighlight>

In diesem Fall hat <code>iconAnimated</code> Vorrang vor dem <code>icon</code>-Attribut.
Eine gute Icon-Quelle dafür ist [https://pictogrammers.com/libraries/ pictogrammers.com].

== Hinweise ==
* Das Widget funktioniert nur mit '''SVG-Icons'''.
* PNG/JPG werden ignoriert.
* Fhemicons sind etwas zickig. Beispiel rotateLeft und das Icon "aurora".

[[Kategorie:Code Snippets]]
[[Kategorie:FHEM Frontends]]

FHEMWEB/Widgets

2025-12-14T12:57:46Z

Schwatter:

Widgets sind Frontendelemente, die der Dateneingabe und -anzeige dienen. Die hier gezeigten Frontendelemente werden durch [[FHEMWEB]] ([[PGM2]]) bereitgestellt.

== Syntax ==
Die Syntax der Widgets ist unter dem Attribut [https://fhem.de/commandref_DE.html#widgetOverride widgetOverride] in der Befehlreferenz beschrieben.

== Verwendung ==
Viele Module (u.a. [[DOIF]], [[dummy]], [[MQTT_DEVICE]], [[MQTT2_DEVICE]], [[MYSENSORS_DEVICE]], [[readingsGroup]]) bieten die Möglichkeit eine Benutzerschnittstelle zu erstellen.

Widgets werden über <code><name>:<modifier></code>-Paare an [[Readings]] oder [[Attribute]] gebunden, dabei ist:

* <code><name></code> ein Readingsname, ein Attribut oder ein Mapping-Argument.
* <code><modifier></code> ein Widget einschliesslich Parameter.

Bei der Erstellung spielen verschiedene Attribute zusammen:

* Mit readingList (bzw. bei Modulen, die dies nicht kennen: widgetOverride) ist es möglich den Set-Befehl auf [[Readings]] zu erweitern, siehe [https://fhem.de/commandref_DE.html#readingList readingList].
* Mit [[setList]] (bzw. widgetOverride) werden die Widgets einem Reading zugeordnet und parametrisiert, siehe [https://fhem.de/commandref_DE.html#setList setList].
* Mit [[webCmd]] werden die Widgets angezeigt, siehe [https://fhem.de/commandref_DE.html#setList webCmd].
* Mit webCmdLabel werden die Widgets beschriftet und tabellarisch angeordnet, siehe [https://fhem.de/commandref_DE.html#webCmdLabel webCmdLabel].
* Mit widgetOverride ist es möglich, die im Modul festgelegten Widgets zu überschreiben, siehe [https://fhem.de/commandref_DE.html#widgetOverride widgetOverride].
* Mit [[eventMap]] ist es möglich Widgets an Mapping-Argumente zu binden, siehe [https://fhem.de/commandref_DE.html#eventMap eventMap] und {{Link2Forum|Topic=76755|LinkText=eventMap und Widget-Anbindung}}.
Das Zusammenspiel dieser Attribute ist u.A. im Artikel [[DeviceOverview anpassen#webCmd .26 Co|DeviceOverview anpassen]] näher erläutert.

== Zusammenstellung der Widgets ==
[[Datei:fhemweb_widgets_1.png|mini|rechts]]
Die Bildschirmkopie zeigt das Benutzerinterface des Dummys mit den Widgets

=== weitere Konfiguration ===
* '''knob''', siehe http://anthonyterrien.com/knob/
* '''colorpicker''', siehe [[Color]]

 
== Das Beispiel für [[DOIF/Import_von_Code_Snippets|Raw definition]] zum Ausprobieren ==
In der vorstehenden Abbildung fehlt das Look and Feel der Widgets. Mit dem folgenden Code-Snippet zum Ausprobieren, wird dies ergänzt.

<pre>
defmod widgets dummy
attr widgets readingList 00select 01select 02selectnumbers 03selectnumbers 04textField 05textFieldNL 06textField-long 07textFieldNL-long 08slider 09multiple 10multiple-strict 11knob 12sortable 13sortable-strict 14sortable-given 15uzsuToggle 16uzsuSelect 17uzsuSelectRadio 18uzsuDropDown 19colorpicker_RGB 19colorpicker_HSV 19colorpicker_CT 19colorpicker_HUE 19colorpicker_BRI 20time 21iconRadio 21iconRadio_use4icon 22iconSwitch 23iconLabel 24iconButtons 24iconButtons_use4icon 25bitfield 26widgetList
attr widgets room 0_Test
attr widgets setList 00select:1,2,3,4,5,0,a,b,c,def,hik \
01select:select,1,2,3,4,5,0,a,b,c,def,hik \
02selectnumbers:selectnumbers,-30,3,33,1,lin \
03selectnumbers:selectnumbers,1,0.0625,140000,0,log10 \
04textField:textField \
05textFieldNL:textFieldNL\
06textField-long:textField-long,87 \
07textFieldNL-long:textFieldNL-long,87 \
08slider:slider,7,0.5,30,1 \
09multiple:multiple,shirt,shoes,skirt,trowsers \
10multiple-strict:multiple-strict,red,green,blue,yellow \
11knob:knob,min:0,max:360,width:50,height:50,step:1,lineCap:round,angleOffset:180,cursor:3,thickness:.3 \
12sortable:sortable,blue,shirt,white,shoes,brown,skirt,black,jeans\
13sortable-strict:sortable-strict,blue,shirt,white,shoes,brown,skirt,black,jeans\
14sortable-given:sortable-given,blue,shirt,white,shoes,brown,skirt,black,jeans\
15uzsuToggle:uzsuToggle,ON,OFF\
16uzsuSelect:uzsuSelect,blue,shirt,white,shoes,brown,skirt,black,jeans\
17uzsuSelectRadio:uzsuSelectRadio,MW,KW,UKW\
18uzsuDropDown:uzsuDropDown,red,green,blue,yellow \
19colorpicker_RGB:colorpicker,RGB \
19colorpicker_HSV:colorpicker,HSV \
19colorpicker_CT:colorpicker,CT,2000,10,6500 \
19colorpicker_HUE:colorpicker,HUE,0,1,359 \
19colorpicker_BRI:colorpicker,BRI,0,1,100 \
20time:time \
21iconRadio:iconRadio,#808080,10,fts_shutter_10@FFA500,20,fts_shutter_20@orange,30,fts_shutter_30@orange,40,fts_shutter_40@orange,50,fts_shutter_50@orange,60,fts_shutter_60@orange,70,fts_shutter_70@orange,80,fts_shutter_80@orange,90,fts_shutter_90@orange,100,fts_shutter_100@orange \
21iconRadio_use4icon:iconRadio,use4icon@808080,10,fts_shutter_10@FFA500,20,fts_shutter_20@orange,30,fts_shutter_30@orange,40,fts_shutter_40@orange,50,fts_shutter_50@orange,60,fts_shutter_60@orange,70,fts_shutter_70@orange,80,fts_shutter_80@orange,90,fts_shutter_90@orange,100,fts_shutter_100@orange \
22iconSwitch:iconSwitch,wide#open,@red,half#open,fts_shutter_50@%23cd2906,totally#closed,fts_shutter_100@magenta,half#closed, \
23iconLabel:iconLabel,wide#open,@red,half#open,fts_shutter_50@%23cd2906,totally#closed,fts_shutter_100@magenta,half#closed,\
24iconButtons:iconButtons,orange,Bad,sani_heating@green,Wohnzimmer_1,sani_heating@green,Wohnzimmer_2,sani_heating@green,Esszimmer,sani_heating@green,Diele,sani_heating@green,Gäste_WC,sani_heating@green,Büro,sani_heating@green,Wintergarten,sani_heating@green,Werkstatt,sani_heating@green,Schlafzimmer,sani_heating@green \
24iconButtons_use4icon:iconButtons,use4icon@red,Bad,sani_heating@0000FF,Wohnzimmer_1,sani_heating@blue,Wohnzimmer_2,sani_heating@blue,Esszimmer,sani_heating@blue,Diele,sani_heating@blue,Gäste_WC,sani_heating@blue,Büro,sani_heating@blue,Wintergarten,sani_heating@blue,Werkstatt,sani_heating@blue,Schlafzimmer,sani_heating@0000FF\
25bitfield:bitfield\
26widgetList:widgetList,4,select,Bad,Küche,Wohnzimmer,6,selectnumbers,7,1,30,0,lin
attr widgets userReadings 23iconLabel:22iconSwitch.* {ReadingsVal($name,"22iconSwitch","wideopen")}
attr widgets webCmd 00select:01select:02selectnumbers:03selectnumbers:04textField:05textFieldNL:06textField-long:07textFieldNL-long:08slider:20time:09multiple:10multiple-strict:11knob:12sortable:13sortable-strict:14sortable-given:15uzsuToggle:16uzsuSelect:17uzsuSelectRadio:18uzsuDropDown:19colorpicker_RGB:19colorpicker_HSV:19colorpicker_CT:19colorpicker_HUE:19colorpicker_BRI:21iconRadio:21iconRadio_use4icon:24iconButtons:24iconButtons_use4icon:22iconSwitch:23iconLabel:25bitfield:26widgetList
attr widgets webCmdLabel select (default)\
:select (explicit)\
:selectnumbers (linear)\
:selectnumbers (logarithmic)\
:textField\
:textFieldNL (no label)\
:textField-long (multi-line)\
:textFieldNL-long (multi-line,no label)\
:slider\
:time\
:multiple\
:multiple-strict\
:knob\
:sortable\
:sortable-strict\
:sortable-given\
:uzsuToggle\
:uzsuSelect\
:uzsuSelectRadio\
:uzsuDropDown\
:colorpicker RGB\
:colorpicker HSV\
:colorpicker Farbtemperatur\
:colorpicker Farbton\
:colorpicker Helligkeit\
:iconRadio\
:iconRadio prefix use4icon\
:iconButtons\
:iconButtons prefix use4icon\
:iconSwitch\
:iconLabel\
:bitfield\
:widgetList (Raum Temperatur)
attr widgets widgetOverride readingList|setList|webCmd|webCmdLabel|widgetOverride:textField-long,86

setstate widgets iconSwitch wide#open
setstate widgets 2024-03-19 20:18:38 00select 1
setstate widgets 2021-09-27 18:52:48 01select 0
setstate widgets 2021-09-27 18:52:33 02selectnumbers 0.0
setstate widgets 2021-09-27 12:13:35 03selectnumbers 64938
setstate widgets 2023-01-03 14:32:14 04textField Hello
setstate widgets 2017-08-24 17:39:22 05textField Hallo
setstate widgets 2023-01-03 14:47:53 05textFieldNL Hello
setstate widgets 2023-01-08 19:25:46 06textField-long Hello
setstate widgets 2022-11-28 18:23:30 07textFieldNL-long Hello
setstate widgets 2017-08-24 18:22:07 08slider 17.0
setstate widgets 2017-08-24 18:22:40 09multiple shirt,shoes
setstate widgets 2017-08-24 18:22:57 10multiple-strict red,green
setstate widgets 2021-09-27 03:19:35 11knob 207
setstate widgets 2017-08-24 18:21:09 12sortable blue,shirt,brown,skirt,white,shoes,black,jeans
setstate widgets 2017-08-24 18:48:17 13sortable-strict blue,white,shirt,shoes,brown,skirt,black,jeans
setstate widgets 2017-08-24 18:49:34 14sortable-given blue,shirt,white,shoes,brown,skirt,black,jeans
setstate widgets 2024-03-19 20:11:06 15uzsuToggle OFF
setstate widgets 2024-03-19 20:10:53 16uzsuSelect brown
setstate widgets 2024-03-19 20:11:16 17uzsuSelectRadio UKW
setstate widgets 2024-03-19 20:11:09 18uzsuDropDown blue
setstate widgets 2017-10-07 07:56:43 19colorpicker_BRI 54
setstate widgets 2017-10-07 07:56:31 19colorpicker_CT 5100
setstate widgets 2017-10-07 07:59:26 19colorpicker_HSV 208c20
setstate widgets 2017-10-07 07:56:29 19colorpicker_HUE 94
setstate widgets 2017-10-07 07:53:01 19colorpicker_RGB c95918
setstate widgets 2017-08-24 19:03:20 20time 12:00
setstate widgets 2021-09-27 18:54:56 21iconRadio 90
setstate widgets 2021-09-27 03:19:18 21iconRadio_use4icon 40
setstate widgets 2024-03-20 18:55:18 22iconSwitch half closed
setstate widgets 2024-03-20 18:55:18 23iconLabel half closed
setstate widgets 2021-09-27 18:57:53 24iconButtons Büro,Schlafzimmer
setstate widgets 2017-10-25 08:20:05 24iconButtons_use4icon Bad,Wohnzimmer_2,Diele,Büro,Werkstatt
setstate widgets 2024-03-19 20:07:03 25bitfield 25
setstate widgets 2024-04-11 19:25:52 26widgetList Küche,23
setstate widgets 2021-09-27 19:02:25 state iconSwitch wide#open
</pre>

== Beigesteuerte Widgets ==
[[Datei:datetimepicker.png|mini|rechts]]
* Forenthread zu {{Link2Forum|Topic=35736|LinkText= DateTimePicker Widget}}
 [[Datei:Controlminidash.png|mini|rechts]]
* Wiki Seite zu [[FHEMWEB/ControlMiniDash| ControlMiniDash Widget]]
 [[Datei:Minichart flex mobile.png|mini|rechts]]
* Wiki Seite zu [[FHEMWEB/MiniChart| MiniChart Widget]]
 [[Datei:AnimatedSVG.gif|mini|rechts]]
* Wiki Seite zu [[FHEMWEB/AnimatedSVG| AnimatedSVG Widget]] (Bild drücken für Gif)

[[Kategorie:Code Snippets]]
[[Kategorie:Glossary]]
[[Kategorie:HOWTOS]]

FHEMWEB/Widgets

2025-12-14T12:55:49Z

Schwatter:

Widgets sind Frontendelemente, die der Dateneingabe und -anzeige dienen. Die hier gezeigten Frontendelemente werden durch [[FHEMWEB]] ([[PGM2]]) bereitgestellt.

== Syntax ==
Die Syntax der Widgets ist unter dem Attribut [https://fhem.de/commandref_DE.html#widgetOverride widgetOverride] in der Befehlreferenz beschrieben.

== Verwendung ==
Viele Module (u.a. [[DOIF]], [[dummy]], [[MQTT_DEVICE]], [[MQTT2_DEVICE]], [[MYSENSORS_DEVICE]], [[readingsGroup]]) bieten die Möglichkeit eine Benutzerschnittstelle zu erstellen.

Widgets werden über <code><name>:<modifier></code>-Paare an [[Readings]] oder [[Attribute]] gebunden, dabei ist:

* <code><name></code> ein Readingsname, ein Attribut oder ein Mapping-Argument.
* <code><modifier></code> ein Widget einschliesslich Parameter.

Bei der Erstellung spielen verschiedene Attribute zusammen:

* Mit readingList (bzw. bei Modulen, die dies nicht kennen: widgetOverride) ist es möglich den Set-Befehl auf [[Readings]] zu erweitern, siehe [https://fhem.de/commandref_DE.html#readingList readingList].
* Mit [[setList]] (bzw. widgetOverride) werden die Widgets einem Reading zugeordnet und parametrisiert, siehe [https://fhem.de/commandref_DE.html#setList setList].
* Mit [[webCmd]] werden die Widgets angezeigt, siehe [https://fhem.de/commandref_DE.html#setList webCmd].
* Mit webCmdLabel werden die Widgets beschriftet und tabellarisch angeordnet, siehe [https://fhem.de/commandref_DE.html#webCmdLabel webCmdLabel].
* Mit widgetOverride ist es möglich, die im Modul festgelegten Widgets zu überschreiben, siehe [https://fhem.de/commandref_DE.html#widgetOverride widgetOverride].
* Mit [[eventMap]] ist es möglich Widgets an Mapping-Argumente zu binden, siehe [https://fhem.de/commandref_DE.html#eventMap eventMap] und {{Link2Forum|Topic=76755|LinkText=eventMap und Widget-Anbindung}}.
Das Zusammenspiel dieser Attribute ist u.A. im Artikel [[DeviceOverview anpassen#webCmd .26 Co|DeviceOverview anpassen]] näher erläutert.

== Zusammenstellung der Widgets ==
[[Datei:fhemweb_widgets_1.png|mini|rechts]]
Die Bildschirmkopie zeigt das Benutzerinterface des Dummys mit den Widgets

=== weitere Konfiguration ===
* '''knob''', siehe http://anthonyterrien.com/knob/
* '''colorpicker''', siehe [[Color]]

 
== Das Beispiel für [[DOIF/Import_von_Code_Snippets|Raw definition]] zum Ausprobieren ==
In der vorstehenden Abbildung fehlt das Look and Feel der Widgets. Mit dem folgenden Code-Snippet zum Ausprobieren, wird dies ergänzt.

<pre>
defmod widgets dummy
attr widgets readingList 00select 01select 02selectnumbers 03selectnumbers 04textField 05textFieldNL 06textField-long 07textFieldNL-long 08slider 09multiple 10multiple-strict 11knob 12sortable 13sortable-strict 14sortable-given 15uzsuToggle 16uzsuSelect 17uzsuSelectRadio 18uzsuDropDown 19colorpicker_RGB 19colorpicker_HSV 19colorpicker_CT 19colorpicker_HUE 19colorpicker_BRI 20time 21iconRadio 21iconRadio_use4icon 22iconSwitch 23iconLabel 24iconButtons 24iconButtons_use4icon 25bitfield 26widgetList
attr widgets room 0_Test
attr widgets setList 00select:1,2,3,4,5,0,a,b,c,def,hik \
01select:select,1,2,3,4,5,0,a,b,c,def,hik \
02selectnumbers:selectnumbers,-30,3,33,1,lin \
03selectnumbers:selectnumbers,1,0.0625,140000,0,log10 \
04textField:textField \
05textFieldNL:textFieldNL\
06textField-long:textField-long,87 \
07textFieldNL-long:textFieldNL-long,87 \
08slider:slider,7,0.5,30,1 \
09multiple:multiple,shirt,shoes,skirt,trowsers \
10multiple-strict:multiple-strict,red,green,blue,yellow \
11knob:knob,min:0,max:360,width:50,height:50,step:1,lineCap:round,angleOffset:180,cursor:3,thickness:.3 \
12sortable:sortable,blue,shirt,white,shoes,brown,skirt,black,jeans\
13sortable-strict:sortable-strict,blue,shirt,white,shoes,brown,skirt,black,jeans\
14sortable-given:sortable-given,blue,shirt,white,shoes,brown,skirt,black,jeans\
15uzsuToggle:uzsuToggle,ON,OFF\
16uzsuSelect:uzsuSelect,blue,shirt,white,shoes,brown,skirt,black,jeans\
17uzsuSelectRadio:uzsuSelectRadio,MW,KW,UKW\
18uzsuDropDown:uzsuDropDown,red,green,blue,yellow \
19colorpicker_RGB:colorpicker,RGB \
19colorpicker_HSV:colorpicker,HSV \
19colorpicker_CT:colorpicker,CT,2000,10,6500 \
19colorpicker_HUE:colorpicker,HUE,0,1,359 \
19colorpicker_BRI:colorpicker,BRI,0,1,100 \
20time:time \
21iconRadio:iconRadio,#808080,10,fts_shutter_10@FFA500,20,fts_shutter_20@orange,30,fts_shutter_30@orange,40,fts_shutter_40@orange,50,fts_shutter_50@orange,60,fts_shutter_60@orange,70,fts_shutter_70@orange,80,fts_shutter_80@orange,90,fts_shutter_90@orange,100,fts_shutter_100@orange \
21iconRadio_use4icon:iconRadio,use4icon@808080,10,fts_shutter_10@FFA500,20,fts_shutter_20@orange,30,fts_shutter_30@orange,40,fts_shutter_40@orange,50,fts_shutter_50@orange,60,fts_shutter_60@orange,70,fts_shutter_70@orange,80,fts_shutter_80@orange,90,fts_shutter_90@orange,100,fts_shutter_100@orange \
22iconSwitch:iconSwitch,wide#open,@red,half#open,fts_shutter_50@%23cd2906,totally#closed,fts_shutter_100@magenta,half#closed, \
23iconLabel:iconLabel,wide#open,@red,half#open,fts_shutter_50@%23cd2906,totally#closed,fts_shutter_100@magenta,half#closed,\
24iconButtons:iconButtons,orange,Bad,sani_heating@green,Wohnzimmer_1,sani_heating@green,Wohnzimmer_2,sani_heating@green,Esszimmer,sani_heating@green,Diele,sani_heating@green,Gäste_WC,sani_heating@green,Büro,sani_heating@green,Wintergarten,sani_heating@green,Werkstatt,sani_heating@green,Schlafzimmer,sani_heating@green \
24iconButtons_use4icon:iconButtons,use4icon@red,Bad,sani_heating@0000FF,Wohnzimmer_1,sani_heating@blue,Wohnzimmer_2,sani_heating@blue,Esszimmer,sani_heating@blue,Diele,sani_heating@blue,Gäste_WC,sani_heating@blue,Büro,sani_heating@blue,Wintergarten,sani_heating@blue,Werkstatt,sani_heating@blue,Schlafzimmer,sani_heating@0000FF\
25bitfield:bitfield\
26widgetList:widgetList,4,select,Bad,Küche,Wohnzimmer,6,selectnumbers,7,1,30,0,lin
attr widgets userReadings 23iconLabel:22iconSwitch.* {ReadingsVal($name,"22iconSwitch","wideopen")}
attr widgets webCmd 00select:01select:02selectnumbers:03selectnumbers:04textField:05textFieldNL:06textField-long:07textFieldNL-long:08slider:20time:09multiple:10multiple-strict:11knob:12sortable:13sortable-strict:14sortable-given:15uzsuToggle:16uzsuSelect:17uzsuSelectRadio:18uzsuDropDown:19colorpicker_RGB:19colorpicker_HSV:19colorpicker_CT:19colorpicker_HUE:19colorpicker_BRI:21iconRadio:21iconRadio_use4icon:24iconButtons:24iconButtons_use4icon:22iconSwitch:23iconLabel:25bitfield:26widgetList
attr widgets webCmdLabel select (default)\
:select (explicit)\
:selectnumbers (linear)\
:selectnumbers (logarithmic)\
:textField\
:textFieldNL (no label)\
:textField-long (multi-line)\
:textFieldNL-long (multi-line,no label)\
:slider\
:time\
:multiple\
:multiple-strict\
:knob\
:sortable\
:sortable-strict\
:sortable-given\
:uzsuToggle\
:uzsuSelect\
:uzsuSelectRadio\
:uzsuDropDown\
:colorpicker RGB\
:colorpicker HSV\
:colorpicker Farbtemperatur\
:colorpicker Farbton\
:colorpicker Helligkeit\
:iconRadio\
:iconRadio prefix use4icon\
:iconButtons\
:iconButtons prefix use4icon\
:iconSwitch\
:iconLabel\
:bitfield\
:widgetList (Raum Temperatur)
attr widgets widgetOverride readingList|setList|webCmd|webCmdLabel|widgetOverride:textField-long,86

setstate widgets iconSwitch wide#open
setstate widgets 2024-03-19 20:18:38 00select 1
setstate widgets 2021-09-27 18:52:48 01select 0
setstate widgets 2021-09-27 18:52:33 02selectnumbers 0.0
setstate widgets 2021-09-27 12:13:35 03selectnumbers 64938
setstate widgets 2023-01-03 14:32:14 04textField Hello
setstate widgets 2017-08-24 17:39:22 05textField Hallo
setstate widgets 2023-01-03 14:47:53 05textFieldNL Hello
setstate widgets 2023-01-08 19:25:46 06textField-long Hello
setstate widgets 2022-11-28 18:23:30 07textFieldNL-long Hello
setstate widgets 2017-08-24 18:22:07 08slider 17.0
setstate widgets 2017-08-24 18:22:40 09multiple shirt,shoes
setstate widgets 2017-08-24 18:22:57 10multiple-strict red,green
setstate widgets 2021-09-27 03:19:35 11knob 207
setstate widgets 2017-08-24 18:21:09 12sortable blue,shirt,brown,skirt,white,shoes,black,jeans
setstate widgets 2017-08-24 18:48:17 13sortable-strict blue,white,shirt,shoes,brown,skirt,black,jeans
setstate widgets 2017-08-24 18:49:34 14sortable-given blue,shirt,white,shoes,brown,skirt,black,jeans
setstate widgets 2024-03-19 20:11:06 15uzsuToggle OFF
setstate widgets 2024-03-19 20:10:53 16uzsuSelect brown
setstate widgets 2024-03-19 20:11:16 17uzsuSelectRadio UKW
setstate widgets 2024-03-19 20:11:09 18uzsuDropDown blue
setstate widgets 2017-10-07 07:56:43 19colorpicker_BRI 54
setstate widgets 2017-10-07 07:56:31 19colorpicker_CT 5100
setstate widgets 2017-10-07 07:59:26 19colorpicker_HSV 208c20
setstate widgets 2017-10-07 07:56:29 19colorpicker_HUE 94
setstate widgets 2017-10-07 07:53:01 19colorpicker_RGB c95918
setstate widgets 2017-08-24 19:03:20 20time 12:00
setstate widgets 2021-09-27 18:54:56 21iconRadio 90
setstate widgets 2021-09-27 03:19:18 21iconRadio_use4icon 40
setstate widgets 2024-03-20 18:55:18 22iconSwitch half closed
setstate widgets 2024-03-20 18:55:18 23iconLabel half closed
setstate widgets 2021-09-27 18:57:53 24iconButtons Büro,Schlafzimmer
setstate widgets 2017-10-25 08:20:05 24iconButtons_use4icon Bad,Wohnzimmer_2,Diele,Büro,Werkstatt
setstate widgets 2024-03-19 20:07:03 25bitfield 25
setstate widgets 2024-04-11 19:25:52 26widgetList Küche,23
setstate widgets 2021-09-27 19:02:25 state iconSwitch wide#open
</pre>

== Beigesteuerte Widgets ==
[[Datei:datetimepicker.png|mini|rechts]]
* Forenthread zu {{Link2Forum|Topic=35736|LinkText= DateTimePicker Widget}}
 [[Datei:Controlminidash.png|mini|rechts]]
* Wiki Seite zu [[FHEMWEB/ControlMiniDash| ControlMiniDash Widget]]
 [[Datei:Minichart flex mobile.png|mini|rechts]]
* Wiki Seite zu [[FHEMWEB/MiniChart| MiniChart Widget]]
 [[Datei:AnimatedSVG.gif|mini|rechts]]
* Wiki Seite zu [[FHEMWEB/AnimatedSVG| AnimatedSVG Widget]]

[[Kategorie:Code Snippets]]
[[Kategorie:Glossary]]
[[Kategorie:HOWTOS]]

Datei:AnimatedSVG.gif

2025-12-14T12:43:04Z

Schwatter:

AnimatedSVG

FHEMWEB/Widgets

2025-12-14T10:12:47Z

Schwatter:

Widgets sind Frontendelemente, die der Dateneingabe und -anzeige dienen. Die hier gezeigten Frontendelemente werden durch [[FHEMWEB]] ([[PGM2]]) bereitgestellt.

== Syntax ==
Die Syntax der Widgets ist unter dem Attribut [https://fhem.de/commandref_DE.html#widgetOverride widgetOverride] in der Befehlreferenz beschrieben.

== Verwendung ==
Viele Module (u.a. [[DOIF]], [[dummy]], [[MQTT_DEVICE]], [[MQTT2_DEVICE]], [[MYSENSORS_DEVICE]], [[readingsGroup]]) bieten die Möglichkeit eine Benutzerschnittstelle zu erstellen.

Widgets werden über <code><name>:<modifier></code>-Paare an [[Readings]] oder [[Attribute]] gebunden, dabei ist:

* <code><name></code> ein Readingsname, ein Attribut oder ein Mapping-Argument.
* <code><modifier></code> ein Widget einschliesslich Parameter.

Bei der Erstellung spielen verschiedene Attribute zusammen:

* Mit readingList (bzw. bei Modulen, die dies nicht kennen: widgetOverride) ist es möglich den Set-Befehl auf [[Readings]] zu erweitern, siehe [https://fhem.de/commandref_DE.html#readingList readingList].
* Mit [[setList]] (bzw. widgetOverride) werden die Widgets einem Reading zugeordnet und parametrisiert, siehe [https://fhem.de/commandref_DE.html#setList setList].
* Mit [[webCmd]] werden die Widgets angezeigt, siehe [https://fhem.de/commandref_DE.html#setList webCmd].
* Mit webCmdLabel werden die Widgets beschriftet und tabellarisch angeordnet, siehe [https://fhem.de/commandref_DE.html#webCmdLabel webCmdLabel].
* Mit widgetOverride ist es möglich, die im Modul festgelegten Widgets zu überschreiben, siehe [https://fhem.de/commandref_DE.html#widgetOverride widgetOverride].
* Mit [[eventMap]] ist es möglich Widgets an Mapping-Argumente zu binden, siehe [https://fhem.de/commandref_DE.html#eventMap eventMap] und {{Link2Forum|Topic=76755|LinkText=eventMap und Widget-Anbindung}}.
Das Zusammenspiel dieser Attribute ist u.A. im Artikel [[DeviceOverview anpassen#webCmd .26 Co|DeviceOverview anpassen]] näher erläutert.

== Zusammenstellung der Widgets ==
[[Datei:fhemweb_widgets_1.png|mini|rechts]]
Die Bildschirmkopie zeigt das Benutzerinterface des Dummys mit den Widgets

=== weitere Konfiguration ===
* '''knob''', siehe http://anthonyterrien.com/knob/
* '''colorpicker''', siehe [[Color]]

 
== Das Beispiel für [[DOIF/Import_von_Code_Snippets|Raw definition]] zum Ausprobieren ==
In der vorstehenden Abbildung fehlt das Look and Feel der Widgets. Mit dem folgenden Code-Snippet zum Ausprobieren, wird dies ergänzt.

<pre>
defmod widgets dummy
attr widgets readingList 00select 01select 02selectnumbers 03selectnumbers 04textField 05textFieldNL 06textField-long 07textFieldNL-long 08slider 09multiple 10multiple-strict 11knob 12sortable 13sortable-strict 14sortable-given 15uzsuToggle 16uzsuSelect 17uzsuSelectRadio 18uzsuDropDown 19colorpicker_RGB 19colorpicker_HSV 19colorpicker_CT 19colorpicker_HUE 19colorpicker_BRI 20time 21iconRadio 21iconRadio_use4icon 22iconSwitch 23iconLabel 24iconButtons 24iconButtons_use4icon 25bitfield 26widgetList
attr widgets room 0_Test
attr widgets setList 00select:1,2,3,4,5,0,a,b,c,def,hik \
01select:select,1,2,3,4,5,0,a,b,c,def,hik \
02selectnumbers:selectnumbers,-30,3,33,1,lin \
03selectnumbers:selectnumbers,1,0.0625,140000,0,log10 \
04textField:textField \
05textFieldNL:textFieldNL\
06textField-long:textField-long,87 \
07textFieldNL-long:textFieldNL-long,87 \
08slider:slider,7,0.5,30,1 \
09multiple:multiple,shirt,shoes,skirt,trowsers \
10multiple-strict:multiple-strict,red,green,blue,yellow \
11knob:knob,min:0,max:360,width:50,height:50,step:1,lineCap:round,angleOffset:180,cursor:3,thickness:.3 \
12sortable:sortable,blue,shirt,white,shoes,brown,skirt,black,jeans\
13sortable-strict:sortable-strict,blue,shirt,white,shoes,brown,skirt,black,jeans\
14sortable-given:sortable-given,blue,shirt,white,shoes,brown,skirt,black,jeans\
15uzsuToggle:uzsuToggle,ON,OFF\
16uzsuSelect:uzsuSelect,blue,shirt,white,shoes,brown,skirt,black,jeans\
17uzsuSelectRadio:uzsuSelectRadio,MW,KW,UKW\
18uzsuDropDown:uzsuDropDown,red,green,blue,yellow \
19colorpicker_RGB:colorpicker,RGB \
19colorpicker_HSV:colorpicker,HSV \
19colorpicker_CT:colorpicker,CT,2000,10,6500 \
19colorpicker_HUE:colorpicker,HUE,0,1,359 \
19colorpicker_BRI:colorpicker,BRI,0,1,100 \
20time:time \
21iconRadio:iconRadio,#808080,10,fts_shutter_10@FFA500,20,fts_shutter_20@orange,30,fts_shutter_30@orange,40,fts_shutter_40@orange,50,fts_shutter_50@orange,60,fts_shutter_60@orange,70,fts_shutter_70@orange,80,fts_shutter_80@orange,90,fts_shutter_90@orange,100,fts_shutter_100@orange \
21iconRadio_use4icon:iconRadio,use4icon@808080,10,fts_shutter_10@FFA500,20,fts_shutter_20@orange,30,fts_shutter_30@orange,40,fts_shutter_40@orange,50,fts_shutter_50@orange,60,fts_shutter_60@orange,70,fts_shutter_70@orange,80,fts_shutter_80@orange,90,fts_shutter_90@orange,100,fts_shutter_100@orange \
22iconSwitch:iconSwitch,wide#open,@red,half#open,fts_shutter_50@%23cd2906,totally#closed,fts_shutter_100@magenta,half#closed, \
23iconLabel:iconLabel,wide#open,@red,half#open,fts_shutter_50@%23cd2906,totally#closed,fts_shutter_100@magenta,half#closed,\
24iconButtons:iconButtons,orange,Bad,sani_heating@green,Wohnzimmer_1,sani_heating@green,Wohnzimmer_2,sani_heating@green,Esszimmer,sani_heating@green,Diele,sani_heating@green,Gäste_WC,sani_heating@green,Büro,sani_heating@green,Wintergarten,sani_heating@green,Werkstatt,sani_heating@green,Schlafzimmer,sani_heating@green \
24iconButtons_use4icon:iconButtons,use4icon@red,Bad,sani_heating@0000FF,Wohnzimmer_1,sani_heating@blue,Wohnzimmer_2,sani_heating@blue,Esszimmer,sani_heating@blue,Diele,sani_heating@blue,Gäste_WC,sani_heating@blue,Büro,sani_heating@blue,Wintergarten,sani_heating@blue,Werkstatt,sani_heating@blue,Schlafzimmer,sani_heating@0000FF\
25bitfield:bitfield\
26widgetList:widgetList,4,select,Bad,Küche,Wohnzimmer,6,selectnumbers,7,1,30,0,lin
attr widgets userReadings 23iconLabel:22iconSwitch.* {ReadingsVal($name,"22iconSwitch","wideopen")}
attr widgets webCmd 00select:01select:02selectnumbers:03selectnumbers:04textField:05textFieldNL:06textField-long:07textFieldNL-long:08slider:20time:09multiple:10multiple-strict:11knob:12sortable:13sortable-strict:14sortable-given:15uzsuToggle:16uzsuSelect:17uzsuSelectRadio:18uzsuDropDown:19colorpicker_RGB:19colorpicker_HSV:19colorpicker_CT:19colorpicker_HUE:19colorpicker_BRI:21iconRadio:21iconRadio_use4icon:24iconButtons:24iconButtons_use4icon:22iconSwitch:23iconLabel:25bitfield:26widgetList
attr widgets webCmdLabel select (default)\
:select (explicit)\
:selectnumbers (linear)\
:selectnumbers (logarithmic)\
:textField\
:textFieldNL (no label)\
:textField-long (multi-line)\
:textFieldNL-long (multi-line,no label)\
:slider\
:time\
:multiple\
:multiple-strict\
:knob\
:sortable\
:sortable-strict\
:sortable-given\
:uzsuToggle\
:uzsuSelect\
:uzsuSelectRadio\
:uzsuDropDown\
:colorpicker RGB\
:colorpicker HSV\
:colorpicker Farbtemperatur\
:colorpicker Farbton\
:colorpicker Helligkeit\
:iconRadio\
:iconRadio prefix use4icon\
:iconButtons\
:iconButtons prefix use4icon\
:iconSwitch\
:iconLabel\
:bitfield\
:widgetList (Raum Temperatur)
attr widgets widgetOverride readingList|setList|webCmd|webCmdLabel|widgetOverride:textField-long,86

setstate widgets iconSwitch wide#open
setstate widgets 2024-03-19 20:18:38 00select 1
setstate widgets 2021-09-27 18:52:48 01select 0
setstate widgets 2021-09-27 18:52:33 02selectnumbers 0.0
setstate widgets 2021-09-27 12:13:35 03selectnumbers 64938
setstate widgets 2023-01-03 14:32:14 04textField Hello
setstate widgets 2017-08-24 17:39:22 05textField Hallo
setstate widgets 2023-01-03 14:47:53 05textFieldNL Hello
setstate widgets 2023-01-08 19:25:46 06textField-long Hello
setstate widgets 2022-11-28 18:23:30 07textFieldNL-long Hello
setstate widgets 2017-08-24 18:22:07 08slider 17.0
setstate widgets 2017-08-24 18:22:40 09multiple shirt,shoes
setstate widgets 2017-08-24 18:22:57 10multiple-strict red,green
setstate widgets 2021-09-27 03:19:35 11knob 207
setstate widgets 2017-08-24 18:21:09 12sortable blue,shirt,brown,skirt,white,shoes,black,jeans
setstate widgets 2017-08-24 18:48:17 13sortable-strict blue,white,shirt,shoes,brown,skirt,black,jeans
setstate widgets 2017-08-24 18:49:34 14sortable-given blue,shirt,white,shoes,brown,skirt,black,jeans
setstate widgets 2024-03-19 20:11:06 15uzsuToggle OFF
setstate widgets 2024-03-19 20:10:53 16uzsuSelect brown
setstate widgets 2024-03-19 20:11:16 17uzsuSelectRadio UKW
setstate widgets 2024-03-19 20:11:09 18uzsuDropDown blue
setstate widgets 2017-10-07 07:56:43 19colorpicker_BRI 54
setstate widgets 2017-10-07 07:56:31 19colorpicker_CT 5100
setstate widgets 2017-10-07 07:59:26 19colorpicker_HSV 208c20
setstate widgets 2017-10-07 07:56:29 19colorpicker_HUE 94
setstate widgets 2017-10-07 07:53:01 19colorpicker_RGB c95918
setstate widgets 2017-08-24 19:03:20 20time 12:00
setstate widgets 2021-09-27 18:54:56 21iconRadio 90
setstate widgets 2021-09-27 03:19:18 21iconRadio_use4icon 40
setstate widgets 2024-03-20 18:55:18 22iconSwitch half closed
setstate widgets 2024-03-20 18:55:18 23iconLabel half closed
setstate widgets 2021-09-27 18:57:53 24iconButtons Büro,Schlafzimmer
setstate widgets 2017-10-25 08:20:05 24iconButtons_use4icon Bad,Wohnzimmer_2,Diele,Büro,Werkstatt
setstate widgets 2024-03-19 20:07:03 25bitfield 25
setstate widgets 2024-04-11 19:25:52 26widgetList Küche,23
setstate widgets 2021-09-27 19:02:25 state iconSwitch wide#open
</pre>

== Beigesteuerte Widgets ==
[[Datei:datetimepicker.png|mini|rechts]]
* Forenthread zu {{Link2Forum|Topic=35736|LinkText= DateTimePicker Widget}}
 [[Datei:Controlminidash.png|mini|rechts]]
* Wiki Seite zu [[FHEMWEB/ControlMiniDash| ControlMiniDash Widget]]
 [[Datei:Minichart flex mobile.png|mini|rechts]]
* Wiki Seite zu [[FHEMWEB/MiniChart| MiniChart Widget]]

[[Kategorie:Code Snippets]]
[[Kategorie:Glossary]]
[[Kategorie:HOWTOS]]

FHEMWEB/ControlMiniDash

2025-12-09T20:10:07Z

Schwatter:

[[Datei:Controlminidash.png|Mini|rechts]]
== ControlMiniDash – kompaktes Dashboard-Widget ==

Dieses Widget stellt ein kompaktes Dashboard bereit, das direkt in einem Device im [[FHEMWEB]] ([[PGM2]]) Frontend
definiert werden kann. Es wurde ursprünglich für ein Klimaanlagen-Setup entwickelt und dient als flexibles,
visuelles Bedienelement für Geräte wie z. B. den HmIP-WTH-2.

Das Widget besteht aus zentralen Informationstexten, einem farbigen Außenring, einem Sliderbutton für die
Solltemperatur sowie bis zu sechs frei definierbaren Buttons.

=== Hilfe ===
* Forenthread zum {{Link2Forum|Topic=142831|LinkText=ControlMiniDash Widget}}

=== Funktionen ===

==== Zentrale Textelemente ====
Vier Textelemente werden in der Mitte angezeigt:

* Gemessene Temperatur
* Luftfeuchtigkeit
* Solltemperatur
* Freitextfeld / Statusfeld

==== Interaktion ====
* Der runde Button auf dem Außenring ermöglicht das direkte Erhöhen oder Verringern der Solltemperatur.
* Der Außenring ändert seine Farbe abhängig von der aktuellen Temperatur (7 °C bis 30 °C).
* Links (1–3) und rechts (4–6) können jeweils drei frei belegbare Buttons definiert werden.
* Für die Buttons können sowohl Data-URL-SVG als auch FHEM-SVG-Icons verwendet werden.

=== Einrichtung im Device ===

Das Widget wird über <code>webCmd</code> und <code>widgetOverride</code> aktiviert.

Beispiel ohne Buttons:
<syntaxhighlight lang="Perl">
attr <device> webCmd climacontrol
attr <device> widgetOverride climacontrol:controlminidash,measured-temp,humidity,desired-temp,state,#,#,#,#,#,#
</syntaxhighlight>

Beispiel mit FhemSVG-Buttons:
<syntaxhighlight lang="Perl">
attr <device> webCmd climacontrol
attr <device> widgetOverride climacontrol:controlminidash,measured-temp,humidity,desired-temp,state,sani_heating_manual@controlMode.manual,rc_MINUS@temp-5,sani_heating_boost@boost,sani_heating_automatic@controlMode.automatic,rc_PLUS@temp+5,sani_heating_mode@night_day'
</syntaxhighlight>

Wenn im Device keine Luftfeuchte/Humidity vorhanden ist, kann diese mit # an der dritten Position ausgeblendet werden.
<syntaxhighlight lang="Perl">
attr HmIP_KLHR_STHD webCmd controlMD auto:manu:boost:on:off
attr HmIP_KLHR_STHD widgetOverride controlMD:controlminidash,measured-temp,#,desired-temp,HEATING_COOLING,#,#,#,#,#,#
</syntaxhighlight>

=== Parameterübersicht ===

{| class="wikitable"
! Abschnitt
! Bedeutung
! Beschreibung
|-
| <code><beliebigerName></code>
| webCmd-Zuweisung
| Gibt an, welches <code>webCmd</code> das Widget repräsentiert.
|-
| <code>controlminidash</code>
| Widget-Typ
| Aktiviert das Dashboard-Widget.
|-
| <code>measured-temp</code>
| Reading
| Anzeige der gemessenen Temperatur.
|-
| <code>humidity</code>
| Reading
| Anzeige der Luftfeuchtigkeit. Nicht vorhanden → mit <code>#</code> deaktivieren.
|-
| <code>desired-temp</code>
| Reading / Setter
| Anzeige und Steuerung der Solltemperatur.
|-
| <code>state</code>
| Anzeige eines Status- oder Textfelds.
| Das Reading ist frei wählbar.
|-
| <code>btnXIcon@btnXCmd </code>
| Button-Attribute
| Individuelle Definition von Icon und Befehl für die sechs möglichen Buttons.
Beispiel:sani_heating_automatic@controlMode.automatic
|-
| <code>#</code>
| Button ausblenden
| Beispiel:
<code>climacontrol:controlminidash,measured-temp,humidity,desired-temp,state,#,#,#,#,#,#</code>
|}

=== Individualisierung per userattr ===

Damit können Fhemcmd's, Farbe und Icon für jeden der sechs Buttons separat konfiguriert werden.

Beispiel-Definition:

<syntaxhighlight lang="Perl">
defmod widgetControlUserAttr dummy
attr widgetControlUserAttr userattr btn1Cmd btn1Color btn1Icon btn2Cmd btn2Color btn2Icon btn3Cmd btn3Color btn3Icon btn4Cmd btn4Color btn4Icon btn5Cmd btn5Color btn5Icon btn6Cmd btn6Color btn6Icon
attr widgetControlUserAttr btn1Cmd set widgetControlUserAttr state cooling
attr widgetControlUserAttr btn1Color blue
attr widgetControlUserAttr btn1Icon data:image/svg+xml;;charset=utf-8,%3Csvg%20xmlns...
attr widgetControlUserAttr btn2Cmd { fhem("set widgetControlUserAttr desired-temp ".(ReadingsVal("widgetControlUserAttr","desired-temp",0)-0.5)) }
attr widgetControlUserAttr btn2Color blue
attr widgetControlUserAttr btn2Icon data:image/svg+xml;;charset=utf-8,%3Csvg%20xmlns...
attr widgetControlUserAttr btn3Cmd set widgetControlUserAttr state off
attr widgetControlUserAttr btn3Icon data:image/svg+xml...
attr widgetControlUserAttr btn4Cmd set widgetControlUserAttr state heating
attr widgetControlUserAttr btn4Color red
attr widgetControlUserAttr btn4Icon data:image/svg+xml...
attr widgetControlUserAttr btn5Cmd { fhem("set widgetControlUserAttr desired-temp ".(ReadingsVal("widgetControlUserAttr","desired-temp",0)+0.5)) }
attr widgetControlUserAttr btn5Color red
attr widgetControlUserAttr btn5Icon data:image/svg+xml...
attr widgetControlUserAttr btn6Cmd set widgetControlUserAttr state on
attr widgetControlUserAttr btn6Color green
attr widgetControlUserAttr btn6Icon data:image/svg+xml...
attr widgetControlUserAttr readingList measured-temp humidity desired-temp state
attr widgetControlUserAttr room Test
attr widgetControlUserAttr setList measured-temp humidity desired-temp state
attr widgetControlUserAttr subType Thermostat
attr widgetControlUserAttr webCmd climacontrol
attr widgetControlUserAttr widgetOverride climacontrol:controlminidash,measured-temp,humidity,desired-temp,state,#,#,#,#,#,#
setstate widgetControlUserAttr heating
setstate widgetControlUserAttr 2025-11-30 11:51:37 desired-temp 20.0
setstate widgetControlUserAttr 2025-11-30 11:42:42 humidity 56
setstate widgetControlUserAttr 2025-11-30 11:42:48 measured-temp 19
setstate widgetControlUserAttr 2025-11-30 11:51:21 state heating
</syntaxhighlight>

=== Mit DOIF diverse Widgets in einem Table zusammenfassen ===

<syntaxhighlight lang="Perl">
defmod di_widget DOIF ##
attr di_widget room Test
attr di_widget uiTable {package ui_Table;;\
$_param='controlminidash,measured-temp,humidity,desired-temp,state,sani_heating_manual@controlMode.manual,rc_MINUS@temp-5,sani_heating_boost@boost,sani_heating_automatic@controlMode.automatic,rc_PLUS@temp+5,sani_heating_mode@night_day';;\
$_set="set desired-temp";;\
}\
widget([TH_DG_HM:desired-temp],$_param,$_set)|\
widget([TH_Kz_w_HM:desired-temp],$_param,$_set)\
widget([TH_Kz_o_HM:desired-temp],$_param,$_set)|\
widget([TH_Kueche_HM:desired-temp],$_param,$_set)\
widget([TH_Keller_HM:desired-temp],$_param,$_set)|\
widget([TH_Bad_HM:desired-temp],$_param,$_set)
</syntaxhighlight>

[[Kategorie:Code Snippets]]
[[Kategorie:FHEM Frontends]]

FHEMWEB/ControlMiniDash

2025-12-09T20:05:18Z

Schwatter:

[[Datei:Controlminidash.png|Mini|rechts]]
== ControlMiniDash – kompaktes Dashboard-Widget ==

Dieses Widget stellt ein kompaktes Dashboard bereit, das direkt in einem Device im [[FHEMWEB]] ([[PGM2]]) Frontend
definiert werden kann. Es wurde ursprünglich für ein Klimaanlagen-Setup entwickelt und dient als flexibles,
visuelles Bedienelement für Geräte wie z. B. den HmIP-WTH-2.

Das Widget besteht aus zentralen Informationstexten, einem farbigen Außenring, einem Sliderbutton für die
Solltemperatur sowie bis zu sechs frei definierbaren Buttons.

=== Hilfe ===
* Forenthread zum [https://forum.fhem.de/index.php?topic=142831.0 ControlMiniDash Widget]

=== Funktionen ===

==== Zentrale Textelemente ====
Vier Textelemente werden in der Mitte angezeigt:

* Gemessene Temperatur
* Luftfeuchtigkeit
* Solltemperatur
* Freitextfeld / Statusfeld

==== Interaktion ====
* Der runde Button auf dem Außenring ermöglicht das direkte Erhöhen oder Verringern der Solltemperatur.
* Der Außenring ändert seine Farbe abhängig von der aktuellen Temperatur (7 °C bis 30 °C).
* Links (1–3) und rechts (4–6) können jeweils drei frei belegbare Buttons definiert werden.
* Für die Buttons können sowohl Data-URL-SVG als auch FHEM-SVG-Icons verwendet werden.

=== Einrichtung im Device ===

Das Widget wird über <code>webCmd</code> und <code>widgetOverride</code> aktiviert.

Beispiel ohne Buttons:
<syntaxhighlight lang="Perl">
attr <device> webCmd climacontrol
attr <device> widgetOverride climacontrol:controlminidash,measured-temp,humidity,desired-temp,state,#,#,#,#,#,#
</syntaxhighlight>

Beispiel mit FhemSVG-Buttons:
<syntaxhighlight lang="Perl">
attr <device> webCmd climacontrol
attr <device> widgetOverride climacontrol:controlminidash,measured-temp,humidity,desired-temp,state,sani_heating_manual@controlMode.manual,rc_MINUS@temp-5,sani_heating_boost@boost,sani_heating_automatic@controlMode.automatic,rc_PLUS@temp+5,sani_heating_mode@night_day'
</syntaxhighlight>

Wenn im Device keine Luftfeuchte/Humidity vorhanden ist, kann diese mit # an der dritten Position ausgeblendet werden.
<syntaxhighlight lang="Perl">
attr HmIP_KLHR_STHD webCmd controlMD auto:manu:boost:on:off
attr HmIP_KLHR_STHD widgetOverride controlMD:controlminidash,measured-temp,#,desired-temp,HEATING_COOLING,#,#,#,#,#,#
</syntaxhighlight>

=== Parameterübersicht ===

{| class="wikitable"
! Abschnitt
! Bedeutung
! Beschreibung
|-
| <code><beliebigerName></code>
| webCmd-Zuweisung
| Gibt an, welches <code>webCmd</code> das Widget repräsentiert.
|-
| <code>controlminidash</code>
| Widget-Typ
| Aktiviert das Dashboard-Widget.
|-
| <code>measured-temp</code>
| Reading
| Anzeige der gemessenen Temperatur.
|-
| <code>humidity</code>
| Reading
| Anzeige der Luftfeuchtigkeit. Nicht vorhanden → mit <code>#</code> deaktivieren.
|-
| <code>desired-temp</code>
| Reading / Setter
| Anzeige und Steuerung der Solltemperatur.
|-
| <code>state</code>
| Anzeige eines Status- oder Textfelds.
| Das Reading ist frei wählbar.
|-
| <code>btnXIcon@btnXCmd </code>
| Button-Attribute
| Individuelle Definition von Icon und Befehl für die sechs möglichen Buttons.
Beispiel:sani_heating_automatic@controlMode.automatic
|-
| <code>#</code>
| Button ausblenden
| Beispiel:
<code>climacontrol:controlminidash,measured-temp,humidity,desired-temp,state,#,#,#,#,#,#</code>
|}

=== Individualisierung per userattr ===

Damit können Fhemcmd's, Farbe und Icon für jeden der sechs Buttons separat konfiguriert werden.

Beispiel-Definition:

<syntaxhighlight lang="Perl">
defmod widgetControlUserAttr dummy
attr widgetControlUserAttr userattr btn1Cmd btn1Color btn1Icon btn2Cmd btn2Color btn2Icon btn3Cmd btn3Color btn3Icon btn4Cmd btn4Color btn4Icon btn5Cmd btn5Color btn5Icon btn6Cmd btn6Color btn6Icon
attr widgetControlUserAttr btn1Cmd set widgetControlUserAttr state cooling
attr widgetControlUserAttr btn1Color blue
attr widgetControlUserAttr btn1Icon data:image/svg+xml;;charset=utf-8,%3Csvg%20xmlns...
attr widgetControlUserAttr btn2Cmd { fhem("set widgetControlUserAttr desired-temp ".(ReadingsVal("widgetControlUserAttr","desired-temp",0)-0.5)) }
attr widgetControlUserAttr btn2Color blue
attr widgetControlUserAttr btn2Icon data:image/svg+xml;;charset=utf-8,%3Csvg%20xmlns...
attr widgetControlUserAttr btn3Cmd set widgetControlUserAttr state off
attr widgetControlUserAttr btn3Icon data:image/svg+xml...
attr widgetControlUserAttr btn4Cmd set widgetControlUserAttr state heating
attr widgetControlUserAttr btn4Color red
attr widgetControlUserAttr btn4Icon data:image/svg+xml...
attr widgetControlUserAttr btn5Cmd { fhem("set widgetControlUserAttr desired-temp ".(ReadingsVal("widgetControlUserAttr","desired-temp",0)+0.5)) }
attr widgetControlUserAttr btn5Color red
attr widgetControlUserAttr btn5Icon data:image/svg+xml...
attr widgetControlUserAttr btn6Cmd set widgetControlUserAttr state on
attr widgetControlUserAttr btn6Color green
attr widgetControlUserAttr btn6Icon data:image/svg+xml...
attr widgetControlUserAttr readingList measured-temp humidity desired-temp state
attr widgetControlUserAttr room Test
attr widgetControlUserAttr setList measured-temp humidity desired-temp state
attr widgetControlUserAttr subType Thermostat
attr widgetControlUserAttr webCmd climacontrol
attr widgetControlUserAttr widgetOverride climacontrol:controlminidash,measured-temp,humidity,desired-temp,state,#,#,#,#,#,#
setstate widgetControlUserAttr heating
setstate widgetControlUserAttr 2025-11-30 11:51:37 desired-temp 20.0
setstate widgetControlUserAttr 2025-11-30 11:42:42 humidity 56
setstate widgetControlUserAttr 2025-11-30 11:42:48 measured-temp 19
setstate widgetControlUserAttr 2025-11-30 11:51:21 state heating
</syntaxhighlight>

=== Mit DOIF diverse Widgets in einem Table zusammenfassen ===

<syntaxhighlight lang="Perl">
defmod di_widget DOIF ##
attr di_widget room Test
attr di_widget uiTable {package ui_Table;;\
$_param='controlminidash,measured-temp,humidity,desired-temp,state,sani_heating_manual@controlMode.manual,rc_MINUS@temp-5,sani_heating_boost@boost,sani_heating_automatic@controlMode.automatic,rc_PLUS@temp+5,sani_heating_mode@night_day';;\
$_set="set desired-temp";;\
}\
widget([TH_DG_HM:desired-temp],$_param,$_set)|\
widget([TH_Kz_w_HM:desired-temp],$_param,$_set)\
widget([TH_Kz_o_HM:desired-temp],$_param,$_set)|\
widget([TH_Kueche_HM:desired-temp],$_param,$_set)\
widget([TH_Keller_HM:desired-temp],$_param,$_set)|\
widget([TH_Bad_HM:desired-temp],$_param,$_set)
</syntaxhighlight>

[[Kategorie:Code Snippets]]
[[Kategorie:FHEM Frontends]]

FHEMWEB/ControlMiniDash

2025-12-09T20:03:46Z

Schwatter:

[[Datei:Controlminidash.png|Mini|rechts]]
== ControlMiniDash – kompaktes Dashboard-Widget ==

Dieses Widget stellt ein kompaktes Dashboard bereit, das direkt in einem Device im [[FHEMWEB]] ([[PGM2]]) Frontend
definiert werden kann. Es wurde ursprünglich für ein Klimaanlagen-Setup entwickelt und dient als flexibles,
visuelles Bedienelement für Geräte wie z. B. den HmIP-WTH-2.

Das Widget besteht aus zentralen Informationstexten, einem farbigen Außenring, einem Sliderbutton für die
Solltemperatur sowie bis zu sechs frei definierbaren Buttons.

=== Hilfe ===
* Forenthread zum [https://forum.fhem.de/index.php?topic=142831.0 ControlMiniDash Widget]

=== Funktionen ===

==== Zentrale Textelemente ====
Vier Textelemente werden in der Mitte angezeigt:

* Gemessene Temperatur
* Luftfeuchtigkeit
* Solltemperatur
* Freitextfeld / Statusfeld

==== Interaktion ====
* Der runde Button auf dem Außenring ermöglicht das direkte Erhöhen oder Verringern der Solltemperatur.
* Der Außenring ändert seine Farbe abhängig von der aktuellen Temperatur (7 °C bis 30 °C).
* Links (1–3) und rechts (4–6) können jeweils drei frei belegbare Buttons definiert werden.
* Für die Buttons können sowohl Data-URL-SVG als auch FHEM-SVG-Icons verwendet werden.

=== Einrichtung im Device ===

Das Widget wird über <code>webCmd</code> und <code>widgetOverride</code> aktiviert.

Beispiel ohne Buttons:
<syntaxhighlight lang="Perl">
attr <device> webCmd climacontrol
attr <device> widgetOverride climacontrol:controlminidash,measured-temp,humidity,desired-temp,state,#,#,#,#,#,#
</syntaxhighlight>

Beispiel mit FhemSVG-Buttons:
<syntaxhighlight lang="Perl">
attr <device> webCmd climacontrol
attr <device> widgetOverride climacontrol:controlminidash,measured-temp,humidity,desired-temp,state,sani_heating_manual@controlMode.manual,rc_MINUS@temp-5,sani_heating_boost@boost,sani_heating_automatic@controlMode.automatic,rc_PLUS@temp+5,sani_heating_mode@night_day'
</syntaxhighlight>

Wenn im Device keine Luftfeuchte/Humidity vorhanden ist, kann diese mit # an der dritten Position ausgeblendet werden.
<syntaxhighlight lang="Perl">
attr HmIP_KLHR_STHD webCmd controlMD auto:manu:boost:on:off
attr HmIP_KLHR_STHD widgetOverride controlMD:controlminidash,measured-temp,#,desired-temp,HEATING_COOLING,#,#,#,#,#,#
</syntaxhighlight>

=== Parameterübersicht ===

{| class="wikitable"
! Abschnitt
! Bedeutung
! Beschreibung
|-
| <code><beliebigerName></code>
| webCmd-Zuweisung
| Gibt an, welches <code>webCmd</code> das Widget repräsentiert.
|-
| <code>controlminidash</code>
| Widget-Typ
| Aktiviert das Dashboard-Widget.
|-
| <code>measured-temp</code>
| Reading
| Anzeige der gemessenen Temperatur.
|-
| <code>humidity</code>
| Reading
| Anzeige der Luftfeuchtigkeit. Nicht vorhanden → mit <code>#</code> deaktivieren.
|-
| <code>desired-temp</code>
| Reading / Setter
| Anzeige und Steuerung der Solltemperatur.
|-
| <code>state</code>
| Anzeige eines Status- oder Textfelds.
| Das Reading ist frei wählbar.
|-
| <code>btnXIcon@btnXCmd </code>
| Button-Attribute
| Individuelle Definition von Icon und Befehl für die sechs möglichen Buttons.
Beispiel:sani_heating_automatic@controlMode.automatic
|-
| <code>#</code>
| Button ausblenden
| Beispiel:
<code>climacontrol:controlminidash,measured-temp,humidity,desired-temp,state,#,#,#,#,#,#</code>
|}

=== Individualisierung per userattr ===

Damit können Fhemcmd's, Farbe und Icon für jeden der sechs Buttons separat konfiguriert werden.

Beispiel-Definition:

<syntaxhighlight lang="Perl">
defmod widgetControlUserAttr dummy
attr widgetControlUserAttr userattr btn1Cmd btn1Color btn1Icon btn2Cmd btn2Color btn2Icon btn3Cmd btn3Color btn3Icon btn4Cmd btn4Color btn4Icon btn5Cmd btn5Color btn5Icon btn6Cmd btn6Color btn6Icon
attr widgetControlUserAttr btn1Cmd set widgetControlUserAttr state cooling
attr widgetControlUserAttr btn1Color blue
attr widgetControlUserAttr btn1Icon data:image/svg+xml;;charset=utf-8,%3Csvg%20xmlns...
attr widgetControlUserAttr btn2Cmd { fhem("set widgetControlUserAttr desired-temp ".(ReadingsVal("widgetControlUserAttr","desired-temp",0)-0.5)) }
attr widgetControlUserAttr btn2Color blue
attr widgetControlUserAttr btn2Icon data:image/svg+xml;;charset=utf-8,%3Csvg%20xmlns...
attr widgetControlUserAttr btn3Cmd set widgetControlUserAttr state off
attr widgetControlUserAttr btn3Icon data:image/svg+xml...
attr widgetControlUserAttr btn4Cmd set widgetControlUserAttr state heating
attr widgetControlUserAttr btn4Color red
attr widgetControlUserAttr btn4Icon data:image/svg+xml...
attr widgetControlUserAttr btn5Cmd { fhem("set widgetControlUserAttr desired-temp ".(ReadingsVal("widgetControlUserAttr","desired-temp",0)+0.5)) }
attr widgetControlUserAttr btn5Color red
attr widgetControlUserAttr btn5Icon data:image/svg+xml...
attr widgetControlUserAttr btn6Cmd set widgetControlUserAttr state on
attr widgetControlUserAttr btn6Color green
attr widgetControlUserAttr btn6Icon data:image/svg+xml...
attr widgetControlUserAttr readingList measured-temp humidity desired-temp state
attr widgetControlUserAttr room Test
attr widgetControlUserAttr setList measured-temp humidity desired-temp state
attr widgetControlUserAttr subType Thermostat
attr widgetControlUserAttr webCmd climacontrol
attr widgetControlUserAttr widgetOverride climacontrol:controlminidash,measured-temp,humidity,desired-temp,state,#,#,#,#,#,#
setstate widgetControlUserAttr heating
setstate widgetControlUserAttr 2025-11-30 11:51:37 desired-temp 20.0
setstate widgetControlUserAttr 2025-11-30 11:42:42 humidity 56
setstate widgetControlUserAttr 2025-11-30 11:42:48 measured-temp 19
setstate widgetControlUserAttr 2025-11-30 11:51:21 state heating
</syntaxhighlight>

=== Mit DOIF diverse Widgets in einem Table zusammenfassen ===

<syntaxhighlight lang="Perl">
defmod di_widget DOIF ##
attr di_widget room Test
attr di_widget uiTable {package ui_Table;;\
$_param='controlminidash,measured-temp,humidity,desired-temp,state,sani_heating_manual@controlMode.manual,rc_MINUS@temp-5,sani_heating_boost@boost,sani_heating_automatic@controlMode.automatic,rc_PLUS@temp+5,sani_heating_mode@night_day';;\
$_set="set desired-temp";;\
}\
widget([TH_DG_HM:desired-temp],$_param,$_set)|\
widget([TH_Kz_w_HM:desired-temp],$_param,$_set)\
widget([TH_Kz_o_HM:desired-temp],$_param,$_set)|\
widget([TH_Kueche_HM:desired-temp],$_param,$_set)\
widget([TH_Keller_HM:desired-temp],$_param,$_set)|\
widget([TH_Bad_HM:desired-temp],$_param,$_set)
</syntaxhighlight>

[[Kategorie:FHEM Frontends]]

FHEMWEB/MiniChart

2025-12-07T18:13:14Z

Schwatter:

[[Datei:Minichart flex mobile.png]]

== MiniChart – kompaktes Chart-Widget (Line & Bar) ==

Das MiniChart-Widget visualisiert Messwertverläufe als kompaktes Liniendiagramm oder Balkendiagramm.
Zusätzlich zeigt es drei aktuelle Werte, die aus Label, Reading und Einheit bestehen. Zum Einrichten sind 3 Schritte notwendig.

=== Hilfe ===
Forenthread zum [https://forum.fhem.de/index.php?topic=141857.0 MiniChart Widget]

== 1️⃣ 99_myUtils.pm – Hilfsfunktion zum Speichern von historischen Werten ==

Zuerst wird eine Subroutine angelegt, die neue Werte an ein Fixed-Array anhängt und alte Werte entfernt, falls die maximale Größe überschritten wird.

sub AppendToFixedArray {
my ($dev, $reading, $newVal, $maxSize) = @_;
$maxSize //= 250; # Standard: 250 Werte
my $current = ReadingsVal($dev, $reading, '');
my @values = split(',', $current);
if (@values >= $maxSize) {
@values = @values[-($maxSize - 1) .. -1]; # Älteste Werte entfernen
}
push @values, $newVal;
return join(',', @values);
}

== 2️⃣ at-Timer zum regelmäßigen Aktualisieren ==

Mit einem `at`-Timer werden die Werte der Messgeräte regelmäßig in die `chartArray`-Readings geschrieben.

defmod chartUpdate at +*00:05 {\
my $val = ReadingsVal("Smartmeter_2E1F50", "APOX_Power", 0);;\
my $new = AppendToFixedArray("Smartmeter_2E1F50", "chartArray", $val);;\
fhem("setreading Smartmeter_2E1F50 chartArray $new");;\
\
my $val1 = ReadingsVal("OpenDTU", "power", 0);;\
my $new1 = AppendToFixedArray("OpenDTU", "chartArray", $val1);;\
fhem("setreading OpenDTU chartArray $new1");;\
\
my $val2 = ReadingsVal("Kuehlschrank", "power", 0);;\
my $new2 = AppendToFixedArray("Kuehlschrank", "chartArray", $val2);;\
fhem("setreading Kuehlschrank chartArray $new2");;\
\
my $val3 = ReadingsVal("Luftentfeuchter", "ENERGY_Power", 0);;\
my $new3 = AppendToFixedArray("Luftentfeuchter", "chartArray", $val3);;\
fhem("setreading Luftentfeuchter chartArray $new3");;\
\
my $val4 = ReadingsVal("Geschirrspueler", "power", 0);;\
my $new4 = AppendToFixedArray("Geschirrspueler", "chartArray", $val4);;\
fhem("setreading Geschirrspueler chartArray $new4");;\
\
my $val5 = ReadingsVal("Trockner", "power", 0);;\
my $new5 = AppendToFixedArray("Trockner", "chartArray", $val5);;\
fhem("setreading Trockner chartArray $new5");;\
\
my $val6 = ReadingsVal("Waschmaschine", "power", 0);;\
my $new6 = AppendToFixedArray("Waschmaschine", "chartArray", $val6);;\
fhem("setreading Waschmaschine chartArray $new6");;\
\
my $val7 = ReadingsVal("Pumpe_FBH_Pwr", "power", 0);;\
my $new7 = AppendToFixedArray("Pumpe_FBH_Pwr", "chartArray", $val7);;\
fhem("setreading Pumpe_FBH_Pwr chartArray $new7");;\
\
my $val8 = ReadingsVal("Heizstab_BW_Pwr", "power", 0);;\
my $new8 = AppendToFixedArray("Heizstab_BW_Pwr", "chartArray", $val8);;\
fhem("setreading Heizstab_BW_Pwr chartArray $new8");;\
}

== 3️⃣ Minichart ==

==== 1. Widget-Datei aus contrib laden ====

Bevor das MiniChart-Widget genutzt werden kann, muss die JS-Datei ins FHEM-Webverzeichnis kopiert werden.
Dies kann mit der Perlfunktion { Svn_GetFile('from SVN Path', 'to local Path') } direkt in der FHEM Kommandozeile erfolgen.

{ Svn_GetFile('contrib/fhemweb_minichart.js', 'www/pgm2/fhemweb_minichart.js') }

==== 2. Widget im Device mit widgetOverride einrichten ====

==== Werteanzeige ====
Drei Textzeilen können angezeigt werden, jeweils im Format:
Label@Reading@Einheit

Beispiel:
Jetzt@power@W,Heute@yieldday@kWh,Gesamt@yieldtotal@kWh

===== Ausblenden einzelner Zeilen =====
Jede der drei Zeilen kann vollständig oder teilweise ausgeblendet werden, indem das jeweilige Element
leer gelassen wird. Das Widget setzt intern automatisch ein geschütztes Leerzeichen ( ).

Beispiele:
* Nur Label ausblenden:
@reading@W
* Nur Reading ausblenden:
Label@@W
* Nur Einheit ausblenden:
Label@reading@
* Ganze Zeile ausblenden:
 

==== Diagrammtypen ====
MiniChart unterstützt zwei Diagrammtypen:

* line – geglättetes Liniendiagramm mit Farbverlauf
* bar – Balkendiagramm mit positiver/negativer Farbgebung

Das Chart-Reading benötigt eine kommagetrennte Zahlenliste, z. B.:
10,20,15,18,25

Chartoptionen:
chartType@colorPositive@colorNegative

Beispiele:
line@#3b82f6@#ff0000
bar@#00cc88@#cc0044

Fallback (nur ChartReading angegeben):
dann wird automatisch line@#3b82f6@#3b82f6 gesetzt

=== Einrichtung im Device ===

Syntax:
<webCmd>:minichart,Label1@Reading1@Einheit,Label2@Reading2@Einheit,Label3@Reading3@Einheit,ChartReading,chartType@colorPos@colorNeg

Beispiel Liniendiagramm:
attr <device> webCmd minichart
attr <device> widgetOverride minichart:minichart,Jetzt@power@W,Heute@yieldday@kWh,Gesamt@yieldtotal@kWh,chartArray,line@#3b82f6@#ff0000

Beispiel Balkendiagramm:
...,chartArray,bar@#00cc88@#cc0044

Fallback (Standard line + Standardfarbe):
...,chartArray

=== Parameterübersicht ===

{| class="wikitable"
! Abschnitt
! Bedeutung
! Beschreibung
|-
| <code><beliebigerName></code>
| webCmd-Zuweisung
| Definiert die Instanz des Widgets.
|-
| <code>minichart</code>
| Widget-Typ
| Aktiviert das MiniChart-Widget.
|-
| <code>Label1@Reading1@Einheit1</code>
| Anzeigezeilen
| Drei frei definierbare Werte-/Statusfelder; mit <code> </code> komplett ausblendbar.
|-
| <code>Label2@Reading2@Einheit2</code>
| Anzeigezeilen
| Drei frei definierbare Werte-/Statusfelder; mit <code> </code> komplett ausblendbar.
|-
| <code>Label3@Reading3@Einheit3</code>
| Anzeigezeilen
| Drei frei definierbare Werte-/Statusfelder; mit <code> </code> komplett ausblendbar.
|-
| <code>ChartReading</code>
| Datenquelle
| Liefert Array-Werte für das Diagramm .
|-
| <code>chartType@colorPos@colorNeg</code>
| Chart-Optionen
| line oder bar; Farben optional.
|}

FHEMWEB/MiniChart

2025-12-07T17:50:31Z

Schwatter:

[[Datei:Minichart flex mobile.png]]

== MiniChart – kompaktes Chart-Widget (Line & Bar) ==

Das MiniChart-Widget visualisiert Messwertverläufe als kompaktes Liniendiagramm oder Balkendiagramm.
Zusätzlich zeigt es drei aktuelle Werte, die aus Label, Reading und Einheit bestehen. Zum Einrichten sind 3 Schritte notwendig.

=== Hilfe ===
Forenthread zum [https://forum.fhem.de/index.php?topic=141857.0 MiniChart Widget]

== 1️⃣ 99_myUtils.pm – Hilfsfunktion zum Speichern von historischen Werten ==

Zuerst wird eine Subroutine angelegt, die neue Werte an ein Fixed-Array anhängt und alte Werte entfernt, falls die maximale Größe überschritten wird.

sub AppendToFixedArray {
my ($dev, $reading, $newVal, $maxSize) = @_;
$maxSize //= 250; # Standard: 250 Werte
my $current = ReadingsVal($dev, $reading, '');
my @values = split(',', $current);
if (@values >= $maxSize) {
@values = @values[-($maxSize - 1) .. -1]; # Älteste Werte entfernen
}
push @values, $newVal;
return join(',', @values);
}

== 2️⃣ at-Timer zum regelmäßigen Aktualisieren ==

Mit einem `at`-Timer werden die Werte der Messgeräte regelmäßig in die `chartArray`-Readings geschrieben.

defmod chartUpdate at +*00:05 {\
my $val = ReadingsVal("Smartmeter_2E1F50", "APOX_Power", 0);;\
my $new = AppendToFixedArray("Smartmeter_2E1F50", "chartArray", $val);;\
fhem("setreading Smartmeter_2E1F50 chartArray $new");;\
\
my $val1 = ReadingsVal("OpenDTU", "power", 0);;\
my $new1 = AppendToFixedArray("OpenDTU", "chartArray", $val1);;\
fhem("setreading OpenDTU chartArray $new1");;\
\
my $val2 = ReadingsVal("Kuehlschrank", "power", 0);;\
my $new2 = AppendToFixedArray("Kuehlschrank", "chartArray", $val2);;\
fhem("setreading Kuehlschrank chartArray $new2");;\
\
my $val3 = ReadingsVal("Luftentfeuchter", "ENERGY_Power", 0);;\
my $new3 = AppendToFixedArray("Luftentfeuchter", "chartArray", $val3);;\
fhem("setreading Luftentfeuchter chartArray $new3");;\
\
my $val4 = ReadingsVal("Geschirrspueler", "power", 0);;\
my $new4 = AppendToFixedArray("Geschirrspueler", "chartArray", $val4);;\
fhem("setreading Geschirrspueler chartArray $new4");;\
\
my $val5 = ReadingsVal("Trockner", "power", 0);;\
my $new5 = AppendToFixedArray("Trockner", "chartArray", $val5);;\
fhem("setreading Trockner chartArray $new5");;\
\
my $val6 = ReadingsVal("Waschmaschine", "power", 0);;\
my $new6 = AppendToFixedArray("Waschmaschine", "chartArray", $val6);;\
fhem("setreading Waschmaschine chartArray $new6");;\
\
my $val7 = ReadingsVal("Pumpe_FBH_Pwr", "power", 0);;\
my $new7 = AppendToFixedArray("Pumpe_FBH_Pwr", "chartArray", $val7);;\
fhem("setreading Pumpe_FBH_Pwr chartArray $new7");;\
\
my $val8 = ReadingsVal("Heizstab_BW_Pwr", "power", 0);;\
my $new8 = AppendToFixedArray("Heizstab_BW_Pwr", "chartArray", $val8);;\
fhem("setreading Heizstab_BW_Pwr chartArray $new8");;\
}

== 3️⃣ Minichart ==

==== 1. Widget-Datei aus contrib laden ====

Bevor das MiniChart-Widget genutzt werden kann, muss die JS-Datei ins FHEM-Webverzeichnis kopiert werden.
Dies kann mit der Perlfunktion { Svn_GetFile('from SVN Path', 'to local Path') } direkt in der FHEM Kommandozeile erfolgen.

{ Svn_GetFile('contrib/fhemweb_minichart.js', 'www/pgm2/fhemweb_minichart.js') }

==== 2. Widget im Device mit widgetOverride einrichten ====

==== Werteanzeige ====
Drei Textzeilen können angezeigt werden, jeweils im Format:
Label@Reading@Einheit

Beispiel:
Jetzt@power@W,Heute@yieldday@kWh,Gesamt@yieldtotal@kWh

===== Ausblenden einzelner Zeilen =====
Jede der drei Zeilen kann vollständig oder teilweise ausgeblendet werden, indem das jeweilige Element
leer gelassen wird. Das Widget setzt intern automatisch ein geschütztes Leerzeichen ( ).

Beispiele:
* Nur Label ausblenden:
@reading@W
* Nur Reading ausblenden:
Label@@W
* Nur Einheit ausblenden:
Label@reading@
* Ganze Zeile ausblenden:
 

==== Diagrammtypen ====
MiniChart unterstützt zwei Diagrammtypen:

* line – geglättetes Liniendiagramm mit Farbverlauf
* bar – Balkendiagramm mit positiver/negativer Farbgebung

Das Chart-Reading liefert eine kommagetrennte Zahlenliste, z. B.:
10,20,15,18,25

Chartoptionen:
chartType@colorPositive@colorNegative

Beispiele:
line@#3b82f6@#ff0000
bar@#00cc88@#cc0044

Fallback (nur ChartReading angegeben):
line@#3b82f6@#3b82f6

=== Einrichtung im Device ===

Syntax:
<webCmd>:minichart,Label1@Reading1@Einheit,Label2@Reading2@Einheit,Label3@Reading3@Einheit,ChartReading,chartType@colorPos@colorNeg

Beispiel Liniendiagramm:
attr <device> webCmd minichart
attr <device> widgetOverride minichart:minichart,Jetzt@power@W,Heute@yieldday@kWh,Gesamt@yieldtotal@kWh,chartArray,line@#3b82f6@#ff0000

Beispiel Balkendiagramm:
..., chartArray, bar@#00cc88@#cc0044

Fallback (Standard line + Standardfarbe):
..., chartArray

=== Parameterübersicht ===

{| class="wikitable"
! Abschnitt
! Bedeutung
! Beschreibung
|-
| <code><beliebigerName></code>
| webCmd-Zuweisung
| Definiert die Instanz des Widgets.
|-
| <code>minichart</code>
| Widget-Typ
| Aktiviert das MiniChart-Widget.
|-
| <code>Label1@Reading1@Einheit1</code>
| Anzeigezeilen
| Drei frei definierbare Werte-/Statusfelder; mit <code> </code> komplett ausblendbar.
|-
| <code>Label2@Reading2@Einheit2</code>
| Anzeigezeilen
| Drei frei definierbare Werte-/Statusfelder; mit <code> </code> komplett ausblendbar.
|-
| <code>Label3@Reading3@Einheit3</code>
| Anzeigezeilen
| Drei frei definierbare Werte-/Statusfelder; mit <code> </code> komplett ausblendbar.
|-
| <code>ChartReading</code>
| Datenquelle
| Liefert Array-Werte für das Diagramm .
|-
| <code>chartType@colorPos@colorNeg</code>
| Chart-Optionen
| line oder bar; Farben optional.
|}

FHEMWEB/Widgets

2025-12-07T17:48:43Z

Schwatter:

Widgets sind Frontendelemente, die der Dateneingabe und -anzeige dienen. Die hier gezeigten Frontendelemente werden durch [[FHEMWEB]] ([[PGM2]]) bereitgestellt.

== Syntax ==
Die Syntax der Widgets ist unter dem Attribut [https://fhem.de/commandref_DE.html#widgetOverride widgetOverride] in der Befehlreferenz beschrieben.

== Verwendung ==
Viele Module (u.a. [[DOIF]], [[dummy]], [[MQTT_DEVICE]], [[MQTT2_DEVICE]], [[MYSENSORS_DEVICE]], [[readingsGroup]]) bieten die Möglichkeit eine Benutzerschnittstelle zu erstellen.

Widgets werden über <code><name>:<modifier></code>-Paare an [[Readings]] oder [[Attribute]] gebunden, dabei ist:

* <code><name></code> ein Readingsname, ein Attribut oder ein Mapping-Argument.
* <code><modifier></code> ein Widget einschliesslich Parameter.

Bei der Erstellung spielen verschiedene Attribute zusammen:

* Mit readingList (bzw. bei Modulen, die dies nicht kennen: widgetOverride) ist es möglich den Set-Befehl auf [[Readings]] zu erweitern, siehe [https://fhem.de/commandref_DE.html#readingList readingList].
* Mit [[setList]] (bzw. widgetOverride) werden die Widgets einem Reading zugeordnet und parametrisiert, siehe [https://fhem.de/commandref_DE.html#setList setList].
* Mit [[webCmd]] werden die Widgets angezeigt, siehe [https://fhem.de/commandref_DE.html#setList webCmd].
* Mit webCmdLabel werden die Widgets beschriftet und tabellarisch angeordnet, siehe [https://fhem.de/commandref_DE.html#webCmdLabel webCmdLabel].
* Mit widgetOverride ist es möglich, die im Modul festgelegten Widgets zu überschreiben, siehe [https://fhem.de/commandref_DE.html#widgetOverride widgetOverride].
* Mit [[eventMap]] ist es möglich Widgets an Mapping-Argumente zu binden, siehe [https://fhem.de/commandref_DE.html#eventMap eventMap] und {{Link2Forum|Topic=76755|LinkText=eventMap und Widget-Anbindung}}.
Das Zusammenspiel dieser Attribute ist u.A. im Artikel [[DeviceOverview anpassen#webCmd .26 Co|DeviceOverview anpassen]] näher erläutert.

== Zusammenstellung der Widgets ==
[[Datei:fhemweb_widgets_1.png|mini|rechts]]
Die Bildschirmkopie zeigt das Benutzerinterface des Dummys mit den Widgets

=== weitere Konfiguration ===
* '''knob''', siehe http://anthonyterrien.com/knob/
* '''colorpicker''', siehe [[Color]]

 
== Das Beispiel für [[DOIF/Import_von_Code_Snippets|Raw definition]] zum Ausprobieren ==
In der vorstehenden Abbildung fehlt das Look and Feel der Widgets. Mit dem folgenden Code-Snippet zum Ausprobieren, wird dies ergänzt.

<pre>
defmod widgets dummy
attr widgets readingList 00select 01select 02selectnumbers 03selectnumbers 04textField 05textFieldNL 06textField-long 07textFieldNL-long 08slider 09multiple 10multiple-strict 11knob 12sortable 13sortable-strict 14sortable-given 15uzsuToggle 16uzsuSelect 17uzsuSelectRadio 18uzsuDropDown 19colorpicker_RGB 19colorpicker_HSV 19colorpicker_CT 19colorpicker_HUE 19colorpicker_BRI 20time 21iconRadio 21iconRadio_use4icon 22iconSwitch 23iconLabel 24iconButtons 24iconButtons_use4icon 25bitfield 26widgetList
attr widgets room 0_Test
attr widgets setList 00select:1,2,3,4,5,0,a,b,c,def,hik \
01select:select,1,2,3,4,5,0,a,b,c,def,hik \
02selectnumbers:selectnumbers,-30,3,33,1,lin \
03selectnumbers:selectnumbers,1,0.0625,140000,0,log10 \
04textField:textField \
05textFieldNL:textFieldNL\
06textField-long:textField-long,87 \
07textFieldNL-long:textFieldNL-long,87 \
08slider:slider,7,0.5,30,1 \
09multiple:multiple,shirt,shoes,skirt,trowsers \
10multiple-strict:multiple-strict,red,green,blue,yellow \
11knob:knob,min:0,max:360,width:50,height:50,step:1,lineCap:round,angleOffset:180,cursor:3,thickness:.3 \
12sortable:sortable,blue,shirt,white,shoes,brown,skirt,black,jeans\
13sortable-strict:sortable-strict,blue,shirt,white,shoes,brown,skirt,black,jeans\
14sortable-given:sortable-given,blue,shirt,white,shoes,brown,skirt,black,jeans\
15uzsuToggle:uzsuToggle,ON,OFF\
16uzsuSelect:uzsuSelect,blue,shirt,white,shoes,brown,skirt,black,jeans\
17uzsuSelectRadio:uzsuSelectRadio,MW,KW,UKW\
18uzsuDropDown:uzsuDropDown,red,green,blue,yellow \
19colorpicker_RGB:colorpicker,RGB \
19colorpicker_HSV:colorpicker,HSV \
19colorpicker_CT:colorpicker,CT,2000,10,6500 \
19colorpicker_HUE:colorpicker,HUE,0,1,359 \
19colorpicker_BRI:colorpicker,BRI,0,1,100 \
20time:time \
21iconRadio:iconRadio,#808080,10,fts_shutter_10@FFA500,20,fts_shutter_20@orange,30,fts_shutter_30@orange,40,fts_shutter_40@orange,50,fts_shutter_50@orange,60,fts_shutter_60@orange,70,fts_shutter_70@orange,80,fts_shutter_80@orange,90,fts_shutter_90@orange,100,fts_shutter_100@orange \
21iconRadio_use4icon:iconRadio,use4icon@808080,10,fts_shutter_10@FFA500,20,fts_shutter_20@orange,30,fts_shutter_30@orange,40,fts_shutter_40@orange,50,fts_shutter_50@orange,60,fts_shutter_60@orange,70,fts_shutter_70@orange,80,fts_shutter_80@orange,90,fts_shutter_90@orange,100,fts_shutter_100@orange \
22iconSwitch:iconSwitch,wide#open,@red,half#open,fts_shutter_50@%23cd2906,totally#closed,fts_shutter_100@magenta,half#closed, \
23iconLabel:iconLabel,wide#open,@red,half#open,fts_shutter_50@%23cd2906,totally#closed,fts_shutter_100@magenta,half#closed,\
24iconButtons:iconButtons,orange,Bad,sani_heating@green,Wohnzimmer_1,sani_heating@green,Wohnzimmer_2,sani_heating@green,Esszimmer,sani_heating@green,Diele,sani_heating@green,Gäste_WC,sani_heating@green,Büro,sani_heating@green,Wintergarten,sani_heating@green,Werkstatt,sani_heating@green,Schlafzimmer,sani_heating@green \
24iconButtons_use4icon:iconButtons,use4icon@red,Bad,sani_heating@0000FF,Wohnzimmer_1,sani_heating@blue,Wohnzimmer_2,sani_heating@blue,Esszimmer,sani_heating@blue,Diele,sani_heating@blue,Gäste_WC,sani_heating@blue,Büro,sani_heating@blue,Wintergarten,sani_heating@blue,Werkstatt,sani_heating@blue,Schlafzimmer,sani_heating@0000FF\
25bitfield:bitfield\
26widgetList:widgetList,4,select,Bad,Küche,Wohnzimmer,6,selectnumbers,7,1,30,0,lin
attr widgets userReadings 23iconLabel:22iconSwitch.* {ReadingsVal($name,"22iconSwitch","wideopen")}
attr widgets webCmd 00select:01select:02selectnumbers:03selectnumbers:04textField:05textFieldNL:06textField-long:07textFieldNL-long:08slider:20time:09multiple:10multiple-strict:11knob:12sortable:13sortable-strict:14sortable-given:15uzsuToggle:16uzsuSelect:17uzsuSelectRadio:18uzsuDropDown:19colorpicker_RGB:19colorpicker_HSV:19colorpicker_CT:19colorpicker_HUE:19colorpicker_BRI:21iconRadio:21iconRadio_use4icon:24iconButtons:24iconButtons_use4icon:22iconSwitch:23iconLabel:25bitfield:26widgetList
attr widgets webCmdLabel select (default)\
:select (explicit)\
:selectnumbers (linear)\
:selectnumbers (logarithmic)\
:textField\
:textFieldNL (no label)\
:textField-long (multi-line)\
:textFieldNL-long (multi-line,no label)\
:slider\
:time\
:multiple\
:multiple-strict\
:knob\
:sortable\
:sortable-strict\
:sortable-given\
:uzsuToggle\
:uzsuSelect\
:uzsuSelectRadio\
:uzsuDropDown\
:colorpicker RGB\
:colorpicker HSV\
:colorpicker Farbtemperatur\
:colorpicker Farbton\
:colorpicker Helligkeit\
:iconRadio\
:iconRadio prefix use4icon\
:iconButtons\
:iconButtons prefix use4icon\
:iconSwitch\
:iconLabel\
:bitfield\
:widgetList (Raum Temperatur)
attr widgets widgetOverride readingList|setList|webCmd|webCmdLabel|widgetOverride:textField-long,86

setstate widgets iconSwitch wide#open
setstate widgets 2024-03-19 20:18:38 00select 1
setstate widgets 2021-09-27 18:52:48 01select 0
setstate widgets 2021-09-27 18:52:33 02selectnumbers 0.0
setstate widgets 2021-09-27 12:13:35 03selectnumbers 64938
setstate widgets 2023-01-03 14:32:14 04textField Hello
setstate widgets 2017-08-24 17:39:22 05textField Hallo
setstate widgets 2023-01-03 14:47:53 05textFieldNL Hello
setstate widgets 2023-01-08 19:25:46 06textField-long Hello
setstate widgets 2022-11-28 18:23:30 07textFieldNL-long Hello
setstate widgets 2017-08-24 18:22:07 08slider 17.0
setstate widgets 2017-08-24 18:22:40 09multiple shirt,shoes
setstate widgets 2017-08-24 18:22:57 10multiple-strict red,green
setstate widgets 2021-09-27 03:19:35 11knob 207
setstate widgets 2017-08-24 18:21:09 12sortable blue,shirt,brown,skirt,white,shoes,black,jeans
setstate widgets 2017-08-24 18:48:17 13sortable-strict blue,white,shirt,shoes,brown,skirt,black,jeans
setstate widgets 2017-08-24 18:49:34 14sortable-given blue,shirt,white,shoes,brown,skirt,black,jeans
setstate widgets 2024-03-19 20:11:06 15uzsuToggle OFF
setstate widgets 2024-03-19 20:10:53 16uzsuSelect brown
setstate widgets 2024-03-19 20:11:16 17uzsuSelectRadio UKW
setstate widgets 2024-03-19 20:11:09 18uzsuDropDown blue
setstate widgets 2017-10-07 07:56:43 19colorpicker_BRI 54
setstate widgets 2017-10-07 07:56:31 19colorpicker_CT 5100
setstate widgets 2017-10-07 07:59:26 19colorpicker_HSV 208c20
setstate widgets 2017-10-07 07:56:29 19colorpicker_HUE 94
setstate widgets 2017-10-07 07:53:01 19colorpicker_RGB c95918
setstate widgets 2017-08-24 19:03:20 20time 12:00
setstate widgets 2021-09-27 18:54:56 21iconRadio 90
setstate widgets 2021-09-27 03:19:18 21iconRadio_use4icon 40
setstate widgets 2024-03-20 18:55:18 22iconSwitch half closed
setstate widgets 2024-03-20 18:55:18 23iconLabel half closed
setstate widgets 2021-09-27 18:57:53 24iconButtons Büro,Schlafzimmer
setstate widgets 2017-10-25 08:20:05 24iconButtons_use4icon Bad,Wohnzimmer_2,Diele,Büro,Werkstatt
setstate widgets 2024-03-19 20:07:03 25bitfield 25
setstate widgets 2024-04-11 19:25:52 26widgetList Küche,23
setstate widgets 2021-09-27 19:02:25 state iconSwitch wide#open
</pre>

== Beigesteuerte Widgets ==
[[Datei:datetimepicker.png|mini|rechts]]
* Forenthread {{Link2Forum|Topic=35736|LinkText=neues DateTimePicker Widget}}
 [[Datei:Controlminidash.png|mini|rechts]]
* Wiki Seite [[FHEMWEB/ControlMiniDash|neues ControlMiniDash Widget]]
 [[Datei:Minichart flex mobile.png|mini|rechts]]
* Wiki Seite [[FHEMWEB/MiniChart|neues MiniChart Widget]]

[[Kategorie:Code Snippets]]
[[Kategorie:Glossary]]
[[Kategorie:HOWTOS]]

FHEMWEB/MiniChart

2025-12-07T17:34:04Z

Schwatter:

[[Datei:Minichart flex mobile.png]]

== MiniChart – kompaktes Chart-Widget (Line & Bar) ==

Das MiniChart-Widget visualisiert Messwertverläufe als kompaktes Liniendiagramm oder Balkendiagramm.
Zusätzlich zeigt es drei aktuelle Werte, die aus Label, Reading und Einheit bestehen. Zum Einrichten sind 3 Schritte notwendig.

=== Hilfe ===
Forenthread zum [https://forum.fhem.de/index.php?topic=142831.0 ControlMiniDash Widget]

== 1️⃣ 99_myUtils.pm – Hilfsfunktion zum Speichern von historischen Werten ==

Zuerst wird eine Subroutine angelegt, die neue Werte an ein Fixed-Array anhängt und alte Werte entfernt, falls die maximale Größe überschritten wird.

sub AppendToFixedArray {
my ($dev, $reading, $newVal, $maxSize) = @_;
$maxSize //= 250; # Standard: 250 Werte
my $current = ReadingsVal($dev, $reading, '');
my @values = split(',', $current);
if (@values >= $maxSize) {
@values = @values[-($maxSize - 1) .. -1]; # Älteste Werte entfernen
}
push @values, $newVal;
return join(',', @values);
}

== 2️⃣ at-Timer zum regelmäßigen Aktualisieren ==

Mit einem `at`-Timer werden die Werte der Messgeräte regelmäßig in die `chartArray`-Readings geschrieben.

defmod chartUpdate at +*00:05 {\
my $val = ReadingsVal("Smartmeter_2E1F50", "APOX_Power", 0);;\
my $new = AppendToFixedArray("Smartmeter_2E1F50", "chartArray", $val);;\
fhem("setreading Smartmeter_2E1F50 chartArray $new");;\
\
my $val1 = ReadingsVal("OpenDTU", "power", 0);;\
my $new1 = AppendToFixedArray("OpenDTU", "chartArray", $val1);;\
fhem("setreading OpenDTU chartArray $new1");;\
\
my $val2 = ReadingsVal("Kuehlschrank", "power", 0);;\
my $new2 = AppendToFixedArray("Kuehlschrank", "chartArray", $val2);;\
fhem("setreading Kuehlschrank chartArray $new2");;\
\
my $val3 = ReadingsVal("Luftentfeuchter", "ENERGY_Power", 0);;\
my $new3 = AppendToFixedArray("Luftentfeuchter", "chartArray", $val3);;\
fhem("setreading Luftentfeuchter chartArray $new3");;\
\
my $val4 = ReadingsVal("Geschirrspueler", "power", 0);;\
my $new4 = AppendToFixedArray("Geschirrspueler", "chartArray", $val4);;\
fhem("setreading Geschirrspueler chartArray $new4");;\
\
my $val5 = ReadingsVal("Trockner", "power", 0);;\
my $new5 = AppendToFixedArray("Trockner", "chartArray", $val5);;\
fhem("setreading Trockner chartArray $new5");;\
\
my $val6 = ReadingsVal("Waschmaschine", "power", 0);;\
my $new6 = AppendToFixedArray("Waschmaschine", "chartArray", $val6);;\
fhem("setreading Waschmaschine chartArray $new6");;\
\
my $val7 = ReadingsVal("Pumpe_FBH_Pwr", "power", 0);;\
my $new7 = AppendToFixedArray("Pumpe_FBH_Pwr", "chartArray", $val7);;\
fhem("setreading Pumpe_FBH_Pwr chartArray $new7");;\
\
my $val8 = ReadingsVal("Heizstab_BW_Pwr", "power", 0);;\
my $new8 = AppendToFixedArray("Heizstab_BW_Pwr", "chartArray", $val8);;\
fhem("setreading Heizstab_BW_Pwr chartArray $new8");;\
}

== 3️⃣ Minichart ==

==== 1. Widget-Datei aus contrib laden ====

Bevor das MiniChart-Widget genutzt werden kann, muss die JS-Datei ins FHEM-Webverzeichnis kopiert werden.
Dies kann mit der Perlfunktion { Svn_GetFile('from SVN Path', 'to local Path') } direkt in der FHEM Kommandozeile erfolgen.

{ Svn_GetFile('contrib/fhemweb_minichart.js', 'www/pgm2/fhemweb_minichart.js') }

==== 2. Widget im Device mit widgetOverride einrichten ====

==== Werteanzeige ====
Drei Textzeilen können angezeigt werden, jeweils im Format:
Label@Reading@Einheit

Beispiel:
Jetzt@power@W,Heute@yieldday@kWh,Gesamt@yieldtotal@kWh

===== Ausblenden einzelner Zeilen =====
Jede der drei Zeilen kann vollständig oder teilweise ausgeblendet werden, indem das jeweilige Element
leer gelassen wird. Das Widget setzt intern automatisch ein geschütztes Leerzeichen ( ).

Beispiele:
* Nur Label ausblenden:
@reading@W
* Nur Reading ausblenden:
Label@@W
* Nur Einheit ausblenden:
Label@reading@
* Ganze Zeile ausblenden:
 

==== Diagrammtypen ====
MiniChart unterstützt zwei Diagrammtypen:

* line – geglättetes Liniendiagramm mit Farbverlauf
* bar – Balkendiagramm mit positiver/negativer Farbgebung

Das Chart-Reading liefert eine kommagetrennte Zahlenliste, z. B.:
10,20,15,18,25

Chartoptionen:
chartType@colorPositive@colorNegative

Beispiele:
line@#3b82f6@#ff0000
bar@#00cc88@#cc0044

Fallback (nur ChartReading angegeben):
line@#3b82f6@#3b82f6

=== Einrichtung im Device ===

Syntax:
<webCmd>:minichart,Label1@Reading1@Einheit,Label2@Reading2@Einheit,Label3@Reading3@Einheit,ChartReading,chartType@colorPos@colorNeg

Beispiel Liniendiagramm:
attr <device> webCmd minichart
attr <device> widgetOverride minichart:minichart,Jetzt@power@W,Heute@yieldday@kWh,Gesamt@yieldtotal@kWh,chartArray,line@#3b82f6@#ff0000

Beispiel Balkendiagramm:
..., chartArray, bar@#00cc88@#cc0044

Fallback (Standard line + Standardfarbe):
..., chartArray

=== Parameterübersicht ===

{| class="wikitable"
! Abschnitt
! Bedeutung
! Beschreibung
|-
| <code><beliebigerName></code>
| webCmd-Zuweisung
| Definiert die Instanz des Widgets.
|-
| <code>minichart</code>
| Widget-Typ
| Aktiviert das MiniChart-Widget.
|-
| <code>Label1@Reading1@Einheit1</code>
| Anzeigezeilen
| Drei frei definierbare Werte-/Statusfelder; mit <code> </code> komplett ausblendbar.
|-
| <code>Label2@Reading2@Einheit2</code>
| Anzeigezeilen
| Drei frei definierbare Werte-/Statusfelder; mit <code> </code> komplett ausblendbar.
|-
| <code>Label3@Reading3@Einheit3</code>
| Anzeigezeilen
| Drei frei definierbare Werte-/Statusfelder; mit <code> </code> komplett ausblendbar.
|-
| <code>ChartReading</code>
| Datenquelle
| Liefert Array-Werte für das Diagramm .
|-
| <code>chartType@colorPos@colorNeg</code>
| Chart-Optionen
| line oder bar; Farben optional.
|}

FHEMWEB/MiniChart

2025-12-07T16:22:13Z

Schwatter:

[[Datei:Minichart flex mobile.png]]

== MiniChart – kompaktes Chart-Widget (Line & Bar) ==

Das MiniChart-Widget visualisiert Messwertverläufe als kompaktes Liniendiagramm oder Balkendiagramm.
Zusätzlich zeigt es drei aktuelle Werte, die aus Label, Reading und Einheit bestehen. Zum Einrichten sind 3 Schritte notwendig.

=== Hilfe ===
Forenthread zum [https://forum.fhem.de/index.php?topic=142831.0 ControlMiniDash Widget]

== 1️⃣ 99_myUtils.pm – Hilfsfunktion zum Speichern von historischen Werten ==

Zuerst wird eine Subroutine angelegt, die neue Werte an ein Fixed-Array anhängt und alte Werte entfernt, falls die maximale Größe überschritten wird.

sub AppendToFixedArray {
my ($dev, $reading, $newVal, $maxSize) = @_;
$maxSize //= 250; # Standard: 250 Werte
my $current = ReadingsVal($dev, $reading, '');
my @values = split(',', $current);
if (@values >= $maxSize) {
@values = @values[-($maxSize - 1) .. -1]; # Älteste Werte entfernen
}
push @values, $newVal;
return join(',', @values);
}

== 2️⃣ at-Timer zum regelmäßigen Aktualisieren ==

Mit einem `at`-Timer werden die Werte der Messgeräte regelmäßig in die `chartArray`-Readings geschrieben.

defmod chartUpdate at +*00:05 {\
my $val = ReadingsVal("Smartmeter_2E1F50", "APOX_Power", 0);;\
my $new = AppendToFixedArray("Smartmeter_2E1F50", "chartArray", $val);;\
fhem("setreading Smartmeter_2E1F50 chartArray $new");;\
\
my $val1 = ReadingsVal("OpenDTU", "power", 0);;\
my $new1 = AppendToFixedArray("OpenDTU", "chartArray", $val1);;\
fhem("setreading OpenDTU chartArray $new1");;\
\
my $val2 = ReadingsVal("Kuehlschrank", "power", 0);;\
my $new2 = AppendToFixedArray("Kuehlschrank", "chartArray", $val2);;\
fhem("setreading Kuehlschrank chartArray $new2");;\
\
my $val3 = ReadingsVal("Luftentfeuchter", "ENERGY_Power", 0);;\
my $new3 = AppendToFixedArray("Luftentfeuchter", "chartArray", $val3);;\
fhem("setreading Luftentfeuchter chartArray $new3");;\
\
my $val4 = ReadingsVal("Geschirrspueler", "power", 0);;\
my $new4 = AppendToFixedArray("Geschirrspueler", "chartArray", $val4);;\
fhem("setreading Geschirrspueler chartArray $new4");;\
\
my $val5 = ReadingsVal("Trockner", "power", 0);;\
my $new5 = AppendToFixedArray("Trockner", "chartArray", $val5);;\
fhem("setreading Trockner chartArray $new5");;\
\
my $val6 = ReadingsVal("Waschmaschine", "power", 0);;\
my $new6 = AppendToFixedArray("Waschmaschine", "chartArray", $val6);;\
fhem("setreading Waschmaschine chartArray $new6");;\
\
my $val7 = ReadingsVal("Pumpe_FBH_Pwr", "power", 0);;\
my $new7 = AppendToFixedArray("Pumpe_FBH_Pwr", "chartArray", $val7);;\
fhem("setreading Pumpe_FBH_Pwr chartArray $new7");;\
\
my $val8 = ReadingsVal("Heizstab_BW_Pwr", "power", 0);;\
my $new8 = AppendToFixedArray("Heizstab_BW_Pwr", "chartArray", $val8);;\
fhem("setreading Heizstab_BW_Pwr chartArray $new8");;\
}

== 3️⃣ Minichart ==

==== 1. Widget-Datei aus contrib laden ====

Bevor das MiniChart-Widget genutzt werden kann, muss die JS-Datei ins FHEM-Webverzeichnis kopiert werden.
Dies kann mit der Perlfunktion { Svn_GetFile('from SVN Path', 'to local Path') } direkt in der FHEM Kommandozeile erfolgen.

{ Svn_GetFile('contrib/fhemweb_minichart.js', '/fhem/www/pgm2/fhemweb_minichart.js') }

==== 2. Widget im Device mit widgetOverride einrichten ====

==== Werteanzeige ====
Drei Textzeilen können angezeigt werden, jeweils im Format:
Label@Reading@Einheit

Beispiel:
Jetzt@power@W,Heute@yieldday@kWh,Gesamt@yieldtotal@kWh

===== Ausblenden einzelner Zeilen =====
Jede der drei Zeilen kann vollständig oder teilweise ausgeblendet werden, indem das jeweilige Element
leer gelassen wird. Das Widget setzt intern automatisch ein geschütztes Leerzeichen ( ).

Beispiele:
* Nur Label ausblenden:
@reading@W
* Nur Reading ausblenden:
Label@@W
* Nur Einheit ausblenden:
Label@reading@
* Ganze Zeile ausblenden:
 

==== Diagrammtypen ====
MiniChart unterstützt zwei Diagrammtypen:

* line – geglättetes Liniendiagramm mit Farbverlauf
* bar – Balkendiagramm mit positiver/negativer Farbgebung

Das Chart-Reading liefert eine kommagetrennte Zahlenliste, z. B.:
10,20,15,18,25

Chartoptionen:
chartType@colorPositive@colorNegative

Beispiele:
line@#3b82f6@#ff0000
bar@#00cc88@#cc0044

Fallback (nur ChartReading angegeben):
line@#3b82f6@#3b82f6

=== Einrichtung im Device ===

Syntax:
<webCmd>:minichart,Label1@Reading1@Einheit,Label2@Reading2@Einheit,Label3@Reading3@Einheit,ChartReading,chartType@colorPos@colorNeg

Beispiel Liniendiagramm:
attr <device> webCmd minichart
attr <device> widgetOverride minichart:minichart,Jetzt@power@W,Heute@yieldday@kWh,Gesamt@yieldtotal@kWh,chartArray,line@#3b82f6@#ff0000

Beispiel Balkendiagramm:
..., chartArray, bar@#00cc88@#cc0044

Fallback (Standard line + Standardfarbe):
..., chartArray

=== Parameterübersicht ===

{| class="wikitable"
! Abschnitt
! Bedeutung
! Beschreibung
|-
| <code><beliebigerName></code>
| webCmd-Zuweisung
| Definiert die Instanz des Widgets.
|-
| <code>minichart</code>
| Widget-Typ
| Aktiviert das MiniChart-Widget.
|-
| <code>Label1@Reading1@Einheit1</code>
| Anzeigezeilen
| Drei frei definierbare Werte-/Statusfelder; mit <code> </code> komplett ausblendbar.
|-
| <code>Label2@Reading2@Einheit2</code>
| Anzeigezeilen
| Drei frei definierbare Werte-/Statusfelder; mit <code> </code> komplett ausblendbar.
|-
| <code>Label3@Reading3@Einheit3</code>
| Anzeigezeilen
| Drei frei definierbare Werte-/Statusfelder; mit <code> </code> komplett ausblendbar.
|-
| <code>ChartReading</code>
| Datenquelle
| Liefert Array-Werte für das Diagramm .
|-
| <code>chartType@colorPos@colorNeg</code>
| Chart-Optionen
| line oder bar; Farben optional.
|}

FHEMWEB/MiniChart

2025-12-07T10:57:39Z

Schwatter:

[[Datei:Minichart flex mobile.png]]

== MiniChart – kompaktes Chart-Widget (Line & Bar) ==

Das MiniChart-Widget visualisiert Messwertverläufe als kompaktes Liniendiagramm oder Balkendiagramm.
Zusätzlich zeigt es drei aktuelle Werte, die aus Label, Reading und Einheit bestehen. Zum Einrichten sind 3 Schritte notwendig.

=== Hilfe ===
Forenthread zum [https://forum.fhem.de/index.php?topic=142831.0 ControlMiniDash Widget]

== 1️⃣ 99_myUtils.pm – Hilfsfunktion zum Speichern von historischen Werten ==

Zuerst wird eine Subroutine angelegt, die neue Werte an ein Fixed-Array anhängt und alte Werte entfernt, falls die maximale Größe überschritten wird.

sub AppendToFixedArray {
my ($dev, $reading, $newVal, $maxSize) = @_;
$maxSize //= 250; # Standard: 250 Werte
my $current = ReadingsVal($dev, $reading, '');
my @values = split(',', $current);
if (@values >= $maxSize) {
@values = @values[-($maxSize - 1) .. -1]; # Älteste Werte entfernen
}
push @values, $newVal;
return join(',', @values);
}

== 2️⃣ at-Timer zum regelmäßigen Aktualisieren ==

Mit einem `at`-Timer werden die Werte der Messgeräte regelmäßig in die `chartArray`-Readings geschrieben.

defmod chartUpdate at +*00:05 {\
my $val = ReadingsVal("Smartmeter_2E1F50", "APOX_Power", 0);;\
my $new = AppendToFixedArray("Smartmeter_2E1F50", "chartArray", $val);;\
fhem("setreading Smartmeter_2E1F50 chartArray $new");;\
\
my $val1 = ReadingsVal("OpenDTU", "power", 0);;\
my $new1 = AppendToFixedArray("OpenDTU", "chartArray", $val1);;\
fhem("setreading OpenDTU chartArray $new1");;\
\
my $val2 = ReadingsVal("Kuehlschrank", "power", 0);;\
my $new2 = AppendToFixedArray("Kuehlschrank", "chartArray", $val2);;\
fhem("setreading Kuehlschrank chartArray $new2");;\
\
my $val3 = ReadingsVal("Luftentfeuchter", "ENERGY_Power", 0);;\
my $new3 = AppendToFixedArray("Luftentfeuchter", "chartArray", $val3);;\
fhem("setreading Luftentfeuchter chartArray $new3");;\
\
my $val4 = ReadingsVal("Geschirrspueler", "power", 0);;\
my $new4 = AppendToFixedArray("Geschirrspueler", "chartArray", $val4);;\
fhem("setreading Geschirrspueler chartArray $new4");;\
\
my $val5 = ReadingsVal("Trockner", "power", 0);;\
my $new5 = AppendToFixedArray("Trockner", "chartArray", $val5);;\
fhem("setreading Trockner chartArray $new5");;\
\
my $val6 = ReadingsVal("Waschmaschine", "power", 0);;\
my $new6 = AppendToFixedArray("Waschmaschine", "chartArray", $val6);;\
fhem("setreading Waschmaschine chartArray $new6");;\
\
my $val7 = ReadingsVal("Pumpe_FBH_Pwr", "power", 0);;\
my $new7 = AppendToFixedArray("Pumpe_FBH_Pwr", "chartArray", $val7);;\
fhem("setreading Pumpe_FBH_Pwr chartArray $new7");;\
\
my $val8 = ReadingsVal("Heizstab_BW_Pwr", "power", 0);;\
my $new8 = AppendToFixedArray("Heizstab_BW_Pwr", "chartArray", $val8);;\
fhem("setreading Heizstab_BW_Pwr chartArray $new8");;\
}

== 3️⃣ Minichart ==

==== 1. Widget-Datei aus contrib laden ====

Bevor das MiniChart-Widget genutzt werden kann, muss die JS-Datei ins FHEM-Webverzeichnis kopiert werden.
Dies kann mit der Perlfunktion { Svn_GetFile('from SVN Path', 'to local Path') } direkt in der FHEM Kommandozeile erfolgen.

{ Svn_GetFile('contrib/schwatter/fhemweb_minichart.js', '/fhem/www/pgm2/fhemweb_minichart.js') }

==== 2. Widget im Device mit widgetOverride einrichten ====

==== Werteanzeige ====
Drei Textzeilen können angezeigt werden, jeweils im Format:
Label@Reading@Einheit

Beispiel:
Jetzt@power@W,Heute@yieldday@kWh,Gesamt@yieldtotal@kWh

===== Ausblenden einzelner Zeilen =====
Jede der drei Zeilen kann vollständig oder teilweise ausgeblendet werden, indem das jeweilige Element
leer gelassen wird. Das Widget setzt intern automatisch ein geschütztes Leerzeichen ( ).

Beispiele:
* Nur Label ausblenden:
@reading@W
* Nur Reading ausblenden:
Label@@W
* Nur Einheit ausblenden:
Label@reading@
* Ganze Zeile ausblenden:
 

==== Diagrammtypen ====
MiniChart unterstützt zwei Diagrammtypen:

* line – geglättetes Liniendiagramm mit Farbverlauf
* bar – Balkendiagramm mit positiver/negativer Farbgebung

Das Chart-Reading liefert eine kommagetrennte Zahlenliste, z. B.:
10,20,15,18,25

Chartoptionen:
chartType@colorPositive@colorNegative

Beispiele:
line@#3b82f6@#ff0000
bar@#00cc88@#cc0044

Fallback (nur ChartReading angegeben):
line@#3b82f6@#3b82f6

=== Einrichtung im Device ===

Syntax:
<webCmd>:minichart,Label1@Reading1@Einheit,Label2@Reading2@Einheit,Label3@Reading3@Einheit,ChartReading,chartType@colorPos@colorNeg

Beispiel Liniendiagramm:
attr <device> webCmd minichart
attr <device> widgetOverride minichart:minichart,Jetzt@power@W,Heute@yieldday@kWh,Gesamt@yieldtotal@kWh,chartArray,line@#3b82f6@#ff0000

Beispiel Balkendiagramm:
..., chartArray, bar@#00cc88@#cc0044

Fallback (Standard line + Standardfarbe):
..., chartArray

=== Parameterübersicht ===

{| class="wikitable"
! Abschnitt
! Bedeutung
! Beschreibung
|-
| <code><beliebigerName></code>
| webCmd-Zuweisung
| Definiert die Instanz des Widgets.
|-
| <code>minichart</code>
| Widget-Typ
| Aktiviert das MiniChart-Widget.
|-
| <code>Label1@Reading1@Einheit1</code>
| Anzeigezeilen
| Drei frei definierbare Werte-/Statusfelder; mit <code> </code> komplett ausblendbar.
|-
| <code>Label2@Reading2@Einheit2</code>
| Anzeigezeilen
| Drei frei definierbare Werte-/Statusfelder; mit <code> </code> komplett ausblendbar.
|-
| <code>Label3@Reading3@Einheit3</code>
| Anzeigezeilen
| Drei frei definierbare Werte-/Statusfelder; mit <code> </code> komplett ausblendbar.
|-
| <code>ChartReading</code>
| Datenquelle
| Liefert Array-Werte für das Diagramm .
|-
| <code>chartType@colorPos@colorNeg</code>
| Chart-Optionen
| line oder bar; Farben optional.
|}

FHEMWEB/MiniChart

2025-12-07T10:51:49Z

Schwatter:

[[Datei:Minichart flex mobile.png]]

== MiniChart – kompaktes Chart-Widget (Line & Bar) ==

Das MiniChart-Widget visualisiert Messwertverläufe als kompaktes Liniendiagramm oder Balkendiagramm.
Zusätzlich zeigt es drei aktuelle Werte, die aus Label, Reading und Einheit bestehen. Zum Einrichten sind 3 Schritte notwendig.

=== Hilfe ===
Forenthread zum [https://forum.fhem.de/index.php?topic=142831.0 ControlMiniDash Widget]

== 1️⃣ 99_myUtils.pm – Hilfsfunktion zum Speichern von historischen Werten ==

Zuerst wird eine Subroutine angelegt, die neue Werte an ein Fixed-Array anhängt und alte Werte entfernt, falls die maximale Größe überschritten wird.

sub AppendToFixedArray {
my ($dev, $reading, $newVal, $maxSize) = @_;
$maxSize //= 250; # Standard: 250 Werte
my $current = ReadingsVal($dev, $reading, '');
my @values = split(',', $current);
if (@values >= $maxSize) {
@values = @values[-($maxSize - 1) .. -1]; # Älteste Werte entfernen
}
push @values, $newVal;
return join(',', @values);
}

== 2️⃣ at-Timer zum regelmäßigen Aktualisieren ==

Mit einem `at`-Timer werden die Werte der Messgeräte regelmäßig in die `chartArray`-Readings geschrieben.

defmod chartUpdate at +*00:05 {\
my $val = ReadingsVal("Smartmeter_2E1F50", "APOX_Power", 0);;\
my $new = AppendToFixedArray("Smartmeter_2E1F50", "chartArray", $val);;\
fhem("setreading Smartmeter_2E1F50 chartArray $new");;\
\
my $val1 = ReadingsVal("OpenDTU", "power", 0);;\
my $new1 = AppendToFixedArray("OpenDTU", "chartArray", $val1);;\
fhem("setreading OpenDTU chartArray $new1");;\
\
my $val2 = ReadingsVal("Kuehlschrank", "power", 0);;\
my $new2 = AppendToFixedArray("Kuehlschrank", "chartArray", $val2);;\
fhem("setreading Kuehlschrank chartArray $new2");;\
\
my $val3 = ReadingsVal("Luftentfeuchter", "ENERGY_Power", 0);;\
my $new3 = AppendToFixedArray("Luftentfeuchter", "chartArray", $val3);;\
fhem("setreading Luftentfeuchter chartArray $new3");;\
\
my $val4 = ReadingsVal("Geschirrspueler", "power", 0);;\
my $new4 = AppendToFixedArray("Geschirrspueler", "chartArray", $val4);;\
fhem("setreading Geschirrspueler chartArray $new4");;\
\
my $val5 = ReadingsVal("Trockner", "power", 0);;\
my $new5 = AppendToFixedArray("Trockner", "chartArray", $val5);;\
fhem("setreading Trockner chartArray $new5");;\
\
my $val6 = ReadingsVal("Waschmaschine", "power", 0);;\
my $new6 = AppendToFixedArray("Waschmaschine", "chartArray", $val6);;\
fhem("setreading Waschmaschine chartArray $new6");;\
\
my $val7 = ReadingsVal("Pumpe_FBH_Pwr", "power", 0);;\
my $new7 = AppendToFixedArray("Pumpe_FBH_Pwr", "chartArray", $val7);;\
fhem("setreading Pumpe_FBH_Pwr chartArray $new7");;\
\
my $val8 = ReadingsVal("Heizstab_BW_Pwr", "power", 0);;\
my $new8 = AppendToFixedArray("Heizstab_BW_Pwr", "chartArray", $val8);;\
fhem("setreading Heizstab_BW_Pwr chartArray $new8");;\
}

== 3️⃣ Minichart ==

==== 1. Widget-Datei aus contrib laden ====

Bevor das MiniChart-Widget genutzt werden kann, muss die JS-Datei ins FHEM-Webverzeichnis kopiert werden.
Dies kann mit der Perlfunktion { Svn_GetFile('from SVN Path', 'to local Path') } direkt in der FHEM Kommandozeile erfolgen.

{ Svn_GetFile('contrib/schwatter/fhemweb_minichart.js', '/fhem/www/pgm2/fhemweb_minichart.js') }

==== 2. Widget im Device mit widgetOverride einrichten ====

==== Werteanzeige ====
Drei Textzeilen können angezeigt werden, jeweils im Format:
Label@Reading@Einheit

Beispiel:
Jetzt@power@W,Heute@yieldday@kWh,Gesamt@yieldtotal@kWh

===== Ausblenden einzelner Zeilen =====
Jede der drei Zeilen kann vollständig oder teilweise ausgeblendet werden, indem das jeweilige Element
leer gelassen wird. Das Widget setzt intern automatisch ein geschütztes Leerzeichen ( ).

Beispiele:
* Nur Label ausblenden:
@reading@W
* Nur Reading ausblenden:
Label@@W
* Nur Einheit ausblenden:
Label@reading@
* Ganze Zeile ausblenden:
 

==== Diagrammtypen ====
MiniChart unterstützt zwei Diagrammtypen:

* line – geglättetes Liniendiagramm mit Farbverlauf
* bar – Balkendiagramm mit positiver/negativer Farbgebung

Das Chart-Reading liefert eine kommagetrennte Zahlenliste, z. B.:
10,20,15,18,25

Chartoptionen:
chartType@colorPositive@colorNegative

Beispiele:
line@#3b82f6@#ff0000
bar@#00cc88@#cc0044

Fallback (nur ChartReading angegeben):
line@#3b82f6@#3b82f6

=== Einrichtung im Device ===

Syntax:
<webCmd>:minichart,Label1@Reading1@Einheit,Label2@Reading2@Einheit,Label3@Reading3@Einheit,ChartReading,chartType@colorPos@colorNeg

Beispiel Liniendiagramm:
attr <device> webCmd minichart
attr <device> widgetOverride minichart:minichart,Jetzt@power@W,Heute@yieldday@kWh,Gesamt@yieldtotal@kWh,chartArray,line@#3b82f6@#ff0000

Beispiel Balkendiagramm:
..., chartArray, bar@#00cc88@#cc0044

Fallback (Standard line + Standardfarbe):
..., chartArray

=== Parameterübersicht ===

{| class="wikitable"
! Abschnitt
! Bedeutung
! Beschreibung
|-
| <code><beliebigerName></code>
| webCmd-Zuweisung
| Definiert die Instanz des Widgets.
|-
| <code>minichart</code>
| Widget-Typ
| Aktiviert das MiniChart-Widget.
|-
| <code>Label1@Reading1@Einheit1</code>
| Anzeigezeilen
| Drei frei definierbare Werte-/Statusfelder; mit <code> </code> komplett ausblendbar.
|-
| <code>Label2@Reading2@Einheit2</code>
| Anzeigezeilen
| Drei frei definierbare Werte-/Statusfelder; mit <code> </code> komplett ausblendbar.
|-
| <code>Label3@Reading3@Einheit3</code>
| Anzeigezeilen
| Drei frei definierbare Werte-/Statusfelder; mit <code> </code> komplett ausblendbar.
|-
| <code>ChartReading</code>
| Datenquelle
| Kommagetrennte Zahlenliste für das Chart.
|-
| <code>chartType@colorPos@colorNeg</code>
| Chart-Optionen
| line oder bar; Farben optional.
|}

FHEMWEB/MiniChart

2025-12-07T10:49:31Z

Schwatter:

[[Datei:Minichart flex mobile.png]]

== MiniChart – kompaktes Chart-Widget (Line & Bar) ==

Das MiniChart-Widget visualisiert Messwertverläufe als kompaktes Liniendiagramm oder Balkendiagramm.
Zusätzlich zeigt es drei aktuelle Werte, die aus Label, Reading und Einheit bestehen. Zum Einrichten sind 3 Schritte notwendig.

=== Hilfe ===
Forenthread zum [https://forum.fhem.de/index.php?topic=142831.0 ControlMiniDash Widget]

== 1️⃣ 99_myUtils.pm – Hilfsfunktion zum Speichern von historischen Werten ==

Zuerst wird eine Subroutine angelegt, die neue Werte an ein Fixed-Array anhängt und alte Werte entfernt, falls die maximale Größe überschritten wird.

sub AppendToFixedArray {
my ($dev, $reading, $newVal, $maxSize) = @_;
$maxSize //= 250; # Standard: 250 Werte
my $current = ReadingsVal($dev, $reading, '');
my @values = split(',', $current);
if (@values >= $maxSize) {
@values = @values[-($maxSize - 1) .. -1]; # Älteste Werte entfernen
}
push @values, $newVal;
return join(',', @values);
}

== 2️⃣ at-Timer zum regelmäßigen Aktualisieren ==

Mit einem `at`-Timer werden die Werte der Messgeräte regelmäßig in die `chartArray`-Readings geschrieben.

defmod chartUpdate at +*00:05 {\
my $val = ReadingsVal("Smartmeter_2E1F50", "APOX_Power", 0);;\
my $new = AppendToFixedArray("Smartmeter_2E1F50", "chartArray", $val);;\
fhem("setreading Smartmeter_2E1F50 chartArray $new");;\
\
my $val1 = ReadingsVal("OpenDTU", "power", 0);;\
my $new1 = AppendToFixedArray("OpenDTU", "chartArray", $val1);;\
fhem("setreading OpenDTU chartArray $new1");;\
\
my $val2 = ReadingsVal("Kuehlschrank", "power", 0);;\
my $new2 = AppendToFixedArray("Kuehlschrank", "chartArray", $val2);;\
fhem("setreading Kuehlschrank chartArray $new2");;\
\
my $val3 = ReadingsVal("Luftentfeuchter", "ENERGY_Power", 0);;\
my $new3 = AppendToFixedArray("Luftentfeuchter", "chartArray", $val3);;\
fhem("setreading Luftentfeuchter chartArray $new3");;\
\
my $val4 = ReadingsVal("Geschirrspueler", "power", 0);;\
my $new4 = AppendToFixedArray("Geschirrspueler", "chartArray", $val4);;\
fhem("setreading Geschirrspueler chartArray $new4");;\
\
my $val5 = ReadingsVal("Trockner", "power", 0);;\
my $new5 = AppendToFixedArray("Trockner", "chartArray", $val5);;\
fhem("setreading Trockner chartArray $new5");;\
\
my $val6 = ReadingsVal("Waschmaschine", "power", 0);;\
my $new6 = AppendToFixedArray("Waschmaschine", "chartArray", $val6);;\
fhem("setreading Waschmaschine chartArray $new6");;\
\
my $val7 = ReadingsVal("Pumpe_FBH_Pwr", "power", 0);;\
my $new7 = AppendToFixedArray("Pumpe_FBH_Pwr", "chartArray", $val7);;\
fhem("setreading Pumpe_FBH_Pwr chartArray $new7");;\
\
my $val8 = ReadingsVal("Heizstab_BW_Pwr", "power", 0);;\
my $new8 = AppendToFixedArray("Heizstab_BW_Pwr", "chartArray", $val8);;\
fhem("setreading Heizstab_BW_Pwr chartArray $new8");;\
}

== 3️⃣ Minichart ==

==== 1. Widget-Datei aus contrib laden ====

Bevor das MiniChart-Widget genutzt werden kann, muss die JS-Datei ins FHEM-Webverzeichnis kopiert werden.
Dies kann mit der Perlfunktion { Svn_GetFile('from SVN Path', 'to local Path') } direkt in der FHEM Kommandozeile erfolgen.

{ Svn_GetFile('contrib/schwatter/fhemweb_minichart.js', '/fhem/www/pgm2/fhemweb_minichart.js') }

==== 2. Widget im Device mit widgetOverride einrichten ====

==== Werteanzeige ====
Drei Textzeilen können angezeigt werden, jeweils im Format:
Label@Reading@Einheit

Beispiel:
Jetzt@power@W,Heute@yieldday@kWh,Gesamt@yieldtotal@kWh

===== Ausblenden einzelner Zeilen =====
Jede der drei Zeilen kann vollständig oder teilweise ausgeblendet werden, indem das jeweilige Element
leer gelassen wird. Das Widget setzt intern automatisch ein geschütztes Leerzeichen ( ).

Beispiele:
* Nur Label ausblenden:
@reading@W
* Nur Reading ausblenden:
Label@@W
* Nur Einheit ausblenden:
Label@reading@
* Ganze Zeile ausblenden:
 

==== Diagrammtypen ====
MiniChart unterstützt zwei Diagrammtypen:

* line – geglättetes Liniendiagramm mit Farbverlauf
* bar – Balkendiagramm mit positiver/negativer Farbgebung

Das Chart-Reading liefert eine kommagetrennte Zahlenliste, z. B.:
10,20,15,18,25

Chartoptionen:
chartType@colorPositive@colorNegative

Beispiele:
line@#3b82f6@#ff0000
bar@#00cc88@#cc0044

Fallback (nur ChartReading angegeben):
line@#3b82f6@#3b82f6

=== Einrichtung im Device ===

Syntax:
<webCmd>:minichart,Label1@Reading1@Einheit,Label2@Reading2@Einheit,Label3@Reading3@Einheit,ChartReading,chartType@colorPos@colorNeg

Beispiel Liniendiagramm:
attr <device> webCmd minichart
attr <device> widgetOverride minichart:minichart,Jetzt@power@W,Heute@yieldday@kWh,Gesamt@yieldtotal@kWh,chartArray,line@#3b82f6@#ff0000

Beispiel Balkendiagramm:
..., chartArray, bar@#00cc88@#cc0044

Fallback (Standard line + Standardfarbe):
..., chartArray

=== Parameterübersicht ===

{| class="wikitable"
! Abschnitt
! Bedeutung
! Beschreibung
|-
| <code><beliebigerName></code>
| webCmd-Zuweisung
| Definiert die Instanz des Widgets.
|-
| <code>minichart</code>
| Widget-Typ
| Aktiviert das MiniChart-Widget.
|-
| <code>Label@Reading@Einheit</code>
| Anzeigezeilen
| Drei frei definierbare Werte-/Statusfelder; mit <code> </code> komplett ausblendbar.
|-
| <code>ChartReading</code>
| Datenquelle
| Kommagetrennte Zahlenliste für das Chart.
|-
| <code>chartType@colorPos@colorNeg</code>
| Chart-Optionen
| line oder bar; Farben optional.
|}

Datei:Minichart flex mobile.png

2025-12-07T10:46:04Z

Schwatter:

Minichart flex mobile

Datei:Minichart flex desktop.png

2025-12-07T10:45:31Z

Schwatter:

Minichart flex desktop