[FTUI3] new Departure für FTUI3

Begonnen von mr_petz, 06 April 2021, 14:57:39

Vorheriges Thema - Nächstes Thema

OdfFhem

@mr_petz

Ich habe mir die Überlegung mal angeschaut.

Grundsätzlich ist die Idee der "Ausdünnung" nicht schlecht, wenn man bei der wiederholten Ausführung damit Zeit sparen kann.

1) Die Umrechnung in den absoluten DateTime-Wert - egal ob Zeit oder Minuten (oder unixtime) angeliefert werden - sollte einmalig bei neuen Daten vorgenommen und die dabei ermittelten Daten in einem eigenen Array gespeichert werden.
2) Bei jeder Ausführung prüft die Routine das eigene Array, ob die Abfahrt in der Vergangenheit liegt; wenn ja, wird die entsprechende Abfahrtszeit mit einem leeren String geerdet.
3) Der Anzeigeteil kennt 2 Eingangswerte (leerer Wert oder absoluter DateTime-Wert) und 3 Ausgabewerte (nichts oder deptime oder depmin)
4) Bei "nichts" wird die text-Zuweisung verhindert, ansonsten durchgeführt.

Interessant bei neuen Codeteilen ist aber (fast) immer, dass sie möglichst nur aus dem Notwendigsten bestehen - in der Kürze liegt u.a. die Würze. Richtig beurteilen kann man das vermutlich erst am Ende, obwohl die vielen Schleifen, die ja scheinbar bei jeder Ausführung notwendig sind, jetzt schon nach viel (unnötiger) Laufzeit klingen ...

mr_petz

#46
Teste bitte erst und dann sage deine Meinung. ;)
Durch die 2 for´s leidet mMn nicht die Performance. Habe es auf meinem alten Samsung Tab4 getestet.
manInterval heisst jetzt refreshlist
interval heisst jetzt getinterval
die auskommentierten Zeilen sind zum testen was möglich wäre.
Da könnte man auch ein mixedMode als Attribute einbinden wer es möchte...
Ich denke es ist so flexibler.
noch ne frage zu:

dateFormat(new Date(),'ee')

Da wird mir der korrekte Tag angezeigt. (Di)
mit:

const currentTime = new Date();
dateFormat(new Date(currentTime.getDay()),'ee')

der Do
Was geht da schief und wie kann man das einen Tag hochzählen???
Ich habe erstmal ein neues Array erstellt, damit ich einen Tag hochzählen kann.
Wenn du so zufrieden bist, baue ich noch die extra arrays ein damit ich nicht so "manipuliere" wie du sagst. Ich würde es aber auch so lassen....
Ist wie gesagt der beste weg um Uhrzeit Readings ordentlich einzubinden...

OdfFhem

#47
@mr_petz

dateFormat musst Du immer ein vollständiges Datum übergeben, also in Deinem Fall currentTime.

Das übergebene Format sorgt dann dafür, dass Du den gewünschten String zurückerhälst.


  const currentTime = new Date();

  // const isTime = dateFormat(new Date(currentTime.getTime()),'hh:mm');
  const isTime = dateFormat(currentTime,'hh:mm');
console.log("---isTime---",isTime);

  //const isDay = dateFormat(new Date(currentTime.getDay()),'ee');
  const isDay = dateFormat(currentTime,'ee');
console.log("---isDay---",isDay);

Liefert die aktuelle Uhrzeit und den heutigen Tag


  currentTime.setDate(currentTime.getDate() + 1);
  const isTomorrowDay = dateFormat(currentTime,'ee');
console.log("---xxx.isTomorrowDay---",isTomorrowDay);

Liefert den morgigen Tag

mr_petz

#48
Danke werde ich austesten.
Ich habe es wie gesagt erstmal so gelöst:

const currentTime = new Date();
let weekday = new Array("So", "Mo", "Di", "Mi", "Do", "Fr","Sa");
when = weekday[currentTime.getDay()+1];


Ok ich habe es abgeändert. Funktioniert.
So habe ich mir das alles vorgestellt...
animiertes Gif angehangen...
Edit. 2.gif ist der mixedMode größer 15min wird Zeit angezeigt, ab 15min die Minuten...
Ich habe jetzt auch das Funktionsprinzip des timeFormat und dateTill verstanden. Versuche es so einzubauen um diese diversen min Umrechnung zu beseitigen. Erstmal würde ich es wie es ist lassen...

mr_petz

Ich muss mal pushen. Upgrade auf der ersten Seite. Viele Neuerungen...

LuGu

Zitat von: mr_petz am 12 Mai 2021, 13:35:11
Ich muss mal pushen. Upgrade auf der ersten Seite. Viele Neuerungen...

Vielen Dank für das Bereitstellen des Ergebnisses eurer Fachsimpelei.

Gruß LuGu
FHEM mit RPi3 (Visu über FTUI)
HMCCU mit piVCCU3 / MQTT2 mit zigbee2mqtt

rob

Hallo zusammen.

Das Departure Widget gefällt mir sehr 8) 
Die Demo zu Departure auf Github lese ich so, als würden auch Dummy Devices benutzt werden können. Tatsächlich habe ich einen Dummy, welchen ich über eine Hilfsfunktion (myUtils) korrekt befülle. Über diesen stelle ich auch ein Update Kommando bereit.
Führe ich dieses Update Kommando in FHEM aus, wird sauber aktualisiert und schlägt auch bis ins FTUI3-Departure durch. Aus dem Widget heraus kann ich jedoch nicht aktualisieren. Was logisch ist, denn es wird eine Get-Anweisung in der departure.component.js festgelegt:

  requestUpdate() {
    fhemService.sendCommand('get ' + this.get);
  }


Dummy Devices haben im Gegensatz zu Httpmod ja keine get-Anweisung, sondern nur set. Ändere ich testweise diesen Teil in der departure.component.js entspr.:

  requestUpdate() {
    fhemService.sendCommand(this.get);
  }

und passe das Widget so an (nur set einfügen):

    <ftui-grid-tile row="8" col="4" height="6" width="7">
     <header>Departure BUS</header>
      <ftui-departure [list]="mydummy:my_dep_string" getinterval="30" get="set mydummy update" station="Neuland" VVO alternate manuell>
      </ftui-departure>
    </ftui-grid-tile>

... dann kann ich auch aus dem Widget heraus aktualisieren und wäre mit der konkreten FHEM-Anweisung relativ flexibel. Vielleicht wäre dann statt 'get' ein 'cmd' besser/ eindeutiger.

Was meint Ihr dazu?

VG
rob

mr_petz

Hi rob.
Das prüfe ich nochmal ob das so in Ordnung geht.
Hast du aber mal das wie hier:
https://forum.fhem.de/index.php/topic,63114.msg543499.html#msg543499
bei einem dummy probiert bezüglich get?

LG mr_petz

rob

Hi.

An ein cmdalias hab ich garnicht gedacht. War wohl Gedanklich zu kompliziert unterwegs. Kurzerhand getestet: läuft 1A. Dann brauchst eigentl. nicht weiter prüfen.

Danke Dir für Deine flinke Rückmeldung und den Schubser  ;D

VG
rob

mr_petz


LuGu

Hallo mr-petz,

ist es richtig, dass ich bei:

bgcolor="" ->Hintergrund der Umrahmung der depliste (default=#898989)
depcolor="" ->Hintergrund der depliste (default=#484848)
txtcolor="" ->Farbe der Schrift im Rahmen inkl. Uhr und Icon (default=#222)
deptxtcolor="" ->Farbe der Schrift in der depliste (default=#222)

nicht mit den definierten FTUI3 (z.B. primary, secondary usw.) Farben arbeiten kann?
Oder mache ich was falsch?
Würde gerne damit arbeiten, damit bei Themen Umschaltung auch Depature mit umgeschaltet wird.

Gruß LuGu
FHEM mit RPi3 (Visu über FTUI)
HMCCU mit piVCCU3 / MQTT2 mit zigbee2mqtt

mr_petz

#56
Hi LuGu.
Du müsstest so die Farben angeben für zBsp. primary:

bgcolor="var(--primary-color)"


Die einzelnen Farbdefinitionen würden dann so aussehen (ändert sich aber, wenn setstate was ändert):

--gray: #393939;
    --gray10: #1a1a1a;
    --gray15: #272727;
    --gray20: #333333;
    --gray25: #3f3f3f;
    --gray33: #545454;
    --gray40: #666666;
    --gray55: #8c8c8c;
    --gray75: #bfbfbf;
    --gray80: #cccccc;
    --gray85: #d8d8d8;
    --gray90: #e5e5e5;
    --gray95: #f2f2f2;
    --gray-trans: rgba(40, 40, 40, 0.5);
    --red: #db5d3a;
    --red-light: #EE5C42;
    --red-dark: #ad3333;
    --green: #05aaad;
    --green-light: #80d534;
    --green-dark: #365a38;
    --blue: #436D8D;
    --blue1: #20639b;
    --blue2: #173f5f;
    --blue-light: #66aaFF;
    --yellow: #eeca82;
    --yellow-light: #faeaa9;
    --yellow-dark: #deb82e;
    --orange: #f8b13e;
    --white: #ffffff;
    --brown: #bf7a37;
    --black: #111111;
    --fullblack: #000000;
    --violet: #9400d3;
    --violet2: #87606f;
    --transparent: transparent;
    --primary-color: var(--blue1);
    --secondary-color: var(--blue2);
    --success-color: var(--green);
    --info-color: var(--blue);
    --warning-color: var(--yellow);
    --danger-color: var(--red);
    --light-color: var(--gray75);
    --medium-color: var(--gray40);
    --dark-color: var(--gray25);
    --success-danger-color: var(--yellow);
    --cold-color: var(--blue1);
    --hot-color: var(--red-light);
    --cold-hot-mix-color: var(--violet2);
    --primary-contrast-color: var(--white);
    --secondary-contrast-color: var(--white);
    --primary-active-color: var(--white);
    --success-contrast-color: var(--white);
    --info-contrast-color: var(--white);
    --warning-contrast-color: var(--gray20);
    --danger-contrast-color: var(--white);
    --light-contrast-color: var(--black);
    --medium-contrast-color: var(--white);
    --dark-contrast-color: var(--white);
    --text-color: var(--gray75);
    --inactive-text-color: #1e1bcc;
    --view-toolbar-color: var(--gray15);
    --view-toolbar-background-color: var(--white);
    --view-content-color: var(--white);
    --view-background-color: var(--white);
    --view-footer-color: var(--white);
    --page-background-color: var(--fullblack);
    --grid-background-color: var(--gray20);
    --grid-header-color: var(--gray55);
    --grid-header-background-color: var(--gray15);
    --tab-color: var(--gray40);
    --tab-contrast-color: var(--gray20);
    --tab-active-color: var(--primary-color);
    --popup-color: var(--text-color);
    --popup-background-color: var(--grid-background-color);
    --popup-overlay-color: var(--fullblack);
    --popup-header-color: var(--grid-header-color);
    --popup-header-background-color: var(--grid-header-background-color);
    --circlemenu-overlay-color: var(--fullblack);
    --chart-text-color: var(--gray55);
    --chart-text-active-color: var(--white);
    --border-color: var(--gray55);
    --switch-off-color: var(--medium-color);
    --checkbox-off-color: var(--dark-color);
    --slider-track-color: var(--dark-color);
    --slider-handle-shadow: none;
    --slider-handle-border: none;
    --swiper-scrollbar-thumb: rgba(0, 0, 0, 0.5);
    --swiper-scrollbar-track: var(--transparent);
    --swiper-dot: var(--medium-color);
    --swiper-dot-active: var(--info-color);
    --segments-background-color: var(--medium-color);
    --segments-separator-color: var(--dark-color);
    --segments-selection-color: var(--primary-color);
    --segments-selection-contrast-color: var(--primary-contrast-color);
    --segments-hover-color: var(--light-color);
    --segments-text-color: var(--text-color);


Edit:
Ich habe gerade einen  Pull requests bei @setstate gestartet.
Wenn der durch ist kannst du es auch mit zBsp. : --departure-bgcolor:var(--primary-color) im css oder style angeben.

LG mr_petz

LuGu

Ok, danke. Ich werde damit mal weiter testen.

Gruß LuGu
FHEM mit RPi3 (Visu über FTUI)
HMCCU mit piVCCU3 / MQTT2 mit zigbee2mqtt

mr_petz

@LuGu
setstate hat es jetzt übernommen.
Du kannst jetzt mit der neuen Version die BG-Farben direkt ansprechen wie ich oben erwähnte..

LG mr_petz

LuGu

Prima, funktioniert.


ftui-departure {
  --departure-bgcolor: var(--primary-color);
  --departure-depcolor: var(--secondary-color);
}

Gruß LuGu
FHEM mit RPi3 (Visu über FTUI)
HMCCU mit piVCCU3 / MQTT2 mit zigbee2mqtt