Refresh für das audio widget?

[jensgulow]

Hallo,

gibt es einen "refresh" für das audio-widget??

Hintergrund ist folgender:

Zur Ansage des aktuellen Wetters habe ich mir ein kleines Programm erstellt, welches (aktuell) 1x stdl. aus einem sich aktualisierenden Textfile eine mp3 erstellt und speichert. Diese wird auf Buttondruck in der CV abgespielt (per audio-widget).
Nun ändert sich ja die mp3-Datei im Laufe der Zeit, allerdings spielt die Cv auf Buttondruck immer die mp3-Datei ab, welche zum reload gerade aktuell war, d.h. im normalen Betrieb refresht sich der abgespielte mp3-file nicht, obwohl eigentlich neue Daten vorliegen.

Wo könnte man denn da Abhilfe schaffen????

[Chris M.]

Ich schätze, dass Du dafür das Audio-Widget anpassen musst. So dass die URL dynamisch um einen Parameter (z.B. "_=<timestamp>") erweitert wird. Das am besten abhängig von einem Config-Parameter.

[jensgulow]

... ich glaube das löst das Problem nicht. Ich habe dann zwar die entsprechenden aktuellen files, aber ich denke dass das ursprünglich bei "Erstinbetriebnahme" des Audiowidgets angeforderte Audiofile dann im Cache vorgehalten wird und bei erneutem Auslösen des widgets einfach aus dem cache gespielt wird.

[jensgulow]

Konkret: Wie "überrede" ich das audio-widget immer in der src nachzuschauen und dieses File zu spielen - und den cache "in Ruhe" zu lassen?

[Chris M.]

Normalerweise reicht es bei HTML die Source auszutauschen. Und wenn der Cache Ärger macht einfach einen jeweils aktuellen Timestamp an die URL dran zu hängen.

Ob das nun bei Audio auch so ist weiß ich mangels Erfahrung jedoch nicht. Hier musst Du in weiterführenden Quellen umsehen.

[jensgulow]

Das mit dem timestamp wäre eine Idee ..... aber da die src "nur" ein mal pro Stunde neu erstellt wird gibt es da ein Problem: Wenn ich das audio-widget aufrufe - mit einem aktuellen timestamp - dann findet das natürlich keine entsprechende src weil die ja evtl. schon max. 60 min. "alt" ist und somit einen ganz anderen timestamp hat.

Ich dachte ich könnte das refresh aus dem img-widget übernehmen ..... habe den Code in audio.js übernommen und in der templateengine bei Zeile 1216 auch entsprechend ergänzt:

audio.js:

    var data = templateEngine.widgetDataInsert( path, {
      'src'     : $e.attr('src'),
      'id'      : $e.attr('id'),
      'width'   : $e.attr('width'),
      'height'  : $e.attr('height'),
      'autoplay': $e.attr('autoplay'),
      'loop'    : $e.attr('loop'),
     [COLOR=#FF0000] 'refresh': $e.attr('refresh') ? $e.attr('refresh') * 1000 : 0, [/COLOR]
      'threshold_value'  : $e.attr('threshold_value' ) || 1
    } );

    // create the actor
    var style = '';
    if( data.width  ) style += 'width:'  + data.width  + ';';
    if( data.height ) style += 'height:' + data.height + ';';
    if( style != '' ) style = 'style="' + style + '"';
    var autoplay = (data.autoplay == 'true') ? ' autoplay ' : '';
    var loop = (data.loop == 'true') ? ' loop ' : '';
    var actor = '<div class="actor"><audio id="' + $e.attr('id') + '" ' + autoplay + loop + style + ' controls> <source src="' +$e.attr('src') + '" > </audio> </div>';
    //
   [COLOR=#FF0000]     if (data.refresh) {
            templateEngine.postDOMSetupFns.push( function(){
            templateEngine.setupRefreshAction( path, data.refresh );
            });[/COLOR]
        }
    //
    return ret_val + actor + '</div>';
  },

templateengine.js:

  this.setupRefreshAction = function( path, refresh ) {
    if (refresh && refresh > 0) {
      var
        element = $( '#' + path ),
        target = $('img', element)[0] || $('iframe', element)[0] [COLOR=#FF0000]|| $('audio', element)[0][/COLOR],
        src = target.src;
      if (src.indexOf('?') < 0)
        src += '?';
      thisTemplateEngine.widgetDataGet( path ).internal = setInterval(function() {
        thisTemplateEngine.refreshAction(target, src);
      }, refresh);
    }
  };

... und in der CV:

       <audio src="config/media/wetter.mp3" autoplay="false" loop="false" id="Wetter_heute" [COLOR=#FF0000]refresh="600"[/COLOR]>
            <address transform="DPT:1.001" mode="readwrite" variant="">10/0/100</address>
            <layout colspan="6"/>
        </audio>

.... es wird aber nichts aktualisiert ....

Ich dachte mit diesen Änderungen würde - analog zum img-widget ... oder dem web - widget ... die src "refresht" .... tut sie aber nicht ....

Wo habe ich da den Denkfehler?

[Chris M.]

Wenn ich http://stackoverflow.com/questions/1...ith-javascript richtig verstehe (steht nur indirekt drinnen), dann müsstest Du ein

audioWidget.load()

nach dem URL-Wechsel ausführen. Wäre zumindest ein Versuch...

Was ich aber nicht machen würde, wäre der Refresh-Weg, den Du hier dargestellt hast. Der ist ja nur wie Pollen - aber morgen wird jemand kommen, der das ganze Event basiert benötigt.
=> Ich hätte eher die Config um ein Flag erweitert, dass der Visu sagt, dass jedes mal die Audio-Datei neu geladen werden soll.
Und dann die Update-Funktion so, dass abhängig von diesem Flag das src-Attribut des Audio-Elementes um einen entsprechenden Timestamp aktuallisiert wird.

[jensgulow]

Erfolgsmeldung:

ich bin den Weg über ein neues Flag "refresh" in der config gegangen:

       <audio src="config/media/wama_fertig.mp3" autoplay="false" loop="false" [COLOR=#FF0000]refresh="false"[/COLOR] id="Jens" >
            <address transform="DPT:1.001" mode="readwrite" variant="">10/6/1</address>
            <layout colspan="6"/>
        </audio> 
       <audio src="config/media/wetter.mp3" autoplay="false" loop="false" [COLOR=#FF0000]refresh="true"[/COLOR] id="Wetter_heute" >
            <address transform="DPT:1.001" mode="readwrite" variant="">10/0/100</address>
            <layout colspan="6"/>
        </audio>

wenn dies auf "true" gesetzt wird, dann wird die entsprechende source bei jedem Aufruf neu geladen. Somit steht bei sich ändernden Inhalten immer die aktuellsten Inhalte zur Verfügung. Bei mir im Einsatz mit den aktuellen Wetterdaten.

Hier die Änderung in der audio.js:

    var data = templateEngine.widgetDataInsert( path, {
      'src'     : $e.attr('src'),
      'id'      : $e.attr('id'),
      'width'   : $e.attr('width'),
      'height'  : $e.attr('height'),
      'autoplay': $e.attr('autoplay'),
      'loop'    : $e.attr('loop'),
      [COLOR=#FF0000]'refresh' : $e.attr('refresh') ,[/COLOR]
      'threshold_value'  : $e.attr('threshold_value' ) || 1
    } );
.
.
.
.
  update: function(e,d) {
    var element = $(this);
    var actor   = element.find('.actor');
    var value = basicdesign.defaultUpdate( e, d, element, true, element.parent().attr('id') );
    var data  = templateEngine.widgetDataGetByElement( element );
    var on = templateEngine.map( data[ 'threshold_value' ], data['mapping'] );
    if (value >= on){
      var audioWidget = document.getElementById(data['id']);
[COLOR=#FF0000]      if (data[ 'refresh' ] == 'true'){
      audioWidget.src= data[ 'src' ];
      audioWidget.load();
      }[/COLOR]
      if (audioWidget.paused == true){
        audioWidget.play();
      }    
    };
  }

Bei mir funktioniert es nach den ersten Tests, vielleicht kann ja mal jemand gegentesten.
Ich musste allerdings so ziemlich alle zwischengespeicherten Browserdaten löschen, damit diese Änderungen Wirkung zeigten - ein einfacher "force reload" hat nicht gereicht.

[Chris M.]

Wenn's funktioniert: super, dann haben wird ja schon (fast).

Code Review mach ich lieber bei einem Git Pull Request. Aber zwei Punkte, die mir hier auffallen:

• Evtl. wäre ein anderes Wort statt refresh hier passender, schließlich wird refresh ja eben schon im Sinne von Zeit-Intervall beim Image genutzt. Ein sprechender Name wäre "allwaysreload". Oder, oder, ...
• Den Code in der Update-Funktion hätte ich noch um einen Timestamp-Mechnaismus erweitert. Um hier sicher den Cache zu umgehen.

[jensgulow]

@Chris:
Bisher funktioniert es ohne Fehler.
Einen anderer Name - wie z.b. von Dir vorgeschlagen "allwaysreload" - ist sicher sinnvoll.
Den Git Pull Request bekomme ich nicht hin - könntest du das übernehmen?
Das mit dem Timestamp ist mir immer noch nicht so ganz klar wie du es meinst .... der Cache wird aktuell sicher umgangen, da die src immer neu geladen wird.

[Chris M.]

Benutzt Du Git oder SVN?

Bei Git müsstest Du nur einen Branch bei Dir lokal erstellen, diese Änderung dort einchecken und dann Pushen. Auf GitHub kannst Du dann einen Pull-Request von diesem Branch gegen CometVisu/CometVisu develop machen.

[jensgulow]

Ich arbeite mit GIT. Das werde ich mal versuchen ....

[Chris M.]

OK, auf der Kommando-Zeile wäre das dann in etwa:

git checkout -b enhance_audio_widget_with_refresh
git add <Dateien wie audio.js und die xsd>
git commit              <-- im Dialog dann einen passenden Kommentar einbauen
git push

Damit ist auf GitHub der Branch (enhance_audio_widget_with_refresh) vorhanden und kann gemütlich über das Web-Interface für den Pull-Request herhalten.

Wenn es nun noch Korrekturen gibt, einfach per

git checkout enhance_audio_widget_with_refresh

dafür sorgen, dass Du lokal im richtigen Branch bist. Änderungen dann wieder per add, commit und push hoch schieben - das sollte dann automatisch im Pull-Request auftauchen.

Um lokal wieder auf develop weiter zu machen einfach per

git checkout develop

dafür sorgen, dass Du wieder auf develop bist.

Tipp: um zu sehen wo Du aktuell bist und ob es Dateien gibt die noch nicht hinzugefügt oder noch nicht commited sind, einfach ein

git status

ausführen.

[jensgulow]

.... nach der langen Zeit wollte ich das mal in Angriff nehmen....
bis zum commit in den neuen branch bin ich gekommen....
.... dann

git push

und es folgt:

fatal: Der aktuelle Branch enhance_audio_widget_with_refresh hat keinen Upstream-Branch.
Um den aktuellen Branch zu versenden und den Remote-Branch
als Upstream-Branch zu setzen, benutzen Sie

    git push --set-upstream origin enhance_audio_widget_with_refresh

.... wenn ich das probiere, dann:

fatal: remote error:
  You can't push to git://github.com/jensgulow/CometVisu.git
  Use https://github.com/jensgulow/CometVisu.git

.... Da ich absoluter Novize bezüglich git bin hätte ich gerne noch ein wenig Unterstützung, damit es mir letztendlich gelingt.



PS: Habe es jetzt über die Weboberfläche bis zu einem pull-Request geschafft. ..... Und nun?

[peuter]

bzgl des Push Fehlers:
Gibt 2 Wege das Problem zu beheben:

1. Du müsstest einen SSH-Key auf Deinem Rechner erzeugen und diesen in deinem Github Profil eintragen, dann sollte das gehen. Unter Linux ist das relativ einfach unter Windows hab ich keine Ahnung wie das geht.
2. Du kannst die Adresse wir Dein Github repository angesprochen wird ändern von git://... auf https://... mit folgendem Befehl:

git remote set-url origin https://github.com/jensgulow/CometVisu.git

Danach kannst Du mit

git remote -v

prüfen ob die Umstellung geklappt hat, da sollte dann das hier stehen:

origin    https://github.com/jensgulow/CometVisu.git (fetch)
origin    https://github.com/jensgulow/CometVisu.git (push)

Falls die (push) Adresse immer noch mit git:// anfängt, müstest Du noch ein

git remote set-url --push origin https://github.com/jensgulow/CometVisu.git

nachlegen. Diese Variante lässt sich leichter einrichten, hat aber den Nachteil, dass Du Dich bei jedem Push immer wieder Deine Github Zugangsdaten eingeben musst (zumindest soweit ich mich erinnere).

Bzgl. Deines Pull-Requests:
Da gibts ja schon eine Antwort mit der Bitte um Nachbesserung zu. Scheinbar hat Dein Editor die Formatierung irgendwie zerstört so dass man nicht mehr beurteilen kann was Du geändert hast, siehe hier: https://github.com/CometVisu/CometVisu/pull/352/files
Außerdem passen die Zeilen-Einrückungen nicht mehr zum Code-Style der CometVisu, was unseren Build-Server dazu veranlasst zu sagen, dass ihm das nicht gefällt.
Diese Dinge müstest Du erst beheben bevor der Request angenommen werden kann. Du kannst das einfach ändern commiten und pushen, der Pull-Request aktualisiert sich automatisch.

Abschließen habe ich gerade noch einen Rechtschreibfehler -> schreib ich als Kommentar in den PR