clicksound

Mit dem Widget "clicksound" können Sounds an Click-Events von Elementen gebunden werden. D.h. beim klicken/berühren eines Elementes wird ein Sound abgespielt. Über Selektoren im Attribut data-bind-to werden die Elemente ausgewählt, es können verschiedenen Selektoren unterschiedliche Sounds zugewiesen werden. Das Widget selbst ist nicht sichtbar.

Das Widget bringt die Library ion.sound mit, die einige Sounds vordefiniert.

HTML

<div data-type="clicksound"
    data-sound="ion-button-tiny"
    data-length="200"
    data-bind-to="[data-type=button]"></div>

Widgets vom Typ "button" werden den Sound "ion-button-tiny" 200ms lang abspielen, wenn sie geklickt werden.

<div data-type="clicksound"
    data-sound='["ion-button-tiny","ion-bell-ring","ion-tap"]'
    data-length='[200,300,400]'
    data-bind-to='["+button","+knob","+slider"]'></div>

Widgets der Typen "button", "switch" und "push" werden den Sound "ion-button-tiny" 200ms lang abspielen; Widgets vom Typ "volume" und "thermostat" werden den Sound "ion-bell-ring" 300ms lang abspielen; Widgets vom Typ "slider" und "dimmer" werden den Sound "ion-tap" 400ms lang abspielen.

Attribute

sound

Name/Dateiname des abszuspielenenden Sounds. Die Sounds der ion.sound-Library können mit dem Prefix "ion-" und ihrem Namen gesetzt werden. Bindestriche werden dabei in Unterstriche konvertiert. zB: data-sound="ion-camera-flashing" lädt den Sound "camery_flashing" aus der ion-Library. Wird der Prefix "ion-" nicht verwendet, wird data-sound als Pfad zu einer Datei auf dem Webserver interpretiert. Die Dateiendung (.mp3, .ogg...) muss nicht angegeben werden. zB: data-sound="../sound/button" spielt die Datei "button.mp3" aus dem Verzeichnis "../sound/" ab. Bevorzugt der Browser ein anderes Format, wird versucht eine Datei "button.(anderesformat)" zu laden. Default: ion-button-tiny

Optional kann das Attribut sound als Array angegeben werden. Es wird automatisch mit length und bind-play-to verknüpft. Achtung: Eigene Sounds in einem Array müssen im gleichen Verzeichnis liegen.

length

Abspiellänge in Milisekunden. Kann als Array angegeben werden und wird in dem Fall mit den Arrays sound und bind-play-to verknüft. Default: 200

bind-play-to

jQuery-Selektor, der die Elemente angibt, die den Sound abspielen sollen, wenn sie geklickt werden. Um zB alle Buttons, die nicht class="readonly" gesetzt haben auszuwählen gibt man

data-bind-to="[data-type=button]:not(.readonly),[data-type=switch]:not(.readonly),[data-type=push]:not(.readonly)" 

an. Zur Vereinfachung der Konfiguration sind folgende Spezialselektoren definiert:

• +buttons: push,switch,button und famultibutton (ohne "readonly" und nicht innerhalb eines circlemenu)
• +knob: volume und thermostat
• +slider: slider und dimmer
• +circlemenu: Alle Elemente eines circlemenu
• +circlemenu_center: Zentrales Element eines circlemenu
• +circlemenu_center: Äussere Elemente eines circlemenu
• +widgets: alle Widgets
• +everything: alles!

Kann als Array angegeben werden und wird in dem Fall mit den Arrays sound und length verknüft.

bind-to

Kurzform von data-bind-play-to

bind-pause-to

Wie bind-play-to, startet aber kein Abspielen, sondern pausiert es. Evtl. Interessant bei Sounddateien mit längerer Spieldauer

volume

Wert zwischen 0 und 100 der die prozentuale Wiedergabelautstärke angibt. Manche Browser können auch mit Werten über 100 umgehen. Die Wiedergabelautstärke wird dann entsprechend erhöht. Default: 100

Bekannte Probleme

In der ursprünglichen Fassung der FTUI Installationsanleitung wurde der HTTPSRV URL nicht bis auf Fileebene angegeben. Da HTTPSRV sehr fehlertolerant arbeitet war das bisher nie ein Problem. Das clicksound-Widget findet in dieser Konfiguration allerdings die Soundfiles nicht. Der URL muss daher auf www/tablet/index.html angepasst werden, bzw. komplett:

define tablet_ui HTTPSRV tablet/index.html ./www/tablet Tablet Frontend