Skip to content
  • Home
  • Aktuell
  • Tags
  • 0 Ungelesen 0
  • Kategorien
  • Unreplied
  • Beliebt
  • GitHub
  • Docu
  • Hilfe
Skins
  • Light
  • Brite
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dark
  • Cyborg
  • Darkly
  • Quartz
  • Slate
  • Solar
  • Superhero
  • Vapor

  • Standard: (Kein Skin)
  • Kein Skin
Einklappen
ioBroker Logo

Community Forum

donate donate
  1. ioBroker Community Home
  2. Deutsch
  3. Visualisierung
  4. CSS Bild durch Zahl drehen lassen

NEWS

  • Jahresrückblick 2025 – unser neuer Blogbeitrag ist online! ✨
    BluefoxB
    Bluefox
    17
    1
    3.7k

  • Neuer Blogbeitrag: Monatsrückblick - Dezember 2025 🎄
    BluefoxB
    Bluefox
    13
    1
    1.2k

  • Weihnachtsangebot 2025! 🎄
    BluefoxB
    Bluefox
    25
    1
    2.5k

CSS Bild durch Zahl drehen lassen

Geplant Angeheftet Gesperrt Verschoben Visualisierung
vis
7 Beiträge 4 Kommentatoren 1.1k Aufrufe 4 Watching
  • Älteste zuerst
  • Neuste zuerst
  • Meiste Stimmen
Antworten
  • In einem neuen Thema antworten
Anmelden zum Antworten
Dieses Thema wurde gelöscht. Nur Nutzer mit entsprechenden Rechten können es sehen.
  • F Offline
    F Offline
    firehero
    schrieb am zuletzt editiert von firehero
    #1

    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

    malorossM OliverIOO 2 Antworten Letzte Antwort
    0
    • F 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

      malorossM Offline
      malorossM Offline
      maloross
      schrieb am zuletzt editiert von
      #2

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

      Auch Frauen können sich für Technik begeistern! ;)

      Equipment:
      diverse HM-, HMIP-, Aeotec- Tradfri- Sonos- und Fibaro-Geräte, Master-/Slavesystem auf 2 Raspi4, NAS

      1 Antwort Letzte Antwort
      0
      • F 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

        OliverIOO Offline
        OliverIOO Offline
        OliverIO
        schrieb am zuletzt editiert von OliverIO
        #3

        @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

        Meine Adapter und Widgets
        TVProgram, SqueezeboxRPC, OpenLiga, RSSFeed, MyTime,, pi-hole2, vis-json-template, skiinfo, vis-mapwidgets, vis-2-widgets-rssfeed
        Links im Profil

        1 Antwort Letzte Antwort
        0
        • F Offline
          F Offline
          firehero
          schrieb am zuletzt editiert von
          #4

          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.D OliverIOO 2 Antworten Letzte Antwort
          0
          • F firehero

            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.D Offline
            Dominik F.D Offline
            Dominik F.
            schrieb am zuletzt editiert von
            #5

            @firehero

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

            1 Antwort Letzte Antwort
            0
            • F firehero

              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

              OliverIOO Offline
              OliverIOO Offline
              OliverIO
              schrieb am zuletzt editiert von
              #6

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

              Meine Adapter und Widgets
              TVProgram, SqueezeboxRPC, OpenLiga, RSSFeed, MyTime,, pi-hole2, vis-json-template, skiinfo, vis-mapwidgets, vis-2-widgets-rssfeed
              Links im Profil

              F 1 Antwort Letzte Antwort
              0
              • OliverIOO OliverIO

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

                F Offline
                F Offline
                firehero
                schrieb am zuletzt editiert von
                #7

                @OliverIO
                Danke für den Tipp!

                Wie bekomme ich das in IoBroker gebacken?

                VG Axel

                1 Antwort Letzte Antwort
                0
                Antworten
                • In einem neuen Thema antworten
                Anmelden zum Antworten
                • Älteste zuerst
                • Neuste zuerst
                • Meiste Stimmen


                Support us

                ioBroker
                Community Adapters
                Donate

                622

                Online

                32.7k

                Benutzer

                82.4k

                Themen

                1.3m

                Beiträge
                Community
                Impressum | Datenschutz-Bestimmungen | Nutzungsbedingungen | Einwilligungseinstellungen
                ioBroker Community 2014-2025
                logo
                • Anmelden

                • Du hast noch kein Konto? Registrieren

                • Anmelden oder registrieren, um zu suchen
                • Erster Beitrag
                  Letzter Beitrag
                0
                • Home
                • Aktuell
                • Tags
                • Ungelesen 0
                • Kategorien
                • Unreplied
                • Beliebt
                • GitHub
                • Docu
                • Hilfe