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
    2.0k

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

[Projekt] MDCSS v2: Material Design CSS Version 2

Geplant Angeheftet Gesperrt Verschoben Visualisierung
material uivismaterial css
717 Beiträge 74 Kommentatoren 178.1k 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.
  • UhulaU Uhula

    @mickym Ab der MD CSS v2.3 kannst du den page-Viewnamen leicht nutzen:

    • mdui-page-name: Der Widgetinhalt wird nach jedem Seitenwechsel mit dem page-Viewnamen gefüllt, kann in basic-HTMLs zur Anzeige des page-Viewnamens genutzt werden
    • mdui-page-title: Wie mdui-page-name, allerdings wird der Name noch aufbereitet. Kleinbuchstaben am Anfang werden ignoriert und '_' werden zu Leerzeichen gewandelt. "pageMeine_ioBroker_Vis" -> "Meine ioBroker Vis"
      bbe8798b-1e7f-4efb-a4a4-f79d1921800f-image.png
    mickymM Online
    mickymM Online
    mickym
    Most Active
    schrieb am zuletzt editiert von
    #184

    @Uhula Ganz lieben Dank! - Du bist echt gut. Ich werde es heute abend gleich ausprobieren. Vorher komme ich nicht dazu!! Das ist genau das, was ich wollte. :)

    Jeder Flow bzw. jedes Script, das ich hier poste implementiert jeder auf eigene Gefahr. Flows und Scripts können Fehler aufweisen und weder der Seitenbetreiber noch ich persönlich können hierfür haftbar gemacht werden. Das gleiche gilt für Empfehlungen aller Art.

    UhulaU 1 Antwort 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();
      

      T Offline
      T Offline
      Tirador
      schrieb am zuletzt editiert von
      #185

      @Uhula Das Kalendarscript ist super. Das wäre doch etwas für das neue Wiki! :)

      1 Antwort Letzte Antwort
      0
      • mickymM mickym

        @Uhula Ganz lieben Dank! - Du bist echt gut. Ich werde es heute abend gleich ausprobieren. Vorher komme ich nicht dazu!! Das ist genau das, was ich wollte. :)

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

        @mickym Heute abend wird nicht gehen, die v2.3 ist noch nicht online ;-) Wenn du willst, kannst du das vorhandene Script selbst ergänzen: In _onChangePage
        aus

        // favicon anpassen
                    $("#vis_container>:not([style*='display: none']) .mdui-favicon img").each( function (index) {
                        if ($(this)[0].src)
                             $("link[rel='shortcut icon']").attr("href", $(this)[0].src);
                    });
        

        einfach

        // favicon anpassen
                    $("#vis_container>:not([style*='display: none']) .mdui-favicon img").each( function (index) {
                        if ($(this)[0].src)
                             $("link[rel='shortcut icon']").attr("href", $(this)[0].src);
                    });
                    
                    // page-name anpassen
                    let pagename = window.location.hash.substr(1,255);
                    $(".mdui-page-name").each( function (index) {
                        $(this).html( pagename );
                    });
                    $(".mdui-page-title").each( function (index) {
                        // "pageMeine_ioBroker_Vis" -> "Meine ioBroker Vis"
                        let title = '';
                        let c;
                        for (let i=0; i<pagename.length; i++) {
                            c = pagename[i];
                            if (title=='') {
                                if (c==c.toUpperCase()) title += c; 
                            } else {
                                if (c=='_') c = ' '; 
                                title += c;
                            }    
                        }
                        $(this).html( title );
                    });
        
        

        machen.

        @Tirador Das Kalendarscript kommt auch noch ins Wiki, ich will es aber erst noch überarbeiten.

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

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

          @Uhula habe mit dem Log und den TR064 Views noch anzeige Probleme. Hätte sie genau so importiert wie Du sie erstellt hast. Trotzdem werden sie so angezeigt...
          Habe das aktuelle Skript und CSS Projekt

          Icon zu nah am Text

          IMG_6854.jpg

          Hintergrundfarbe änder sich beim vergrössern

          IMG_6855.jpg

          Kennst Du dieses verhalten?

          1 Antwort Letzte Antwort
          0
          • T Offline
            T Offline
            Tirador
            schrieb am zuletzt editiert von
            #188

            Ich finde es wird langsam Zeit, dass wir einen neuen Thread eröffnen, wo wir alle unsere Widgets präsentieren.
            Ich fummel schon stundenlang am perfekten Layout/Design herum.
            Wenn wir uns auf gewissen Grundlagen (Material Design Icons als Schriftarten, Referenz auf die Konfigurationsseite etc.) einigen, könnte man die Widgets untereinander teilen.

            Ich meine damit auch so Basics wie:

            • Lampensteuerung
            • Heizungssteuerung
            • Anzeige Türen/Fenster
            • Anruflisten / Verpasste Anrufe
            • Kalendarfunktion

            etc.

            @Uhula Was meinst Du?

            UhulaU 1 Antwort Letzte Antwort
            0
            • T Tirador

              Ich finde es wird langsam Zeit, dass wir einen neuen Thread eröffnen, wo wir alle unsere Widgets präsentieren.
              Ich fummel schon stundenlang am perfekten Layout/Design herum.
              Wenn wir uns auf gewissen Grundlagen (Material Design Icons als Schriftarten, Referenz auf die Konfigurationsseite etc.) einigen, könnte man die Widgets untereinander teilen.

              Ich meine damit auch so Basics wie:

              • Lampensteuerung
              • Heizungssteuerung
              • Anzeige Türen/Fenster
              • Anruflisten / Verpasste Anrufe
              • Kalendarfunktion

              etc.

              @Uhula Was meinst Du?

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

              @Tirador Ja, ist eine gute Idee, ich habe damit auch bereits begonnen, zumindest mit den Scripten/Views, die ich erstellt habe. Ich gehe dabei so vor:

              • Die Scripte/Views spiele ich in mein Github/templates hoch (news versions sind da besser zu handhaben als hier im Forum)
              • Im Github/Wiki erfasse ich die Dokumentation dazu
              • Im Forum erzeuge ich einen neues Thema um Fragen beantworten zu können (das wiederum geht auf Github nicht gut) (Bsp: [Vorlage] MDCSS v2: tr-064 devices adapter in vis anzeigen
              • In diesem MDCSS c2 Thema führe ich alle Verweise auf die anderen Themen noch einmal auf (im 1.Beitrag)

              Da ich mein Github nicht öffnen möchte, könnt ihr da nichts hochladen. Aber ihr könnt hier im Forum ebenfalls neue Themen der Art "[Vorlage] MDCSS v2: was kann mein Script/View" erzeugen. Ich nehme dann Links im MDCCS v2 Thema mit auf. Evtl. auch im Github/Wiki (sie sollten sich dann ein wenig an die schon vorhandenen Wiki-Texte halten).

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

              1 Antwort Letzte Antwort
              0
              • jpgorganizerJ Offline
                jpgorganizerJ Offline
                jpgorganizer
                schrieb am zuletzt editiert von jpgorganizer
                #190

                Hi,

                gibt es eigentlich eine schicke Möglichkeit Datum und Uhrzeit anzeigen zu lassen. Ich meine jetzt nicht die aktuelle Zeit, sondern ich habe einen Datum/Zeit String im UTC-Format, also z.B.

                2020-03-12T17:04:18.872+0000
                

                und würde mir das gerne als

                12.03.2020 18:04
                

                anzeigen lassen. Man beachte die Stunde! Ich bin Zeitzone MEZ.

                Dazu wäre eine Funktion ala der Javascript Funktion

                Date.toLocaleString()
                

                schön. Und das dann noch gepaart mit einem Formatstring.
                Gibt es sowas in VIS? In MD CSS? Ideen?

                Grüße
                jpgorganizer

                Bitte keine Fragen per PN, die gehören ins Forum!

                ioBroker
                smartgarden Adapter für GARDENA smart system
                Plattform: Raspberry Pi OS Linux 12 (bookworm), Node.js: v18.18.2, NPM: 9.8.1

                UhulaU 1 Antwort Letzte Antwort
                0
                • UhulaU Uhula

                  @mickym Heute abend wird nicht gehen, die v2.3 ist noch nicht online ;-) Wenn du willst, kannst du das vorhandene Script selbst ergänzen: In _onChangePage
                  aus

                  // favicon anpassen
                              $("#vis_container>:not([style*='display: none']) .mdui-favicon img").each( function (index) {
                                  if ($(this)[0].src)
                                       $("link[rel='shortcut icon']").attr("href", $(this)[0].src);
                              });
                  

                  einfach

                  // favicon anpassen
                              $("#vis_container>:not([style*='display: none']) .mdui-favicon img").each( function (index) {
                                  if ($(this)[0].src)
                                       $("link[rel='shortcut icon']").attr("href", $(this)[0].src);
                              });
                              
                              // page-name anpassen
                              let pagename = window.location.hash.substr(1,255);
                              $(".mdui-page-name").each( function (index) {
                                  $(this).html( pagename );
                              });
                              $(".mdui-page-title").each( function (index) {
                                  // "pageMeine_ioBroker_Vis" -> "Meine ioBroker Vis"
                                  let title = '';
                                  let c;
                                  for (let i=0; i<pagename.length; i++) {
                                      c = pagename[i];
                                      if (title=='') {
                                          if (c==c.toUpperCase()) title += c; 
                                      } else {
                                          if (c=='_') c = ' '; 
                                          title += c;
                                      }    
                                  }
                                  $(this).html( title );
                              });
                  
                  

                  machen.

                  @Tirador Das Kalendarscript kommt auch noch ins Wiki, ich will es aber erst noch überarbeiten.

                  mickymM Online
                  mickymM Online
                  mickym
                  Most Active
                  schrieb am zuletzt editiert von mickym
                  #191

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

                  @mickym Heute abend wird nicht gehen, die v2.3 ist noch nicht online Wenn du willst, kannst du das vorhandene Script selbst ergänzen: In _onChangePage

                  In der Demo App und meinen ersten Versuchen - hab ich es getest und Script ergänzt - läuft super- Danke nochmals.

                  Jeder Flow bzw. jedes Script, das ich hier poste implementiert jeder auf eigene Gefahr. Flows und Scripts können Fehler aufweisen und weder der Seitenbetreiber noch ich persönlich können hierfür haftbar gemacht werden. Das gleiche gilt für Empfehlungen aller Art.

                  1 Antwort Letzte Antwort
                  0
                  • jpgorganizerJ jpgorganizer

                    Hi,

                    gibt es eigentlich eine schicke Möglichkeit Datum und Uhrzeit anzeigen zu lassen. Ich meine jetzt nicht die aktuelle Zeit, sondern ich habe einen Datum/Zeit String im UTC-Format, also z.B.

                    2020-03-12T17:04:18.872+0000
                    

                    und würde mir das gerne als

                    12.03.2020 18:04
                    

                    anzeigen lassen. Man beachte die Stunde! Ich bin Zeitzone MEZ.

                    Dazu wäre eine Funktion ala der Javascript Funktion

                    Date.toLocaleString()
                    

                    schön. Und das dann noch gepaart mit einem Formatstring.
                    Gibt es sowas in VIS? In MD CSS? Ideen?

                    Grüße
                    jpgorganizer

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

                    @jpgorganizer sagte in [Projekt] MDCSS v2: Material Design CSS Version 2:

                    Date.toLocaleString()

                    Ja, ist recht einfach. Basis ist ein Basci-HTML Widget. Du nutzt dann das vis-Binding und musst unter "HTML" eintragen (natürlich mit deinem State):

                    {0_userdata.0.example_state;date(DD.MM.YYYY hh:mm)}
                    

                    41446e39-2aec-48de-96ae-2519659b4e80-image.png

                    Weitere Binding-Infos

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

                    jpgorganizerJ 1 Antwort Letzte Antwort
                    1
                    • UhulaU Uhula

                      @jpgorganizer sagte in [Projekt] MDCSS v2: Material Design CSS Version 2:

                      Date.toLocaleString()

                      Ja, ist recht einfach. Basis ist ein Basci-HTML Widget. Du nutzt dann das vis-Binding und musst unter "HTML" eintragen (natürlich mit deinem State):

                      {0_userdata.0.example_state;date(DD.MM.YYYY hh:mm)}
                      

                      41446e39-2aec-48de-96ae-2519659b4e80-image.png

                      Weitere Binding-Infos

                      jpgorganizerJ Offline
                      jpgorganizerJ Offline
                      jpgorganizer
                      schrieb am zuletzt editiert von
                      #193

                      @Uhula said in [Projekt] MDCSS v2: Material Design CSS Version 2:

                      ;date(DD.MM.YYYY hh:mm)}

                      manomanoman --- das hab ich doch schon mal gemacht. Habe nicht mehr dran gedacht, dass man bei den Bindings auch Funktionen hat. Danke für die Hilfe.

                      Grüße
                      jpgorganizer

                      Bitte keine Fragen per PN, die gehören ins Forum!

                      ioBroker
                      smartgarden Adapter für GARDENA smart system
                      Plattform: Raspberry Pi OS Linux 12 (bookworm), Node.js: v18.18.2, NPM: 9.8.1

                      1 Antwort Letzte Antwort
                      0
                      • T Offline
                        T Offline
                        Tirador
                        schrieb am zuletzt editiert von
                        #194

                        Ich würde gerne den Chips Radio-Button zur Steuerung meiner OSRAM-Schaltsteckdosen über Deconz verwenden.
                        Kurioserweise ändert das den Wert, allerdings werden die Dosen nicht geschaltet.

                        Ich habe testweise nun zwei andere Schalter in das Widget aufgenommen (die oberen zwei im Screenshot). Beide schalten auch die Steckdosen richtig.

                        2020-03-14 14_52_34-vis.png

                        Wenn ich den Chip-Schalter schalte erhalte ich auch eine Fehlermeldung im Log:

                        2020-03-14 14_58_28-logs - ioBroker.png

                        Ich denke das Widget müsste also statt den Werten 0 oder 1 ein true oder false senden. Allerdings kann man dies ja nirgendwo konfigurieren. Mache ich etwas grundlegend falsch?

                        Export der Widgets:

                        Widget Bool-Schalter funktionierend (auf dem Screenshot der gelbe oben):

                        [{"tpl":"tplValueBoolCheckbox","data":{"oid":"deconz.0.Groups.5.on","g_fixed":true,"g_visibility":false,"g_css_font_text":false,"g_css_background":false,"g_css_shadow_padding":false,"g_css_border":false,"g_gestures":false,"g_signals":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis/signals/lowbattery.png","signals-icon-size-0":0,"signals-blink-0":false,"signals-horz-0":0,"signals-vert-0":0,"signals-hide-edit-0":false,"signals-cond-1":"==","signals-val-1":true,"signals-icon-1":"/vis/signals/lowbattery.png","signals-icon-size-1":0,"signals-blink-1":false,"signals-horz-1":0,"signals-vert-1":0,"signals-hide-edit-1":false,"signals-cond-2":"==","signals-val-2":true,"signals-icon-2":"/vis/signals/lowbattery.png","signals-icon-size-2":0,"signals-blink-2":false,"signals-horz-2":0,"signals-vert-2":0,"signals-hide-edit-2":false,"html_append":"<label for=\"{wid}_checkbox\"><label>","class":"mdui-switch mdui-amber-acc","lc-type":"last-change","lc-is-interval":true,"lc-is-moment":false,"lc-format":"","lc-position-vert":"top","lc-position-horz":"right","lc-offset-vert":0,"lc-offset-horz":0,"lc-font-size":"12px","lc-font-family":"","lc-font-style":"","lc-bkg-color":"","lc-color":"","lc-border-width":"0","lc-border-style":"","lc-border-color":"","lc-border-radius":10,"lc-zindex":0},"style":{"left":"192px","top":"48px","width":"48px","height":"30px","z-index":1},"widgetSet":"basic"}]
                        

                        Widget ChipDesign Schalter (leider nicht funktionierend):

                        [{"tpl":"tplJquiRadio","data":{"oid":"deconz.0.Groups.5.on","g_fixed":true,"g_visibility":false,"g_css_font_text":false,"g_css_background":false,"g_css_shadow_padding":false,"g_css_border":false,"g_gestures":false,"g_signals":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","off_text":"aus","on_text":"ein","padding":"0","signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis/signals/lowbattery.png","signals-icon-size-0":0,"signals-blink-0":false,"signals-horz-0":0,"signals-vert-0":0,"signals-hide-edit-0":false,"signals-cond-1":"==","signals-val-1":true,"signals-icon-1":"/vis/signals/lowbattery.png","signals-icon-size-1":0,"signals-blink-1":false,"signals-horz-1":0,"signals-vert-1":0,"signals-hide-edit-1":false,"signals-cond-2":"==","signals-val-2":true,"signals-icon-2":"/vis/signals/lowbattery.png","signals-icon-size-2":0,"signals-blink-2":false,"signals-horz-2":0,"signals-vert-2":0,"signals-hide-edit-2":false,"class":"mdui-red mdui-red-acc mdui-chips-outlined","lc-type":"last-change","lc-is-interval":true,"lc-is-moment":false,"lc-format":"","lc-position-vert":"top","lc-position-horz":"right","lc-offset-vert":0,"lc-offset-horz":0,"lc-font-size":"12px","lc-font-family":"","lc-font-style":"","lc-bkg-color":"","lc-color":"","lc-border-width":"0","lc-border-style":"","lc-border-color":"","lc-border-radius":10,"lc-zindex":0},"style":{"left":"168px","top":"136px","width":"","height":"32px"},"widgetSet":"jqui"}]
                        

                        bilberryB 1 Antwort Letzte Antwort
                        0
                        • T Tirador

                          Ich würde gerne den Chips Radio-Button zur Steuerung meiner OSRAM-Schaltsteckdosen über Deconz verwenden.
                          Kurioserweise ändert das den Wert, allerdings werden die Dosen nicht geschaltet.

                          Ich habe testweise nun zwei andere Schalter in das Widget aufgenommen (die oberen zwei im Screenshot). Beide schalten auch die Steckdosen richtig.

                          2020-03-14 14_52_34-vis.png

                          Wenn ich den Chip-Schalter schalte erhalte ich auch eine Fehlermeldung im Log:

                          2020-03-14 14_58_28-logs - ioBroker.png

                          Ich denke das Widget müsste also statt den Werten 0 oder 1 ein true oder false senden. Allerdings kann man dies ja nirgendwo konfigurieren. Mache ich etwas grundlegend falsch?

                          Export der Widgets:

                          Widget Bool-Schalter funktionierend (auf dem Screenshot der gelbe oben):

                          [{"tpl":"tplValueBoolCheckbox","data":{"oid":"deconz.0.Groups.5.on","g_fixed":true,"g_visibility":false,"g_css_font_text":false,"g_css_background":false,"g_css_shadow_padding":false,"g_css_border":false,"g_gestures":false,"g_signals":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis/signals/lowbattery.png","signals-icon-size-0":0,"signals-blink-0":false,"signals-horz-0":0,"signals-vert-0":0,"signals-hide-edit-0":false,"signals-cond-1":"==","signals-val-1":true,"signals-icon-1":"/vis/signals/lowbattery.png","signals-icon-size-1":0,"signals-blink-1":false,"signals-horz-1":0,"signals-vert-1":0,"signals-hide-edit-1":false,"signals-cond-2":"==","signals-val-2":true,"signals-icon-2":"/vis/signals/lowbattery.png","signals-icon-size-2":0,"signals-blink-2":false,"signals-horz-2":0,"signals-vert-2":0,"signals-hide-edit-2":false,"html_append":"<label for=\"{wid}_checkbox\"><label>","class":"mdui-switch mdui-amber-acc","lc-type":"last-change","lc-is-interval":true,"lc-is-moment":false,"lc-format":"","lc-position-vert":"top","lc-position-horz":"right","lc-offset-vert":0,"lc-offset-horz":0,"lc-font-size":"12px","lc-font-family":"","lc-font-style":"","lc-bkg-color":"","lc-color":"","lc-border-width":"0","lc-border-style":"","lc-border-color":"","lc-border-radius":10,"lc-zindex":0},"style":{"left":"192px","top":"48px","width":"48px","height":"30px","z-index":1},"widgetSet":"basic"}]
                          

                          Widget ChipDesign Schalter (leider nicht funktionierend):

                          [{"tpl":"tplJquiRadio","data":{"oid":"deconz.0.Groups.5.on","g_fixed":true,"g_visibility":false,"g_css_font_text":false,"g_css_background":false,"g_css_shadow_padding":false,"g_css_border":false,"g_gestures":false,"g_signals":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","off_text":"aus","on_text":"ein","padding":"0","signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis/signals/lowbattery.png","signals-icon-size-0":0,"signals-blink-0":false,"signals-horz-0":0,"signals-vert-0":0,"signals-hide-edit-0":false,"signals-cond-1":"==","signals-val-1":true,"signals-icon-1":"/vis/signals/lowbattery.png","signals-icon-size-1":0,"signals-blink-1":false,"signals-horz-1":0,"signals-vert-1":0,"signals-hide-edit-1":false,"signals-cond-2":"==","signals-val-2":true,"signals-icon-2":"/vis/signals/lowbattery.png","signals-icon-size-2":0,"signals-blink-2":false,"signals-horz-2":0,"signals-vert-2":0,"signals-hide-edit-2":false,"class":"mdui-red mdui-red-acc mdui-chips-outlined","lc-type":"last-change","lc-is-interval":true,"lc-is-moment":false,"lc-format":"","lc-position-vert":"top","lc-position-horz":"right","lc-offset-vert":0,"lc-offset-horz":0,"lc-font-size":"12px","lc-font-family":"","lc-font-style":"","lc-bkg-color":"","lc-color":"","lc-border-width":"0","lc-border-style":"","lc-border-color":"","lc-border-radius":10,"lc-zindex":0},"style":{"left":"168px","top":"136px","width":"","height":"32px"},"widgetSet":"jqui"}]
                          

                          bilberryB Offline
                          bilberryB Offline
                          bilberry
                          schrieb am zuletzt editiert von
                          #195

                          @Tirador
                          Du hast das Widget "Radiobuttons on/off" eingesetzt. Probiers mal mit der Widget "Radiobuttons ValueList". Dort kannst Du nämlich Deine nötigen Schaltwerte explizit als "0" und "1" (oder bei Bedarf ganz andere) selbst hinterlegen.

                          T 1 Antwort Letzte Antwort
                          0
                          • bilberryB bilberry

                            @Tirador
                            Du hast das Widget "Radiobuttons on/off" eingesetzt. Probiers mal mit der Widget "Radiobuttons ValueList". Dort kannst Du nämlich Deine nötigen Schaltwerte explizit als "0" und "1" (oder bei Bedarf ganz andere) selbst hinterlegen.

                            T Offline
                            T Offline
                            Tirador
                            schrieb am zuletzt editiert von
                            #196

                            @bilberry Danke für den Tipp. Leider bringt das auch nicht das gewünschte Verhalten. Ich habe nun alle Kombinationen zwischen on/off, true, false, 0 oder 1 en durch. Eventuell ist dies kein Visualisierungsproblem. Ich werde im deconz-Adapter forschen.

                            1 Antwort Letzte Antwort
                            0
                            • T Offline
                              T Offline
                              Tirador
                              schrieb am zuletzt editiert von
                              #197

                              Ich kriege bestimmte Material Icons nicht angezeigt.
                              Ist das ein Problem, dass nicht alle Icons in der Schriftart verfügbar sind, oder das die Schriftart im Demo-Projekt nicht aktuell ist.

                              Beispielsweise die Badewanne:

                              2020-03-15 12_35_23-Icons - Material Design.png

                              https://material.io/resources/icons/?style=baseline

                              Hat jemand eine Idee?

                              UhulaU 1 Antwort Letzte Antwort
                              0
                              • T Tirador

                                Ich kriege bestimmte Material Icons nicht angezeigt.
                                Ist das ein Problem, dass nicht alle Icons in der Schriftart verfügbar sind, oder das die Schriftart im Demo-Projekt nicht aktuell ist.

                                Beispielsweise die Badewanne:

                                2020-03-15 12_35_23-Icons - Material Design.png

                                https://material.io/resources/icons/?style=baseline

                                Hat jemand eine Idee?

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

                                @Tirador Die icon-Fonts wurden von der offiziellen Github Seite icon-font herunter geladen. Die sind 4 Jahre alt. Es kann durchaus sein, dass Google zwischenzeitlich die Icons erweitert hat, den icon-font aber nicht aktualisiert hat.

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

                                mrFenyxM T 2 Antworten Letzte Antwort
                                0
                                • UhulaU Uhula

                                  @Tirador Die icon-Fonts wurden von der offiziellen Github Seite icon-font herunter geladen. Die sind 4 Jahre alt. Es kann durchaus sein, dass Google zwischenzeitlich die Icons erweitert hat, den icon-font aber nicht aktualisiert hat.

                                  mrFenyxM Offline
                                  mrFenyxM Offline
                                  mrFenyx
                                  schrieb am zuletzt editiert von
                                  #199

                                  @Uhula Ich habe neuere Versionen vom Materia Icons Font gefunden aber ich weiß nicht was ich damit tun soll oder auch wie ich hineinschauen kann um zu sehen welche Icons dabei sind. Ich habe versucht die alten mit den neueren einfach zu ersetzen aber ich kriege weiterhin nur die alten Icons. Ideen?

                                  UhulaU 1 Antwort Letzte Antwort
                                  0
                                  • mrFenyxM mrFenyx

                                    @Uhula Ich habe neuere Versionen vom Materia Icons Font gefunden aber ich weiß nicht was ich damit tun soll oder auch wie ich hineinschauen kann um zu sehen welche Icons dabei sind. Ich habe versucht die alten mit den neueren einfach zu ersetzen aber ich kriege weiterhin nur die alten Icons. Ideen?

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

                                    @mrFenyx Bei dem Font handelt es sich um einen anderen Material Design Font. Im MDCSS ist nur der Original WebFont von Google drin, wobei es sich bei deinem geposteten um einen Open Source WebFont handelt, welcher neben den 900 Icons aus dem Google WebFont weitere 4500 Icons enthält. Damit wächst die Dateigröße von 60kb auf 350kb an - und das gesuchte "bathtub" Icon konnte ich auch darin nicht entdecken.

                                    Außerdem scheint die Nutzung eine andere zu sein, statt "<i class='material-icons'>home</i>" muss man die dazugehörige CSS Datei (noch einmal 350 kb) nutzen und "<span class="mdi mdi-home"></span>" eingeben.

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

                                    Stephan SchleichS 1 Antwort Letzte Antwort
                                    0
                                    • UhulaU Uhula

                                      @mrFenyx Bei dem Font handelt es sich um einen anderen Material Design Font. Im MDCSS ist nur der Original WebFont von Google drin, wobei es sich bei deinem geposteten um einen Open Source WebFont handelt, welcher neben den 900 Icons aus dem Google WebFont weitere 4500 Icons enthält. Damit wächst die Dateigröße von 60kb auf 350kb an - und das gesuchte "bathtub" Icon konnte ich auch darin nicht entdecken.

                                      Außerdem scheint die Nutzung eine andere zu sein, statt "<i class='material-icons'>home</i>" muss man die dazugehörige CSS Datei (noch einmal 350 kb) nutzen und "<span class="mdi mdi-home"></span>" eingeben.

                                      Stephan SchleichS Offline
                                      Stephan SchleichS Offline
                                      Stephan Schleich
                                      schrieb am zuletzt editiert von
                                      #201

                                      @Uhula Kann es sein das der Popup Hintergrund fix auf weiß eingestellt ist?
                                      Ich habe eine View mit schwarzen Hintergrund die lediglich im Popup weiß angezeigt wird. - wo ändere ich das?

                                      UhulaU 1 Antwort Letzte Antwort
                                      0
                                      • Stephan SchleichS Stephan Schleich

                                        @Uhula Kann es sein das der Popup Hintergrund fix auf weiß eingestellt ist?
                                        Ich habe eine View mit schwarzen Hintergrund die lediglich im Popup weiß angezeigt wird. - wo ändere ich das?

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

                                        @Stephan-Schleich Jein. Der Popup-Hintergrund passt sich schon an den Hintergrund an, aber hier wird derjenige angenommen, der im mdui-content gesetzt ist (ich gehe mal davon aus, dass dein Popup im mdui_card ist). Also in der Farb-Konfiguration im abar mdio-config Widget der Farbwert aus "content_color":"#xxxxxx". Dem card-/content-view direkt über die view-Eigenschaften zugewiesene Farben hingegen haben keine Bedeutung (Grund: Das kann ich im CSS nicht je card unterscheiden)

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

                                        1 Antwort Letzte Antwort
                                        1
                                        • D Offline
                                          D Offline
                                          der-eine
                                          schrieb am zuletzt editiert von der-eine
                                          #203

                                          @Uhula hast Du Dir schon mal diese beiden Adapter angesehen? Zwecks gegebenen Anlass...

                                          Nina (Notfall-Informations- und Nachrichten-App):
                                          https://github.com/TA2k/ioBroker.nina

                                          Coronavirus Statistics:
                                          https://github.com/iobroker-community-adapters/ioBroker.coronavirus-statistics

                                          Evtl auch interessant um mit Deinen Skripten aufgewertet zu werden? :man-shrugging:

                                          UhulaU 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

                                          731

                                          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