Tablet UI - responsive Design (flexbox)

Begonnen von jemu75, 06 September 2017, 14:37:10

Vorheriges Thema - Nächstes Thema

andy19850

Zitat von: jemu75 am 08 September 2017, 13:26:43
Probiere es bitte mal mit dem Template und schicke mir mal eine Screenshot. Finden wir schon raus, wo es klemmt.  :)

Hat funktioniert, jetzt sieht es auf allen Devices hervorragend aus. Bin echt begeistert endlich was gefunden zu haben, was mir gefällt!
Top Arbeit!

klausw

Ich bin schon am Umbauen  8)
Das mit den Templates ist bisher an mit vorüber gegangen.
Eventuell kann ich damit auf PHP verzichten.

An den Detailseiten von Wetter und Anrufen wäre ich auch noch brennend interessiert  ;)

Nur für die Heizung habe ich noch keine gute Idee.
Ich möchte die Temperatur einstellen können, zwischen manuell und Automatik umschalten und das weekprofile aufrufen können. Das ganze soll natürlich nicht überladen wirken  :-\
So eine Art expand Button, der das Feld in der Vertikale vergrößert wäre ideal.
RasPi B v2 mit FHEM 18B20 über 1Wire, LED PWM Treiber über I2C, Luchtdruck-, Feuchtesensor und ein paar Schalter/LED\'s zum testen
Module: RPI_GPIO, RPII2C, I2C_EEPROM, I2C_MCP23008, I2C_MCP23017, I2C_MCP342x, I2C_PCA9532, I2C_PCF8574, I2C_SHT21, I2C_BME280

Mundus

Hi,

schließe mich den Komplimenten der Vorschreiber an.

Ich habe noch eine frage bzgl. der Thematik Link. Ist ein Link genauso schnell im Aufbau wie Pagebutton bzw. PageTab? Hierzu gibt es reichlich Aussagen im Forum, jedoch kein bezug zu Link :-)...

@klausw:
Vielleicht kannst du dein Temperatur Template mit Popup kombinieren, sodass nach einem "Klick" das Popup (Größe lässt sich definieren) mit deinen Einstellungsmöglichkeiten geöffnet wird.

Gruß

jemu75

Zitat von: moonsorrox am 08 September 2017, 14:02:07
Toll wäre es wenn du im ersten Beitrag alle Dateien ran hängen könntest, dann kann jeder sich dort bedienen... der es nachbauen möchte. So braucht man dann später nicht den ganzen Beitrag zu durch wühlen, denn es kommt sicher noch etwas mehr von dir und besonders kommen Fragen so kannst du immer auf den ersten Beitrag verweisen und auch dort aktualisieren....
Häng am besten das ganze /tablet Verzeichnis dort ran  :D ;D ;)

Ich habe jetzt mal alle Templates in den ersten Beitrag gepackt und jeweils die Parameter, die gesetzt werden können, dazu geschrieben.
Die Contentseiten sind faktisch immer nach dem gleichen Muster aufgebaut. Man kann sich also ebenfalls an den Beispiel-Content-Seite im ersten Beitrag orientieren und dann mit Hilfe der Templates eigene Content-Seiten aufbauen.

jemu75

Zitat von: Mundus am 08 September 2017, 16:44:22
Ich habe noch eine frage bzgl. der Thematik Link. Ist ein Link genauso schnell im Aufbau wie Pagebutton bzw. PageTab? Hierzu gibt es reichlich Aussagen im Forum, jedoch kein bezug zu Link :-)...
Ich habe folgende Erfahrung gemacht. Wenn die Content-Seiten das erste Mal angezeigt werden, dann dauert das Laden je nach Anzahl der Elemente einen kurzen Augenblick. Wenn die Seiten aber einmal geladen sind und man dann zwischen den Seiten hin und herspringt, dann sind die sofort da. Wie data-type="link" technisch genau funktioniert, müsste man mal bei setstate erfragen.  :)

jemu75

Zitat von: klausw am 08 September 2017, 16:26:24
An den Detailseiten von Wetter und Anrufen wäre ich auch noch brennend interessiert  ;)

Diese beiden Contentseiten sind recht einfach gestrickt. habe meine konkreten Seiten man angefügt. Die zugehörigen Templates findest du jetzt im ersten Beitrag. :)

content_weather.html

<!DOCTYPE html>
<html>
<body>
    <div class="page" id="content_weather">
<div class="phone-back-btn">
<div data-type="link" data-url="#content_home.html" data-load="#content_home" data-color="white" data-icon="mi-chevron_left" class="large"></div>
</div>

<div class="hbox">
<div class="vbox phone-width">
<div class="card lift">
<header>Vorhersage</header>
<section>
<div data-template="template_weather.html" data-parameter='{"var_device":"Wetter","var_day":"1"}'></div>
</section>
<section>
<div data-template="template_weather.html" data-parameter='{"var_device":"Wetter","var_day":"2"}'></div>
</section>
<section>
<div data-template="template_weather.html" data-parameter='{"var_device":"Wetter","var_day":"3"}'></div>
</section>
<section>
<div data-template="template_weather.html" data-parameter='{"var_device":"Wetter","var_day":"4"}'></div>
</section>
<section>
<div data-template="template_weather.html" data-parameter='{"var_device":"Wetter","var_day":"5"}'></div>
</section>
</div>
</div>
</div>
</div>
</body>
</html>


content_phone.html

<!DOCTYPE html>
<html>
<body>
    <div class="page" id="content_phone">
<div class="phone-back-btn">
<div data-type="link" data-url="#content_home.html" data-load="#content_home" data-color="white" data-icon="mi-chevron_left" class="large"></div>
</div>

<div class="hbox">
<div class="vbox phone-width">
<div class="card lift">
<header>Anrufe</header>
<section>
<div data-template="template_call.html" data-parameter='{"var_device":"myfritzCalls","var_call":"1"}'></div>
</section>
<section>
<div data-template="template_call.html" data-parameter='{"var_device":"myfritzCalls","var_call":"2"}'></div>
</section>
<section>
<div data-template="template_call.html" data-parameter='{"var_device":"myfritzCalls","var_call":"3"}'></div>
</section>
<section>
<div data-template="template_call.html" data-parameter='{"var_device":"myfritzCalls","var_call":"4"}'></div>
</section>
<section>
<div data-template="template_call.html" data-parameter='{"var_device":"myfritzCalls","var_call":"5"}'></div>
</section>
<section>
<div data-template="template_call.html" data-parameter='{"var_device":"myfritzCalls","var_call":"6"}'></div>
</section>
<section>
<div data-template="template_call.html" data-parameter='{"var_device":"myfritzCalls","var_call":"7"}'></div>
</section>
<section>
<div data-template="template_call.html" data-parameter='{"var_device":"myfritzCalls","var_call":"8"}'></div>
</section>
<section>
<div data-template="template_call.html" data-parameter='{"var_device":"myfritzCalls","var_call":"9"}'></div>
</section>
</div>
</div>
</div>
</div>
</body>
</html>

moonsorrox

Zitat von: jemu75 am 09 September 2017, 14:00:22
Ich habe jetzt mal alle Templates in den ersten Beitrag gepackt und jeweils die Parameter, die gesetzt werden können, dazu geschrieben.
da hast du dir aber richtig Mühe gegeben, soviel Aufwand..!  ;) Es werden dir viel danken...!  :D
Ich dachte du hängst einfach nur ein Zip Ordner ran wie es einige hier schon getan haben, aber so ist es absolut OK Super..!!!  :) :D
Intel-NUC i5: FHEM-Server 6.1 :: Perl v5.18.2

Homematic: HM-USB-CFG2,HM-CFG-LAN Adapter, HM-LC-BL1-FM, HM-LC-Sw1PBU-FM, HM-LC-Sw1-PI-2, HM-WDS10-TH-O, HM-CC-TC, HM-LC-SW2-FM

holle75

Jup, wirklich nett anzusehen, aber ich verstehe nicht, warum du uns händisch Code kopieren, Files benennen, speichern lässt? Gibt es einen Grund, die Dateien nicht als zip an deinen Beitrag zu hängen?

Verstehe mich bitte nicht falsch, tolle Arbeit, aber irgendwie fällt es so schon recht schwer schnell mal dein Layout Live auszuprobieren. Oder habe ich etwas übersehen?

lieb Gruß

H.


eppi

Hallo jemu
Super Sache, DANKE vielmals!!!

Könntest du bitte noch die Dateien content_cam.html und content_blinds.html zur Verfügung stellen?
Danke! Gruss Eppi

jemu75

Zitat von: holle75 am 09 September 2017, 15:09:30
Jup, wirklich nett anzusehen, aber ich verstehe nicht, warum du uns händisch Code kopieren, Files benennen, speichern lässt? Gibt es einen Grund, die Dateien nicht als zip an deinen Beitrag zu hängen?

So, bevor ich noch überfallen werde, habe ich jetzt noch die kompletten Dateien als ZIP-File an den ersten Beitrag angefügt.  ;)

holle75

Vielen Dank Jemu75! ... so machts einfach mehr Spaß sich deine Arbeit genauer anzusehen ;) .....

holle75

... ich ziehe meinen Hut.  Vor allem wirklich sauberer, übersichtlicher, nachvollziehbarer Code. Kein zurechtgequetsche. Nice. Inspiriert. Danke!

jemu75

Vielen Dank für das zahlreiche Lob. Freue mich, wenn dadurch neue Ideen entstehen.

ich denke jedoch, da geht noch einiges.  ;)
Gerade was die Parameter anbetrifft. Aber für selbstgebaut und wie schon geschrieben mit den "Boardmitteln" eine aus meiner Sicht schöne Variante. Bin mal gespannt welche Anregungen noch so kommen.  :)

nanocosmos

Ich versuche aktuell ein paar Features von materialize auszuprobieren.
Die Card reveal Funktion finde ich sehr interessant für FTUI
http://materializecss.com/cards.html#reveal

Vielleicht ist es ja für ein paar andere ebenfalls interessant. [emoji4]

holle75

#29
Hoppala, das ist ja wenn man anfängt sich reinzudenken noch wesentlich komplexer als gedacht ;)

Ich versuche gerade deinen content/template Code in Kombination mit den DOIF´s zu verstehen (zb. content_light / template_switch).

könntest du da mal ein Beispiel mit fhem.cfg Code ausführen?

edit: wo nimmst du das "mode" her? .... oder die overviews in content_home, auch sehr spannend, aber wo fragst du die ab?