57_CALVIEW - Erweiterungsmodul für 57_CALENDAR

Begonnen von chris1284, 28 Dezember 2016, 18:12:33

Vorheriges Thema - Nächstes Thema

Mave


Mave

Ich möchte nochmal die Punkte zusammenfassen, die das Calview Widget - für mich - perfekt machen würden. Selbstverständlich ohne Anspruch auf Umsetzung.

- Formatierung der Spaltenbreite (z.B. Datum 15%, Uhrzeit 15%, Summary 70%)

- Formatierung von Datum und Uhrzeit (z.B. 03.09. ohne Jahreszahl und 08:40 Uhr ohne Sekunden). "heute" und "morgen" sollte auf alle Fälle weiterhin funktionieren.

- ganztägige Termine werden als "ganztägig" oder komplett ohne Uhrzeit angezeigt (der Einfachheit halber könnten - aus meiner Sicht - alle Termine, die um 00:00 Uhr beginnen, als ganztägig betrachtet werden. zur Not könnte man nicht ganztägige Termine um 00:01 Uhr beginnen lassen.

- Summaries, welche die Spaltenbreite überschreiten, werden nicht 2-reihig dargestellt sondern mit "..." abgeschnitten

- Sahnehäubchen wäre eine frei wählbare Einfärbung der Termine, je nachdem, aus welchem Kalender sie kommen (analog zum Google Kalender) und die Anzeige von laufenden Terminen (Startzeitpunkt in der Vergangenheit und Endzeitpunkt heute oder in der Zukunft).


Vielen Dank.

Grüße Mave

chris1284

Zitat von: Mave am 03 September 2017, 08:52:02
- Formatierung der Spaltenbreite (z.B. Datum 15%, Uhrzeit 15%, Summary 70%)

würde ich frei wählbar machen
Zitat von: Mave am 03 September 2017, 08:52:02
- Formatierung von Datum und Uhrzeit (z.B. 03.09. ohne Jahreszahl und 08:40 Uhr ohne Sekunden). "heute" und "morgen" sollte auf alle Fälle weiterhin funktionieren.

denke ich gut machbar

Zitat von: Mave am 03 September 2017, 08:52:02
- ganztägige Termine werden als "ganztägig" oder komplett ohne Uhrzeit angezeigt (der Einfachheit halber könnten - aus meiner Sicht - alle Termine, die um 00:00 Uhr beginnen, als ganztägig betrachtet werden. zur Not könnte man nicht ganztägige Termine um 00:01 Uhr beginnen lassen.

so einfach ist es dann nicht. einen ganztägigen termin sollte man schon daran identifizieren dass er um 00:00:00 startet und am startag +1 um 00:00:00 endet. wäre eine modul-sache, nciht das widget

Zitat von: Mave am 03 September 2017, 08:52:02
- Summaries, welche die Spaltenbreite überschreiten, werden nicht 2-reihig dargestellt sondern mit "..." abgeschnitten
glaube ich nicht umsetzbar denn wie will man rausfinden das zb die angegebene spaltenbreite von x% zu klein für den text ist?
einfacher wäre es wenn man evtl formatieren kann das der tex der aus der zelle läuft einfach kein zeilenumbruch macht und alles ausßerhalb nicht sichtbar ist (keine ahnung ob das html hergibt)

Zitat von: Mave am 03 September 2017, 08:52:02
- Sahnehäubchen wäre eine frei wählbare Einfärbung der Termine, je nachdem, aus welchem Kalender sie kommen (analog zum Google Kalender)
sollte machbar sein.

Zitat von: Mave am 03 September 2017, 08:52:02
die Anzeige von laufenden Terminen (Startzeitpunkt in der Vergangenheit und Endzeitpunkt heute oder in der Zukunft).

wäre eine modul-sache, nicht des widgets

Mave

Okay, super.

Vielen Dank für Deine Rückmeldung.

Grüße Mave

sTaN

Den Verbesserungsvorschlägen von Mave kann ich mich nur anschließen! Danke auch für das Feedback chris.
Bezüglich dem Abschneiden von Summarys könnte man ja vllt. ein attribut einbauen, was die maximale Anzahl an Buchstaben zulässt und ab dem X. Buchstaben wird angeschnitten bzw. ein "..." angehängt. So kann jeder anhand seiner Spaltenbreite festlege wieviel sichtbar sein soll.

Gruß
sTaN
Raspberry Pi 3
2 x CUL CC1101-USB-Lite 868MHz
FS20 Komponenten, Philips HUE, Alexa-Fhem, MAX! Geräte, homebridge, harmony, Unifi, FirtzBox, MQTT, Aurora, Denon, Sonos, TabletUI, CALENDAR, EGPM2LAN, Pushover

chris1284

#65
Ich habe einige Änderungen im github abgelegt
https://github.com/chris1284/CALVIEW
https://github.com/chris1284/Widgets-for-fhem-tablet-ui


Zitat von: Mave am 03 September 2017, 08:52:02
- Formatierung der Spaltenbreite (z.B. Datum 15%, Uhrzeit 15%, Summary 70%)
- ist nun im widget per data-detailwidth einstellbar
bsp:
... data-detail='["bdate","btime","etime","summary","age"]' data-detailwidth='["15","18","18","20","20"]' ...
bedeutet 15% bdate, 18% btime, 18% etime , .....  man sollte hier möglichst auf 100% kommen  ;)

Zitat von: Mave am 03 September 2017, 08:52:02
- Formatierung von Datum und Uhrzeit (z.B. 03.09. ohne Jahreszahl und 08:40 Uhr ohne Sekunden). "heute" und "morgen" sollte auf alle Fälle weiterhin funktionieren.
- ist nun im widget per data-dateformat="short" data-timeformat="short" einstellbar

Zitat von: Mave am 03 September 2017, 08:52:02
- Sahnehäubchen wäre eine frei wählbare Einfärbung der Termine, je nachdem, aus welchem Kalender sie kommen (analog zum Google Kalender)
- im widget muss dafür in data-detail='[...,"sourcecolor",...]' aufgenommen werden
- im fhem-device muss das attribut sourcecolor [kalendername]:[farbe],... gesetzt werden
bsp:
sourcecolor Kalender_Abfall:#b3dc6c,Kalender_Christian:#ffad46,Kalender_Geburtstage:#cca6ac
ich habe zb dne farbcode einfach im goolecalender kopiert

der rest ist in arbeit.

Mave

Super, vielen Dank.

Werde ich gleich mal testen....

nageniil

Kleine Idee - aber ich will den anstehenden Weiterentwicklungen von chris1284 nicht entgegenstehen:
Ich würde noch ein Attribut data-class einführen und sinngemäß an den entsprechenden Stellen im Javascript einfügen, etwa so:
mytext += "<div data-type=\"label\" class=\"" + myclass + "\" style=\"color:"+color+";width:"+elem.data('detailwidth')[mycount]+"%;\">" + elem.getReading(readingPrefix+'_'+num+'_'+spalte).val.substr(0, datesubstr) + "</div>";
                                                ^^^^^^

(Ich habe hier den Value von data-class als Variable myclass eingefügt.)
Ich mag in der Tabelle nämlich keine zentrierten Texte, deshalb habe ich hier beim Aufruf des Widgets data-class="left-align" eingefügt - und siehe da: es funzt...
Man könnte auch large einfügen oder alles, was das UI so hergibt.

FHEM 5.8 auf RaspBerry3 (jessie)
Fritz!Box7490 mit 3*DECT200/210(Schalter) + 5*Comet(Heizung) + 3*Fritz!Fon
10*Pollin-Funksteckdosen ...

ToM_ToM

ZitatBezüglich dem Abschneiden von Summarys könnte man ja vllt. ein attribut einbauen, was die maximale Anzahl an Buchstaben zulässt und ab dem X. Buchstaben wird angeschnitten bzw. ein "..." angehängt.

Da gibt's doch schon eine standard CSS-Klasse (truncate) für. Evtl. kann man diese hier mit verwenden?

https://wiki.fhem.de/wiki/FHEM_Tablet_UI

CSS-Klassen -> Schriftstil -> truncate

VG, Thomas
Hardware: BananaPi, Busmaster CUL, SanDisk 16GB Ultra SD, 16 GB USB-Stick | Software: Armbian, FHEM 5.8

Laire

#69
Erstmal vielen Dank für das Widget. Gefällt mir richtig gut.

Ich habe das Problem, dass mir das Alter nicht angezeigt wird beim Geburtstagskalender in der TabletUI:

                    <div style="height: 10%;"
                         data-type="calview"
                         data-device="Geburtstage"
                         data-max="4"
                         data-showempty="true"
                         data-dateformat="short"
                         data-timeformat="short"
                         data-detail='["bdate","summary","age"]'
                         data-detailwidth='["20","60","20"]'
                         data-color="#575962"
                         data-get="all"></div>   


Ich hätte aber noch einige Wünsche:

1. Wochentag anzeigen
2. Summary Text links oder rechtsbündig ausrichten
3. Ganztägige Termine evtl anstatt 00:00 Uhr keine Uhrzeit oder Tagestermin o.ä.

Viele Grüße

chris1284

#70
Zitat- ganztägige Termine werden als "ganztägig" oder komplett ohne Uhrzeit angezeigt
ich habe im modul selbst ein neues reading "_timeshort" eingebaut welches entweder "startzeit - endzeit" anzeigt (also zb 19:30:00 - 20:00:00 ) oder einen text für ganztägige termine.
dieser text kann per Attribut fulldaytext selbst gewählt werden. default ist "ganztägig". leer geht leider nicht da fhem keine leeren /leerzeichen attribute kennt. um das zu umgehen kann zb   einfügen was dann in der tui ein leerzeichen ist.

die formatierung der "_timeshort" zeiten kann per attribut timeshort (1:0) auf zb 19:30 - 20:00 gekürzt werden

ZitatIch würde noch ein Attribut data-class einführen und sinngemäß an den entsprechenden Stellen im Javascript einfügen, etwa so:
das widget hat nun die von nageniil vorgeschlagene data-class, danke!

somit sind Laires anregen 2. und 3. wohl auch eingearbeitet

bsp

<div data-type="calview" data-device="View_All" data-get="all" data-detail='["bdate","timeshort","summary","age","sourcecolor"]'data-detailwidth='["15","25","50","10"]' data-class='left-align small' data-start="none" data-max="10"  data-sourcecolor="yes" class="cell"></div>

attribut timeshort 1

attribut fulldaytext Ganztags


sTaN

Genial chris!!!
Danke für die direkte Umsetzungen der Ideen. Weißt du schon, wann die die neue Version einchecken wirst? Werde sie dann gerne testen und einbauen. Oder bleiben diese erstmal nur in Github? Dann werde ich mich noch ein wenig gedulden müssen.

Gruß und danke noch mal!
sTaN
Raspberry Pi 3
2 x CUL CC1101-USB-Lite 868MHz
FS20 Komponenten, Philips HUE, Alexa-Fhem, MAX! Geräte, homebridge, harmony, Unifi, FirtzBox, MQTT, Aurora, Denon, Sonos, TabletUI, CALENDAR, EGPM2LAN, Pushover

chris1284

ich würde sagen ich checke das modul zum wochenende ein. das widget ist ja eh nur im github

sTaN

Pardon. Meinte die Änderung des Moduls in fhem und die Änderung im offiziellen github für das Widget.
Oder bekommt man die Änderungen des Widgets gar nicht über den folgenden Befehl?

update all https://raw.githubusercontent.com/knowthelist/fhem-tablet-ui/master/controls_fhemtabletui.txt
Raspberry Pi 3
2 x CUL CC1101-USB-Lite 868MHz
FS20 Komponenten, Philips HUE, Alexa-Fhem, MAX! Geräte, homebridge, harmony, Unifi, FirtzBox, MQTT, Aurora, Denon, Sonos, TabletUI, CALENDAR, EGPM2LAN, Pushover

Laire

#74
Hallo Chris,

ich kenne mich mit der Materie (HTML, JS) ja ein bisschen aus. Ich habe mal bei den Zeilen, die die Container der einzelnen Elemente erstellen eine weitere Klasse hinzugefügt, so könnte man wenn man dem div Container eine eigene Klasse gibt, jede einzelne Spalte über CSS einzeln formatieren. Das Ergebnis sieht dann so aus:

Code in der FTUI html:

<div class="privateCal"
     data-type="calview"
     data-device="Privat"
     data-max="4"
     data-dateformat="short"
     data-timeformat="short"
     data-detail='["bdate", "btime", "summary"]'
     data-detailwidth='["20","20","60"]'
     data-color="#575962"
     data-get="all"></div>     


Mit der veränderten JS Datei im Anhang würde er jetzt jeder Spalte eine eigene Klasse geben, bestehend aus calview + Spaltennamen, z.B.
<div data-type="label" class="calview-bdate" style="color:#575962;width:20%;">09.09.</div>

Somit kann ich über die CSS Datei jede einzelne Spalte von jedem Kalender selber optisch anpassen (in diesem Fall die Spalte bdate des Kalenders privateCal:
.privateCal .calview-bdate{
color: green;
font-weight: bold;
text-align: center;
}



Das mit dem Wochentagen ist auch kein Problem, setzte ich mich heute abend mal ran.