S: Tablet UI Traffic Widget

[ChrisW]

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 ?

[Gunther]

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)

Code Auswählen Erweitern

<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.

Code Auswählen Erweitern

<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.

[eki]

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)

[Gunther]

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...

[eki]

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:

Code Auswählen Erweitern

<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)

[Gunther]

Danke, kleines aber effektives Detail. Schau ich mir die Tage an.