SVG Schaltfläche mit audiovisueller Rückmeldung

DerJens · 08 September 2014, 22:56:00

Hallo,

ich wollte noch kurz meine Ergebnisse aus den letzten Tagen zurückspielen:

Worum geht es?
Ich plane, ein 50€ 7Zoll Tablet an die Wand eines jeden Raums zu montieren, mit dem ich dann über eine Raumkontrolle Licht, Rolladen, Heizung, Temperatur usw. des Raums oder auch von anderen Räumen einsehen und ändern kann. Die Schaltflächen, die ich auf dem Floorplan anordne, sollen eine Aktivierung mit einer audiovisuelle Meldung bestätigen. Anders formuliert: Der Button macht ein Geräusch und blinkt kurz wenn ich drauftippe.

Konzept
Ich benutze SVG Grafiken, da ich die schnell und unkompliziert bearbeiten kann. SVG Grafiken können mit Javascript animiert werden. Eine Audiodatei kann mit HTML5 eingebettet ohne Zusatzmodul abgespielt werden (der Chrome auf Android macht z.B. ogg). Die Audiodatei muss allerdings irgendwie nachgeladen werden. Da der Webserver von FHEM nicht auf die Auslieferung von Audiodateien spezialisiert ist (es fehlen glaube ich die passenden MIME Header), baue ich den Sound einfach in den Button ein. Das geht tatsächlich...

Beispiel

Code Auswählen

<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<script>
function oc() {
	document.getElementById("b").setAttributeNS(null, 'fill', '#ffffff');
	document.getElementById("t").setAttributeNS(null, 'fill', '#9999ff');

	setTimeout(function () { document.getElementById("b").setAttributeNS(null, 'fill', '#9999ff');
	document.getElementById("t").setAttributeNS(null, 'fill', '#000000'); }, 100);

	document.querySelector('audio').play();
}
</script>

<audio xmlns="http://www.w3.org/1999/xhtml">
	<source src="data:audio/ogg;base64,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" type="audio/ogg"/>
</audio>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" height="60px" width="120px">

	<g>
		<rect id="b" x="00" y="00" width="120" height="60" rx="0" ry="0" fill="#9999ff" onclick="oc()"/>
		<text id="t" x="110" y="50"  text-anchor="end" font-size="36" font-family="lcars" fill="#000000" onclick="oc()">ON</text>
	</g>
</svg>

Kurze Erklärung: In SVG (unten) wird ein Button erstellt, schwarzer Text auf blauem Hintergrund. Die Box bekommt die ID b, der Text t. Beide Elemente rufen die JavaScript-Funktion oc() auf, wenn sie aktiviert werden (OnClick). So passiert das selbe, unabhängig davon, ob man den Text oder die Box trifft.

Wird nun aktiviert, ändert oc() zunächst die Farbe der Box auf eine andere Farbe. Danach wird auch der Text farblich geändert. Mit der Funktion timeout() setze ich die beiden Elemente nach 100ms wieder auf die Ausgangswerte zurück. Der Aufruf ist nicht blockierend, daher geht es gleich mit der Audiodatei weiter, die mit ...play() dann abgespielt wird. Dafür habe ich ein <audio> Element angelegt, das NICHT auf eine externe URL verweist, sondern den Sound im Format Base64 direkt beinhaltet.

Anmerkungen
Meine vorgestellte Lösung ist EIN Weg von sicherlich vielen Wegen, wie man ein audiovisuelles Feedback für eine Schaltfläche im Floorplan realisieren kann. Ein Vorteil ist, dass man mit dem Austauschen des Buttons auch gleich den Sound UND die Animation mittauschen kann. Probleme gab und gibt es natürlich auch. Da ich mich mit dem HTML DOM nicht so gut auskenne und schon gar nicht mit eingebetteten SVG Grafiken, habe ich etliche Anläufe gebraucht, die Audiodatei und das Javascript so zu platzieren, dass die Gültigkeit im DOM passt. Der Button funktioniert in dieser Form nur, wenn man ihn in einen Floorplan einbindet oder als Datei mit der Endung .html abspeichert und mit dem Browser öffnet. Ein weiteres Problem tritt auf, wenn man mehr als einen Button einbindet. Dann muss man den Namen der Javascript Funktion ändern und auch die IDs der SVG Elemente, sonst sind die doppelt im DOM vorhanden. Das lässt sich aber sicherlich noch optimieren.

Ein Beispiel ist angehängt, zum Test im Browser öffnen.

Viel Spaß und liebe Grüße
DerJens

FHEM Forum

SVG Schaltfläche mit audiovisueller Rückmeldung

DerJens