Navigation

    Logo
    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unread
    • Categories
    • Unreplied
    • Popular
    • GitHub
    • Docu
    • Hilfe
    1. Home
    2. Deutsch
    3. Visualisierung
    4. CSS Bild durch Zahl drehen lassen

    NEWS

    • Neues Video über Aliase, virtuelle Geräte und Kategorien

    • Wir empfehlen: Node.js 22.x

    • Neuer Blog: Fotos und Eindrücke aus Solingen

    CSS Bild durch Zahl drehen lassen

    This topic has been deleted. Only users with topic management privileges can see it.
    • F
      firehero last edited by firehero

      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

      maloross OliverIO 2 Replies Last reply Reply Quote 0
      • maloross
        maloross @firehero last edited by

        @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.

        1 Reply Last reply Reply Quote 0
        • OliverIO
          OliverIO @firehero last edited by OliverIO

          @firehero

          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

          1 Reply Last reply Reply Quote 0
          • F
            firehero last edited by

            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.

            1.PNG

            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.

            2.PNG

            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

            Dominik F. OliverIO 2 Replies Last reply Reply Quote 0
            • Dominik F.
              Dominik F. @firehero last edited by

              @firehero

              material design css von uhula bietet die möglichkeit der rotation.

              1 Reply Last reply Reply Quote 0
              • OliverIO
                OliverIO @firehero last edited by

                @firehero schau mal bei jquery easing
                da kannst du die rotation in einer bestimmten zeit weich animieren lassen
                https://api.jqueryui.com/easings/

                F 1 Reply Last reply Reply Quote 0
                • F
                  firehero @OliverIO last edited by

                  @OliverIO
                  Danke für den Tipp!

                  Wie bekomme ich das in IoBroker gebacken?

                  VG Axel

                  1 Reply Last reply Reply Quote 0
                  • First post
                    Last post

                  Support us

                  ioBroker
                  Community Adapters
                  Donate

                  445
                  Online

                  32.0k
                  Users

                  80.5k
                  Topics

                  1.3m
                  Posts

                  vis
                  4
                  7
                  915
                  Loading More Posts
                  • Oldest to Newest
                  • Newest to Oldest
                  • Most Votes
                  Reply
                  • Reply as topic
                  Log in to reply
                  Community
                  Impressum | Datenschutz-Bestimmungen | Nutzungsbedingungen
                  The ioBroker Community 2014-2023
                  logo