FTUI version 3

[mr_petz]

mir fällt heute gerade auf was mit dem Datum los ist... hat das noch jemand so..?

War hier:
https://forum.fhem.de/index.php/topic,115259.msg1136236.html#msg1136236
schon Thema...
für Mai zählt das selbe..

Gruß Thomas

[moonsorrox]

  super danke, werde ich gleich mal machen...!

Dann sicher für Juni und Juli ebenfalls, da auch 4 Buchstaben 

[mr_petz]

super danke, werde ich gleich mal machen...!

Dann sicher für Juni und Juli ebenfalls, da auch 4 Buchstaben 

Es geht nur um das 1. M
also nur März,Mai,March und May...

[OdfFhem]

@mr_petz

ich hatte heute Gelegenheit, Deine Komponente zu testen und sie läuft eigentlich wie gewünscht.
Unterschied bei mir ist nur, dass mein FHEM-Device keine konkrete Abfahrtszeit liefert, sondern die noch zur Verfügung stehende Minutenzahl bis zur Ankunft/Abfahrt.


Beim Blick ins js-File ist mir auf die Schnelle Folgendes aufgefallen:


Eine kleine Änderung erlaubt die Nutzung der von FTUI3 bereitgestellten dateFormat-Routine.

Code Auswählen Erweitern


import { dateFormat } from '../../modules/ftui/ftui.helper.js';
...
const datum = dateFormat(new Date(), 'hh:mm');

oder

Code Auswählen Erweitern


import * as ftuiHelper from '../../modules/ftui/ftui.helper.js';
...
const datum = ftuiHelper.dateFormat(new Date(), 'hh:mm');

Den Umweg über eine Zwischenvariable (datum) könnte man auch weglassen.


Du verwendest

Code Auswählen Erweitern


  let Timeout = '';
  ...
  clearTimeout(this.Timeout);
  Timeout = setTimeout(() => this.updateTime(), 5000);

Timeout und this.Timeout sind nicht identisch; this.Timeout wurde nie gesetzt und hat dementsprechend stets den Wert undefined. Das 5 Sekunden-Intervall scheint ein wenig zu kurz, da die Zeit nur minutengenau dargestellt wird.


Du öffnest zunächst drei Spalten und schließt erst anschließend die so geöffneten Spalten; normalerweise wird eine Spalte geöffnet und vor dem Öffnen der nächsten Spalte geschlossen.

Interessant wäre vermutlich, die Uhrzeit analog zu thead als tfoot-Tag zu realisieren.

Weiterhin könnte man statt eine "starre" Datenreihe bereitzustellen, in der fillList-Routine die benötigten Datenreihen zusammenbauen.

Um die css zu straffen, könnte man insbesondere die .list<Default|DVB|RVSOE> teilen; der bis auf Farbe identische Teil könnte ausgelagert werden. Gleiches gilt für .<Default|DVB|RVSOE>

Interessant wäre noch, ob man andere Verkehrsverbünde aus farblicher SIcht dynamisch integrieren könnte ...


Dies sind natürlich nur Anregungen ... keine Notwendigkeiten

[mr_petz]

@OdfFhem
Danke fürs Feedback.
Ich hatte schon vorher mal geschrieben, dass ich nur ein HobbyProgger bin und wollte halt auch andere User animieren was auf die Beine zu stellen. Wir können ja alle nur gemeinsam das Projekt V3 voran treiben. setstate leistet hier ja super Arbeit.

@mr_petz

Beim Blick ins js-File ist mir auf die Schnelle Folgendes aufgefallen:

Eine kleine Änderung erlaubt die Nutzung der von FTUI3 bereitgestellten dateFormat-Routine.

Code Auswählen Erweitern


import { dateFormat } from '../../modules/ftui/ftui.helper.js';
...
const datum = dateFormat(new Date(), 'hh:mm');

oder

Code Auswählen Erweitern


import * as ftuiHelper from '../../modules/ftui/ftui.helper.js';
...
const datum = ftuiHelper.dateFormat(new Date(), 'hh:mm');

Den Umweg über eine Zwischenvariable (datum) könnte man auch weglassen.

Ja das mit der Zeit hatte ich auch probiert, aber nicht hinbekommen.
Das in min (rechte Spalte), muss auch noch mit rein.

Du verwendest

Code Auswählen Erweitern


  let Timeout = '';
  ...
  clearTimeout(this.Timeout);
  Timeout = setTimeout(() => this.updateTime(), 5000);

Timeout und this.Timeout sind nicht identisch; this.Timeout wurde nie gesetzt und hat dementsprechend stets den Wert undefined. Das 5 Sekunden-Intervall scheint ein wenig zu kurz, da die Zeit nur minutengenau dargestellt wird.

Das habe ich bereits umgestellt auf setInterval.
Man sollte glaube eh besser auf setInterval setzen.
Ist im letzten geposteten Beitrag mit den Dateien schon hochgeladen.
https://forum.fhem.de/index.php/topic,115259.msg1137897.html#msg1137897

Du öffnest zunächst drei Spalten und schließt erst anschließend die so geöffneten Spalten; normalerweise wird eine Spalte geöffnet und vor dem Öffnen der nächsten Spalte geschlossen.

Ich habe das nicht anders hinbekommen. Das musste ich durch das alternate-Attribut so machen, weil sonst der dunklere Background der wechselnden Reihen unterbrochen waren.

Interessant wäre vermutlich, die Uhrzeit analog zu thead als tfoot-Tag zu realisieren.

Weiterhin könnte man statt eine "starre" Datenreihe bereitzustellen, in der fillList-Routine die benötigten Datenreihen zusammenbauen.

Um die css zu straffen, könnte man insbesondere die .list<Default|DVB|RVSOE> teilen; der bis auf Farbe identische Teil könnte ausgelagert werden. Gleiches gilt für .<Default|DVB|RVSOE>

Interessant wäre noch, ob man andere Verkehrsverbünde aus farblicher SIcht dynamisch integrieren könnte ...

Da bin ich glaube raus.

Wenn du Muse hast daran zu Arbeiten, dann kannst du gern die Anpassungen vornehmen.
Ich bin auch weiterhin gern Bereit zu testen und mit zu entwickeln.

Danke und Gruß Thomas

[rallye]

Bei Fragen einfach melden...

Viele Grüße
Olli

Danke für deine Code-Schnippsel. Eine Bitte noch: Kannst du uns auch deine Icons zur Verfügung stellen ? Wäre ganz toll ! Danke

[mr_petz]

Hi @all,

Update für´s departure...
Paar CSS Anpassungen vorgenommen und fading bei change Reading hinzugefügt.
Dann wird automatisch entw. Zeit bei hh:mm oder in Min bei nur mm angezeigt.

Hier die neuen Dateien:
Datei Forum Link

Gruß Thomas

[LuGu]

Update für´s departure...

@mr_petz:
Tolle Arbeit und schnelle Weiterentwicklung.
Ich habe ein fehm-device, dass mir die Abfahrtszeit nur in min anzeigt. Ich möchte aber alternative auch die direkte Abfahrtszeit anzeige (siehe Anhang).
Dafür musste ich nur ein paar kleine Änderungen einbauen und in der .html das Attribut depInMin hinzugefügt.
Magst Du mal testen, ob das auch mit deinem fehm-device funktioniert. Wäre ja schön, wenn wir eine Lösung für beide Varianten hätten.

Code Auswählen Erweitern


        const line = json[idx];
let when = line[2];
const currentDate = new Date();
const departureTime = new Date(currentDate.getTime() + (when * 60 * 1000));
if (this.hasAttribute('depInMin') && !when.match(/:/)) {
when = dateFormat(departureTime, 'hh:mm');
}
text = (n % 2 === 0 && (this.hasAttribute('alternate')) ? '<div class="alt"><div class="fade">' : '<div><div class="fade">');
text0 += text + '<div class="id0">' + line[0] + '</div></div></div>';
text1 += text + '<div class="dest0">' + line[1] + '</div></div></div>';
text2 += text + '<div class="time0">' + when + '</div></div></div>';
min = (when.match(/\:/g) ? 'Zeit' : 'in Min');
};


Bestimmt nicht der optimale code, aber es funktioniert.

Gruß LuGu

[mr_petz]

@LuGu

Ja super das du hier mit machst. Code funktioniert so. War im widget vom FTUI2 auch so drin...
Wollte ich auch noch mit rein nehmen, aber da warst du schneller .
Ja man kann noch vieles per Attribut integrieren wzB. Größe der Schrift, fade an/aus oder was man im header stehen haben will usw...
Ob man es braucht ist dann die andere Seite...

Ich werde jetzt erstmal mit dem departure abschließen, weil ich denke das es so passt für alle.
Mal schauen ob setstate das so mit ins GitHub rein nimmt. kA.
Ansonsten mache ich dafür einen neuen Thread auf.
Würde dann die Erweiterung so übernehmen wenn´s recht ist...
ps depInTime träfe es besser...denke ich, weil ja mm in hh:mm

Nächstes Projekt wird das Pinpad. Das geht zwar auch so wie ich es hier:
https://forum.fhem.de/index.php/topic,115259.msg1134096.html#msg1134096
schon beschrieben habe, aber das ist halt bissl aufwendig in der Form.

Gruß Thomas

[LuGu]

Würde dann die Erweiterung so übernehmen wenn´s recht ist...
ps depInTime träfe es besser...denke ich, weil ja mm in hh:mm

Ja klar!

Gruß LuGu

[setstate]

Ich übernehme das gerne. Danke für "Bauen"

[mr_petz]

Ich übernehme das gerne. Danke für "Bauen"

Aber gerne. Du machst ja sonst die ganze Arbet alleine.
Fehlen nur noch paar Layouts. DB z.B.

[Sailor]

Moinsen zusammen

Nachdem ich eine umfangreiches Bedienpanel in FTUI2 zusammengestellt habe und mein Raspi4 4GB des Controlpanels im Flur nunmehr Minuten braucht um auf die Clicks zu reagieren,
will ich auf FTUI3 umsteigen und scheitere schon am ersten File.

In der Beispiel - index.html ist die gesamte Seite in einer Datei (index.html) abgelegt.
Wie bekomme ich wieder verschiedene Unter-html-Dateien hin, die von der pagebutton aufgerufen werden?

Wie gesagt, ich fuchse mich noch rein, aber ich brauche irgendwo einen Anfang...

Gibt es vielleicht irgendwo was zum lesen?

Alter FTUI2 Code:

Code Auswählen Erweitern


<!DOCTYPE html>
<html>
<head>
<!--
/* FHEM tablet ui */
/*
*/
-->

<!-- Basic Stylesheet with Darkblue AddOn -->
<link rel="stylesheet" href="css/fhem-tablet-ui.css" />
<link rel="stylesheet" href="css/fhem-darkblue-ui.css" />
<link rel="stylesheet" href="css/OwnIcons.css">


<!-- Different Stylesheet depending on daylight conditions calculated by the twilight module -->
<link rel="stylesheet" href="css/lightscene-0.css" data-type="theme" data-device="OS_Astro" data-get="light" data-get-on="0" data-get-off="!0" />
<link rel="stylesheet" href="css/lightscene-1.css" data-type="theme" data-device="OS_Astro" data-get="light" data-get-on="1" data-get-off="!1" />
<link rel="stylesheet" href="css/lightscene-2.css" data-type="theme" data-device="OS_Astro" data-get="light" data-get-on="2" data-get-off="!2" />
<link rel="stylesheet" href="css/lightscene-3.css" data-type="theme" data-device="OS_Astro" data-get="light" data-get-on="3" data-get-off="!3" />
<link rel="stylesheet" href="css/lightscene-4.css" data-type="theme" data-device="OS_Astro" data-get="light" data-get-on="4" data-get-off="!4" />
<link rel="stylesheet" href="css/lightscene-5.css" data-type="theme" data-device="OS_Astro" data-get="light" data-get-on="5" data-get-off="!5" />
<link rel="stylesheet" href="css/lightscene-6.css" data-type="theme" data-device="OS_Astro" data-get="light" data-get-on="6" data-get-off="!6" />


<!-- Load main script -->
<script src="js/fhem-tablet-ui.js" defer></script>

<!-- The title -->
<title>The Deeke Home</title>
</head>

<!-- Misc. definitions  -->

<!-- <meta http-equiv = "Cache-Control" content = "no-cache, no-store, must-revalidate" /> -->
<!-- <meta http-equiv = "pragma" content = "no-cache" /> -->
<!-- <meta http-equiv = "expires" content = "0"   /> -->
   
<meta name = "gridster_disable" content = "1"   />
<meta name = "gridster_cols" content = "9"   />
<meta name = "gridster_rows" content = "13"  />
<meta name = "longpoll" content = "1"   />
<meta name = "longpoll_type" content = "websocket" />
<meta name = "longpoll_maxage" content = "240" />
<meta name = "toast" content = "0"   />
<meta name = "TomTomApiKey" content = "poam8gUOAMWeXlTWoLEqEk0GVwrjmh4h" />
<meta name = "viewport"              content = "width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name = "widget_base_width" content = "116" />
<meta name = "widget_base_height" content = "144" />
<meta name = "widget_margin" content = "2"   />


<!--  External trigger for reloading the page -->
<div data-type   = "reload"
data-device = "UI_ReloadFtui"
data-command   = "setreading"
data-get = "state"
data-set = ""
data-reload-on = "on"
data-reset-to  = "off"
data-get-on = "1"
data-set-off = "0">
</div>

<body style="overflow:hidden;" topmargin="0" leftmargin="0" margin="0">
<!-- Table border for debugging and programming "transparent" <-> "white" -->
<style>
table, th, td {
padding: 1px;
border: 1px solid white;
border-collapse: collapse;
}
</style>

<div class="gridster">
<ul>
<li data-row="1" data-col="1" data-sizex="1" data-sizey="13" class="semitransparent">
<div data-type = "pagebutton"
data-url = "#page_content_home.html"
data-load = "#content_home"
data-off-background-color = "transparent"
data-off-color = "#4C5D71"
data-on-background-color = "#4C5D71"
data-on-color = "#223343"
data-active-pattern = "(.*/||.*index.html||.*#page_content_home.html)"
data-icon = "fa-home"
onclick = "ftui.setFhemStatus('setreading UI_ActivePage state home');"
class = "default top-space">
</div>

<div data-type = "pagebutton"
data-url = "#page_content_gf1.html"
data-load = "#content_gf1"
data-off-background-color = "transparent"
data-off-color = "#4C5D71"
data-on-background-color = "#4C5D71"
data-on-color = "#223343"
data-active-pattern = ".*#page_content_gf1.html"
data-icon = "oa-control_building_modern_s_okg_eg"
onclick = "ftui.setFhemStatus('setreading UI_ActivePage state gf');"
class = "prefetch top-space">
</div>


<li data-row="1" data-col="2" data-sizex="8" data-sizey="13">
<div class="page prefetch" id="content_home">    </div>
<div class="page prefetch" id="content_gf1">      </div>
</li>
</ul>
</div>
</body>
</html>


Danke fuer die Starthilfe!

Gruss
    Sailor

[Eisix]

Hallo Sailor,

Die Beispiele im /examples Ordner hast du gesehen?
Auf github https://github.com/knowthelist/ftui ist auch was.

Gruß
Eisix

[mr_petz]

@Sailor

Hier ist ein gutes Beispiel für dich:

https://github.com/knowthelist/ftui/blob/master/www/ftui/examples/menu.html