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

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

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

jarvis v3.0.0 - just another remarkable vis

Geplant Angeheftet Gesperrt Verschoben Tester
jarvismaterialmaterial uimaterialdesignvisvisualisierungvisualization
4.5k Beiträge 254 Kommentatoren 2.7m Aufrufe 209 Watching
  • Älteste zuerst
  • Neuste zuerst
  • Meiste Stimmen
Antworten
  • In einem neuen Thema antworten
Anmelden zum Antworten
Dieses Thema wurde gelöscht. Nur Nutzer mit entsprechenden Rechten können es sehen.
  • S SlipKoRn_DH88

    Hat jemand schon einmal versucht die lokale ioBroker URL per iFrame einzubinden? Ich erhalte dabei die Fehlermeldung 192.168.178.71 hat die Verbindung abgelehnt.

    Ist das generell nicht möglich? Oder kennt jemand ein Trick?

    Danke!

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

    @slipkorn_dh88 Funktioniert?
    11f88602-3222-4b9e-8c7f-b60d2a29cd68-image.png
    Wie sieht denn die URL aus?

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

    1 Antwort Letzte Antwort
    0
    • S Online
      S Online
      SlipKoRn_DH88
      schrieb am zuletzt editiert von
      #2120

      @mcu das ist schonmal gut das es generell funktioniert.

      Ich hatte bereits versucht:
      http://192.168.178.71:8081/#tab-intro
      http://192.168.178.71:8081/
      http://192.168.178.71

      M 1 Antwort Letzte Antwort
      0
      • S SlipKoRn_DH88

        @mcu das ist schonmal gut das es generell funktioniert.

        Ich hatte bereits versucht:
        http://192.168.178.71:8081/#tab-intro
        http://192.168.178.71:8081/
        http://192.168.178.71

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

        @slipkorn_dh88
        http://192.168.178.89:8082
        8081 verweigert er, stimmt.

        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
          http://192.168.178.89:8082
          8081 verweigert er, stimmt.

          S Online
          S Online
          SlipKoRn_DH88
          schrieb am zuletzt editiert von
          #2122

          @mcu
          Ok, mit 8082 bekomme ich die gleiche Übersicht wie aus deinem Screenshot. VIS Runtime und VIS Editor funktionieren, aber ADMIN leider nicht. Hier kommt dann wieder: hat die Verbindung abgelehnt.

          1 Antwort Letzte Antwort
          0
          • K Offline
            K Offline
            kohe
            schrieb am zuletzt editiert von kohe
            #2123

            Moin Moin!

            Kurfassung:
            Kann mir einer mal einen Tipp geben, wie ich ein RP2 (Rpi-Monitor) Gerät in Jarvis importiere? Ich stehe da auf dem Schlauch und finde keine Doku, die hilft. ..ok, ODER ich bin zu blind 😉

            Länger:
            Ich bin ein Neuer hier, über noch im ioBroker und Jarvis. Die Kurzhilfe im Importer zum rpi2 Adapter "..Datenpunkte .. müssen unter einem Gemeinsem state.." hilft nicht so wirklich weiter.

            Wie müssen die Datenpunkt aussehen / als Alias angelegt werden?
            ..oder ist der Ansatz schon falsch?

            Für jeden Tipp bin ich Dankbar!

            Da ich von Jarvis echt beeindruckt bin, würde ich mich dann auch gern dran beteiligen und den Teil für rpi2 mit Bildern dokumentieren und zur Verfügung stellen.

            Grüße und Danke im Voraus
            Kai

            P.S.: Ich hoffe ich hab das Topic jetzt hier richtig erstellt. Das Forum hier verwirrt mich noch etwas :innocent:

            L M 2 Antworten Letzte Antwort
            0
            • the-masterplanT Offline
              the-masterplanT Offline
              the-masterplan
              schrieb am zuletzt editiert von
              #2124

              Habe gerade von 3.0.5 auf 3.0.11 geupdated. Jetzt lädt Jarvis bei Seitenaufruf erst ganz normal aber nach 5 Sekunden kriege ich einen roten Bildschirm und dort steht "Error: verification failed." Hat jemand eine Idee was ich dagegen tun könnte?

              M 1 Antwort Letzte Antwort
              0
              • K kohe

                Moin Moin!

                Kurfassung:
                Kann mir einer mal einen Tipp geben, wie ich ein RP2 (Rpi-Monitor) Gerät in Jarvis importiere? Ich stehe da auf dem Schlauch und finde keine Doku, die hilft. ..ok, ODER ich bin zu blind 😉

                Länger:
                Ich bin ein Neuer hier, über noch im ioBroker und Jarvis. Die Kurzhilfe im Importer zum rpi2 Adapter "..Datenpunkte .. müssen unter einem Gemeinsem state.." hilft nicht so wirklich weiter.

                Wie müssen die Datenpunkt aussehen / als Alias angelegt werden?
                ..oder ist der Ansatz schon falsch?

                Für jeden Tipp bin ich Dankbar!

                Da ich von Jarvis echt beeindruckt bin, würde ich mich dann auch gern dran beteiligen und den Teil für rpi2 mit Bildern dokumentieren und zur Verfügung stellen.

                Grüße und Danke im Voraus
                Kai

                P.S.: Ich hoffe ich hab das Topic jetzt hier richtig erstellt. Das Forum hier verwirrt mich noch etwas :innocent:

                L Offline
                L Offline
                Lines
                schrieb am zuletzt editiert von
                #2125

                @kohe Hallo auch,

                ja, mit der Forumssoftware kämpfe ich als "Neuer" auch noch! ;-)

                Schlimmer noch, als Neuer bin ich mir nicht sicher, ob ich Dein geschildertes Problem richtig nachvollziehen kann. Ich gehe einmal davon aus, dass in iobroker unter Objekte Dein Datenpunkt vom RP2 zu finden ist.
                Falls dem so ist:
                Jarvis => Konfiguration => Gerät => Gerät anlegen und die exakte "Adresse"=Name des Datenpunktes aus iobroker kopieren und in die entsprechende Stelle im Formular einfügen.
                Das neue Gerät muss dann mit einem "Widget" gekoppelt werden, welches im Layout positioniert wird,

                Hoffentlich kannst Du etwas davon gebrauchen.

                LG
                Lines

                K 1 Antwort Letzte Antwort
                0
                • L Lines

                  @kohe Hallo auch,

                  ja, mit der Forumssoftware kämpfe ich als "Neuer" auch noch! ;-)

                  Schlimmer noch, als Neuer bin ich mir nicht sicher, ob ich Dein geschildertes Problem richtig nachvollziehen kann. Ich gehe einmal davon aus, dass in iobroker unter Objekte Dein Datenpunkt vom RP2 zu finden ist.
                  Falls dem so ist:
                  Jarvis => Konfiguration => Gerät => Gerät anlegen und die exakte "Adresse"=Name des Datenpunktes aus iobroker kopieren und in die entsprechende Stelle im Formular einfügen.
                  Das neue Gerät muss dann mit einem "Widget" gekoppelt werden, welches im Layout positioniert wird,

                  Hoffentlich kannst Du etwas davon gebrauchen.

                  LG
                  Lines

                  K Offline
                  K Offline
                  kohe
                  schrieb am zuletzt editiert von
                  #2126

                  @lines Hi Lines!

                  Danke für Deine Antwort! Stimmt, meine Beschreibung war mäßig präzise. Ich gelobe Besserung 😉 deshalb jetzt mit ein paar Bildern.

                  Korrekt. Ich sehe im ioBorker Folgendes:

                  Bildschirmfoto 2022-02-19 um 18.53.51.png

                  Wenn ich richtig verstanden habe, beschreibst Du oben den "manuellen Weg" ein Gerät in Jarvis anzulegen und Datenpunkte mit ioBroker zu verknüpfen.

                  Ich würde gern "Geräte importieren" / rpi2 verwenden und daran scheitere ich.

                  Bildschirmfoto 2022-02-19 um 18.58.42.png

                  Wie muss ich den Text im Tooltip verstehen / anwenden, damit der Importer mit das rpi2 Objekt erkennt.

                  Grüße
                  Kai

                  1 Antwort Letzte Antwort
                  0
                  • K kohe

                    Moin Moin!

                    Kurfassung:
                    Kann mir einer mal einen Tipp geben, wie ich ein RP2 (Rpi-Monitor) Gerät in Jarvis importiere? Ich stehe da auf dem Schlauch und finde keine Doku, die hilft. ..ok, ODER ich bin zu blind 😉

                    Länger:
                    Ich bin ein Neuer hier, über noch im ioBroker und Jarvis. Die Kurzhilfe im Importer zum rpi2 Adapter "..Datenpunkte .. müssen unter einem Gemeinsem state.." hilft nicht so wirklich weiter.

                    Wie müssen die Datenpunkt aussehen / als Alias angelegt werden?
                    ..oder ist der Ansatz schon falsch?

                    Für jeden Tipp bin ich Dankbar!

                    Da ich von Jarvis echt beeindruckt bin, würde ich mich dann auch gern dran beteiligen und den Teil für rpi2 mit Bildern dokumentieren und zur Verfügung stellen.

                    Grüße und Danke im Voraus
                    Kai

                    P.S.: Ich hoffe ich hab das Topic jetzt hier richtig erstellt. Das Forum hier verwirrt mich noch etwas :innocent:

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

                    @kohe
                    Legt der Importer denn die DPs nicht an?
                    Wenn du alle anderen Adapter abwählst und nur der rpi2?
                    Was kommt dann als Ergebnis?
                    1b9ab459-ad5a-4631-b57c-d03fbfe2027b-image.png
                    Ergebnis:
                    448e29d8-3737-4600-819f-e91e451fbf79-image.png

                    ALIAS-DPs haben z.B. den Aufbau: alias.0.Power0.actual

                    Du wiillst die DPs alle nur anzeigen und nur wenige davon?

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

                    K 1 Antwort Letzte Antwort
                    0
                    • the-masterplanT the-masterplan

                      Habe gerade von 3.0.5 auf 3.0.11 geupdated. Jetzt lädt Jarvis bei Seitenaufruf erst ganz normal aber nach 5 Sekunden kriege ich einen roten Bildschirm und dort steht "Error: verification failed." Hat jemand eine Idee was ich dagegen tun könnte?

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

                      @maximilian-garbe iobroker upload jarvis auf der console schon gemacht?
                      Nachdem Start -> F12 auf der Seite -> Ergebnis Bild anzeigen.

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

                      the-masterplanT 1 Antwort Letzte Antwort
                      0
                      • M MCU

                        @maximilian-garbe iobroker upload jarvis auf der console schon gemacht?
                        Nachdem Start -> F12 auf der Seite -> Ergebnis Bild anzeigen.

                        the-masterplanT Offline
                        the-masterplanT Offline
                        the-masterplan
                        schrieb am zuletzt editiert von
                        #2129

                        @mcu Habe gerade ein node-update von Version 12 auf Version 14 gemacht. jetzt ist der Fehler weg. Keine Ahnung warum aber Hauptsache es läuft wieder

                        1 Antwort Letzte Antwort
                        0
                        • M MCU

                          @kohe
                          Legt der Importer denn die DPs nicht an?
                          Wenn du alle anderen Adapter abwählst und nur der rpi2?
                          Was kommt dann als Ergebnis?
                          1b9ab459-ad5a-4631-b57c-d03fbfe2027b-image.png
                          Ergebnis:
                          448e29d8-3737-4600-819f-e91e451fbf79-image.png

                          ALIAS-DPs haben z.B. den Aufbau: alias.0.Power0.actual

                          Du wiillst die DPs alle nur anzeigen und nur wenige davon?

                          K Offline
                          K Offline
                          kohe
                          schrieb am zuletzt editiert von
                          #2130

                          @mcu Hi und Danke für Deine Hilfe!

                          Ich hab genau das probiert: Alles AUS ausser den rpi2 Adapter.
                          Ergebnis genau wie in deinem Bild: 0 Geräte zu importieren.

                          Zu Deiner Frage wegen der Anzeige:
                          Nach dem Import von anderen Adapter-Objekten habe ich immer die Datenpunkte nach dem Import entfernt, welche ich nicht anzeigen möchte, um Ressourcen zu sparen.
                          Würde schon einige Werte des Pis anzeigen wollen.
                          Hab ich da einen Denkfehler?

                          M 1 Antwort Letzte Antwort
                          0
                          • K kohe

                            @mcu Hi und Danke für Deine Hilfe!

                            Ich hab genau das probiert: Alles AUS ausser den rpi2 Adapter.
                            Ergebnis genau wie in deinem Bild: 0 Geräte zu importieren.

                            Zu Deiner Frage wegen der Anzeige:
                            Nach dem Import von anderen Adapter-Objekten habe ich immer die Datenpunkte nach dem Import entfernt, welche ich nicht anzeigen möchte, um Ressourcen zu sparen.
                            Würde schon einige Werte des Pis anzeigen wollen.
                            Hab ich da einen Denkfehler?

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

                            @kohe
                            z.B.
                            c8ba7039-b776-4330-a9d6-17070482cf26-image.png
                            Du kannst dir ja die Werte raussuchen, die du haben willst und manuell anlegen:
                            3c64486c-ec12-4033-a8af-4a1321eda37c-image.png
                            f841348d-bf8e-4c7c-802d-220d8cb2d4c6-image.png
                            Es gibt dafür auch ein Script, dass das machen kann. Dies befindet sich aber noch in der Testphase.
                            https://mcuiobroker.gitbook.io/jarvis-infos/jarvis/system-effektprog./v3-systemprogramme/adddevice
                            Evtl auch damit anfangen:
                            https://mcuiobroker.gitbook.io/jarvis-infos/jarvis/v3-fuer-einsteiger

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

                            1 Antwort Letzte Antwort
                            0
                            • B Offline
                              B Offline
                              BenjaminCz
                              schrieb am zuletzt editiert von
                              #2132

                              Hallo,
                              weiß einer von euch wie man in Jarvis 3.0.11 auf dem Smartphone das wischen zwischen den Tabs deaktiviert ? Habe das Problem bei den Charts wenn ich mir diese anschauen möchte und wische die Zeitachse dann wechselt man die Tabs.

                              Vielen Dank!

                              M 1 Antwort Letzte Antwort
                              0
                              • B BenjaminCz

                                Hallo,
                                weiß einer von euch wie man in Jarvis 3.0.11 auf dem Smartphone das wischen zwischen den Tabs deaktiviert ? Habe das Problem bei den Charts wenn ich mir diese anschauen möchte und wische die Zeitachse dann wechselt man die Tabs.

                                Vielen Dank!

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

                                @benjamincz Bei der Zeitachse muss man auf dem Handy erst nur die Zeitachse anklicken und dann kann man hin- und herwischen.

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

                                B 1 Antwort Letzte Antwort
                                0
                                • K Offline
                                  K Offline
                                  kohe
                                  schrieb am zuletzt editiert von
                                  #2134

                                  @mcu Moin Moin! ! Alles klar, Danke Dir.

                                  Die Frage war ja: Was mache/verstehe ich falsch um den den Importer zu bemühen meine rpi2 Datenpunkte zu erkennen. Ist aber kein Problem. Dann mach is halt doch per Hand und lege mir da ein Gerät für an.

                                  Die Doku hatte ich mir angesehen, fand dort aber meine ich nur irgendwo die Info das alle Datenpunkte übernommen werden.

                                  Den Systemprogramme-Thread hatte ich noch nicht entdeckt. Schau ich mir mal.

                                  M 1 Antwort Letzte Antwort
                                  0
                                  • K kohe

                                    @mcu Moin Moin! ! Alles klar, Danke Dir.

                                    Die Frage war ja: Was mache/verstehe ich falsch um den den Importer zu bemühen meine rpi2 Datenpunkte zu erkennen. Ist aber kein Problem. Dann mach is halt doch per Hand und lege mir da ein Gerät für an.

                                    Die Doku hatte ich mir angesehen, fand dort aber meine ich nur irgendwo die Info das alle Datenpunkte übernommen werden.

                                    Den Systemprogramme-Thread hatte ich noch nicht entdeckt. Schau ich mir mal.

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

                                    @kohe sagte in jarvis v3.0.0 - just another remarkable vis:

                                    Was mache/verstehe ich falsch

                                    Gar nichts. Es funktioniert halt momentan nicht.

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

                                    K 1 Antwort Letzte Antwort
                                    0
                                    • M MCU

                                      @kohe sagte in jarvis v3.0.0 - just another remarkable vis:

                                      Was mache/verstehe ich falsch

                                      Gar nichts. Es funktioniert halt momentan nicht.

                                      K Offline
                                      K Offline
                                      kohe
                                      schrieb am zuletzt editiert von
                                      #2136

                                      @mcu :grinning: :+1:

                                      1 Antwort Letzte Antwort
                                      0
                                      • R Offline
                                        R Offline
                                        RkcCorian
                                        schrieb am zuletzt editiert von
                                        #2137

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

                                        Idee:

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

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

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

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

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

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

                                        • Skript um die Responsivität zu erreichen

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

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

                                          Idee:

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

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

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

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

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

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

                                          • Skript um die Responsivität zu erreichen

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

                                          @rkccorian Prima. Mega. Kannst du vielleicht noch ein gif(ScreenToGif) hinzufügen, indem man die Wirkung mal sehen kann? Danke.
                                          Ich übernehme es gleich in die Doku.
                                          https://mcuiobroker.gitbook.io/jarvis-infos/jarvis/vis-grundriss-rkccorian

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

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


                                          Support us

                                          ioBroker
                                          Community Adapters
                                          Donate

                                          804

                                          Online

                                          32.4k

                                          Benutzer

                                          81.6k

                                          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