CSS Bild durch Zahl drehen lassen
-
Hallo Leute,
ich habe etwas spezielles vor und brauche mal eure Unterstützung.
Ich möchte gerne einen Tacho grafisch zeichnen und die Tachonadel (ebenfalls ein Bild), in Abhängigkeit einer Zahl, ausschlagen lassen.
Hierzu suche ich ein CSS, dass mir das Bild der Nadel dreht. Idealerweise etwas verlangsamt.
Zwar gibt es einiges in der Vis die mir die Werte anzeigen können, jedoch möchte ich meine eigene Grafik zum Einsatz bringen.
Ich freue mich auf eure Nachrichten.
VG Axel -
@firehero ich habe vor einer Weile nach Möglichkeiten gesucht, Datenströme zu animieren, bin dabai auf den Befehl stroke-dasharray gestoßen. Vielleicht kannst du da im Zusammenhang zu Tacho was finden.
-
schau mal hier
https://stackoverflow.com/questions/28906145/jquery-rotate-css-meter
Alternativ heissen solche widgets auch gauge.
eines davon befindet sich auch schon bei den widgets jqplot -
Vielen Dank für eure Hinweise.
Anbei mein aktueller Stand.
Tacho ist mal gezeichnet. In Anlehnung eines Tachos vom BMW M5
Will ich aber noch besser machen.
Hier seht ihr die Eintragung bei CSS im Feld transform
rotate({Adapter-LAT.Variabeln.Winkel_Bezug-Produktion}deg)Heißt die Grafik dreht sich anhand einer Variabel.
Funktioniert sehr gut, jedoch ist es halt sehr ruckartig.
Jetzt weiß ich, dass es mit transition wohl auch etwas verlangsamt gehen müsste.
Am liebsten wäre mir die Rotation und transition als CSS in einem zu Verknüpfen, aber das dazu müsste im CSS auch die Möglichkeit einer Variabel möglich sein.Oder kann ich transition auch einzeln eintragen?
Hab schon einige Befehle versucht, die wirken sich aber nicht auf die Nadel aus.
Wäre über jeden Tipp dankbar.
VG Axel
-
material design css von uhula bietet die möglichkeit der rotation.
-
@firehero schau mal bei jquery easing
da kannst du die rotation in einer bestimmten zeit weich animieren lassen
https://api.jqueryui.com/easings/ -
