Jun 03 2008

Bildbearbeitung im Browser

Tag: Canvas,JavascriptPatrick @ 4:16 pm

Der Däne Jacob Seidelin hat heute auf seiner Spielwiese http://www.nihilogic.dk/ die nächste beeindruckende Demonstration der Möglichkeiten, die Canvas bietet, aufgezeigt.

Nachdem Seidelin zuletzt vor allem an Umsetzungen von Spieleklassikern arbeitete, veröffentlichte er diesmal ein Online-Bildbearbeitungs-Tool namens Pixastic, das nur clientseitig im Browser läuft.

Pixatic ist kein vollständiges Bildbearbeitungsprogramm, das alle erdenkbaren Fotomanipulationsmöglichkeiten bietet, und soll auch niemals Adobe’s Photoshop und ähnliche Programme ablösen. Das Tool soll nur zeigen, was mit modernen Browser auf Grundlage von Canvas und Javascript alles erreicht werden kann, und grundlegende Funktionen zur schnellen, clientseitigen Bildbearbeitung bereit stellen.

Hinter einer primitiv gehaltenen Benutzeroberfläche (GUI) verbergen sich die üblichen Methoden zur Fotomanipulation wie Ausschneiden, Größe verändern und Drehen genauso wie einige Filter- und Effektfunktionen wie zum Beispiel das Anpassen von Helligkeit, Kontrast, Sättigung, Graustufen, Unschärfe und so weiter.

Mit einigen Einschränkungen läuft das Pixastic auf allen modernen Browser, wobei erhebliche Unterschiede bezüglich der Geschwindigkeit auftreten können. Opera 9.5 (Beta), Firefox 3 und die aktuellen nightly builds des WebKit bieten die beste Performance. Der Internet Explorer bleibt wegen fehlender Canvas-Unterstützung außen vor.

Als Bildquelle kann man sowohl Fotos vom eigenen Rechner hochladen oder aber eine URL angeben. Unterstützt werden alle gängigen Bildformate mit einer Auflösung von bis zu 1024×1024 und einer Größe von bis zu einem Megabyte. Desweiteren besteht die Möglichkeit seine bearbeiteten Bilder auf dem eigenen Desktop abzuspeichern.

Folgende Tastenkürzel hat Seidelin integiert (in Opera sollte man stets Ctrl+Shift anstelle von nur Ctrl drücken):

  • Ctrl+C, Ctrl+X, Ctrl+V – Kopieren, Ausschneiden und Einfügen angewandt auf die ausgewählte Bildfläche
  • Ctrl+Z – Rückgängig machen (bis zu maximal der letzten 10 Aktionen)
  • Alt+Backspace / Ctrl+Backspace – einfärben der ausgewählten Bildfläche

Die ToDo-Liste für die Anwendung ist noch lang und reicht von dem Einbau einer Zoom- und Scrollfunktion über das Beheben etlicher Fehler bis hin zur Überarbeitung der gesamten Benutzeroberfläche.

An dieser Stelle möchte ich noch auf ein ähnliches Projekt namens Canvaspaint verweisen. Canvaspaint ist eine nahezu 1-zu-1-Kopie von Microsofts Paint, läuft jedoch wie Pixastic nur im Browser und bietet den selben Funktionsumfang.

CanvaspaintPixastic - Bildbearbeitung im Browser


Jun 03 2008

Foto-Slideshow und runde Ecken via DOMAssistant-Plugin

Tag: DOMAssistantPatrick @ 9:19 am

Nachdem ich erst gestern über die kürzlich veröffentlichte DOMAssistant-Version 2.7.1.1 berichtet habe, möchte ich an dieser Stelle auf 2 interessante Plugins für die eben genannte Javascript-Klasse eingehen. Die beiden Erweiterungen tragen die Namen PictureSlides und boxIt.

PictureSlides bietet vielfältige Möglichkeiten Slideshows und Fotogalerien individuell zu erstellen und anzupassen. Dabei gibt es die folgenden Varianten, die man sich jeweils in einer Demo ansehen kann: nur große Bilder anzuzeigen, eine Slideshow in eine existierende Seite einzubetten und eine Fotogalerie samt Vorschau-Bildern zu erstellen.

Zu den Features zählen:

  • Slideshows, die beim Öffnen der Seite starten
  • Slideshows mit Wiederholungsschleifen
  • Lightbox-ähnlicher Effekt während des Slideshow-Durchlaufs zum Abheben vom Rest der Homepage
  • Ein- und Ausblendeffekt
  • Wahlweises Vorladen der Bilder um Ladezeiten zu umgehen
  • Individuelles Steuern, welches Foto zuerst angezeigt werden soll, über den Programmcode
  • Unterstützung von Tastaturkürzeln
  • Vor- und Zurück-Links
  • Einblenden von Text neben dem Bild
  • Bilderzähler

Dieses Plugin besteht aus zwei Dateien: Eine Datei beinhaltet den gesamten nötigen Javascript-Code, die andere enthält die Einstellungen zum Anpassen aller Parameter, Features und Werte.

Eine ausführliche Einbauanleitung samt Dokumentation steht allen Interessierten in englischer Sprache zur Verfügung.

Das zweite Plugin, das ist vorstellen möchte, trägt den Namen boxIt und ist von dem Franzosen Samuel Desnoës, der bereits für die französische Übersetzung der DOMAssistant-Dokumentation verantwortlich war, entwickelt worden.

Während Rahmen um block-artige HTML-Elemente (div, p, ul, li) standardmäßig eckig sind und man daher „runde Ecken“ meist nur über div-Verschachtelungen erzeugen kann, vereinfacht boxIt den Quellcode und damit auch das Vorgehen erheblich, indem der Anwendungsentwickler nur noch das HTML-Element angeben muss und das Plugin den Rest via Javascript hinzufügt.

Auf der Homepage des Entwicklers findet sich eine Demonstrationsseite, die aufzeigt, wie boxIt arbeitet. Ebenso existiert eine ausführliche (englischsprachige) Beschreibung über das Benutzen des Plugins.

DA-Plugin PictureSlidesRunde Ecken dank DA-Plugin


Jun 02 2008

Neues von DOMAssistant

Tag: DOMAssistantPatrick @ 8:47 pm

Vergangene Woche ist die DOMAssistant-Bibliothek in Version 2.7.1.1 erschienen, die 2 Fehler im Internet Explorer in Bezug auf Attribute korrigierte, die sich in das 2 Tage vorher veröffentlichte 2.7.1er Release eingeschlichen hatten.

Die Neuerungen in 2.7.1 lesen sich wie folgt:

  • Unterstützung der Pseudo-Klassen :nth-last-child, :nth-last-of-type und :target
  • Unterstützung einfacher und doppelter Kommata bei Attributwerten
  • noParse-Option für die ajax()-Funktion zum Umgehen der erzwungenen Umwandlung von GET- in POST-Parameter bei POST-Aufrufen
  • Fehlerbereinigung der setAttributes-Methode im IE
  • Fehlerbereinigung der XHTML-Namespace-Evaluation in XPath
  • addContent akzeptiert nun auch numerische Werte
  • Events können aus sich selbst heraus hinzugefügt und entfernt werden, ohne Probleme im Event-Handler zu verursachen
  • Erstellen von <object>-Elementen im Firefox funktioniert nun korrekt

Für die nächste Hauptversion planen die DA-Entwickler die Erweiterung des Event-Modells um benutzerdefinierte Ereignisse, das Einführen weiterer Möglichkeiten zur Ereignissteuerung und noch einige andere Funktionen, die Anwendungsentwicklern zu Gute kommen sollen.


Jun 01 2008

BeSlimed – Javascriptgame made in Germany

Tag: mootools,SpielePatrick @ 1:58 am

Um seine Fähigkeit im Umgang mit MooTools zu verbessern, begann Markus Inger an einer BeJeweled-Umsetzung basierend auf dieser Javascript-Bibliothek zu schreiben.

Ziel des Spiels, das er BeSlimed getauft hat, ist es, wie im Original, durch Vertauschen benachbarter Blöcke in einer vorgegeben Zeit möglichst viele Punkte zu erzielen.

Um Punkte zu bekommen, müssen sich mindestens 3 Blöcke mit gleichem Motiv in einer Reihe (horizontal oder vertikal) befinden.Vertauscht werden darf sowohl von oben nach unten und links nach rechts (natürlich auch umgekehrt).

Mit steigender Levelzahl nimmt die Zahl der verschiedenen „Monster“ zu, wodurch auch der Schwierigkeitsgrad nach oben geht.

Inger will nach der Fertigstellung des Spiels an einer Variante mit größeren Motiven arbeiten. Vorher müssen jedoch noch einige Fehler im Skript behoben werden. Wer möchte kann sich gern an der Weiterentwicklung von BeSlimed beteiligen.

Und nun: Ab zum Spiel und viel Spaß.

BeSlimed


« Vorherige Seite