Garbage Collection

elektrolubach · October 27, 2022, 7:15pm

Hi @Fabian1,
I am also using this widget (@DrRSatzteil thanks for this one ).

As @DrRSatzteil already stated, you need the Items holding the dates for the different garbage types. E.g. the dates can be fed by the iCalendar binding.

In my instance I fetch the garbage dates from our local garbace collection company via an ics link and the iCalendar binding:

The Channels of the iCalendar Things are linked to various Items used in the widget:

(list not complete)

These Item names you have to add to the configuration of the widget. Maybe this is a bit different if you are not familiar with widgets using “widget expressions” instead of simply providing an item selector.

In my case this looks then like:
Footer

='Nächste Abholung: ' + ((dayjs(items.MuellkalenderEintragsfilter_Result_0_Begin.state).diff(dayjs().startOf("day"), "days")) == 0 ? "Heute" : (dayjs(items.MuellkalenderEintragsfilter_Result_0_Begin.state).diff(dayjs().startOf("day"), "days")) == 1 ? "Morgen" : "In " + (dayjs(items.MuellkalenderEintragsfilter_Result_0_Begin.state).diff(dayjs().startOf("day"), "days")) + " Tagen")

Date Items

"Restmüll","black","f7:trash","Muellkalender_Restmuell_Ergebnisstart"|"Bioenergietonne","teal","f7:trash","Muellkalender_Bioenergietonne_Ergebnisstart"|"Verpackungstonne","yellow","f7:trash","Muellkalender_Verpackungstonne_Ergebnisstart"|"Altpapier","blue","f7:trash","Muellkalender_Altpapier_Ergebnisstart"

In the end this looks like:

Regards
Jonathan

binderth · November 21, 2022, 7:08pm

Thanks for that great widget!

What colours are available in this? Our compost bin is brown, but if I’d put in brown it’ll come out as red?

DrRSatzteil · November 21, 2022, 7:56pm

As far as I know you can use any of the f7 colour themes:

Unfortunately there aren’t too many options there.

timl · January 24, 2023, 8:28am

For anyone who don’t want to handle this, via CalDav and intern calendar. I started a platform to fetch garbage information and provide a simple API: müll.io (German only currently) Feedback is welcome, and I can add more providers, if someone need a special provider.

DrRSatzteil · January 24, 2023, 8:44am

Thanks for sharing, looks interesting. However my address is not covered yet. The local provider is https://www.bonnorange.de/.

f00b4r · January 24, 2023, 3:20pm

That’s awesome, I will have to check later if Berlin BSR and Berlin Alba are already on it.

timl · January 25, 2023, 8:17pm

Added Bonn a few seconds ago. Have fun.

DrRSatzteil · January 25, 2023, 8:44pm

Great, thanks!

devmr · February 1, 2023, 7:21pm

Great work! Thank you!

I try to make a similar widget that should fit next to yours showing the next upcomming events. How did you make the subtitle of an list item gray and slightly smaler? I cant find any way to do so? Maybe someone can give me a hint how to style the subtitle from an list item.

// Edit, found it… you are using “footer” not “subTitle”…

ace16vitamine · March 10, 2023, 1:07am

Any news regarding the widget?

ace16vitamine · March 10, 2023, 1:11am

I don’t know if Recklinghausen is included…

https://www.zbh-ksr.de/abfallkalender/abfallkalender22.php

wiewior · March 16, 2023, 9:33am

Can someone share the configuration example? I am confused what shall I type there.
I do not know how to configure this widget.
I have all things working properly

wiewior · March 16, 2023, 9:43am

Hello,
it seems that the footer does not work for me:
I have “heute” (today) displayed and next delivery is next week

="Nächste Abholung: " + ((dayjs(Garbage_Calender_Next_Event_Start).diff(dayjs().startOf("day"), "days")) == 0 ? "Heute" : (dayjs(Garbage_Calender_Next_Event_Start).diff(dayjs().startOf("day"), "days")) == 1 ? "Morgen" : "In " + (dayjs(Garbage_Calender_Next_Event_Start).diff(dayjs().startOf("day"), "days")) + " Tagen")

elektrolubach · March 16, 2023, 10:35am

What if you try

… (items.Garbage_Calender_Next_Event_Start.state)…
instead of

… (Garbage_Calender_Next_Event_Start)…

Cheers
Jonathan

wiewior · March 16, 2023, 1:45pm

than i have NaN (I tested it before)

DrRSatzteil · March 16, 2023, 2:10pm

Are you sure that you added both the „items.“ and „.state“ parts before and after the item name? Have you checked every occurrence of the item name? I don’t see any other obvious mistake in the syntax except these… if it still does not work it might make sense to paste your current config (the NaN one) here for us to review.

wiewior · March 16, 2023, 2:35pm

this was a problem. Now works perfectly. reading the post at the begining I was confused with the footer format. This is the one for the expresion:
… (dayjs(items.NEXT_EVENT_ITEM_GOES_HERE.state) …

Now works perfectly! thank you!

wiewior · March 20, 2023, 11:30am

I am trying to create HabPabel widget with the picture of the coloured trash and text underneath.
How can I make an item out of the footer calculation?

showed pictograms:
trash green - bio
trash orange - plastic
trash blue - paper etc…

it shall look like that but if the collection is today or tomorrow the date shall be replaced accordingly “TODAY” or “TOMORROW”:

this is a code and I need to place some items values instead of the text. Perfectly I could pick items up from the widget settings section. Of course i will place coloured pict. depending on the conditions of the next garbage collection.

<html>
 <style>
  .section_trash {
   width: 150px;
   height: 150px;
	 padding: 10px 10px 10px 10px;
	 overflow: hidden;
   margin: auto;
  }

   .section_text {
   align:center;
   padding: 5px;
   font-size: 20px;
   }
      
 </style>

 <div class="section_trash" ng-if="itemValue(Garbage_Calender_Next_Event_Title)=='Biomüll'">
   <img src="/static/images/trash_green.svg" alt="trash"></img>
 </div> 
 <div class="section_trash" ng-if="itemValue(Garbage_Calender_Next_Event_Title)=='Wertstoffe'">
   <img src="/static/images/trash_orange.svg" alt="trash"></img>
 </div>
 <div class="section_trash" ng-if="itemValue(Garbage_Calender_Next_Event_Title)=='Papier'">
   <img src="/static/images/trash_blue.svg" alt="trash"></img>
 </div>
 <div class="section_trash" ng-if="itemValue(Garbage_Calender_Next_Event_Title)=='Restmüll'">
   <img src="/static/images/trash_black.svg" alt="trash"></img>
 </div>

  
 <div class="section_trash" ng-if="(itemValue(Garbage_Calender_Next_Event_Title)!='Biomüll') && 
                                   (itemValue(Garbage_Calender_Next_Event_Title)!='Werststoffe') && 
                                   (itemValue(Garbage_Calender_Next_Event_Title)!='Papier') && 
                                   (itemValue(Garbage_Calender_Next_Event_Title)!='Restmüll')">
   <img src="/static/images/trash_grey.svg" alt="trash"></img>
 </div> 
 <div class="section_text">{{itemValue('Garbage_Calender_Next_Event_Start') | date:"EEEE | dd.MM"}}</div> 
 

</html>

another words: how to translate this:

Next pick up: +((dayjs(items.Garbage_Calender_Next_Event_Start.state).diff(dayjs().startOf("day"), "days")) == 0 ? "Heute" : (dayjs(items.Garbage_Calender_Next_Event_Start.state).diff(dayjs().startOf("day"), "days")) == 1 ? "Morgen" : "In " + (dayjs(items.Garbage_Calender_Next_Event_Start.state).diff(dayjs().startOf("day"), "days")) + days

to the “widget language (html) ?”

bakerman · October 19, 2023, 4:50am

Cool widget and great community
The last few days I searched a lot in this thread, but unfortunately did not find a solution. I have the widget running, but I can’t get the ads below each item with the next drop-off date and the item on the right with “Tomorrow” or “Today” visible.

These are my settings:

Footer

='Nächste Abholung: ' + ((dayjs(items.Muellkalender_Filter_Abfuhrtermine_Result_0_Begin.state).diff(dayjs().startOf("day"), "days")) == 0 ? "Heute" : (dayjs(items.Muellkalender_Filter_Abfuhrtermine_Result_0_Begin.state).diff(dayjs().startOf("day"), "days")) == 1 ? "Morgen" : "In " + (dayjs(items.Muellkalender_Filter_Abfuhrtermine_Result_0_Begin.state).diff(dayjs().startOf("day"), "days")) + " Tagen")

Date items

"Restmüll","black","f7:trash","garbage_collection_blackbin"|"Bio-Tonne","green","f7:trash","garbage_collection_greenbin"|"Papier-Tonne","blue","f7:trash","garbage_collection_bluebin"

I guess I don’t really understand the data model yet, do I? Can someone help? That would be great

PS: I would have liked to post more pictures, but as a newbie I am only allowed to post 1 picture. If info is missing I like to supply.

DrRSatzteil · October 19, 2023, 11:29am

This looks good to me. Can you show your item definition please? Are these DateTime items and do they have values?