Skip to content
  • 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
  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

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

    @slipkorn_dh88 sieht klasse aus!!

    BIn auch grad dran es zu visualisieren, das mein aktueller Stand:

    4cedd954-1dac-4c25-95f6-8dc8dd83ec2d-image.png

    Das ist nicht von mir, sondern die Vorlage von @RkcCorian
    Ich bekomme das Script leider nicht bei mir zum laufen und hatte daher nach einer Anleitung zum Anpassen gefragt.

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

    @slipkorn_dh88 Anleitung gibt es noch nicht, das dauert noch. Erstmal als Hinweis:
    Das "Script" gehört in die zugehörige VIS und hat nichts mit javascript-Script oder mit jarvis direkt zu tun.
    18ccc64a-4bba-47d5-997e-7917cc840741-image.png

    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 Anleitung gibt es noch nicht, das dauert noch. Erstmal als Hinweis:
      Das "Script" gehört in die zugehörige VIS und hat nichts mit javascript-Script oder mit jarvis direkt zu tun.
      18ccc64a-4bba-47d5-997e-7917cc840741-image.png

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

      @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 1 Antwort Letzte Antwort
      0
      • 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
                                          Antworten
                                          • In einem neuen Thema antworten
                                          Anmelden zum Antworten
                                          • Älteste zuerst
                                          • Neuste zuerst
                                          • Meiste Stimmen


                                          Support us

                                          ioBroker
                                          Community Adapters
                                          Donate

                                          430

                                          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
                                          • Aktuell
                                          • Tags
                                          • Ungelesen 0
                                          • Kategorien
                                          • Unreplied
                                          • Beliebt
                                          • GitHub
                                          • Docu
                                          • Hilfe