FTUI version 3

BigGB · 04 Juni 2022, 19:39:58

Hallo
ich hoffe mir kann jemand weiterhelfen:
. ich habe Thyraz Kalender in der index.html wie folgt eingebunden:

    
<ftui-tab-view id="View6">
      <ftui-grid-tile row="1" col="1" height="16" width="20"color="secondary" shape="round">
        <ftui-calendar view="dayGridMonth" height="90%">
          <ftui-calendar-data calendar="AbfallCalendar"></ftui-calendar-data>
        </ftui-calendar> 
      </ftui-grid-tile>
    </ftui-tab-view>

Der "Abfallcalendar" ist definiert:

Code Auswählen


define AbfallCalendar Calendar ical url https://calendar.google.com/calendar/ical/xxxxxxxxxx.calendar.google.com/private-xxxxxxxxxxxxxxxxxxxxxx/basic.ics 21600
attr AbfallCalendar alias Abfall
attr AbfallCalendar group Kalender
attr AbfallCalendar hideLaterThan 100d
attr AbfallCalendar hideOlderThan 10d
attr AbfallCalendar ignoreCancelled 1

Wenn ich die Seite mit dem Kalender aufrufe, ist der Kalender wie folgt dargestellt. Was muss ich ändern?

Grüsse Gerald.

mr_petz · 04 Juni 2022, 22:37:34

Zitat von: Konfusius am 04 Juni 2022, 18:53:22
Kann man um eine "Checkbox" auch einen Rahmen setzen lassen (border)?
Ich bekomme nur das Häkchen hin. Das zwar in allen Farben, aber ohne Rahmen.

Klar, aber nur per style:

Code Auswählen


  <ftui-checkbox value="on" style="border: solid 2px var(--primary-color);border-radius: 50%;"></ftui-checkbox>
  <ftui-checkbox value="on" style="border: solid 2px var(--primary-color);border-radius: 0;"></ftui-checkbox>

Ergebnisse wie im Anhang.
Die Farbe des Rahmen könntest du dann auch mappen.
Bsp:

Code Auswählen


[style]="Device | map('off:`border: solid 2px var(--dark);border-radius: 0;`, on:`border: solid 2px var(--primary-color);border-radius: 0;`')

LG mr_petz

mr_petz · 05 Juni 2022, 20:19:22

@BigGB
Ich glaube da wirst du leider wenig bis gar keinen Support bekommen, da Thyraz seit 12.2020 nichts mehr am Modul gemacht hat.
Da kann es sein, dass es nicht mehr so funktioniert wie damals.
Alternative wäre das calview von mir. Das kann aber nur mit Calender von FHEM umgehen.
https://forum.fhem.de/index.php/topic,120379.0.html

LG mr_petz

OdfFhem · 05 Juni 2022, 20:56:10

@BigGB (und @mr_petz)

Normalerweise verwende ich das calendar-Modul nicht, habe es aber mal für Testzwecke aktiviert und es läuft scheinbar (noch) ganz normal.

Fraglich ist, warum Deine Darstellung derart komprimiert aussieht ...

BigGB · 05 Juni 2022, 21:35:23

Zitat von: OdfFhem am 05 Juni 2022, 20:56:10
@BigGB (und @mr_petz)

Normalerweise verwende ich das calendar-Modul nicht, habe es aber mal für Testzwecke aktiviert und es läuft scheinbar (noch) ganz normal.

Fraglich ist, warum Deine Darstellung derart komprimiert aussieht ...

Sobald ich unter Firefox die "Werkzeuge für Webentwickler" aufrufe, ist der Kalender sichtbar.
Unter Edge dasselbe Erscheinungsbild und nach Aufruf der Entwicklertools ist der Kalender auch sichtbar.

Viele Grüsse Gerald.

OdfFhem · 05 Juni 2022, 22:14:10

@BigGB

Ich habe unter Chrome und Firefox getestet - beide benötigen zur Darstellung des Kalenders keine Entwicklertools.
Die gewünschte Monatsansicht sieht jeweils aus wie im angehängten Screenshot.

Sind u.U. hilfreiche Meldungen in der Console der Entwicklertools vorhanden ?

BigGB · 05 Juni 2022, 22:35:05

Zitat von: OdfFhem am 05 Juni 2022, 22:14:10
@BigGB

Ich habe unter Chrome und Firefox getestet - beide benötigen zur Darstellung des Kalenders keine Entwicklertools.
Die gewünschte Monatsansicht sieht jeweils aus wie im angehängten Screenshot.

Sind u.U. hilfreiche Meldungen in der Console der Entwicklertools vorhanden ?

Ja, da ist was:

Wenn ich den Kalender aber so aufrufe (ohne <ftui-tab-view> ) ist er auch sichtbar:

Code Auswählen


<body>
  <ftui-grid margin="1">
    <ftui-grid-tile row="17" col="1" height="1" width="17" color="secondary" shape="round">
    </ftui-grid-tile>

    <!--ftui-tab-view id="View6"-->
      <ftui-grid-tile row="1" col="1" height="16" width="20"color="secondary" shape="round">
        <ftui-calendar view="dayGridMonth" height="90%">
          <ftui-calendar-data calendar="myAbfall"></ftui-calendar-data>
        </ftui-calendar> 
      </ftui-grid-tile>
    <!--/ftui-tab-view-->
  </ftui-grid>

</body>
</html>

OdfFhem · 05 Juni 2022, 22:51:28

@BigGB

Laut der Meldungen aus der Konsole scheint die Datenaufbereitung für den Kalender nicht zum Ende zu kommen.

Vielleicht kannst Du durch eine Logmeldung unmittelbar vor Zeile 105 (calendar-data.component.js) dem Geheimnis auf die Spur kommen:

Code Auswählen


console.log("line:",line);

Auffällig ist noch, dass Du mit verscheidenen FHEM-Devices testest ... AbfallCalendar bzw. myAbfall ... welches ist richtig ?

BigGB · 06 Juni 2022, 10:49:27

Zitat von: OdfFhem am 05 Juni 2022, 22:51:28
@BigGB

Laut der Meldungen aus der Konsole scheint die Datenaufbereitung für den Kalender nicht zum Ende zu kommen.

Vielleicht kannst Du durch eine Logmeldung unmittelbar vor Zeile 105 (calendar-data.component.js) dem Geheimnis auf die Spur kommen:
Code Auswählen Erweitern
console.log("line:",line);

Auffällig ist noch, dass Du mit verscheidenen FHEM-Devices testest ... AbfallCalendar bzw. myAbfall ... welches ist richtig ?

Also das FHEM-Device ist AbfallCalendar.
myAbfall war ein Versuch, sorry für die Fehlleitung.

Ich habe den AbfallCalendar einmal direkt in die index.html eingebaut und einmal wird er über <ftui-tab-view> aufgerufen.
Ist er direkt in der index.htlm eingebunden, erscheint in der Console folgende Meldung siehe Screenshot 2022-06-06_09h19_55.jpg.

Wird der AbfallCalendar über <ftui-tab-view> aufgerunfen, erscheint in der Cosole Screenshot 2022-06-06_10h4200.jpg.
Ich würde sagen identische Ausgaben. Der Browser zeigt in diesem Fall den AbfallCalendar nur nicht an.

Der Browser zeigt den AbfallCalendar erst an, wenn er gezwungen ist den Bildschirminhalt zu erneuern, indem ich z.B. die Entwicklerwerkzeuge im selben Fenster aufrufe.

Hat vielleicht noch jemand eine Idee?
Viele Grüße Gerald.

OdfFhem · 07 Juni 2022, 06:17:57

@BigGB

Der "Uncaught"-Fehler trat nicht auf ... lag vermutlich am alternativen FHEM-Device ...

Um das beschriebene Verhalten reproduzieren zu können, wäre es vermutlich hilfreich, wenn Du einen aufs Notwendigste reduzierten Code zur Verfügung stellst - ab index.html.

Wenn damit das Problem nachgestellt werden kann, kommt man einer Erklärung/Lösung evtl. näher ...

BigGB · 07 Juni 2022, 18:05:38

Zitat von: OdfFhem am 07 Juni 2022, 06:17:57
@BigGB

Der "Uncaught"-Fehler trat nicht auf ... lag vermutlich am alternativen FHEM-Device ...

Um das beschriebene Verhalten reproduzieren zu können, wäre es vermutlich hilfreich, wenn Du einen aufs Notwendigste reduzierten Code zur Verfügung stellst - ab index.html.

Wenn damit das Problem nachgestellt werden kann, kommt man einer Erklärung/Lösung evtl. näher ...

@OdFhem
hier ist die Minimalversion, die nicht funktioniert:

Code Auswählen

<!DOCTYPE html>
<html>

<head>
  <!--
    /* FHEM tablet ui - FTUI */
    /**
    * UI builder framework for FHEM
    *
    * Version: 3.0.0
    *
    * Copyright (c) 2015-2021 Mario Stephan <mstephan@shared-files.de>
    * Under MIT License (http://www.opensource.org/licenses/mit-license.php)
    * https://github.com/knowthelist/ftui
    */
    -->
  <script src="ftui.js"></script>
  <link href="ftui.css" rel="stylesheet">
  <link href="themes/ftui-theme.css" rel="stylesheet">
  <link href="favicon.ico" rel="icon" type="image/x-icon">

  <!-- avoid 300ms delay on click-->
  <meta name="viewport" content="width=device-width">

  <meta name="mobile-web-app-capable" content="yes">
  <meta name="toast_position" content="bottomLeft">
  <meta name="fhemweb_url" content="http://xxx.xxx.xx.xx:8083/fhem/">

  <meta name="debug" content="2"> <!-- verbose level 1-6 = output to console;0 = not output -->

  <title>Smart Home</title>
</head>

<body>
  <ftui-grid margin="1">
    <ftui-grid-tile row="17" col="1" height="1" width="17" color="secondary" shape="round">
         <ftui-tab view="View6">
          <ftui-icon class="size-1" path="../images/openautomation/" name="time_calendar" color="white"></ftui-icon>
        </ftui-tab>
   </ftui-grid-tile>

    <ftui-tab-view id="View6">
      <ftui-grid-tile row="1" col="1" height="16" width="20"color="secondary" shape="round">
        <ftui-calendar view="dayGridMonth" height="90%">
          <ftui-calendar-data calendar="AbfallCalendar"></ftui-calendar-data>
        </ftui-calendar> 
      </ftui-grid-tile>
    </ftui-tab-view>
  </ftui-grid>

</body>
</html>

Wenn Du die <ftui-tab-view> u. </ftui-tab-view> auskommentierst, ist der Kalender in seiner vollen Pracht sichtbar.
Viele Grüße Gerald.

OdfFhem · 08 Juni 2022, 08:30:55

@BigGB

Nur zur Info, werde/kann ich leider erst zum WE testen ...

OdfFhem · 11 Juni 2022, 10:37:46

@BigGB

Mit dem konkreten Beispiel ist Dein Fall gut nachvollziehbar.

1) quasi 1:1-Verwendung Deines Beispiels
1a) Aufruf im Browser sorgt für die Darstellung der tab-view-Auswahlleiste
1b) wählt man dann die angebotene tab-view, erscheint die "komprimierte" Darstellung des Kalenders
1c) verändert man z.B. die Größe des Browserfensters, dann wird der Kalender in gewünschter Größe dargestellt

*** Problem scheint mit der visibility der Komponente bei der Darstellung des Kalenders zusammenzuhängen

2) Verwendet man

Code Auswählen

<ftui-tab view="View6" active> statt

Code Auswählen

<ftui-tab view="View6">, so erscheint der Kalender sofort in gewünschter Größe

3) Wenn der Kalender nicht die primäre tab-view-Auswahl ist, dann findet keine Neudarstellung mehr statt und die "komprimierte" Darstellung bleibt erhalten. Somit ist ein Eingriff in der calendar.component.js notwendig, z.B. unmittelbar vor Zeile 81:

Code Auswählen


  document.addEventListener('ftuiVisibilityChanged', () => this.refresh());

Dies könnte man noch etwas verfeinern, da die (unveränderten) Kalenderdaten mehrfach abgerufen werden ...

*** Auffälligkeit

4) Was der Komponente scheinbar noch ganz fehlt, ist die Neudarstellung bei Veränderungen am FHEM-Device - z.B. nach set reload <FHEM-Device>

BigGB · 11 Juni 2022, 15:16:10

Zitat von: OdfFhem am 11 Juni 2022, 10:37:46

Code Auswählen Erweitern
document.addEventListener('ftuiVisibilityChanged', () => this.refresh());
Dies könnte man noch etwas verfeinern, da die (unveränderten) Kalenderdaten mehrfach abgerufen werden ...

Danke OdfFhem, das hat schon weitergeholfen.
Viele Grüße Gerald.

Konfusius · 14 Juni 2022, 19:04:47

Ich habe schon wieder ein Anfänger-Formatierung-Syntax-Problem
Ich habe dieses Grid Tile:

Code Auswählen

<ftui-grid-tile row="1" col="2" height="5" width="4">
        <ftui-label size="6"  color="orange" >Aquarium</ftui-label> 
                <ftui-colorpicker layout="valueSlider"
                    [brightness]="Aquariumlampe:pct  | toInt()"
                    (brightness)=" toInt() | Aquariumlampe:pct">
                </ftui-colorpicker>      

        <ftui-switch [(value)]="Aquariumlampe"states="off,on" texts='I,O'></ftui-switch>       
                                                             
                  <span>
		    <ftui-label size="3" text="Temperatur"></ftui-label>
		    <ftui-label color="yellow" size="5" [text]="Testmodul:h2o_temp"></ftui-label>
		</span>
</ftui-grid-tile>

Und schaffe es nicht, dass die Temperatur mit dem Wert "unten" und "links" steht!
Setze ich bei <ftui-label> oder bei <span> align="left" oder style="align:left" oder "text-align="left" tut sich nichts.

Knoten in mehreren Gehirnwindungen, wie macht man das richtig?