Webfront - ein wenig aufgehübscht

Hallo Forum,

normalerweise sind meine ersten Beiträge in Foren Fragen… Diesmal aber nicht.

Ich habe mich jetzt endlich mal intensiver mit IPS ausseinandersetzen können und hatte sehr zeitnah das Bedürfnis das Frontend zu pimpen.

Ich arbeite ausschliesslich mit Firefox. Da das schlichtweg der Beste und Standardkonformse Browser ist. Deshalb wird im IE und anderen Browsern möglicherweise nicht alles so angezeigt wie im Screenshot (z.B. runde Ecken). Anpassungen für Android (ich möchte mir für meine Steuerung das Archos 101 zulegen) werde ich in jedem Fall noch machen.

Das Hintergrundbild ist nur ein Bespiel und müsste dann in der gewünschten Auflösung hinterlegt werden. Wenn das Webfront mit verschiedenen Auflösungen angezeigt wird… also auf verschiedenen Endgeräten könnte man das Bild noch Skalieren lassen was aber zu lasten der Qualität geht. Die beste Lösung währe wohl das Bild erstmal in größt notwendige Auflösung zu hinterlegen und es evtl. noch mit css zu zentrieren.

Viel Spass!

So in diesem Posting ab jetzt immer die aktuelle Version

--------- Aktuelle Version v1.0 -----------

Feature Liste (Release Notes)

[ol]
[li]Browser im Browser (ab sofort IPS-Browser). Es können URL’s direkt im Webfront aufgerufen werden.[/li][li]IPS-Browser wurde mit Preloader ausgestattet. Seiten werden erst vollständig geladen bevor Sie angezeigt werden.[/li][li]Kleine hässlichkeiten im Design wurden beseitigt und das Design noch verfeinert.[/li][li]Template-Struktur aufgeräumt (CSS getrennt usw.)[/li][li]Button in Footerleiste auf der Wetterseite angepasst (CSS getrennt usw.)[/li][/ol]

Installation Template

[LIST=2]
[li]Ordner „template“ aus dem ZIP-Archiv in den Ordner c:/IP-Symcon/webfront kopieren.[/li][li]webfront.css im Ordner „webfront“ bearbeiten. Folgender Eintrag an erste Stelle.[/li]```html
@import url(„template/css/style.css“);


[li]Icons aus dem Template-Ordner in den Ordner c:/IP-Symcon/webfront/img/icons kopieren.[/li][li]Für die entsprechenden Button in der oberen Menüleiste müssen die Icons in IPS definiert werden.[/li][/LIST]

[b]Integration Browser[/b]
[LIST=3]
[li]Neuen eintrag im "Webfront Konfigurator" hinzufügen. Element-Typ: "Extere Seite".[/li][li]URL hinterlegen: [b]/template/browser.php[/b] (Der vollständige Pfad mit IP und Port ist nicht notwendig)[/li][li]Titel (Browser) hinterlegen.[/li][li]Icon auswählen. Wenn die Icons so wie in der Installationsanleitung beschrieben kopiert wurden sollte das Icon auszuwählen sein.[/li][li]"Sichtbarkeit untere Leiste" muss auf nein gestellt werden.[/li][/LIST]

![screen1.jpg|962x565](upload://820XWdLIpIXedKNAnPBm2P4c8Kt.jpeg)



![screen3.jpg|963x566](upload://TiAozl1HzTbjJqtqSdQzjncnc5.jpeg)



![screen4.jpg|962x565](upload://yQyfi2yWQchQ1BK9NcYrxx4bLUE.jpeg)



[template_v1.0.rar|attachment](upload://bByk0KHqSI3RxUtJnjIxti4OrZA.rar) (541 KB)



![screen2.jpg|963x566](upload://c0sjXvLAkU02UzFdFN4vD9FyaGp.jpeg)



![screen5.jpg|963x566](upload://8T8YTgGr1UYn5xXXioBNrcRFqZf.jpeg)



![screen6.jpg|962x565](upload://f4osqGcYJHPtRlNH7TyH7Q1n91y.jpeg)

Das sieht ja mal äusserst hübsch aus !

Tolle Ergänzung die du da gebastelt hast !

Würde uns sehr freuen wenn uns jemand mit so tollen grafischen Frontends versorgt, die auch mal so eben flott eingebunden sind.

DELUXE ! sabber

Einfach genial…

wäre cool wenn eine Option beim WebServer eingebaut werden würde wo man nur eine andere CSS auswählen kann.
Ich möchte sowas halt immer DAU sicher :wink:

Stimmt, das wäre sehr edel. Á la Firefox, da kann man die „Skins“ ja auch komfortabel auswählen.

Habs gerade eingebaut bei mir und finde die Optik ziemlich sexy.

Mal sehen wie es nachher auf dem iPad aussieht.

Habs auch gleich eingebaut :wink:

Und auf dem iPad… noch etwas optimierungsbedürftig - aber geht auch…

Ein bißchen unschön ist es, das die Statusspalte der Objekte die sich erweitern lassen und dieser, die sich nicht erweitern lassen, nicht bündig sind.
Diese sollten nach Möglichkeit gleichmäßig zentriert in einer Spalte stehen.

Das „Problem“ ist zwar schon beim normalen Frontend vorhanden, hier aber deutlich auffälliger.

das ist ja sau geil!!!

ich habe jetzt gerade keinen zugriff auf meinem Rechner, deswegen sehr unwissend!

Kann man die Hindergrundbilder austauschen, und wenn ja, muss man ips neustarten? oder geht das im laufendem betrieb?

Ich hab den Dienst kurz beendet. Die Bilder liegen im Archiv. Die kannst austauschen…
Wäre cool wenn jemand (der graphisch begabt ist) mal ein paar tolle Hintergründe basteln könnte… gg

@ cms-projekte

Also ich würde mich sehr freuen wenn du deine weiteren ergebnisse hier kundgibst. Wenn ich dich in irgendeiner form unterstützen kann sag bescheid allerdings kenne ich css noch nicht.

@ epogo

Heute abend probire ich das mal mit verschidienen hintergründen die ich für´s dashboard hab aus, ich habe da schon so ein paar ideen :smiley:

im laufendm betrieb tauschen geht nicht schätze ich mal sonnst könnte man ja ein webcam bild hinterlegen

Uahhh… so viele antworten in so kurzer Zeit.

Ich habe gerade eben noch auf die Pro Version geupdated und nach dem Einfügen weiterer Punkte in die obere Leiste gesehen das die Scrollbars alles zerhunzen…

Auch die Screenshots von euch sind sehr aufschlussreich.

Ich bleib dran und sehe zu, in Kürze eine bessere Version zu releasen.

Das Austauschen des Hintergrundbildes geht im laufendem Betrieb. Es muss nur im Browser neu geladen werden. Das z.Z verwendete Bild ist 1024px breit

Bitte immer bedenken das das absolut alpha ist… also noch ein wenig Geduld…

Ich neheme mir jetzt ersmal die obere Menüzeile vor…

@cms-projekte

Danke für deine Arbeit. Klar… wenn’s was zu testen gibt gehen wir immer gleich ran. Teste zu Deiner Info auf OSX mit Safari (Webkit) sowie mit dem iPad.

Ich hab dein Interface mal mit einem passig farblich abgetönten Satellitenbild von Google Maps kombiniert, welches ich mir per Screenshot rausgezogen habe.

Auf Sich möchte ich solche oder ähnliche Bilder - natürlich alles noch ein wenig hübscher - auf jeder Seite unterbringen.

Satelliten Bild auf der Hauptseite und jeweils ein Raumbild auf den Raumseiten.
Angedacht war den Raum mehrfach zu fotografieren - je nachdem welches Licht gerade an ist, ob Jalousien hoch oder runter, usw. - und das ganze dann dynamisch verändern zu lassen.

Wahnsinns arbeit, aber sehr stylisch wie ich finde…

sieht schon echt gut aus, denke das werde ich heute abend auch mal probieren.

Ich finde eine „moderne“ Optik steht IPS gut. Denn funktional ist es gut aufgestellt und andere Automatisierungen verkaufen sich nur über die Optik. Aber das Auge isst ja bekanntlich mit.

Sieht immernoch sau geil aus!
habe es jetzt auch mal ausprobiert ist eigentlich einfach allerdings ums dau sicher zu machen solltest du in deine anleitung rein nehmen das der eintrag

Am anfang stehen muss;)

Ich bin nämlich direkt drauf reingefallen

…ich finds auch geil!!

VG Dirk

Weitermachen und hier veröffentlichen wäre super

Hat jemand eine Idee wie ich die Webfront.css editiert bekomme.

Meine ganzen CSS - Editoren funktionieren bei dieser Datei nicht.

VG Dirk

Habs auch mal installiert :smiley:
Sieht wirklich gut aus, ich vermisse nur die automatische Skalierung des Hintergrundbilds :wink:

@ zman0801

ich habe es einfach mit dem texteditor gemacht