Navigation

    Logo
    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unread
    • Categories
    • Unreplied
    • Popular
    • GitHub
    • Docu
    • Hilfe
    1. Home
    2. MarshmallowsLike

    NEWS

    • Neuer Blog: Fotos und Eindrücke aus Solingen

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

    • ioBroker goes Matter ... Matter Adapter in Stable

    M
    • Profile
    • Following 0
    • Followers 0
    • Topics 1
    • Posts 9
    • Best 0
    • Groups 1

    MarshmallowsLike

    @MarshmallowsLike

    Starter

    0
    Reputation
    2
    Profile views
    9
    Posts
    0
    Followers
    0
    Following
    Joined Last Online

    MarshmallowsLike Follow
    Starter

    Latest posts made by MarshmallowsLike

    • RE: Adapter Hyundai (Bluelink) oder KIA (UVO)

      also irgendwie haut der Adapter in teilen bei dem ioniq 5 nicht so wirklich hin.

      Eine Aktualisierung über Force_refresh_from_car oder force_login kann bis zu 30 sek oder länger dauern. bei der Bluelink app geht das hintereinander weg, ohne das man großartig warten muss. Ist ja an sich nicht sooo tragisch, jedoch kommt des öfteren einen Errorcount, weil man angeblich zwei abfragen startet - was nicht der fall ist.
      Dann funktioniert die Lenkradheizung irgendwie nicht oder nicht mehr? Ich war der Meinung, es hatte mal funktioniert. Einige Optionen fehlen -> Außenspiegel und Heckscheibenheizung.

      eig. find ich das recht smart über einen tablet an der wand eben das auto anzuheizen, ohne ständig das handy rausholen zu müssen und anschließend ein feedback zu bekommen, was jetzt genau an. vllt teste ich nochmal die stable version. ggf. läuft die ja besser.

      posted in Tester
      M
      MarshmallowsLike
    • RE: Adapter Hyundai (Bluelink) oder KIA (UVO)

      @ilovegym ja das verstehe ich. danke.

      aber außenspiegel/Heckscheibe geht nicht? wert 0 ist Lenkrad, 1 scheint nur heizung und defrost ist frontscheibe

      posted in Tester
      M
      MarshmallowsLike
    • RE: Adapter Hyundai (Bluelink) oder KIA (UVO)

      @ilovegym

      hmm okay, funktioniert bei mir nicht oder geht der wert über 1 hinaus?

      posted in Tester
      M
      MarshmallowsLike
    • RE: Adapter Hyundai (Bluelink) oder KIA (UVO)

      Moin,

      ich fahre einen Ioniq 5 und nutzen den Adapter in Version 3.1.0.
      Unter controls finde ich z.b. nicht das set für Lenkradheizung, Außenspiegel/Heckscheibenheizung.

      Ist defrost Frontscheibenheizung?
      und was genau macht heating?

      posted in Tester
      M
      MarshmallowsLike
    • RE: CSS HTML Widget Kalender design

      @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

      posted in Visualisierung
      M
      MarshmallowsLike
    • RE: CSS HTML Widget Kalender design

      @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

      posted in Visualisierung
      M
      MarshmallowsLike
    • RE: CSS HTML Widget Kalender design

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

      posted in Visualisierung
      M
      MarshmallowsLike
    • RE: CSS HTML Widget Kalender design

      @samson71

      danke dir!

      posted in Visualisierung
      M
      MarshmallowsLike
    • CSS HTML Widget Kalender design

      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

      posted in Visualisierung
      M
      MarshmallowsLike
    Community
    Impressum | Datenschutz-Bestimmungen | Nutzungsbedingungen
    The ioBroker Community 2014-2023
    logo