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. Tester
  4. jarvis v3.0.0 - just another remarkable vis

NEWS

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

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

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

jarvis v3.0.0 - just another remarkable vis

Geplant Angeheftet Gesperrt Verschoben Tester
jarvismaterialmaterial uimaterialdesignvisvisualisierungvisualization
4.5k Beiträge 254 Kommentatoren 2.7m Aufrufe 209 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.
  • S SlipKoRn_DH88

    @mcu
    Das Script habe ich bei mir in der passenden VIS und die Nummern der Widgets auf meine Widgets angepasst. Dann warte ich auf die kommende Anleitung👍

    M Online
    M Online
    MCU
    schrieb am zuletzt editiert von
    #2179

    @slipkorn_dh88 Dann zeig mal Dein Script und Deine VIS-Einstellungen. Vielleicht sind es ja Kleinigkeiten, die nicht passen?

    NUC i7 64GB mit Proxmox ---- Jarvis Infos Aktualisierungen der Doku auf Instagram verfolgen -> mcuiobroker Instagram
    Wenn Euch mein Vorschlag geholfen hat, bitte rechts "^" klicken.

    S 1 Antwort Letzte Antwort
    0
    • M MCU

      @slipkorn_dh88 Dann zeig mal Dein Script und Deine VIS-Einstellungen. Vielleicht sind es ja Kleinigkeiten, die nicht passen?

      S Offline
      S Offline
      SlipKoRn_DH88
      schrieb am zuletzt editiert von
      #2180

      @mcu
      Danke schon einmal für`s drauf schauen

      VIS EG.jpg

      // Initialisiere Konstanten
      /* ======================================================== */
      var debug = false;
       
      var spaceSurroundingMin = 20;
      var spaceSurroundingScreensizeDependent = 20;
      var spaceSurroundingScreensizeDependentFactor = 600;
       
      var widgetNameGrundriss = "#w00025";
      
       
      // Warten bis Element geladen wurde
      /* ======================================================== */
      function waitForElement(parent, elementPath, wid, widgetName, callBack, counter = 0, debug = false)
      {
          if (counter < 10000)
          {
              setTimeout(function ()
              {
                  if (parent.find(elementPath).length > 0)
                  {
                      if (debug) console.log(`[${widgetName} ${wid}] it took ${counter}ms to wait for the element '${elementPath}'`);
                      callBack();
                  } else
                  {
                      if (debug) console.log(`[${widgetName} ${wid}] wait for element '${elementPath}'`);
                      counter++;
                      waitForElement(parent, elementPath, wid, widgetName, callBack, counter, debug);
                  }
              }, 1);
          } else
          {
              console.warn(`[${widgetName} ${wid}] stop waiting after ${counter} retries`);
              callBack();
          }
      }
       
       
      // Erkennen auf welchem Gerät die VIS läuft
      /* ======================================================== */
      function getDevice(debug = false)
      {
          if(window.navigator.userAgent.match(/Mobile/i)
          || window.navigator.userAgent.match(/iPhone/i)
          || window.navigator.userAgent.match(/iPod/i)
          || window.navigator.userAgent.match(/IEMobile/i)
          || window.navigator.userAgent.match(/Windows Phone/i)
          || window.navigator.userAgent.match(/Android/i)
          || window.navigator.userAgent.match(/BlackBerry/i)
          || window.navigator.userAgent.match(/webOS/i))
          {
              statusMobile = true;
          } 
          else
          {
              statusMobile = false;
          }
          if(window.navigator.userAgent.match(/Tablet/i)
          || window.navigator.userAgent.match(/iPad/i)
          || window.navigator.userAgent.match(/Nexus 7/i)
          || window.navigator.userAgent.match(/Nexus 10/i)
          || window.navigator.userAgent.match(/SM-T500/i)
          || window.navigator.userAgent.match(/KFAPWI/i))
          {
              statusTablet = true;
          } 
          else
          {
              statusTablet = false;
          }
        
          if ((statusMobile === true) && (statusTablet === true))
          {
              device = "tablet";
          }
          else if ((statusMobile === true) && (statusTablet === false))
          {
              device = "mobilePhone";    
          }
          else
          {
              device = "pc";    
          }
       
          if (debug === true)
          {
              console.log("Navigator User Agent: " + navigator.userAgent);
              console.log("Erkanntes Gerät: " + device);
          }
      }
       
       
      // Initialisiere Werte für die Skalierung der Wohnungselemente
      /* ======================================================== */
      function initResizeApartment(debug = false)
      
          // Größe Grundriss
          grundrissStyle = window.getComputedStyle(document.querySelector('#w00025'));
          grundrissLeft = (grundrissStyle.left).replace("px", "");
          grundrissTop = (grundrissStyle.top).replace("px", "");
          grundrissWidth = $(widgetNameGrundriss).width();
          grundrissHeigth = $(widgetNameGrundriss).height(); 
          grundrissFactor = grundrissWidth / grundrissHeigth;
       
          if (debug === true)
          {
              console.log("GrundrissLeft: " + grundrissLeft);
              console.log("GrundrissTop: " + grundrissTop);
          }
          
          /* Größe Wohnung
          linkWohnungStyle = window.getComputedStyle(document.querySelector('#w00012'));
          linkWohnungLeft = (linkWohnungStyle.left).replace("px", "") - grundrissLeft;
          linkWohnungTop = (linkWohnungStyle.top).replace("px", "") - grundrissTop;
          linkWohnungFactorLeft = grundrissWidth / linkWohnungLeft;
          linkWohnungFactorTop = grundrissHeigth / linkWohnungTop;
          linkWohnungFactorWidth = grundrissWidth / ($(widgetNameLinkWohnung).width());
          linkWohnungFactorHeigth = grundrissHeigth/ ($(widgetNameLinkWohnung).height());
          
          symbolWohnungStyle = window.getComputedStyle(document.querySelector('#w00017'));
          symbolWohnungLeft = (symbolWohnungStyle.left).replace("px", "") - grundrissLeft;
          symbolWohnungTop = (symbolWohnungStyle.top).replace("px", "") - grundrissTop;
          symbolWohnungFactorLeft = grundrissWidth / symbolWohnungLeft;
          symbolWohnungFactorTop = grundrissHeigth / symbolWohnungTop;
          symbolWohnungFactorWidth = grundrissWidth / ($(widgetNameSymbolWohnung).width());
          symbolWohnungFactorHeigth = grundrissHeigth/ ($(widgetNameSymbolWohnung).height());
       
          // Größe Wohnzimmer
          linkWohnzimmerStyle = window.getComputedStyle(document.querySelector('#w00001'));
          linkWohnzimmerLeft = (linkWohnzimmerStyle.left).replace("px", "") - grundrissLeft;
          linkWohnzimmerTop = (linkWohnzimmerStyle.top).replace("px", "") - grundrissTop;
          linkWohnzimmerFactorLeft = grundrissWidth / linkWohnzimmerLeft;
          linkWohnzimmerFactorTop = grundrissHeigth / linkWohnzimmerTop;
          linkWohnzimmerFactorWidth = grundrissWidth / ($(widgetNameLinkWohnzimmer).width());
          linkWohnzimmerFactorHeigth = grundrissHeigth/ ($(widgetNameLinkWohnzimmer).height());
          
          symbolWohnzimmerStyle = window.getComputedStyle(document.querySelector('#w00013'));
          symbolWohnzimmerLeft = (symbolWohnzimmerStyle.left).replace("px", "") - grundrissLeft;
          symbolWohnzimmerTop = (symbolWohnzimmerStyle.top).replace("px", "") - grundrissTop;
          symbolWohnzimmerFactorLeft = grundrissWidth / symbolWohnzimmerLeft;
          symbolWohnzimmerFactorTop = grundrissHeigth / symbolWohnzimmerTop;
          symbolWohnzimmerFactorWidth = grundrissWidth / ($(widgetNameSymbolWohnzimmer).width());
          symbolWohnzimmerFactorHeigth = grundrissHeigth/ ($(widgetNameSymbolWohnzimmer).height()); 
       
          // Größe Küche
          linkKuecheStyle = window.getComputedStyle(document.querySelector('#w00003'));
          linkKuecheLeft = (linkKuecheStyle.left).replace("px", "") - grundrissLeft;
          linkKuecheTop = (linkKuecheStyle.top).replace("px", "") - grundrissTop;
          linkKuecheFactorLeft = grundrissWidth / linkKuecheLeft;
          linkKuecheFactorTop = grundrissHeigth / linkKuecheTop;
          linkKuecheFactorWidth = grundrissWidth / ($(widgetNameLinkKueche).width());
          linkKuecheFactorHeigth = grundrissHeigth/ ($(widgetNameLinkKueche).height());
          
          symbolKuecheStyle = window.getComputedStyle(document.querySelector('#w00014'));
          symbolKuecheLeft = (symbolKuecheStyle.left).replace("px", "") - grundrissLeft;
          symbolKuecheTop = (symbolKuecheStyle.top).replace("px", "") - grundrissTop;
          symbolKuecheFactorLeft = grundrissWidth / symbolKuecheLeft;
          symbolKuecheFactorTop = grundrissHeigth / symbolKuecheTop;
          symbolKuecheFactorWidth = grundrissWidth / ($(widgetNameSymbolKueche).width());
          symbolKuecheFactorHeigth = grundrissHeigth/ ($(widgetNameSymbolKueche).height());
          
          // Größe Esszimmer
          linkEsszimmerStyle = window.getComputedStyle(document.querySelector('#w00011'));
          linkEsszimmerLeft = (linkEsszimmerStyle.left).replace("px", "") - grundrissLeft;
          linkEsszimmerTop = (linkEsszimmerStyle.top).replace("px", "") - grundrissTop;
          linkEsszimmerFactorLeft = grundrissWidth / linkEsszimmerLeft;
          linkEsszimmerFactorTop = grundrissHeigth / linkEsszimmerTop;
          linkEsszimmerFactorWidth = grundrissWidth / ($(widgetNameLinkEsszimmer).width());
          linkEsszimmerFactorHeigth = grundrissHeigth/ ($(widgetNameLinkEsszimmer).height());
          
          symbolEsszimmerStyle = window.getComputedStyle(document.querySelector('#w00015'));
          symbolEsszimmerLeft = (symbolEsszimmerStyle.left).replace("px", "") - grundrissLeft;
          symbolEsszimmerTop = (symbolEsszimmerStyle.top).replace("px", "") - grundrissTop;
          symbolEsszimmerFactorLeft = grundrissWidth / symbolEsszimmerLeft;
          symbolEsszimmerFactorTop = grundrissHeigth / symbolEsszimmerTop;
          symbolEsszimmerFactorWidth = grundrissWidth / ($(widgetNameSymbolEsszimmer).width());
          symbolEsszimmerFactorHeigth = grundrissHeigth/ ($(widgetNameSymbolEsszimmer).height());
       
          // Größe Flur
          linkFlur1Style = window.getComputedStyle(document.querySelector('#w00010'));
          linkFlur1Left = (linkFlur1Style.left).replace("px", "") - grundrissLeft;
          linkFlur1Top = (linkFlur1Style.top).replace("px", "") - grundrissTop;
          linkFlur1FactorLeft = grundrissWidth / linkFlur1Left;
          linkFlur1FactorTop = grundrissHeigth / linkFlur1Top;
          linkFlur1FactorWidth = grundrissWidth / ($(widgetNameLinkFlur1).width());
          linkFlur1FactorHeigth = grundrissHeigth/ ($(widgetNameLinkFlur1).height()); 
       
          linkFlur2Style = window.getComputedStyle(document.querySelector('#w00009'));
          linkFlur2Left = (linkFlur2Style.left).replace("px", "") - grundrissLeft;
          linkFlur2Top = (linkFlur2Style.top).replace("px", "") - grundrissTop;
          linkFlur2FactorLeft = grundrissWidth / linkFlur2Left;
          linkFlur2FactorTop = grundrissHeigth / linkFlur2Top;
          linkFlur2FactorWidth = grundrissWidth / ($(widgetNameLinkFlur2).width());
          linkFlur2FactorHeigth = grundrissHeigth/ ($(widgetNameLinkFlur2).height());
          
          symbolFlurStyle = window.getComputedStyle(document.querySelector('#w00016'));
          symbolFlurLeft = (symbolFlurStyle.left).replace("px", "") - grundrissLeft;
          symbolFlurTop = (symbolFlurStyle.top).replace("px", "") - grundrissTop;
          symbolFlurFactorLeft = grundrissWidth / symbolFlurLeft;
          symbolFlurFactorTop = grundrissHeigth / symbolFlurTop;
          symbolFlurFactorWidth = grundrissWidth / ($(widgetNameSymbolFlur).width());
          symbolFlurFactorHeigth = grundrissHeigth/ ($(widgetNameSymbolFlur).height());
       
          // Größe Schlafzimmer
          linkSchlafzimmerStyle = window.getComputedStyle(document.querySelector('#w00004'));
          linkSchlafzimmerLeft = (linkSchlafzimmerStyle.left).replace("px", "") - grundrissLeft;
          linkSchlafzimmerTop = (linkSchlafzimmerStyle.top).replace("px", "") - grundrissTop;
          linkSchlafzimmerFactorLeft = grundrissWidth / linkSchlafzimmerLeft;
          linkSchlafzimmerFactorTop = grundrissHeigth / linkSchlafzimmerTop;
          linkSchlafzimmerFactorWidth = grundrissWidth / ($(widgetNameLinkSchlafzimmer).width());
          linkSchlafzimmerFactorHeigth = grundrissHeigth/ ($(widgetNameLinkSchlafzimmer).height());
          
          symbolSchlafzimmerStyle = window.getComputedStyle(document.querySelector('#w00018'));
          symbolSchlafzimmerLeft = (symbolSchlafzimmerStyle.left).replace("px", "") - grundrissLeft;
          symbolSchlafzimmerTop = (symbolSchlafzimmerStyle.top).replace("px", "") - grundrissTop;
          symbolSchlafzimmerFactorLeft = grundrissWidth / symbolSchlafzimmerLeft;
          symbolSchlafzimmerFactorTop = grundrissHeigth / symbolSchlafzimmerTop;
          symbolSchlafzimmerFactorWidth = grundrissWidth / ($(widgetNameSymbolSchlafzimmer).width());
          symbolSchlafzimmerFactorHeigth = grundrissHeigth/ ($(widgetNameSymbolSchlafzimmer).height());
       
          // Größe Kinderzimmer
          linkKinderzimmerStyle = window.getComputedStyle(document.querySelector('#w00005'));
          linkKinderzimmerLeft = (linkKinderzimmerStyle.left).replace("px", "") - grundrissLeft;
          linkKinderzimmerTop = (linkKinderzimmerStyle.top).replace("px", "") - grundrissTop;
          linkKinderzimmerFactorLeft = grundrissWidth / linkKinderzimmerLeft;
          linkKinderzimmerFactorTop = grundrissHeigth / linkKinderzimmerTop;
          linkKinderzimmerFactorWidth = grundrissWidth / ($(widgetNameLinkKinderzimmer).width());
          linkKinderzimmerFactorHeigth = grundrissHeigth/ ($(widgetNameLinkKinderzimmer).height());
          
          symbolKinderzimmerStyle = window.getComputedStyle(document.querySelector('#w00019'));
          symbolKinderzimmerLeft = (symbolKinderzimmerStyle.left).replace("px", "") - grundrissLeft;
          symbolKinderzimmerTop = (symbolKinderzimmerStyle.top).replace("px", "") - grundrissTop;
          symbolKinderzimmerFactorLeft = grundrissWidth / symbolKinderzimmerLeft;
          symbolKinderzimmerFactorTop = grundrissHeigth / symbolKinderzimmerTop;
          symbolKinderzimmerFactorWidth = grundrissWidth / ($(widgetNameSymbolKinderzimmer).width());
          symbolKinderzimmerFactorHeigth = grundrissHeigth/ ($(widgetNameSymbolKinderzimmer).height());
       
          // Größe Badezimmer
          linkBadezimmerStyle = window.getComputedStyle(document.querySelector('#w00006'));
          linkBadezimmerLeft = (linkBadezimmerStyle.left).replace("px", "") - grundrissLeft;
          linkBadezimmerTop = (linkBadezimmerStyle.top).replace("px", "") - grundrissTop;
          linkBadezimmerFactorLeft = grundrissWidth / linkBadezimmerLeft;
          linkBadezimmerFactorTop = grundrissHeigth / linkBadezimmerTop;
          linkBadezimmerFactorWidth = grundrissWidth / ($(widgetNameLinkBadezimmer).width());
          linkBadezimmerFactorHeigth = grundrissHeigth/ ($(widgetNameLinkBadezimmer).height());
          
          symbolBadezimmerStyle = window.getComputedStyle(document.querySelector('#w00020'));
          symbolBadezimmerLeft = (symbolBadezimmerStyle.left).replace("px", "") - grundrissLeft;
          symbolBadezimmerTop = (symbolBadezimmerStyle.top).replace("px", "") - grundrissTop;
          symbolBadezimmerFactorLeft = grundrissWidth / symbolBadezimmerLeft;
          symbolBadezimmerFactorTop = grundrissHeigth / symbolBadezimmerTop;
          symbolBadezimmerFactorWidth = grundrissWidth / ($(widgetNameSymbolBadezimmer).width());
          symbolBadezimmerFactorHeigth = grundrissHeigth/ ($(widgetNameSymbolBadezimmer).height());
       
          // Größe Gäste-WC
          linkGaesteWcStyle = window.getComputedStyle(document.querySelector('#w00007'));
          linkGaesteWcLeft = (linkGaesteWcStyle.left).replace("px", "") - grundrissLeft;
          linkGaesteWcTop = (linkGaesteWcStyle.top).replace("px", "") - grundrissTop;
          linkGaesteWcFactorLeft = grundrissWidth / linkGaesteWcLeft;
          linkGaesteWcFactorTop = grundrissHeigth / linkGaesteWcTop;
          linkGaesteWcFactorWidth = grundrissWidth / ($(widgetNameLinkGaesteWc).width());
          linkGaesteWcFactorHeigth = grundrissHeigth/ ($(widgetNameLinkGaesteWc).height());
          
          symbolGaesteWcStyle = window.getComputedStyle(document.querySelector('#w00021'));
          symbolGaesteWcLeft = (symbolGaesteWcStyle.left).replace("px", "") - grundrissLeft;
          symbolGaesteWcTop = (symbolGaesteWcStyle.top).replace("px", "") - grundrissTop;
          symbolGaesteWcFactorLeft = grundrissWidth / symbolGaesteWcLeft;
          symbolGaesteWcFactorTop = grundrissHeigth / symbolGaesteWcTop;
          symbolGaesteWcFactorWidth = grundrissWidth / ($(widgetNameSymbolGaesteWc).width());
          symbolGaesteWcFactorHeigth = grundrissHeigth/ ($(widgetNameSymbolGaesteWc).height());
       
          // Größe Abstellraum
          linkAbstellraumStyle = window.getComputedStyle(document.querySelector('#w00008'));
          linkAbstellraumLeft = (linkAbstellraumStyle.left).replace("px", "") - grundrissLeft;
          linkAbstellraumTop = (linkAbstellraumStyle.top).replace("px", "") - grundrissTop;
          linkAbstellraumFactorLeft = grundrissWidth / linkAbstellraumLeft;
          linkAbstellraumFactorTop = grundrissHeigth / linkAbstellraumTop;
          linkAbstellraumFactorWidth = grundrissWidth / ($(widgetNameLinkAbstellraum).width());
          linkAbstellraumFactorHeigth = grundrissHeigth/ ($(widgetNameLinkAbstellraum).height());
          
          symbolAbstellraumStyle = window.getComputedStyle(document.querySelector('#w00022'));
          symbolAbstellraumLeft = (symbolAbstellraumStyle.left).replace("px", "") - grundrissLeft;
          symbolAbstellraumTop = (symbolAbstellraumStyle.top).replace("px", "") - grundrissTop;
          symbolAbstellraumFactorLeft = grundrissWidth / symbolAbstellraumLeft;
          symbolAbstellraumFactorTop = grundrissHeigth / symbolAbstellraumTop;
          symbolAbstellraumFactorWidth = grundrissWidth / ($(widgetNameSymbolAbstellraum).width());
          symbolAbstellraumFactorHeigth = grundrissHeigth/ ($(widgetNameSymbolAbstellraum).height());
       
      }
       
       
      /* Skalierung des umliegenden Abstands
      /* ======================================================== */
      function setResizeSpace(windowWidth, windowHeigth, debug = false)
      {
          if (windowWidth < windowHeigth)
          {
              // Fensterbreite maßgeblich
              windowMinSize = windowWidth; 
          } else
          {
              // Fensterhöhe maßgeblich
              windowMinSize = windowHeigth;
          }
          
          if (device === "mobilePhone")
          {
              spaceSurrounding = spaceSurroundingMin;
          }
          else
          {
              spaceSurrounding = spaceSurroundingMin + spaceSurroundingScreensizeDependent * (windowMinSize / spaceSurroundingScreensizeDependentFactor);  
          }
          
      }
       
       
      // Skalierung der Wohnungselemente
      /* ======================================================== */
      function setResizeElement(element, grundrissLeft, grundrissTop, grundrissWidth, grundrissHeigth, elementFactorLeft, elementFactorTop, elementFactorWidth, elementFactorHeigth, debug = false)
      {
          $(element).css({"left": (grundrissLeft) + (grundrissWidth/elementFactorLeft), "top": (grundrissTop) + (grundrissHeigth/elementFactorTop), "width": (grundrissWidth/elementFactorWidth), "height": (grundrissHeigth/elementFactorHeigth)});
       
      }
       
       
      /* Skalierung der Symbolgrößen
      /* ======================================================== */
      /*function setResizeSymbol(debug = false)
      {
          if (device === "mobilePhone")
          {
              symbolHeigth = 43;
          }
          else
          {
              symbolHeigth = 65;  
          }
          $(".symbolGrundrissRaume .vis-inventwo-img").css({"height": symbolHeigth+"px"});
       
      }
      */ 
       
      // Skalierung der Wohnung
      /* ======================================================== */
      function setResizeApartment(debug = false)
      {
          
          // Fenstergröße
          windowWidth = $(window).width();
          windowHeigth = $(window).height();    
          windowFactor = windowWidth / windowHeigth; 
          
          // Abstand dynamisch an Fenstergröße anpassen
          setResizeSpace(windowWidth, windowHeigth, debug);
          
          // Fenstergröße und -faktor mit Abstand
          if ((windowWidth > (spaceSurrounding * 2))
             && (windowHeigth > (spaceSurrounding * 2)))
          {
              windowSpaceWidth = windowWidth - (spaceSurrounding * 2);
              windowSpaceHeigth = windowHeigth - (spaceSurrounding * 2); 
              windowSpaceFactor = windowSpaceWidth / windowSpaceHeigth;        
          }
          else
          {
              windowSpaceWidth = 0;
              windowSpaceHeigth = 0; 
              windowSpaceFactor = 0;  
          }
          
          // Grundrissgröße
          if (windowSpaceFactor < grundrissFactor)
          {
              // Fensterbreite maßgeblich
              
              // Grundriss mittig zentrieren
              grundrissWidth = (windowSpaceWidth);
              grundrissHeigth = (windowSpaceWidth) / grundrissFactor;
              grundrissLeft = spaceSurrounding;
              grundrissTop = spaceSurrounding + ((windowSpaceHeigth - grundrissHeigth) / 2);
              
              if (debug === true)
              {
                  console.log("Fensterbreite maßgeblich");
              }
          } else
          {
              // Fensterhöhe maßgeblich
              
              // Grundriss mittig zentrieren
              grundrissHeigth = (windowSpaceHeigth);
              grundrissWidth = (windowSpaceHeigth) * grundrissFactor;
              grundrissLeft = spaceSurrounding + (windowSpaceWidth - grundrissWidth) / 2;
              grundrissTop = spaceSurrounding; 
              
              if (debug === true)
              {
                  console.log("Fensterhöhe maßgeblich");
              }
          }
          
          // Größe und Position Grundriss anpassen
          $(widgetNameGrundriss).css({"left": grundrissLeft, "top": grundrissTop, "width": grundrissWidth,"height": grundrissHeigth});
       
          // Grundrissgröße nach Anpassung und Referenz für alle folgenden Elemente
          grundrissWidth = $(widgetNameGrundriss).width();
          grundrissHeigth = $(widgetNameGrundriss).height();
          
          // Position und -größe skalieren Wohnung
          setResizeElement(widgetNameLinkWohnung, grundrissLeft, grundrissTop, grundrissWidth, grundrissHeigth, linkWohnungFactorLeft, linkWohnungFactorTop, linkWohnungFactorWidth, linkWohnungFactorHeigth, debug);
          
          setResizeElement(widgetNameSymbolWohnung, grundrissLeft, grundrissTop, grundrissWidth, grundrissHeigth, symbolWohnungFactorLeft, symbolWohnungFactorTop, symbolWohnungFactorWidth, symbolWohnungFactorHeigth, debug);
          
          /*Position und -größe skalieren Wohnzimmer
          setResizeElement(widgetNameLinkWohnzimmer, grundrissLeft, grundrissTop, grundrissWidth, grundrissHeigth, linkWohnzimmerFactorLeft, linkWohnzimmerFactorTop, linkWohnzimmerFactorWidth, linkWohnzimmerFactorHeigth, debug);
          
          setResizeElement(widgetNameSymbolWohnzimmer, grundrissLeft, grundrissTop, grundrissWidth, grundrissHeigth, symbolWohnzimmerFactorLeft, symbolWohnzimmerFactorTop, symbolWohnzimmerFactorWidth, symbolWohnzimmerFactorHeigth, debug);
          
          // Position und -größe skalieren Küche
          setResizeElement(widgetNameLinkKueche, grundrissLeft, grundrissTop, grundrissWidth, grundrissHeigth, linkKuecheFactorLeft, linkKuecheFactorTop, linkKuecheFactorWidth, linkKuecheFactorHeigth, debug);
          
          setResizeElement(widgetNameSymbolKueche, grundrissLeft, grundrissTop, grundrissWidth, grundrissHeigth, symbolKuecheFactorLeft, symbolKuecheFactorTop, symbolKuecheFactorWidth, symbolKuecheFactorHeigth, debug);
          
          // Position und -größe skalieren Esszimmer
          setResizeElement(widgetNameLinkEsszimmer, grundrissLeft, grundrissTop, grundrissWidth, grundrissHeigth, linkEsszimmerFactorLeft, linkEsszimmerFactorTop, linkEsszimmerFactorWidth, linkEsszimmerFactorHeigth, debug);
          
          setResizeElement(widgetNameSymbolEsszimmer, grundrissLeft, grundrissTop, grundrissWidth, grundrissHeigth, symbolEsszimmerFactorLeft, symbolEsszimmerFactorTop, symbolEsszimmerFactorWidth, symbolEsszimmerFactorHeigth, debug);
          
          // Position und -größe skalieren Flur
          setResizeElement(widgetNameLinkFlur1, grundrissLeft, grundrissTop, grundrissWidth, grundrissHeigth, linkFlur1FactorLeft, linkFlur1FactorTop, linkFlur1FactorWidth, linkFlur1FactorHeigth, debug);
       
          setResizeElement(widgetNameLinkFlur2, grundrissLeft, grundrissTop, grundrissWidth, grundrissHeigth, linkFlur2FactorLeft, linkFlur2FactorTop, linkFlur2FactorWidth, linkFlur2FactorHeigth, debug);
          
          setResizeElement(widgetNameSymbolFlur, grundrissLeft, grundrissTop, grundrissWidth, grundrissHeigth, symbolFlurFactorLeft, symbolFlurFactorTop, symbolFlurFactorWidth, symbolFlurFactorHeigth, debug);
       
          // Position und -größe skalieren Schlafzimmer
          setResizeElement(widgetNameLinkSchlafzimmer, grundrissLeft, grundrissTop, grundrissWidth, grundrissHeigth, linkSchlafzimmerFactorLeft, linkSchlafzimmerFactorTop, linkSchlafzimmerFactorWidth, linkSchlafzimmerFactorHeigth, debug);
          
          setResizeElement(widgetNameSymbolSchlafzimmer, grundrissLeft, grundrissTop, grundrissWidth, grundrissHeigth, symbolSchlafzimmerFactorLeft, symbolSchlafzimmerFactorTop, symbolSchlafzimmerFactorWidth, symbolSchlafzimmerFactorHeigth, debug);
       
          // Position und -größe skalieren Kinderzimmer
          setResizeElement(widgetNameLinkKinderzimmer, grundrissLeft, grundrissTop, grundrissWidth, grundrissHeigth, linkKinderzimmerFactorLeft, linkKinderzimmerFactorTop, linkKinderzimmerFactorWidth, linkKinderzimmerFactorHeigth, debug);
          
          setResizeElement(widgetNameSymbolKinderzimmer, grundrissLeft, grundrissTop, grundrissWidth, grundrissHeigth, symbolKinderzimmerFactorLeft, symbolKinderzimmerFactorTop, symbolKinderzimmerFactorWidth, symbolKinderzimmerFactorHeigth, debug);
       
          // Position und -größe skalieren Badezimmer
          setResizeElement(widgetNameLinkBadezimmer, grundrissLeft, grundrissTop, grundrissWidth, grundrissHeigth, linkBadezimmerFactorLeft, linkBadezimmerFactorTop, linkBadezimmerFactorWidth, linkBadezimmerFactorHeigth, debug);
          
          setResizeElement(widgetNameSymbolBadezimmer, grundrissLeft, grundrissTop, grundrissWidth, grundrissHeigth, symbolBadezimmerFactorLeft, symbolBadezimmerFactorTop, symbolBadezimmerFactorWidth, symbolBadezimmerFactorHeigth, debug);
       
          // Position und -größe skalieren Gäste-WC
          setResizeElement(widgetNameLinkGaesteWc, grundrissLeft, grundrissTop, grundrissWidth, grundrissHeigth, linkGaesteWcFactorLeft, linkGaesteWcFactorTop, linkGaesteWcFactorWidth, linkGaesteWcFactorHeigth, debug);
          
          setResizeElement(widgetNameSymbolGaesteWc, grundrissLeft, grundrissTop, grundrissWidth, grundrissHeigth, symbolGaesteWcFactorLeft, symbolGaesteWcFactorTop, symbolGaesteWcFactorWidth, symbolGaesteWcFactorHeigth, debug);
          
          // Position und -größe skalieren Abstellraum
          setResizeElement(widgetNameLinkAbstellraum, grundrissLeft, grundrissTop, grundrissWidth, grundrissHeigth, linkAbstellraumFactorLeft, linkAbstellraumFactorTop, linkAbstellraumFactorWidth, linkAbstellraumFactorHeigth, debug);
          
          setResizeElement(widgetNameSymbolAbstellraum, grundrissLeft, grundrissTop, grundrissWidth, grundrissHeigth, symbolAbstellraumFactorLeft, symbolAbstellraumFactorTop, symbolAbstellraumFactorWidth, symbolAbstellraumFactorHeigth, debug);
       */
          if (debug === true)
          {
              console.log("Umgebender Abstand: " + spaceSurrounding);
              
              console.log("Fensterbreite: " + windowWidth);
              console.log("Fensterhöhe: " + windowHeigth);
              console.log("windowFactor: " + windowFactor);
                      
              console.log("Grundrissbreite: " + grundrissWidth);
              console.log("Grundrisshöhe: " + grundrissHeigth);
              console.log("grundrissFactor: " + grundrissFactor); 
          }
       
      }
       
       
      // Skriptstart
      /* ======================================================== */
      waitForElement($('body'),'.grundriss', 'dummy', 'dummy', function () {
          // Widget ist vollständig geladen, wir können irgendwas damit machen
          
          // Erkennen auf welchem Gerät die VIS läuft
          getDevice(debug);
          
          // Initialisiere Skalierung
          initResizeApartment(debug);
          
          // Initiale Skalierung
          setResizeApartment(debug);
          
          // Symbolgröße skalieren
          setResizeSymbol(debug);
          
          // Event registrieren bei Fenstergrößenänderung
          $(window).resize(function () 
          {
              // Skalierung anpassen
              setResizeApartment(debug);
       
          });
      }, 0, debug);
      
      M 1 Antwort Letzte Antwort
      0
      • S SlipKoRn_DH88

        @mcu
        Danke schon einmal für`s drauf schauen

        VIS EG.jpg

        // Initialisiere Konstanten
        /* ======================================================== */
        var debug = false;
         
        var spaceSurroundingMin = 20;
        var spaceSurroundingScreensizeDependent = 20;
        var spaceSurroundingScreensizeDependentFactor = 600;
         
        var widgetNameGrundriss = "#w00025";
        
         
        // Warten bis Element geladen wurde
        /* ======================================================== */
        function waitForElement(parent, elementPath, wid, widgetName, callBack, counter = 0, debug = false)
        {
            if (counter < 10000)
            {
                setTimeout(function ()
                {
                    if (parent.find(elementPath).length > 0)
                    {
                        if (debug) console.log(`[${widgetName} ${wid}] it took ${counter}ms to wait for the element '${elementPath}'`);
                        callBack();
                    } else
                    {
                        if (debug) console.log(`[${widgetName} ${wid}] wait for element '${elementPath}'`);
                        counter++;
                        waitForElement(parent, elementPath, wid, widgetName, callBack, counter, debug);
                    }
                }, 1);
            } else
            {
                console.warn(`[${widgetName} ${wid}] stop waiting after ${counter} retries`);
                callBack();
            }
        }
         
         
        // Erkennen auf welchem Gerät die VIS läuft
        /* ======================================================== */
        function getDevice(debug = false)
        {
            if(window.navigator.userAgent.match(/Mobile/i)
            || window.navigator.userAgent.match(/iPhone/i)
            || window.navigator.userAgent.match(/iPod/i)
            || window.navigator.userAgent.match(/IEMobile/i)
            || window.navigator.userAgent.match(/Windows Phone/i)
            || window.navigator.userAgent.match(/Android/i)
            || window.navigator.userAgent.match(/BlackBerry/i)
            || window.navigator.userAgent.match(/webOS/i))
            {
                statusMobile = true;
            } 
            else
            {
                statusMobile = false;
            }
            if(window.navigator.userAgent.match(/Tablet/i)
            || window.navigator.userAgent.match(/iPad/i)
            || window.navigator.userAgent.match(/Nexus 7/i)
            || window.navigator.userAgent.match(/Nexus 10/i)
            || window.navigator.userAgent.match(/SM-T500/i)
            || window.navigator.userAgent.match(/KFAPWI/i))
            {
                statusTablet = true;
            } 
            else
            {
                statusTablet = false;
            }
          
            if ((statusMobile === true) && (statusTablet === true))
            {
                device = "tablet";
            }
            else if ((statusMobile === true) && (statusTablet === false))
            {
                device = "mobilePhone";    
            }
            else
            {
                device = "pc";    
            }
         
            if (debug === true)
            {
                console.log("Navigator User Agent: " + navigator.userAgent);
                console.log("Erkanntes Gerät: " + device);
            }
        }
         
         
        // Initialisiere Werte für die Skalierung der Wohnungselemente
        /* ======================================================== */
        function initResizeApartment(debug = false)
        
            // Größe Grundriss
            grundrissStyle = window.getComputedStyle(document.querySelector('#w00025'));
            grundrissLeft = (grundrissStyle.left).replace("px", "");
            grundrissTop = (grundrissStyle.top).replace("px", "");
            grundrissWidth = $(widgetNameGrundriss).width();
            grundrissHeigth = $(widgetNameGrundriss).height(); 
            grundrissFactor = grundrissWidth / grundrissHeigth;
         
            if (debug === true)
            {
                console.log("GrundrissLeft: " + grundrissLeft);
                console.log("GrundrissTop: " + grundrissTop);
            }
            
            /* Größe Wohnung
            linkWohnungStyle = window.getComputedStyle(document.querySelector('#w00012'));
            linkWohnungLeft = (linkWohnungStyle.left).replace("px", "") - grundrissLeft;
            linkWohnungTop = (linkWohnungStyle.top).replace("px", "") - grundrissTop;
            linkWohnungFactorLeft = grundrissWidth / linkWohnungLeft;
            linkWohnungFactorTop = grundrissHeigth / linkWohnungTop;
            linkWohnungFactorWidth = grundrissWidth / ($(widgetNameLinkWohnung).width());
            linkWohnungFactorHeigth = grundrissHeigth/ ($(widgetNameLinkWohnung).height());
            
            symbolWohnungStyle = window.getComputedStyle(document.querySelector('#w00017'));
            symbolWohnungLeft = (symbolWohnungStyle.left).replace("px", "") - grundrissLeft;
            symbolWohnungTop = (symbolWohnungStyle.top).replace("px", "") - grundrissTop;
            symbolWohnungFactorLeft = grundrissWidth / symbolWohnungLeft;
            symbolWohnungFactorTop = grundrissHeigth / symbolWohnungTop;
            symbolWohnungFactorWidth = grundrissWidth / ($(widgetNameSymbolWohnung).width());
            symbolWohnungFactorHeigth = grundrissHeigth/ ($(widgetNameSymbolWohnung).height());
         
            // Größe Wohnzimmer
            linkWohnzimmerStyle = window.getComputedStyle(document.querySelector('#w00001'));
            linkWohnzimmerLeft = (linkWohnzimmerStyle.left).replace("px", "") - grundrissLeft;
            linkWohnzimmerTop = (linkWohnzimmerStyle.top).replace("px", "") - grundrissTop;
            linkWohnzimmerFactorLeft = grundrissWidth / linkWohnzimmerLeft;
            linkWohnzimmerFactorTop = grundrissHeigth / linkWohnzimmerTop;
            linkWohnzimmerFactorWidth = grundrissWidth / ($(widgetNameLinkWohnzimmer).width());
            linkWohnzimmerFactorHeigth = grundrissHeigth/ ($(widgetNameLinkWohnzimmer).height());
            
            symbolWohnzimmerStyle = window.getComputedStyle(document.querySelector('#w00013'));
            symbolWohnzimmerLeft = (symbolWohnzimmerStyle.left).replace("px", "") - grundrissLeft;
            symbolWohnzimmerTop = (symbolWohnzimmerStyle.top).replace("px", "") - grundrissTop;
            symbolWohnzimmerFactorLeft = grundrissWidth / symbolWohnzimmerLeft;
            symbolWohnzimmerFactorTop = grundrissHeigth / symbolWohnzimmerTop;
            symbolWohnzimmerFactorWidth = grundrissWidth / ($(widgetNameSymbolWohnzimmer).width());
            symbolWohnzimmerFactorHeigth = grundrissHeigth/ ($(widgetNameSymbolWohnzimmer).height()); 
         
            // Größe Küche
            linkKuecheStyle = window.getComputedStyle(document.querySelector('#w00003'));
            linkKuecheLeft = (linkKuecheStyle.left).replace("px", "") - grundrissLeft;
            linkKuecheTop = (linkKuecheStyle.top).replace("px", "") - grundrissTop;
            linkKuecheFactorLeft = grundrissWidth / linkKuecheLeft;
            linkKuecheFactorTop = grundrissHeigth / linkKuecheTop;
            linkKuecheFactorWidth = grundrissWidth / ($(widgetNameLinkKueche).width());
            linkKuecheFactorHeigth = grundrissHeigth/ ($(widgetNameLinkKueche).height());
            
            symbolKuecheStyle = window.getComputedStyle(document.querySelector('#w00014'));
            symbolKuecheLeft = (symbolKuecheStyle.left).replace("px", "") - grundrissLeft;
            symbolKuecheTop = (symbolKuecheStyle.top).replace("px", "") - grundrissTop;
            symbolKuecheFactorLeft = grundrissWidth / symbolKuecheLeft;
            symbolKuecheFactorTop = grundrissHeigth / symbolKuecheTop;
            symbolKuecheFactorWidth = grundrissWidth / ($(widgetNameSymbolKueche).width());
            symbolKuecheFactorHeigth = grundrissHeigth/ ($(widgetNameSymbolKueche).height());
            
            // Größe Esszimmer
            linkEsszimmerStyle = window.getComputedStyle(document.querySelector('#w00011'));
            linkEsszimmerLeft = (linkEsszimmerStyle.left).replace("px", "") - grundrissLeft;
            linkEsszimmerTop = (linkEsszimmerStyle.top).replace("px", "") - grundrissTop;
            linkEsszimmerFactorLeft = grundrissWidth / linkEsszimmerLeft;
            linkEsszimmerFactorTop = grundrissHeigth / linkEsszimmerTop;
            linkEsszimmerFactorWidth = grundrissWidth / ($(widgetNameLinkEsszimmer).width());
            linkEsszimmerFactorHeigth = grundrissHeigth/ ($(widgetNameLinkEsszimmer).height());
            
            symbolEsszimmerStyle = window.getComputedStyle(document.querySelector('#w00015'));
            symbolEsszimmerLeft = (symbolEsszimmerStyle.left).replace("px", "") - grundrissLeft;
            symbolEsszimmerTop = (symbolEsszimmerStyle.top).replace("px", "") - grundrissTop;
            symbolEsszimmerFactorLeft = grundrissWidth / symbolEsszimmerLeft;
            symbolEsszimmerFactorTop = grundrissHeigth / symbolEsszimmerTop;
            symbolEsszimmerFactorWidth = grundrissWidth / ($(widgetNameSymbolEsszimmer).width());
            symbolEsszimmerFactorHeigth = grundrissHeigth/ ($(widgetNameSymbolEsszimmer).height());
         
            // Größe Flur
            linkFlur1Style = window.getComputedStyle(document.querySelector('#w00010'));
            linkFlur1Left = (linkFlur1Style.left).replace("px", "") - grundrissLeft;
            linkFlur1Top = (linkFlur1Style.top).replace("px", "") - grundrissTop;
            linkFlur1FactorLeft = grundrissWidth / linkFlur1Left;
            linkFlur1FactorTop = grundrissHeigth / linkFlur1Top;
            linkFlur1FactorWidth = grundrissWidth / ($(widgetNameLinkFlur1).width());
            linkFlur1FactorHeigth = grundrissHeigth/ ($(widgetNameLinkFlur1).height()); 
         
            linkFlur2Style = window.getComputedStyle(document.querySelector('#w00009'));
            linkFlur2Left = (linkFlur2Style.left).replace("px", "") - grundrissLeft;
            linkFlur2Top = (linkFlur2Style.top).replace("px", "") - grundrissTop;
            linkFlur2FactorLeft = grundrissWidth / linkFlur2Left;
            linkFlur2FactorTop = grundrissHeigth / linkFlur2Top;
            linkFlur2FactorWidth = grundrissWidth / ($(widgetNameLinkFlur2).width());
            linkFlur2FactorHeigth = grundrissHeigth/ ($(widgetNameLinkFlur2).height());
            
            symbolFlurStyle = window.getComputedStyle(document.querySelector('#w00016'));
            symbolFlurLeft = (symbolFlurStyle.left).replace("px", "") - grundrissLeft;
            symbolFlurTop = (symbolFlurStyle.top).replace("px", "") - grundrissTop;
            symbolFlurFactorLeft = grundrissWidth / symbolFlurLeft;
            symbolFlurFactorTop = grundrissHeigth / symbolFlurTop;
            symbolFlurFactorWidth = grundrissWidth / ($(widgetNameSymbolFlur).width());
            symbolFlurFactorHeigth = grundrissHeigth/ ($(widgetNameSymbolFlur).height());
         
            // Größe Schlafzimmer
            linkSchlafzimmerStyle = window.getComputedStyle(document.querySelector('#w00004'));
            linkSchlafzimmerLeft = (linkSchlafzimmerStyle.left).replace("px", "") - grundrissLeft;
            linkSchlafzimmerTop = (linkSchlafzimmerStyle.top).replace("px", "") - grundrissTop;
            linkSchlafzimmerFactorLeft = grundrissWidth / linkSchlafzimmerLeft;
            linkSchlafzimmerFactorTop = grundrissHeigth / linkSchlafzimmerTop;
            linkSchlafzimmerFactorWidth = grundrissWidth / ($(widgetNameLinkSchlafzimmer).width());
            linkSchlafzimmerFactorHeigth = grundrissHeigth/ ($(widgetNameLinkSchlafzimmer).height());
            
            symbolSchlafzimmerStyle = window.getComputedStyle(document.querySelector('#w00018'));
            symbolSchlafzimmerLeft = (symbolSchlafzimmerStyle.left).replace("px", "") - grundrissLeft;
            symbolSchlafzimmerTop = (symbolSchlafzimmerStyle.top).replace("px", "") - grundrissTop;
            symbolSchlafzimmerFactorLeft = grundrissWidth / symbolSchlafzimmerLeft;
            symbolSchlafzimmerFactorTop = grundrissHeigth / symbolSchlafzimmerTop;
            symbolSchlafzimmerFactorWidth = grundrissWidth / ($(widgetNameSymbolSchlafzimmer).width());
            symbolSchlafzimmerFactorHeigth = grundrissHeigth/ ($(widgetNameSymbolSchlafzimmer).height());
         
            // Größe Kinderzimmer
            linkKinderzimmerStyle = window.getComputedStyle(document.querySelector('#w00005'));
            linkKinderzimmerLeft = (linkKinderzimmerStyle.left).replace("px", "") - grundrissLeft;
            linkKinderzimmerTop = (linkKinderzimmerStyle.top).replace("px", "") - grundrissTop;
            linkKinderzimmerFactorLeft = grundrissWidth / linkKinderzimmerLeft;
            linkKinderzimmerFactorTop = grundrissHeigth / linkKinderzimmerTop;
            linkKinderzimmerFactorWidth = grundrissWidth / ($(widgetNameLinkKinderzimmer).width());
            linkKinderzimmerFactorHeigth = grundrissHeigth/ ($(widgetNameLinkKinderzimmer).height());
            
            symbolKinderzimmerStyle = window.getComputedStyle(document.querySelector('#w00019'));
            symbolKinderzimmerLeft = (symbolKinderzimmerStyle.left).replace("px", "") - grundrissLeft;
            symbolKinderzimmerTop = (symbolKinderzimmerStyle.top).replace("px", "") - grundrissTop;
            symbolKinderzimmerFactorLeft = grundrissWidth / symbolKinderzimmerLeft;
            symbolKinderzimmerFactorTop = grundrissHeigth / symbolKinderzimmerTop;
            symbolKinderzimmerFactorWidth = grundrissWidth / ($(widgetNameSymbolKinderzimmer).width());
            symbolKinderzimmerFactorHeigth = grundrissHeigth/ ($(widgetNameSymbolKinderzimmer).height());
         
            // Größe Badezimmer
            linkBadezimmerStyle = window.getComputedStyle(document.querySelector('#w00006'));
            linkBadezimmerLeft = (linkBadezimmerStyle.left).replace("px", "") - grundrissLeft;
            linkBadezimmerTop = (linkBadezimmerStyle.top).replace("px", "") - grundrissTop;
            linkBadezimmerFactorLeft = grundrissWidth / linkBadezimmerLeft;
            linkBadezimmerFactorTop = grundrissHeigth / linkBadezimmerTop;
            linkBadezimmerFactorWidth = grundrissWidth / ($(widgetNameLinkBadezimmer).width());
            linkBadezimmerFactorHeigth = grundrissHeigth/ ($(widgetNameLinkBadezimmer).height());
            
            symbolBadezimmerStyle = window.getComputedStyle(document.querySelector('#w00020'));
            symbolBadezimmerLeft = (symbolBadezimmerStyle.left).replace("px", "") - grundrissLeft;
            symbolBadezimmerTop = (symbolBadezimmerStyle.top).replace("px", "") - grundrissTop;
            symbolBadezimmerFactorLeft = grundrissWidth / symbolBadezimmerLeft;
            symbolBadezimmerFactorTop = grundrissHeigth / symbolBadezimmerTop;
            symbolBadezimmerFactorWidth = grundrissWidth / ($(widgetNameSymbolBadezimmer).width());
            symbolBadezimmerFactorHeigth = grundrissHeigth/ ($(widgetNameSymbolBadezimmer).height());
         
            // Größe Gäste-WC
            linkGaesteWcStyle = window.getComputedStyle(document.querySelector('#w00007'));
            linkGaesteWcLeft = (linkGaesteWcStyle.left).replace("px", "") - grundrissLeft;
            linkGaesteWcTop = (linkGaesteWcStyle.top).replace("px", "") - grundrissTop;
            linkGaesteWcFactorLeft = grundrissWidth / linkGaesteWcLeft;
            linkGaesteWcFactorTop = grundrissHeigth / linkGaesteWcTop;
            linkGaesteWcFactorWidth = grundrissWidth / ($(widgetNameLinkGaesteWc).width());
            linkGaesteWcFactorHeigth = grundrissHeigth/ ($(widgetNameLinkGaesteWc).height());
            
            symbolGaesteWcStyle = window.getComputedStyle(document.querySelector('#w00021'));
            symbolGaesteWcLeft = (symbolGaesteWcStyle.left).replace("px", "") - grundrissLeft;
            symbolGaesteWcTop = (symbolGaesteWcStyle.top).replace("px", "") - grundrissTop;
            symbolGaesteWcFactorLeft = grundrissWidth / symbolGaesteWcLeft;
            symbolGaesteWcFactorTop = grundrissHeigth / symbolGaesteWcTop;
            symbolGaesteWcFactorWidth = grundrissWidth / ($(widgetNameSymbolGaesteWc).width());
            symbolGaesteWcFactorHeigth = grundrissHeigth/ ($(widgetNameSymbolGaesteWc).height());
         
            // Größe Abstellraum
            linkAbstellraumStyle = window.getComputedStyle(document.querySelector('#w00008'));
            linkAbstellraumLeft = (linkAbstellraumStyle.left).replace("px", "") - grundrissLeft;
            linkAbstellraumTop = (linkAbstellraumStyle.top).replace("px", "") - grundrissTop;
            linkAbstellraumFactorLeft = grundrissWidth / linkAbstellraumLeft;
            linkAbstellraumFactorTop = grundrissHeigth / linkAbstellraumTop;
            linkAbstellraumFactorWidth = grundrissWidth / ($(widgetNameLinkAbstellraum).width());
            linkAbstellraumFactorHeigth = grundrissHeigth/ ($(widgetNameLinkAbstellraum).height());
            
            symbolAbstellraumStyle = window.getComputedStyle(document.querySelector('#w00022'));
            symbolAbstellraumLeft = (symbolAbstellraumStyle.left).replace("px", "") - grundrissLeft;
            symbolAbstellraumTop = (symbolAbstellraumStyle.top).replace("px", "") - grundrissTop;
            symbolAbstellraumFactorLeft = grundrissWidth / symbolAbstellraumLeft;
            symbolAbstellraumFactorTop = grundrissHeigth / symbolAbstellraumTop;
            symbolAbstellraumFactorWidth = grundrissWidth / ($(widgetNameSymbolAbstellraum).width());
            symbolAbstellraumFactorHeigth = grundrissHeigth/ ($(widgetNameSymbolAbstellraum).height());
         
        }
         
         
        /* Skalierung des umliegenden Abstands
        /* ======================================================== */
        function setResizeSpace(windowWidth, windowHeigth, debug = false)
        {
            if (windowWidth < windowHeigth)
            {
                // Fensterbreite maßgeblich
                windowMinSize = windowWidth; 
            } else
            {
                // Fensterhöhe maßgeblich
                windowMinSize = windowHeigth;
            }
            
            if (device === "mobilePhone")
            {
                spaceSurrounding = spaceSurroundingMin;
            }
            else
            {
                spaceSurrounding = spaceSurroundingMin + spaceSurroundingScreensizeDependent * (windowMinSize / spaceSurroundingScreensizeDependentFactor);  
            }
            
        }
         
         
        // Skalierung der Wohnungselemente
        /* ======================================================== */
        function setResizeElement(element, grundrissLeft, grundrissTop, grundrissWidth, grundrissHeigth, elementFactorLeft, elementFactorTop, elementFactorWidth, elementFactorHeigth, debug = false)
        {
            $(element).css({"left": (grundrissLeft) + (grundrissWidth/elementFactorLeft), "top": (grundrissTop) + (grundrissHeigth/elementFactorTop), "width": (grundrissWidth/elementFactorWidth), "height": (grundrissHeigth/elementFactorHeigth)});
         
        }
         
         
        /* Skalierung der Symbolgrößen
        /* ======================================================== */
        /*function setResizeSymbol(debug = false)
        {
            if (device === "mobilePhone")
            {
                symbolHeigth = 43;
            }
            else
            {
                symbolHeigth = 65;  
            }
            $(".symbolGrundrissRaume .vis-inventwo-img").css({"height": symbolHeigth+"px"});
         
        }
        */ 
         
        // Skalierung der Wohnung
        /* ======================================================== */
        function setResizeApartment(debug = false)
        {
            
            // Fenstergröße
            windowWidth = $(window).width();
            windowHeigth = $(window).height();    
            windowFactor = windowWidth / windowHeigth; 
            
            // Abstand dynamisch an Fenstergröße anpassen
            setResizeSpace(windowWidth, windowHeigth, debug);
            
            // Fenstergröße und -faktor mit Abstand
            if ((windowWidth > (spaceSurrounding * 2))
               && (windowHeigth > (spaceSurrounding * 2)))
            {
                windowSpaceWidth = windowWidth - (spaceSurrounding * 2);
                windowSpaceHeigth = windowHeigth - (spaceSurrounding * 2); 
                windowSpaceFactor = windowSpaceWidth / windowSpaceHeigth;        
            }
            else
            {
                windowSpaceWidth = 0;
                windowSpaceHeigth = 0; 
                windowSpaceFactor = 0;  
            }
            
            // Grundrissgröße
            if (windowSpaceFactor < grundrissFactor)
            {
                // Fensterbreite maßgeblich
                
                // Grundriss mittig zentrieren
                grundrissWidth = (windowSpaceWidth);
                grundrissHeigth = (windowSpaceWidth) / grundrissFactor;
                grundrissLeft = spaceSurrounding;
                grundrissTop = spaceSurrounding + ((windowSpaceHeigth - grundrissHeigth) / 2);
                
                if (debug === true)
                {
                    console.log("Fensterbreite maßgeblich");
                }
            } else
            {
                // Fensterhöhe maßgeblich
                
                // Grundriss mittig zentrieren
                grundrissHeigth = (windowSpaceHeigth);
                grundrissWidth = (windowSpaceHeigth) * grundrissFactor;
                grundrissLeft = spaceSurrounding + (windowSpaceWidth - grundrissWidth) / 2;
                grundrissTop = spaceSurrounding; 
                
                if (debug === true)
                {
                    console.log("Fensterhöhe maßgeblich");
                }
            }
            
            // Größe und Position Grundriss anpassen
            $(widgetNameGrundriss).css({"left": grundrissLeft, "top": grundrissTop, "width": grundrissWidth,"height": grundrissHeigth});
         
            // Grundrissgröße nach Anpassung und Referenz für alle folgenden Elemente
            grundrissWidth = $(widgetNameGrundriss).width();
            grundrissHeigth = $(widgetNameGrundriss).height();
            
            // Position und -größe skalieren Wohnung
            setResizeElement(widgetNameLinkWohnung, grundrissLeft, grundrissTop, grundrissWidth, grundrissHeigth, linkWohnungFactorLeft, linkWohnungFactorTop, linkWohnungFactorWidth, linkWohnungFactorHeigth, debug);
            
            setResizeElement(widgetNameSymbolWohnung, grundrissLeft, grundrissTop, grundrissWidth, grundrissHeigth, symbolWohnungFactorLeft, symbolWohnungFactorTop, symbolWohnungFactorWidth, symbolWohnungFactorHeigth, debug);
            
            /*Position und -größe skalieren Wohnzimmer
            setResizeElement(widgetNameLinkWohnzimmer, grundrissLeft, grundrissTop, grundrissWidth, grundrissHeigth, linkWohnzimmerFactorLeft, linkWohnzimmerFactorTop, linkWohnzimmerFactorWidth, linkWohnzimmerFactorHeigth, debug);
            
            setResizeElement(widgetNameSymbolWohnzimmer, grundrissLeft, grundrissTop, grundrissWidth, grundrissHeigth, symbolWohnzimmerFactorLeft, symbolWohnzimmerFactorTop, symbolWohnzimmerFactorWidth, symbolWohnzimmerFactorHeigth, debug);
            
            // Position und -größe skalieren Küche
            setResizeElement(widgetNameLinkKueche, grundrissLeft, grundrissTop, grundrissWidth, grundrissHeigth, linkKuecheFactorLeft, linkKuecheFactorTop, linkKuecheFactorWidth, linkKuecheFactorHeigth, debug);
            
            setResizeElement(widgetNameSymbolKueche, grundrissLeft, grundrissTop, grundrissWidth, grundrissHeigth, symbolKuecheFactorLeft, symbolKuecheFactorTop, symbolKuecheFactorWidth, symbolKuecheFactorHeigth, debug);
            
            // Position und -größe skalieren Esszimmer
            setResizeElement(widgetNameLinkEsszimmer, grundrissLeft, grundrissTop, grundrissWidth, grundrissHeigth, linkEsszimmerFactorLeft, linkEsszimmerFactorTop, linkEsszimmerFactorWidth, linkEsszimmerFactorHeigth, debug);
            
            setResizeElement(widgetNameSymbolEsszimmer, grundrissLeft, grundrissTop, grundrissWidth, grundrissHeigth, symbolEsszimmerFactorLeft, symbolEsszimmerFactorTop, symbolEsszimmerFactorWidth, symbolEsszimmerFactorHeigth, debug);
            
            // Position und -größe skalieren Flur
            setResizeElement(widgetNameLinkFlur1, grundrissLeft, grundrissTop, grundrissWidth, grundrissHeigth, linkFlur1FactorLeft, linkFlur1FactorTop, linkFlur1FactorWidth, linkFlur1FactorHeigth, debug);
         
            setResizeElement(widgetNameLinkFlur2, grundrissLeft, grundrissTop, grundrissWidth, grundrissHeigth, linkFlur2FactorLeft, linkFlur2FactorTop, linkFlur2FactorWidth, linkFlur2FactorHeigth, debug);
            
            setResizeElement(widgetNameSymbolFlur, grundrissLeft, grundrissTop, grundrissWidth, grundrissHeigth, symbolFlurFactorLeft, symbolFlurFactorTop, symbolFlurFactorWidth, symbolFlurFactorHeigth, debug);
         
            // Position und -größe skalieren Schlafzimmer
            setResizeElement(widgetNameLinkSchlafzimmer, grundrissLeft, grundrissTop, grundrissWidth, grundrissHeigth, linkSchlafzimmerFactorLeft, linkSchlafzimmerFactorTop, linkSchlafzimmerFactorWidth, linkSchlafzimmerFactorHeigth, debug);
            
            setResizeElement(widgetNameSymbolSchlafzimmer, grundrissLeft, grundrissTop, grundrissWidth, grundrissHeigth, symbolSchlafzimmerFactorLeft, symbolSchlafzimmerFactorTop, symbolSchlafzimmerFactorWidth, symbolSchlafzimmerFactorHeigth, debug);
         
            // Position und -größe skalieren Kinderzimmer
            setResizeElement(widgetNameLinkKinderzimmer, grundrissLeft, grundrissTop, grundrissWidth, grundrissHeigth, linkKinderzimmerFactorLeft, linkKinderzimmerFactorTop, linkKinderzimmerFactorWidth, linkKinderzimmerFactorHeigth, debug);
            
            setResizeElement(widgetNameSymbolKinderzimmer, grundrissLeft, grundrissTop, grundrissWidth, grundrissHeigth, symbolKinderzimmerFactorLeft, symbolKinderzimmerFactorTop, symbolKinderzimmerFactorWidth, symbolKinderzimmerFactorHeigth, debug);
         
            // Position und -größe skalieren Badezimmer
            setResizeElement(widgetNameLinkBadezimmer, grundrissLeft, grundrissTop, grundrissWidth, grundrissHeigth, linkBadezimmerFactorLeft, linkBadezimmerFactorTop, linkBadezimmerFactorWidth, linkBadezimmerFactorHeigth, debug);
            
            setResizeElement(widgetNameSymbolBadezimmer, grundrissLeft, grundrissTop, grundrissWidth, grundrissHeigth, symbolBadezimmerFactorLeft, symbolBadezimmerFactorTop, symbolBadezimmerFactorWidth, symbolBadezimmerFactorHeigth, debug);
         
            // Position und -größe skalieren Gäste-WC
            setResizeElement(widgetNameLinkGaesteWc, grundrissLeft, grundrissTop, grundrissWidth, grundrissHeigth, linkGaesteWcFactorLeft, linkGaesteWcFactorTop, linkGaesteWcFactorWidth, linkGaesteWcFactorHeigth, debug);
            
            setResizeElement(widgetNameSymbolGaesteWc, grundrissLeft, grundrissTop, grundrissWidth, grundrissHeigth, symbolGaesteWcFactorLeft, symbolGaesteWcFactorTop, symbolGaesteWcFactorWidth, symbolGaesteWcFactorHeigth, debug);
            
            // Position und -größe skalieren Abstellraum
            setResizeElement(widgetNameLinkAbstellraum, grundrissLeft, grundrissTop, grundrissWidth, grundrissHeigth, linkAbstellraumFactorLeft, linkAbstellraumFactorTop, linkAbstellraumFactorWidth, linkAbstellraumFactorHeigth, debug);
            
            setResizeElement(widgetNameSymbolAbstellraum, grundrissLeft, grundrissTop, grundrissWidth, grundrissHeigth, symbolAbstellraumFactorLeft, symbolAbstellraumFactorTop, symbolAbstellraumFactorWidth, symbolAbstellraumFactorHeigth, debug);
         */
            if (debug === true)
            {
                console.log("Umgebender Abstand: " + spaceSurrounding);
                
                console.log("Fensterbreite: " + windowWidth);
                console.log("Fensterhöhe: " + windowHeigth);
                console.log("windowFactor: " + windowFactor);
                        
                console.log("Grundrissbreite: " + grundrissWidth);
                console.log("Grundrisshöhe: " + grundrissHeigth);
                console.log("grundrissFactor: " + grundrissFactor); 
            }
         
        }
         
         
        // Skriptstart
        /* ======================================================== */
        waitForElement($('body'),'.grundriss', 'dummy', 'dummy', function () {
            // Widget ist vollständig geladen, wir können irgendwas damit machen
            
            // Erkennen auf welchem Gerät die VIS läuft
            getDevice(debug);
            
            // Initialisiere Skalierung
            initResizeApartment(debug);
            
            // Initiale Skalierung
            setResizeApartment(debug);
            
            // Symbolgröße skalieren
            setResizeSymbol(debug);
            
            // Event registrieren bei Fenstergrößenänderung
            $(window).resize(function () 
            {
                // Skalierung anpassen
                setResizeApartment(debug);
         
            });
        }, 0, debug);
        
        M Online
        M Online
        MCU
        schrieb am zuletzt editiert von
        #2181

        @slipkorn_dh88 Funktion ist keine: -> liefert immer 1?
        f673fc76-127b-4a9a-8efe-dc772090c96e-image.png
        bis dahin müsste sie mindestens gehen:
        59969801-bed3-4908-9af3-d0a627bd82b2-image.png
        Wo sind der Link und das Symbol für den Link definiert?

        NUC i7 64GB mit Proxmox ---- Jarvis Infos Aktualisierungen der Doku auf Instagram verfolgen -> mcuiobroker Instagram
        Wenn Euch mein Vorschlag geholfen hat, bitte rechts "^" klicken.

        S 1 Antwort Letzte Antwort
        0
        • M MCU

          @slipkorn_dh88 Funktion ist keine: -> liefert immer 1?
          f673fc76-127b-4a9a-8efe-dc772090c96e-image.png
          bis dahin müsste sie mindestens gehen:
          59969801-bed3-4908-9af3-d0a627bd82b2-image.png
          Wo sind der Link und das Symbol für den Link definiert?

          S Offline
          S Offline
          SlipKoRn_DH88
          schrieb am zuletzt editiert von SlipKoRn_DH88
          #2182

          @mcu
          Da wo bei dir im gescreenshoteten Script die 1 steht, wird im Script in VIS das hier gezeigt: (Zeile 96)

          Frage.jpg

          Ich glaube das ist ein Kopier/Formatierungsfehler, wenn man den Code aus dem Vis Script hier im Forum einbindet.

          f673fc76-127b-4a9a-8efe-dc772090c96e-image.png
          bis dahin müsste sie mindestens gehen:

          Das habe ich nun bis dahin wieder aktiviert.

          Wo sind der Link und das Symbol für den Link definiert?

          Dazu habe ich bisher keine Widgets angelegt, da ich es erst einmal nur mit dem Bild des Grundrisses ohne weitere Widgets versuchen wollte.

          Mit der Änderung tat sich nichts.

          M 1 Antwort Letzte Antwort
          0
          • S SlipKoRn_DH88

            @mcu
            Da wo bei dir im gescreenshoteten Script die 1 steht, wird im Script in VIS das hier gezeigt: (Zeile 96)

            Frage.jpg

            Ich glaube das ist ein Kopier/Formatierungsfehler, wenn man den Code aus dem Vis Script hier im Forum einbindet.

            f673fc76-127b-4a9a-8efe-dc772090c96e-image.png
            bis dahin müsste sie mindestens gehen:

            Das habe ich nun bis dahin wieder aktiviert.

            Wo sind der Link und das Symbol für den Link definiert?

            Dazu habe ich bisher keine Widgets angelegt, da ich es erst einmal nur mit dem Bild des Grundrisses ohne weitere Widgets versuchen wollte.

            Mit der Änderung tat sich nichts.

            M Online
            M Online
            MCU
            schrieb am zuletzt editiert von
            #2183

            @slipkorn_dh88 Was soll sich denn jetzt tun?

            NUC i7 64GB mit Proxmox ---- Jarvis Infos Aktualisierungen der Doku auf Instagram verfolgen -> mcuiobroker Instagram
            Wenn Euch mein Vorschlag geholfen hat, bitte rechts "^" klicken.

            U S Dominik F.D 3 Antworten Letzte Antwort
            0
            • M MCU

              @slipkorn_dh88 Was soll sich denn jetzt tun?

              U Offline
              U Offline
              uwe72
              schrieb am zuletzt editiert von uwe72
              #2184

              @mcu

              Meine Jarvis-Visualisierungen lassen sich ohne Probleme über den Browser anzeigen.

              Über das Handy bekomme ich keinen Zugriff:
              fc0597b2-923b-4293-883d-63c1561c19f6-image.png

              ioBroker läuft im docker.

              Hat jemand eine Idee?

              So weit komme ich noch:
              da6e5e39-0d03-4e3f-9f1f-ab08f4ca793a-image.png

              U 1 Antwort Letzte Antwort
              0
              • M MCU

                @slipkorn_dh88 Was soll sich denn jetzt tun?

                S Offline
                S Offline
                SlipKoRn_DH88
                schrieb am zuletzt editiert von
                #2185

                @mcu Das Script soll doch dafür sorgen, dass die Grundriss VIS responsive wird. Das tut sie aber nicht. Ich habe lediglich das Script von @RkcCorian kopiert, die ID des Grundriss Widgets auf meine ID angepasst und alles, für mich noch nicht nötige, ausgeklammert.

                Ich möchte einfach erst einmal meinen Grundriss responsiv machen.

                Die Symbole und passenden Links zu den Jarvis Tabs konnte ich problemlos erstellen, aber das kommt später.

                In erster Linie geht es um responsive, da ich responsive dann auch auf meine anderen in Jarvis per iFrame eingebundenen VIS Seiten anwenden kann.

                U 1 Antwort Letzte Antwort
                0
                • S SlipKoRn_DH88

                  @mcu Das Script soll doch dafür sorgen, dass die Grundriss VIS responsive wird. Das tut sie aber nicht. Ich habe lediglich das Script von @RkcCorian kopiert, die ID des Grundriss Widgets auf meine ID angepasst und alles, für mich noch nicht nötige, ausgeklammert.

                  Ich möchte einfach erst einmal meinen Grundriss responsiv machen.

                  Die Symbole und passenden Links zu den Jarvis Tabs konnte ich problemlos erstellen, aber das kommt später.

                  In erster Linie geht es um responsive, da ich responsive dann auch auf meine anderen in Jarvis per iFrame eingebundenen VIS Seiten anwenden kann.

                  U Offline
                  U Offline
                  uwe72
                  schrieb am zuletzt editiert von
                  #2186

                  @slipkorn_dh88

                  Es geht mich zwar nichts an. Aber es hat nicht wirklich was mit Jarvis zu tun.

                  Warum muss es denn überhuapt responsive sein? Läuft dies auf unterschiedlichen Devices?

                  Ich habe mit SweetHome3D die Bilder exakt (auf den Pixel genau) so groß gemacht wie ich sie hier in der VIS benötige. Das mit dem Script ist meiner Meinung nach doch viel zu tricky.......

                  R 1 Antwort Letzte Antwort
                  0
                  • U uwe72

                    @mcu

                    Meine Jarvis-Visualisierungen lassen sich ohne Probleme über den Browser anzeigen.

                    Über das Handy bekomme ich keinen Zugriff:
                    fc0597b2-923b-4293-883d-63c1561c19f6-image.png

                    ioBroker läuft im docker.

                    Hat jemand eine Idee?

                    So weit komme ich noch:
                    da6e5e39-0d03-4e3f-9f1f-ab08f4ca793a-image.png

                    U Offline
                    U Offline
                    uwe72
                    schrieb am zuletzt editiert von
                    #2187

                    @uwe72 said in jarvis v3.0.0 - just another remarkable vis:

                    @mcu

                    Meine Jarvis-Visualisierungen lassen sich ohne Probleme über den Browser anzeigen.

                    Über das Handy bekomme ich keinen Zugriff:
                    fc0597b2-923b-4293-883d-63c1561c19f6-image.png

                    ioBroker läuft im docker.

                    Hat jemand eine Idee?

                    So weit komme ich noch:
                    da6e5e39-0d03-4e3f-9f1f-ab08f4ca793a-image.png

                    @MCU

                    Mensch, ich müsste viel mehr deine hervorragende Doku lesen!!!!
                    https://mcuiobroker.gitbook.io/jarvis-infos/jarvis/besonderheiten-v3/allgemein/verbindungsaufbau

                    Funktioniert nun!

                    1 Antwort Letzte Antwort
                    2
                    • U uwe72

                      @slipkorn_dh88

                      Es geht mich zwar nichts an. Aber es hat nicht wirklich was mit Jarvis zu tun.

                      Warum muss es denn überhuapt responsive sein? Läuft dies auf unterschiedlichen Devices?

                      Ich habe mit SweetHome3D die Bilder exakt (auf den Pixel genau) so groß gemacht wie ich sie hier in der VIS benötige. Das mit dem Script ist meiner Meinung nach doch viel zu tricky.......

                      R Offline
                      R Offline
                      RkcCorian
                      schrieb am zuletzt editiert von RkcCorian
                      #2188

                      @uwe72 Moin Zusammen!
                      Ich spreche mal für mich, kann für Andere aber anders sein...
                      In meinem Fall nutze ich JARVIS auf PC, Tablet, sowie verschiedenen Handys der Familie mit jeweils unterschiedlichen Bildschirmen > Eine Visualisierung und alle können es mit einem Gerät der Wahl bedienen, auch von unterwegs. Da ich manches "nur" in VIS machen konnte, wie bspw. den Grundriss habe ich es in VIS gelöst und in JARVIS als iFrame eingebunden. Mir ist es zuviel Aufwand eine VIS "nur" für eine Bildschirmgröße zu machen, da in meinem Fall verschiedene Geräte genutzt werden. Auch wenn ich nur ein Gerät hätte wäre es mir zuviel Aufwand wenn mein Tablet mal kaputt geht und ich ein anderes einbaue die VIS nachzujustieren.
                      Ein anderes Beispiel als mein Grundriss ist eine FireTV Fernbedienung, welche nach dem gleichen Prinzip funktioniert (Vgl. auch meine Veröffentlichung vor ein paar Tagen weiter oben)...
                      0011.jpg

                      Vgl. auch https://mcuiobroker.gitbook.io/jarvis-infos/jarvis/vis-grundriss-rkccorian, Mcu hat ganz unten auch ein PDF meiner gesamte Veröffentlichung bereit gestellt
                      @Mcu: Vielen Dank dafür nochmal!!!

                      @SlipKoRn_DH88

                      1. Bzgl. Deiner "1"... die ist weder in meinem Skript, noch in der Mcu-Doku, noch in dem ursprünglichen Post drin. Hast Du hier evtl. einen Fehler gemacht?!
                      2. Das Skript funktioniert derart, dass beim Aufstarten die Widget Größe und Position bezogen auf den Grundriss beim Aufstarten ermittelt wird. Die einmal ermittelten Infos werden dann beim Erstmaligen Laden an die Bildschirmgröße angepasst und bei Änderung der Bildschirmgröße (am PC) erneut angepasst. Damit also was passiert musst Du die Widgets, welche Skaliert werden sollen manuell im Skript einbauen, vgl. auch meine dort hinterlegten Widgets. Es reicht nicht das Skript reinzukopieren
                      Dominik F.D 1 Antwort Letzte Antwort
                      1
                      • R RkcCorian

                        @uwe72 Moin Zusammen!
                        Ich spreche mal für mich, kann für Andere aber anders sein...
                        In meinem Fall nutze ich JARVIS auf PC, Tablet, sowie verschiedenen Handys der Familie mit jeweils unterschiedlichen Bildschirmen > Eine Visualisierung und alle können es mit einem Gerät der Wahl bedienen, auch von unterwegs. Da ich manches "nur" in VIS machen konnte, wie bspw. den Grundriss habe ich es in VIS gelöst und in JARVIS als iFrame eingebunden. Mir ist es zuviel Aufwand eine VIS "nur" für eine Bildschirmgröße zu machen, da in meinem Fall verschiedene Geräte genutzt werden. Auch wenn ich nur ein Gerät hätte wäre es mir zuviel Aufwand wenn mein Tablet mal kaputt geht und ich ein anderes einbaue die VIS nachzujustieren.
                        Ein anderes Beispiel als mein Grundriss ist eine FireTV Fernbedienung, welche nach dem gleichen Prinzip funktioniert (Vgl. auch meine Veröffentlichung vor ein paar Tagen weiter oben)...
                        0011.jpg

                        Vgl. auch https://mcuiobroker.gitbook.io/jarvis-infos/jarvis/vis-grundriss-rkccorian, Mcu hat ganz unten auch ein PDF meiner gesamte Veröffentlichung bereit gestellt
                        @Mcu: Vielen Dank dafür nochmal!!!

                        @SlipKoRn_DH88

                        1. Bzgl. Deiner "1"... die ist weder in meinem Skript, noch in der Mcu-Doku, noch in dem ursprünglichen Post drin. Hast Du hier evtl. einen Fehler gemacht?!
                        2. Das Skript funktioniert derart, dass beim Aufstarten die Widget Größe und Position bezogen auf den Grundriss beim Aufstarten ermittelt wird. Die einmal ermittelten Infos werden dann beim Erstmaligen Laden an die Bildschirmgröße angepasst und bei Änderung der Bildschirmgröße (am PC) erneut angepasst. Damit also was passiert musst Du die Widgets, welche Skaliert werden sollen manuell im Skript einbauen, vgl. auch meine dort hinterlegten Widgets. Es reicht nicht das Skript reinzukopieren
                        Dominik F.D Offline
                        Dominik F.D Offline
                        Dominik F.
                        schrieb am zuletzt editiert von
                        #2189

                        @rkccorian

                        Ich habe die letzten Beiträge nicht befolgt, mir ist nur etwas in deinem Beitrag aufgefallen. Ich bin zwar auch von Vis auf Jarvis umgestiegen, jedoch ist es nicht richtig eine Vis für jede Bildschirmgröße machen zu müssen. Vis lässt sich genauso responsiv einstellen, wie es in Jarvis der Fall ist. Jarvis arbeitet ja viel mit CSS und genauso ist es in Vis auch möglich mittels CSS das ganze responsive zu gestalten.

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

                          @rkccorian

                          Ich habe die letzten Beiträge nicht befolgt, mir ist nur etwas in deinem Beitrag aufgefallen. Ich bin zwar auch von Vis auf Jarvis umgestiegen, jedoch ist es nicht richtig eine Vis für jede Bildschirmgröße machen zu müssen. Vis lässt sich genauso responsiv einstellen, wie es in Jarvis der Fall ist. Jarvis arbeitet ja viel mit CSS und genauso ist es in Vis auch möglich mittels CSS das ganze responsive zu gestalten.

                          R Offline
                          R Offline
                          RkcCorian
                          schrieb am zuletzt editiert von RkcCorian
                          #2190

                          @dominik-f Jup, richtig.
                          Ich schrieb von Visualisierung, damit ist nicht VIS alleine gemeint, sondern jegliche Visualisierung, egal welche.
                          Ich habe darauf geantwortet, warum man überhaupt eine VIS responsiv machen möchte (wie geschrieben, muss nicht sein, bei mir war es wichtig). VIS ist von sich aus m.W. erstmal nicht responsiv. Du kannst CSS einsetzen, damit bin ich aber schnell an Grenzen gekommen (oder war zu doof 🙈), daher die Lösung über Skript. Damit bekommst Du wie geschrieben auch die VIS responsiv. DAS (CSS und/oder Skript) muss man aber halt (leider manuell) machen.

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

                            @dominik-f Jup, richtig.
                            Ich schrieb von Visualisierung, damit ist nicht VIS alleine gemeint, sondern jegliche Visualisierung, egal welche.
                            Ich habe darauf geantwortet, warum man überhaupt eine VIS responsiv machen möchte (wie geschrieben, muss nicht sein, bei mir war es wichtig). VIS ist von sich aus m.W. erstmal nicht responsiv. Du kannst CSS einsetzen, damit bin ich aber schnell an Grenzen gekommen (oder war zu doof 🙈), daher die Lösung über Skript. Damit bekommst Du wie geschrieben auch die VIS responsiv. DAS (CSS und/oder Skript) muss man aber halt (leider manuell) machen.

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

                            @rkccorian

                            Ah okay, hatte die letzten Beiträge nicht verfolgt und dachte du meinst damit Vis und hab angenommen, dass du wegen responsive von Vis auf Jarvis gewechselt bist.
                            Ich bin zu Jarvis gewechselt, weil das CSS was ich genutzt habe leider nicht mehr weiterentwickelt wurde bzw der ersteller nicht mehr aktiv ist. Jarvis hatte für mich die Aussicht das es auf Jahre weiterentwickelt wird, das war für mich entscheident.

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

                              @rkccorian

                              Ah okay, hatte die letzten Beiträge nicht verfolgt und dachte du meinst damit Vis und hab angenommen, dass du wegen responsive von Vis auf Jarvis gewechselt bist.
                              Ich bin zu Jarvis gewechselt, weil das CSS was ich genutzt habe leider nicht mehr weiterentwickelt wurde bzw der ersteller nicht mehr aktiv ist. Jarvis hatte für mich die Aussicht das es auf Jahre weiterentwickelt wird, das war für mich entscheident.

                              R Offline
                              R Offline
                              RkcCorian
                              schrieb am zuletzt editiert von
                              #2192

                              @dominik-f Soweit auch meine Hoffnung 😃👍

                              1 Antwort Letzte Antwort
                              0
                              • Nico 0N Offline
                                Nico 0N Offline
                                Nico 0
                                schrieb am zuletzt editiert von Nico 0
                                #2193

                                Hallo,

                                erst einmal vielen Dank für den tollen Adapter. Ich bin gerade dabei mir ein Wand-Tablet (Fire HD10) mit Jarvis 3.0.11 einzurichten und arbeite mich gerade ein wenig in die Thematik ein.

                                Aktuell versuche ich Jarvis mit dem Fully Kiosk Browser 1.46-fire ans Laufen zu bekommen und habe aktuell das Problem, dass im Fully Browser alle Datenpunkte leer sind:

                                33638b01-c4cb-400f-8568-5f117eb5c466-image.png

                                Nutze ich Firefox Klar wird mir alles angezeigt:

                                9ba3a053-65d5-40cd-8233-c5ccd2825993-image.png

                                Hat jemand ein gleiches Problem bzw. könnt ihr mir sagen, ob es jetzt am Fully oder Jarvis liegt?

                                M 1 Antwort Letzte Antwort
                                0
                                • H Offline
                                  H Offline
                                  Herbie
                                  schrieb am zuletzt editiert von
                                  #2194

                                  Ich bin mittlerweile schon einige Schritte mit meiner Visualisierung mit jarvis bin jetzt aber wieder auf ein Problem gestoßen: Ich habe für die Desktop Variante einige Widgets angelegt. Jetzt möchte ich die im Smartphone etwas anzeigen. Ich hatte gehofft, das ich einfach die Widgets von der Desktop Variante in die Smartphonevariante rüberkopieren könnte, aber das bekomme ich nicht hin. Ich will ja nicht alle Widgets neu anlegen sondern nur die Reihenfolge etwas ändern.

                                  Kann mir jemand sagen wie man sich zeitsparend eine Smartphone Vis baut?

                                  Dominik F.D M 3 Antworten Letzte Antwort
                                  0
                                  • M MCU

                                    @slipkorn_dh88 Was soll sich denn jetzt tun?

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

                                    @mcu

                                    Ich brauche nochmal deine Hilfe.

                                    Nehmen wir mal an, es gibt Datenpunkt A und B. A ist ein ganz normaler State mit einem SwitchAction Button.
                                    Ich möchte, dass bei diesem State der LastChangeBody jedoch vom Datenpunkt B ist.

                                    Hier auf dem Bild geht es um den Bewegungsmelder OG_Diele. Ich möchte, dass der LastChangeBody halt die Veränderung von einem anderen Datenpunkt angezeigt wird.
                                    Der Button aktiviert die Motion Detection und ich möchte, dass die letzte Bewegung im LAstChangeBody angezeigt wird.

                                    Unbenannt.PNG

                                    M 1 Antwort Letzte Antwort
                                    0
                                    • H Herbie

                                      Ich bin mittlerweile schon einige Schritte mit meiner Visualisierung mit jarvis bin jetzt aber wieder auf ein Problem gestoßen: Ich habe für die Desktop Variante einige Widgets angelegt. Jetzt möchte ich die im Smartphone etwas anzeigen. Ich hatte gehofft, das ich einfach die Widgets von der Desktop Variante in die Smartphonevariante rüberkopieren könnte, aber das bekomme ich nicht hin. Ich will ja nicht alle Widgets neu anlegen sondern nur die Reihenfolge etwas ändern.

                                      Kann mir jemand sagen wie man sich zeitsparend eine Smartphone Vis baut?

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

                                      @herbie

                                      Ich benutze für den PC und fürs Handy das gleiche Layout. Ich bin dabei vom kleinsten Bildschirm beim Aufbau ausgegangen, d.h. ich habe es so gebaut, dass es fürs Handy passt, also die Reihenfolge der Widgets. Da Jarvis responsive ist, wird es auch gleichzeitig für größere Bildschirme passen. Die Breite und Größe der Widgets habe ich dann für den größeren Bildschirm angepasst, da sich auf dem Handy die Widgets automatisch an die Breite anpassen und dann untereinander angeordnet werden.

                                      1 Antwort Letzte Antwort
                                      0
                                      • Nico 0N Nico 0

                                        Hallo,

                                        erst einmal vielen Dank für den tollen Adapter. Ich bin gerade dabei mir ein Wand-Tablet (Fire HD10) mit Jarvis 3.0.11 einzurichten und arbeite mich gerade ein wenig in die Thematik ein.

                                        Aktuell versuche ich Jarvis mit dem Fully Kiosk Browser 1.46-fire ans Laufen zu bekommen und habe aktuell das Problem, dass im Fully Browser alle Datenpunkte leer sind:

                                        33638b01-c4cb-400f-8568-5f117eb5c466-image.png

                                        Nutze ich Firefox Klar wird mir alles angezeigt:

                                        9ba3a053-65d5-40cd-8233-c5ccd2825993-image.png

                                        Hat jemand ein gleiches Problem bzw. könnt ihr mir sagen, ob es jetzt am Fully oder Jarvis liegt?

                                        M Online
                                        M Online
                                        MCU
                                        schrieb am zuletzt editiert von
                                        #2197

                                        @nico-0 https://mcuiobroker.gitbook.io/jarvis-infos/tipps/fully-kiosk-browser

                                        NUC i7 64GB mit Proxmox ---- Jarvis Infos Aktualisierungen der Doku auf Instagram verfolgen -> mcuiobroker Instagram
                                        Wenn Euch mein Vorschlag geholfen hat, bitte rechts "^" klicken.

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

                                          @mcu

                                          Ich brauche nochmal deine Hilfe.

                                          Nehmen wir mal an, es gibt Datenpunkt A und B. A ist ein ganz normaler State mit einem SwitchAction Button.
                                          Ich möchte, dass bei diesem State der LastChangeBody jedoch vom Datenpunkt B ist.

                                          Hier auf dem Bild geht es um den Bewegungsmelder OG_Diele. Ich möchte, dass der LastChangeBody halt die Veränderung von einem anderen Datenpunkt angezeigt wird.
                                          Der Button aktiviert die Motion Detection und ich möchte, dass die letzte Bewegung im LAstChangeBody angezeigt wird.

                                          Unbenannt.PNG

                                          M Online
                                          M Online
                                          MCU
                                          schrieb am zuletzt editiert von MCU
                                          #2198

                                          @dominik-f Geht nur als Secondary-DP. Sonst Feature Request, es fehlt für LastChangeBody das Binding.

                                          NUC i7 64GB mit Proxmox ---- Jarvis Infos Aktualisierungen der Doku auf Instagram verfolgen -> mcuiobroker Instagram
                                          Wenn Euch mein Vorschlag geholfen hat, bitte rechts "^" klicken.

                                          1 Antwort Letzte Antwort
                                          1
                                          Antworten
                                          • In einem neuen Thema antworten
                                          Anmelden zum Antworten
                                          • Älteste zuerst
                                          • Neuste zuerst
                                          • Meiste Stimmen


                                          Support us

                                          ioBroker
                                          Community Adapters
                                          Donate

                                          722

                                          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