CFenner / MMM-LocalTransport

A module for the MagicMirror to display informations about local tranportation.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Aesthetics and design

skibol3k opened this issue · comments

I like your module but I got 2 problems with it.

  1. font or maybe div its squeezed in to small box with don't really match other modules, its there any chance that you will give me any idea where can change the size of the font?
    before
  2. Just in my option the text should be displayed in one line

i want to achieve something that looks like this:
perd

if you can point me at some direction where can i personalize the module.

Did you ever figure this out?

Hey guys, that's a good idea. Unfortunately I currently have very limited time to work on any non-work non-family topics :)
I'll try to have a look at it.

I had the same thought and I made some style changes to the js so that it looks more like the calendar module.
styledlocaltransportmodule

There are some more changes I made because I wanted to display walking times and some other things. I left the routes on two lines. I initially wanted to change it to a single line, but then figured it's much easier to read on two seperate lines, especially as I added more information on the route

The important part is changing the className
span.className = "normal bright";
and
span.className = "xsmall dimmed";
in the renderLeg and renderStep function
it initially wouldn't load the main css file for me and I copied it into the localtransport directory, then it worked. I am not sure that is necessary though.

In order to add the fade effect, I appended all the routes to a list, sorted that list by arrival time and then applied opacity to the list elements. I adapted that code from the calendar module:

      routeArray.sort(function(a, b) {
        return parseFloat(a.arrival) - parseFloat(b.arrival);
      });
      var e = 0;
      for(var dataKey in routeArray) {
        var routeData = routeArray[dataKey];
        var routeHtml = routeData.html;
        // Create fade effect. 
        if (this.config.fade && this.config.fadePoint < 1) { 
           if (this.config.fadePoint < 0) { 
               this.config.fadePoint = 0; 
           } 
           var startingPoint = Nrs * this.config.fadePoint; 
           var steps = Nrs - startingPoint; 
           if (e >= startingPoint) { 
               var currentStep = e - startingPoint; 
               routeHtml.style.opacity = 1 - (1 / steps * currentStep);
           }
        } 
        ul.appendChild(routeHtml);
        e += 1;
      }
      wrapper.appendChild(ul);

happy to post the full code once it's cleaned up :-)

Looks good, would be nice to have a "compact" mode where the width is less than 250px.

I have a configuration variable that toggles walking on or off - same for the stations. So one can have a compact mode...
I cleaned the code, forked your project and uploaded it. (Obviously it's an all in one commit now)
Still need to figure out how I can allow you to merge the fork back into your project. (Sorry, I am new to GitHub)

@GHLasse , is there a way i can change script to pull bus schedule now rather than an hour later? All the timings i am getting are almost an hour later. What is the "configuration variable" to show/hide walking timings? Good fork btw. Thank you

@Rian9771 not sure why you would get the timings to be an hour later. Google should accept the key departure_time=now. Works fine for me. I actually never changed that part of the code.
Maybe make sure that you have your timezone set correctly? Also make sure to test this during the day, when there are busses going more often than once an hour. Lastly: Google doesn't suggest any busses you can't reach anymore.
That's all I can think of. Hope it helps :-)

@GHLasse , i have looked at the config file/scripts but i do not see a place where i could define a timezone. Where would i see this? I have not changed anything else. No matter what i use for "origin" or "destination", all timings are close to an hour ahead. Super Weird!

@Rian9771: I meant the timezone in your raspberry pi. But check out the line
params += '&departure_time=now';
requesting google to deal with the departure time.

Can you post your full configuration? That way I can try to reproduce the error...

@GHLasse , the TZ on the pi is setup correctly. Other modules that use TZ values are working fine. I remember seeing "params += '&departure_time=now';" on the config file and i have not changed it and i believe it is still set to "now" as i would like to keep getting new arrival times. I was browsing google API documentation and did notice a way to pass timezone values but i have not been able to figure that out yet. Would be awesome if you could point me to the right direction. Thanks.

Hey :-)

thanks for your work - i notice the notification doesnt work when the module is active - and i cant found the problem

do you have an idea ?

thanks

@tiduspup is this related to this issue or rather a new issue?
Can you explain what exactly the problem is in a bit more detail? I used notifications to debug other modules I created (Note to myself: I should start uploading them to GitHub) and it worked fine. In fact another module displayed a lot of notifications on my MM the other day.