MMM-MyCommute

[jon11a]

@j.e.f.f Thanks for your quick response Jeff. I thought that might be the reason behind your decision to just use mins. It does make sense to me.

I think I will have a go at changing mine, will be a good little challenge for me as I’m learning more and more programming skills!

Thanks again and I look forward to see what you come up with next ;)

[j.e.f.f]

@jon11a Fair warning: this module was also the result of me wanting to change a thing or two to suit my own needs ;). Before I knew I had something completely new! It shares little resemblance with the module I originally forked from mrx-work-traffic.

Have fun. I can’t wait to see how it evolves!

-Jeff

[jon11a]

@j.e.f.f
Managed to do it and pretty pleased with myself :)

Here’s what it looks like:

I had to edit the css file to move the destination-label slightly as you mentioned:

margin-right: 70px;

I edited your formatTime function to format the time in hours and minutes or just minutes if it’s less than an hour in total.
Below is the code for that function with my bits added, I am sure it could be better but I think I did ok!

formatTime: function(time, timeInTraffic) {

    var timeEl = document.createElement("span");
    timeEl.classList.add("travel-time");
    if (timeInTraffic != null) {
      var minutes = Math.floor(Number(timeInTraffic) /60);
      var h = Math.floor(minutes /60);
      var m = Math.floor(minutes %60);
      if (h == 0) {
        timeEl.innerHTML = m + " min";
      } else {
        timeEl.innerHTML = h + "h " + m + " min";
      }
      var variance = timeInTraffic / time;
      if (this.config.colorCodeTravelTime) {
        if (variance > this.config.poorTimeThreshold) {
          timeEl.classList.add("status-poor");
        } else if (variance > this.config.moderateTimeThreshold) {
          timeEl.classList.add("status-moderate");
        } else {
          timeEl.classList.add("status-good");
        }
      }
    } else {
      var minutes = Math.floor(Number(time) /60);
      var h = Math.floor(minutes /60);
      var m = Math.floor(minutes %60);
      if (h == 0) {
        timeEl.innerHTML = m + " min";
      } else {
        timeEl.innerHTML = h + "h " + m + " min";
      }
      timeEl.classList.add("status-good");
    }

Thanks for your help Jeff, learned some more programming skills too so I’m happy! :)

[joela85]

startTime & endTime query.

I’ve tried setting these times up for the morning time before going to work and after testing it hides itself but it never re-appeared this morning?
Has anyone else had this issue?

module: 'MMM-MyCommute',
  position: 'bottom_right',
  config: {
    showHeader: true,
    headerText: 'Traffic',
    apikey: 'API_KEY_FROM_GOOGLE',
    origin: 'My Address',
    startTime: '06:00',
    endTime: '09:00',
    destinations: [
                   etc...

It would also be good if you could set it to run on Mon-Fri as well.
If not possible I could use the MMM-Scheduler to do this instead, it’s just a bit tidier in this module.

[Blackmirror]

This module is great, but it was nicer, to take starttime and endtime for the different destinations.
So, I will go to work in the morning, soIneed this only between 5.00 and 6.00 o’clock and if I will go to the salsa party I need this only in the evening.

[j.e.f.f]

@joela85 I just did a quick test on my laptop by changing the clock to mover forward a day at a time, and I had the module disappear and reappear consistently. I’ve set my config to startTime: '06:00' and endTime: '09:00' and I’ll let it run overnight to see if I can recreate your issue.

I also like the Mon-Fri idea, as well as the individual time windows per destination. Will work on them over the next few days.

[j.e.f.f]

@Blackmirror I ran a test overnight and my module came back on when it should have. But I did realize there is a fundamental problem with how I’ve architected the data pull. Are you using two instances of this module? If so I’m thinking that may be causing problems and possibly yours. I’m going to write an update soon, and I’ll have you try again.

[joela85]

I just went back into my config and noticed on one of the times I used a semicolon instead of the colon. I must have looked at that 20 times and not noticed it. Maybe just needed some fresh eyes on it. Hopefully that will sort it. I only have one instance of this module.

[j.e.f.f]

@joela85 ha! I should have thought to ask for your config. In any case, I’ve pushed an update that fixes the support for multiple instances of the module.

Of note is that you now configure the header in the standard way instead using the “headerText” and “showHeader” configurations. I thought I needed to do it this way when showing and hiding, but it turned out not be the case. So if your config looked like this before:

    {
      module: 'MMM-MyCommute',
      position: 'top_left',
      classes: 'default everyone', 
      config: {
        showHeader: true,
        headerText: 'Traffic',
        ...
      }
    }

change it to this:

   {
      module: 'MMM-MyCommute',
      position: 'top_left',
      header: 'Traffic',
      classes: 'default everyone', 
      config: {
        ...
      }
    }

If you don’t want a header, then just omit it.

Will be working on configs for limiting to Mon-Fri and windowing for individual destinations next.

[j.e.f.f]

MMM-MyCommute has been updated with some new configuration options

• You can now specify hideDays with a list of days during which the module is hidden. You specify an array of numbers, 0=Sunday, 6=Saturday. To hide it on weekends, for example, specify hideDays: [0,6].

• startTime, endTime, and hideDays parameters are now available as options for each individual destination. It should be noted that these parameters are superseded by the same ones specified in the main config. That means that if the main config parameters cause the module to be hidden as a whole, none of the destinations will be listed, regardless of their window settings.

Thanks for all your suggestions! This has evolved into a very robust module and I’ve learned quite a bit in the process.

Enjoy!
-Jeff

[bhepler]

@j.e.f.f said in MMM-MyCommute:

If you don’t want a header, then just omit it.

Aha. Very nice. If you get the chance, please update the README with this information. It changed on me and I couldn’t figure it out for a while.

[Blackmirror]

@j.e.f.f Nice, I will test it at the weekend.

[alberttwong]

Why isn’t this in the master list of modules at https://github.com/MichMich/MagicMirror/wiki/MagicMirror²-Modules

[j.e.f.f]

@alberttwong There are many MANY modules that aren’t in that list… just browse the Modules section of this forum and you’ll find lots.

I’m assuming the “master” list needs to be maintained by the author of MagicMirror, while any of us can post to the forum.

Does anyone know if the “master” list is even maintained anymore, and how we get it updated with the missing modules?

[yawns]

Just open the list, click on edit and add your modules to the list.
Amazing work with the commute module! Oh, I added the module developer badge to your profile

[j.e.f.f]

@yawns Thanks! I’ll add my modules to the list.

[lucallmon]

@j.e.f.f - loving the module. However, I’m trying to add a single trip with multiple stops and multiple methods of transportation. Here’s the situation:

I live in MD; I want to drive from my home to the nearest DC metro station, get on the metro to my work in downtown DC.

This uses driving first, then subway. The module sets a global ‘origin’ with multiple potential destinations. Essentially, how I see it, I need to change origins for each stop, thus, creating multiple module instances.

Is there a way to create multiple stops with differing origins?

[j.e.f.f]

@lucallmon the Google API supports waypoints, but I think all stops on the route need to be the same mode of transportation. I’m not even sure you can do what you want just using regular google maps.

I think using multiple instances is your only option here…

[brandongomez]

Hi all. New to the forum and the world of magic mirror. It’s awesome! Came across this module and have been trying to implement but think I’m getting stuck on the API key.

When I go to Google, I have web and web service. I am assuming this is web and not web service. Then when I choose web, I get more options; Maps JavaScript API, Maps Embed API, Street View, Static Maps, Places API JavaScript Library. I believe it’s Maps JavaScript API. Can anyone confirm that?

The module is not coming up on my board so I think my API might be wrong? Any help is appreciated. Thanks!

Update: I re-installed the module and it now loads but just shows the locations with a red “Error” next to each of them. My code is posted below if that helps. It also isn’t showing the “Traffic” header which is odd.

Another Update: Working now! I found the log files and it was the API. Got that fixed and now it’s working. Only thing that isn’t working is the title. For some reason the header doesn’t show. Any ideas?

{
                        module: 'MMM-MyCommute',
                        position: 'top_right',
                        config: {
                                showHeader: true,
                                headerText: 'Traffic',
                                apikey: 'xxxxxxxxx',
                                origin: '.........',
                                startTime: '00:00',
                                endTime: '23:59',
                                hideDays: [0,6],
                                destinations: [
                                        {
                                                destination: '..........',
                                                label: 'Emerson Parkside Academy',
                                                mode: 'driving',
                                                color: '#82E5AA'
                                        },
                                        {
                                                destination: 'Yosemite, CA',
                                                label: 'Yosemite',
                                                mode: 'driving',
                                                color: '#82E5AA'
                                        },
					{
                                                destination: '1313 Disneyland Dr, Anaheim, CA 92802',
                                                label: 'Disneyland',
                                                mode: 'driving',
                                                color: '#82E5AA'
                                        },
                                ]
                        }
                },

[j.e.f.f]

@brandongomez The header is not configured that way anymore. Use the standard way, like so:

{
    module: 'MMM-MyCommute',
    header: 'Traffic',      //-------- here
    position: 'top_right',
    config: {
        ...
    }
}

otherwise, glad to hear you got it working.

-Jeff