+ Antworten
Seite 1 von 14 1 2 3 11 ... LetzteLetzte
Ergebnis 1 bis 10 von 131
  1. #1
    Registriert seit
    Apr 2008
    Ort
    Swiss/Czech
    Beiträge
    1,183

    Standard Floorplan anpassen für das Webfront

    Liebe Alle

    Ich hoffe dass mir jemand helfen kann. Meine HTML/CSS/JSON/Dojo-Kenntnisse sind wirklich nur Grundlegend. Es gibt hier ein Projekt/Anleitung wie man einen Floorplan erstellen kann für das Webfront. Eine wirklich super Sache und ich möchte einen solchen Floorplan erstellen womit ich die meisten Leuchten/Geräte im Haus schalten kann sowie deren Zustand sehe. Den grundlegenden Floorplan (Bilddatei) habe ich bereits erstellt, die entsprechenden Beispiele studiert und erfolgreich kann ich nun über Buttons eine Variabe in IPS schalten sowie Labels einfügen in denen Read-Only Werte aktuell aus IPS angezeigt werden. (Wie die Temperatur)

    Diese Labels werden immer fast zeitnah aktuell gehalten durch vermutlich eine Routine die das Projekt/Vorlage kapselt. Da ich nur begrenztes Wissen in dem Bereich habe bin ich nicht drauf gekommen wie ich hieran selber etwas ändern könnte. Was ich möchte bevor ich nun weiter machen kann:

    Auf dem Floorplan zbsp das Bild einer Leuchte platzieren welche den aktuellen Zustand anzeigt (ein.jpg wenn an, aus.jpg wenn aus) und bei einem Klick darauf den Zustand des Gerätes wechselt

    Das ist schon alles. Mein Problem ist, dass ich den Button wie in der Dokumentation beschrieben mit der Fähigkeit der Labelkomponente immer den (fast) aktuellen Zustand zu zeigen vereinen möchte. Ein On/Off Button überfüllt zum einen die Darstellung bei vielen zu schaltenden Geräte und zum andere würde ich ja gerne gleich wissen ob die Komponente schon ein oder aus ist.

    Hat das jemand so schon realisiert oder kann mir einen kleinen Stupf geben wie man das realisieren kann? Am besten in einer Art wie das Floorplanprojekt von Parsey publiziert wurde. Eine ganz eigene HTML-Seite zu erstellen/einbinden dürfte ich kaum packen.

    Danke!
    Geändert von swissboy (05.10.12 um 17:18 Uhr)
    IPS Ninja - Windows 10, 64 Bit Server - IR Trans - Eaton GW - Homematic CCU2 - FHZ - HMS - AKM, JKM + EKM 868 - Div. Sonos - Allnet 3690+91 -IOS/Win10 auf Clientseite - SILEX - SEH - QNAP - APC - Siemens OZW 672 - Homematic - Aviosys - BlueIris - Mobotix T25M, S15 und M12

  2. #2
    Registriert seit
    Apr 2008
    Ort
    Swiss/Czech
    Beiträge
    1,183

    Standard Erster Ansatz

    Etwas habe ich noch gefunden, die Aktualisierung von Daten auf der Floorplanseite wird vermutlich durch die folgende Routine bewerkstelligt

    PHP-Code:
    function readVariables()
    {
        require([
    "dojo/query"], function(query) {
            
    query(".variable").forEach(function(nodeindexarr){
                
    ips.GetValueFormatted(parseInt(node.getAttribute("ips-variable-id"))).then(
                    function(
    data)
                    {
                        
    label node.getAttribute("ips-variable-label");
                        if(
    label != null)
                            
    node.innerHTML label data
                        
    else
                            
    node.innerHTML data
                    
    }
                );
            });
        });
        
    window.setTimeout(readVariables10000);

    Der Code für die Buttons und für das Label sehen dann so aus
    HTML-Code:
    <body class="tundra" style="width: 1000px; height: 700px; background-image: url(floorplan.jpg); background-repeat: no-repeat;">
    	<div id="ips" style="vertical-align:middle;">
    		<h2>IP-Symcon<br/>Floorplan<br/>Demo</h2>
    		<button data-dojo-type="dijit.form.Button" style="top: 70px; left: 240px;" class="button">ON
    			<script type="dojo/method" data-dojo-event="onClick" data-dojo-args="evt">
    				ips.SetValueBoolean(30267, true);
    			</script>		
    		</button>
    		<button data-dojo-type="dijit.form.Button" style="top: 70px; left: 290px;" class="button">OFF
    			<script type="dojo/method" data-dojo-event="onClick" data-dojo-args="evt">
    				ips.SetValueBoolean(30267, false);
    			</script>		
    		</button>
    		<div ips-variable-id="18848" ips-variable-label="Temperatur: " style="top: 40px; left: 400px;" class="variable">Temperatur: 00.00 °C</div>
    	</div>	
    </body>
    Da muss es eine Möglichkeit geben das Gewollte umzusetzen. Leider bin ich noch nicht drauf gekommen wie.
    IPS Ninja - Windows 10, 64 Bit Server - IR Trans - Eaton GW - Homematic CCU2 - FHZ - HMS - AKM, JKM + EKM 868 - Div. Sonos - Allnet 3690+91 -IOS/Win10 auf Clientseite - SILEX - SEH - QNAP - APC - Siemens OZW 672 - Homematic - Aviosys - BlueIris - Mobotix T25M, S15 und M12

  3. #3
    Registriert seit
    Apr 2008
    Ort
    Swiss/Czech
    Beiträge
    1,183

    Standard Teilweise - fast alles geschafft..

    So, fast 30 Tage später bin ich etwas schlauer. Eigentlich nur mit viiiieeeelll probieren, nachlesen in Html und anderen Foren. Aber auch die Initialtips von Paresy sind schon sehr hilfreich wenn man die Sache richtig liest und sich gut überlegt. Vorneweg... mein Lösungsansatz ist sicher für viele Javascript/HTML oder sonstige Scripter wohl ein Horror. Ich bin mir sicher, dass es bessere Befehle oder eine einfachere Art und Weise gibt um das von mir Gewollte zu realisieren. Da mir aber niemand etwas Besseres lieferte poste ich hier einfach mal meine Lösung für meine Anforderungen. Wer also das sowieso viiel besser und anders gemacht hätte der hätte sich am besten gemeldet als ich die Frage gestellt hatte oder kann die Verbesserungen gerne auf Nette Art und Weise mir hier aufzeigen.

    Meine Anforderung
    "Auf dem Floorplan zbsp das Bild einer Leuchte platzieren welche den aktuellen Zustand anzeigt (ein.jpg wenn an, aus.jpg wenn aus) und bei einem Klick darauf den Zustand des Gerätes wechselt"

    Um das zu realisieren ist es zuerst einmal wichtig für jede Variable die Ihr updaten möchtet einfach mal entsprechend dem "Label-Beispiel" von Paresy dies mit der entsprechenden Variablen ID erstellen:

    HTML-Code:
    <div ips-variable-id="32505" ips-variable-label="Lampe Badezimmer: " style="top: 105px; left: 400px;" class="variable"></div>
    32505 ist dabei bei mir die Objekt-ID für die Statusvariable meiner Badezimmerlampe welche über Möller/Eaton geschaltet wird. Bei euch ist das natürlich eine andere ID. Wichtig entgegen dem Label-Beispiel gibt es keine Beschriftung für diesen Div-Tag, also auf der HTML-Seite ist das Ding durchsichtig und dient nur dazu, dass wir von der Statusvariable über das Script jeweils den aktuellen Zustand erhalten.

    Dann fügen wir des Weiteren den Button/Lampenplatzhalter hinzu mit:

    HTML-Code:
    <button id="LAEGBL" data-dojo-type="dijit.form.Button" style="top: 400px; left: 410px;" class="button">
    			<script type="dojo/method" data-dojo-event="onClick" data-dojo-args="evt">
    ips.GetValueBoolean(32505).then(
    	function(data){
    		if(data==true)
    			ips.MXC_SwitchMode(55450, false);
    		else
    			ips.MXC_SwitchMode(55450, true);
    	},
    	function(err){
    		alert(err);
    	}
    );
    			</script>		
    		</button>
    Dieser ist dann natürlich auf dem Floorplan ersichtlich und muss mit dem top und left Parameter an den richtigen Ort "gestellt" werden. Für das Positionieren empfehle ich am Schluss, wenn Ihr das Icon der Lampe seht euch an die richtige Position heranzutasten. (Auch dafür gibt es vermutlich ein Programm womit die Positionierung einfacher zu bewerkstelligen ist) Wichtig ist hier - es wird wieder die Statusvariable geprüft ob das Licht bereits an ist oder nicht und entsprechend der Befehl für das Ein/Ausschalten einer Lampe über eine Möller/Eaton Instanz ausgeführt. Wenn Ihr FS20 oder anderes verwendet gehört hier einfach der entsprechende Befehl hin. (Wie FS20_Switchmode etc.)

    So und nun das wichtigste.. der Code welcher ausgeführt wird wenn alle 10 Sekunden im Hintergrund die IPS-Daten geladen und im Floorplan angezeigt werden sollen:

    Code:
    if(data != "An" && node.getAttribute("ips-variable-id") == 32505)
    	dojo.byId("LABZHL").innerHTML = "<img src='../img/Glühbirne Aus_64.png' width='20' height='20' alt='Lampe Badezimmer Ein'>";
    	else if(data == "An" && node.getAttribute("ips-variable-id") == 32505)
    	dojo.byId("LABZHL").innerHTML = "<img src='../img/Glühbirne_64.png' width='20' height='20' alt='Lampe Badezimmer Aus'>";
    Wenn Ihr den Code oben 1:1 so kopiert und nicht anpasst müsst ihr im Webverzeichnis wo der Floorplan sich befindet ein Verzeichnis mit dem Namen img erstellen und dort ein Lampenbild mit dem Namen "Glühbirne Aus_64.png" und "Glühbirne_64.png" reinkopieren damit etwas angezeigt wird.

    ---> Was habt Ihr nun.. auf dem Floorplan, da wo eure Lampe hängt ein Bild einer Lampe welches je nach dem Zustand in oder aus ist. Zudem könnt Ihr auf dieses Bild klicken.. und die Lampe schaltet Aus oder Ein.

    Ehrlich gesagt es braucht schweine viel Zeit wenn Ihr wirklich viele Lampen auf diese Art und Weise platzieren und steuern wollt. Ich rate euch wenn Ihr mit dem Internetexplorer arbeitet in den Optionen das Anzeigen von Scriptfehler zu aktivieren, da Ihr sonst Fehler in der Seite haben könntet und nichts geht mehr und keiner weiss warum. Der Safari zum Beispiel zeigt von den Fehlern so gut wie nichts.

    Je mehr man mit dem Floorplan macht.. umso eher wird einem klar, dass dies fast die Beste Übersichtsart für ein Haus ist. Meine Frau will nur noch den Floorplan und auch ich arbeite nur noch mit dem Floorplan. Sind Fenster offen zeigt es mir diese sofort auf dem Floorplan an. Genauso wie ein viereckiger Balken der grün angezeigt wird wenn der Alarm deaktiviert ist oder rot wenn er aktiviert ist. Die Vorteile sind klar, auch ein aussenstehender kommt mit dem Floorplan zurecht. Übersichtlichkeit wie Sie besser nicht sein könnte, man weiss genau wo ein Problem zu suchen ist (Fenster Wohnzimmer ist offen.. sagt ja was.. aber ich habe zum Beispiel 3 Fenster im Wohnzimmer, auf dem Floorplan sehe ich es genau)

    Ich hänge noch ein kleines Illustrationsbild an, einfach nur vom Garagenteil.. damit mich niemand besucht und wegen dem schlechten Code verhaut.

    Allg. Nachteile? Naja also sicher ist die Aktion "Alarm deaktivieren" kommt nicht auf den Floorplan.. sonst kann ja auch ein Einbrecher auf einfach Art und Weise diesen deaktivieren.

    Technisch? Bei den ersten 10 Komponenten hatte ich keine Probleme. Mittlerweilen wächst der Floorplan andauernd. Ich frage aktuell etwa 30 Variablen ab.. und hier merkt man es nun - die Sache wird zum einen etwas langsam und mit der Zeit fehlt auch der Platz auf dem Floorplan. Man muss sich also doch etwas beschränken und bei der Performance.. da wäre ich um Tips froh.. ich habe den Intervall für die Variablenabfrage bereits auf 20s erhöht. Aktuell möchte ich die Anzahl Threads in IPS erhöhen, mal schauen was das bringt. Ich muss zudem erwähnen, der Floorplan wird bei mir als HTML-Box ins Webfront integriert. Somit habe ich alle Vorzüge auf einmal! Vielleicht wird die Sache dadurch aber auch schneller langsam. Es klappt auf jedenfall einwandfrei...

    Einfach Cool, man klickt auf ein Kamerasymbol auf dem Floorplan und sofort wird das Bild der Kamera über DHTML angezeigt und wieder ausgeblendet..! Das löst man übrigens ähnlich wie das dynamische Ersetzen vom Lampenbild. Toll daran, das Bild der Kamera wird dabei über den Floorplan gelegt, man braucht also nicht mehr Platz! Sobald man es ausblendet steht der Floorplan wieder zur Verfügung. Bewegung im Wohnzimmer, das Symbol leuchtet auf und verschwindet wieder etc.
    Angehängte Grafiken Angehängte Grafiken  
    Geändert von swissboy (29.10.12 um 16:02 Uhr)
    IPS Ninja - Windows 10, 64 Bit Server - IR Trans - Eaton GW - Homematic CCU2 - FHZ - HMS - AKM, JKM + EKM 868 - Div. Sonos - Allnet 3690+91 -IOS/Win10 auf Clientseite - SILEX - SEH - QNAP - APC - Siemens OZW 672 - Homematic - Aviosys - BlueIris - Mobotix T25M, S15 und M12

  4. #4
    Registriert seit
    Apr 2008
    Ort
    Swiss/Czech
    Beiträge
    1,183

    Standard Alternative

    Noch als letztes... eine Alternative zum Foorplan wie es zuvor bei mir in Verwendung war. Einfach im Webfront eine Kategorie erstellen mit Links auf alle wichtigen Komponenten. Dann über ein Script den entsprechenden Link anzeigen lassen (entsperren) wenn zum Beispiel das Fenster geöffnet wird (Event-Trigger) und wieder verstecken (hide) wenn es geschlossen wird. Auch hier habe ich noch einen Screenshot angehängt. Diese Lösung gibt weniger Arbeit und zeigt auch eine Übersicht zu allen Komponenten/Status in einem Haus. Leider aber sieht man nicht z.B. das Fenster offen ist, man muss es also in die Beschreibung/Text integrieren. Wer aber nun 3 Fenster im Wohnzimmer hat kommt mit Text nicht weit. Ein weiterer Nachteil ist die Verständlichkeit für Besucher... zuletzt anders sprachige Besucher oder Familienmitglieder (bei mir der Fall) kommen mit der Console gar nicht zurecht und ein Floorplan war unausweichlich.

    Bei dem Printscreen handelt es sich auch wieder um ein Beispiel.. so wird die Lampe WC Eingang normalerweise nur in der Konsole angezeigt wenn sie angeschaltet ist wie auch der Sonos Lautsprecher etc.
    Angehängte Grafiken Angehängte Grafiken  
    Geändert von swissboy (29.10.12 um 16:22 Uhr)
    IPS Ninja - Windows 10, 64 Bit Server - IR Trans - Eaton GW - Homematic CCU2 - FHZ - HMS - AKM, JKM + EKM 868 - Div. Sonos - Allnet 3690+91 -IOS/Win10 auf Clientseite - SILEX - SEH - QNAP - APC - Siemens OZW 672 - Homematic - Aviosys - BlueIris - Mobotix T25M, S15 und M12

  5. #5
    Registriert seit
    Oct 2007
    Ort
    Villach,Kärnten,Österreich
    Beiträge
    3,022

    Servus swissboy

    Schade das du kein Echo auf deine Beschreibung gekriegt hast.
    Nun ich mache meine Visualisierung der Heizung nach mit dem gleichen Prinzip. Allerdings verwende ich Soap anstatt Dojo. Das gabs damals noch nicht.
    Stimme dir soweit voll zu, es ist zwar nicht kompliziert aber sehr mühsam alle Symbole pixelgenau per Code perfekt zu positionieren.

    An einem Floorplan hab ich mich auch schon versucht, bin dann aber am Design gescheitert.
    Irgendwie hat mich das optisch alles nicht befriedigt.

    - nimmt man einen dieser Homeplaner mit fotorealistischem Rendering, so stört das die Inneneinrichtung so ganz und gar nicht zur Wirklichkeit paßt. Also sollte es eine eher abstrakte Darstellung sein.
    - zur 3D Ansicht des Floorplanes paßt die typischerweise 2D Ansicht der Symbole nicht so recht
    - nicht von der Haussteuerung erfasste Räume nur Platzverschwendung
    - Darstellung mehrere Etagen ( Keller, EG, 1.Stock) benötigt entweder einen Umschalter oder viieel Platz
    - Bereiche mit viel IPS (zb. Heizraum, Küche) müßte man irgendwie zoomen können
    - bei viel IPS werden entweder die Symbole zu klein (schwer mit den Wurstfingern zu treffen) oder alles wird unharmonisch weil nur mehr Symbole sichtbar.

    Wie hast du da den richtigen Mittelweg gefunden ?

    Da ich grad einiges neu mache werde ich mich evtl. auch nochmal daran versuchen.

    gruß
    bb

  6. #6
    Registriert seit
    Sep 2011
    Beiträge
    164

    Uiii super - es tut sich was an der Webfront.
    Ich habe mir am WE auch die floorplan.html zur Brust genommen und meine Heizungs-Visu umgesetzt. Allerdings habe ich da nur Temperaturwerte und ein paar animationen reingebaut.
    Der naechste Schritt ist, wie Du es auch gemacht hast, einen Grundriss mit schaltbaren Symbolen zu bauen.

    Ich hoffe am WE dazu zu kommen - haelt ja doch auf die rumprobiererei...

    Aber ich denke - wir koennen diesen Thread gut mit wissenswertem fuellen.

    Gruss
    Boris

    Gesendet von meinem T05A mit Tapatalk 2
    Gruß Boris

    IP-Symcon V5 (Docker) / HM (Raspberrymatic) mit RS485 und RF / IPSView 3.3 / DoorPI / Milight / GHoma / Squeezebox / Echo Dot /

  7. #7
    Registriert seit
    Apr 2008
    Ort
    Swiss/Czech
    Beiträge
    1,183

    Standard Möglichkeiten - Mittelweg.. :-)?

    Hallo Boris und Bernhard!

    Cool das sich mal wer meldet.. man weiss halt nie ob jemand ähnliche Pläne hat mit dem man sich austauschen könnte.

    @Boris
    Super! Da freue ich mich wenn du dann auch Dinge/Code beisteuern kannst! Wie erwähnt das dynamische Ein-/Überblenden von Kameras etc. werde ich noch beisteuern wenn das jemand braucht oder selbst nicht weiss wie. Ich muss dazu aber etwas sagen. Zum einen habe ich bemerkt das einzelne Browser anders reagieren. Ich verwende für die Anzeige IOS Geräte/Safari.

    @bbernhard
    Soap/Nicht Soap.. also hier kann ich nichts dazu sagen weil mit Soap habe ich es noch nie versucht. Meine technischen Nachteile/Probleme hatte ich ja im Beitrag erwähnt. Wenn diese bei Soap nicht bestehen wäre es vielleicht eine Alternative!? Fraglich bleibt auch ob einzelne meiner technischen Probleme auch nur deswegen besteht weil man es perfomanter Programmieren könnte. Einen Nachteil den ich nicht erwähnt hatte und sicher ins Gewicht fällt ist noch die Tatsache, dass über Remotezugriff also die iFront-App der Floorplan nicht funktioniert was klar ist. Ausser man legt eine VPN-Verbindung drunter dann klappt es auch über iFront.

    - nimmt man einen dieser Homeplaner mit fotorealistischem Rendering, so stört das die Inneneinrichtung so ganz und gar nicht zur Wirklichkeit passt. Also sollte es eine eher abstrakte Darstellung sein.
    Stimme ich dir zu, ich habe hier verschiedenste Tools durchprobiert. Je höher die Genauigkeit umso mehr Differenzen entstanden im Abgleich zur Realität. Zudem wurde die Hintergrundgrafik auch immer grösser und dies kostet wenn auch nur einmalige Ladezeit. Schlussendlich habe ich mich für eine ganz einfache Ansicht entschieden und kann sagen, das in der Ansicht ob Möbel, Gardinen etc. 1:1 mit der Realität übereinstimmen. Mein Haus und die Inneneinrichtung sehen genauso aus. Ich finde es technisch super cool mit 3D und high Rendering aber ich frage dann immer zuerst meine Frau was Sie den eigentlich erwartet oder braucht. Das Feedback war klar, Details sind nicht wichtig aber der Grundriss und die Overview müssen realistisch sein damit man sein Haus, die Räume und Dinge wie Kühlschrank erkennt.

    - zur 3D Ansicht des Floorplanes paßt die typischerweise 2D Ansicht der Symbole nicht so recht
    In meinem Anhang beim entsprechenden Beitrag sieht man, dass ich leider um die 2D Ansicht bei den Symbolen auch nicht drumherum kam. Diese stört mich ebenfalls ein wenig. Meine Frau und erste Besucher meinten das mache gar nichts. Ist vermutlich subjektiv. Eine fliessende Darstellung integration der gesteuerten Komponenten konnte ich keinem anderen Produkt finden. Damit meine ich auch andere Systeme/Lösungen für die Hausautomatisation. G*ra habe ich mal was gesehen, ABER dann funktioniert die fliessende Darstellung nur, wenn ich explizit das eine Garagentor als Symbol das zur Verfügung steht verwende. Das Tor sieht aber gaaaanz anders aus als meines. Da findet meine Frau wie auch ich - Lieber ein Symbol das unser Tor passend abbildet als eine fliessende/integrierte Animation (dabei müssen auch alle anderen Symbole aus der Palette verwendet werden) eines anderen Tors. Oder kennst du/andere Tools die das können?

    Ich verwende viele Icons aus einer Sammlung (die Sammlung findet man wenn man hier im Forum nach Icon sucht). Ganz toll sind aber animierte Gifs wie für das Ventil das den gesamten Wasserzufluss für unser Haus steuert. Sieht halt edler aus wenn im Gif der Wasserstrahl fliesst für Ventil offen oder steht für Ventil zu. Mit der Zeit werde ich wo möglich solche animierte Icons verwenden. Der rote Rahmen für Alarm aktiv könnte dann zum Beispiel auch blinken und wenn deaktiviert in grün fix stehen bleiben. Meine Frau und die ersten Besucher finden einfach, dass man auch diese Weise einfach den Zustand erkennt und steuern kann.

    - nicht von der Haussteuerung erfasste Räume nur Platzverschwendung
    Ich habe keine Räume die nicht in irgendeiner Weise steuerbare Komponenten enthalten. Der Übersicht halber würde ich diese aber ehrlich gesagt aber nicht entfernen.

    - Darstellung mehrere Etagen ( Keller, EG, 1.Stock) benötigt entweder einen Umschalter oder viieel Platz
    Naja auch hier habe ich nur eine Etage. Mehrere Etagen dürften die Sache schwieriger machen und ein Umschalter scheint da fasst ein Muss.

    - Bereiche mit viel IPS (zb. Heizraum, Küche) müßte man irgendwie zoomen können
    Das könnte/werde ich so lösen wie das Bild meiner Kameras. Wird die Kamera angeklickt wird das entsprechende Bild über den Floorplan gelegt und angezeigt solange man es nicht wieder schliesst. (Oder nach einem Interval automatisch geschlossen) So plane ich das für den Heizraum, wird die Heizung angeklickt um Details anzuzeigen so wird über den Div Tag entsprechend mit HTML über den Floorplan gelegt und zeigt die entsprechenden Infos oder einen Zoom an. Das gibt klar Arbeit.. ziemlich viel Arbeit aber dies ist vermutlich in einer Anfangsphase nicht dringend Nötig und kann bei Zeiten zu programmiert werden. Ich warte dann einfach ab bis meine Frau mal flucht oder sagt das Sie ein Icon für eine Lampe nicht mehr trifft etc.

    - bei viel IPS werden entweder die Symbole zu klein (schwer mit den Wurstfingern zu treffen) oder alles wird unharmonisch weil nur mehr Symbole sichtbar.
    Eindeutig ein Problem mit welchem auch ich aktuell und kämpfe.

    -Wie erwähnt verschiebe ich die Details in die Detailansicht welche drüber gelegt wird falls nötig
    -Spare ich Platz indem ich mit den Symbolen den aktuellen Status anzeige (Aus/Ein anderes Bild)
    -Ein Klick auf das Symbol einen switch bewirkt (Ich platziere nicht einen Aus + Ein Button und spare Platz)
    -Gutes Enddevice auswählen für die Anzeige (Touchreaktion und Genauigkeit, Auflösung etc.)
    -Ich setze Tags auf hidden bei Symbolen die nicht immer angezeigt werden müssen und auch nicht durch den Benutzer geschaltet werden müssen. Anders, Wassermelder werden erst auf visible gesetzt sobald Wasser detektiert wird wie auch Feuermelder oder die Xbox wird nur angezeigt wenn Sie an ist da ich die XBOX wenn ich Sie schon mal brauche manuell einschalte. Spart auch viel Platz aber gibt wieder Arbeit. Bestes Beispiel ist noch der Tresor, dieser wird nur angezeigt wenn Offen da ich diesen über IPS nicht schliessen kann und ein Einbrecher auf dem Floorplan sicher freude hätte wenn er den Ort des Tresors in geschlossenem Zustand sieht.. :-)
    -Das lässt sich auch noch ausweiten indem man gewisse Zustände mit einbezieht. Soweit bin ich aber noch nicht. Sprich wenn der Alarm deaktiviert wurde muss ich eigentlich die Hauptwasserzufuhr nur anzeigen wenn Sie geschlossen ist, da diese bei einer Anwesenheit eigentlich immer offen sein sollte und es sonst keinen Grund gibt diese manuell zu schalten. (Im Notfall wie Wasserleck wird niemand das Ventil über das Webfront schliessen sondern dafür braucht man einen NOTFALL Taster) Oder den Fernseher muss ich nur anzeigen wenn der Alarm deaktiviert ist. sonst muss diesen ja keiner schalten können etc. damit lässt sich nochmals Platz sparen sofern man über diese Zustände verfügt oder sie automatisiert hat.

    Wie hast du da den richtigen Mittelweg gefunden?
    Ob ich den gefunden habe ist wohl Ansichtssache. Meine Frau und die Besucher sowie ich finden den Floorplan toll und verwenden nur diesen. Wer auf Topdesign und Anzeige steht wird mit der Lösung nicht unbedingt glücklich. Unter dem Strich ist es aber bei mir so, dass Einfachheit(Faulheit?) immer über dem Design steht - Sprich die Möglichkeit über das Handy die Bewässerung zu starten und kontrollieren während man TV schaut verdrängte bald die ersten Sprüche wie "müssen wir in der Garage diesen Homematic-Aufputzschalter montieren der Strom braucht und komisch aussieht?
    Da ich mir nicht vorstellen kann, das in den nächsten 2-3 Jahren eine Lösung existiert die solche Floorpläne flüssig und perfekt darstellen kann (und insbesondere Realitätsnahe zu der eigenen Einrichtung/Haus) betrieb ich jetzt den Aufwand..
    Geändert von swissboy (30.10.12 um 11:19 Uhr)
    IPS Ninja - Windows 10, 64 Bit Server - IR Trans - Eaton GW - Homematic CCU2 - FHZ - HMS - AKM, JKM + EKM 868 - Div. Sonos - Allnet 3690+91 -IOS/Win10 auf Clientseite - SILEX - SEH - QNAP - APC - Siemens OZW 672 - Homematic - Aviosys - BlueIris - Mobotix T25M, S15 und M12

  8. #8
    Registriert seit
    Oct 2007
    Ort
    Villach,Kärnten,Österreich
    Beiträge
    3,022

    Servus swissboy
    danke für die Ausführliche Betrachtung. Hast mir einige wertvolle Impulse gegeben.

    Als ich gestern deinen Post gelesen hab hab ich nämlich direkt wieder Lust bekommen es nochmals zu versuchen.

    Hast Lust noch ein wenig über Designfragen zu tratschen ? oder soll ich dazu einen eigenen Thread machen. Der Titel paßt aber gut.

    Hintergrund ist folgender: Bis vor kurzem hatte ich ein klassisches IPS WF. Zahllose Unterseiten auf denen alles dargestellt wurde was IPS so hergibt.
    Aus Technikersicht imponierend, aber für die nackte Bedienung nicht zielführend. Meine Mädels haben es auch entsprechend ignoriert.
    Vor einigen Wochen hab ich dann das WF dann auf den raumbezogenen Android Clients drastisch reduziert.
    Es hat nur noch eine Seite an der nur aktuelle Meldungen Eje nach Bedarf in/Ausgeblendet werden.
    Dazu wenige Buttons um zwischen native Android Apps umzuschalten oder max 4 IPS Aktoren zu betätigen.Hab das eh in einem anderen Thread vor kurzem beschrieben.
    Ergebnis: Die Akzeptanz ist DEUTLICH besser. Es war das erste mal das ich ein "Du das ist ja direkt praktisch" Feedback bekam. Und zwar für die klassische "Waschmaschine ist fertig" Sprachausgabe und einen direkt erreichbaren Button fürs Garagentor.

    Ich hab aber glaube ich etwas zu viel reduziert, 2/3 des Bildschirmes sind jetzt wenn keine Meldungen anstehen typischerweise leer.

    Da würde vielleicht doch ein Floorplan gut hinpassen.
    Drum hab ich gestern Abend noch ein paar Stunden gegrübelt wie das aussehen müßte.
    Knackpunkt ist meiner Meinung nach wirklich die Übersichtlichkeit und Bedienbarkeit. Da brächte man einen Design/Ergonomie Experten.
    Die Technik dahinter kann man leicht lösen.

    In meinem Fall müßte ich einen rechteckigen Grundriß mit drei Stockwerken auf etwa 420*420 Pixel abbilden.
    Dazu gibts 3 HotSpots an denen sehr viel IPS Technik verbaut ist. Ein/Ausblenden von Etagen und zoomen von Bereichen ist also Pflicht.
    Aber werde ich versuchen alles auf das Minimum zu reduzieren um die Übersichtlichkeit zu bewahren. Fotorealismus scheidet da komplett aus.
    Die Idee die ich im Kopf habe ist eine sehr abstrakte Darstellung, eine Mischung aus Grundriß und farblicher Animation.
    In Ruhestellung daher alles nur Schwarz/Weiß und Transparent. --> paßt gut zum restlichen WF.
    Aktive Elemente werden farbig, und Warnmeldungen durch farbig animierte Piktogramme nochmals hervorgehoben.
    Die Piktogramme für Warnmeldungen und Statusreports nur temporär eingeblenden.

    Durch rollierende Farbverläufe (mittels animated GIF) kann man übrigens sehr schön Bewegung oder Aktivität darstellen.
    Hab das an mehreren Stellen meiner Heizungs- und Aquarium Visus. Kommt aber in den Screenshots im Forum nicht so gut rüber.

    Ich werde mir also mal so ein Muster basteln.

    Wenns mich optisch zufriedenstellt komme ich gerne zurück und wir können gemeinsam sehen wie man den Code dahinter optimieren kann. ggfls. dann auch so schreiben das Snipplets einfach an dritte weitergegeben werden können. Hab da diesbezüglich Erfahrung aus anderen IPS Projekten.
    Gelernter HTML/PHP Coder bin ich aber auch keiner, kann mich da auch nur so wie du durchs Web lesen.

    Die Soap Geschichte hab ich damals genommen da die Visu nicht am IPS Webserver sondern auf einer externen Kiste lief.
    So konnte ich die Visu von der Bedienung sicher trennen und im WWW verfügbar machen.

    gruß
    bb

  9. #9
    Registriert seit
    Sep 2010
    Ort
    südl. München
    Beiträge
    363

    Standard Danke.

    Hallo Swissboy,

    danke für Dein Anleitungen und mühsamen Versuche.

    Wie hier zu sehen, war ich auch schon in diese Richtung unterwegs....

    Die technischen Hürden und unser Nachwuchs haben mich vor weiteren Entwicklungen abgehalten - aber jetzt,
    da Schnee liegt und alles ruhiger wird(hoffentlich) komm ich wieder dazu. Darum Danke für Deine Anregungen !

    Anbei mein Layout-Beispiel (Bei meiner Umsetzung war ich am Schalten aller Switches bei Reload gescheitert....)
    Angehängte Grafiken Angehängte Grafiken  

    EIB/IP-Router, 3 Dali Gateways, IPS auf: WHS2011 -22" Touch -2xMicroVis II logic -4xArcus Touch_IT -4xSqueezebox + Aktiv-Boxen (Teufel) -Gigabit-Vernetzung -60 Dimmkanäle DALI -UVR1611 mit BL-Net -iPad Air -4xDCS 2332 -4xD-Link DCS-932L -Zennio KES -2x Fingerprinter eKey

  10. #10
    Registriert seit
    Apr 2008
    Ort
    Swiss/Czech
    Beiträge
    1,183

    Standard Da läuft doch noch was... :-)

    @djtark
    Also das von dir genannte Problem tritt bei meiner oder allgemein bei der JSON-Umsetzung nicht auf.. das wäre ja noch schöner :-) da würde ich gleich abschalten. Nein aber was es gibt ist halt das Performance Problem.. wobei ich hoffe mit der Zeit das vielleicht in den Griff zu bekommen oder mit der Hilfe von bbernhard oder Kalastaja oder Deiner.. Es Äussert sich dadurch, dass wenn man viele Datenpunkte lädt, während diesem Ladevorgang zwar eine Schaltung vorgenommen werden kann (Bildchen anklicken) und es wird auch ausgeführt (zbsp Lampe ein) aber halt mit etwas Verzögerung. Das ist aber für mich kein Problem, die Daten werden alle 20 Minuten gerefresht.. der Refresh selbst dauert eine Sekunde über LAN und WLAN. Spüren tuh ich den nur bei einer VPN Verbindung da ich viel von Unterwegs bastle und diese VPN-Verbindung kann langsam sein und da verzögert es sich schon mal um 3-4 Sekunden. Der Monitor/Steurungskontrolle ist ja aber über WLAN oder LAN im Haus angebunden.

    >>Die Symbole in deinem Printscreen.. wie hast du die erstellt oder woher hast du diese.. mit der Sprechblase drumm rum sehen die richtig gut aus.. wobei ich die Sprechblase vermutlich bei mir weglassen würde aus Platzgründen..:-)

    Bei dir, welche Endgeräte verwendest du und mit welchem Browser?

    @bbernhard
    Knackpunkt ist meiner Meinung nach wirklich die Übersichtlichkeit und Bedienbarkeit. Da brächte man einen Design/Ergonomie Experten.
    Die Technik dahinter kann man leicht lösen.
    Also deine Mädels scheinen ja seeehr anspruchsvoll zu sein.:-)) Aber ich hab mal deine Seite besucht und das Aquarium ist ja megaaaaaa... Offtopic würde es mich auch mal interessieren ob du mit den Solarprojekten wirklich zufrieden warst/bist. Bei mir steht das auf Halteposition da ich bei allen Angeboten und Ideen eine so kleine Einsparnis errechnete das es sich gar nicht lohnte.
    Aber zurück zum Thema.. richtig stimmt hat ich vergessen das mache ich auch so.. im Ruhezustand sind die Icons farblos.. Ich arbeite aktuell noch mit Rahmen. Blau = Info, nix zu tun, verschwindet von selbst Rot = Hier ist ein Problem vorhanden und man MUSS was machen Grün nehme ich gar nicht mit rein, weil wie erwähnt Dinge die in einem guten Zustand sind brauchen nur Platz und müssen max. angezeigt werden wenn man Sie manuell Ein/Ausschalten möchte. Ganz ehrlich.. nach deinem Beitrag habe ich meinen Plan nochmals angeschaut.. und in der Küche habe ich zbsp zwei Leuchten gleich nebeneinander platziert.. eine Hauptleuchte und eine Dekorationsbeleuchtung. Die Dekobeleuchtung wurde im letzten Jahr vermutlich einmal eingeschaltet.. also die verschwindet von meinem Plan damit man auch mit Wurstfinger schalten kann.. entweder mache ich irgendwo eine Kategorie Spezialschalter einblenden und dann kann man diese auch schalten oder lasse es ganz weg.. scheint mir am schlausten. Am schwierigsten ich für mich eigentlich davon wegzukommen das ich einfach alles anzeigen muss/will. Einfachheit und wirklich nur das Notwendige ist hier eigentlich gefragt, dann kommt es gut. Und natürlich ich meine für das ist der Thread gemacht.. Erfahrungen zu sammeln was den "DAU's" oder dem Normalbenutzer anspricht/gefällt finde ich hier genau so wichtig wie die Lösung allfälliger technischer Probleme.. :-)

    Auch bei dir, welche Endgeräte verwendest du und mit welchem Browser?

    --------------- Problemchen
    Wie erwähnt wo ich etwas hänge ist zuerst mal ob es Sinnvoll ist oder eben ein Problem sein könnte das ich als HTMLBox meinen Floorplan zusätzlich im Webfront integriere. Ich werde mal versuchen ob es perfomanter läuft wenn ich direkt nur den Floorplan öffne. Fände das aber schade, da die Kombination von WF und Floorplan alles ausreizt. Eine Alternative wäre den Code für den Variablenupdate zu verbessern. So frage ich alle 20 Sek. ALLE im Plan verwendeten Variablen ab. Effektiv könnte man ja nach Prioritäten verschiedene Intervalle verwenden.

    Zweites Problem hat vermutlich mit dem Browser im Endgerät oder mit IPS zu tun.. irgendwo habe ich gelesen das in IPS in der neuen Version zbsp eine Streambegrenzung existiert.. was das auch immer heissen soll. Zumindest habe ich festgestellt (ein anderer Thread hier) das in der neuen Version eine meiner Cam (deren img Stream) nur sporadisch im WF angezeigt wird. Jedenfalls verändere ich an der Konfig nichts und mal sehe ich den Stream und mal nicht im WF (Zugriff im LAN, gleicher Device, direkter zugriff auf die CAM zeigt das Bild immer an). Im Floorplan ist es ähnlich wobei ich hier den Stream bei Klick auf Kamera anzeigen Ein- und wieder Ausblende. Mal kommt das Bild.. mal nicht und hier bei allen Streams nicht nur bei der einen Kamera.

    Grösstes aber für mich gelöstes Problem.. wenn ich über Safari das Webfront auf einem iPad über WLAN den Floorplan als HTML-Box in IPS anzeige/öffne passiert es teilweise dass sich der Floorplan nicht mehr aktualisiert. Das ist sehhr oft der Fall. Deswegen habe ich auf dem iPad mal den Browser getauscht und verwende nun einen anderen bei welchem das Webfront wie auch der Floorplan immer funktioniert und auch aktualisiert wird. Es scheint auch einige Probleme zu geben mit den Browsern.
    Geändert von swissboy (01.11.12 um 10:09 Uhr)
    IPS Ninja - Windows 10, 64 Bit Server - IR Trans - Eaton GW - Homematic CCU2 - FHZ - HMS - AKM, JKM + EKM 868 - Div. Sonos - Allnet 3690+91 -IOS/Win10 auf Clientseite - SILEX - SEH - QNAP - APC - Siemens OZW 672 - Homematic - Aviosys - BlueIris - Mobotix T25M, S15 und M12

Ähnliche Themen

  1. FM_AlarmClock (Wecker)
    Von Ferengi-Master im Forum Anleitungen / Nützliche PHP Skripte
    Antworten: 239
    Letzter Beitrag: 04.04.18, 15:39
  2. Icon Zuweisungsautomat für das WebFront
    Von Ferengi-Master im Forum Anleitungen / Nützliche PHP Skripte
    Antworten: 0
    Letzter Beitrag: 21.07.12, 22:19
  3. Icon Umwandel - Automat für das Webfront
    Von Ferengi-Master im Forum Anleitungen / Nützliche PHP Skripte
    Antworten: 0
    Letzter Beitrag: 16.01.11, 14:30
  4. Timer für das WebFront
    Von hirschbrat im Forum Anleitungen / Nützliche PHP Skripte
    Antworten: 1
    Letzter Beitrag: 25.11.09, 17:51
  5. Webfront-Ansicht anpassen für Newbies
    Von dreamy1 im Forum WebFront
    Antworten: 36
    Letzter Beitrag: 19.09.09, 13:10