Navigation

    Logo
    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unread
    • Categories
    • Unreplied
    • Popular
    • GitHub
    • Docu
    • Hilfe
    1. Home
    2. Deutsch
    3. Visualisierung
    4. CSS HTML Widget Kalender design

    NEWS

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

    • ioBroker goes Matter ... Matter Adapter in Stable

    • Monatsrückblick - April 2025

    CSS HTML Widget Kalender design

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

      Hey zusammen,

      falls hier nicht gewünscht, bitte verschieben. ich wusste nicht so recht, wo ich den Thread hinpacken soll..

      Ich probiere mich mit VIS 2 aus und wollte einen Kalender im Apple Design erstellen. Ich bin schon recht weit. Die Daten hole ich mir über ICAL, zerhacke das ganze mit Blockly und lasse mir die gewünschten Ergebnisse in custom Datenpunkte bereitstellen.

      Jedoch habe ich so gut wie keine Ahnung von HTML bzw. CSS und wollte fragen, ob mir da jemand ggf. das Widget bauen bzw. verbessern kann. Ich tu mich relativ schwer damit... leider. Wäre dafür echt dankbar.

      Ich teile mal meinen bisherigen Code und die Bilder dazu.
      Das "Montag" in der Farbe gelb und die "13", so wie der transparente Hintergrund sind derzeit in der VIS 2 extra positioniert. Außerdem Es fehlt ein weiteres "Ereignis" - es müssten 3 sein.
      Sollte der Termin keinen Wert/Text für "location" oder "time" haben, wird dies ohne Wert/Text übermittelt und das "Ereignis" wird auf die sichtbaren Inhalte reduziert. Ziel ist es, wenn aus dem DP ein leerer Wert/Text in "event" gepackt wird, dass somit das Ereignis am Montag komplett ausgeblendet wird und nur noch das obere ein Ereignis verfügbar ist.
      Im gesamten Code gibt es wahrscheinlich auch unnötige Punkte oder Punkte die nicht funktionieren und vllt kann man das ja noch komplett anders erstellen?

      ich hab mein bestes gegeben 🙂

      HTML Widget:

      <!DOCTYPE html>
      <html lang="de">
      <head>
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <title>Kalender Widget</title>
         <style>
             .widget {
                 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
             }
             .day {
                 display: flex;
                 flex-direction: column;
                 gap: 1px;
                 padding: 5px 15px;
             }
             .day .header {
                 font-size: 1.5rem;
                 font-weight: bold;
                 color: #aaa;
                 text-align: left;
             }
             .event {
                 background-color: rgba(58, 21, 33, 0.6);
                 border-radius: 8px;
                 padding: 5px;
                 color: white;
                 font-size: 0.9rem;
                 display: flex;
                 flex-direction: row; /* Zeilenlayout für Balken und Inhalte */
                 gap: 10px; /* Abstand zwischen Balken und Text */
                 width: 250px;
             }
             .event.hidden {
                 display: none;
             }
             .event .bar {
                 background-color: rgba(255, 0, 114, 1); /* Magentafarbener Balken */
                 width: 5px;
                 height: auto; /* Automatische Höhe */
                 min-height: 5px; /* Mindesthöhe, damit der Balken sichtbar ist */
                 border-radius: 3px; /* Optional: Abgerundete Ecken */
             }
             .event .content {
                 display: flex;
                 flex-direction: column;
                 gap: 0px; /* Abstand zwischen Titel, Ort und Zeit */
             }
             .event .title {
                 color: rgba(255, 00, 114, 1);
                 font-weight: bold;
                 font-size: 1.2rem;
                 margin: 0px;
             }
             .event .location {
                 font-size: 0.85rem;
                 color: #e6005c;
             }
             .event .time {
                 font-size: 0.85rem;
                 color: #e6005c;
             }
             .hidden {
                 display: none;
             }
         </style>
         <script>
             document.addEventListener("DOMContentLoaded", function () {
                 // Alle Event-Elemente verarbeiten
                 const events = document.querySelectorAll(".event");
                 events.forEach(eventElement => {
                     const locationElement = eventElement.querySelector(".location");
                     const timeElement = eventElement.querySelector(".time");
      
                     // Beispiel: Wenn Ort leer ist, verstecke die Zeile für den Ort
                     const locationText = locationElement.textContent.trim();
                     if (!locationText) {
                         locationElement.classList.add("hidden"); // Versteckt den Ort
                     }
      
                     // Wenn sowohl der Ort als auch die Zeit fehlen, verstecke das gesamte Event
                     const timeText = timeElement.textContent.trim();
                     if (!locationText && !timeText) {
                         eventElement.classList.add("hidden"); // Versteckt das gesamte Ereignis
                     }
      
                     // Dynamisches Verkleinern des Events basierend auf sichtbaren Inhalten
                     const contentElements = eventElement.querySelectorAll(".content > div");
                     let visibleCount = 0;
                     contentElements.forEach(contentElement => {
                         if (!contentElement.classList.contains("hidden")) {
                             visibleCount++;
                         }
                     });
      
                     // Passe die Höhe dynamisch an
                     const barElement = eventElement.querySelector(".bar");
                     barElement.style.height = ${visibleCount * 20 + 20}px; // Dynamische Höhe basierend auf Anzahl der sichtbaren Elemente
                 });
             });
         </script>
      </head>
      <body>
         <div id="widget1" class="widget">
      
             <div class="day">
                 <div class="header">Datenpunkt 1, Datenpunkt 2</div>
      
                 <div class="event">
                     <div class="bar"></div> 
                     <div class="content">
                         <div class="title">Datenpunkt 3</div>
                         <div class="location">Datenpunkt 4</div>
                         <div class="time">Datenpunkt 5</div>
                     </div>
                 </div>
             </div>
      
             <!-- Zweites Ereignis -->
             <div class="day">
                  <div class="header">Datenpunkt 1, Datenpunkt 2</div>
                 <div class="event">
                     <div class="bar"></div>
                     <div class="content">
                         <div class="title">Datenpunkt 3</div>
                         <div class="location">Datenpunkt 4</div>
                         <div class="time">Datenpunkt 5</div>
                     </div>
                 </div>
             </div>
         </div>
      </body>
      </html>
      


      Widget:
      HTML Widget.png

      Apple Widget:
      Bildschirmfoto 2025-01-12 um 15.56.46.jpeg.png

      Samson71 OliverIO 2 Replies Last reply Reply Quote 0
      • Samson71
        Samson71 Global Moderator @MarshmallowsLike last edited by

        @marshmallowslike

        ich wusste nicht so recht, wo ich den Thread hinpacken soll..

        Ich habe das mal in "Visualisierung" verschoben. Geht ja um VIS-2 bzw. eine Darstellung.

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

          @marshmallowslike

          Ich habe mal ein Video gesehen wo eine ki eine Webseite nur auf Basis eines Screenshot nachgebaut hat.
          Evtl wäre das eine Möglichkeit?
          Du kannst mal die üblichen verdächtigen wie openai perplexity Claude Gemini durchprobieren

          M 1 Reply Last reply Reply Quote 0
          • M
            MarshmallowsLike @Samson71 last edited by

            @samson71

            danke dir!

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

              @oliverio ich hab den code anfänglich mit ChatGPT erstellt und dann teils selber bearbeitet.
              Nur führt das leider nicht zu dem Gewünschtem Ergebnis.

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

                @marshmallowslike

                Dann zeig was du hast.
                Sag wo das detailproblem liegt.
                Stell sources zur Verfügung, das man möglichst einfach helfen kann.
                Oben sehe ich eine komplette Webseite, das wohl nicht direkt aus vis stammt.

                Dann was ist die Datengrundlage?
                Wie sehen beispielhaften aus die dann dynamisch gefüllt werden sollen?
                Wie ist das Ziel Widget?
                Das html Widget?

                M OliverIO 2 Replies Last reply Reply Quote 0
                • M
                  MarshmallowsLike @OliverIO last edited by MarshmallowsLike

                  @oliverio habe doch oben im Spoiler den kompletten Code gepostet und geschrieben wie ich es haben möchte.

                  wenn du den code in vis ins html kopierst, siehste wie es aktuell ist.

                  ich stelle hier mal ein weiteren code zur Verfügung. Bei dem passen die Zeilenabstände zwischen den texten nicht. das ist das hauptproblem bei dem html code.

                  <!DOCTYPE html>
                  <html lang="en">
                  <head>
                   <meta charset="UTF-8">
                   <meta name="viewport" content="width=device-width, initial-scale=1.0">
                   <title>Event Schedule</title>
                   <style>
                     body {
                       background-color: #1b2b44; /* Dark blue background */
                       color: white;
                       font-family: Arial, sans-serif;
                       margin: 0;
                       padding: 0;
                       display: flex;
                       justify-content: center;
                       align-items: center;
                       height: 100vh;
                     }
                  
                     .container {
                       background-color: #274264; /* Slightly lighter blue */
                       border-radius: 10px;
                       padding: 20px;
                       width: 700px;
                       display: flex;
                       box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
                     }
                  
                     .left-panel {
                       margin-left: 20px;
                     }
                  
                     .day {
                       font-size: 24px;
                       color: #d4ff00; /* Lime green for the day */
                     }
                  
                     .date {
                       font-size: 48px;
                       color: #ff009d; /* Pink for the date */
                     }
                  
                     .right-panel {
                       flex-grow: 1;
                       margin-left: 20px;
                     }
                  
                     .event-section {
                       margin-bottom: 20px;
                     }
                  
                     .event-day {
                       font-size: 25px;
                       color: #d1d8e0; /* Light gray */
                     }
                  
                     .event {
                       background-color: #3a4960; /* Darker blue for event background */
                       border-left: 4px solid #ff009d; /* Pink border */
                       border-radius: 5px;
                  
                      }
                  
                     .event-title {
                       font-weight: bold;
                      font-size: 18px;
                       color: #ff009d; /* Pink for the title */
                     margin-left: 10px;
                     margin-bottom: 1px; 
                     }
                  
                     .event-location {
                       font-size: 15px;
                     margin-left: 10px;
                      margin-bottom: 1px; 
                     }
                  
                     .event-time {
                       font-size: 15px;
                       color: #d1d8e0; /* Light gray for time */
                   	margin-left: 10px;
                     
                     }
                   </style>
                  </head>
                  <body>
                   <div class="container">
                     <div class="left-panel">
                       <div class="day">Dienstag</div>
                       <div class="date">14</div>
                       <div class="event-section">
                         <div class="event-day">Mittwoch, 15.01.2025</div>
                         <div class="event">
                           <p class="event-title">test</p>
                           <p class="event-location">Deutschland</p>
                           <p class="event-time">08:00-09:00</p>
                         </div>
                       </div>
                     </div>
                     <div class="right-panel">
                       <div class="event-section">
                         <div class="event-day">Mittwoch, 15.01.2025</div>
                         <div class="event">
                           <p class="event-title">test</p>
                           <p class="event-location">Deutschland</p>
                           <p class="event-time">08:00-09:00</p>
                         </div>
                  
                         <div class="event-day">Montag, 20.01.2025</div>
                         <div class="event">
                           <p class="event-title">Test</p>
                           <p class="event-location">Göttingen</p>
                           <p class="event-time">07:45-08:45</p>
                         </div>
                       </div>
                     </div>
                   </div>
                  </body>
                  </html>
                  

                  Unbenannt-1.png

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

                    @oliverio sagte in CSS HTML Widget Kalender design:

                    Oben sehe ich eine komplette Webseite, das wohl nicht direkt aus vis stammt.

                    du darfst kein html und body tag da drin haben
                    das darf es in einer seite nur einmal geben

                    die großen zeilenabstände werden durch den margin erzeugt, den der browser einem p element hinzufügt
                    sehen kannst du das über die webdeveloper tools die mit f12 im browser zu öffnen sind (hier chrome)
                    8286f88c-5d31-46e5-bb2f-009c2e7b8d5b-image.png

                    entfernen kannst diese bspw in dem du der klasse event-location und event.time noch
                    die anweisung

                    margin-top:0px;
                    

                    hinzufügst
                    besser wäre es allerdings ein div-element zu nehmen. da sind nicht so viele vorbelegungen des browsers drauf

                    Vorbelegung des Browser für P Element
                    7afa0bec-9e54-4994-b7cd-cff96b4553c3-image.png
                    Vorbelegung des Browser für DIV Element
                    e565a1a8-6a9d-4868-bce8-06cf2b914e49-image.png
                    warum machst du hier linkes panel/rechtes panel?
                    das erfordert wahrscheinlich später für zuviel logik das aufzuteilen.
                    schau dir lieber mal die layoutoptionen einer flexbox an
                    da macht dir der browser das automatisch, bzw er füllt dann zeilen mit einem layoutblock solange auf bis die breite erreicht ist und bricht dann um. ein layoutblock wäre dann ein termin
                    so kann man flexibel dann nur durch bestimmung der breite 1-reihig,2-reihig,x-reihig formatieren, ohne noch irgendwas anderes anzugeben. flexbox ist für responsive layout das meist verwendete element
                    https://developer.mozilla.org/de/docs/Learn_web_development/Core/CSS_layout/Flexbox

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

                      @oliverio ich hab jetzt mal versucht mit grid das ganze durchzuführen. allerdings kriege ich mit display grid und dessen formatierung eine fehlerhafte darstellung in css.. wird vermutlich nicht unterstützt?

                      gerne einmal ausprobieren, Code im Spoiler

                      
                      <!DOCTYPE html>
                      <html lang="en">
                      <head>
                       <meta charset="UTF-8">
                       <meta name="viewport" content="width=device-width, initial-scale=1.0">
                       <title>Grid Layout</title>
                      </head>
                      <body>
                      
                       <style>
                      
                       body {
                          
                       }
                      
                       .grid-container {
                           display: grid;
                           grid-template-columns: 250px 250px;
                           grid-template-rows: 100px 100px;
                           height: 200px; /* Feste Höhe */
                           width: 500px; /* Feste Höhe */
                           overflow: hidden;
                           grid-template-areas: 
                           "a c" 
                           "b c"; 
                           background-color: rgba(30, 30, 30, 1);
                           box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.2);
                           border-radius: 6px;
                           
                       }
                      
                       .item-1, .item-2, .item-3, .item-4, .item-5, .item-6 {
                         font-family: Arial, sans-serif;
                         font-size: 14px;
                         display: flex;
                         font-family: '.SFNSDisplay-Regular', sans-serif;
                         border: 1px solid;
                         color: red;
                         
                       }
                      
                       .item-1 { grid-area: a; }
                       .item-2 { grid-area: b; }
                       .item-3 { grid-area: c; }
                      
                             .header {
                                 padding: 15px 15px;
                                 font-size: 1rem;
                         	        font-weight: bold;
                                 color: #aaa;
                             }
                      
                              .header2 {
                                 gap: 0px;
                                 padding: 5px 0px;
                                 //margin-top: px;
                                 font-size: 1rem;
                         	        font-weight: bold;
                                 color: #aaa;
                             }
                      
                             .header3 {
                                 gap: 0px;
                                 padding: 5px 0px;
                                 font-size: 1rem;
                         	        font-weight: bold;
                                 color: #aaa;
                             }
                      
                             .header4 {
                                 gap: 0px;
                                 padding: 10px 15px;
                                 font-size: 1rem;
                         	        font-weight: bold;
                                 color: #aaa;
                             }
                           
                             .event {
                                 background-color: rgba(58, 21, 33, 0.6);
                                 border-radius: 8px;
                                 padding: 5px;
                                 display: flex;
                                 flex-direction: row; /* Zeilenlayout für Balken und Inhalte */
                                 gap:  10px; /* Abstand zwischen Balken und Text */
                                 width: 200px;
                             }
                      
                      
                             .event .bar {
                                 background-color: rgba(218, 56, 83, 1);
                                 width: 5px;
                                 height: auto; /* Automatische Höhe */
                                 min-height: 5px; /* Mindesthöhe, damit der Balken sichtbar ist */
                                 border-radius: 3px; /* Optional: Abgerundete Ecken */
                             }
                      
                             .event .content {
                                 flex-direction: column;
                                 gap: 0px; /* Abstand zwischen Titel, Ort und Zeit */
                             }
                      
                             .event .title {
                                 color: rgba(218, 56, 83, 1);
                                 font-weight: bold;
                                 font-size: 1rem;
                                 margin: 0px;
                             }
                      
                             .event .location {
                                 font-size: 0.85rem;
                                 color: rgba(218, 56, 83, 0.68);
                             }
                      
                             .event .time {
                                 font-size: 0.85rem;
                                 color: rgba(218, 56, 83, 0.68);
                             }
                      
                             .eventDay {
                          		  font-size: 1rem;
                          		  color: rgba(182, 69, 31, 1);
                           		margin-left: 20px;
                           		margin-bottom: 25px;
                           		font-weight: bold;
                               padding: 15px 0px;
                        		}
                        		.eventDayDate {
                          		  font-size: 2.5em;
                          		  color: rgba(235, 235, 235, 1);
                           		font-weight: 100;
                        		}      
                      
                       </style>
                       <div class="grid-container">
                          <div class="item-1">
                           	<div class="eventDay">MITTWOCH
                          	<div class="eventDayDate">15</div>
                           </div>
                           </div>     
                              <div class="item-4">
                              	<div class="header4">4. Ereignis
                          		    <div class="event">
                                     <div class="bar"></div>
                                       <div class="content">
                                         <div class="title">Ereignis</div>
                                         <div class="location">Ort</div>
                                         <div class="time">time</div>
                                      </div>
                                 </div>
                                </div>
                             </div>
                      
                             <div class="item-3">
                              	<div class="header">1. Ereignis    		   
                                 <div class="event">
                                     <div class="bar"></div>
                                       <div class="content">
                                         <div class="title">Ereignis</div>
                                         <div class="location">Ort</div>
                                         <div class="time">time</div>
                                      </div>
                                  </div>
                                         <div class="header2">2. Ereignis
                                           <div class="event">
                                               <div class="bar"></div>
                                                 <div class="content">
                                                   <div class="title">Ereignis</div>
                                                   <div class="location">Ort</div>
                                                   <div class="time">time</div>
                                               </div>
                                           </div>
                                             <div class="header3">3. Ereignis
                                               <div class="event">
                                                   <div class="bar"></div>
                                                     <div class="content">
                                                       <div class="title">Ereignis</div>
                                                       <div class="location">Ort</div>
                                                       <div class="time">time</div>
                                                   </div>
                                               </div>
                                             </div>
                                         </div>
                                </div>
                             </div>
                       </div>
                      
                      <script>
                       // Funktion, um die Header basierend auf dem Inhalt der Titel zu prüfen
                       document.addEventListener("DOMContentLoaded", function() {
                         const headers = document.querySelectorAll(".header, .header2, .header3, .header4");
                         
                         headers.forEach(header => {
                           const title = header.querySelector(".title");
                           if (!title || title.textContent.trim() === "") {
                             // Wenn keine .title oder der Text leer ist, blende den Header aus
                             header.style.display = "none";
                           }
                         });
                       });
                      </script>
                      
                      </body>
                      </html>
                      

                      VIS 2 - HTML Widget
                      Screenshot_2.png

                      Darstellung internet:
                      Screenshot_3.png

                      OliverIO 2 Replies Last reply Reply Quote 0
                      • OliverIO
                        OliverIO @MarshmallowsLike last edited by OliverIO

                        @marshmallowslike

                        ich meinte flex-box nicht irgendwas mit grid

                        hier mein Vorschlag

                        html

                        <div class="eventcal">
                          <div class="day">
                            <div class="bar"></div>
                              <div class="daycontent">
                                <div class="dayheader">
                                  <div class="weekday">
                                    Mittwoch
                                  </div>
                                  <div class="weekdaynumber">
                                    12
                                  </div>
                                </div>
                                
                                <div class="event">
                                  <div class="date">
                                    Mittwoch, 15. Jan.
                                  </div>
                                  <div class="location">
                                    Location
                                  </div>
                                  <div class="time">
                                    12:00-13:00
                                  </div>        
                                </div>
                        
                                <div class="event">
                                  <div class="date">
                                    Mittwoch, 15. Jan.
                                  </div>
                                  <div class="location">
                                    Location
                                  </div>
                                  <div class="time">
                                    12:00-13:00
                                  </div>        
                                </div>
                        
                                <div class="event">
                                  <div class="date">
                                    Mittwoch, 15. Jan.
                                  </div>
                                  <div class="location">
                                    Location
                                  </div>
                                  <div class="time">
                                    12:00-13:00
                                  </div>        
                                </div>    
                            </div>
                          </div>
                        </div>
                        
                        

                        css

                        .eventcal {
                         width: 30em;
                         font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
                         color:white;
                        }
                        .day {  
                         background-color: #1c1c1e;
                         border-radius: 10px;
                         margin: 1em;
                         padding: 1em;
                         padding-left: 0.2em;
                         display: flex;
                         flex-direction: row;
                         max-height:15em;
                        }
                        .dayheader .weekday {
                         color: #a92727;
                         font-weight: bold;
                         font-size: 1.2rem;
                         text-transform: uppercase;
                        }
                        .dayheader .weekdaynumber {
                         color: #fdfdfd;
                         font-size: 2rem;
                        }
                        .event .date {
                         color: #9898a0;
                         font-weight: bold;
                         font-size: 1rem;
                         text-transform: uppercase;
                        }
                        .event {
                         margin: 0.5em 0;
                        }
                        .bar{
                         background-color: rgba(255, 0, 114, 1); /*   width: 5px;
                         height: auto; /* Automatische Höhe */
                         min-width: 0.3em; /* Mindesthöhe, damit der Balken sichtbar ist */
                         border-radius: 3px; /* Optional: Abgerundete Ecken */
                        }
                        .daycontent {
                           padding-left: 0.5em;
                           display: flex;
                           flex-direction: column;
                           flex-wrap: wrap;
                           column-gap: 2em;
                        }
                        

                        52628f43-8c24-41c4-ad99-bd67d2d83c58-image.png

                        https://codepen.io/oweitman/pen/KwPBwGb

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

                          @marshmallowslike sagte in CSS HTML Widget Kalender design:

                          ich hab jetzt mal versucht mit grid das ganze durchzuführen. allerdings kriege ich mit display grid und dessen formatierung eine fehlerhafte darstellung in css.. wird vermutlich nicht unterstützt?

                          CSS-Anweisungen sind immer global.
                          d.h. egal wo sie im html oder in eingebundenen css dateien stehen.
                          die css-anweiungen/klassen wirken immer auf alle elemente entsprechend den css-selektoren

                          wenn nun in vis irgendwas nicht so aussieht wie es woanders aussieht, dann wirken da meist noch andere klassen darauf.
                          in vis gibt es immer wieder mal probleme, weil entwickler ihre css-anweisungen nicht genug kapseln. wer die klassennamen bspw block paragraph absatz oder ähnliche generische anweisungen verwendet, braucht sich dann nicht wundern, wenn sich das mit anderen elementen überschneidet, die ihre elemente ebeneso genannt haben.
                          in vis hast du dann 1 bis viele adapter, die ihr eigenes css mitbringen, dann noch css anweisungen im css reiter, die von den benutzern wild zusammenkopiert werden ohne zu verstehen was das genau macht. meistens klappt es auch, aber manchmal ist die fehlsersuche dann auch schwierig (es gibt da ja auch noch die vererbung von css-anweisungen an die kind elemente)

                          wenn du herausfinden willst, woran es liegt, musst du mit den web developer tools deines browser das anschauen, woher die abweichende anweisung kommt.

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

                          Support us

                          ioBroker
                          Community Adapters
                          Donate

                          960
                          Online

                          31.7k
                          Users

                          79.8k
                          Topics

                          1.3m
                          Posts

                          3
                          11
                          400
                          Loading More Posts
                          • Oldest to Newest
                          • Newest to Oldest
                          • Most Votes
                          Reply
                          • Reply as topic
                          Log in to reply
                          Community
                          Impressum | Datenschutz-Bestimmungen | Nutzungsbedingungen
                          The ioBroker Community 2014-2023
                          logo