IP-Symcon HOME Konfiguration ???

Hallo,
ich habe eine Frage zur individuellen Konfiguration der IPS HOME Seite. Wie kann ich die IPS HOME individuell gestalten? Ich möchte verschiedene Ebenen und Räume erstellen, sodaß diese dann auch grafisch auf der IPS HOME angezeigt werden (so im angefügten Screenshot).

Bei mir erscheint auf der IPS HOME nichts, es werden lediglich die Räume auf der Auswahlleiste unten angezeigt. Ich habe bereits versucht unterschiedliche Ordern anzulegen und dann dorthin meine Räume verschoben. Dies funktioniert allerdings nicht.

Wie kann ich die IPS HOME individuell konfigurieren?

Gruß
Christian

Im Anhang zwei Bilder. Eines zeigt wie ich es gerne hätte (beispiel_soll.jpg) und das andere zeigt wie es bei mir tatsächlich aussieht (beispiel_ist.jpg). Zudem ist meine Objektbaumkonfiguration angefügt.

Hi,

Anleitung HIER.

Auch mir fehlte das Verständnis für die Dojo Tools, siehe DIESEN Link.

Eventuell hilft ja ein HINTERGRUNDBILD vorübergehend weiter, hat Horst netterweise in Arbeit. Huch, wo ist denn die Weiterentwicklung des Vorschlages geblieben? Hab SIE gefunden.

mfg

BerndJ

Hi Christian,

zur Ergänzung zu Deinen beigefügten Bildern und dem Wunsch.

Wenn als Kategorie die gewünschten Geschosse angezeigt werden sollen, dann must Du im Objektbaum die natürlich anlegen und die Zimmer dann darunter plazieren. Dann lüppt dat auch.

Zur Zeit ist im Objektbaum nur das als Kategorie angelegt, was auch angezeigt wird.

Mir ist aufgefallen, daß bei Deinem Wunsch noch diese eingeblendete Zentralauswahl vorhanden ist; die ist im Zuge der Weiterentwicklung rausgeflogen, kann aber individuell wieder aktiviert werden (weiß aber momentan nicht wie, aber lesen bildet).

mfg

BerndJ

Hallo BerndJ,
danke für Deine Tipps. Ich hatte bereits versucht mit Unterverzeichnissen die Ebenen zu erzeugen. Leider konnte ich auch dann keine Ebenen/Räume auf der HOME Seite sehen. Somit habe ich diese wieder entfernt, wesshalb diese auf dem Bild auch nicht mehr zu sehen sind.

Frage: Wie kann ich die „grafische“ Zentralauswahl beim aktuellen IPS wieder aktivieren? Ich würde diese gerne nutzen.

Hallo,

eine Home-Seite gab es nie, das war ein Popup das kam, wenn man unten links auf die aktuell tiefste Ebene mit Unterebenen geklickt hat. Home-Seite ist immer die zuletzt im Browser angezeigte und per Cookie gespeicherte Kategorie.
Das Popup gibt es jetzt nicht mehr, die Sachen sind alle in die Leiste unten gewandert. Das spart Klicks. Erstes Item ist Ebene hoch (was früher im Popup oben war), zweites Item ist aktuell tiefste Ebene mit Unterebenen (was in der Mitte war). Rest sind die Unterräume der Ebene.
Und nein, das alte Popup kann man auch nicht mehr nachträglich manuell anzeigen lassen, das ist nicht mehr im Code vorhanden. Müsste man sich komplett neu programmieren.

Das Hintergrundbild baue ich übrigens gerade ein. Muss nur noch irgendwie sehen, dass ich das Seitenverhältnis beibehalte und dabei nichts abschneide. Wer heute abend sonst nichts zu tun hat kann also gerne anfangen zu basteln.

Horst

Hallo Horst,

hast Du das noch irgendwo auf Deinem Rechner rumliegen?

Dann könnte man das Codeschnipsel allen Interessierten zur Verfügung stellen.

Warum so aufwendig? Leg doch einfach das Seitenverhältnis fest, bzw. ´ne Rechenformel zur Ermittlung der Pixelanzahl. Die meisten sollten in der Lage sein ihre Bilder in der Größe zu trimmen mit Hilfe eines Grafikprogrammes.
Kontrast und Grundton müssen ja sowieso angepaßt werden um mit dem Ergebnis auch arbeiten zu können.

mfg

Berndj

Irgend ein altes Backup davon habe ich in der Tat noch. Wer das ganze einsetzen will muss nur leider ein WebFront-Modul schreiben, das auf das normale ips-Modul zugreift, da die Daten ausliest und dann damit den Inhalt rendert. Wenn es unabhängig über mehrere Ebenen gehen soll muss die komplette Kommunikation eigenständig gelöst werden. Und wer das kann hat sicherlich die Fähigkeiten sich das ganze eh selber zu schreiben.
Der Code ist darüber hinaus nicht unbedingt mit der aktuellen Version kompatibel und auch noch recht umständlich, würde ich heutzutage anders schreiben.

    showRoomsPopup: function()
    {
        var popupLayerContent = webfront.controller.getApplication().getPopupLayer().show("Raumauswahl", true);
    
        // sub rooms
        var CRPSR = document.createElement("div");
        popupLayerContent.appendChild(CRPSR);
        CRPSR.id = "roomsPopupSubRooms";
        CRPSR.className = "roomsPopupSubRooms";
    
        // left
        var CRPSRCL = document.createElement("div");
        CRPSR.appendChild(CRPSRCL);
        CRPSRCL.className = "roomsPopupSubRoomsContainerLeft vCenterOuter";
    
        var CRPSRCLVCM = document.createElement("div");
        CRPSRCL.appendChild(CRPSRCLVCM);
        CRPSRCLVCM.className = "vCenterMiddle";
    
        var CRPSRCLC = document.createElement("div");
        CRPSRCLVCM.appendChild(CRPSRCLC);
        CRPSRCLC.id = "roomsPopupSubRoomsContainerLeftContent";
        CRPSRCLC.className = "roomsPopupSubRoomsContainerLeftContent vCenterInner";

        // right
        var CRPSRCR = document.createElement("div");
        CRPSR.appendChild(CRPSRCR);
        CRPSRCR.className = "roomsPopupSubRoomsContainerRight vCenterOuter";
    
        var CRPSRCRVCM = document.createElement("div");
        CRPSRCR.appendChild(CRPSRCRVCM);
        CRPSRCRVCM.className = "vCenterMiddle";
    
        var CRPSRCRC = document.createElement("div");
        CRPSRCRVCM.appendChild(CRPSRCRC);
        CRPSRCRC.id = "roomsPopupSubRoomsContainerRightContent";
        CRPSRCRC.className = "roomsPopupSubRoomsContainerRightContent vCenterInner";

        // middle
        var CRPSRCM = document.createElement("div");
        CRPSR.appendChild(CRPSRCM);
        CRPSRCM.className = "roomsPopupSubRoomsContainerMiddle vCenterOuter";
    
        var CRPSRCMVCM = document.createElement("div");
        CRPSRCM.appendChild(CRPSRCMVCM);
        CRPSRCMVCM.className = "vCenterMiddle";
    
        var CRPSRCMC = document.createElement("div");
        CRPSRCMVCM.appendChild(CRPSRCMC);
        CRPSRCMC.id = "roomsPopupSubRoomsContainerMiddleContent";
        CRPSRCMC.className = "roomsPopupSubRoomsContainerMiddleContent vCenterInner";


        // level up
        var ARPLUC = document.createElement("div");
        popupLayerContent.appendChild(ARPLUC);
        ARPLUC.id = "roomsPopupLevelUpContainer";
        ARPLUC.className = "roomsPopupLevelUpContainer vCenterOuter";
    
        var AVCM = document.createElement("div");
        ARPLUC.appendChild(AVCM);
        AVCM.className = "vCenterMiddle";
    
        var AVCI = document.createElement("div");
        AVCM.appendChild(AVCI);
        AVCI.className = "vCenterInner";
    
        var ARPLU = document.createElement("div");
        AVCI.appendChild(ARPLU);
        ARPLU.id = "roomsPopupLevelUp";
        ARPLU.className = "roomsPopupLevelUp vCenterOuter";
        ARPLU.onmousedown = this.loadRoomsPopupCategoryClick;
        ARPLU.parentView = this;
        ARPLU.CategoryID = 0;
        ARPLU.ObjectName = "";
        ARPLU.IsParentCategory = true;
    
        // act level
        var BRPALC = document.createElement("div");
        CRPSRCMC.appendChild(BRPALC);
        BRPALC.id = "roomsPopupActLevelContainer";
        BRPALC.className = "roomsPopupActLevelContainer vCenterOuter";
        BRPALC.onmousedown = this.loadRoomsPopupCategoryClick;
        BRPALC.parentView = this;
        BRPALC.CategoryID = 0;
        BRPALC.ObjectName = "";
        BRPALC.ParentID = 0;
        BRPALC.ParentName = "";
        BRPALC.IsParentCategory = false;
    
        var BBCT = this.barBottomCategoriesTitle;
        this.loadRoomsPopupCategory(BBCT.CategoryID);
    },
    
    loadRoomsPopupCategoryClick: function(e)
    {
        var catNode = this;
        while (catNode && !catNode.CategoryID)
        {
            catNode = catNode.parentNode;
        }
    
        if(catNode)
        {
            if(catNode.IsParentCategory)
            {
                this.parentView.loadRoomsPopupCategory(catNode.CategoryID);
            }
            this.parentView.displayCategory(catNode.CategoryID);
        }
        else
        {
            this.parentView.loadRoomsPopupCategory(0);
            this.parentView.displayCategory(0);
        }
    },
    
    loadRoomsPopupCategory: function(CategoryID)
    {    
        this.presenter.getCategoriesInfo(CategoryID, this, function(caller) {
            dojo.byId("popupLayerTitle").innerHTML = "Raumauswahl";
            caller.showRoomsPopupCategoryView();
        });
    },
    
    showRoomsPopupCategoryView: function()
    {
        var data = this.presenter.categoriesData;

        var RPALC = dojo.byId("roomsPopupActLevelContainer");
        RPALC.CategoryID = data.category.CategoryID;
        RPALC.ObjectName = data.category.ObjectName;
        RPALC.ParentID = data.category.ParentID;
        RPALC.ParentName = data.category.ParentName;
        RPALC.innerHTML = "<div class=\"vCenterMiddle\"><div class=\"vCenterInner\"><div class=\"roomsPopupActLevelText\">" + data.category.ObjectName + "</div></div></div>";
    
        var RPLU = dojo.byId("roomsPopupLevelUp");
        RPLU.CategoryID = data.category.ParentID;
        RPLU.ObjectName = data.category.ParentName;
        RPLU.ParentID = data.category.Parent2Id;
        RPLU.ParentName = data.category.Parent2Name;
        RPLU.innerHTML = "<div class=\"vCenterMiddle\"><div class=\"vCenterInner\"><div class=\"roomsPopupLevelUpText\">" + data.category.ParentName + "</div></div></div>";
    
        if(data.category.CategoryID == data.category.ParentID)
        {
            RPLU.style.visibility = "hidden";
        }
        else
        {
            RPLU.style.visibility = "visible";
        }
    
        var catData = data.categories;
    
        var subRoomCount = catData.length;
    
        var subRoomLayerLeft = dojo.byId("roomsPopupSubRoomsContainerLeftContent");
        var subRoomLayerRight = dojo.byId("roomsPopupSubRoomsContainerRightContent");
    
        subRoomLayerLeft.innerHTML = "";
        subRoomLayerRight.innerHTML = "";
    
        for(i = 0; i < Math.ceil(subRoomCount / 2); i++)
        {
            var actSubRoom = document.createElement("div");
            actSubRoom.id = "roomsPopupSubRoom" + catData[i].CategoryID;
            subRoomLayerLeft.appendChild(actSubRoom);
            actSubRoom.onmousedown = this.loadRoomsPopupCategoryClick;
            actSubRoom.parentView = this;
            actSubRoom.className = "roomsPopupSubRoom";
            actSubRoom.style.marginTop = "10px";
            actSubRoom.style.marginBottom = "10px";
    
            actSubRoom.CategoryID = catData[i].CategoryID;
            actSubRoom.ObjectName = catData[i].ObjectName;
            actSubRoom.ParentID = catData[i].ParentID;
            actSubRoom.ParentName = catData[i].ParentName;
            actSubRoom.IsParentCategory = catData[i].IsParentCategory;
    
            var parentString = "";
            if(actSubRoom.IsParentCategory)
            {
                parentString = "<img src=\"img/roomsPopupRoomArrowLeft.png\"> ";
            }
    
            var leftOff = 25;
            if(i < 5)
            {
                leftOff = Math.pow(((-(Math.ceil(subRoomCount / 2)-1) / 2.0) + (i)), 2) * 5;
            }
            actSubRoom.style.marginRight = (25-leftOff) + "px";
    
            var actSubRoomCapRight = document.createElement("div");
            actSubRoom.appendChild(actSubRoomCapRight);
            actSubRoomCapRight.className = "roomsPopupSubRoomCapRight";
            actSubRoomCapRight.style.cssFloat = "right";
            actSubRoomCapRight.style.styleFloat = "right";
    
            var actSubRoomContent = document.createElement("div");
            actSubRoom.appendChild(actSubRoomContent);
            actSubRoomContent.className = "roomsPopupSubRoomContent";
            actSubRoomContent.style.cssFloat = "right";
            actSubRoomContent.style.styleFloat = "right";
            actSubRoomContent.innerHTML = parentString + actSubRoom.ObjectName;
    
            var actSubRoomCapLeft = document.createElement("div");
            actSubRoom.appendChild(actSubRoomCapLeft);
            actSubRoomCapLeft.className = "roomsPopupSubRoomCapLeft";
            actSubRoomCapLeft.style.cssFloat = "right";
            actSubRoomCapLeft.style.styleFloat = "right";
        }
    
        for(i = Math.ceil(subRoomCount / 2); i < subRoomCount; i++)
        {
            var actSubRoom = document.createElement("div");
            actSubRoom.id = "roomsPopupSubRoom" + catData[i].CategoryID;
            subRoomLayerRight.appendChild(actSubRoom);
            actSubRoom.onmousedown = this.loadRoomsPopupCategoryClick;
            actSubRoom.parentView = this;
            actSubRoom.className = "roomsPopupSubRoom";
            actSubRoom.style.marginTop = "10px";
            actSubRoom.style.marginBottom = "10px";
    
            actSubRoom.CategoryID = catData[i].CategoryID;
            actSubRoom.ObjectName = catData[i].ObjectName;
            actSubRoom.ParentID = catData[i].ParentID;
            actSubRoom.ParentName = catData[i].ParentName;
            actSubRoom.IsParentCategory = catData[i].IsParentCategory;
    
            var parentString = "";
            if(actSubRoom.IsParentCategory)
            {
                parentString = " <img src=\"img/roomsPopupRoomArrowRight.png\">";
            }
    
            var rightOff = 25;
            if(i - (Math.ceil(subRoomCount / 2) - 1) < 5)
            {
                rightOff = Math.pow((((Math.ceil(subRoomCount / 2)+1-Math.ceil(subRoomCount / 2)*2) / 2.0) + (i - Math.ceil(subRoomCount / 2))), 2) * 5;
            }
            actSubRoom.style.marginLeft = (25-rightOff) + "px";
    
            var actSubRoomCapLeft = document.createElement("div");
            actSubRoom.appendChild(actSubRoomCapLeft);
            actSubRoomCapLeft.style.cssFloat = "left";
            actSubRoomCapLeft.style.styleFloat = "left";
            actSubRoomCapLeft.className = "roomsPopupSubRoomCapLeft";
    
            var actSubRoomContent = document.createElement("div");
            actSubRoom.appendChild(actSubRoomContent);
            actSubRoomContent.style.cssFloat = "left";
            actSubRoomContent.style.styleFloat = "left";
            actSubRoomContent.className = "roomsPopupSubRoomContent";
            actSubRoomContent.innerHTML = actSubRoom.ObjectName + parentString;
    
            var actSubRoomCapRight = document.createElement("div");
            actSubRoom.appendChild(actSubRoomCapRight);
            actSubRoomCapRight.style.cssFloat = "left";
            actSubRoomCapRight.style.styleFloat = "left";
            actSubRoomCapRight.className = "roomsPopupSubRoomCapRight";
        }
    
        if(Math.ceil(subRoomCount / 2) != Math.floor(subRoomCount / 2))
        {
            var spacer = document.createElement("div");
            subRoomLayerRight.appendChild(spacer);
            spacer.style.marginTop = "70px";
        }
    }
});

Zum Seitenverhältnis: Wenn man kein Touchpanel hat oder WebFront an mehren unterschiedlichen Monitoren benutzt hat ziemliche Probleme mit exakt zugeschnittenen Hintergrundbildern. Ich z.B. habe i.d.R. vier Browserfenster unterschiedlicher Größe auf meinem PC offen (selbstverständlich mit je ~25 offenen Tabs) und würde mich ziemlich ärgern, wenn ich mir sowas zumuten würde ;). Das waren eh nur ein paar einfache Zeilen. Update werd ich gleich hochladen, wurde nur noch von Besuch überrascht.

Horst

Guten morgen Horst,

Danke für die schnelle Umsetzung und den für viele hoffentlich lehrreichen Code samt Erläuterungen.

Ich freu mich auf die ersten umgesetzten Ergebnisse.

Das benutzerfreundliche, ohne viel Aufwand zu erstellende Webfront wird auf

die simple Art und Weise sehr persönlich anpaßbar.

Fehlt nur noch eine kurze KGV Anleitung (u.a. für Kinder verstehbar), dann hätten wir einen noch nie dagewesenen WAF!

mfg

BerndJ

PS: sag mal, schläfst Du irgend wann auch mal?, dies war ja eine durchgängige Nachtschicht mit Spitzenergebnis.