@Sean,
This is what I want. Thanx for the quick reply!

Can you tell me what is the difference in the code?

This was an example from the MMM-UFO where information is rotated.
Because I don’t need it, I’m going to cleanup.

@Mykle1, @sdetweil ,
Looking at the website from the API Prayer Times API, the result are all displayed in JSON

The API has several endpoints to assist developers. Note that all the endpoints return JSON and are available over http and https.

I’ve looked at the code again and it should be MPT.Fajr.
I’ve made the module public on github, so you can take a look if you like.
MMM-MyPrayerTime

Meanwhile I’m trying to solve it…

@Mykle1 I’m using MMM-UFO as example and trying to figure out. I’m getting somewhere but… The data is retrieved through the api and this is the result:

Asr: "16:01"
Dhuhr: "12:46"
Fajr: "05:12"
Imsak: "05:02"
Isha: "20:21"
Maghrib: "18:49"
Midnight: "00:46"
Sunrise: "06:44"
Sunset: "18:49"

The module is generated on the MM

But as you can see, it cannot read or display the data in the correct way.
This is the code that I use to get the data from the resultset.

// Fajr from data
var mptFajr = document.createElement("div");
mptFajr.classList.add("small", "bright", "fajr");
mptFajr.innerHTML = "Fajr : " + MPT.Fajr;
wrapper.appendChild(mptFajr);

I can’t figure out what the problem is. It seems have something to do with the time-string that is returned. But whatever I try, no luck. Any idea?

Oke, got it. I had to add some console.log settings…:flushed_face:

I used the example from MMM-UFO, and started the module.
How can I check if there is data from the API URL?

@Mykle1 @Sean
Both thanks for the quick reply.
For now I’ve information that I can use to start.
If there are any questions, I know where to be ;-)

Thanks for the reply.
I’ve an api for getting the Prayer Times.

http://api.aladhan.com/v1/timings/19-03-2019?latitude=51.508515&longitude=-0.1254872&method=2

In this case there a 4 parameters: date, latitude, longitude and method.
The result is a json file

{"code":200,"status":"OK","data":{"timings":{"Fajr":"04:34","Sunrise":"06:06","Dhuhr":"12:08","Asr":"15:23","Sunset":"18:11","Maghrib":"18:11","Isha":"19:44","Imsak":"04:24","Midnight":"00:09"},"date":{"readable":"19 Mar 2019","timestamp":"1552953600","hijri":{"date":"12-07-1440","format":"DD-MM-YYYY","day":"12","weekday":{"en":"Al Thalaata","ar":"\u0627\u0644\u062b\u0644\u0627\u062b\u0627\u0621"},"month":{"number":7,"en":"Rajab","ar":"\u0631\u064e\u062c\u064e\u0628"},"year":"1440","designation":{"abbreviated":"AH","expanded":"Anno Hegirae"},"holidays":[]},"gregorian":{"date":"19-03-2019","format":"DD-MM-YYYY","day":"19","weekday":{"en":"Tuesday"},"month":{"number":3,"en":"March"},"year":"2019","designation":{"abbreviated":"AD","expanded":"Anno Domini"}}},"meta":{"latitude":51.508515,"longitude":-0.1254872,"timezone":"Europe\/London","method":{"id":2,"name":"Islamic Society of North America (ISNA)","params":{"Fajr":15,"Isha":15}},"latitudeAdjustmentMethod":"ANGLE_BASED","midnightMode":"STANDARD","school":"STANDARD","offset":{"Imsak":0,"Fajr":0,"Sunrise":0,"Dhuhr":0,"Asr":0,"Maghrib":0,"Sunset":0,"Isha":0,"Midnight":0}}}}

I like to filter on the first object “timings” (Fajr until Midnight) and present this information in a table on the Mirror (HTML layout comes later)

I’ve been looking in other modules and trying to learn, but some use node_helper, some don’t and I’m a littlebit stuck right now.

Hi all,
Let me start saying, I’m a new MM enthousiast. I’ve several ideas for a new MM Module, but I’m not a programmer. I can read the javascript en mostly I understand how it works, but writing my own is going to be the first time.

I like to build one from scratch and started with Head first developing mm module for extreme beginners.

Now I’m trying to go further and in particular using an API to:

• Get data from a site (in JSON format)
• Extract the correct data from the JSON result
• Display the extracted data nicely in de module

I’m reading Javascript for Dummies, I’ve been looking on the forum and looking into existing modules, but I’m not getting there. The question is:

Is there a template or are there sites/instructions on how to get started with what I like to do so, I can get started and figure it out (with or without the awesome support of this forum? I hope to hear from somebody!

I didn’t create a new calendar, only for testing purposes. After finding out what the possible issue was, I’ve unchecked and thereafter checked “make public” and copied the new URL.

Great it works for you too!! :thumbs_up_medium-light_skin_tone:

I had the same issue from last Monday. I was using the calendar for about 1 month (newby MagicMirror). I checked everything and as it seems nothing had changed, but get keeping “No upcoming events”.

Then I created a new calendar and made it public. What I saw is that the URL was quite different from the one I used. I see the same with you.

old: webcal://p01-calendarws.icloud.com/ca/subscribe/1/
new:webcal://p40-calendars.icloud.com/published/2/

I openend my calendar on my Macbook and set the published option off for my calendar. Than I put it back on and got a new URL with the same ‘new’ format. I put this in my MagicMirror config and everything works again (now for 1 week already).

I hope this is the solution for your problem also…Succes!

@onkelbobby, seems nice for my next mirror ;-)
How let you this interact with the Pi and MagicMirror? Is there a module, or do you use a Python script?

I still have to paint the frame, thinking of a kind of ‘white-wash’ so you keep seeing the wood grains. Maybe it’s less ‘obvious’.
But you know and I know, but most visitors I’ve had didn’t even see it or looking for it 🤔

I made a 8 mm hole on the backside and a 2 mm hole on the frontside.
Removed the cap from the motion sensor and placed it in the 8 mm hole.
Works great and you can hardly see the 2 mm hole.

Backside:

Frontside:

I have the spymirror. If you click on the word Pyrasied, you see what I ordered (As I said in the bullet 😉)

After being infected with the Magic Mirror virus, I’ve decided to build one.
It’s my first attempt with an 24" monitor. The frame is prepared for an 27" monitor, but because it’s my first mirror I first started with an old 24".

Used parts:

• Raspberry Pi 3B+
• 8GB SD Card
• PIR Infrared Motion Sensor (HC-SR501)
• Spymirror Silver (45cm x 65 cm) – Pyrasied
• HP 24″ LCD Scherm
• 2x surface-mounted outlet
• Wood – inner frame
• Wood – outer frame

Modules:

• Clock
• MMM-MyGarbage
• MMM-DarkSkyForecast
• MMM-MyCalendar
• MMM-Remote-Control
• MMM-RPI-LED

Currently this is not possible, because the icons are embedded in file ‘garbage_icons.svg’. You can create you’re own garbage_icons.svg file. Keep in mind that the icons are 24x24 pixels.

@pugsly
This is possible, follow the next steps.

Go to the MagicMirror CSS directory

cd ~\MagicMirror\css\

Edit (or create) the custom.css file

sudo nano custom.css

Add the next section at the bottom of the custom.css file

/* MMM-MyGarbage CSS Modification */
.MMM-MyGarbage .garbage-container .garbage-icon-container .garbage-icon.greenbin {
  fill: #00A651;
}
.MMM-MyGarbage .garbage-container .garbage-icon-container .garbage-icon.garbagebin {
  fill: #787878;
}
.MMM-MyGarbage .garbage-container .garbage-icon-container .garbage-icon.paperbin {
  fill: #0059ff;
}
/* End MMM-MyGarbage */

Now you can modify the colors for your Garbage Bins. In your case, you would like the grey bin to be yellow. The code should be:

.MMM-MyGarbage .garbage-container .garbage-icon-container .garbage-icon.garbagebin {
  fill: #fffa00;
}

Save and quit the nano editor and restart your MagicMirror.
Now you should have a yellow trashbin instead of a grey trashbin.
Succes!

MMM-MyGarbage

This a module for MagicMirror².
This displays the schedule for your Garbage pickup. It supports multiple types of garbage bins.
You can show the schedule using a CSV file (garbage_schedule.csv) of by using an ical URL.

Installation

Clone this repository in your modules folder, and install dependencies:

cd ~/MagicMirror/modules 
git clone https://github.com/htilburgs/MMM-MyGarbage.git
cd MMM-MyGarbage
npm install 

Update

When you need to update this module:

cd ~/MagicMirror/modules/MMM-MyGarbage
git pull
npm install

Configuration

Go to the MagicMirror/config directory and edit the config.js file.
Add the module to your modules array in your config.js.

{
        module: 'MMM-MyGarbage',
        position: 'top_right',
        header: "My Garbage Calendar",
        disabled: false,
        config: {
                weeksToDisplay: 4,
                limitTo: 99,
                dateFormat: "dddd LL",
                alert: true,
                alertThreshold: 5, 
                fade:true,
                fadePoint: 0.25,
                dataSource: "csv",                          // csv (schedule_garbage.csv | ical (put URL in icalUrl)
                icalUrl: "PLACE_HERE_PUBLIC_ICAL_URL",      // only used if dataSource is "ical"
                debug: false,                               // Only set on true for debugging 
                binColors: {                                // Define custom Bin Colors and match with the Bin Names
                            "GreenBin" : "#00A651",
                            "PaperBin" : "#0059FF",
                            "GarbageBin" : "#787878",
                            "PMDBin" : "#FFFF00",
                            "OtherBin" : "#B87333"
                            },
                }
},

Module configuration

Here is the documentation of options for the modules configuration:

Option	Description
weeksToDisplay	How many weeks into the future to show collection dates. Number Default: 2
limitTo	Limit the display to the spcified number of pickups Number Default: 99
dateFormat	Format to use for the date of events Default: dddd D MMMM (e.g. January 18) Possible values: See https://momentjs.com/
alert	Show alert, if remaining entries in CSV file fall under threshold Default: false Possible values: true or false
alertThreshold	(optional) Threshold entries left in CSV file Number Default: 5
fade	Fade the future events to black. (Gradient). Default: true <Possible values: true or false
fadePoint	Where to start fade Default: 0.25 Posibble values: Between 0 (top of the list) and 1 (bottom of list)
dataSource	Select the datasource you’re using Default: csv Possible values: csv or ical
icalUrl	Fill in your (public) ical URL Only use in combination with dataSource: ical
debug	For debugging the module when failure or testing Default: false Possible values: false or true
binColors	Define your own Bin Colors - Bin names have to match you’re names from CSV. When using ical match also icalBinMap

Creating and using your Garbage Schedule for use with dataSource CSV

You can use this module by creating your own Garbage Schedule file with the name garbage_schedule.csv

An example file garbage_schedule.csv is added.

Create a CSV based on the following template:

WeekStarting,GreenBin,GarbageBin,PaperBin,PMDBin,OtherBin
03/07/18,1,0,1,0,0
03/14/18,1,1,1,0,0
03/21/18,1,0,1,0,1
03/28/18,1,1,1,1,0

Default there are 5 bins defined. If you need more garbage bins, simply add an extra column in the garbage_schedule.csv file, with the name of the extra bin. If you only need 3, then simply remove them. When the module is started, it reads the names and will try them to match to the binColors.
As of v3.0.0 of the module you can add custom names in the CSV of rename current names. As long as you change your binColors in config.js with the correspending names, you will see the information with the correct collors.

Remark
Any Bin name that is not or not correct matched with the name in binColors, will be shown in the color PURPLE

Add lines for each garbage pickup date as needed.
The date format needs to be specified as MM/DD/YY (e.g.: 05/28/18 for 28-May-2018)
Colors can be defined in the config.js file:

• Legacy Values:
  • GreenBin (defaults to #00A651)
  • GarbageBin (defaults to #787878)
  • PaperBin (defaults to #0059ff)
  • PMDBin (defaults to #ffff00)
  • OtherBin (defaults to #F542CE)
• Any CSS color string (red, chocolate, cornflowerblue, etc…)
• Any HEX-Color (#FF0000, #8c8c8c, etc)
• Any rgb, rgba or hsl value if in double quotes (“rgb(128,65,98)”, “rgba(134,56,32,0.5)”, “hsl(0, 100%, 50%)”, etc.)

The following is VERY important:

• The CSV file must be delimited using commas
• The date format must to be specified as MM/DD/YY (e.g.: 05/28/18 for 28-May-2018)
• The remaining fields of each line specify whether the particular waste product is scheduled to be picked up on the given date. A value of 0 means no pick up. A value of ANYTHING ELSE means the product will be picked up. Using the first pick up date entry in the template above, 1,0,1,0,0 means that green and blue will be picked up on that date, while the others will not be picked up.

Save the file as garbage_schedule.csv in the MMM-MyGarbage directory and restart Magic Mirror²

License

The MIT License (MIT)

Copyright © 2019-2026 Harm Tilburgs

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

The software is provided “as is”, without warranty of any kind, express or implied, including but not limited to the warranties of merchantability, fitness for a particular purpose and noninfringement. In no event shall the authors or copyright holders be liable for any claim, damages or other liability, whether in an action of contract, tort or otherwise, arising from, out of or in connection with the software or the use or other dealings in the software.

Note

The original script is from Jeff Clarke MMM-MyWastePickup and only for the Toronto area.
Now it has become a general script, to use in all areas all over the world.

Versions

v3.0.0 (07-03-2026)

• Add support for flexible numbers of Bins
• Bin names are automaticly detected
• Match bin colors to bin names for csv and ical
• Error message instead of “Loading…” when the CSV or ICAL is in wrong format
• Better debug information in console and in module
• Clean up code

v2.1.2 (02-03-2026)

• Update for rare AxiosError [AggregateError] when loading iCal

v2.1.1 (17-02-2026)

• Bugfix for the alertTreshold

v2.1.0 (16-02-2026)

• Update for CSV file and alertThreshold (add to config.js!)

v2.0.1 (2025)

• Update for Streamline date parsing and allow for recurring events in ical (thx to @thepagan)

v2.0.0 (2025)

• Changed for use with CSV or with iCal Calendar

v1.0.0 (Initial Release 2019)