Recycling Widget in HABPanel

Hi everyone.

I would like to insert in HABPanel an indication on the daily separate collection.
Where I live we have days when we collect plastic, glass, paper, etc.
They provided us with a calendar, I would like to remove the leaflet from the fridge and make it become inforamtic.

With openHab I’m doing nice things, but frankly I have no idea how to get started.

I would like to insert a dummy widget that takes the name and color based on the day.

For example:
Monday: Organic garbage, Brown
Tuesday: Glass, Green
Wednesday Organic Junk, Brown
Thursday: Paper, Blue
etc …

Working with transformations, could I do it or should I write a JSON custom widget?

Thank you all!!!

I don’t use HABPanel right now so can’t help much. But I’ve moved this to the HABPanel category where hopefully it will get more attention.

ok, thanks a lot, hopefully good!

working on that one right now … )

1 Like

hello, how did you do it?

I personally don’t use Habpanel but I’ve made what you are trying to do in the Basic UI.
Maybe you can use it also in HabPanel creating your own icon/images.

Surely there is a better way, but here’s what I did:

I created a string item named TextRecycling with a custom category named recycling, then I created a rule updating that item with the number of the current day of the week every time LocalTime_Date (item from NTP binding) changes.

Here’s the rule :

rule "Update Recycling"


	Item LocalTime_Date changed



I have a file that transforms the number in the correct string of what is due on that day…here’s my map file:

1=Plastic and Organic
2=Misc junk
4=Glass and Organic
5=Nothing to trash
6=Nothing to trash
7=Nothing to trash
-=Not inizialized

Then I crafted 8 svg images to match the day so that the TextRecycling item changes its icon dynamically:


You can then show the item in HabPanel with the icon/images you created.
I’m attaching a sample of my icons (sorry the text is in italian) but you can create your own.

Hope it helps

I have not finished this pannel yet but I will do it with a very simple trick:
in /static I put 5 png for all days and in items I create a single string variable will hold url of the curent days trash type. With a rule similar to above I will change the reference to the image in variable
The panel is a simple template widget that does display an image of held at that moment in the variable
Will post all the code when done. for now I’m crafting the icons

Thanks for the tips, I will apply them immediately.
Ciao ciao!

P. S .: good luck the writing in Italian, I am too!

If you 're interested in my svg I can share them…but maybe for the Habpanel is better some wider images like @xsherlock 's one

Thanks, gladly! I made mine, if you want I can share it too. Always better to have more choices available!!

I have a simmilar problem, but we dont have fixed days every week.
Its more like

  • Week1, Wednsday general waste,
  • Week2, nothing
  • Week3, Thuesday recycling, wednesday paper
  • Week 4, nothing
  • week 5, like week1…
    In addition there are sometimes movements +/- one day due to public holidays in a week.
    So was thinking that maybe I need to create a special Google Calendar for this?
    Or are there other ideas how to achieve this?


Wow. You are quite messed up with recycling! Probably unlike us you have bigger baskets. Here, the plastic should be thrown once a week and we have a 50cm wide and 1mt high bust that fills up to burst!

Indeed, being a non-linear management, I would work with Google Calendar.
I would create a text item and with google calendar I would send the text using the event schedule.
I would then associate custom icons using the text sent.

@maddmax1976 : I’m attaching all my svg, you can easily change or delete the text with a software like inkscape or divide the double ones.

@HolgerL: It’s really a mess! the only other thing I can think of is that you create 3 different string item with day of the week, month, and week of the month, and than you can prepare a long and complex “if” statement…but it’s really hard to mantain…maybe sticking to Google Calendar is the best choice .

My icons:


I’m doing something based upon the following:

Nice to see something similar in HABPanel, hopefully the two concepts can be combined quite nicely.

here are mine.

Great job Confused!


recycling recycling-1 recycling-2 recycling-3 recycling-4 recycling-5 recycling-6 recycling-7

some are double because they are named according to the calendar, and on the PC I didn’t have the preview of the file… :grin:

Here’s my icons:

wheelie_bin_black wheelie_bin_blue wheelie_bin_brown wheelie_bin_green wheelie_bin_red wheelie_bin_yellow

I’ll sort out the SVG icons in a bit, they don’t want to attach properly.

Thanks for your contribution Confused.

I modified my post, I realized that the images had a strange format and were not centered in the widget, you can re-download them.


So my schedule is weekly and the rule to launch it looks the folowing:

rule "Trash icon update"
Time cron "0 0 11 * * ?" 
logDebug("OTHER", "cron timed trash icon update")
	val day_of_week = now.getDayOfWeek
	switch day_of_week.toString {
		case "1" : {postUpdate(trash_icon_url2,"")}
		case "2" : {postUpdate(trash_icon_url2,"")}
		case "3" : {postUpdate(trash_icon_url2,"")}
		case "4" : {postUpdate(trash_icon_url2,"")}
		case "5" : {postUpdate(trash_icon_url2,"")}
		case "6" : {postUpdate(trash_icon_url2,"")}
		case "7" : {postUpdate(trash_icon_url2,"")}
	logDebug("OTHER", "trash current url: " + trash_icon_url2)

and then the template widget in a panel is as simple as :

<img ng-src="{{itemValue('trash_icon_url2')}}" 
     style="margin-top: 0px;
            margin-left: 3px;
            margin-right: 0px;
            border-radius: 10px;
            border: 1px;
            border-style: solid;
            border-color: rgb(100,100,100) ;
            width: 487px;
            height:214px" />

Does the job for me, to the next task :slight_smile: … solar-grid-battery energy flow graph …