FHEM Forum

FHEM => Frontends => TabletUI => Thema gestartet von: ChrisW am 16 September 2017, 20:44:20

Titel: S: Tablet UI Traffic Widget
Beitrag von: ChrisW am 16 September 2017, 20:44:20
Hallo,
ich bin auf der suche nach einem schönen Widget für das Traffic Modul.
Wie habt ihr das ganze gelöst ? Vielleicht könnt ihr zu einem Screen auch ein Code Posten ?
Habe schon öfters Name NormaleZeit Atuelle Zeit gesehen. Das wäre erstmal auch schön. Einen Code hab ich noicht gefunden für das Traffic Modul nur für eine alte lösung.

Vielleicht hat ja jemand eine schöne lösung ?
Titel: Antw:S: Tablet UI Traffic Widget
Beitrag von: Gunther am 05 Dezember 2017, 23:48:47
Ich versuche mich auch gerade daran. Hast Du das schon eingebaut?

Ich habe mehrere Städte die ich tabellarisch darstellen möchte.

Leider bin ich bzgl. Anpassung von Readings unfähig.

Im Anhang sieht man meine ersten Gehversuche.

Mein "Template" schaut so aus (soll später variabel werden für die anderen Städte)
<div class="row">

<div class="cell-20  left-align darker">Bielefeld</div>

<div class="cell_15 center-align">
<div data-type="label" data-device="Verkehr_Bielefeld" data-get="distance" class="darker"></div>
</div>

<div class="cell_30 center-align">
<div data-type="label" data-device="Verkehr_Bielefeld" data-get="duration_in_traffic" class="inline darker"></div>
</div>

<div class="cell_15" center-align>
<div data-type="label" data-device="Verkehr_Bielefeld" data-get="delay" class="inline darker"></div>
</div>

<div class="cell_20 right-align">
<div data-type="label" data-device="Verkehr_Bielefeld" data-get="eta" class="inline darker"></div>
</div>

</div>


Das ist die Einbindung in die Oberfläche mit einer extra Spaltenüberschrift.
<li data-row="13" data-col="21" data-sizex="8" data-sizey="6">
<div data-template="template_label_title.html" data-parameter='{"var_title":"Verkehr"}'></div>
<div class="row-10 bg-red darker">
<div class="cell-20 left-align">Ziel</div>
        <div class="cell-15 center-align">km</div>
        <div class="cell-30 center-align">Dauer</div>
    <div class="cell-15  center-align">+ Min</div>
    <div class="cell-20  right-align">Ankunft</div>
</div>
<div data-template="template_verkehr.html"></div>

</li>


Wie Ihr seht, sehr zerrupft.
Freue mich über Beispiele von Euch bzw. Tipps, wie ich das einigermaßen schön hinbekomme.
Titel: Antw:S: Tablet UI Traffic Widget
Beitrag von: eki am 08 Dezember 2017, 08:35:55
Wenn Ihr das Ganze etwas aufwändiger gestalten wollt, könnt Ihr Euch ja mal das Google Maps Widget anschauen, das ich vor einger Zeit hier mal vorgestellt habe (https://forum.fhem.de/index.php/topic,78379.msg703359.html#msg703359 (https://forum.fhem.de/index.php/topic,78379.msg703359.html#msg703359))
Titel: Antw:S: Tablet UI Traffic Widget
Beitrag von: Gunther am 08 Dezember 2017, 10:15:13
Ich habe das schon gesehen. Tolle Sache.
Trotzdem möchte ich ja erstmal eine Übersicht haben. Und dann kommt als nächstes Dein Popup dran... 😉
Nur am Fundament mangelt es gerade...
Titel: Antw:S: Tablet UI Traffic Widget
Beitrag von: eki am 08 Dezember 2017, 13:58:49
Wenn Du das als Tabelle darstellen willst würde ich mal row-column (und nicht row-cell) verwenden (schau mal im ftui wiki nach wie das genau geht). Grundsatz wäre die folgende Struktur:

<div class="row">
  <div class="col-20">
    <div data-type="label">
    </div>
  </div>
</div>


außerdem habe ich gesehen, dass Du '_' statt '-' verwendest (also z.B. cell_15 statt cell-15) ;)
Titel: Antw:S: Tablet UI Traffic Widget
Beitrag von: Gunther am 08 Dezember 2017, 14:11:08
Danke, kleines aber effektives Detail. Schau ich mir die Tage an.  :)