Inhalte in Webbrowser updaten ohne Refresh/Flickern

[torud]

Hallo Wissende,

ich generiere aus CP-Files HTML-Dateien, die ich in einer WebBrowser-Komponente darstelle. Dabei handelt es sich um Daten aus SportEvents, welche sich sekündlich ändern können (Punkte, Spielstände, Zeiten).

Das Generieren der Dateien und die Anzeige derer funktioniert recht gut und ohne grössere Probleme.

Was mir gar nicht gefällt ist die Tatsache, dass der WebBrowser bei einem kompletten Seitenrefresh so aussieht, als würde er kurz flackern. Ich denke, dass er es auch tut, aber wirklich schön ist das nicht!

Was kann ich tun, um das zu verhindern?

Ich habe schon überlegt irgendwie ein JavaScript mit GetElementbyID einzubauen und damit dann die zu ändernden Inhalte so zu ändern, weiss aber nicht, wie man das "von aussen" anschieben kann, weil dies vollautomatisch geschehen muss. Ändert sich also ein Spielstand muss sich dies auch der Spielstand der HTML-Seite von selbst updaten.

Vielleicht gehts ja auf diesem Weg? Ich habe sowas allerdings noch nie realisiert und wäre auf ein wenig Hilfe angewiesen.

[Klaus01]

es gibt eine Unit sendkey.pas oder sendkeys.pas
damit kannst Du z.B. die Taste F5 senden.
Daraufhin wird der Webbrowser aktualiesiert.

Das flackern wirst Du dadurch nicht wegbekommen
aber es flackert nur dann wenn auch etwas neues
anliegt.

Grüße
Klaus

[torud]

Hallo Klaus,

danke für Deine Antwort. Das Refreshen ist nicht das Problem, denn das geht doch auch über Webbrowser.refresh.

Ich will einfach das Flackern beim Refresh selbst wegbekommen. Mir scheint das nur mit einem JavaScript zu gehen, aber ich habe einfach noch keine Source für ein AutoUpdate finden können.

[Klaus01]

Hallo Tom,

könntest Du nicht mit zwei Instancen des Webbrowsers arbeiten.
Wenn der eine angezeigt wird, kann der andere upgedatet (was ein Wort) werden.
Ist der Update komplett wird der erste Webbrowser versteckt und der zweite angezeigt.

Die Methoden dazu sind webbrowser1.hide und webbrowser1.show

Habe es nicht getestet ob es flackert.

Grüße
Klaus

[torud]

Naja ehrlich gesagt ist das nicht genau das, was ich wollte. Das ist eigentlich nur ein "Verdecken des Problems", was ich nicht wirklich will.

[Luckie]

Da wirst du dir wohl einen eigenen WebBrowser schreiben müssen, der besser ist als der IE und nicht flackert, wenn er die Seite neu läd.

[Gruber_Hans_12345]

aber dein zweiter ansatz mit dem ändern von aussen der seite müsste doch klappen.

Ich glaube, alles was mann mit Javascript machen kann, kann man auch extern mit Delphi machen.

Und Editfelder befüllen, Comboboxen auswählen .... kann man von extern (mit Delphi) zu 100% (Habs selber schon gemacht)

Da vermute ich, das man eventuell auch Texte ändern kann.

schau mal hier, vielleicht findest da was dir weiterhilft : http://www.cryer.co.uk/brian/delphi/...properties.htm

[marabu]

Hi Tom,

vielleicht genügt dir ja das hier:

Delphi-Quellcode:

procedure TWebForm.WebBrowserBeforeNavigate2(Sender: TObject;
  const pDisp: IDispatch; var URL, Flags, TargetFrameName, PostData,
  Headers: OleVariant; var Cancel: WordBool);
begin
  if pDisp = WebBrowser.DefaultInterface then
    LockWindowUpdate(Handle);
end;

procedure TWebForm.WebBrowserDocumentComplete(Sender: TObject;
  const pDisp: IDispatch; var URL: OleVariant);
begin
  if pDisp = WebBrowser.DefaultInterface then
    LockWindowUpdate(0);
end;

Grüße vom marabu

[torud]

Das mit dem eigenen Browser war ja schon etwas zickig, oder!?

Also ich dachte da eher an das neue Zauberwort: AJAX

Ich habe es extra nicht angesprochen, weil ich hoffte, dass mir einer von Euch in dieser Richtung nen Tipp gibt. Ich werde aber, bevor ich mir das antue, erstmal die beiden anderen guten Tipps anschauen und testen.

[Master_RC]

@torud:
Benutz das von marabu, bei mir klappts ohne Flackern :) (getestet mit XAMPP-Server per LAN mithilfe meines Server-Rechners :) )

[Ich möchte mich hiermit vor allem an dem Herrn S. Erverrechner bedanken, der diesen gewaltigen Schritt der Forschung mit einer TWebBrowser-Komponente geschaffen hat, die beim Updaten nicht flackert. Vielen Dank]

Vor Kurzem erreichte uns eine Eilmeldung:

Ein gewisser Herr S. Erverrechner wurde für den Nobelpreis nominiert.
Er hat es geschafft, eine WebBrowser-Komponente zu kreieren, die beim updaten nicht flackert.

Sorry, mir war langweilig :(


PS:
Bevor ichs vergesse: der Text soll auf keinem Fall jetzt irgendwen verarschen oder so! Ich hab selber soetwas gesucht und habs bisher mit dem "per 2. Browser verstecken" gelöst.

[torud]

Mein erster Versuch schlug leider fehl, aber das lag wohl eher daran, dass ich noch einen anderen Vorschlag von Marabu drin hatte, um den Refresh auszuführen:

Delphi-Quellcode:

WebBrowser1.ExecWB(OLECMDID_REFRESH, OLECMDEXECOPT_DODEFAULT);

Also ich dann den Code wieder auf das profane:

Delphi-Quellcode:

WebBrowser1.Refresh;

umstellte und die 2 Codeschnipsel an besagten Stellen einfügte und einfach nur mal in der Datei rumschrieb und sie speicherte, stellte ich fest, dass es funzte. Im übrigen schwanke ich noch zwischen Skepsis und Schmunzeln bezüglich des weissen Textes von Master_RC.

//edit nach nochmaligem Test
Also ein kleines Flackern ist dennoch geblieben. Es kommt nicht bei jedem Refresh und auch nicht über die gesamte Komponente. Ich habe zum Beispiel 3 Tabellen. Manchmal flackert dann zum Beispiel die letzte. Ich speichere vielleicht aller 10 Sekunden die HTML-Datei, mehr nicht.

[torud]

Habs nochmals getestet und ich arbeite in diesem Fall komplett Offline ohne Webserver oder sonsitges. Es Flackert nicht, aber es ist immer noch der typische Refresh zu erkennen, wenn Ihr wisst was ich meine...

Gibt es noch Vorschläge zu diesem Thema?

[Master_RC]

es gab doch mal so ein javascript, dass bei einem verlassen/betreten einerseite dann immer so einen "überblendeeffekt" macht...

[torud]

Bin gerade in Finnland unterwegs, aber wenn ich abends mal Zeit und Langeweile habe, werde ich mal ein Tool bauen, was die Problematik verdeutlicht und es dann hier mal vorfuehren, denn so richtig zufrieden bin ich einfach nicht.

Komisch ist auch, dass der Webbrowser eine Datei, die er an-navigiert hat, auch vorm neuschreiben zu blockieren scheint. Aber wie gesagt, dass könnte man dann eventuell an meinem Testprojekt sehen.

[torud]

Hallo Wissende,

ich habe nun mal ein Testprojekt erstellt, welches die Problematik zeigen soll. Vielleicht findet ja von Euch jemand eine Lösung für das Problem? Im SourcCode habe ich noch ein paar Comments eingefügt. Das Beispiel arbeitet nicht ganz wie mein Programm, erzeugt aber das gleiche Problem.

[marabu]

Hallo Tom,

kennt dein D6 in der Palette "Internet" die Komponente TPageProducer - Unit HTTPProd? Damit kannst du sehr elegant eine Template-Verarbeitung realisieren. Aber in deinem Beispiel würde ich die Daten nicht per StringReplace() einpflegen und dann über eine temporäre Datei dem Browser zur Anzeige zuführen. Eleganter ist es, wenn du die Daten aus deinen Eingabefeldern direkt im Browser änderst - Stichwort HTML DOM.

EDIT#1: hänge mal diesen Code an deine OnChange Ereignisse der TEdit-Komponenten, dann verstehst du was ich meine:

Delphi-Quellcode:

// uses MSHTML;

procedure TForm1.ed_playerAChange(Sender: TObject);
var
  doc: IHTMLDocument2;
  e: IHTMLElement;
begin
  doc := WebBrowser1.Document as IHTMLDocument2;
  e := doc.all.item('nameA', 0) as IHTMLElement;
  e.innerText := TEdit(Sender).Text;
end;

EDIT#2: Dazu gehört dann ntürlich eine Änderung an deinem Template:

Code:

<td id="nameA" width="50%">%%namea%%</td>
<td id="nameB">%%nameb%%</td>

EDIT#3: Ich weiß ja nicht wie dein eigentliches Programm aussieht, aber in einem meiner Programme werkelt der WebBrowser direkt als HTML-Editor. Dazu hängst du folgenden Code an das Ereignis OnDocumentComplete:

Delphi-Quellcode:

procedure TForm1.WebBrowser1DocumentComplete(Sender: TObject;
  const pDisp: IDispatch; var URL: OleVariant);
begin
  with Sender as TWebBrowser do
    if pDisp = DefaultInterface then
      with Document as IHTMLDocument2 do
        designMode := 'on';
end;

Zusätzlich musst du dann dein Template nochmal erweitern:

Code:

<td contenteditable="yes" id="nameA" width="50%">%%namea%%</td>
<td contenteditable="yes" id="nameB">%%nameb%%</td>

Grüße vom marabu

[torud]

Hallo Marabu,

ich sitze gerade nicht vor meinem PC und kann somit Deine Ausfuehrungen nur so erstmal lesen. Ich werde es heute abend mal testen und dann sehen wir weiter. Ich bin Dir jedenfalls jetzt schon mal dankbar. Ohne Deinen Code weiter betrachtet zu haben moechte ich aber noch kurz folgendes anmerken.

1. Auf dem Webbrowser sollte der User nichts interaktiv ausfuehren muessen. Es muss alles vollautomatisch laufen. Das geht aus meinem Beispiel natuerlich nicht hervor, aber aus Platz und Zeitgruenden habe ich das erstmal weggelassen.

2. Ich weiss nicht wie das mit Code und der MSHTML-Geschichte läuft, benoetige aber definitiv CSS im Code und weiss aber, dass manche BeispielCodes, wo der Webbrowser nicht eine Html-Datei an-navigiert, sondern den Inhalt ueber die MSHTML uebergeben bekommt, dass da kein CSS funktioniert oder nur bedingt.

Ich melde mich wieder. Notfalls wieder mit nem Projekt...Vielen Dank!

[torud]

Hallo Marabu!

Ich habe nunmal Deinen Code getestet und war erstaunt, was man alles mit der Webbrowser-Komponente anstellen kann. Leider hat mich aber Dein Code nur noch mehr verwirrt und vom Ziel entfernt, denn leider funktionieren im Webbrowser mit Deinem Code keine Links mehr. Dadurch kann man nicht mehr navigieren. Es ist alles wie in einem Editor. Die Bedienung findet aber ohne Maus ueber einen TouchScreen statt.

Zur Erläuterung noch schnell ein paar Sätze.

Das ganze ist fuer ein SportEvent. Es finden gleichzeitig mehrere Spiele statt. von jedem Spiel wird ein CP-File geschrieben, in dem die Namen der Begegnungen und der Spielstand stehen. Aus den einzelnen Spielen wird eine Navigation generiert. Z.B. Spiel 1 und Spiel 2. Diese sind dann auch Links zur Seite Spiel1.html und Spiel2.html. auf den Spielseiten werden dann die geparsten CP-FileInfos angezeigt. Namen und Spielstände. Da diese sich zum Beispiel beim Tischtennis jede Minute ändern, muss dann, wenn die Seite geladen ist und sich der Spielstand im CP-File ändert, sich auch der Spielstand auf der annavigierten HTML-Seite ändern. Die geschicht momentan so, dass ich mit ShellNotifier die Veränderung festelle und alles wieder parse, alle Dateien neu generiere und dem Webbrowser nen Refresh gebe. Polnisch ich weiss, aber ich habe einfach nicht besseres finden können. Auch haben mir die Beispiele im Demo-Ordner nicht geholfen, weil dort allzuoft von Servern und Clients die Rede war und fuer Newbies auf diesem Sektor nichts dabei war.

Hast Du noch nen Tipp???

[marabu]

Hallo Tom,

Zitat:

Zitat von torud

leider funktionieren im Webbrowser mit Deinem Code keine Links mehr.

der Code unter Edit#1 sollte mit deinen Anforderungen funktionieren. Wenn nicht, dann musst du mir mal ein realitätsnahes Template basteln, damit ich dein Problem nachvollziehen kann.

Grüße vom marabu

[torud]

Hallo Marabu,

Danke fuer Deine Antwort. Ich werde, sonbald ich es schaffe, mal ein solches Template erstellen und wenn ich es schaffe auch ein Projekt, welches die CP-Files parst, damit Du auch wirklich den gesamten Zusammenhang erkennen kannst...

[torud]

Hallo an alle Interessierten,

nachdem ich mir diesen Code und ein paar andere Zeilen vom Marabu mehrmals durchgelesen habe, kam ich endlich auf den Trichter, dass die Lösung doch eigentlich die Ganze Zeit vor mir liegt, ich einfach nur zu viel des geposteten Code verwendet habe.

Also wer´s wissen will. Der hier vorliegende Code war genau das, was ich brauchte und es funktioniert einwandfrei.

Delphi-Quellcode:

// uses MSHTML;

procedure TForm1.ed_playerAChange(Sender: TObject);
var
  doc: IHTMLDocument2;
  e: IHTMLElement;
begin
  doc := WebBrowser1.Document as IHTMLDocument2;
  e := doc.all.item('nameA', 0) as IHTMLElement; //reference auf ein Element, welche als ID nameA hat
  e.innerText := TEdit(Sender).Text;             //ersetzt den inhalt dieses elements ohne flackern 
end;

EDIT#2: Dazu gehört dann natürlich eine Änderung an deinem Template:

Code:

<td id="nameA" width="50%">%%namea%%</td>
<td id="nameB">%%nameb%%</td>

Mehr musste es einfach nicht sein.