Hi there…looks great! What module did you use for the countdown?

which ones are you trying? With the latest version v5 icons work, too.

Really cool idea. I’d just go with an accelerometer
sorry just found that with a really quick google search on a German site, but you’ll get what I mean :)

https://eckstein-shop.de/GY-346-Accelerometer-3-Achsen-Beschleunigungssensor-ADXL346-fuer-Arduino-Raspberry-Pi?curr=EUR&gclid=CjwKCAjwmq3kBRB_EiwAJkNDpx2x0CsKx1VTSGcU_NeQNqVU1vRg7enu1Nt0FTXsmRLgGDGBaxgYFxoChuMQAvD_BwE

Hi everybody,

sorry for the late reply. Haven’t been here much in the last couple of weeks. Here’s my config:

    {
        module: 'MMM-MyCommute',
        position: 'bottom_right',
        header: 'Traffic',
        classes: 'default everyone',
        config: {
            apikey: 'your API Key',
            origin: 'Marienplatz 1, 80331 München',
            startTime: '05:00',
            endTime: '10:00',
            hideDays: [0, 6],
            destinations: [
                {
                    destination: 'Belgradstraße 13, 80796 München',
                    label: 'Good Food',
                    mode: 'driving',
                    color: '#82E5AA'
                }
            ]
        }
    },

quick question on this issue…it the function already released? I can’t get it to work :( My config is:

 {
            module: "calendar",
            colored: true,
            header: "Termine",
            position: "top_left",
            config: {
                displaySymbol: true,
                timeFormat: "absolute",
                getRelative: "0",
                urgency: "0",
                dateFormat: "DD.MM HH:mm",
                FullDayEventDateFormat: "DD.MM",
                fetchInterval: "5000",
                fade: false,
                calendars: [
                    {
                        symbol: "mars",
                        color: '#f70000',
                         url: "https://calendar.google.com/calendar...",
                    },
                    {
                        symbol: "venus",
                        color: '#f70000',
                        url: "https://calendar.google.com/calendar...",
                    },
                    {
                        symbol: "clock",
                        color: '#f70000',
                        url: "https://calendar.google.com/calendar...",
                    },
                    {
                        symbol: "globe",
                        color: '#f70000',                        
                        url: "https://calendar.google.com/calendar...",
                    },
                    {
                        symbol: "cocktail",
                        color: '#f70000',
                        url: "https://calendar.google.com/calendar...",
                    }
                ]
            }
        },

@robiv8 yeah it does work for me perfectly. Can send you my latest config if you want?

@ramez
Hi Ramez,

1. thanks for the hint towards MediaElement. I might actually look into that.
2. I’ll try MediaElement first…
3. At the moment I’m actually quite happy with the lean text-based skin :)
4. Yeah I was thinking about some sort of library for the next version, too. I could use the longpress of the On/Off Button to get into the menu and Vol+/Vol- to navigate through the menu (Continent -> Country -> Station). Ideally the Library is available online and autoupdates.

what exactly do you mean? How should the buttons be “pressed”? Touchscreen? Mouse?
What do you want to do with the buttons?

That’s a great idea. I’d roughly propose the following workflow:

• MyCalendar sends a notification with an array of events with defined addresses in the payload
• My Commute displays next 1/2/3 events (configurable)
• in the config you should be able to configure which travel modes you want to have displayed (transport, driving, walking,…). Maybe even with thresholds (walking <2km, transport: >1km, <10km, driving >8km, …)

@lazyboy0284 Thanks. I could not find anything about it. Looks like I need go to back to school and take the course “How to use forum search” once more. Thanks for pointing me that way. I’ll use another symbol for now and wait until the next MM version with the fix is released.

@strawberry-3-141, @sdetweil
Thanks for your help and pointing me into the right directions. In the last 2 weeks I made massive steps forward with my first ever module. You’ve helped to get my head round havascript and to understand it better. Thanks!

End result can be found here.

I wanted to use the symbol “futbol” in one of my calendars but for some reason there is no symbol displayed. I found out that this is the case for quite a few others, too (volleyball-ball, football-ball, quidditch).

Is there anything I am doing wrong?
–> Symbol source

            module: "calendar",
            header: "FC Bayern",
            position: "top_left",
            config: {
                displaySymbol: true,
                maximumEntries: "4",
                timeFormat: "absolute",
                getRelative: "0",
                urgency: "0",
                dateFormat: "DD.MM HH:mm",
                FullDayEventDateFormat: "DD.MM",
                fetchInterval: "5000",
                calendars: [
                    {
                        symbol: "futbol",
                        url: "https://calendar.google.com/calendar/ical/q0uc47v90gltqpojkk76t9mk30%40group.calendar.google.com/public/basic.ics",
                    },
                ]
            }
        },

I wanted to put my Magic Mirror in the bathroom and thought it might be handy to also having an internetradio included in the mirror. As there was no module, I’ve used the chance - being a javascript newibe - dug into it and created my very first own MagicMirror² module.

It’s quite simple to use. You only need a module that controls the webradio. Stations can be switched (Prev/Next), Volume can be controlled (Up/Down) and playback can be paused or resumed. I’ve used MMM-Buttons myself to control my instance of the Webradio.

–> Download from Github

Hi there,

first of all: Great module. You’ve just got a quite major issue in your documentation 😉 In your wiki (https://github.com/shbatm/MMM-KeyBindings/wiki/Integration-into-Other-Modules) you talk about “KeyCode” being a part of the payload.

I wanted to use that in my module to determine which keyboard key has been pressed and react accordingly. More specificly I was intrested in the arrow-keys.

First there was no reaction at all on any of the key presses. I could see that the press itself was recognized but when logging the payload “KeyCode” was always set to “undefined”. It cost me about 3hrs of my life only to find out that in your code you use “KeyName” but in the documentation you refer to “KeyCode”. I was surprised to be the first one to notice it but obiously I am as otherwise somebody else would have flagged it up already 😉

Right…I’ve downloaded jPlayer now locally and I’m loading the scripts locally. Now the errors are gone but it looks like I’ve made a mistake before when loading them online.

Anyway, the errors are now gone but there is still no sound output. As mentioned initially I am quite new to developing a module so I’m really sorry if things seem obvious for you…but belive me, they’re not so obvious for me. But I’m very keen to learn!

The jPlayer script I’ve wrote myself looks like this:

$(document).ready(function() {

    var stream = { mp3: "http://media-ice.musicradio.com/CapitalSouthCoastMP3" },
    ready = false;

    $("#jquery_jplayer_1").jPlayer({
        ready: function(event) {
		ready = true;
		$(this).jPlayer("setMedia", stream);
		$(this).jPlayer("play", 1);
        },

	pause: function() {
		$(this).jPlayer("clearMedia");
	},

	error: function(event) {
		if(ready && event.jPlayer.error.type ===$.jPlayer.error.URL_NOT_SET) {
			// Setup the media stream again and play it.
			$(this).jPlayer("setMedia", stream).jPlayer("play");
		}
	},

        swfPath: "http://jplayer.org/latest/dist/jplayer",
        supplied: "mp3",
	preload: "none",
	volume: 1,	
	wmode: "window",
	useStateClassSkin: true,
	autoBlur: false,
	keyEnabled: true,

    });
});   

@aries1984 said in Issues with jplayer integration:

jplayer

still stuck with the same errors. Replacing ‘$’ with ‘jQuery’ throws the same error saying “jQuery is not defined”.
Scripts are definitely loaded in the correct order, too.

What really confuses me is that the simple HTML page works perfectly. Any other thoughts? I’ve searched the web for the last 2hrs and could not find a solution, yet…will keep looking, though.

@sdetweil
jep…got it now via the getScripts method. They are now even loaded in the right order: first jQuery, then jPlayer, then my own script -> leads me to exactly the same errors in the console window.

@sdetweil said in Issues with jplayer integration:

@aries1984 I would open the debug console and see if there are any errors.

Ctril-shift-i (letter i)

Select the console table

Also look at the scripts tab to make sure things are loaded like u expect

Thanks for your hint. I do have indeed errors:

jplayer.org/latest/dist/jplayer/jquery.jplayer.min.js:2 Uncaught TypeError: Cannot read property 'fn' of undefined
  at jplayer.org/latest/dist/jplayer/jquery.jplayer.min.js:2    
  at jplayer.org/latest/dist/jplayer/jquery.jplayer.min.js:2    
  at jplayer.org/latest/dist/jplayer/jquery.jplayer.min.js:2

:8080/modules/MMM_Webradio/jPlayer.js:1 Uncaught ReferenceError: $ is not defined    
  at :8080/modules/MMM_Webradio/jPlayer.js:1

as I said…it is really strange that exactly the same DOM works in a plain HTML-file perfectly.

@strawberry-3-141 said in Issues with jplayer integration:

@aries1984 In general adding a script in the getDom function isn’t good. It should be done in getScripts similar too:

Module.register("MMM_Webradio", {
	defaults: {
		text: "Playing Radio!"
	},

        getScripts: function() {
                return [
                        "http://code.jquery.com/jquery-1.11.1.min.js",
                        "http://jplayer.org/latest/dist/jplayer/jquery.jplayer.min.js",
                        this.file("jPlayer.js");
                ];
        },

	getDom: function() {
		var wrapper = document.createElement("div");

		var displayedText = document.createElement("div");
		displayedText.innerHTML = this.config.text;
		displayedText.setAttribute("id", "jquery_jplayer_1");
		displayedText.setAttribute("class", "jp-jplayer");
		wrapper.appendChild(displayedText);

		return wrapper;
	}
});

Be aware of that you most likely need to init your player after the getdom function was executed. Otherwise the player will not find your wrapper. Also as soon as the module gets rerendered, The player most likely need to reinitialized.

Thanks for that, too. I’ve tried it in the getScripts function already as well. That was my first try. But the 2 scipts need to be loaded before the main script gets excecuted. But I’ll give it another shot.