Garbage Block - Not working with google iCal Topic is solved

[YeGurl]

Hey guys,

I'm trying to implement the garbage block do my dashboard and I'm using the google iCal for this. Unfortunately it's not working and I don't know why. Any help appreciated.

Config

Code: Select all

config['garbage_company'] = 'googlecalendar ical';
config['garbage_icalurl'] = 'https://calendar.google.com/calendar/ical/***/basic.ics' (Using the private google cal link here)
config['garbage_maxitems'] = '12';
config['garbage_width'] = '12';

[code]columns[3] = {
  blocks : ['clock','garbage'],
  width: 4
}

The error messages from the console:

Code: Select all

bundle.js?t=5:303 jQuery.Deferred exception: Cannot read property 'dataHandler' of undefined TypeError: Cannot read property 'dataHandler' of undefined
    at loadDataForService (js/garbage.js:1002:37)
    at loadGarbage (js/garbage.js:38:3)
    at handleStringBlock (js/blocks.js:572:27)
    at getBlock (js/blocks.js:66:13)
    at buildScreens (js/main.js:619:15)
    at onLoad (js/main.js:345:3)
    at js/main.js:295:9
    at mightThrow (http://***5:8082/dist/bundle.js?t=5:303:28124)
    at F (http://***:8082/dist/bundle.js?t=5:303:28505) undefined
js/main.js:299 TypeError: Cannot read property 'dataHandler' of undefined
    at loadDataForService (js/garbage.js:1002)
    at loadGarbage (js/garbage.js:38)
    at handleStringBlock (js/blocks.js:572)
    at getBlock (js/blocks.js:66)
    at buildScreens (js/main.js:619)
    at onLoad (js/main.js:345)
    at js/main.js:295
    at mightThrow (bundle.js?t=5:303)
    at F (bundle.js?t=5:303)
    
    DevTools failed to load SourceMap: Could not load content for http://***:8082/ical.min.js.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE

Addition: The link works with any browser.

[Lokonli]

Use the following as company setting:

Code: Select all

config['garbage_company'] = 'ical';

[YeGurl]

Use the following as company setting:

Code: Select all

config['garbage_company'] = 'ical';

Thanks - That did the trick.

Then https://dashticz.readthedocs.io/en/mast ... rbage.html should be updated

[YeGurl]

Ahh, mapping seems still not working:

Config:

Code: Select all

config['garbage_mapping'] = {
     rest: ['Restabfall 2-Rad-Behaelter 02-woechentl.'],
     gft: ['Bioabfall 2-Rad-Behaelter 02-woechentl.'],
     pmd: ['Gelbe Saecke'],
     papier: ['Papierabfuhr']
};

config['garbage'] = {
     pmd: {kliko: 'orange', code: '#db5518', name: 'PMD', icon: 'img/garbage/kliko_orange.png'},
     gft: {kliko: 'green', code: '#375b23', name: 'GFT', icon: 'img/garbage/kliko_green.png'},
     rest: {kliko: 'grey', code: '#5e5d5c', name: 'Restafval', icon: 'img/garbage/kliko_grey.png'},
     papier: {kliko: 'blue', code: '#153477', name: 'Papier', icon: 'img/garbage/kliko_blue.png'}
};

Error

Code: Select all

DevTools failed to load SourceMap: Could not load content for http://192.168.233.195:8082/ical.min.js.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE

Any idea?

[Lokonli]

Use the following as company setting:

Code: Select all

config['garbage_company'] = 'ical';

Thanks - That did the trick.

Then https://dashticz.readthedocs.io/en/mast ... rbage.html should be updated

The documentation in the beta branch was updated already. I'll try to create a new master release next week.

[YeGurl]

Ok, I've updated to the beta and now I think my code is wrong. How to do the mapping with the new Syntax?

Code: Select all

config['garbage_mapping'] = {
     rest: ['Restabfall 2-Rad-Behaelter 02-woechentl.'],
     gft: ['Bioabfall 2-Rad-Behaelter 02-woechentl.'],
     pmd: ['Gelbe Saecke'],
     papier: ['Papierabfuhr']
};

config['mygarbage'] = {
     pmd: {kliko: 'orange', code: '#db5518', name: 'PMD', icon: 'img/garbage/kliko_orange.png'},
     gft: {kliko: 'green', code: '#375b23', name: 'GFT', icon: 'img/garbage/kliko_green.png'},
     rest: {kliko: 'grey', code: '#5e5d5c', name: 'Restafval', icon: 'img/garbage/kliko_grey.png'},
     papier: {kliko: 'blue', code: '#153477', name: 'Papier', icon: 'img/garbage/kliko_blue.png'}
};

blocks['mygarbage'] = {
  company: 'ical',
  icalurl: '***'
  maxitems: 4,
  width: 12,
  icon_use_colors: true
}

Thanks again!!

[lzwfkv]

Ok, I've updated to the beta and now I think my code is wrong. How to do the mapping with the new Syntax?

Code: Select all

config['garbage_mapping'] = {
     rest: ['Restabfall 2-Rad-Behaelter 02-woechentl.'],
     gft: ['Bioabfall 2-Rad-Behaelter 02-woechentl.'],
     pmd: ['Gelbe Saecke'],
     papier: ['Papierabfuhr']
};

config['mygarbage'] = {
     pmd: {kliko: 'orange', code: '#db5518', name: 'PMD', icon: 'img/garbage/kliko_orange.png'},
     gft: {kliko: 'green', code: '#375b23', name: 'GFT', icon: 'img/garbage/kliko_green.png'},
     rest: {kliko: 'grey', code: '#5e5d5c', name: 'Restafval', icon: 'img/garbage/kliko_grey.png'},
     papier: {kliko: 'blue', code: '#153477', name: 'Papier', icon: 'img/garbage/kliko_blue.png'}
};

blocks['mygarbage'] = {
  company: 'ical',
  icalurl: '***'
  maxitems: 4,
  width: 12,
  icon_use_colors: true
}

Thanks again!!

The mapping configuration looks correct, but you should change the line:
config['mygarbage'] = {
into this:
config['garbage'] = {

or you can move the whole garbage_mapping and garbage global settings into the "mygarbage" block as block's parameters ('mapping' and 'garbage'):

Code: Select all

blocks['mygarbage'] = {
  company: 'ical',
  icalurl: '***'
  maxitems: 4,
  width: 12,
  icon_use_colors: true,
  
  mapping: {
     rest: ['Restabfall 2-Rad-Behaelter 02-woechentl.'],
     gft: ['Bioabfall 2-Rad-Behaelter 02-woechentl.'],
     pmd: ['Gelbe Saecke'],
     papier: ['Papierabfuhr']
  },
  garbage: {
     pmd: {kliko: 'orange', code: '#db5518', name: 'PMD', icon: 'img/garbage/kliko_orange.png'},
     gft: {kliko: 'green', code: '#375b23', name: 'GFT', icon: 'img/garbage/kliko_green.png'},
     rest: {kliko: 'grey', code: '#5e5d5c', name: 'Restafval', icon: 'img/garbage/kliko_grey.png'},
     papier: {kliko: 'blue', code: '#153477', name: 'Papier', icon: 'img/garbage/kliko_blue.png'}
  },
  
}

[JacKok]

Today i update dashticz v3 to the latest version, and the garbage module stops working with Ical.

config['language'] = 'nl_NL';
config['calendarlanguage'] = 'nl_NL';
config['garbage_company'] = 'ical';
config['garbage_icalurl'] = 'https://calendar.google.com/calendar/ic ... ******.ics';
config['garbage_maxitems'] = '3';
config['garbage_width'] = '12';
config['garbage_hideicon'] = 0;
config['garbage_use_names'] = true;
config['garbage_use_colors'] = true;
config['garbage_icon_use_colors'] = true;
config['garbage_use_cors_prefix'] = true;
config['garbage'] = {
gft: {kliko: 'green', code: '#375b23', name: 'Groene Container', icon: 'img/garbage/kliko_green.png'},
pmd: {kliko: 'orange', code: '#db5518', name: 'Plastic Container', icon: 'img/garbage/kliko_orange.png'},
rest: {kliko: 'grey', code: '#5e5d5c', name: 'Grijze Container', icon: 'img/garbage/kliko_grey.png'},
papier: {kliko: 'blue', code: '#153477', name: 'Papier Container', icon: 'img/garbage/kliko_blue.png'},
};

It has always worked until the last update,any idea?

[Lokonli]

Today i update dashticz v3 to the latest version, and the garbage module stops working with Ical.

config['language'] = 'nl_NL';
config['calendarlanguage'] = 'nl_NL';
config['garbage_company'] = 'ical';
config['garbage_icalurl'] = 'https://calendar.google.com/calendar/ic ... ******.ics';
config['garbage_maxitems'] = '3';
config['garbage_width'] = '12';
config['garbage_hideicon'] = 0;
config['garbage_use_names'] = true;
config['garbage_use_colors'] = true;
config['garbage_icon_use_colors'] = true;
config['garbage_use_cors_prefix'] = true;
config['garbage'] = {
gft: {kliko: 'green', code: '#375b23', name: 'Groene Container', icon: 'img/garbage/kliko_green.png'},
pmd: {kliko: 'orange', code: '#db5518', name: 'Plastic Container', icon: 'img/garbage/kliko_orange.png'},
rest: {kliko: 'grey', code: '#5e5d5c', name: 'Grijze Container', icon: 'img/garbage/kliko_grey.png'},
papier: {kliko: 'blue', code: '#153477', name: 'Papier Container', icon: 'img/garbage/kliko_blue.png'},
};

It has always worked until the last update,any idea?

1)
Double check the url: If you open the url link in a browser do you then receive a ics file?

2)
Test with: config['garbage_use_cors_prefix'] = false;

3)
Save the ics file in your Dashticz folder.
change icalurl:
config['garbage_icalurl'] = './calendar.ics' //use the correct path for the ics file you saved
config['garbage_use_cors_prefix'] = false; //CORS proxy doesn't work for local files

4)
Back to your original configuration
Press F12 to open DevTools. In the network tab find the network request for your calendar (filter on calendar for instance)
What is the response code?
What is the response?

In the console tab:
Any error reported?

[JacKok]

1. Yes i receive the file.
2. not working
3. not working with local file
4. I receive the error, Laden...

With F12 i receive:
'<div class="update" style="display: none;">Error loading garbage data&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;undefined&nbsp;&nbsp;</div>

Edit 17:37 :
I change it back to orginal settings after try the above setings, and it start working again.

Edit 20:57 :
garbage css not working.

.trash .state div.trashtoday { font-size: 20px; font-weight: 3; margin-left: 29px; font-weight: bold; font-variant: small-caps;} /* Aangepaste tekstgrote afval app */
.trash .state div.trashtomorrow { font-size: 20px; font-weight: 3; margin-left: 29px; font-weight: bold; font-variant: small-caps;} /* Aangepaste tekstgrote afval app */

Any solution?

[JacKok]

Found the solution!

It was caused by dashticz update. For this you need to update the configuration.

Release note: https://dashticz.readthedocs.io/en/mast ... nt-changes
Solution: https://dashticz.readthedocs.io/en/mast ... ge-styling

I change Config.js
from:

config['language'] = 'nl_NL';
config['calendarlanguage'] = 'nl_NL';
config['garbage_company'] = 'ical';
config['garbage_icalurl'] = 'https://calendar.google.com/............';
config['garbage_maxitems'] = '3';
config['garbage_width'] = '12';
config['garbage_hideicon'] = 0;
config['garbage_use_names'] = true;
config['garbage_use_colors'] = true;
config['garbage_icon_use_colors'] = true;
config['garbage_use_cors_prefix'] = true;
config['garbage'] = {
gft: {kliko: 'green', code: '#375b23', name: 'Groene Container', icon: 'img/garbage/kliko_green.png'},
pmd: {kliko: 'orange', code: '#db5518', name: 'Plastic Container', icon: 'img/garbage/kliko_orange.png'},
rest: {kliko: 'grey', code: '#5e5d5c', name: 'Grijze Container', icon: 'img/garbage/kliko_grey.png'},
papier: {kliko: 'blue', code: '#153477', name: 'Papier Container', icon: 'img/garbage/kliko_blue.png'},

to

config['garbage_mapping'] = {
gft: {kliko: 'green', code: '#375b23', name: 'Groene Container', icon: 'img/garbage/kliko_green.png'},
pmd: {kliko: 'orange', code: '#db5518', name: 'Plastic Container', icon: 'img/garbage/kliko_orange.png'},
rest: {kliko: 'grey', code: '#5e5d5c', name: 'Restafval', icon: 'img/garbage/kliko_grey.png'},
papier: {kliko: 'blue', code: '#153477', name: 'Papier Container', icon: 'img/garbage/kliko_blue.png'},
};


blocks['mygarbage'] = {
company: 'ical',
icalurl: 'https://calendar.google.com/calendar/ical/.............',
maxdays: '4',
maxitems: 12,
width: 12,
use_names:'true',
use_colors:'true',
icon_use_colors:'true',
}

And Change custom.css

From:

.garbage .state div.trashtoday { font-size: 20px; font-weight: 3; margin-left: 29px; font-weight: bold; font-variant: small-caps;} /* Aangepaste tekstgrote afval app */
.garbage .state div.trashtomorrow { font-size: 20px; font-weight: 3; margin-left: 29px; font-weight: bold; font-variant: small-caps;} /* Aangepaste tekstgrote afval app */
.garbage .state div.trashrow {font-size: 30px;}

to:

/* This will give the block a red border if trash collection is collected for today*/
.trash.trashtoday {border-color: red}

/* This will give the block a green border if trash collection is collected for tomorrow*/
.trash.trashtomorrow {border-color: green}

/* This will reduce the opacity in case no trash is scheduled for today or tomorrow */
.trash:not(.trashtoday):not(.trashtomorrow) .dt_state {opacity: 0.6 !important;}

/* This will increase the font of the trash row that is scheduled for today */
.dt_state .trashtoday {font-size: 20px}


The next time I read the release changes first, that would have saved me a lot of work

[wkossen]

just a little 'side-question'. Is this garbage collector thing able to run separate from dashticz? i don't want dashticz, but i like the garbage collecting notifications/overviews.

[Lokonli]

just a little 'side-question'. Is this garbage collector thing able to run separate from dashticz? i don't want dashticz, but i like the garbage collecting notifications/overviews.

The garbage module is loosely coupled to Dashticz. It would not be too difficult to create a standalone component from it.

How would you like to use it? Just as a standalone webpage?
You still need a PHP enabled webserver. Would it be ok to use Domoticz as web server?

[wkossen]

The garbage module is loosely coupled to Dashticz. It would not be too difficult to create a standalone component from it.

How would you like to use it? Just as a standalone webpage?
You still need a PHP enabled webserver. Would it be ok to use Domoticz as web server?

Loosely coupled sounds good. I like that. I have no php enabled webserver on my domoticz pi, but i could add php.
i don't really know much about the domoticz webserver and how to enable php on it.