Posts made by EllyJ

The url scraped from a music player always produces a broken image icon (middle of pic).
If I input the url in manually and then run the module it will display the image (see comment at the top of the pic).
If I don’t put in a url I get an outline with no broken image icon.
I can output the url as a string on the screen (middle of pic and code)
I can check the url from the music players web interface (bottom of pic).

Could someone please tell me how to the url into image.src from data[‘albumart’]. This has been bugging me for 2 full days now.

        var data = this.volumioData;
        var item = document.createElement('div');
        var image = document.createElement('img');
        image.src = data['albumart']; //  If I replace this with the url it will display the image
        image.height = 450;
        image.width = 450;
        image.className = 'image';
        item.className = 'mmm-volumio-item';
        item.innerHTML = '<div>' + data['artist'] + ' • ' + data['album'] +
                         '</div>' + '<div>' + data['albumart'] + '</div>';//I put 'albumart' here to prove I had the url
        wrapper.appendChild(item);
        wrapper.appendChild(image);
        return wrapper;
    }
});

I am modifying MMM-Volumio to show the Album Covers what is playing. I can’t program in Java but have done a tiny bit in C++,Pascal,Visual Basic and Python. I am sorry if my code is really bad (all 4 lines of it that took me 2 days), it is working except for the url problem. I will also do a better layout when it is working.

I can’t make this work. I can display the album, artist and title but not albumart.
I have tried the code used by @stacyweb with no luck. I have displayed the albumart url on the screen so I know I have the url. I do get an image icon on the screen. If anyone can help I would really appreciate it.

    var data = this.volumioData;
    var item = document.createElement('div');

    item.className = 'mmm-volumio-item';
    item.innerHTML = '<div>' + data['artist'] + '</div>'
        + '<div>' + data['album'] + '</div>'
        + '<div><img src=' + data['albumart'] + '></div>';

    wrapper.appendChild(item);

    return wrapper;

This is the from the example.

var data = this.volumioData;

        var item = document.createElement('div');
        var image = document.createElement('img')

        image.src = data['albumart'];    //
        image.className = 'mmm-volumio-image';
        item.className = 'mmm-volumio-item';
        item.innerHTML = '<div>' + data['artist'] + '</div>'
            + '<div>' + data['albumart'] + '</div>'
            + '<div>' + data['title'] + '</div>'
            + '</div>';
        wrapper.appendChild(item);
        wrapper.appendChild(image);

        return wrapper;
    }
});

Re: MMM-Volumio

I was looking at an old post where someone had modified a volumio module to display the album artwork. I am not a JS coder but had a go at doing this myself but cannot get the image on my MagicMirror. I can get a little image icon and I have replaced album with albumart just to see have the artwork url. The url’s are correct as a browser will display the artwork jpg. So I have the url, it should be easy but after 2 days my the album covers remain elusive. I have tried so many different ways including the code from the original post.
In the screenshot you can see Artist, Albumart (url ) and Title has been displayed. There is an icon for the image on the left.

Here is the bit of code I have been fiddling with for 2 day. I have been playing about with the CSS a tiny bit too to move the text etc. and gave the image a className so I could CSS that too. I imagine I am making a rookie mistake and like needing some brackets somewhere. I have tried so many things. I would really appreciate some help.