Skip to content
  • Aktuell
  • Tags
  • 0 Ungelesen 0
  • Kategorien
  • Unreplied
  • Beliebt
  • GitHub
  • Docu
  • Hilfe
Skins
  • Light
  • Brite
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dark
  • Cyborg
  • Darkly
  • Quartz
  • Slate
  • Solar
  • Superhero
  • Vapor

  • Standard: (Kein Skin)
  • Kein Skin
Einklappen
ioBroker Logo
  1. ioBroker Community Home
  2. Deutsch
  3. Tester
  4. jarvis v3.0.0 - just another remarkable vis

NEWS

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

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

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

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.
  • 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 ---- https://mcuiobroker.gitbook.io/jarvis-infos/ Aktualisierungen der Doku auf Instagram verfolgen -> https://www.instagram.com/mcuiobroker
      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 ---- https://mcuiobroker.gitbook.io/jarvis-infos/ Aktualisierungen der Doku auf Instagram verfolgen -> https://www.instagram.com/mcuiobroker
          Wenn Euch mein Vorschlag geholfen hat, bitte rechts "^" klicken.

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

            @slipkorn_dh88 Was soll sich denn jetzt tun?

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

            @mcu

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

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

            ioBroker läuft im docker.

            Hat jemand eine Idee?

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

            U 1 Antwort Letzte Antwort
            0
            • M MCU

              @slipkorn_dh88 Was soll sich denn jetzt tun?

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

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

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

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

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

              U 1 Antwort Letzte Antwort
              0
              • S SlipKoRn_DH88

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

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

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

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

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

                @slipkorn_dh88

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

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

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

                R 1 Antwort Letzte Antwort
                0
                • U uwe72

                  @mcu

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

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

                  ioBroker läuft im docker.

                  Hat jemand eine Idee?

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

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

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

                  @mcu

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

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

                  ioBroker läuft im docker.

                  Hat jemand eine Idee?

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

                  @MCU

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

                  Funktioniert nun!

                  1 Antwort Letzte Antwort
                  2
                  • U uwe72

                    @slipkorn_dh88

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

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

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

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

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

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

                    @SlipKoRn_DH88

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

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

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

                      @SlipKoRn_DH88

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

                      @rkccorian

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

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

                        @rkccorian

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

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

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

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

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

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

                          @rkccorian

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

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

                            @rkccorian

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

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

                            @dominik-f Soweit auch meine Hoffnung 😃👍

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

                              Hallo,

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

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

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

                              Nutze ich Firefox Klar wird mir alles angezeigt:

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

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

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

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

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

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

                                  @slipkorn_dh88 Was soll sich denn jetzt tun?

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

                                  @mcu

                                  Ich brauche nochmal deine Hilfe.

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

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

                                  Unbenannt.PNG

                                  M 1 Antwort Letzte Antwort
                                  0
                                  • H Herbie

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

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

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

                                    @herbie

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

                                    1 Antwort Letzte Antwort
                                    0
                                    • Nico 0N Nico 0

                                      Hallo,

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

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

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

                                      Nutze ich Firefox Klar wird mir alles angezeigt:

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

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

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

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

                                      NUC i7 64GB mit Proxmox ---- https://mcuiobroker.gitbook.io/jarvis-infos/ Aktualisierungen der Doku auf Instagram verfolgen -> https://www.instagram.com/mcuiobroker
                                      Wenn Euch mein Vorschlag geholfen hat, bitte rechts "^" klicken.

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

                                        @mcu

                                        Ich brauche nochmal deine Hilfe.

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

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

                                        Unbenannt.PNG

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

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

                                        NUC i7 64GB mit Proxmox ---- https://mcuiobroker.gitbook.io/jarvis-infos/ Aktualisierungen der Doku auf Instagram verfolgen -> https://www.instagram.com/mcuiobroker
                                        Wenn Euch mein Vorschlag geholfen hat, bitte rechts "^" klicken.

                                        1 Antwort Letzte Antwort
                                        1
                                        • H Herbie

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

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

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

                                          @herbie https://mcuiobroker.gitbook.io/jarvis-infos/jarvis/system-effektprog./v3-systemprogramme/move-widget-ordernumber-in-layout

                                          NUC i7 64GB mit Proxmox ---- https://mcuiobroker.gitbook.io/jarvis-infos/ Aktualisierungen der Doku auf Instagram verfolgen -> https://www.instagram.com/mcuiobroker
                                          Wenn Euch mein Vorschlag geholfen hat, bitte rechts "^" klicken.

                                          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

                                          732

                                          Online

                                          32.4k

                                          Benutzer

                                          81.4k

                                          Themen

                                          1.3m

                                          Beiträge
                                          Community
                                          Impressum | Datenschutz-Bestimmungen | Nutzungsbedingungen
                                          ioBroker Community 2014-2025
                                          logo
                                          • Anmelden

                                          • Du hast noch kein Konto? Registrieren

                                          • Anmelden oder registrieren, um zu suchen
                                          • Erster Beitrag
                                            Letzter Beitrag
                                          0
                                          • Aktuell
                                          • Tags
                                          • Ungelesen 0
                                          • Kategorien
                                          • Unreplied
                                          • Beliebt
                                          • GitHub
                                          • Docu
                                          • Hilfe