Responsive iOS 6 Theme für FHEM (CSS + JS) sowohl für iOS, Android und Desktop!

[Blackcat]

Ich empfehle auf allen Geräten den ios6touchpad Style!
Vorteil nur noch ein Port, eine Config etc

Update
Das Style wird nun offiziell mit FHEM per Update ausgeliefert. Änderungen werden dort eingecheckt und sind am nächsten Tag verfügbar.

Ideal für eine Verknüpfung als App Icon = Look and Feel wie eine echte App

Wichtig das Einbinden des JavaScripts über attr WEB JavaScripts ist nicht mehr notwendig!

Bilder siehe Anhang 

Ich empfehle dazu die IcoMoon Icons, die ich für FHEM angepasst habe (als zip im contrilib herunterladbar und in www/images/IcoMoon zu installieren dann als Bildquelle angeben und rereadicons durchführen)
oder hier:
http://fhem.de/IcoMoon.zip

Todo
-aktuell nichts bekannt

Bugs to fix
- Inputs im PlogEdit zu groß

Ich freue mich über Screenshots wie ihr das Style verwendet und natürlich auch über jedes "Danke"
Wünsche und Probleme bitte hier im Thread melden.

Viele Grüße
Sandra

Anleitung zum Ändern der Hintergrundfarbe der Icons im Dashboard
Die Farben können mittel des Attributes dashboard_customcss angepasst werden. Hier muss der CSS Code zum Ändern der Farben eingeben werden. Die gewünschte Farbe wird als HEX angeben. ( Farbe z.B. hier aussuchen: http://www.colorpicker.com/). Die ID steht jeweils für ein Tab ui-id-1 ist das 1. Tab von links

Beispiel für Farben eines Spektrums (siehe Bild) - Einfach in das Attributfeld kopieren

Code Auswählen Erweitern

#ui-id-1 .ui-tabs-icon {
background-color:#4C3BA5;
}
#ui-id-2 .ui-tabs-icon {
background-color:#4C80AF;
}
#ui-id-3 .ui-tabs-icon {
background-color:#4DAAAF;
}
#ui-id-4 .ui-tabs-icon {
background-color:#53C237;
}
#ui-id-5 .ui-tabs-icon {
background-color:#EFCD5F;
}
#ui-id-6 .ui-tabs-icon {
background-color:#E5883B;
}
#ui-id-7 .ui-tabs-icon {
background-color:#DA3C33;
}

-------
Hi,
da ich zu den altmodischen Appleusern gehöre, die auf das alte Design schwören und ihren Siriproxy behalten möchten, bin ich auf iOS6 geblieben.

Deshalb habe ich mich schon länger gefragt, warum es nur ein iOS7 Skin gibt ... wahrscheinlich weil es keiner entwickelt hat 

Also habe ich damit angefangen .... und suche bald gleichgesinnte Nutzer zum Testen

Es wird pure CSS sein, und soweit möglich auch mit allen Browseraußnahmen, damit die Darstellung einheitlich bleibt.
Als Grundlage habe ich auf das Standard Fhem sytle.css und defaultCommon.css aufgebaut ^^

[Blackcat]

So ein neues Statusbild, habe doch die Farben nochmal angepasst.... das blau war dann doch eher iOS5 
bin jetzt an dem Menü (damit es ähnlich wird wie in den Settings), ansonsten Versuche ich die Trennung der Bereiche im Content ähnlich wie im Shop zu machen

[Blackcat]

so weiter gehts ^^ Menü ist jetzt fertig.
Jetzt werde ich mich um den Content kümmern

Leider konnte ich bis jetzt nicht herausfinden, wie ich ein svg im background-image umfärbe.... fill geht leider nicht
(für Logo oben)

Code Auswählen Erweitern


#logo    {
position:absolute; top:5px; left:5px;
width:29px; height:29px;
z-index:99;
background-image: url(../images/fhemSVG/system_fhem.svg),-webkit-gradient(
linear,
right top,
right bottom,
color-stop(0, #E7EBF5),
color-stop(0.02, #C8D4E9),
color-stop(0.76, #5274B3),
color-stop(0.98, #204994)
);
background-image: url(../images/fhemSVG/system_fhem.svg),-o-linear-gradient(bottom, #E7EBF5 0%, #C8D4E9 2%, #5274B3 76%, #204994 98%);
background-image: url(../images/fhemSVG/system_fhem.svg),-moz-linear-gradient(bottom, #E7EBF5 0%, #C8D4E9 2%, #5274B3 76%, #204994 98%);
background-image: url(../images/fhemSVG/system_fhem.svg),-webkit-linear-gradient(bottom, #E7EBF5 0%, #C8D4E9 2%, #5274B3 76%, #204994 98%);
background-image: url(../images/fhemSVG/system_fhem.svg),-ms-linear-gradient(bottom, #E7EBF5 0%, #C8D4E9 2%, #5274B3 76%, #204994 98%);
background-image: url(../images/fhemSVG/system_fhem.svg),linear-gradient(to bottom, #E7EBF5 0%, #C8D4E9 2%, #5274B3 76%, #204994 98%);

background-size: 25px 25px, contain;
background-position: 2px 2px, 0px 0px;
background-repeat:no-repeat;
border-radius:5px;
border: 2px solid #000000;
background-color:#4b6dab;
}


[Blackcat]

Hier nun die erste Version zum Testen, bitte um viel Feedback und Screenshots

PS: dashboard ist leider noch nicht angepasst, da ich selbst keins eingerichtet habe

[Bennemannc]

Hallo Sandra,

klasse Arbeit. Was mir nicht so gefällt:
der Bereich für den Raum ist etwas zu breit, dadurch ist auf den Ipad die Plots nicht vollständig auf der Seite (im Querformat)
das Editierfenster (Edit Files) ist viel zu klein - nur zweizeilig

Sonst ist das für mich sehr ansprechend. Ich könnte mir durchaus vorstellen, diesen Style zu nutzen.

Danke
Gruß Christoph

PS. Im Hochformat wird nicht der volle Bildschirm genutzt.

[Blackcat]

Hallo Christoph, danke fürs testen

Was mir nicht so gefällt:
der Bereich für den Raum ist etwas zu breit, dadurch ist auf den Ipad die Plots nicht vollständig auf der Seite (im Querformat)

ich schau mal was ich machen kann

das Editierfenster (Edit Files) ist viel zu klein - nur zweizeilig

ist gefixt

Sonst ist das für mich sehr ansprechend. Ich könnte mir durchaus vorstellen, diesen Style zu nutzen.

Freut mich zu hören

PS. Im Hochformat wird nicht der volle Bildschirm genutzt.

... hm... scheinbar mag das Safari webkit css calc nicht :/ habe also mal feste werte zugewiesen zum Testen

im webkit gab es noch einen Bug bei den Verläufen, zudem habe ich die Datei auch gleich richtig benannt, sodass man sie direkt nach www/pgm2 kopieren kann

[Blackcat]

irgendwie komme ich wahrscheinlich ohne javascript nicht weiter bei der Erkennung der Bilddrehung.....
Oben ist es für Hochformat unten Quer :/ da muss ich nochmal nachschauen warum ...

Blogs laufen bei mir jetzt ganz gut (siehe Screen) , Farben muss ich aber noch anpassen

[Bennemannc]

Hallo Sandra,

mit dem Fix für das Editfenster passen jetzt auch die Plot auf die Seite - oder hast Du da auch noch etwas geändert ?
Jetzt fehlt "nur" noch das mit der Raumbreite - ich habe mal etwas getestet. Die Spalte schmaler zu bekommen ist nicht das Thema - den anderen Bereich breiter zu bekommen bzw. die Position zu ändern schon. Da blicke ich nicht, wo die festgelegt werden.
Im Detail-Bereich (rechts) ist die zweite Spalte etwas zu klein geraten. Bei einem "at" sollte da "next: hh:mm:ss" stehen. Das das nicht passt, wird es Zweizeilig geschrieben, dafür ist der Bereich er WebCmd relativ groß.

Gruß Christoph

[Blackcat]

Jetzt fehlt "nur" noch das mit der Raumbreite - ich habe mal etwas getestet. Die Spalte schmaler zu bekommen ist nicht das Thema - den anderen Bereich breiter zu bekommen bzw. die Position zu ändern schon. Da blicke ich nicht, wo die festgelegt werden.

was meinst du mit Raumbreite?

das Next Problem habe ich in der letzten Version schon mitgefixt

[Bennemannc]

Hallo Sandra,

bei mir füllen die Name der Räume noch nicht einmal die Hälfte der Spaltenbreite (300px, Table.room) aus - mein längster "Raumname" ist Wohnzimmer Oben - dafür würden 160 xp reichen und man hätte für die rechte Hälfte mit den Daten und Plot's mehr Platz.

Gruß Christoph

[Blackcat]

so besser? (200px für noch eine Möglichkeit der Icons vorne)

[Bennemannc]

Hallo Sandra,

Danke - super Arbeit !
Die Plot's nutzen zwar im Moment nicht den vollen Platz - aber das finde ich weniger schlimm als wenn sie über den Rand hinaus gehen - so kann man alles lesen und von der Platzaufteilung finde ich das auch ansprechend. 

Gruß Christoph

PS: mir fällt gerade auf, das die Befehlszeile fehlt, aber auch nur weil ich etwas dort eingeben wollte

[Blackcat]

PS: mir fällt gerade auf, das die Befehlszeile fehlt, aber auch nur weil ich etwas dort eingeben wollte

oben rechts

Kennst du ein Theme, das die Plots breiter macht bzw. umfärbt? Habe dazu noch nichts gefunden

[Bennemannc]

Hallo Sandra,

im Ios7 Style haben die Plots ein anderes aussehen (Hintergrund und so.).
Die Befehlszeile habe ich gefunden - aber dort würde ich einen anderen Hintergrund wählen, die sieht man sonst ja nicht.
Bei den set,get und attr ist noch eine andere Hintergundfarbe drin.

Gruß Christoph

[Blackcat]

Hallo Christoph,

im Ios7 Style haben die Plots ein anderes aussehen (Hintergrund und so.).

Danke, da muss ich mal reinschauen

Die Befehlszeile habe ich gefunden - aber dort würde ich einen anderen Hintergrund wählen, die sieht man sonst ja nicht.

Das habe ich bewusst so gemacht (siehe z.B. Farbe oben im App Store), damit fällt das input im Normalbetrieb nicht so auf (z.B. bei einem Wandterminal).
Mal sehen ob ich einen Standardtext oder ein Icon dort noch einfügen kann.

Bei den set,get und attr ist noch eine andere Hintergundfarbe drin.

fixed.

PS: Portraitmode fixed (das war ein Kampf)
das einzige was ich nicht ändern kann, dass man nach dem Drehen des iPad nochmal wegzoomen muss, das ist Safari spezifisch