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

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

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

  • Neues Video "KI im Smart Home" - ioBroker plus n8n
    BluefoxB
    Bluefox
    16
    1
    3.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 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
                    • U uwe72

                      @mcu

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

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

                      ioBroker läuft im docker.

                      Hat jemand eine Idee?

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

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

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

                      @mcu

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

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

                      ioBroker läuft im docker.

                      Hat jemand eine Idee?

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

                      @MCU

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

                      Funktioniert nun!

                      1 Antwort Letzte Antwort
                      2
                      • U uwe72

                        @slipkorn_dh88

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

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

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

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

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

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

                        @SlipKoRn_DH88

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

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

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

                          @SlipKoRn_DH88

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

                          @rkccorian

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

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

                            @rkccorian

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

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

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

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

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

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

                              @rkccorian

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

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

                                @rkccorian

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

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

                                @dominik-f Soweit auch meine Hoffnung 😃👍

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

                                  Hallo,

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

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

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

                                  Nutze ich Firefox Klar wird mir alles angezeigt:

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

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

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

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

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

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

                                      @slipkorn_dh88 Was soll sich denn jetzt tun?

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

                                      @mcu

                                      Ich brauche nochmal deine Hilfe.

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

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

                                      Unbenannt.PNG

                                      M 1 Antwort Letzte Antwort
                                      0
                                      • H Herbie

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

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

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

                                        @herbie

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

                                        1 Antwort Letzte Antwort
                                        0
                                        • Nico 0N Nico 0

                                          Hallo,

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

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

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

                                          Nutze ich Firefox Klar wird mir alles angezeigt:

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

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

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

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

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

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


                                          Support us

                                          ioBroker
                                          Community Adapters
                                          Donate

                                          404

                                          Online

                                          32.4k

                                          Benutzer

                                          81.5k

                                          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