Autor Thema: FTUI version 3  (Gelesen 95147 mal)

Online mr_petz

  • Full Member
  • ***
  • Beiträge: 410
Antw:FTUI version 3
« Antwort #1440 am: 13 Oktober 2021, 22:35:53 »
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

Offline setstate

  • Hero Member
  • *****
  • Beiträge: 4235
  • FHEM TabletUI
    • FHEM Tablet UI
Antw:FTUI version 3
« Antwort #1441 am: 13 Oktober 2021, 23:25:18 »
das war nur ein Bug. Ich hatte beim Umbauen was vergessen. Ist gefixed.

Online mr_petz

  • Full Member
  • ***
  • Beiträge: 410
Antw:FTUI version 3
« Antwort #1442 am: 14 Oktober 2021, 11:38:49 »
Danke. Geht wieder. Sowohl bei Label und Icon...

Offline tomster

  • Sr. Member
  • ****
  • Beiträge: 987
Antw:FTUI version 3
« Antwort #1443 am: 15 Oktober 2021, 11:53:06 »
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!

Online mr_petz

  • Full Member
  • ***
  • Beiträge: 410
Antw:FTUI version 3
« Antwort #1444 am: 15 Oktober 2021, 14:55:49 »
...

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
« Letzte Änderung: 15 Oktober 2021, 15:09:33 von mr_petz »

Offline tomster

  • Sr. Member
  • ****
  • Beiträge: 987
Antw:FTUI version 3
« Antwort #1445 am: 15 Oktober 2021, 16:19:41 »
Das ging schnell und es läuft (natürlich)! Viiieelen Dank!

Offline flauschkoenig

  • New Member
  • *
  • Beiträge: 6
Antw:FTUI version 3
« Antwort #1446 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.
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..
« Letzte Änderung: 16 Oktober 2021, 11:09:46 von flauschkoenig »

Offline Sailor

  • Developer
  • Hero Member
  • ****
  • Beiträge: 1996
  • und es werden immer mehr...
Antw:FTUI version 3
« Antwort #1447 am: 16 Oktober 2021, 11:30:02 »
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...

Offline flauschkoenig

  • New Member
  • *
  • Beiträge: 6
Antw:FTUI version 3
« Antwort #1448 am: 16 Oktober 2021, 11:49:31 »
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
« Letzte Änderung: 16 Oktober 2021, 12:07:24 von flauschkoenig »

Offline Sailor

  • Developer
  • Hero Member
  • ****
  • Beiträge: 1996
  • und es werden immer mehr...
Antw:FTUI version 3
« Antwort #1449 am: 16 Oktober 2021, 11:58:12 »
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...

Offline setstate

  • Hero Member
  • *****
  • Beiträge: 4235
  • FHEM TabletUI
    • FHEM Tablet UI
Antw:FTUI version 3
« Antwort #1450 am: 17 Oktober 2021, 11:54:18 »
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.
« Letzte Änderung: 17 Oktober 2021, 14:59:45 von setstate »

Offline ToM_ToM

  • Sr. Member
  • ****
  • Beiträge: 989
    • ThomasZFoto
Antw:FTUI version 3
« Antwort #1451 am: 17 Oktober 2021, 20:09:51 »
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

Offline setstate

  • Hero Member
  • *****
  • Beiträge: 4235
  • FHEM TabletUI
    • FHEM Tablet UI
Antw:FTUI version 3
« Antwort #1452 am: 17 Oktober 2021, 21:03:58 »
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.
Gefällt mir Gefällt mir x 1 Liste anzeigen

Offline StephanFHEM

  • Full Member
  • ***
  • Beiträge: 422
Antw:FTUI version 3
« Antwort #1453 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…

Offline setstate

  • Hero Member
  • *****
  • Beiträge: 4235
  • FHEM TabletUI
    • FHEM Tablet UI
Antw:FTUI version 3
« Antwort #1454 am: 18 Oktober 2021, 07:38:52 »
@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.
Gefällt mir Gefällt mir x 1 Liste anzeigen