Neues Feature: HTML5-basierte Diashow

Posted on by

Seit ein paar Tagen gibt es auf *vz ein neues Feature, eine auf HTML5 basierte Diashow. Hier gibt es nun einige Informationen zur technischen Umsetzung und zu Lessons Learned. Die Diashow verwendet das HTML5-Canvas-Element. Die Darstellung der Bilder eines Albums als Polaroid, und die gespiegelte Anzeige erfolgen mit diesem HTML5-Element und seiner JavaScript-API. Daneben setzt die Diashow neue CSS-Techniken wie background-size ein. Diese neuen Techniken werden von älteren Browsern nicht unterstützt. Um die Browser zu erkennen, die die nötigen Techniken beherschen, verwendet die Diashow eine entsprechende Feature-Detection:

supportsCanvas : function () {
  if (/msie|MSIE 9/.test(navigator.userAgent)) {
    return true;
  }
  var supportsBgSize = !!($('body').css('background-size')
      || $('body').css('-moz-background-size'));
  if (!supportsBgSize) {
    return false;
  }
  var canvas = document.createElement('canvas');
  if (!canvas.getContext) {
    return false;
  }
  return !!canvas.getContext('2d').fillText;
}

Wie man sehen kann, ist es leider keine reine Feature-Detection, da auch die Abfrage des UserAgents erfolgt. Dies erfolgt aus dem Grund, dass die normalen VZ-Seiten momentan im Internet Explorer noch den IE7-Document-Modus verwenden. Im HTML-Head wird dies durch die Zeile

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

definiert. Durch diesen Document-Modus würde im Internet Explorer 9 aber eine reine Feature-Detection auf HTML5-Features nicht funktionieren, da der Internet Explorer 9 im IE7-Modus die HTML5-Features auch nicht unterstützt. Also wurde die Browserüberprüfung entsprechend erweitert, um die korrekte Verlinkung der neuen Diashow und der alten Diashow (die für Browser verlinkt ist, die die HTML5-Features nicht unterstützen) zu erreichen. Die Diashow selbst verwendet natürlich im Internet Explorer 9 den aktuellen Document-Mode, entsprechend ist dort im HTML-Head folgende Zeile:

<meta http-equiv="X-UA-Compatible" content="IE=9" />

Bei den Arbeiten mit dem Canvas-Element ergab sich ein Pattern für komplexere Anwendungen. Statt Verwendung eines einzelnen Canvas-Elements in einer Seite kann man mehrere Canvas-Elemente in eine Seite einbinden (entsprechende positioniert, und mit CSS über z-index die Darstellungs-Anordnung definiert). Dadurch ist es einfach möglich, mit Zeichnungsebenen zu arbeiten, die separat gelöscht und neugezeichnet werden können, die einzeln verschoben/animiert werden können, etc. Jede Zeichnungsebene ist dabei ein Canvas-Element. Diese Technik setzen wir in der Diashow ein, indem der Hintergrund mit einem Canvas-Element dargestellt wird, der Vordergrund mit den Polaroid-Darstellungen von einem anderen Canvas-Element. Bei bestimmten Aktionen, wie dem geringfügigen Ändern der Fenstergröße wird dann nur der Hintergrund neugezeichnet, das Canvas für den Vordergund bleibt bestehen. Mit nur einem Canvas-Element wären dagegen wesentlich mehr Funktionsaufrufe/Zeichenvorgänge nötig. Folgende Screenshots zeigen die Darstellung, wenn man über Firebug nur Vordergrund- bzw. Hintergrund-Canvas einblendet (beim Vordergrund-Canvas wurde zur besseren Darstellung auch die CSS-Hintergrund-Farbe weggeschaltet):


Mit Vorder- und Hintergrund ergibt sich dann die Darstellung in der Diashow:

Die Bildschirmschoner-Animation, die in der Übersicht eines Albums momentan nach 30 Sekunden ohne Aktion gestartet wird, erfolgt entsprechend ebenfalls in einem eigenen Canvas-Element. Dadurch kann dieser Animation auch schnell wieder ausgeblendet werden, und die vorherige Darstellung wiederhergestellt werden, ohne komplexe Canvas-Malvorgänge ausführen zu müssen.

Interessante Links:
Mozilla Canvas Tutorial
Deutsches Canvas Tutorial

This entry was posted in Uncategorized by admin. Bookmark the permalink.

8 thoughts on “Neues Feature: HTML5-basierte Diashow

  1. Schick schick! Eventuell nochmal über euren Algo zur Auswahl der Bilder arbeiten, es erscheinen doch recht häufig ähnliche Bilder nacheinander bzw nach ein paar Bildern. Eventuell eine Queue bauen?

    lg

  2. Schick, echt gut geworden. Könnt ihr zahlen nennen, wie viele Browser Canvas bereits unterstützen? Ihr habt da ja ws. eher die Daten…

  3. inwiefern Bilder nacheinander erscheinen (bei dem “Screensaver”) hängt auch davon ab, wieviel Bilder das Album hat… es werden ja im Moment nur Bilder aus dem angezeigten Album zufallsmäßig angezeigt. Aber es lässt sich sicher noch optmieren, man könnte auch Bilder aus anderen Alben anzeigen. Zu den Zahlen der Browser, die Canvas unterstützen, muss ich mal nachfragen. Eigentlich wäre es ja grundsätzlich von Interesse, wie die Entwicklung der Browseranteile ist, gibt ja einige interessante Diskussionen/Aspekte zu dem Thema (“IE6 must die”, und so…). Canvas-Unterstützung gibt es auch schon in älteren Firefox-Versionen, aber nicht mit allen benötigten Funktionen. Daher bei der Browser-Detection der zusätzlich Check auf die fillText-Funktion (die haben ältere Firefoxe nicht).

  4. Hmmmm, warum dafür die Canvas keule? Mit HTML5+CSS(3) kriegt man das gleiche hin?

  5. Naja, Canvas gehört ja zu HTML5 – und die CSS3-Unterstützung ist bei verschiedenen Browsern noch recht unterschiedlich (vergleiche z.B. IE9 Beta mit Safari…). Um alle aktuellen Browser (bei IE den IE9Beta) unterstützen zu können, wählten wir die Canvas-Implementierung. Über kurz oder lang können natürlich hoffentlich alle aktuellen Browser auch entsprechendes CSS3 (Transitions, Transforms), dann können wir so eine Lösung auch (vermutlich noch besser) mit CSS umsetzen.

  6. Sieht toll aus, aber braucht man dafür wirklich canvas, oder würde HTML5+CSS3 nicht genügen?

  7. “Sieht toll aus, aber braucht man dafür wirklich canvas, oder würde HTML5+CSS3 nicht genügen?” – Mathias

    Klar würde es das – aber hier gehts ja um canvas

  8. Sehr NETT!!! Finde ich SUPER!!

    @Mathias: Ich denke schon das es gehen würde ;-)…Aber es geht ja um Canvas…

Leave a Reply

Your email address will not be published. Required fields are marked *


*