NEUE Betreff: Text-to-Speech App

[mediastudio]

Meine neue FHEM WebView App – Sprachbefehle & TTS ist nun bereit für den Einsatz!

Hallo liebe Community,
ich freue mich, euch heute meine neue FHEM WebView App vorstellen zu können.
Die frühere WebView-Apps ist auf neue Android-Versionen nicht mehr lauffähig.
Meine neue App knüpft genau dort an und bringt die beliebten Sprachbefehle und TTS-Rückmeldungen (Text-to-Speech) zurück ins Spiel!

Die Highlights und Neuerungen:
Sprachbefehle (Voice Recognition) voll integriert: Es ist jetzt wieder möglich, Befehle einfach zu sprechen, anstatt lange Menüs zu öffnen.

Volle Kompatibilität: FHEM-Installationen, die bereits in der Vergangenheit Sprachbefehle über eine WebView-App genutzt haben, können ohne Änderungen in der fhem.cfg sofort wieder genutzt werden.

TTS-Rückmeldung von FHEM: Die akustische Rückmeldung durch FHEM ist wieder voll implementiert.
Einfache Einrichtung: Für die Funktion habe ich einen einfachen Dummy namens voiceRecognitionLastResult im Code vorbereitet. FHEM trägt das Ergebnis des gesprochenen Befehls dort ein und kann es sofort verarbeiten.

Stabile Basis: Die App bietet eine schlanke und performante mobile Schnittstelle, die auch auf aktuellen Android-Versionen zuverlässig läuft.

Die App basiert auf einer Webview-Technologie und bietet eine optimierte Darstellung eures bestehenden FHEM-Frontends (z.B. FTUI, Standard-UI oder jede andere Web-Oberfläche, die ihr nutzt) in einem nativen App-Container. Das Ziel war es, eine schnellere, reaktionsfähigere und fokussiertere Nutzererfahrung im Vergleich zur Nutzung im Standard-Browser zu schaffen.

Hier paar Screenshots meiner Steuerung mit FHEM-Frontends ( FTUI, Standard-UI)
Beim Start der App erscheint das Eingabefenster mit Eingabe der IP, PORT, USER, Passw.
Danach öffnet sich das Webview mit eurer Applikation.
Unten rechts erscheint der Button mit dem man wieder in das Setting gelangt.
Auf der rechten Seite befindet sich der Botton für den Sprachbefehl.

Ich habe viel Zeit in dieses Projekt gesteckt und hoffe, dass es euch auch den täglichen Umgang mit FHEM erleichtert. Bei Interesse die App zu testen, gebt mir bescheid, ich stelle die ,,FHEMVoiceClient.akp" dann ins Forum.   

Code Auswählen Erweitern

#################################
# TTS Text2Speech
#################################
define MyTTS Text2Speech hw=0.0
attr MyTTS TTS_UseMP3Wrap 1
attr MyTTS room Text2Speech


#######################################################################
##  im Webinterface unter Android zwei Readings:                     ##
##                                                                   ##
##  lastTTS → wird vom Handy gelesen und gesprochen                  ##
##  debugTTS → dient nur der Kontrolle, was wirklich gesendet wurde  ##
#######################################################################

define voiceRecognitionLastResult dummy
attr voiceRecognitionLastResult room Android
attr voiceRecognitionLastResult setList textField


define androidTablet dummy
attr androidTablet room Android
attr androidTablet setList ttsSay:textField
attr androidTablet webCmd ttsSay


define androidTablet_tts notify androidTablet:ttsSay.* { \
  my @parts = ();; \
  for (my $i = 1;; $i < 10;; $i++) { ;;\
    my $var = "\$EVTPART$i";; \
    no strict 'refs';; \
    push @parts, eval $var if defined(eval $var) && eval($var) ne '';; \
  };; \
  my $text = join(' ', @parts);; \
  if ($text) { ;;\
  fhem("setreading androidTablet lastTTS $text");; \
  fhem("setreading androidTablet debugTTS $text");; \
      Log3('androidTablet', 3, "androidTablet_tts -> $text");; \
  } else { ;;\
      Log3('androidTablet', 3, "androidTablet_tts -> kein Text erkannt");; \
  } \
}

Du darfst diesen Dateianhang nicht ansehen. Du darfst diesen Dateianhang nicht ansehen. Du darfst diesen Dateianhang nicht ansehen. Du darfst diesen Dateianhang nicht ansehen.

[Gisbert]

Hallo mediastudio,

ich hab Interesse deine "FHEMVoiceClient.akp" zu testen. Ich nutze derzeit den flex Style auf meinem Handy, der leider nicht mehr weiterentwickelt wird. Zur Spracheingaben nutze ich AMAD und zur Verarbeitung RHASSPY - das läuft sehr geschmeidig.

Viele Grüße Gisbert

[Beta-User]

Moin,

melde auch mal Interesse (v.a. auch im Zusammenspiel mit RHASSPY als AMAD-Ersatz) an.
Allerdings kann ich grade nicht viel Zeit in diese Sache stecken.

Danke vorab!

[mediastudio]

Hallo, ich habe gestern den Beitrag im Forum verfasst und wollte wissen, wie ihr ihn gefunden habt. Mir ist aufgefallen, dass es gestern etwas umständlicher war, einen neuen Beitrag zu erstellen. Früher wurde der neueste Beitrag immer ganz oben angezeigt, was die Interaktion erleichtert hat. Also die App als APK-Datei kann ich zum Testen auf einem Android-Handy oder Tablet zur Verfügung zu stellen. Teste der App ohne Gewährleistung testen auf eigene Gefahr.
Sie können sich die App direkt von meinem Server herunterladen. Scannen Sie den QR-Code.
User und Password:FHEMVoiceClient

[Gisbert]

Hallo mediastudio,

ich nutze HTTPS - das kann man aber nicht eingeben, und damit gibt es keinen Zugriff auf Fhem.

Viele Grüße Gisbert

[mediastudio]

git config --list

[mediastudio]

Hallo Gisbert,
ich habe die App mit meinem Rasperry über seine IP und Zugangsdaten verbunden, ohne http oder https,
für den Aussenzugang habe ich WireGuard-Server auf dem Raspberry eingerichtet und auf dem Handy oder Tablet den Client.
Das ist eine sichere VPN Verbindung bei der keine Ports auf der Fritzbox geöffnet sein müssen.
Deshalb nur IP ohne http. Hast du die App mal nur mit deiner IP und Zugangsdaten von FHEM ausprobiert?
Auf FHEM kommt man local immer so auf das WEBGUI. 
 

[Gisbert]

Hallo mediastudio,

ich hab ein neues Fhemweb mit http definiert - damit funktioniert die App. Ich versuche mich dann mal mit deiner App näher zu beschäftigen.

Viele Grüße Gisbert

[Gisbert]

Hallo mediastudio,

die App läuft schon mal. Da ich den flex Style auf dem Handy nutzen möchte, hab ich eine entsprechende Web-Definition definiert.

Jetzt erhalte ich vor jedem Bild folgende Einblendung, die sich zwar mit "ok" wegklicken lässt, aber das ist sehr unpraktikabel.

Code Auswählen Erweitern

flex.js line 2346:
Uncaught TypeError: Cannot read properties of undefined (reading '0')
Welche Infos brauchst du ggf., um mir weiterhelfen zu können?

Viele Grüße Gisbert

[mediastudio]

Flex Style" bezieht sich auf den Flex-Modus von faltbaren Handys
wie dem Samsung Galaxy Z Fold oder Z Flip. Dabei wird der Bildschirm
in der Mitte zusammengeklappt, um das Layout der App anzupassen.
Ist das so richtig? Ich habe bis jetzt keine Möglichkeit das so zu testen
da ich nur normale Handys habe. Ich werde es mal untersuchen.

[marvin78]

Warum habe ich das Gefühl, es mit einem Sprachmodell zu tun zu haben? Es geht um den style für fhem (CSS und Co.).

[Gisbert]

Flex Style" bezieht sich auf den Flex-Modus von faltbaren Handys
wie dem Samsung Galaxy Z Fold oder Z Flip. Dabei wird der Bildschirm
in der Mitte zusammengeklappt, um das Layout der App anzupassen.
Ist das so richtig? Ich habe bis jetzt keine Möglichkeit das so zu testen
da ich nur normale Handys habe. Ich werde es mal untersuchen.

flex style ist ein Style in Fhem, der festlegt, wie eine Fhem-Seite im Browser angezeigt wird. Mein Handy ist ein ganz gewöhnliches Smartphone.

[mediastudio]

Die Fehlermeldung ist ein JavaScript-Fehler in der WebView, also nicht direkt in der Android-App, sondern in
der FHEM-FTUI-Weboberfläche die über webView.loadUrl() geladen wird.
Folgendes, flex.js line 2346: Uncaught TypeError: Cannot read properties of undefined (reading '0').
Das bedeutet, irgendein JavaScript im flex.js-Skript versucht, auf das erste Element eines Arrays oder Objekts (

• ) zuzugreifen, aber die Variable ist nicht definiert (undefined). Das bedeutet, flex.js gehört zum

FHEM Frontend (FTUI) – genauer: fhem/ftui/flex.js. Die Zeilennummer (2346) deutet auf eine neuere Version
von FTUI hin. Das Skript steuert die Layout- und Widget-Logik (z. B. flexbox, devices, states usw.).
Ursachen können sein: FTUI-Version ist nicht kompatibel mit deiner Seite (index.html oder den Widgets).
Ein Widget auf deiner FHEM-Seite nutzt eine Variable oder ein device, das leer oder nicht vorhanden ist.
FHEM liefert kein korrektes JSON für ein bestimmtes Attribut.
WebView verhält sich leicht anders als ein Browser (z. B. kein localStorage oder window-Objekt anders).
Mann muss also genau bestimmen können wo genau die Stelle der des Fehlers liegt.
FTUI-Debug in deinem Browser (nicht in der App) einschalten: http://<deine-fhem-ip>:8083/fhem/ftui/index.html?debug=1
Öffne die Browser-Konsole (F12 → Console), Du siehst, welche Widgets oder Variablen Fehler verursachen.
Oder direkt: console.log('Debug:', variableName); im betroffenen Widget oder Skript.
Zeile 2346 in flex.js prüfen:  /opt/fhem/www/pgm2/ftui/flex.js und suche nach der Zeile 2346.
Sie wird wahrscheinlich sowas enthalten wie: var x = y ,

• ; oder data,
• .state,

Dann schau, woher data kommt — meistens aus einem Widget-Attribut wie: <widget data="DEVICE:STATE"></widget>.
Wenn DEVICE nicht existiert → Fehler. Erster Vorschlag: FTUI aktualisieren: in Fhem update check update all,
danach Neustart von FHEM. Ich werde versuchen die App so zu ändern das diese Fehler unterdrückt werden.

[mediastudio]

Hallo Gisbert ich habe in der App im unterenbereich eine Anzeige eingefügt die fehler von flex.js anzeigen müsste.
Teste das mal, die App wie gewohnt runterladen.

[schwatter]

Nabend,

debug zeigt nichts an. Die Zeile 2346 aus flex.js ist:

Code Auswählen Erweitern

if (typeof data.Results[0] !== "object") return;


Code Auswählen Erweitern

gatherInformations: function() {
flex.fhemPath = $('head').attr('root');
flex.webName = $("body").attr("data-webName");
flex.fwcsrf = $('body').attr('fwcsrf');
flex.room  = flex.helper.urlParam("room") || $('#content').attr('room');
flex.device = flex.helper.urlParam("detail");
flex.cmd('jsonlist2 '+flex.webName,function(data){
if (typeof data.Results[0] !== "object") return;
if (data.Results[0].Attributes.hiddengroup)
flex.hiddenGroups = data.Results[0].Attributes.hiddengroup.split(',');
else flex.hiddenGroups = [];})
},

Gruß schwatter