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

  1. ioBroker Community Home
  2. Deutsch
  3. Visualisierung
  4. [Projekt] MDCSS v2: Material Design CSS Version 2

NEWS

  • UPDATE 31.10.: Amazon Alexa - ioBroker Skill läuft aus ?
    apollon77A
    apollon77
    48
    3
    8.3k

  • Monatsrückblick – September 2025
    BluefoxB
    Bluefox
    13
    1
    1.9k

  • Neues Video "KI im Smart Home" - ioBroker plus n8n
    BluefoxB
    Bluefox
    15
    1
    2.3k

[Projekt] MDCSS v2: Material Design CSS Version 2

Geplant Angeheftet Gesperrt Verschoben Visualisierung
material uivismaterial css
717 Beiträge 74 Kommentatoren 177.9k Aufrufe 77 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.
  • P Offline
    P Offline
    Pittini
    Developer
    schrieb am zuletzt editiert von Pittini
    #49

    Ein Problem welches mal auftaucht, mal nicht, ist folgendes:

    Inked2020-02-23 14_45_50-Window_LI.jpg

    Seitenrefresh bringt keine Änderung. Irgendwann mach ich die Seite neu auf und es wird wieder angezeigt. Dann wieder mal nicht, ka was da bockt. Die Config Dialoge sind direkt aus der MD_Demo in ein MD_Simple kopiert (und angepasst). Den Effekt hab ich btw. bei beiden Projekten an denen ich grad arbeite.

    1 Antwort Letzte Antwort
    0
    • UhulaU Uhula

      @Dominik-F Das die "visibility" nicht funktioniert, liegt an der Zuweisung vom "mdui-center". Denn sowohl das Verstecken als auch das Zentrieren erfolgt über die display-Eigenschaft im CSS. Letzteres übersteuert das Verstecken. Wenn du "mdui-center" nicht brauchst, entferne es mal. Alternativ, kannst du aus der CSS Datei auch drei Zeilen löschen, dann geht es auch. Ich teste mal, ob ich die generell entfernen kann, denke schon.

      /* zentrieren */
      
      .xmdui-center-v,
      .mdui-center-v .vis-widget-body,
      .mdui-center-v .vis-widget-body *  {
        display:flex !important;
        align-items: center;
      }
      .xmdui-center-h,
      .mdui-center-h .vis-widget-body,
      .mdui-center-h .vis-widget-body *  {
        display:flex !important;
        justify-content: center;
      }
      .xmdui-center,
      .mdui-center .vis-widget-body,
      .mdui-center .vis-widget-body * {
        display:flex !important;
        align-items: center;
        justify-content: center;
      }
      

      @der-eine Das mit dem share-Button ist mir schon klar. Ich weiß nur nicht, wie ich Grafana mitteile, dass ich eine Tendenz angezeigt haben möchte.

      @foxriver76 Wenn du mdui-cols-4-toc-16 angibst UND zusätzlich eine width, dann wird versuch der width innerhalb der Grenzen von 4-16 (x80) zu entsprechen. Ist z.B. sinnvoll, wenn man genau zwei cards nebeneinander ahaben möchten und ihnen die width=50% zuweist. Generell sollte die width dann aber keine Zuweisung haben.
      Da es bei den Angaben mdui-cols-N Angaben ohne bis-Angabe zu Verständnisproblemen kam, da diese +10% Größenänderung erlaubten, habe ich in der v2.1 diese 10% entfernt. Nun ist mdui-cols-4 = 320 Px = mdui-cols-4-toc-4

      @Pittini Kannst du mir dein Projekt anonymisiert zukommen lassen, das macht es leichter. Mail-Addy bekommst du per PN/Chat. Die "Material Design Widgets" aus 2018 hast du nicht als Adapter installiert - die stören nämlich, da dort MD CSS v1.8 drin ist.
      Der config-Dialog bekommt seinen Titel und das X dadurch, dass er als jqui-Dialog angezeigt wird.
      NavButtons und Secondary Color: Theoretisch machbar, aber problematisch, wenn man z.B. die tnav im dark-Theme, den content aber im light-Theme hat.

      @SMARTY-ML Automatische View-Wechsel werden nicht durch das MD CSS ausgelöst. Das muss andere Ursachen haben.

      Dominik F.D Offline
      Dominik F.D Offline
      Dominik F.
      schrieb am zuletzt editiert von
      #50

      @Uhula

      Ja genau das wars. Da ich das mdui-center dort brauchte hab ich es nun anders gelöst, mit 2 Buttons übereinander und der Sichtbarkeit. Möchte ungern was in der CSS Datei löschen da ich dann mit dem nächsten Update von dir wieder das gleiche Problem haben könnte.

      UhulaU 1 Antwort Letzte Antwort
      0
      • Dominik F.D Dominik F.

        @Uhula

        Ja genau das wars. Da ich das mdui-center dort brauchte hab ich es nun anders gelöst, mit 2 Buttons übereinander und der Sichtbarkeit. Möchte ungern was in der CSS Datei löschen da ich dann mit dem nächsten Update von dir wieder das gleiche Problem haben könnte.

        UhulaU Offline
        UhulaU Offline
        Uhula
        schrieb am zuletzt editiert von
        #51

        @Dominik-F Ich habe das in der CSS geändert, hat offensichtlich keine Nebeneffekte und funktioniert mit deinem Widget.

        Uhula - Leise und Weise
        Ex: ioBroker on Gigabyte NUC Proxmox

        1 Antwort Letzte Antwort
        0
        • UhulaU Offline
          UhulaU Offline
          Uhula
          schrieb am zuletzt editiert von
          #52

          Kleines Update - in Bezug auf die Meldungen von @Dominik-F und @Pittini - danke.
          -> GitHub

          v2.1.1 23.02.2020

          CSS

          • mdui-center[-h|-v]: Benutzte die CSS "display: !important" Eigenschaft, was dazu führte, dass die vis-Visibility Funktion, die auch über "display" geht, nicht mehr funktionierte. "!important" entfernt.
          • weitere CSS-Variablen für die Farben (abar, ...) eingeführt
          • ui-dialog: Korrektur der Hintergrundfarbe

          vis-Editor

          script

          • Umbau des Setzens der Farben auf die neuen CSS-Variablen. Damit entfällt das (unsichere) anhängen von CSS-Anweisungen, welches manchmal fehl schlug, wenn die CSS Reihenfolge durch timing-Probleme nicht wie erwartet war.

          MD_Demo

          Uhula - Leise und Weise
          Ex: ioBroker on Gigabyte NUC Proxmox

          L 1 Antwort Letzte Antwort
          0
          • foxriver76F Offline
            foxriver76F Offline
            foxriver76
            Developer
            schrieb am zuletzt editiert von
            #53

            So perfekt, habe nun endlich meine produktive vis komplett umgezogen. Einziger offener Punkt ist noch die fehlende Farbanpassung im Filter mdui-timespan-XXX.

            Vielen Dank für die gute Umsetzung.

            Videotutorials & mehr

            Hier könnt ihr mich unterstützen.

            1 Antwort Letzte Antwort
            0
            • bilberryB Offline
              bilberryB Offline
              bilberry
              schrieb am zuletzt editiert von
              #54

              Hallo zusammen,

              bin mit meinem Umzug auf die MD-Version 2.x auch so gut wie fertig. Zwei Probleme konnte ich bislang nicht lösen:

              • Widget wird nicht ausgeblendet (offenbar das gleiche Problem wie bei @Dominik-F, welches ja inzwischen von @Uhula gelöst zu sein scheint - hab mir aber inzwischen anderes beholfen und probiere es demnächst noch mal aus)

              • wenn ich ein Card mit Flott-Diagramm „minimiert“ (mdui-expand mdui-onload) starte, wird nach dem späteren manuellen Expandieren durch den Nutzer das Diagramm nicht angezeigt. Erst wenn man einen willkürlichen Zeitraum durch Klick auf ein mdui-timespan-Element wählt, wird das Diagramm geladen.
                Wie könnte man das umgehen?

              1 Antwort Letzte Antwort
              0
              • S Offline
                S Offline
                SMARTY.ML
                schrieb am zuletzt editiert von
                #55

                Hi,
                ich wollte meine Rollos mit den Input aus "pageDemoInput" füttern.
                Leider folgt nachfolgende Fehlermeldung:

                • (949) Datatype for SHSW-25#6870BC#1.Shutter.Position differs from expected, ignore state change! Please write correct datatype (number)

                Lässt sich das ohne ein lästiges Skript realisieren?

                Dominik F.D 1 Antwort Letzte Antwort
                0
                • S SMARTY.ML

                  Hi,
                  ich wollte meine Rollos mit den Input aus "pageDemoInput" füttern.
                  Leider folgt nachfolgende Fehlermeldung:

                  • (949) Datatype for SHSW-25#6870BC#1.Shutter.Position differs from expected, ignore state change! Please write correct datatype (number)

                  Lässt sich das ohne ein lästiges Skript realisieren?

                  Dominik F.D Offline
                  Dominik F.D Offline
                  Dominik F.
                  schrieb am zuletzt editiert von
                  #56

                  @Uhula
                  Ich nutze für meine Vis auch den MDW Adapter (Ja ich weiß, es kann zu Problemen führen) und habe bis auf ein Widget nun alles raus vom Adapter.
                  Ich versuche nun das Widget nachzubauen nur daran scheitere ich. Ich hab es mit den Balken versucht, jedoch bin ich noch ganz weit vom Orginal entfernt. Vielleicht kannst du mir ja Tipps geben wie ich den Balken einstellen muss damit es dem Orginal sehr ähnelt.
                  Im Widget wird die aktuelle Temperatur angezeigt und je nachdem wie Hoch die Temperatur ist ändert sich die Farbe und die Füllbreite. Wäre cool wenn man dort auch Outlined und Raised einstellen könnte beim Balken

                  Hier das Orginal:
                  Unbenannt.PNG

                  UhulaU 1 Antwort Letzte Antwort
                  0
                  • Dominik F.D Dominik F.

                    @Uhula
                    Ich nutze für meine Vis auch den MDW Adapter (Ja ich weiß, es kann zu Problemen führen) und habe bis auf ein Widget nun alles raus vom Adapter.
                    Ich versuche nun das Widget nachzubauen nur daran scheitere ich. Ich hab es mit den Balken versucht, jedoch bin ich noch ganz weit vom Orginal entfernt. Vielleicht kannst du mir ja Tipps geben wie ich den Balken einstellen muss damit es dem Orginal sehr ähnelt.
                    Im Widget wird die aktuelle Temperatur angezeigt und je nachdem wie Hoch die Temperatur ist ändert sich die Farbe und die Füllbreite. Wäre cool wenn man dort auch Outlined und Raised einstellen könnte beim Balken

                    Hier das Orginal:
                    Unbenannt.PNG

                    UhulaU Offline
                    UhulaU Offline
                    Uhula
                    schrieb am zuletzt editiert von
                    #57

                    @Dominik-F Schau dir mal im MD_Demo die Bargraphs an, die können ihren Hintergrund wertabhängig einfärben. Für den Wert selbst musst du noch ein basic-String drüberlegen.


                    5250a204-d41a-4c7b-a305-ab14589d1dbb-image.png 319981d3-7b6c-4773-9aee-296b14bee285-image.png 9bad2c5f-237f-4fe5-a628-dde4fdd618d2-image.png

                    @SMARTY-ML Das wird ohne serverseitiges Script nicht gehen, da das input-Element wohl immer einen String im vis liefert, auch wenn der type=number ist. ALso nen string-State anlegen und via Serverscript und on-Event als Number in den eigentlichen State schreiben. Sorry, da kann ich nichts machen.

                    @foxriver76 Hast du den Auswahl-Widgets neben "mdui-timespan..." auch "mdui-menuitem" zugewiesen?

                    @bilberry flot/onload muss ich mir mal ansehen, muss dazu aber erst wieder flot einrichten (habe ich schon komplett durch Grafana ersetzt).

                    Uhula - Leise und Weise
                    Ex: ioBroker on Gigabyte NUC Proxmox

                    foxriver76F 1 Antwort Letzte Antwort
                    0
                    • D Offline
                      D Offline
                      der-eine
                      schrieb am zuletzt editiert von
                      #58

                      @Uhula könntest Du das mit dem Basic-HTML, Script und iCal bitte nochmal erklären? Das wäre super! :+1:

                      1 Antwort Letzte Antwort
                      0
                      • UhulaU Uhula

                        @Dominik-F Schau dir mal im MD_Demo die Bargraphs an, die können ihren Hintergrund wertabhängig einfärben. Für den Wert selbst musst du noch ein basic-String drüberlegen.


                        5250a204-d41a-4c7b-a305-ab14589d1dbb-image.png 319981d3-7b6c-4773-9aee-296b14bee285-image.png 9bad2c5f-237f-4fe5-a628-dde4fdd618d2-image.png

                        @SMARTY-ML Das wird ohne serverseitiges Script nicht gehen, da das input-Element wohl immer einen String im vis liefert, auch wenn der type=number ist. ALso nen string-State anlegen und via Serverscript und on-Event als Number in den eigentlichen State schreiben. Sorry, da kann ich nichts machen.

                        @foxriver76 Hast du den Auswahl-Widgets neben "mdui-timespan..." auch "mdui-menuitem" zugewiesen?

                        @bilberry flot/onload muss ich mir mal ansehen, muss dazu aber erst wieder flot einrichten (habe ich schon komplett durch Grafana ersetzt).

                        foxriver76F Offline
                        foxriver76F Offline
                        foxriver76
                        Developer
                        schrieb am zuletzt editiert von
                        #59

                        @Uhula Ne, war nur mdui-timespan-1440 mdui-target-w00019 mdui-hide habe es nun um mdui-menuitem mdui-center erweitert, dann passt es, danke.

                        Videotutorials & mehr

                        Hier könnt ihr mich unterstützen.

                        1 Antwort Letzte Antwort
                        0
                        • P Offline
                          P Offline
                          Pittini
                          Developer
                          schrieb am zuletzt editiert von
                          #60

                          @Uhula Danke für die neue Version, es sind jetzt tatsächlich alle alten Fehler weg. lnav und rnav haben jetzt korrekte Farbe, der Configdialog sieht aus wie er soll. Allerdings gibts nen neuen Fehler, die bnav wurde komplett weiss, die Buttons kann man aber "blind" bedienen.

                          2020-02-23 22_50_38-Window.png

                          Interessanter weiterer Effekt, schalte ich die Seite in Vollbild, wird die bnav von weiss zu gelb mit weisser Schrift.

                          2020-02-23 22_51_16-vis.png

                          Dieses Verhalten ist identisch bei einer frisch importierten MD_Demo.zip (hab ausschliesslich zum Vergleich den Vollbildbutton eingesetzt, sonst außer Farbeinstellung nix geändert.

                          2020-02-23 22_58_14-vis.png

                          2020-02-23 22_54_56-vis.png

                          Dominik F.D UhulaU 2 Antworten Letzte Antwort
                          0
                          • P Pittini

                            @Uhula Danke für die neue Version, es sind jetzt tatsächlich alle alten Fehler weg. lnav und rnav haben jetzt korrekte Farbe, der Configdialog sieht aus wie er soll. Allerdings gibts nen neuen Fehler, die bnav wurde komplett weiss, die Buttons kann man aber "blind" bedienen.

                            2020-02-23 22_50_38-Window.png

                            Interessanter weiterer Effekt, schalte ich die Seite in Vollbild, wird die bnav von weiss zu gelb mit weisser Schrift.

                            2020-02-23 22_51_16-vis.png

                            Dieses Verhalten ist identisch bei einer frisch importierten MD_Demo.zip (hab ausschliesslich zum Vergleich den Vollbildbutton eingesetzt, sonst außer Farbeinstellung nix geändert.

                            2020-02-23 22_58_14-vis.png

                            2020-02-23 22_54_56-vis.png

                            Dominik F.D Offline
                            Dominik F.D Offline
                            Dominik F.
                            schrieb am zuletzt editiert von
                            #61

                            @Pittini

                            könntest du mir vielleicht bei Grafana helfen? Ich bekomme zwar die Grafik angezeigt, muss jedoch immer einen Doppelklick oder Vollbild auswählen, damit die Grafik angezeigt wird. Auch klappen bei mir die Einstellungen für die Zeitspanne und so nicht einstellen. Kannst du mir erklären wie du das gemacht hast?

                            D 1 Antwort Letzte Antwort
                            0
                            • P Pittini

                              @Uhula Danke für die neue Version, es sind jetzt tatsächlich alle alten Fehler weg. lnav und rnav haben jetzt korrekte Farbe, der Configdialog sieht aus wie er soll. Allerdings gibts nen neuen Fehler, die bnav wurde komplett weiss, die Buttons kann man aber "blind" bedienen.

                              2020-02-23 22_50_38-Window.png

                              Interessanter weiterer Effekt, schalte ich die Seite in Vollbild, wird die bnav von weiss zu gelb mit weisser Schrift.

                              2020-02-23 22_51_16-vis.png

                              Dieses Verhalten ist identisch bei einer frisch importierten MD_Demo.zip (hab ausschliesslich zum Vergleich den Vollbildbutton eingesetzt, sonst außer Farbeinstellung nix geändert.

                              2020-02-23 22_58_14-vis.png

                              2020-02-23 22_54_56-vis.png

                              UhulaU Offline
                              UhulaU Offline
                              Uhula
                              schrieb am zuletzt editiert von
                              #62

                              @Pittini Kleiner Fehler, leicht zu beheben, "background" statt "color":
                              .mdui-bnav {
                              background:var(--bnav-background) !important;
                              z-index:98;
                              border:none;
                              box-shadow:0px -2px 4px -1px rgba(0,0,0,0.45);
                              transition: left 0.25s ease;
                              }

                              @der-eine Ich habe noch nichts mit iCal erklärt - oder kann mich zumindest daran nicht erinnern. Worum geht es? Termine aus dem Kalender via Script in einen HTML-State als table zu setzen um ihn als mdui-table anzuzeigen?

                              Wenn ja, dann

                              • das Script Legt einen HTML-State unter javascript.X.ical.0.HTML an (X=Script-Instanz)
                              • es setzt ein on-Event auf den State ical.0.Data.Table
                              • wenn sich der Wert dort verändert, wird das Script ausgeführt und dieses bildet aus dem ical.0.Data.Table Inhalt dann den javascript.X.ical.0.HTML Inhalt
                              • der javascript.X.ical.0.HTML Inhalt kann als HTML Wert für eine mdui-table genutzt werden, Widget: "basic-string (unexcaped)"
                              var idCal = "ical.0";
                              var idCalTrigger   = idCal + ".data.trigger";
                              var idCalTable     = idCal + ".data.table";
                              var idCalHTML      = idCal + ".data.html";
                              var idCalHTMLtable = idCal + ".html";
                              
                              createState(idCalHTMLtable, " ");
                              
                              
                              
                              function iCalToHTMLTable() {
                                  var html     = "<table style='font-size:0.9em;'><thead><tr><th style='text-align:left;'>Zeit</th><th style='text-align:left;'>Text</th><th style='text-align:left;'>Kalendar</th></tr></thead><tbody>";
                                  var calTable = getState(idCalTable);
                                  var inst     = getObject("system.adapter."+idCal);
                                  var instopt  = inst.native;
                                  var calendar = {};
                              
                                  for (var i = 0; i < calTable.val.length; i++) { 
                                      var entry = calTable.val[i];
                                      if ( entry._calName != calendar.name ) {
                                          calendar = {};
                                          for (var c = 0; c < instopt.calendars.length; c++ ) {
                                              if (entry._calName == instopt.calendars[c].name ) {
                                                  calendar = instopt.calendars[c];
                                                  break;
                                              }
                                          }
                                      }    
                                      if (calendar.color !== "")
                                          html+="<tr style='background:transparent; background-image: linear-gradient("+calendar.color+","+calendar.color+"); background-size: 4px 90%; background-repeat: no-repeat;'>";
                                      else
                                          html+="<tr>";
                                      html+="<td style='font-size:1.1em;'>"+entry.date+"</td>"
                                      html+="<td>"+entry.event+"</td>"
                                      html+="<td>"+entry._calName+"</td>"
                                      html+="</tr>";
                                  }
                                  html+="</body></table>";    
                                  setState(idCalHTMLtable, html);    
                              //dump( html );
                              }
                              
                              
                              on({id: idCalTable, change: "ne"}, function (obj) {
                                  iCalToHTMLTable();
                              });
                              
                              iCalToHTMLTable();
                              

                              Uhula - Leise und Weise
                              Ex: ioBroker on Gigabyte NUC Proxmox

                              P T 2 Antworten Letzte Antwort
                              0
                              • UhulaU Uhula

                                @Pittini Kleiner Fehler, leicht zu beheben, "background" statt "color":
                                .mdui-bnav {
                                background:var(--bnav-background) !important;
                                z-index:98;
                                border:none;
                                box-shadow:0px -2px 4px -1px rgba(0,0,0,0.45);
                                transition: left 0.25s ease;
                                }

                                @der-eine Ich habe noch nichts mit iCal erklärt - oder kann mich zumindest daran nicht erinnern. Worum geht es? Termine aus dem Kalender via Script in einen HTML-State als table zu setzen um ihn als mdui-table anzuzeigen?

                                Wenn ja, dann

                                • das Script Legt einen HTML-State unter javascript.X.ical.0.HTML an (X=Script-Instanz)
                                • es setzt ein on-Event auf den State ical.0.Data.Table
                                • wenn sich der Wert dort verändert, wird das Script ausgeführt und dieses bildet aus dem ical.0.Data.Table Inhalt dann den javascript.X.ical.0.HTML Inhalt
                                • der javascript.X.ical.0.HTML Inhalt kann als HTML Wert für eine mdui-table genutzt werden, Widget: "basic-string (unexcaped)"
                                var idCal = "ical.0";
                                var idCalTrigger   = idCal + ".data.trigger";
                                var idCalTable     = idCal + ".data.table";
                                var idCalHTML      = idCal + ".data.html";
                                var idCalHTMLtable = idCal + ".html";
                                
                                createState(idCalHTMLtable, " ");
                                
                                
                                
                                function iCalToHTMLTable() {
                                    var html     = "<table style='font-size:0.9em;'><thead><tr><th style='text-align:left;'>Zeit</th><th style='text-align:left;'>Text</th><th style='text-align:left;'>Kalendar</th></tr></thead><tbody>";
                                    var calTable = getState(idCalTable);
                                    var inst     = getObject("system.adapter."+idCal);
                                    var instopt  = inst.native;
                                    var calendar = {};
                                
                                    for (var i = 0; i < calTable.val.length; i++) { 
                                        var entry = calTable.val[i];
                                        if ( entry._calName != calendar.name ) {
                                            calendar = {};
                                            for (var c = 0; c < instopt.calendars.length; c++ ) {
                                                if (entry._calName == instopt.calendars[c].name ) {
                                                    calendar = instopt.calendars[c];
                                                    break;
                                                }
                                            }
                                        }    
                                        if (calendar.color !== "")
                                            html+="<tr style='background:transparent; background-image: linear-gradient("+calendar.color+","+calendar.color+"); background-size: 4px 90%; background-repeat: no-repeat;'>";
                                        else
                                            html+="<tr>";
                                        html+="<td style='font-size:1.1em;'>"+entry.date+"</td>"
                                        html+="<td>"+entry.event+"</td>"
                                        html+="<td>"+entry._calName+"</td>"
                                        html+="</tr>";
                                    }
                                    html+="</body></table>";    
                                    setState(idCalHTMLtable, html);    
                                //dump( html );
                                }
                                
                                
                                on({id: idCalTable, change: "ne"}, function (obj) {
                                    iCalToHTMLTable();
                                });
                                
                                iCalToHTMLTable();
                                

                                P Offline
                                P Offline
                                Pittini
                                Developer
                                schrieb am zuletzt editiert von
                                #63

                                @Uhula sagte in [Projekt] Material Design CSS v2:

                                Kleiner Fehler, leicht zu beheben, "background" statt "color":

                                Jap, das wars, jetzt läuft alles. Danke Dir.

                                1 Antwort Letzte Antwort
                                0
                                • R Offline
                                  R Offline
                                  reini
                                  schrieb am zuletzt editiert von
                                  #64

                                  ich verstehe den Umstieg von V1 auf V2 noch nicht ganz - einfach den Code von CSS und Skripte gegen die neuen Codezeilen ersetzen?

                                  sigi234S 1 Antwort Letzte Antwort
                                  0
                                  • R reini

                                    ich verstehe den Umstieg von V1 auf V2 noch nicht ganz - einfach den Code von CSS und Skripte gegen die neuen Codezeilen ersetzen?

                                    sigi234S Online
                                    sigi234S Online
                                    sigi234
                                    Forum Testing Most Active
                                    schrieb am zuletzt editiert von
                                    #65

                                    @reini sagte in [Projekt] Material Design CSS v2:

                                    ich verstehe den Umstieg von V1 auf V2 noch nicht ganz - einfach den Code von CSS und Skripte gegen die neuen Codezeilen ersetzen?

                                    Jupp

                                    Bitte benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat.
                                    Immer Daten sichern!

                                    1 Antwort Letzte Antwort
                                    0
                                    • Dominik F.D Dominik F.

                                      @Pittini

                                      könntest du mir vielleicht bei Grafana helfen? Ich bekomme zwar die Grafik angezeigt, muss jedoch immer einen Doppelklick oder Vollbild auswählen, damit die Grafik angezeigt wird. Auch klappen bei mir die Einstellungen für die Zeitspanne und so nicht einstellen. Kannst du mir erklären wie du das gemacht hast?

                                      D Offline
                                      D Offline
                                      der-eine
                                      schrieb am zuletzt editiert von der-eine
                                      #66

                                      @Uhula super genau das hab ich gemeint! :+1: Du hast im ersten Posting schon mal ein Skript zur verfügung gestellt. Dieses hat bei mir leider nicht funktioniert aber diese schon. Das meinte ich mit "erklärt". Sollte die Farbe des Kalenders bis ans Ende des Borders gehen?
                                      Bildschirmfoto 2020-02-24 um 13.27.09.png

                                      @Dominik-F ich bin zwar nicht Pittini aber evtl kann ich Dir helfen. Bei mir funktioniert das anzeigen der Diagramme.

                                      Bildschirmfoto 2020-02-24 um 12.46.44.png

                                      Den Link kopieren

                                      http://192.168.178.51:3000/d/gRZfcBQWz/internet?orgId=1&from=1582523296559&to=1582544896559&panelId=2&fullscreen

                                      und hinten noch

                                      &kiosk&theme=dark

                                      anhängen.

                                      http://192.168.178.51:3000/d/gRZfcBQWz/internet?orgId=1&from=1582523296559&to=1582544896559&panelId=2&fullscreen&kiosk&theme=dark

                                      In der Vis bei dem markiertem basic-html in jedem Bedienfeld (auch bei den 3 Punkten) das target angeben. (Widgetnr. vom iFrame)
                                      Bildschirmfoto 2020-02-24 um 12.56.43.png

                                      Dominik F.D 1 Antwort Letzte Antwort
                                      0
                                      • D der-eine

                                        @Uhula super genau das hab ich gemeint! :+1: Du hast im ersten Posting schon mal ein Skript zur verfügung gestellt. Dieses hat bei mir leider nicht funktioniert aber diese schon. Das meinte ich mit "erklärt". Sollte die Farbe des Kalenders bis ans Ende des Borders gehen?
                                        Bildschirmfoto 2020-02-24 um 13.27.09.png

                                        @Dominik-F ich bin zwar nicht Pittini aber evtl kann ich Dir helfen. Bei mir funktioniert das anzeigen der Diagramme.

                                        Bildschirmfoto 2020-02-24 um 12.46.44.png

                                        Den Link kopieren

                                        http://192.168.178.51:3000/d/gRZfcBQWz/internet?orgId=1&from=1582523296559&to=1582544896559&panelId=2&fullscreen

                                        und hinten noch

                                        &kiosk&theme=dark

                                        anhängen.

                                        http://192.168.178.51:3000/d/gRZfcBQWz/internet?orgId=1&from=1582523296559&to=1582544896559&panelId=2&fullscreen&kiosk&theme=dark

                                        In der Vis bei dem markiertem basic-html in jedem Bedienfeld (auch bei den 3 Punkten) das target angeben. (Widgetnr. vom iFrame)
                                        Bildschirmfoto 2020-02-24 um 12.56.43.png

                                        Dominik F.D Offline
                                        Dominik F.D Offline
                                        Dominik F.
                                        schrieb am zuletzt editiert von
                                        #67

                                        @der-eine

                                        Vielen Dank, das hat jetzt soweit funktioniert bis auf eine Sache. Die Grafanaseite ist anfangs immer schwarz und links oben ist ein Ausrufezeichen mit rotem Hintergrund. Klicke ich drauf steht dort:Invalid dimensions for Plot, width=376,164, high=0

                                        D P 2 Antworten Letzte Antwort
                                        0
                                        • Dominik F.D Dominik F.

                                          @der-eine

                                          Vielen Dank, das hat jetzt soweit funktioniert bis auf eine Sache. Die Grafanaseite ist anfangs immer schwarz und links oben ist ein Ausrufezeichen mit rotem Hintergrund. Klicke ich drauf steht dort:Invalid dimensions for Plot, width=376,164, high=0

                                          D Offline
                                          D Offline
                                          der-eine
                                          schrieb am zuletzt editiert von der-eine
                                          #68

                                          @Dominik-F versuche mal den Link in der Dashboard Übersicht über Share zu kopieren.
                                          Es entstehen wohl zwei unterschiedliche links wenn man entweder direkt im Trend über Share den Link erzeugt oder im Dashboard. Vergleich mal welcher der beiden links dem von mir am ähnlichsten ist und nutze den.

                                          Bin gerade nicht zuhause ansonsten würd ich selber schnell schauen...

                                          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

                                          745

                                          Online

                                          32.4k

                                          Benutzer

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