[Gelöst] Script läuft nur im vis Editor?

[Charru]

Hallo!

Wenn ich dieses Beispiel (http://www.iobroker.net/docu/?page_id=2 … de#Skripte) in ein "Basic-HTML" Widget einfüge dann, nach einem Reload des Editor, wird das Soundfile bei einem Klick abgespielt.

Verlasse ich den Editor, dann funktioniert es nicht mehr.

Was habe ich übersehen?

Chris

[Uhula]

@Charru:

Was habe ich übersehen? `
Das Script gehört nicht in ein Widget, sondern direkt in deine Projekt-Eigenschaften auf der Registerseite "Skripte".

[Charru]

Hallo!

Danke, im Projekt->Scripte scheint es zu funktionieren, meistens.

Die Lösung, das Script im Basic-HTML Widget hatte ich aus einem anderen Beitrag hier im Forum, den finde ich aber gerade nicht. Meine der war von Bluefox…

Dazu kam noch die fehlende Erkenntnis, wirklich nach jeder Änderung die Webseite neu zu laden, am besten auch noch am Cache vorbei (Strg+F5).

Sowie das mein Wunsch-Widget (LCARS-HTML(Link)) scheinbar nicht funktioniert?

Meine Test-Ergebnisse habe ich unten zusammengefasst.

Interessant wäre jetzt herauszufinden, warum das LCARS-HTML Widget sich keinen Sound entlocken lässt. Bzw. bei Bindung an '.vis-widget.vis-lcars' auch einige andere LCARS-Widgets nicht. Fehlende Einstellung meinerseits oder ein Bug?

Meine Umgebung:

Rpi 3 / Raspian Stretch lite

ioBroker admin 2.0.9 / vis 1.0.2 / lcars 1.0.4 / web 2.1.7

W10 / Firefox

Chris

setTimeout(function () {
  var audioElement = document.createElement('audio');

// Test 1: 
// w00015 ist ein Basic-html Widget, als Navigation auf einen neuen View
// Funktioniert, wenn nicht noch eine Bindung an '.vis-widget' besteht, siehe unten.
// Eigentlich klar da '.vis-widget' übergeordnet ist.

  $('#w00015').click(function() {
    audioElement.setAttribute('src', 'http://<ip-adresse>:8082/vis.0/<name-des-projekts>/img/keyok5.mp3');
    audioElement.play();
	});

// Test 2: 
// w00013 ist ein LCARS-HTML(Link) Widget, als Navigation auf einen neuen View
// Funktioniert nicht, selbst wenn es allein in der Funktion steht.	

  $('#w00013').click(function() {
    audioElement.setAttribute('src', 'http://<ip-adresse>:8082/vis.0/<name-des-projekts>/img/computerbeep_1.mp3');
    audioElement.play();
	});

// Test 3: 
// "Default" Sound für LCARS Widgets
// LCARS-Edge: funktioniert
// LCARS-End: funktioniert
// LCARS-Linie: funktioniert
// LCARS-Text/HTML: funktioniert
// LCARS-HTML(link): funktioniert nicht

  $('.vis-widget').click(function() {
    audioElement.setAttribute('src', 'http://<ip-adresse>:8082/vis.0/<name-des-projekts>/img/computerbeep_2.mp3');
    audioElement.play();
	});

// Test 4: 
// "Default" Sound für LCARS Widgets
// LCARS-Edge: funktioniert
// LCARS-End: funktioniert
// LCARS-Linie: funktioniert nicht
// LCARS-Text/HTML: funktioniert nicht
// LCARS-HTML(link): funktioniert nicht

  $('.vis-widget.vis-lcars').click(function() {
    audioElement.setAttribute('src', 'http://<ip-adresse>:8082/vis.0/<name-des-projekts>/img/computerbeep_3.mp3');
    audioElement.play();
	}); 

}, 100);</name-des-projekts></ip-adresse></name-des-projekts></ip-adresse></name-des-projekts></ip-adresse></name-des-projekts></ip-adresse> 

[Uhula]

Die click-Bindungen können nur an die HTML Elemente gebunden werden, wenn diese sich im DOM des Browsers befinden. Da dieser jedoch asynchron arbeitet, kann es durchaus sein, dass einige HTML Elemente zum Zeitpunkt der Bindung noch gar nicht im DOM sind. Dann klappt das nicht.

Du verzögerst das Binden um 100ms, das ist optimistisch. Versuch mal 1000ms.

Alternativ, und sicherer, ist es die Bindung nicht direkt auf die HTML Elemente zu setzen, sondern über einen Delegator, welcher zum Zeitpunkt des Bindens bereits im DOM ist und die Bindung später an die Ziel HTML Elemente weiter leitet. Das ist mit jquery ganz leicht zu machen, du musst dazu das Event mit dem Delegator (hier: body) verbinden und gibts dein Ziel Element als Filter an.

Statt:
@Charru:

$('#w00013').click(function() { } ) `
dieses nutzen:

$("body").on( "click", "#w00013", function() { } )

gleichbedeutend mit (nutze ich aber nicht, ich mag die on-Form):

$("body").click( "#w00013", function() { } )

Ansonsten bin ich bei direkten LCARS Fragen raus, habe den Adapter nicht installiert.

[Charru]

Hallo!

Danke für die Hinweise. Scheint sogar stabiler zu laufen.

Es ändert zwar nichts daran, das besagten LCARS-Button nicht funktionieren, aber ich behelfe mir erstmal mit einem Basic HTML Navigation, das ich über den LCARS-Button lege.

Bis dann

Chris