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.3k

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

    @rkccorian

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

    @mcu Moin Mcu! Wie versprochen noch die Info bzgl. dem responsiven Grundriss mit VIS. Hoffe das hilft auch Anderen! :-)

    Idee:

    • Ein "Master"-Widget mit dem Grundriss (Erstellt mit SweetHome3D), welches laufend an die Bildschirmgröße angepasst wird (Position inkl. eingefügtem Abstand zum Rand, sowie die Größe mit Prüfung ob abhängig von Höhe oder Breite Skaliert werden soll, Mittige Position)
    • Einige "Link"-Widgets darüber (z-index), Verhältnis der Position und Größe bezogen auf das "Master"-Widget wird beim Start einmalig ermittelt. Weitere Skalierung immer anhand dieser Daten
    • Einige "Symbol"-Widgets darüber (z-index), Verhältnis der Position und Größe bezogen auf das "Master"-Widget wird beim Start einmalig ermittelt. Weitere Skalierung immer anhand dieser Daten
    • Skalierung mit unterschiedlichen Parametern für Handy vs. PC/Tablet durch Erkennung des Gerätes beim Starten

    Ergebnis sieht dann bspw. so aus...
    0031.jpg

    ===================================
    In VIS...

    • "Master"-Widget mit Grundriss
      6f444374-47c6-4ade-a7d5-f4ac70120038-image.png

    • "Link"-Widget
      3a120d48-79fe-4cc2-aea9-59f478226db0-image.png

    • "Symbol"-Widget
      debf5e5f-3e03-4d44-99fa-40e1da18753c-image.png

    • Skript um die Responsivität zu erreichen

    // Initialisiere Konstanten
    /* ======================================================== */
    var debug = false;
    
    var spaceSurroundingMin = 20;
    var spaceSurroundingScreensizeDependent = 20;
    var spaceSurroundingScreensizeDependentFactor = 600;
    
    var widgetNameGrundriss = "#w00002";
    var widgetNameLinkWohnung = "#w00012";
    var widgetNameLinkWohnzimmer = "#w00001";
    var widgetNameLinkKueche = "#w00003";
    var widgetNameLinkEsszimmer = "#w00011";
    var widgetNameLinkFlur1 = "#w00010";
    var widgetNameLinkFlur2 = "#w00009";
    var widgetNameLinkSchlafzimmer = "#w00004";
    var widgetNameLinkKinderzimmer = "#w00005";
    var widgetNameLinkBadezimmer = "#w00006";
    var widgetNameLinkGaesteWc = "#w00007";
    var widgetNameLinkAbstellraum = "#w00008";
    
    var widgetNameSymbolWohnung = "#w00017";
    var widgetNameSymbolWohnzimmer = "#w00013";
    var widgetNameSymbolKueche = "#w00014";
    var widgetNameSymbolEsszimmer = "#w00015";
    var widgetNameSymbolFlur = "#w00016";
    var widgetNameSymbolSchlafzimmer = "#w00018";
    var widgetNameSymbolKinderzimmer = "#w00019";
    var widgetNameSymbolBadezimmer = "#w00020";
    var widgetNameSymbolGaesteWc = "#w00021";
    var widgetNameSymbolAbstellraum = "#w00022";
    
    
    // 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('#w00002'));
        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);
    

    Sehr geile Sache! Ich habe versucht das Script testweise auf ein einziges Widget erst einmal zu beschränken. Leider fehlt mir doch das Wissen / die Erfahrung. Gibt es denn eine Anleitung oder Doku zum Anpassen des Scripts?

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

    @MCU

    Frage, wenn ich den unteren Slider ausschalte (was ich gemacht habe), wie komme ich dann wieder in die Konfig rein?

    7db89739-2e26-4bb6-a5ba-8b91160a1248-image.png

    U 1 Antwort Letzte Antwort
    0
    • S SlipKoRn_DH88

      @rkccorian

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

      @mcu Moin Mcu! Wie versprochen noch die Info bzgl. dem responsiven Grundriss mit VIS. Hoffe das hilft auch Anderen! :-)

      Idee:

      • Ein "Master"-Widget mit dem Grundriss (Erstellt mit SweetHome3D), welches laufend an die Bildschirmgröße angepasst wird (Position inkl. eingefügtem Abstand zum Rand, sowie die Größe mit Prüfung ob abhängig von Höhe oder Breite Skaliert werden soll, Mittige Position)
      • Einige "Link"-Widgets darüber (z-index), Verhältnis der Position und Größe bezogen auf das "Master"-Widget wird beim Start einmalig ermittelt. Weitere Skalierung immer anhand dieser Daten
      • Einige "Symbol"-Widgets darüber (z-index), Verhältnis der Position und Größe bezogen auf das "Master"-Widget wird beim Start einmalig ermittelt. Weitere Skalierung immer anhand dieser Daten
      • Skalierung mit unterschiedlichen Parametern für Handy vs. PC/Tablet durch Erkennung des Gerätes beim Starten

      Ergebnis sieht dann bspw. so aus...
      0031.jpg

      ===================================
      In VIS...

      • "Master"-Widget mit Grundriss
        6f444374-47c6-4ade-a7d5-f4ac70120038-image.png

      • "Link"-Widget
        3a120d48-79fe-4cc2-aea9-59f478226db0-image.png

      • "Symbol"-Widget
        debf5e5f-3e03-4d44-99fa-40e1da18753c-image.png

      • Skript um die Responsivität zu erreichen

      // Initialisiere Konstanten
      /* ======================================================== */
      var debug = false;
      
      var spaceSurroundingMin = 20;
      var spaceSurroundingScreensizeDependent = 20;
      var spaceSurroundingScreensizeDependentFactor = 600;
      
      var widgetNameGrundriss = "#w00002";
      var widgetNameLinkWohnung = "#w00012";
      var widgetNameLinkWohnzimmer = "#w00001";
      var widgetNameLinkKueche = "#w00003";
      var widgetNameLinkEsszimmer = "#w00011";
      var widgetNameLinkFlur1 = "#w00010";
      var widgetNameLinkFlur2 = "#w00009";
      var widgetNameLinkSchlafzimmer = "#w00004";
      var widgetNameLinkKinderzimmer = "#w00005";
      var widgetNameLinkBadezimmer = "#w00006";
      var widgetNameLinkGaesteWc = "#w00007";
      var widgetNameLinkAbstellraum = "#w00008";
      
      var widgetNameSymbolWohnung = "#w00017";
      var widgetNameSymbolWohnzimmer = "#w00013";
      var widgetNameSymbolKueche = "#w00014";
      var widgetNameSymbolEsszimmer = "#w00015";
      var widgetNameSymbolFlur = "#w00016";
      var widgetNameSymbolSchlafzimmer = "#w00018";
      var widgetNameSymbolKinderzimmer = "#w00019";
      var widgetNameSymbolBadezimmer = "#w00020";
      var widgetNameSymbolGaesteWc = "#w00021";
      var widgetNameSymbolAbstellraum = "#w00022";
      
      
      // 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('#w00002'));
          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);
      

      Sehr geile Sache! Ich habe versucht das Script testweise auf ein einziges Widget erst einmal zu beschränken. Leider fehlt mir doch das Wissen / die Erfahrung. Gibt es denn eine Anleitung oder Doku zum Anpassen des Scripts?

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

      @slipkorn_dh88 sieht klasse aus!!

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

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

      S 1 Antwort Letzte Antwort
      0
      • U uwe72

        @MCU

        Frage, wenn ich den unteren Slider ausschalte (was ich gemacht habe), wie komme ich dann wieder in die Konfig rein?

        7db89739-2e26-4bb6-a5ba-8b91160a1248-image.png

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

        @uwe72 ok, ich antworte mir mal selber. Man kann es ja zumindest direkt im Datenpunkt unter Jarvis wieder einschalten.

        U 1 Antwort Letzte Antwort
        0
        • U uwe72

          @uwe72 ok, ich antworte mir mal selber. Man kann es ja zumindest direkt im Datenpunkt unter Jarvis wieder einschalten.

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

          @MCU

          Frage: Ich schalte den Monitor auf dem die Visualisierung läuft per Bewegungsmelder stromlos bzw. bei Erkennung schalte ich den Strom wieder ein.

          Nachdem der Strom eingeschaltet ist wird immer (meistens) die linke Seitenleiste angezeigt. Kriege ich dies irgendwie hin, dass dies nicht passiert oder gerne auch gar nie angezeigt wird, da ich sowieso nur eine Seite habe?

          21393af6-447b-4e2f-a1ae-96f724554b3a-image.png

          U 1 Antwort Letzte Antwort
          0
          • U uwe72

            @MCU

            Frage: Ich schalte den Monitor auf dem die Visualisierung läuft per Bewegungsmelder stromlos bzw. bei Erkennung schalte ich den Strom wieder ein.

            Nachdem der Strom eingeschaltet ist wird immer (meistens) die linke Seitenleiste angezeigt. Kriege ich dies irgendwie hin, dass dies nicht passiert oder gerne auch gar nie angezeigt wird, da ich sowieso nur eine Seite habe?

            21393af6-447b-4e2f-a1ae-96f724554b3a-image.png

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

            @uwe72 ok "Sidebar Mini Mode" abschalten scheint damit besser zu funktionieren

            U 1 Antwort Letzte Antwort
            0
            • U uwe72

              @uwe72 ok "Sidebar Mini Mode" abschalten scheint damit besser zu funktionieren

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

              Dafür habe ich nun eine "Lücke".

              Kann man eigentlich die Spaltenbreite "nur" in Prozent angeben oder irgendwie auch in Pixel?

              Ich weiß dies verstößt sicherlich gegen das Thema "responsive Design".

              161c9c65-3da3-40f3-b35b-cba18711e543-image.png

              M 1 Antwort Letzte Antwort
              0
              • U uwe72

                Dafür habe ich nun eine "Lücke".

                Kann man eigentlich die Spaltenbreite "nur" in Prozent angeben oder irgendwie auch in Pixel?

                Ich weiß dies verstößt sicherlich gegen das Thema "responsive Design".

                161c9c65-3da3-40f3-b35b-cba18711e543-image.png

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

                @uwe72 Die Spaltenbreite ziehst du doch im Layout selber.
                https://mcuiobroker.gitbook.io/jarvis-infos/jarvis/besonderheiten-v3/layout
                Das ist keine Lücke, sondern ein Problem mit der Darstellung vom Videobild. Auflösung ist nicht angepasst, bzw. Seitenverhältnis passt nicht zum ausgewähltem Layoutbereich.7359b5e3-0d5e-40d8-9844-ab87627679ce-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.

                U 1 Antwort Letzte Antwort
                0
                • M MCU

                  @uwe72 Die Spaltenbreite ziehst du doch im Layout selber.
                  https://mcuiobroker.gitbook.io/jarvis-infos/jarvis/besonderheiten-v3/layout
                  Das ist keine Lücke, sondern ein Problem mit der Darstellung vom Videobild. Auflösung ist nicht angepasst, bzw. Seitenverhältnis passt nicht zum ausgewähltem Layoutbereich.7359b5e3-0d5e-40d8-9844-ab87627679ce-image.png

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

                  @mcu ja, ich ziehe es schon selber. Aber es "rastet" ja nur in bestimmten Bereichen ein. Kann es nicht Pixel genau festlegen. Richtig?

                  M 1 Antwort Letzte Antwort
                  0
                  • U uwe72

                    @mcu ja, ich ziehe es schon selber. Aber es "rastet" ja nur in bestimmten Bereichen ein. Kann es nicht Pixel genau festlegen. Richtig?

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

                    @uwe72 Korrekt. Dies soll bald einstellbar sein.

                    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
                    0
                    • U uwe72

                      @slipkorn_dh88 sieht klasse aus!!

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

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

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

                      @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 1 Antwort Letzte Antwort
                      0
                      • 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:+1:

                          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:+1:

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


                                          Support us

                                          ioBroker
                                          Community Adapters
                                          Donate

                                          605

                                          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