28. November 2024 - 18:22
Aufgrund einer Frage bei dem Artikel Tabellensortierer-Skript wurde ich auf ein Sortierskript bei Stackexchange aufmerksam gemacht. Die Besucherin wollte wissen, ob das von mir auch so animiert werden kann. Daher habe ich einen genaueren Blick auf das Skript geworfen und versucht dessen Funktionalität zu übertragen.
Das Skript ist grundsätzlich effektiv und auch bei großen Tabellen sehr schnell. Es sortiert nicht - wie ich das umgesetzt habe - in dem die Reihen in der Tabelle innerhalb des DOM umgehängt werden, sondern es tauscht lediglich die Positionen der Reihen. Darüber wird eine CSS Transition gelegt, die den Positionstausch animiert. Der Stackexchange User Redu, von dem das Skript stammt, beschreibt dort auch die Schwierigkeiten die diese Methode hat.
Zunächst müssen die Reihen alle eine definierte Höhe haben und "gestreifte" Tabellen, z.b. mit nth-child, sind nicht möglich (oder müssten irgendwie nach der Sortierung neu gefärbt werden). Das Anzeigen von Rahmen ist in den Browsern nicht konsistent und kann durch das Sortieren zu Lücken führen. Ein einfacher border um die einzelnen Zellen ist aber möglich und wird auch nach dem sortieren ordnungsgemäß angezeigt. Doch den Rahmen um das Tr oder Table-Element zeigt der eine Browser an, der andere nicht und z.T. werden sie erst nach dem sortieren sichtbar, was widerrum von der definierten Höhe und dem Inhalt abhängt. Es gilt also, je weniger umso besser. Aber für eine visuelle Sortierung ist diese Methode gut geeignet, wenn die Tabelle nicht zu komplex gestaltet wurde.
[... weiterlesen]
6. August 2019 - 13:08
Wieder ein kleines Skript aus dem Bereich Chemie.
Um Chemikalien eindeutig zu identifizieren, gibt es eine internationale Datenbank die jeder Substanz eine CAS Nummer zuordnet. Diese Zahl besteht aus drei Zahlengruppen, die mit einem Bindestrich getrennt sind. Das nachfolgende Skript überprüft, ob eine CAS-Nummer valide ist.
[... weiterlesen]
5. Dezember 2018 - 11:02
Meine vorherige Umsetzung des Kantenfärbungs Algorithmus nach Sigrid Knust habe ich noch einmal überarbeitet und etwas vereinfacht.
[... weiterlesen]
6. Februar 2013 - 14:08
Letztens gab es in den Kommentaren des älteren Artikels
LED Laufschrift eine längere, anregende Diskussion mit dem Besucher 'Jarbas'. Neben einigen Vorschlägen zur Verbesserung der technischen Umsetzung, äußerte er auch den Wunsch einen kompletten Zeichensatz in dem LED Panel darstellen zu können. Da ich keine gosse Lust hatte an dem Skript viel zu machen, verwies ich nur darauf wie das umgesetzt ist und dass ich eben keine Lust habe komplett alle Zeichen in eine Bitmap zu konvertieren. Auch wenn es mit dem
LED Chareditor im Prinzip relativ einfach ginge.
Daraufhin erstellte der Besucher nahezu den kompletten Bitmap Zeichensatz, mit den gängigen Sonderzeichen und präsentierte ihn auf einer jsbin Seite. Da konnte ich nicht untätig bleiben. Merkte aber schnell, das die Änderungen einen etwas größeren Umbau des Skripts bedeuteten. Daher jetzt ein neuer Artikel zum überarbeiteten
LED Display Skript, das es nun ermöglicht (fast) alle Zeichen darzustellen.
[... weiterlesen]
27. Oktober 2012 - 20:54
Das Tween Objekt
Ich vertiefe hier noch einmal die Verwendung meines Tween Objektes. Hier zeigt sich, wie einfach und effektiv es sich nutzen lässt. Der Code um eine Animations zu erzeugen ist sehr kurz und wie ich finde auch übersichtlich.
Auf der Seite ist ein Animationsobjekt, das mit zwei Animation erzeugt wurde. Mit Hilfe eines Formulares können einige Parameter verändert und diese Animationen in unterschieldichster Weise gestartet werden.
Beispielcode
[... weiterlesen]
22. Juni 2012 - 11:13
Die Technik um mit Javascript eine Bewegung zu animieren hatte ich in einem älteren Artikel bereits beschrieben und kündigte dort eine Fortsetzung an. Doch das Skript, was ich dort verwendet habe, hat sich im Umgang als etwas sperrig erwiesen, daher habe ich es nun komplett neu geschrieben.
Die neue Tween-Klasse kann nun deutlich mehr.
Mit ihr ist es möglich mehrere Elemente gleichzeitig oder auch mehrere Animationen parallel oder hintereinader zu benutzen. Der Animationsablauf läßt sich mit Events steuern. Dazu habe ich in das Skript eine kleine Event Klasse integriert.
Und das Tween Objekt läßt sich auch als Basisklasse für eigene Tweenobjekte benutzen. Es ist aber nicht auf Geschwindigkeit optimiert, trotzdem ist die Animationsgeschwindigkeit (gefühlt) ganz passabel.
[12.10.2012] Das Skript wurde mittlerweile mehrfach überarbeitet und ist dadurch was Funktionalität und Geschwindigkeit angeht deutlich besser geworden.
[... weiterlesen]
18. November 2011 - 22:49
LED Scroller Chareditor
Dieses Skript dient zum bearbeiten der Zeichen des LED Scrollers. Es erzeugt den Code, der für die Darstellung der Zeichen notwendig ist, um diese im LED Scroller benutzen zu können.
[... weiterlesen]
15. November 2011 - 00:30
Mit dem Round Robin Algorithmus können Spielpaarungen in einem rundenbasierten Turnier berechnet werden. Das betrifft z.b. Turniere vieler Ballsportarten. Das Besondere an diesem Algorithmus ist, dass sich die Spiele mit den folgenden Rahmenbedingungen berechnen lassen:
- Jedes Team soll möglichst abwechselnd Heim- und Auswärtsrecht haben
- Jedes Team soll jede Spielrunde ein Spiel austragen
Der Algorithmus wird wie folgt angewandt:
[... weiterlesen]
3. September 2010 - 13:27
Tweening und Transition sind zwei Begriffe aus der Welt der Computeranimation. Heute möchte ich eine Klasse zeigen, wie diese Techniken auch bei Javascript Animationen Verwendung finden.
Das Prinzip der Techniken ist relativ schnell erklärt.
Bei einer normalen Animation, wie sie z.b. auch mein aufgleitendes Popup benutzt, ist die Veränderung des Wertes (hier die Höhe und Breite) linear zur Zeit. In jedem Interval werden die Werte um den gleichen Wert verändert. Dadurch wirkt die Animation statisch und langweilig.
Ein weiterer großer Nachteil dieser Methode ist, dass wenn der Ablauf einmal haken sollte, z.b. weil die Berechnung länger dauert oder der Browser einen kurzen Moment mit etwas anderen beschäftigt ist, dann stockt die Animation kurz und wird danach einfach fortgesetzt, es findet also keine flüssige Ausführung statt.
Ausserdem läßt sich die Ausführungszeit nur verändern, in dem der Abstand der einzelnen Schritte in jedem Interval, vergrößert oder verkleinert wird.
Das folgende Diagramm, zeigt den Ablauf solch einer Art der Animation. Die horizontalen Achse ist die Zeit und vertikal, der Wert der Änderung (in dem Beispiel des aufgleitenden Popups, wär das die Breite oder die Höhe):
Diagramm (1) - lineare Animation
29. April 2009 - 12:44
Ein kleines Javascript aus der Welt der Chemie.
Der Molmassenrechner berechnet die Molmasse einer chemischen Verbindung. Die Molmasse ist die Summe aller Element dieser Verbindung. Das Skript ermittelt dazu anhand der Formel die Anzahl der Atome und berechnet dann die gesamte Molmasse einer Verbindung.
Dabei werden alle sowohl runde Klammer, von Stoffgruppen, als auch eckicke Klammern, in Komplexverbindungen, berücksichtigt. Darüber hinaus ist auch eine Kristallwasserangabe möglich. Die Schreibweise muss der gängigen Nomenklatur entsprechen.
Syntax
Runde Klammern trennen eine Verbindungsgruppe. Eine optionale Zahl dahinter gibt an, wie häufig diese vorkommt. Kommt die Gruppe nur einmal vor, ist die Zahl überflüssig und muss nicht angegeben werden.
Eckige Klammern, für eine Komplexverbindung sind ebenfalls möglich. Innerhalb dieser können auch runde Klammern verwendet werden.
Mehrfach verschachtelte Klammern können in dieser Version nicht berechnet werden. Das Skript rechnet aber einfacher und exakter, als z.b. die auf Wikipedia verlinkten Molmassenrechner.
[... weiterlesen]
