Skip to content
  • Home
  • Recent
  • Tags
  • 0 Unread 0
  • Categories
  • Unreplied
  • Popular
  • 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

  • Default (No Skin)
  • No Skin
Collapse
ioBroker Logo

Community Forum

donate donate
  1. ioBroker Community Home
  2. Deutsch
  3. Visualisierung
  4. [Vorlage] MDCSS v2: ioBroker Log in vis anzeigen

NEWS

  • Monatsrückblick Januar/Februar 2026 ist online!
    BluefoxB
    Bluefox
    16
    1
    298

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

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

[Vorlage] MDCSS v2: ioBroker Log in vis anzeigen

Scheduled Pinned Locked Moved Visualisierung
vismaterial uimaterial csshow-to
37 Posts 11 Posters 6.7k Views 16 Watching
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • GlasfaserG Glasfaser

    @Uhula

    Views funktionieren nicht im Spoiler !

    Edit : Danke ;)

    UhulaU Offline
    UhulaU Offline
    Uhula
    wrote on last edited by
    #3

    @Glasfaser Habe ich auch gerade gesehen, nun als txt-File.

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

    1 Reply Last reply
    1
    • UhulaU Uhula
      Um ein Feedback zu erhalten wäre es schön, wenn jeder, der diese Vorlagen nutzt, den 1.Beitrag positiv bewertet (Pfeil nach oben oder unten ;-) ). Ich kann dann auch abschätzen, ob sich die weitere Pflege lohnt. Thx!

      Dieses Script dient der Visualisierung des ioBroker-Logs in der vis im Material Design CSS Style als
      table- bzw. list-Anzeige. Dazu wird ein onLog()-Handler instanziiert, welcher bis zu MAX_LOG_CACHE
      Log-Einträge zwischenspeichert und daraus dann alle BUILD_TABLE_TIMER Sekunden bis zu MAX_LOG_FOLDER
      Log-Ordner erzeugt. In jedem Log-Ordner befindet sich ein table- und list-HTML State, welcher direkt in
      der vis angezeigt werden kann (jeweils im basic-string (unescaped) Widget). Je Log-Ordner kann ein filter
      als string (Bsp:'error') oder als RegExp (Bsp:'/warn|error/') festgelegt werden, welcher beim Aufbau der
      table-/list-HTML States berücksichtigt wird. Weiterhin können über clearPressed die table-/list-States
      gelöscht werden, beim nächsten Build werden sie dann nur solche Log-Eintäge berücksichtigen, die später hinzu kamen.

      Danke an @Mic für seinen Beitrag Vorlage JS Log, dort habe ich einige Ideen abgegriffen.

      Wichtig! Der Javascript-Adapter muss mindestens Version 4.3.0 haben, da onLog() erst ab dann verfügbar ist.

      GIF 05.03.2020 22-42-03.gif GIF 05.03.2020 22-59-35.gif

      Installation

      Einfach als serverseitiges Script installieren und starten-5 Sek warten-stoppen-starten. Beim 1.Start werden
      die notwendigen States unter STATE_PATH = '0_userdata.0.mdui.logIOBroker.' erzeugt. Erst beim 2.Start
      instanziiert das Script die Event-Handler und läuft dann.

      Konfiguration

      Optional im constructor die const anpassen, wie z.B. die IGNORE_LIST
      Optional Anpassung der tmpTable und tmpList.
      Bei Anpassung der tmpTable und tmpList auch ohne MD CSS Style nutzbar.

      States

      Unter dem STATE_PATH werden die folgenden States erzeugt:
      version : Script-Version, wird verwendet um Script-Updates zu erkennen
      logCache : Cache der Log-Einträge als JSON
      logCount : Anzahl der Log-Einträge in logCache
      updatePressed : auf true setzen, wenn ein table/list update außerhalb des Intervals erfolgen soll

      Weiterhin werden MAX_LOG_FOLDER Unterordner im STATE_PATH erzeugt (N=0-9):

      LogN.table : enthält die table-HTML für ein basic-string (unescaped) Widget
      LogN.list : enthält die list-HTML für ein basic-string (unescaped) Widget
      LogN.count : Anzahl der Log-Zeilen
      LogN.filter : Filter, der auch die logCache angewendet wurde im .table/.list zu erzeugen (siehe Filter)
      LogN.lastUpdate : Timestamp des letzten Updates
      LogN.lastClear : Timestamp des letzten manuellen "clearPressed", d.h. anschließend werden nur
      noch neuere Einträge aus der logCache berücksichtigt
      LogN.clearPressed: auf true setzen, um die .table/.list zu löschen

      Filter

      In den filter-States können sowohl strings (Bsp:'error') als auch RegExp-Strings (Bsp:'/warn|error/')
      hinterlegt werden. RegExp-Strings werden an den einschließenden '/' erkannt. Über den ':' kann der Anfang
      eines Feldes mit in den Filter einbezogen werden.
      Beispiele:
      'error' (string) zeigt alle Zeilen an, in denen 'error' in irgendeinem Feld vorkommt
      ':error:' (string) zeigt alle Zeilen an, welche den Typ 'error' besitzen (dito für: error, warn, info, silly, debug)
      '/error|warn/' (RegExp) zeigt alle Zeilen an, in denen 'error' oder 'warn' in irgendeinem Feld vorkommen
      '/:error:|:warn:/' (RegExp) zeigt alle Zeilen an, welche dem Typ 'error' oder 'warn' entsprechen
      'tr-064' (string) zeigt alle Zeilen an, in denen 'tr-064' in irgendeinem Feld vorkommt
      ':tr-064' (string) zeigt alle Zeilen an, in welchen ein Feld mit 'tr-064' beginnt, z.B. als Adapterfilter

      :arrow_forward: Beschreibung (Github)
      :arrow_forward: Datei-Download (Github)

      sigi234S Online
      sigi234S Online
      sigi234
      Forum Testing Most Active
      wrote on last edited by
      #4

      @Uhula

      Screenshot (1921).png

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

      UhulaU 1 Reply Last reply
      0
      • sigi234S sigi234

        @Uhula

        Screenshot (1921).png

        UhulaU Offline
        UhulaU Offline
        Uhula
        wrote on last edited by
        #5

        @sigi234 Du warst zu schnell, Script im Spoiler ging nicht, haut diese {1} rein, warum auch immer. Nun als txt-File.

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

        sigi234S Dominik F.D 2 Replies Last reply
        0
        • UhulaU Uhula

          @sigi234 Du warst zu schnell, Script im Spoiler ging nicht, haut diese {1} rein, warum auch immer. Nun als txt-File.

          sigi234S Online
          sigi234S Online
          sigi234
          Forum Testing Most Active
          wrote on last edited by sigi234
          #6

          @Uhula sagte in [Vorlage] MDCSS v2: ioBroker Log in vis anzeigen:

          @sigi234 Du warst zu schnell, Script im Spoiler ging nicht, haut diese {1} rein, warum auch immer. Nun als txt-File.

          Ok, funktioniert. Mir kommen die 2 aber gleich vor.

          Wie bekomme ich den Dark Hintergrund?

          Erledigt.

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

          1 Reply Last reply
          0
          • UhulaU Uhula
            Um ein Feedback zu erhalten wäre es schön, wenn jeder, der diese Vorlagen nutzt, den 1.Beitrag positiv bewertet (Pfeil nach oben oder unten ;-) ). Ich kann dann auch abschätzen, ob sich die weitere Pflege lohnt. Thx!

            Dieses Script dient der Visualisierung des ioBroker-Logs in der vis im Material Design CSS Style als
            table- bzw. list-Anzeige. Dazu wird ein onLog()-Handler instanziiert, welcher bis zu MAX_LOG_CACHE
            Log-Einträge zwischenspeichert und daraus dann alle BUILD_TABLE_TIMER Sekunden bis zu MAX_LOG_FOLDER
            Log-Ordner erzeugt. In jedem Log-Ordner befindet sich ein table- und list-HTML State, welcher direkt in
            der vis angezeigt werden kann (jeweils im basic-string (unescaped) Widget). Je Log-Ordner kann ein filter
            als string (Bsp:'error') oder als RegExp (Bsp:'/warn|error/') festgelegt werden, welcher beim Aufbau der
            table-/list-HTML States berücksichtigt wird. Weiterhin können über clearPressed die table-/list-States
            gelöscht werden, beim nächsten Build werden sie dann nur solche Log-Eintäge berücksichtigen, die später hinzu kamen.

            Danke an @Mic für seinen Beitrag Vorlage JS Log, dort habe ich einige Ideen abgegriffen.

            Wichtig! Der Javascript-Adapter muss mindestens Version 4.3.0 haben, da onLog() erst ab dann verfügbar ist.

            GIF 05.03.2020 22-42-03.gif GIF 05.03.2020 22-59-35.gif

            Installation

            Einfach als serverseitiges Script installieren und starten-5 Sek warten-stoppen-starten. Beim 1.Start werden
            die notwendigen States unter STATE_PATH = '0_userdata.0.mdui.logIOBroker.' erzeugt. Erst beim 2.Start
            instanziiert das Script die Event-Handler und läuft dann.

            Konfiguration

            Optional im constructor die const anpassen, wie z.B. die IGNORE_LIST
            Optional Anpassung der tmpTable und tmpList.
            Bei Anpassung der tmpTable und tmpList auch ohne MD CSS Style nutzbar.

            States

            Unter dem STATE_PATH werden die folgenden States erzeugt:
            version : Script-Version, wird verwendet um Script-Updates zu erkennen
            logCache : Cache der Log-Einträge als JSON
            logCount : Anzahl der Log-Einträge in logCache
            updatePressed : auf true setzen, wenn ein table/list update außerhalb des Intervals erfolgen soll

            Weiterhin werden MAX_LOG_FOLDER Unterordner im STATE_PATH erzeugt (N=0-9):

            LogN.table : enthält die table-HTML für ein basic-string (unescaped) Widget
            LogN.list : enthält die list-HTML für ein basic-string (unescaped) Widget
            LogN.count : Anzahl der Log-Zeilen
            LogN.filter : Filter, der auch die logCache angewendet wurde im .table/.list zu erzeugen (siehe Filter)
            LogN.lastUpdate : Timestamp des letzten Updates
            LogN.lastClear : Timestamp des letzten manuellen "clearPressed", d.h. anschließend werden nur
            noch neuere Einträge aus der logCache berücksichtigt
            LogN.clearPressed: auf true setzen, um die .table/.list zu löschen

            Filter

            In den filter-States können sowohl strings (Bsp:'error') als auch RegExp-Strings (Bsp:'/warn|error/')
            hinterlegt werden. RegExp-Strings werden an den einschließenden '/' erkannt. Über den ':' kann der Anfang
            eines Feldes mit in den Filter einbezogen werden.
            Beispiele:
            'error' (string) zeigt alle Zeilen an, in denen 'error' in irgendeinem Feld vorkommt
            ':error:' (string) zeigt alle Zeilen an, welche den Typ 'error' besitzen (dito für: error, warn, info, silly, debug)
            '/error|warn/' (RegExp) zeigt alle Zeilen an, in denen 'error' oder 'warn' in irgendeinem Feld vorkommen
            '/:error:|:warn:/' (RegExp) zeigt alle Zeilen an, welche dem Typ 'error' oder 'warn' entsprechen
            'tr-064' (string) zeigt alle Zeilen an, in denen 'tr-064' in irgendeinem Feld vorkommt
            ':tr-064' (string) zeigt alle Zeilen an, in welchen ein Feld mit 'tr-064' beginnt, z.B. als Adapterfilter

            :arrow_forward: Beschreibung (Github)
            :arrow_forward: Datei-Download (Github)

            MicM Offline
            MicM Offline
            Mic
            Developer
            wrote on last edited by
            #7

            @Uhula
            Schöne Sache, ich habe es hier ergänzt: https://forum.iobroker.net/topic/29461/aufruf-welche-guten-javascripts-setzt-ihr-ein

            1 Reply Last reply
            1
            • UhulaU Uhula

              @sigi234 Du warst zu schnell, Script im Spoiler ging nicht, haut diese {1} rein, warum auch immer. Nun als txt-File.

              Dominik F.D Offline
              Dominik F.D Offline
              Dominik F.
              wrote on last edited by
              #8

              @Uhula

              Beim importieren der View bekomme ich folgenden Fehler:
              Unbenannt.PNG

              ich habs genauso gemacht wie bei deiner Vorlage für den TR064 Adapter nur hier kommt leider der Fehler

              UhulaU 1 Reply Last reply
              0
              • Dominik F.D Dominik F.

                @Uhula

                Beim importieren der View bekomme ich folgenden Fehler:
                Unbenannt.PNG

                ich habs genauso gemacht wie bei deiner Vorlage für den TR064 Adapter nur hier kommt leider der Fehler

                UhulaU Offline
                UhulaU Offline
                Uhula
                wrote on last edited by
                #9

                @Dominik-F Bei welcher View hast du die Probleme? MduiLogIOBroker_Listview.json oder MduiLogIOBroker_Tableview.txt
                Hast du mal versucht den Inhalt der Dateien direkt im Github mit STRG+A und STRG+C zu kopieren und über die Zwischenablage als View zu importieren?

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

                Dominik F.D 1 Reply Last reply
                0
                • UhulaU Uhula

                  @Dominik-F Bei welcher View hast du die Probleme? MduiLogIOBroker_Listview.json oder MduiLogIOBroker_Tableview.txt
                  Hast du mal versucht den Inhalt der Dateien direkt im Github mit STRG+A und STRG+C zu kopieren und über die Zwischenablage als View zu importieren?

                  Dominik F.D Offline
                  Dominik F.D Offline
                  Dominik F.
                  wrote on last edited by
                  #10

                  @Uhula

                  Ich bekomme bei beiden den gleichen Fehler. Ich habs genauso gemacht, habe mir den Inhalt als raw anzeigen lassen und mit strg a und strg c alles kopiert und als neue View eingefügt. Genauso hats bei deiner tr064 view geklappt.

                  UhulaU 1 Reply Last reply
                  0
                  • Dominik F.D Dominik F.

                    @Uhula

                    Ich bekomme bei beiden den gleichen Fehler. Ich habs genauso gemacht, habe mir den Inhalt als raw anzeigen lassen und mit strg a und strg c alles kopiert und als neue View eingefügt. Genauso hats bei deiner tr064 view geklappt.

                    UhulaU Offline
                    UhulaU Offline
                    Uhula
                    wrote on last edited by
                    #11

                    @Dominik-F Ich habe eben beide view Dateien (json) noch einmal auf GitHub aktualisiert und anschließend als view importiert, geht nun, hoffentlich.

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

                    Dominik F.D 1 Reply Last reply
                    0
                    • UhulaU Uhula

                      @Dominik-F Ich habe eben beide view Dateien (json) noch einmal auf GitHub aktualisiert und anschließend als view importiert, geht nun, hoffentlich.

                      Dominik F.D Offline
                      Dominik F.D Offline
                      Dominik F.
                      wrote on last edited by
                      #12

                      @Uhula

                      Jetzt funktioniert es. Vielen Dank

                      1 Reply Last reply
                      0
                      • Beliar_666B Offline
                        Beliar_666B Offline
                        Beliar_666
                        wrote on last edited by
                        #13

                        @Uhula kurze Frage:

                        Beim Filter stehen ja einige schon zur Auswahl, also in der Filterauswahl. Wie füge ich dort manuell Sachen hinzu? Z.B. Deconz, oder Javascript?

                        UhulaU 1 Reply Last reply
                        0
                        • Beliar_666B Beliar_666

                          @Uhula kurze Frage:

                          Beim Filter stehen ja einige schon zur Auswahl, also in der Filterauswahl. Wie füge ich dort manuell Sachen hinzu? Z.B. Deconz, oder Javascript?

                          UhulaU Offline
                          UhulaU Offline
                          Uhula
                          wrote on last edited by
                          #14

                          @Beliar_666 Einfach im Filter-Widget eintragen. Unter "Werte" den Filterwert und unter "Texte" den Anzeigewert, immer mit ";" trennen.
                          a9634be4-36ac-41fc-bcf9-0144e1dca470-image.png

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

                          Beliar_666B 1 Reply Last reply
                          1
                          • UhulaU Uhula

                            @Beliar_666 Einfach im Filter-Widget eintragen. Unter "Werte" den Filterwert und unter "Texte" den Anzeigewert, immer mit ";" trennen.
                            a9634be4-36ac-41fc-bcf9-0144e1dca470-image.png

                            Beliar_666B Offline
                            Beliar_666B Offline
                            Beliar_666
                            wrote on last edited by
                            #15

                            @Uhula Danke. Und ich trottel such mir nen Wolf im Script....

                            1 Reply Last reply
                            0
                            • Stephan SchleichS Offline
                              Stephan SchleichS Offline
                              Stephan Schleich
                              wrote on last edited by
                              #16

                              Woran liegt es wenn im VIS Editor alles gut aussieht, aber in der View nicht?
                              Wie stellt man eigentlich auf das Dark Theme wie in den Gif zu sehen um?

                              6828dfcf-1fc4-4ab5-91ad-95524d235d29-image.png

                              UhulaU 1 Reply Last reply
                              0
                              • Stephan SchleichS Stephan Schleich

                                Woran liegt es wenn im VIS Editor alles gut aussieht, aber in der View nicht?
                                Wie stellt man eigentlich auf das Dark Theme wie in den Gif zu sehen um?

                                6828dfcf-1fc4-4ab5-91ad-95524d235d29-image.png

                                UhulaU Offline
                                UhulaU Offline
                                Uhula
                                wrote on last edited by
                                #17

                                @Stephan-Schleich Wenn du dir das MDCSS MD_Demo Projekt ansiehst: Zur Designzeit findest du im view "abar" ein Widget mit CSS Klasse "mdui-config" - dort in der "content" Zeile die Farbe eintragen. Zur Laufzeit im Menü den Punkt "Einstellungen", dort dann "content".
                                Du musst dein Projekt entsprechend anpassen

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

                                1 Reply Last reply
                                1
                                • Stephan SchleichS Offline
                                  Stephan SchleichS Offline
                                  Stephan Schleich
                                  wrote on last edited by
                                  #18

                                  @Uhula achso es geht nur mit deinem Projekt, dann hat sich's schon erledigt, das hab ich mir noch nicht richtig angesehen, hat mich beim ersten ansehen etwas erschlagen ^^

                                  Dominik F.D 1 Reply Last reply
                                  0
                                  • Stephan SchleichS Stephan Schleich

                                    @Uhula achso es geht nur mit deinem Projekt, dann hat sich's schon erledigt, das hab ich mir noch nicht richtig angesehen, hat mich beim ersten ansehen etwas erschlagen ^^

                                    Dominik F.D Offline
                                    Dominik F.D Offline
                                    Dominik F.
                                    wrote on last edited by
                                    #19

                                    @Stephan-Schleich

                                    Nein, das geht mit jedem Projekt. Uhula hat dir nur als Beispiel sein Demoprojekt genannt damit du weißt was du bei deinem dann Einstellen/Übertragen musst

                                    Stephan SchleichS 1 Reply Last reply
                                    0
                                    • Dominik F.D Dominik F.

                                      @Stephan-Schleich

                                      Nein, das geht mit jedem Projekt. Uhula hat dir nur als Beispiel sein Demoprojekt genannt damit du weißt was du bei deinem dann Einstellen/Übertragen musst

                                      Stephan SchleichS Offline
                                      Stephan SchleichS Offline
                                      Stephan Schleich
                                      wrote on last edited by
                                      #20

                                      @Dominik-F Achso, okay, danke werd ich prüfen

                                      1 Reply Last reply
                                      0
                                      • Stephan SchleichS Offline
                                        Stephan SchleichS Offline
                                        Stephan Schleich
                                        wrote on last edited by
                                        #21

                                        Kein Plan was ich in meinem Projekt machen muss, ich pass es nun selber per CSS an. - Sieht auf jeden Fall gut aus

                                        Dominik F.D 1 Reply Last reply
                                        0
                                        • Stephan SchleichS Stephan Schleich

                                          Kein Plan was ich in meinem Projekt machen muss, ich pass es nun selber per CSS an. - Sieht auf jeden Fall gut aus

                                          Dominik F.D Offline
                                          Dominik F.D Offline
                                          Dominik F.
                                          wrote on last edited by
                                          #22

                                          @Stephan-Schleich

                                          Link Text

                                          Ich vermute, dass du das CSS von Uhula bisher nicht nutzt. Das ist die Grundlage damit es nachher so aussieht wie in der gif. Hab dir mal den Link zu Github von seinem Projekt geschickt. Dort steht auch beschrieben was du bei dir wo einfügen musst.

                                          1 Reply Last reply
                                          0
                                          Reply
                                          • Reply as topic
                                          Log in to reply
                                          • Oldest to Newest
                                          • Newest to Oldest
                                          • Most Votes


                                          Support us

                                          ioBroker
                                          Community Adapters
                                          Donate

                                          368

                                          Online

                                          32.7k

                                          Users

                                          82.5k

                                          Topics

                                          1.3m

                                          Posts
                                          Community
                                          Impressum | Datenschutz-Bestimmungen | Nutzungsbedingungen | Einwilligungseinstellungen
                                          ioBroker Community 2014-2025
                                          logo
                                          • Login

                                          • Don't have an account? Register

                                          • Login or register to search.
                                          • First post
                                            Last post
                                          0
                                          • Home
                                          • Recent
                                          • Tags
                                          • Unread 0
                                          • Categories
                                          • Unreplied
                                          • Popular
                                          • GitHub
                                          • Docu
                                          • Hilfe