Hauptmenü

FTUI version 3

Begonnen von Bunnu, 25 Oktober 2020, 09:25:41

Vorheriges Thema - Nächstes Thema

mr_petz

Hi ich nochmal.
wie muss jetzt eigentlich das @click aussehen?
scheint ja so nicht mehr zu gehen...
Bei mir wurde über ein label und icon ein:

@click="sendFhem('setreading device reading value')"

gesendet.
oder geht das auch anders?

LG

setstate

das war nur ein Bug. Ich hatte beim Umbauen was vergessen. Ist gefixed.

mr_petz

Danke. Geht wieder. Sowohl bei Label und Icon...

tomster

Jetzt hab ich mich auf Grund des Baus eines neuen "Smart Mirrors" endlich auch Mal mit FTUI3 auseinandergesetzt (Zeit ist's geworden...)-
Dabei sind mir aber ein paar Dinge aufgefallen:

@setstate
1. Hat das eigentlich einen tieferen Sinn, dass in der ftui.css ab gewissen Schriftgrößen die Schriftart explizit angegeben ist:

.size-12 {
  font-size: 8rem;
  font-family: "HelveticaNeue-UltraLight", "Segoe UI", "Roboto Light", sans-serif;
}

.size-11 {
  font-size: 6rem;
  font-family: "HelveticaNeue-UltraLight", "Segoe UI", "Roboto Light", sans-serif;
}

.size-10 {
  font-size: 4rem;
  font-family: "HelveticaNeue-UltraLight", "Segoe UI", "Roboto Light", sans-serif;
}


2. Könntest Du bei der Abhandlung von Datum/Zeit in der ftui.helper.js auch noch "Week in Year" aufnehmen? Angeblich kann die Klasse DateFormat das auch. Ich bin nur leider ein hoffnungsloser Java-SuperDAU und hab bislang nur Beispielcode für SimpleDateFormat gefunden, nix für DateFormat.

3. In welcher Datei, bzw. wie wird eigentlich "align-items" abgehandelt? Ich hab das Phänomen, dass am PC in Firefox eine row mit align-items="right" wunderbar umgesetzt wird. Leider aber nicht auf dem Raspi unter Chromium. Den scheint das Tag überhaupt nicht zu interessieren...

Auch wenn ich bislang nur ein paar Devices in meine Seite eingebunden habe, scheint FTUI3 deutlich performanter zu sein als das "alte" TabletUI. Zumindest läuft Chromium seither bei Weitem nicht mehr auf +100% CPU beim Reload und idled zudem bei ein paar mickrigen Prozentchen. Danke hierfür!

mr_petz

#1444
Zitat von: tomster am 15 Oktober 2021, 11:53:06
...

2. Könntest Du bei der Abhandlung von Datum/Zeit in der ftui.helper.js auch noch "Week in Year" aufnehmen? Angeblich kann die Klasse DateFormat das auch. Ich bin nur leider ein hoffnungsloser Java-SuperDAU und hab bislang nur Beispielcode für SimpleDateFormat gefunden, nix für DateFormat.

...

Hi. Ich habe diesen Code für dich, bis setstate das eingebaut hat:

<ftui-cell class="size-3">
  <script>
    const date = new Date();
    const currentThursday = new Date(date.getTime() +(3-((date.getDay()+6) % 7)) * 86400000);
    const yearOfThursday = currentThursday.getFullYear();
    const firstThursday = new Date(new Date(yearOfThursday,0,4).getTime() +(3-((new Date(yearOfThursday,0,4).getDay()+6) % 7)) * 86400000);
    const weekNumber = Math.floor(1 + 0.5 + (currentThursday.getTime() - firstThursday.getTime()) / 86400000/7);
    document.write(weekNumber+'. Kalenderwoche');
  </script>
</ftui-cell>

Quelle: https://die-aktuelle-kalenderwoche.de/kalenderwochen-in-javascript

einfach in dein row oder was auch immer einfügen...

Edit: Code geändert....

LG mr_petz

tomster

Das ging schnell und es läuft (natürlich)! Viiieelen Dank!

flauschkoenig

#1446
Moin moin in die Runde,

ich habe viel gesucht aber so richtig schlau werde ich daraus nicht.
Ich habe mir ein nettes DBLog gebaut. Dort werden Luftfeuchtigkeit und Temperatur, aktuell nur von zwei Sensoren weggeloggt.
Das sieht ungefähr so aus:
select * from histroy;


[...]
| 2021-10-16 10:52:20 | HmIP_HmIP_SWO_PL_00181BE9A42840 | HMCCUDEV | 1.HUMIDITY: 91                  | 1.HUMIDITY           | 91        |      |
| 2021-10-16 10:52:20 | HmIP_HmIP_SWO_PL_00181BE9A42840 | HMCCUDEV | 1.ACTUAL_TEMPERATURE: 7.2       | 1.ACTUAL_TEMPERATURE | 7.2       |      |
| 2021-10-16 10:53:14 | HmIP_HmIP_STHO_000EDD898A625E   | HMCCUDEV | 1.HUMIDITY: 74                  | 1.HUMIDITY           | 74        |      |
| 2021-10-16 10:53:14 | HmIP_HmIP_STHO_000EDD898A625E   | HMCCUDEV | 1.ACTUAL_TEMPERATURE: 19.1      | 1.ACTUAL_TEMPERATURE | 19.1      |      |
| 2021-10-16 10:55:01 | HmIP_HmIP_SWO_PL_00181BE9A42840 | HMCCUDEV | 1.ACTUAL_TEMPERATURE: 7.3       | 1.ACTUAL_TEMPERATURE | 7.3       |      |
| 2021-10-16 10:55:01 | HmIP_HmIP_SWO_PL_00181BE9A42840 | HMCCUDEV | 1.HUMIDITY: 91                  | 1.HUMIDITY           | 91        |      |
| 2021-10-16 10:56:01 | HmIP_HmIP_STHO_000EDD898A625E   | HMCCUDEV | 1.ACTUAL_TEMPERATURE: 19.1      | 1.ACTUAL_TEMPERATURE | 19.1      |      |
| 2021-10-16 10:56:01 | HmIP_HmIP_STHO_000EDD898A625E   | HMCCUDEV | 1.HUMIDITY: 74                  | 1.HUMIDITY           | 74        |      |
| 2021-10-16 10:57:28 | HmIP_HmIP_SWO_PL_00181BE9A42840 | HMCCUDEV | 1.ACTUAL_TEMPERATURE: 7.3       | 1.ACTUAL_TEMPERATURE | 7.3       |      |
| 2021-10-16 10:57:28 | HmIP_HmIP_SWO_PL_00181BE9A42840 | HMCCUDEV | 1.HUMIDITY: 91                  | 1.HUMIDITY           | 91        |      |
| 2021-10-16 10:58:34 | HmIP_HmIP_STHO_000EDD898A625E   | HMCCUDEV | 1.ACTUAL_TEMPERATURE: 19.1      | 1.ACTUAL_TEMPERATURE | 19.1      |      |
| 2021-10-16 10:58:34 | HmIP_HmIP_STHO_000EDD898A625E   | HMCCUDEV | 1.HUMIDITY: 74                  | 1.HUMIDITY           | 74        |      |
| 2021-10-16 10:59:41 | HmIP_HmIP_SWO_PL_00181BE9A42840 | HMCCUDEV | 1.HUMIDITY: 91                  | 1.HUMIDITY           | 91        |      |
| 2021-10-16 10:59:41 | HmIP_HmIP_SWO_PL_00181BE9A42840 | HMCCUDEV | 1.ACTUAL_TEMPERATURE: 7.4       | 1.ACTUAL_TEMPERATURE | 7.4       |      |
| 2021-10-16 11:00:52 | HmIP_HmIP_STHO_000EDD898A625E   | HMCCUDEV | 1.ACTUAL_TEMPERATURE: 19.1      | 1.ACTUAL_TEMPERATURE | 19.1      |      |
| 2021-10-16 11:00:52 | HmIP_HmIP_STHO_000EDD898A625E   | HMCCUDEV | 1.HUMIDITY: 74                  | 1.HUMIDITY           | 74        |      |
[...]


Soweit eigentlich alles gut.
Jetzt möchte ich hingehen und das Ganze in einem ftui-Chart anzeigen, erstmal nur ein Wert.
Dazu habe ich folgenden Code:


<ftui-grid-tile row="5" col="1" height="4" width="4" shape="round">
      <header class="size-5">Feuchtigkeit WZ</header>
        <ftui-chart class="row" width="300px" height="150px">
          <ftui-chart-data fill log="DbLog" spec="HmIP_HmIP_STHO_000EDD898A625E.1.HUMIDITY" [update]="HmIP_HmIP_STHO_000EDD898A625E:state:time"></ftui-chart-data>
        </ftui-chart>
    </ftui-grid-tile>


Bitte um Nachsicht bei den Einrückungen..das Kopieren macht sie irgendwie kaputt.
Ich hatte auch schon probiert mit zusätzlich
file="history"
da meine Tabelle so heißt aber das brachte auch keinen Erfolg.
Ich hatte auch Ausschau nach einem Reading Attribut gehalten aber keins gefunden.
Mein DBLog hat _keine_ richtigen Readings.
Das sind die einzigen:

Readings
CacheOverflowLastNum

0

2021-10-16 01:00:43
CacheOverflowLastState

normal

2021-10-12 23:20:23
state

connected

2021-10-16 10:59:41


Weiß da jemand weiter? Ich hab sicherlich etwas übersehen..

Sailor

Zitat von: flauschkoenig am 16 Oktober 2021, 11:07:47
Moin moin in die Runde,

ich habe viel gesucht aber so richtig schlau werde ich daraus nicht.
Ich habe mir ein nettes DBLog gebaut. Dort werden Luftfeuchtigkeit und Temperatur, aktuell nur von zwei Sensoren weggeloggt.
Weiß da jemand weiter? Ich hab sicherlich etwas übersehen..

Versuche es mal Testweise mit

<ftui-chart class="row" width="300px" height="150px">
<ftui-chart-data fill log="DbLog" file="history" update="HmIP_HmIP_STHO_000EDD898A625E:1.HUMIDITY:time" spec="HmIP_HmIP_STHO_000EDD898A625E:1.HUMIDITY" label="Humidity/[&phi;/%rel]"  color="blue" update="60" type="lines" point-radius="0"></ftui-chart-data>
<ftui-chart-controls units="Day, Week, Month, Year"></ftui-chart-controls>
</ftui-chart> 


Gruß
    Sailor
******************************
Man wird immer besser...

flauschkoenig

#1448
Wow, super! Funktioniert direkt.
Vielen Dank!
Wenn ich das richtig sehe hat mir lediglich das hier gefehlt:

color="blue" update="60" type="lines" point-radius="0"


Der Rest dürfte eher optional sein.
Nachtrag: Kann man die y-Skala auch fest einstellen? Aktuell ist der niedrigste mögliche Wert immer der unterste Wert der y-Skala. Heißt heute mal 50, gestern aber 55, usw. Von 0-100 fest wäre eigentlich am besten.
Ist diese Doku überhaupt zutreffend für das chart-widget in ftui 3?
https://wiki.fhem.de/wiki/FTUI_Widget_Chart

Edit2: ups.. :-[

LG Flauschi

Sailor

Zitat von: flauschkoenig am 16 Oktober 2021, 11:49:31
Wow, super! Funktioniert direkt.
Vielen Dank!
Wenn ich das richtig sehe hat mir lediglich das hier gefehlt:

Nein, du hast ein . statt ein : verwendet.

spec="HmIP_HmIP_STHO_000EDD898A625E:1.HUMIDITY"

Gruß
    Sailor
******************************
Man wird immer besser...

setstate

#1450
Hier: https://knowthelist.github.io/ftui/www/ftui/examples/themes.html findet ihr ein Beispiel, wie man eine automatische Tag-Nacht Thema Umschaltung realisieren kann.

Einmal per FHEM-Reading


  <link href="themes/bright-theme.css" rel="stylesheet"
        ftui-binding [disabled]="dummy11 | map('dark:true, light:false') | toBool()">


Oder per Browser-OS-Dark-Mode Erkennung


<link href="themes/bright-theme.css" rel="stylesheet" id="lightCSS">
<script>
  // automatic change of color theme
  const darkSchema = '(prefers-color-scheme: dark)';
  const isDark = window.matchMedia && window.matchMedia(darkSchema).matches;
  setTheme(isDark);

  window.matchMedia(darkSchema).addEventListener('change', e => {
    const isDark = e.matches;
    setTheme(isDark);
  });

  function setTheme(isDark) {
    if (isDark) {
      lightCSS.setAttribute('disabled', '');
    } else {
      lightCSS.removeAttribute('disabled');
    }
  }
</script>


Ein sauberes Theming funktioniert aber nur,  wenn man sich strikt an das "Benutze niemals Style-Tags im HTML-Code!" hält.

Ein style="background-color: #ffdd33;" würde dann einem in die Suppe spucken.

ToM_ToM

Hi setstate,

willkommen zurück aus der Sommerpause.  8)

Könntest du dir bei Gelegenheit nochmal das menu example ansehen? Das läuft nämlich irgendwie nicht.

https://forum.fhem.de/index.php/topic,115259.msg1163582.html#msg1163582

Beste Grüße
Hardware: BananaPi, Busmaster CUL, SanDisk 16GB Ultra SD, 16 GB USB-Stick | Software: Armbian, FHEM 5.8

setstate

Hi  8)

Das habe ich ja schon ewig nicht mehr angefasst ...
Es muss im menu-button.component.js Zeile 35 richtig heißen

menu: 'ftui_menu_1',

Oder du gibst die korrekte ID per HTML mit

<ftui-menu-button  menu="ftui_menu_1"

Oder einer anderen, von dir vergebenen ID im ftui-menu

<ftui-menu id="ftui_menu_1"

Das kommt dann richtig im nächsten Commit mit.

StephanFHEM

@setstate: wäre es möglich, das du in das circlemenu noch eine Variable für die Transparenz einbaust (damit er den Rest nicht komplett abdunkelt)? Hab es für mich aktuell in der css geändert aber vielleicht gibt es noch mehr Nutzer die das gerne hätten. Wäre auch für die Popups toll...

setstate

Zitat von: StephanFHEM am 17 Oktober 2021, 23:21:56
@setstate: wäre es möglich, das du in das circlemenu noch eine Variable für die Transparenz einbaust (damit er den Rest nicht komplett abdunkelt)? Hab es für mich aktuell in der css geändert aber vielleicht gibt es noch mehr Nutzer die das gerne hätten. Wäre auch für die Popups toll...

Done.
Man kann jetzt mit opacity="0.3" die Abdunklung etwas schwächer machen. 0 ist ganz aus, 1 ist ganz abgedeckt.