Navigation

    Logo
    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unread
    • Categories
    • Unreplied
    • Popular
    • GitHub
    • Docu
    • Hilfe
    1. Home
    2. Deutsch
    3. Visualisierung
    4. (gelöst) eigene CSS Klasse (dynamisch)

    NEWS

    • Neuer Blog: Fotos und Eindrücke aus Solingen

    • ioBroker@Smart Living Forum Solingen, 14.06. - Agenda added

    • ioBroker goes Matter ... Matter Adapter in Stable

    SOLVED (gelöst) eigene CSS Klasse (dynamisch)

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

      Hallo zusammen,

      ich möchte die Farbgestaltung meiner Visualisierung per Day/Nightmode (Binding) umschalten. Nun habe ich ein "basic - HTML"-Widget mit z.B. folgendem Inhalt:

      <div class="title1">title1 blabla</div>
      <div class="subtitle1">subtitle1 blabla</div>
      

      Meine Idee war nun, zwei CSS-Dateien anzulegen, welche per Binding umgeschalten werden:
      in VIS unter Eigenschaften -> Reiter "w00xxx" -> CSS Klasse: {lightmode:0_userdata.0.navigation.lightMode;lightmode === "true" ? "@import url('/vis.0/main/css/css_light.css')" :: "@import url('/vis.0/main/css/css_dark.css')"}. Die beiden Dateien liegen im Verzeichnis /vis.0/main/css/.

      css_light.css hat den Inhalt:

      .title1 {
          font-family: Arial;
          color: #ff0000;
          font-weight: bold;
      }
      .subtitle1 {
          font-family: Arial;
          color: #ff0000;
      }
      

      css_dark.css hat den Inhalt:

      .title1 {
          font-family: Arial;
          color: #fff000;
          font-weight: bold;
      }
      .subtitle1 {
          font-family: Arial;
          color: #fff000;
      }
      

      leider funktioniert das nicht 😕 Gibt es eine andere Möglichkeit, mehrere Klassen per Binding in einem "HTML-Widget" zu dynamisch zu definieren?

      liv-in-sky OliverIO 3 Replies Last reply Reply Quote 0
      • liv-in-sky
        liv-in-sky @ice987 last edited by

        @ice987

        wie du sagst, so gehts:

        Image 2.png

        {var1:sonoff.1.MCUDoppelSchalter.POWER2; var1=="true" ? "norm":""} {var1:sonoff.1.MCUDoppelSchalter.POWER2; var1=="true" ? "big":""}
        

        Image 1.png

        1 Reply Last reply Reply Quote 1
        • liv-in-sky
          liv-in-sky @ice987 last edited by

          @ice987 sagte in eigene CSS Klasse:

          @import url('/vis.0/main/css/css_light.css')

          funktioniert das, wenn du nur "@import url('/vis.0/main/css/css_light.css')" einträgst - erstmal ohne abfrage ?

          ice987 1 Reply Last reply Reply Quote 0
          • ice987
            ice987 @liv-in-sky last edited by

            @liv-in-sky
            (erwischt... wenn man den Wald vor lauter Bäumen nicht sieht) leider funktioniert das nicht... somit ist mein Ansatz unbrauchbar. Gibt's ggf. eine andere Möglichkeit?

            liv-in-sky 1 Reply Last reply Reply Quote 0
            • liv-in-sky
              liv-in-sky @ice987 last edited by

              @ice987

              teste gerade,

              man kann doch mehrere klassen angeben, evtl kannst du dann deine css's direkt in den tab schreiben und 2 formel einfügen

              ice987 1 Reply Last reply Reply Quote 0
              • ice987
                ice987 @liv-in-sky last edited by

                @liv-in-sky
                das mit mehreren Klassen habe ich auch erfolgreich getestet, funktioniert auch im Binding. Die Frage ist nun nur, ob diese dynamisch, z.b. aus einer eigenen CSS-Datei, angesprochen werden könnte. Es gäbe natürlich die Möglichkeit, alle Klassen 2x im Binding einzufügen, was aber recht umständlich ist...

                liv-in-sky 2 Replies Last reply Reply Quote 0
                • OliverIO
                  OliverIO @ice987 last edited by OliverIO

                  @ice987 sagte in eigene CSS Klasse:

                  Hallo zusammen,
                  ich möchte die Farbgestaltung meiner Visualisierung per Day/Nightmode (Binding) umschalten. Nun habe ich ein "basic - HTML"-Widget mit z.B. folgendem Inhalt:
                  <div class="title1">title1 blabla</div> <div class="subtitle1">subtitle1 blabla</div>
                  Meine Idee war nun, zwei CSS-Dateien anzulegen, welche per Binding umgeschalten werden:
                  in VIS unter Eigenschaften -> Reiter "w00xxx" -> CSS Klasse: {lightmode:0_userdata.0.navigation.lightMode;lightmode === "true" ? "@import

                  @import ist doch ein css Befehl.
                  Im html Widget ist ja erst einmal html der Standard.
                  Wenn du da JavaScript reinmachen willst dann musst du den Code in <Script> Tags schreiben.

                  Wenn du dann den Import Befehl hinzufügen möchtest, musst du per JavaScript ein Style Tag erzeugen und dann in das Style Tag den @import Befehl reinschreiben.
                  Sobald du die Style Node der Dom hinzufügst, sollte das auch geladen werden.
                  Beim Wechseln solltest du natürlich den anderen styletag wieder entfernen.

                  liv-in-sky 2 Replies Last reply Reply Quote 0
                  • liv-in-sky
                    liv-in-sky @ice987 last edited by

                    @ice987

                    wie du sagst, so gehts:

                    Image 2.png

                    {var1:sonoff.1.MCUDoppelSchalter.POWER2; var1=="true" ? "norm":""} {var1:sonoff.1.MCUDoppelSchalter.POWER2; var1=="true" ? "big":""}
                    

                    Image 1.png

                    1 Reply Last reply Reply Quote 1
                    • liv-in-sky
                      liv-in-sky @OliverIO last edited by

                      @oliverio

                      muss man die css datei eigentlich mit writefile schreiben bzw mit dem vis editor importieren? oder legt man die einfach im dateiverzeichnis an

                      1 Reply Last reply Reply Quote 0
                      • liv-in-sky
                        liv-in-sky @ice987 last edited by

                        @ice987

                        {var1:sonoff.1.MCUDoppelSchalter.POWER2; var1=="true" ? "norm big":""}
                        

                        funktioniert auch - also nur ein binding !

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

                          @liv-in-sky sagte in eigene CSS Klasse:

                          @oliverio

                          muss man die css datei eigentlich mit writefile schreiben bzw mit dem vis editor importieren? oder legt man die einfach im dateiverzeichnis an

                          Ja mit writefile. Ansonsten kennt Iobroker die Datei nicht,
                          Obwohl sie da ist.

                          1 Reply Last reply Reply Quote 0
                          • liv-in-sky
                            liv-in-sky @OliverIO last edited by

                            @oliverio sagte in eigene CSS Klasse:

                            Wenn du dann den Import Befehl hinzufügen möchtest, musst du per JavaScript ein Style Tag erzeugen und dann in das Style Tag den @import Befehl reinschreiben.
                            Sobald du die Style Node der Dom hinzufügst, sollte das auch geladen werden.
                            Beim Wechseln solltest du natürlich den anderen styletag wieder entfernen.

                            meinst du mit jquery ? also einen dp abfragen und dann über z.b jquery einfügen ?

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

                              @ice987

                              Um die Vorgehensweise nochmal zu verdeutlichen.

                              Ihr schreibt eine javascriptfunktion mit der oben genannten Logik in Script Tag und packt die in ein html Widget.

                              In einem binding, welches auf den datenpunkt reagiert, ruft ihr dann diese Funktion auf. Das binding muss im selben html Widget stehen

                              ice987 2 Replies Last reply Reply Quote 1
                              • ice987
                                ice987 @OliverIO last edited by

                                @oliverio
                                Vielen Dank für deine Hilfe!
                                Ich generiere eine html-Tabelle in einem Javascript, schreibe dieses in einen DP. Per Binding lasse ich mir dieses im html-Widget anzeigen. Funktioniert das Umschalten dann auch?

                                OliverIO liv-in-sky 2 Replies Last reply Reply Quote 0
                                • OliverIO
                                  OliverIO @ice987 last edited by

                                  @ice987
                                  Theoretisch ja. Hab selbst sowas nie probiert

                                  1 Reply Last reply Reply Quote 0
                                  • liv-in-sky
                                    liv-in-sky @ice987 last edited by

                                    @ice987

                                    mache das mit allen meinen tabellenscripts - das funktioniert

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

                                      @oliverio sagte in eigene CSS Klasse:

                                      @ice987

                                      Um die Vorgehensweise nochmal zu verdeutlichen.

                                      Ihr schreibt eine javascriptfunktion mit der oben genannten Logik in Script Tag und packt die in ein html Widget.

                                      In einem binding, welches auf den datenpunkt reagiert, ruft ihr dann diese Funktion auf. Das binding muss im selben html Widget stehen

                                      dieses Vorgehen funktioniert! Wunderbar, vielen Dank! 👍

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

                                      Support us

                                      ioBroker
                                      Community Adapters
                                      Donate

                                      747
                                      Online

                                      31.9k
                                      Users

                                      80.2k
                                      Topics

                                      1.3m
                                      Posts

                                      vis
                                      3
                                      16
                                      553
                                      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