[FTUI3] CalView

[Adimarantis]

Hi,

in ftui-label das selbe Problem. Das text="xxx" fehlt komplett im Vergleich zu readings ohne Umlaute.
Die Umlaute sind ja nicht verunstaltet (das ist nur passiert als ich mit dem CALVIEW code rumgespielt habe). Standardmässig schaut in FHEM alles OK aus.
Naja fast:

Code Auswählen Erweitern

2022-05-02 08:31:22   t_004_summary   Geburtstag Jörg
2022-05-02 08:31:22   t_004_timeshort ganztägig
Aber das liegt daran, dass das "ä" im CALVIEW source code falsch kodiert ist.

Die meta tags bringen nichts.
Unter FTUI2 habe ich den Effekt, dass im calview bei Umlauten statt dem Text ein leere <binary></binary> gesetzt wird.

Also wohl wirklich ein grundlegendes Problem vom Framework (unter FTUI2 sowie unter FTUI3)

[onkel-tobi]

Hi zusammen,

bei mir funktioniert das ganze leider noch nicht. Habe aktuell:

Code Auswählen Erweitern

         <ftui-calview style="--calview-line-margin:-5px"
                device="calv_all"
                width="98%"
                <!--headers="Tage,Datum,Name,Alter"-->
                details="daysleftLong,bdate,summary,age"
                <!-- daysleft="4:red1:red1:blink:blink bold,10:orange:white:bold,14:green:white:white"-->
                max="5"
                detailwidth="28,22,35,15"
                class="size-1"
                flat date_wday
                >
</ftui-calview>
Die beiden css dateien sind auch entsprechend da. Aber es wird nichts angezeigt.
Hat wer eine Idee was ich falsch mache?
Danke & Gruß,
Tobi

[mr_petz]

Hi Tobi,
Als erste Frage von mir:
Wieso 2 css Files?
Es müssen diese beiden Dateien im components/calview Ordner liegen:

Code Auswählen Erweitern


calview.component.css
calview.component.js


Als Zweite Frage:
Könntest du bitte ein Label erstellen mit folgenden Code und sagen ob was angezeigt wird:

Code Auswählen Erweitern


<ftui-label [text]="calv_all:t_001_daysleftLong"></ftui-label>
<ftui-label [text]="calv_all:t_001_bdate"></ftui-label>
<ftui-label [text]="calv_all:t_001_summary"></ftui-label>
<ftui-label [text]="calv_all:t_001_age"></ftui-label>


Da müsen wir erstmal rausbekommen ob die Basis funzt...

LG mr_petz

[onkel-tobi]

Hi,

danke für deine Antwort.

Wieso 2 css Files?
Es müssen diese beiden Dateien im components/calview Ordner liegen:

Code Auswählen Erweitern


calview.component.css
calview.component.js


Korrekt, 2 files nur 1 css, sorry dafür.

Als Zweite Frage:
Könntest du bitte ein Label erstellen mit folgenden Code und sagen ob was angezeigt wird:

Code Auswählen Erweitern


<ftui-label [text]="calv_all:t_001_daysleftLong"></ftui-label>
<ftui-label [text]="calv_all:t_001_bdate"></ftui-label>
<ftui-label [text]="calv_all:t_001_summary"></ftui-label>
<ftui-label [text]="calv_all:t_001_age"></ftui-label>


Da müsen wir erstmal rausbekommen ob die Basis funzt...

LG mr_petz

Klappt, ich bekomme den 1. Termin angezeigt.
Gruß,
Tobi

[mr_petz]

Ok, nächste Frage:
Es sollte kurz beim ersten Laden (auch mal refresh mit Cacheleerung vom Browser machen) folgende Meldung kommen:

Code Auswählen Erweitern


Daten werden geladen...

kommt diese Meldung?

Bitte testweise diese beiden Sachen raus nehmen:

Code Auswählen Erweitern


<!--headers="Tage,Datum,Name,Alter"-->
<!-- daysleft="4:red1:red1:blink:blink bold,10:orange:white:bold,14:green:white:white"-->

und testen.
Die "<!--" und "-->" zerschießen die Definition, da dies kein reiner HTML-Code mehr ist...

LG

Edit: Hier sind auch noch Beispiele zu finden:
https://github.com/mr-petz/ftui/blob/calview/www/ftui/examples/calview.html

[onkel-tobi]

Hi,

also ich habe nun nochmals eines deiner Beispiele verwendet. Aber es bleibt dabei, angezeigt wird nichts.
Vllt. Liegt es an den beiden Dateien. Ich habe diese direkt via Konsole und wget geladen, sollte ja eigtl. Kein Problem sein.
Eine Meldung ,,Daten werden geladen..." erhalte ich nicht.

Update: Das war's. Habe die beiden Dateien nochmals als raw abgespeichert und siehe da es geht...
Ich muss da also gestern Abend während den Test was verkehrt (vermutlich nicht als raw oder so) gemacht haben.

Gruß,
Tobi

[mr_petz]

Sehr schön.
Das nennt man Fehleranalyse
LG mr_petz

Edit: Calview per wget:

Code Auswählen Erweitern


wget https://raw.githubusercontent.com/mr-petz/ftui/calview/www/ftui/components/calview/calview.component.css
wget https://raw.githubusercontent.com/mr-petz/ftui/calview/www/ftui/components/calview/calview.component.js


[h002]

In meinem FHEM-Device (CALVIEW) habe ich mehrere Kalender eingebunden. Gibt es mit CalView eine Möglichkeit, die Farben so ähnlich wie bei "daysleft" für die Termine, auch bei den Kalendern z.B. mittels des Readings "source" zu steuern?

[mr_petz]

Hi, das Reading sourcecolor gibt ja die Farben schon für den entsprechenden Eintrag vor.
Wie hier in der Demo wird es deklariert mit dem Attribute sourcecolor.
Dann werden die Farben vom Reading sourcecolor genommen.
https://github.com/mr-petz/ftui/blob/calview/www/ftui/examples/calview.html

Code Auswählen Erweitern


        <ftui-calview width="99%" class="size-1"
          device="CalviewDevice"
          details="daysleft,bdate,btime,summary"
          detailwidth="10,20,15,50"
          max="5"
          sourcecolor
          line-left>
        </ftui-calview>


Eine Möglichket die sourcecolor in daysleft einzubringen ist nicht vorgesehen und in meinen Augen auch doppelt gemoppelt...
Oder du sagst/zeigst mal ein konkretes Beispiel.
Die einzelnen Farben kannst du auch in daysleft direkt angeben.

LG mr_petz

Edit: Ach jetzt verstehe ich glaube dein Anliegen. Du willst zwischen den Kalendern springen und/oder sie vermischen?
Wenn ja, geht es nicht.

Du könntest aber mehrere CalViews erstellen und mit hidden steuern.
Da setzt du einfach das hidden (true and false) auf dein source an.
Da wird dann immer nur der angezeigt den du "sichtbar" machst.
Bsp.:
Nehmen wir an dein Hauptkalender heisst Kalender und der nächste Kalender1:

Code Auswählen Erweitern


[hidden]="Kalender:t_001_source | map('Kalender1:false,.*:true')"

Hier wird, wenn Kalender1 im Kalender:t_001_source steht, hidden auf false gestellt. Wenn irgendetwas anderes in souce steht, dann zieht bei hidden true.

ps. Ich hätte glaube die Kalender nicht zusammen geführt...

[h002]

Vielen lieben Dank für den Input. Du hast recht, ich werde dann doch versuchen mittels ftui-row und ftui-column die verschiedenen Kalender-Views einzubinden und doch je Kalender eine View machen. Langsam finde ich Gefallen an CalView und FTUI3.

[pula]

Fortsetzung der Diskussion von hier https://forum.fhem.de/index.php/topic,115259.msg1231968.html#msg1231968

Wie geschrieben, fände ich es toll, wenn bei ganztägigen Ereignissen im calview-widget in der Beginn-Zeit nicht die Anfagszteit (bei mir 00:00) ausgegeben würde, sondern zum Beispiel nichts oder ein String wie zb "ganztags". Dann würde man auf einen Blick sehen, daß es sich um keinen "normalen" Termin handelt.

Bei meinem Kalender-Provider (kopano) steht bei ganztägigen Ereignissen in den readings btime und etime jeweils 00:00, das mag bei anderen Kalender-Providern anders sein.

Dazu hätte ich folgenden Vorschlag für eine kleine Änderung in der calview.component.js:

Code Auswählen Erweitern

@@ -180,7 +180,7 @@
             this.data['t_'+num+'_bdate'] = (this.hasAttribute('date_wday')?this.data['t_'+num+'_bdate'].split().map(x => x.substr(0,6)+'  '+wdayx.substr(0,2)):this.data['t_'+num+'_bdate'].split().map(x => wdayx.substr(0,2)+', '+x.substr(0,6)));
             this.data['t_'+num+'_edate'] = this.data['t_'+num+'_edate'].split().map(x => wdayx.substr(0,2)+', '+x.substr(0,6));
           }
-
+        if (this.data['t_'+num+'_btime'] == '00:00' && this.data['t_'+num+'_etime'] == '00:00') this.data['t_'+num+'_btime'] = '';
         let daysleftIdx = daysleftdata.length-1;
         let blinkIdx = daysleftdata.length-1;
         let coltxtcolor = '';
Das ist vermutlich weder besonders schön, noch parametrisierbar, aber für mich führt es zum gewünschten Ergebnis. Möglicherweise wäre das auch für andere Nutzer in der einen oder anderen Form interessant.

Cheers,
Pula

[mr_petz]

Ok. Ich schaue mal was geht.
Man muss auch beachten, wenn btime und etime angezeigt werden sollen was dann passieren soll. Dann müsste ich die beiden Zellen verbinden. Vorausgesetzt die stehen nebeneinander (kann man ja frei wählen).
Mal sehen was andere dazu sagen und wie es umzusetzen wäre.
Als optionales Attribute würde ich es dann einbinden.
LG

[OdfFhem]

Wer Beginn und Ende eines Termins ausgeben möchte, könnte auf timeshort ausweichen; dort steht bei ganztägigen Terminen automatisch "ganztägig" - kann via Attribut fulldaytext aber auch individualisiert werden.

Spannend wird es (höchstwahrscheinlich) bei Terminen mit edate <> bdate ...

[mr_petz]

...
Spannend wird es (höchstwahrscheinlich) bei Terminen mit edate <> bdate ...

Das wird spannend, wenn es über mehrere Tage ganztägig ist...
k.A. wie man das löst...
LG

[AyshaHM]

Hallo mr_petz,
ich würde gerne dieses Scrollfeature haben. Leider ist im gesamten Beitrag nichts mehr davon zu lesen.

Kannst du mir den Link für CSS & JS nochmal geben.

Danke vom alten Herrn

lG Aysha

Hat noch jemand Interesse an einen unsichtbaren Scrollfeature?
Scrollbar wäre nicht zu sehen und man kann somit den Calview verkleinern im View.
siehe animierte Anhänge
lg mr_petz