fragen zum widget

[BaluderBaer]

hallo und guten morgen team

ich habe hier openhab 4.2.2 auf einem raspi 400 installiert

habe hier mal was gefungen ( muell kalender )
diesen habe ich mit auch mit voller funktion eingebaut, und meinte diesen auch noch etwas zuerweitern.

dies klappt ( so wie ich es mir vorgestellt habe ) leider nur bedingt.

ich habe mit dem widget in summe 3 probleme / fragen.

- warum wird der tag "Morgen" als "undefieniert" angezeigt ( was habe ich da vergessen ). ??

- wenn ich beim bereich Birthday bin, kann ich das datum einblenden ( geht auch ), aber wie kann ich hier den bereich titel ( OHNE "Birthday" ) mit einblenden ??
anzeige ist, "25.11.2024 heute " , soll sein " Balu der Baer 25.11.2024 heute "

- ist es moeglich hier 3 eintrage zu machen ( es gibt tage da haben 3 leute geburstag ), glaube aber das geht nicht ( da nur ein wert geliefert wird ), bin mir aber nicht sicher

screenshots und widget code sind anbei

Code: Alles auswählen

uid: Test_Muellabfuhr_Birthday_Allgemein_1
tags: []
props:
  parameters:
    - description: https://openhabforum.de/viewtopic.php?t=7519&start=10,
        Hintergrundfarbe veränderbar, z.B. "transparent" default
        "linear-gradient(to top left,#B0E0E6 20%,#1E90FF 30%,#FFC0CB 60%)"
      label: Hintergrundfarbe
      name: background1
      required: false
      type: TEXT
    - default: "0"
      description: Abstand vom oberen Rand veränden (in Pixel - z.B. 30)
      label: Abstand nach oben
      name: marginTop
      required: false
      type: TEXT
    - default: "28"
      description: Schriftgrösse für Überschrift veränden (in Pixel - z.B. 30)
      label: Schriftgrösse Überschrift
      name: fontSizeHeadline
      required: false
      type: TEXT
    - default: "20"
      description: Schriftgrösse für Zeilen (in Pixel - z.B. 30 - default ist 20)
      label: Schriftgrösse Zeilen
      name: fontSizeContent
      required: false
      type: TEXT
    - default: "0"
      description: Zeilenabstand (in Pixel - z.B. 30 default ist 0 )
      label: Zeilenabstand
      name: lineFeed
      required: false
      type: TEXT
timestamp: Nov 25, 2024, 12:41:44 AM
component: f7-card
config:
  class:
    - display-flex
    - flex-direction-column
    - align-items-center
  style:
    --f7-card-expandable-header-font-size: 30px
    background: '=(props.background1) ? props.background1 : "linear-gradient(to top
      left,#B0E0E6 20%,#1E90FF 30%,#FFC0CB 60%)"'
    border-radius: var(--f7-card-expandable-border-radius)
    fontSize: var(--f7-card-expandable-header-font-size)
    height: auto
    margin-top: =props.marginTop + "px"
    width: auto
slots:
  content:
    - component: f7-card-header
      config:
        style:
          color: cyan
          font-size: =props.fontSizeHeadline +"px"
          justify-content: flex-end
          margin-top: 1px
          min-height: 30px
          padding: 20px
          margin-bottom: =props.lineFeed +"px"
      slots:
        default:
          - component: Label
            config:
              style:
                left: 0px
                margin-top: 20px
                margin-bottom: 20px
                margin-left: 60px
                position: absolute
              text: ="BSR / ALBA Termine"
    - component: f7-card-content
      slots:
        default:
          - component: f7-list
            config:
              mediaList: true
            slots:
              default:
                - component: oh-list-item
                  config:
                    badge: '=(((dayjs(items.Kalender_Schwarze_Tonne_Start.state).diff(dayjs(items.ZeitAktuell_DateTime.state).startOf("day")))/1000/86400)
                      == 1 ? "Morgen" :
                      ((dayjs(items.Kalender_Schwarze_Tonne_Start.state).diff(dayjs(items.ZeitAktuell_DateTime.state).startOf("day")))/1000/86400)
                      == 0 ? "Heute" : false)'
                    badgeColor: ="red"
                    icon: f7:trash
                    iconColor: black
                    style:
                      color: black
                      font-size: =props.fontSizeContent + "px"
                      margin-bottom: =props.lineFeed +"px"
                    title: ="Schwarze Tonne " +  items.Kalender_Schwarze_Tonne_Start.displayState
                - component: oh-list-item
                  config:
                    badge: '=(((dayjs(items.Kalender_Braune_Tonne_Start.state).diff(dayjs(items.ZeitAktuell_DateTime.state).startOf("day")))/1000/86400)
                      == 1 ? "Morgen" :
                      ((dayjs(items.Kalender_Braune_Tonne_Start.state).diff(dayjs(items.ZeitAktuell_DateTime.state).startOf("day")))/1000/86400)
                      == 0 ? "Heute" : false)'
                    badgeColor: ="red"
                    icon: f7:trash
                    iconColor: green
                    style:
                      color: green
                      font-size: =props.fontSizeContent + "px"
                      margin-bottom: =props.lineFeed +"px"
                    title: ="Bio Tonne " + items.Kalender_Braune_Tonne_Start.displayState
                - component: oh-list-item
                  config:
                    badge: '=(((dayjs(items.Kalender_Blaue_Tonne_Start.state).diff(dayjs(items.ZeitAktuell_DateTime.state).startOf("day")))/1000/86400)
                      == 1 ? "Morgen" :
                      ((dayjs(items.Kalender_Blaue_Tonne_Start.state).diff(dayjs(items.ZeitAktuell_DateTime.state).startOf("day")))/1000/86400)
                      == 0 ? "Heute" : false)'
                    badgeColor: ="red"
                    icon: f7:trash
                    iconColor: blue
                    style:
                      color: blue
                      font-size: =props.fontSizeContent + "px"
                      margin-bottom: =props.lineFeed +"px"
                    title: ="Papier Tonne " + items.Kalender_Blaue_Tonne_Start.displayState
                - component: oh-list-item
                  config:
                    badge: '=(((dayjs(itemsKalender_Gelbe_Tonne_Start.state).diff(dayjs(items.ZeitAktuell_DateTime.state).startOf("day")))/1000/86400)
                      == 1 ? "Morgen" :
                      ((dayjs(items.Kalender_Gelbe_Tonne_Start.state).diff(dayjs(items.ZeitAktuell_DateTime.state).startOf("day")))/1000/86400)
                      == 0 ? "Heute" : false)'
                    badgeColor: ="red"
                    icon: f7:trash
                    iconColor: yellow
                    style:
                      color: yellow
                      font-size: =props.fontSizeContent + "px"
                      margin-bottom: =props.lineFeed +"px"
                    title: ="Gelbe Tonne " + items.Kalender_Gelbe_Tonne_Start.displayState
    - component: f7-card-header
      config:
        style:
          color: cyan
          font-size: =props.fontSizeHeadline +"px"
          justify-content: flex-end
          margin-top: 1px
          min-height: 30px
          padding: 20px
          margin-bottom: =props.lineFeed +"px"
      slots:
        default:
          - component: Label
            config:
              style:
                left: 0px
                margin-top: 20px
                margin-bottom: 20px
                margin-left: 60px
                position: absolute
              text: ="Birthday Termine"
    - component: f7-card-content
      slots:
        default:
          - component: f7-list
            config:
              mediaList: true
            slots:
              default:
                - component: oh-list-item
                  config:
                    badge: '=(((dayjs(items.Kalender_Birthday_Start.state).diff(dayjs(items.ZeitAktuell_DateTime.state).startOf("day")))/1000/86400)
                      == 1 ? "Morgen" :
                      ((dayjs(items.Kalender_Birthday_Start.state).diff(dayjs(items.ZeitAktuell_DateTime.state).startOf("day")))/1000/86400)
                      == 0 ? "Heute" : false)'
                    badgeColor: ="red"
                    icon: f7:burst
                    iconColor: red
                    style:
                      color: black
                      font-size: =props.fontSizeContent + "px"
                      margin-bottom: =props.lineFeed +"px"
                    title: =" " +  items.Kalender_Birthday_Start.displayState
    - component: f7-card-header
      config:
        style:
          color: cyan
          font-size: =props.fontSizeHeadline +"px"
          justify-content: flex-end
          margin-top: 1px
          min-height: 30px
          padding: 20px
          margin-bottom: =props.lineFeed +"px"
      slots:
        default:
          - component: Label
            config:
              style:
                left: 0px
                margin-top: 20px
                margin-bottom: 20px
                margin-left: 60px
                position: absolute
              text: ="Allgemeine Termine"
    - component: f7-card-content
      slots:
        default:
          - component: f7-list
            config:
              mediaList: true
            slots:
              default:
                - component: oh-list-item
                  config:
                    badge: '=(((dayjs(items.Kalender_Allgemein_Start.state).diff(dayjs(items.ZeitAktuell_DateTime.state).startOf("day")))/1000/86400)
                      == 1 ? "Morgen" :
                      ((dayjs(items.Kalender_Allgemein_Start.state).diff(dayjs(items.ZeitAktuell_DateTime.state).startOf("day")))/1000/86400)
                      == 0 ? "Heute" : false)'
                    badgeColor: ="red"
                    icon: f7:pin_fill
                    iconColor: gray
                    style:
                      color: black
                      font-size: =props.fontSizeContent + "px"
                      margin-bottom: =props.lineFeed +"px"
                    title: =" " +  items.Kalender_Allgemein_Start.displayState

DANKE an alle fuer die hilfe

Balu

[BaluderBaer]

und hier noch die 2 fehlenden screenshots

[Harka]

Moin,
hab nur was zur 1. Frage gesehen. Da fehlt einmal nach items ein Punkt

Code: Alles auswählen

badge: '=(((dayjs(itemsKalender_Gelbe_Tonne_Start.state).diff(dayjs(items.ZeitAktuell_DateTime.state).startOf("day")))/1000/86400)
                      == 1 ? "Morgen" :
                      ((dayjs(items.Kalender_Gelbe_Tonne_Start.state).diff(dayjs(items.ZeitAktuell_DateTime.state).startOf("day")))/1000/86400)
                      == 0 ? "Heute" : false)'

Für den Geburtstag kannst Du mal versuchen das Wort Birthday durch ersetzen zu entfernen.

Code: Alles auswählen

title: =" " +  (@'Kalender_Birthday_Start').replaceAll('Birthday','')

[peter-pan]

Eventuell probierst du mal diese Schreibweise für deinen Titel:

Code: Alles auswählen

title: =" " +  items.Kalender_Birthday_Titel.displayState + " " + items.Kalender_Birthday_Start.displayState

Ich hab das in einem einfachen Widget so definiert:

Code: Alles auswählen

component: oh-label-cell
config:
  color: teal
  footer: =items.remind_birth1_Title_1.state.split(",")[1] + " " +
    items.remind_birth1_Begin_1.displayState
  header: =items.remind_birth1_Title_0.state.split(",")[1]
  icon: material:cake
  item: remind_birth1_Begin_0
  label: =dayjs(items.remind_birth1_Begin_0.state).format('dddd, DD.MM.YY ')
  on: "true"
  stateStyle:
    color: red
    fontSize: 21px
  subtitle: '=items.remind_birth1_Title_0.state.split(",")[0] + " Sternzeichen: "
    + items.Zodiac_Sign.displayState'

Das sieht dann als Widget so aus:

geburtstag.jpg

Der "footer" enthält den zusammengesetzten Ausdruck.

Die Birthday-Items sind so formatiert:
.items:

Code: Alles auswählen

DateTime   remind_birth1_Begin_0           "Geburtstag Start [%1$ta, %1$td.%1$tm.%1$ty]"                 <calendar>  {channel="icalendar:eventfilter:birth1:result_0#begin"}
DateTime   remind_birth1_Ended_0           "Geburtstag Ende [%1$ta, %1$td.%1$tm.%1$ty]"                  <calendar>  {channel="icalendar:eventfilter:birth1:result_0#end"}
String     remind_birth1_Title_0           "Geburtstag  [%s]"                                            <calendar>  {channel="icalendar:eventfilter:birth1:result_0#title"}
DateTime   remind_birth1_Begin_1           "Geburtstag Start [%1$ta, %1$td.%1$tm.%1$ty]"                 <calendar>  {channel="icalendar:eventfilter:birth1:result_1#begin"}
DateTime   remind_birth1_Ended_1           "Geburtstag Ende [%1$ta, %1$td.%1$tm.%1$ty]"                  <calendar>  {channel="icalendar:eventfilter:birth1:result_1#end"}
String     remind_birth1_Title_1           "Geburtstag  [%s]"                                            <calendar>  {channel="icalendar:eventfilter:birth1:result_1#title"}
DateTime   remind_birth1_Begin_2           "Geburtstag Start [%1$ta, %1$td.%1$tm.%1$ty]"                 <calendar>  {channel="icalendar:eventfilter:birth1:result_2#begin"}
DateTime   remind_birth1_Ended_2           "Geburtstag Ende [%1$ta, %1$td.%1$tm.%1$ty]"                  <calendar>  {channel="icalendar:eventfilter:birth1:result_2#end"}
String     remind_birth1_Title_2           "Geburtstag  [%s]"                                            <calendar>  {channel="icalendar:eventfilter:birth1:result_2#title"}

[BaluderBaer]

hey jungs

DANKE

teil 1 funzt , richtig punkt vergessen ( hab ich uebersehen ) sorry
teil 2 funzt , mit folgenden string.:
title: =" " + (@'Kalender_Birthday_Titel') .replaceAll('Birthday','') + " " + items.Kalender_Birthday_Start.displayState

wichtig scheint hier das " " vor ".replace" zu sein, damit klapp es.

teil 3 werde ich heute nicht schaffen, setze mich morgen ran.

sieht auf alle faelle schon mal spitze aus

balu

[peter-pan]

wichtig scheint hier das " " vor ".replace" zu sein, damit klapp es.

Das hab ich jetzt nicht ganz verstanden, aber ich habe auch nicht gesehen, das im Textstring das Wort "Birthday" eliminiert soll.
Das geht so wie es @Harka vorgeschlagen hat oder auch so

Code: Alles auswählen

title: =" " +  items.Kalender_Birthday_Titel.state.replace('Birthday ', '') + " " + items.Kalender_Birthday_Start.displayState

[BaluderBaer]

Hallo ihr beide

Danke erst mal fuer eure unterstuetzung.
hat soweit alles super geklappt ( sternzeichen ist auch schon eingebaut / super netter zusatzt !!! )

dennoch habe ich 2 fragen zu deinem code, peter pan.

im terminfilter setze ich die "Anzahl Kalendereinträge" auf 3. und erstelle damit ein thing.
mit diesem erstelle ich im modul ein equipment mit den chanels.
im chanel unter meta daten ( fuer ende/start/titel ) bereich "state description ) bereich pattern erstelle dich das datumsformat.
das mache ich 3 mal.
z.b.: Birthday, Birthday2, birthday3
aber wo sage ich welcher event ( eintrag es ist ) der erste, der zweite oder der dritte ??? das habe ich nicht verstanden.

zweite frage ist, wie errechnest du das alter, ( aus dem start und ende bereich ? im kalender kann ich doch hier nur eine uhrzeit mitgeben, kein jahr ( glaube ich ))

Danke fuer die hilfe / infos

balu

[peter-pan]

Alles ganz einfach. Das kannst du im Thing des entsprechenden Kalenders(Bridge) unter "Anzahl der Kalendereinträge" einstellen.

.things - Beispiel

Code: Alles auswählen

//------------------------------------------ Geburtstagskalender -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Bridge icalendar:calendar:birthday          "Geburtstage   "      @ "Arbeitszimmer"    [ url="http://192.168.178.76:8080/static/geburtstage_2024.ics", refreshTime=720 ]
Thing  icalendar:eventfilter:birth1         "Geburtstage"          (icalendar:calendar:birthday) @ "Esszimmer"    [ maxEvents=3, refreshTime=720, datetimeUnit="DAY", datetimeStart=0, datetimeEnd=31, datetimeRound=true, textEventField="SUMMARY", textEventValue="Geburtstag", textValueType="TEXT" ]

Die dazu passenden Items habe ich ja oben schon beschrieben. Die entsprechenden Channels sind dann nummeriert in den Items verknüpft. In meiner Textkonfiguration sieht man das am Channel-Ende, z.B. ":result_2#title".

Wenn du das über die MainUI machst, dann werden dir wahrscheinlich die entsprechenden Channels sozusagen "on fly/running" angeboten. Die musst du dann nur noch mit neuen oder bestehenden Items verknüpfen. Die Nummerierung der Channels bginnt dabei mit 0. (Also bei 3 Channelgruppen bedeutet das 0, 1, 2. Ich habe meine Items aber mit 1,2 und 3 nummeriert. Das ist vielleicht nicht ganz optimal; das geht auch anders ). Und weil ich alles in Textform vorliegen habe, ist das eigentlich auch kein Problem; aber... einfach keine Lust... )

kalender.jpg

Die Formatter/Pattern kannst du so wie bisher entweder in den Metadaten oder auch abweichend im Widget (da ist in meinem kleinen Widget auch ein Beispiel) festlegen. In der Textkonfiguration gibt's noch ein paar andere Möglichkeiten, die aus "alten" Tagen resultieren.

[BaluderBaer]

hallo peter-pan

du bist super, danke, hat geklappt ( auf die idee, das das da mit eingetragen wird bin ich nicht gekommen ( aber wieder etwas gelernt ) ),
kann jetzt im kalender alles eintragen und unterscheiden.
- bithday
- allgemeine termin
- sehr wichtige termine
etc
und sieht auch nett aus.

bleibt aus meiner sicht nur noch die frage offen, wie errechnest du da alter hinter dem namen in deinem screenshot ( glaube das soll das alter sein )
das verstehe ich noch nicht.
DANKE
balu

[peter-pan]

bleibt aus meiner sicht nur noch die frage offen, wie errechnest du da alter hinter dem namen in deinem screenshot ( glaube das soll das alter sein )

....
Das geht ganz einfach. Ich benutze den Kalender aus meinem Thunderbird-E-Mail-Programm und exportiere die Daten. Da steht das schon im Namen drin für 3 Jahre, wenn ich mich noch richtig erinnere. Nach dem Exportieren, wird das Feld "Summary" mit einem Editor noch um den Suchstring des OH-Things erweitert. In meinem Fall "Geburtstag, "
Das Original sieht etwa so aus:

Code: Alles auswählen

BEGIN:VCALENDAR
PRODID:-//Mozilla.org/NONSGML Mozilla Calendar V1.1//EN
VERSION:2.0
BEGIN:VEVENT
DTSTAMP:20241126T181130Z
UID:65e1ac25-8c00-43f6-8d73-0720c15a4a8d-2023
SUMMARY:Balu der Bär (26)
DTSTART;VALUE=DATE:20230103
DTEND;VALUE=DATE:20230104
TRANSP:TRANSPARENT
END:VEVENT
BEGIN:VEVENT
DTSTAMP:20241126T181130Z
UID:65e1ac25-8c00-43f6-8d73-0720c15a4a8d-2024
SUMMARY:Balu der Bär (27)
DTSTART;VALUE=DATE:20240103
DTEND;VALUE=DATE:20240104
TRANSP:TRANSPARENT
END:VEVENT
BEGIN:VEVENT
DTSTAMP:20241126T181130Z
UID:65e1ac25-8c00-43f6-8d73-0720c15a4a8d-2025
SUMMARY:Balu der Bär (28)
DTSTART;VALUE=DATE:20250103
DTEND;VALUE=DATE:20250104
TRANSP:TRANSPARENT
END:VEVENT
BEGIN:VEVENT
DTSTAMP:20241126T181130Z

und die Erweiterung dann so:

Code: Alles auswählen

BEGIN:VCALENDAR
PRODID:-//Mozilla.org/NONSGML Mozilla Calendar V1.1//EN
VERSION:2.0
BEGIN:VEVENT
DTSTAMP:20241126T181130Z
UID:65e1ac25-8c00-43f6-8d73-0720c15a4a8d-2023
SUMMARY:Geburtstag, Balu der Bär (26)
DTSTART;VALUE=DATE:20230103
DTEND;VALUE=DATE:20230104
TRANSP:TRANSPARENT
END:VEVENT
BEGIN:VEVENT
DTSTAMP:20241126T181130Z
UID:65e1ac25-8c00-43f6-8d73-0720c15a4a8d-2024
SUMMARY:Geburtstag, Balu der Bär (27)
DTSTART;VALUE=DATE:20240103
DTEND;VALUE=DATE:20240104
TRANSP:TRANSPARENT
END:VEVENT
BEGIN:VEVENT
DTSTAMP:20241126T181130Z
UID:65e1ac25-8c00-43f6-8d73-0720c15a4a8d-2025
SUMMARY:Geburtstag, Balu der Bär (28)
DTSTART;VALUE=DATE:20250103
DTEND;VALUE=DATE:20250104
TRANSP:TRANSPARENT
END:VEVENT
BEGIN:VEVENT
DTSTAMP:20241126T181130Z

Die Schlüsselbegriffe dafür sind im textEventField="SUMMARY" und textEventValue="Geburtstag" enthalten. Das Entfernen des Schlüssels kennst du ja, bei dir ist es Birthday, bei mir Geburtstag.
Ich habe das Feld aber einfach durch einen "Split" mit "," als Trenner in ein Array verwandelt und den zweiten Teilbereich (1) selektiert. Ist aber im Prinzip das Gleiche (=items.remind_birth1_Title_1.state.split(",")[1] + " " + items.remind_birth1_Begin_1.displayState).