@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.