New FHEM Tablet UI

[nesges]

Vielen Dank für die Hilfestellungen, aber ich mache wohl irgendwas falsch... bin jetzt auch nicht der html-Guru...

Habt's ja mittlerweile gelöst Der Vollständigkeit halber ein weiterer Weg nach Rom:

Code Auswählen Erweitern

<div class="centered">
    <div class="left">
        <div data-type="switch" data-device="Alle_Lichter" class=""></div>
        <div data-type="label" class="small narrow darker">Alle Lichter</div>
    </div>
    <div class="left">
        <div data-type="contact" data-device="Alle_Fenster" class=""></div>
        <div data-type="label" class="small narrow darker">Alle Fenster</div>
    </div>
</div>

[setstate]

Ich nochmal...

Der Dimmer wird bei mir so seltsam angezeigt... liegt das an mir?

Gruß, der Sloot

hast du beim Label 'narrow' in class mit drin? Das würde das Label näher ran rücken.
Und nach unten ist genügend Platz?
ggf. den Code-Teil mal schicken, wenn trotzdem nicht klappt ...

[Adam]

Hi, ein riesen Lob für das geile Projekt.

Ich bin völlig begeistert  und versuche natürlich direkt mal eine Info Seite für mein Tablet zu erstellen.

Da kommt dann schon die erste Frage, dessen Antwort ich leider alleine nicht finden kann.

Ich möchte den "slider" kleiner gestaltet, leider scheint "mini" noch nicht zu funktionieren.
Kann ich in einer der css Dateien, die Höhe vielleicht selber anpassen?

Kann mir jemand weiter helfen?

Gruß
Adam

[setstate]

Hi, ein riesen Lob für das geile Projekt.

Ich bin völlig begeistert  und versuche natürlich direkt mal eine Info Seite für mein Tablet zu erstellen.

Da kommt dann schon die erste Frage, dessen Antwort ich leider alleine nicht finden kann.

Ich möchte den "slider" kleiner gestaltet, leider scheint "mini" noch nicht zu funktionieren.
Kann ich in einer der css Dateien, die Höhe vielleicht selber anpassen?

Kann mir jemand weiter helfen?

Gruß
Adam

Mini wird es mit dem nächsten Update geben (heute oder spätestens morgen)

[Brockmann]

Ich weiß, blinkende Schrift auf Webseiten ist seit den 80ern verpönt. Aber es gibt bestimmte Informationen, die ich auf keinen Fall übersehen möchte, wenn sie auftauchen. Deshalb habe ich einen Weg gesucht, ein Label bei Bedarf blinken zu lassen, und zwar auf allen Geräten, auf denen ich die Tablet UI verwenden möchte. Falls es mal jemand braucht, so gehts:

Code Auswählen Erweitern


.blink {
   text-decoration:blink;

  -webkit-animation-name:blinker;
          animation-name:blinker; 
  -webkit-animation-iteration-count:infinite; 
          animation-iteration-count:infinite; 
  -webkit-animation-timing-function:cubic-bezier(1.0,0,0,1.0);
          animation-timing-function:cubic-bezier(1.0,0,0,1.0);
  -webkit-animation-duration:2s;
          animation-duration:2s;
}

@-webkit-keyframes blinker { from {opacity:1.0;} to {opacity:0.0;} }
        @keyframes blinker { from {opacity:1.0;} to {opacity:0.0;} }

Mit dem duration-Wert kann man den Intervall verändern.
(Dass alles doppelt zu sein scheint, ist gewollt. Die webkit-Angaben sind für Chrome, die anderen für Firefox.)

Am Besten in eine eigene CSS-Datei und die dann zusätzlich zur fhem-tablet-ui.css einbinden, damit es nicht durch ein Update überschrieben wird, etwa so:

Code Auswählen Erweitern

<link rel="stylesheet" href="/fhem/tablet/css/my-fhem-tablet-ui.css" />

Dann kann mal das blink mit in die class-Angabe eines Elements einfügen.

Erfolgreich getestet am PC mit Firefox und Chrome sowie unter Android mit Chrome und WebViewControl.

[setstate]

Ich weiß, blinkende Schrift auf Webseiten ist seit den 80ern verpönt. Aber es gibt bestimmte Informationen, die ich auf ...

Hallo Brockmann,
vielen Dank für deine Mühe, aber das geht mit den fa-blink und blink Klassen schon

http://forum.fhem.de/index.php/topic,34233.msg283489/topicseen.html#msg283489

Ich muss unbedingt die Readme daraufhin updaten.

[setstate]

Update - Version 1.4 - Schnelleres Laden der Seite

Ab sofort gibt es die Version 1.4, die eine Optimierung beim ersten Start mitbringt. Damit werden die Widgets schneller angezeigt und aktualisiert.

- Slider Widget versteht jetzt die Class 'mini' (60% Höhe)

[nesges]

Update - Version 1.4 - Schnelleres Laden der Seite

Ab sofort gibt es die Version 1.4, die eine Optimierung beim ersten Start mitbringt. Damit werden die Widgets schneller angezeigt und aktualisiert.

Die zusätzlichen Widgets aus Widgets-for-fhem-tablet-ui sind an die neue Version angepasst. Da sich einige Interna geändert haben, müsst ihr sie nach dem Update auf Version 1.4 ebenfalls aktualisieren. Die gute Nachricht: Das Widget-Repository unterstützt jetzt ebenfalls den Fhem-Updatemechanismus. Mehr dazu im Widgets-Thread.

PS: setstate hat FTUI verdammt schnell gemacht - Update lohnt sich unbedingt!

[tomster]

Das Update haut bei mir leider nicht hin:

Code Auswählen Erweitern


UPD www/tablet/css/fhem-tablet-ui.css
UPD www/tablet/fonts/fhemSVG.eot
Got 127396 bytes for www/tablet/fonts/fhemSVG.eot, not 91804 as expected,
aborting.

[setstate]

jetzt besser, mit dem Update?

[tomster]

Über die filesize läuft er jetzt drüber, aber ich habe irgendwie ein Rechte-Problem. Keine Ahnung wo das nun schon wieder herkommt...

Code Auswählen Erweitern


UPD www/tablet/css/fhem-tablet-ui.css
UPD www/tablet/fonts/fhemSVG.eot
cp ./www/tablet/fonts/fhemSVG.eot ./restoreDir/2015-04-16/www/tablet/fonts/fhemSVG.eot failed:Permission denied, aborting the update

Ich hab mir die Restore-Dirs zwar vorher noch nie angeschaut, aber warum ist owner/group "pi" und nicht fhem/dialout?

Code Auswählen Erweitern


pi@raspberrypi /opt/fhem/restoreDir/2015-04-16 $ ls -l
insgesamt 216
-rw-r--r-- 1 pi pi  93034 Apr 16 16:37 CHANGED
drwxr-xr-x 2 pi pi   4096 Apr 16 16:41 contrib
drwxr-xr-x 2 pi pi   4096 Apr 16 16:41 docs
drwxr-xr-x 5 pi pi   4096 Apr 16 16:41 FHEM
-rw-r--r-- 1 pi pi 108221 Apr 16 16:37 fhem.pl
drwxr-xr-x 5 pi pi   4096 Apr 16 14:50 www


[setstate]

Echt klasse wie schnell die Implementierung hier von statten geht.

Ich habe mir mal die Fonts angeschaut und bemerkt dass bei der Erstellung der Font und CSS Dateien sich ein Fehler eingeschlichen hat.

Dadurch sind nicht alle SVGs importiert worden.
Bin mir auch ziemlich sicher woher der Fehler kommt, das müsste ein Bug in IcoMoon sein.
Sobald eine andere Datei, (in diesem Fall höchstwahrscheinlich die *.txt) die nicht von IcoMoon als Fontvorlage unterstützt wird, vorkommt, bricht das Programm den Import ab und importiert den Rest nicht mehr.

Die Zips sollten nun vollständig sein. Die Präfixe habe ich bei oa- und fs- gelassen. Ich hoffe der Rest passt.

Danke dir, die geänderten Files sind jetzt mit dabei

Als kleines Beispiel zur Nutzung: Fenster offen, Fenster zu Anzeige

Code Auswählen Erweitern


<div data-type="symbol" data-device="KuechenFenster"
            data-icons='["oa-fts_window_2w bold","oa-fts_window_2w_open bold"]'
            data-on-colors='["#505050","#aa6900"]'
            data-get-on='["closed","open"]'
            class="narrow">
</div>
<div data-type="label" class="narrow darker small">Fenster</div>


[tomster]

So, Rechte passen wieder...
Waahhhnsinn! Das ist jetzt aber richtig zackig geworden! Und Danke für die vollständigen OA-Icons!

[Phil__]

@setstate & nesges

Einfach tolle Arbeit!

[miot]

Guten Morgen,

das update habe ich heute frueh erfolgreich durchgefuehrt.
Seither werden einzelne Icons (verwende ausschliesslich  fa-) und Werte nicht angezeigt. Die betreffende Seite muss mehrfach manuell neu geladen / refreshed werden, damit irgendwann alle Icons einwandfrei angezeigt werden.  Beispiel-Screenshots anbei.

Gruss
Michael

Update - Version 1.4 - Schnelleres Laden der Seite

Ab sofort gibt es die Version 1.4, die eine Optimierung beim ersten Start mitbringt. Damit werden die Widgets schneller angezeigt und aktualisiert.

- Slider Widget versteht jetzt die Class 'mini' (60% Höhe)