[Featurewunsch] - √ - Soundfile abspielen bei Änderung eines item-Werts/GA

[Sipple]

Guten Morgen

Vor exakt einem Jahr haben wir mal in einem anderen Thread (Alarmobjekte) über die Möglichkeit diskutiert, beim Eintreffen eines neuen item/GA Werts einen beliebigen Sound abzuspielen.
Greentux hat damals darum gebeten einen eigenen Thread/Featurewunsch aufzumachen.
Das ist nie passiert, oder? Zumindest findet die Suchfunktion nur die Alarmobjekt-Beiträge.
Ist da inzwischen schon was in Arbeit?
Ein Verzeichnis innerhalb der smartVISU Ordnerstruktur wurde ja zeitnah angelegt.
Die Lizenzfrage der Soundfiles ist natürlich immer so eine Sache, aber da könnte sich ja immer noch jeder selbst die gewünschten Sounds besorgen oder aufnehmen und in das Verzeichnis kopieren. Da sehe ich erst mal kein Problem.
Wichtiger wäre die Software, die für das Abspielen eines Soundfiles auf dem Endgerät sorgt. Leider sprengt das meine Kenntnisse von HTML5, JavaScript etc.


Gruß, Martin

[2ndsky]

Dank HTML5 brauchst du dir da gar keine Gedanken drüber machen: http://www.w3schools.com/html/html5_audio.asp

[Sipple]

Wunderbar. Und es funktioniert sogar ohne dass man einen Play Button drücken muss, wenn man es so macht:

<audio autoplay>
  <source src="horse.mp3" type="audio/mpeg">
</audio>

Jetzt müsste ich nur noch wissen wie man das auf einer Visu Page so einbettet und mit einem Item verknüpft, dass der Sound nur dann abgespielt wird, wenn sich das Item ändert, und nicht z.B. dauernd oder gar nicht.
Das ganze noch unabhängig von der gerade angezeigten Visu Page.

Gruß, Martin

[2ndsky]

Schau mal hier: HTML5 Audio

ein bißchen JavaScript verbunden mit einem Widget, das auf Items reagiert und dann bei Änderung "play()" aufrufen. Sollte nicht so schwierig sein.

[Sipple]

Tja, das ist das Problem. Von Javascript hab ich in etwa so viel Ahnung wie von Klingonisch. Zusammen mit dem Schnittstellen/Item/Widget-Hintergrund der smartVISU gesehen reduziert sich das dann auf Null.
Mal eine kleine Logik in Python schreiben, ja. Die smartVISU Seiten zusammenbauen und die Widgets verwenden, ja. Eigenes Plugin/Widget/Treiber programieren, nein.

[2ndsky]

Okay, dann will ich mal nicht so sein (ACHTUNG: ungetestet).

Leg in deinem Projektverzeichnis eine visu.js mit folgendem Inhalt an:

$(document).delegate('[data-widget="ext.audio"]', {
    'update': function(event, response) {
        if (response != $(this).attr('data-value')) {
            $('#' + this.id).play();
            $(this).attr('data-value', response);
        }
    }
});

Dann eine widget_ext.html mit folgendem Inhalt:

{% macro audio(id, gad) %}

<audio id="{{ uid(page, id) }}" data-widget="ext.audio" data-item="{{ gad }}">
    <source src="horse.mp3" type="audio/mpeg">
</audio>

{% endmacro %}

Nun kannst du das ganze verwenden in deiner Seite in dem du die widget_ext importierst mit:

{% import "widget_ext.html" as ext %}

Anschließend kannst du dann das "Widget" (ist ja eigentlich unsichtbar) wie folgt verwenden:

{{ ext.audio('IrgendeineEinmaligeId', 'ItemPfad') }}

Wenn alles funktioniert, sollte nun die horse.mp3 jedes mal abgespielt werden, wenn sich der Item Wert ändert. Alternativ könnte man noch den MP3 Pfad dem Widget übergeben oder über sh.py auslesen. Aber jetzt testen wir erstmal ob das geht.

[Sipple]

Guten Morgen

Erst einmal vielen Dank für deine Mühe!

Funktioniert noch nicht. Firebug wirft folgendes aus:

TypeError: $(...).play is not a function
http://192.168.178.23/smartvisu/pages/FIPS/visu.js
Line 18

Die Visu-Seite sieht so aus:

{% extends "rooms.html" %}

{% import "widget_ext.html" as ext %}

{% block content %}

    <h1><img class="icon" src='{{ icon0 }}control_building_empty.svg' />Übersicht</h1>

    {{ ext.audio('Youvegotmail', 'Briefkasten') }}
        
{% endblock %}

Der Soundfile liegt mit Rechten 666 im smartvisu Verzeichnis. Hatte ihn zuerst in meinem pages Verzeichnis, aber dann hat Firebug gemosert dass er in /var/www/smartvisu die Datei nicht findet.

Gruß, Martin

[2ndsky]

Hm, versuch mal das hier in der visu.js:

$(document).delegate('[data-widget="ext.audio"]', {
    'update': function(event, response) {
        if (response != $(this).attr('data-value')) {
            $('#' + this.id)[COLOR="Red"][B][0][/B][/COLOR].play();
            $(this).attr('data-value', response);
        }
    }
});

[Sipple]

GANZ nah dran!

Das Pferd wiehert nun.

Allerdings tut es das schon beim ersten Aufruf der Seite/nach einem Reload.
Wenn sich der Item-Wert ändert klappt es ebenfalls.
Es klappt momentan nicht, wenn die Seite mit dem Widget nicht dargestellt wird. Relativ logisch.

Jetzt bleiben folgende Fragen:

1. In welche Datei man das am besten packt, damit der Sound auch dann abgespielt wird, wenn sich das Item ändert, aber die Seite nicht die aktuelle ist?

2. Im Moment wird der Sound bei JEDER Änderung abgespielt, also müsste man definieren können, dass es nur abgespielt wird, wenn ein bestimmter Item-Wert empfangen wurde.

3. Welcher Soundfile abgespielt werden soll (alle Sounds sollten in /var/www/smartvisu/sounds) wäre dann noch wichtig.

Aber nur die Ruhe, eins nach dem Anderen

Nochmal VIELEN Dank!

Gruß, Martin

[2ndsky]

Okay, Widget wie folgt abändern:

{% macro audio(id, gad, value, file) %}

<audio id="{{ uid(page, id) }}" data-widget="ext.audio" data-item="{{ gad }}" data-value="{{ value }}">
    <source src="{{ file }}" type="audio/mpeg">
</audio>

{% endmacro %}

in der visu.js dann folgendes:

$(document).delegate('[data-widget="ext.audio"]', {
    'update': function(event, response) {
        if (response == parseInt($(this).attr('data-value'))) {
            $('#' + this.id)[0].play();
        }
    }
});

eingebunden mit:

{{ ext.audio('IrgendeineEinmaligeId', 'ItemPfad', 1, 'horse.mp3') }}

Damit wiehert das Pferd nur bei einer 1 als Item Wert. Beim Starten wiehert es natürlich auch, wenn der Item Wert eine 1 ist. Ist das okay?

Damit das aber auf allen Seiten funktioniert??? Du kannst mal versuchen, die base.html aus pages/base/ in dein Verzeichnis zu kopieren und die Widgets dort einfügen. Damit sind sie auf allen Seiten vorhanden. Bin mir aber nicht sicher, ob das funktioniert.

[Sipple]

Hervorragend!
Klappt soweit schon mal.

Beim Starten wiehert es natürlich auch, wenn der Item Wert eine 1 ist. Ist das okay?

Jawohl. Passt für meinen Anwendungsfall genau so.

Hintergrund ist der, dass ich gerne akustisch darauf aufmerksam gemacht werden möchte wenn z.B. die Waschmaschine fertig ist, der Trockner, Geschirrspüler, wenn Post im Brifkasten liegt etc.
Da man ja nicht immer zufällig die entsprechende Seite anzeigt, würde man das erst mitbekommen, wenn man dort hin navigiert.

Ich bastel mal dran rum wo das am besten passt.

Vorerst setze ich den Thread mal auf gelöst.

EDIT: Weil's garantiert kommen wird: Nicht jeder Browser kann unter jedem Betriebssystem jeden Soundfile-Typ abspielen. Und automatisch schon gleich gar nicht. Der eine kann WAV und MP3, aber kein OGG. Der andere kann OGG und MP3, aber kein WAV. usw usf.
Am tollsten ist hier Safari unter iOS. Der kann zwar laut Liste WAV und MP3, spielt das aber unter keinen Umständen automatisch ab! Absichtlich! Das geht nur über einen eingeblendeten Play Button. Dankesschreiben bitte an Apple.
Bei meinen Tests gerade spielt Firefox 27.0.1 auf dem Desktop zwar MP3 und OGG, aber kein WAV ab, was er angeblich können soll. Firefox auf Android spielt immerhin MP3. Chrome verhält sich wohl wie Safari.

Was für ein durcheinander.

Gruß, Martin

[2ndsky]

Ich bastel mal dran rum wo das am besten passt.

Gib dann bitte Bescheid, könnte das auch noch für das Eine oder Andere gebrauchen

[2ndsky]

btw: es gibt für HTML 5 eine Webspeech API für Spracherkennung aber auch TTS (text-to-speech). Mit dieser habe ich auch mal etwas getestet. So könnte man einfach Strings an die Visu schicken, die die dann vorliest wie z.B. "Waschmaschine ist fertig". Leider hat zumindest Apple das so implementiert, dass man die API nur in JS Events verwenden kann, die einer direkten Benutzerinteraktion folgen wie z.B. ein Button Click Event. Wie das bei anderen Betriebssystemen aussieht weiß ich nicht, da für mich nicht interessant. Wer das ganze aber für Android mal testen möchte, ist wirklich eine tolle und einfache Sache.

Eine Demo gibt es z.B. hier: Demo of web speech API Text to Speech / Speech Synthesis function

Das beschränkt sich im Wesentlichen auf:

var u = new SpeechSynthesisUtterance('You have reached your destination');
speechSynthesis.speak(u);

[Sipple]

Bescheid!

Also, ich habe das Sound-Widget nun in verschiedenen Dateien versucht und am besten klappt es für meinen Fall noch in der rooms_menu.html, Z.B.

    <li data-icon="false">
        <a href="index.php?page=room_Overview">
            <img class="icon" src="{{ icon0 }}control_building_empty.svg" />
            
            <h3>Übersicht</h3>
            
            <div class="ui-li-aside">
                {{ ext.audio('Youvegotmail_Menu', 'Briefkasten', 1, './sounds/ugotmail.mp3') }}
                {{ basic.symbol('Briefkasten_Voll_Menu', 'Briefkasten', '', icon1~'message_postbox_mail.png', 1) }}
            </div>
        </a>
    </li>

Damit wird der Sound allerdings immer abgespielt, solange der Wert noch '1' ist und man zwischen Homepage und Subpages wechselt. Das ist auf die Dauer etwas nervig. Die ultimative Lösung wäre, dass der Soundfile nur einmal abgespielt wird (beim Eintreffen des Telegramms) und danach nicht mehr. Da ich das evtl. noch für andere Dinge brauchen könnte und es womöglich ein Logik-Problem ist, mach ich dazu nen Thread in smarthome.py auf.

Gruß, Martin

[2ndsky]

Du kannst natürlich einfach das zugehörige Item auf 0 setzen, nachdem du die 1 empfangen hast.

EDIT: Allerdings ergeben sich dann andere Probleme z.B. bei mehreren Clients gleichzeitig.

Alternativ könntest du auch das Datum der letzten Item Änderung in ein separates Item schreiben. Anstatt den Itemwert überträgst du dann quasi das Datum und speicherst es im Widget zwischen. Nur wenn das empfangene Datum vom gespeicherten abweicht, spielst du den Sound erneut ab.