Hi folks, need a little help with my first module which is mainly AI generated because my programming skills are slim to none (learning by failure ;).

Here´s the idea: Showing the top-played tracks scrobbled via LastFM including the coverart sorted by week, month, year or overall.

The module is already working and configurable via custom.css but those damn covers aren´t showing up. AI doesn´t work here anymore. I need some real skills and therfore I´m asking for a little help. Maybee you like the idea of that module too and could provide some support! That would be highly appreciated!

Here is what I´ve got so far:

MMM-LastfmTopTracks.js

Module.register("MMM-LastfmTopTracks", {
  defaults: {
    apiKey: "YOUR_LASTFM_API_KEY",
    username: "YOUR_LASTFM_USERNAME",
    period: "7day",
    limit: 10,
    rotateInterval: 10000,
    fallbackImage: "modules/MMM-LastfmTopTracks/default_cover.png"
  },

  start() {
    this.tracks = [];
    this.currentIndex = 0;
    this.loaded = false;
    this.getTopTracks();
    this.scheduleRotation();
  },

  scheduleRotation() {
    setInterval(() => {
      if (this.loaded && this.tracks.length > 0) {
        this.currentIndex = (this.currentIndex + 1) % this.tracks.length;
        this.updateDom();
      }
    }, this.config.rotateInterval);
  },

  getTopTracks() {
    const url = `https://ws.audioscrobbler.com/2.0/?method=user.gettoptracks&user=${this.config.username}&api_key=${this.config.apiKey}&format=json&period=${this.config.period}&limit=${this.config.limit}`;

    fetch(url)
      .then(res => res.json())
      .then(data => {
        this.tracks = data.toptracks?.track || [];
        this.loaded = true;
        this.updateDom();
      })
      .catch(err => {
        console.error("MMM-LastfmTopTracks: API error", err);
      });
  },

  getDom() {
    const wrapper = document.createElement("div");
    wrapper.className = "MMM-LastfmTopTracks";

    const header = document.createElement("header");
    header.innerText = "Last FM Top Tracks";
    header.className = "module-header";
    wrapper.appendChild(header);

    if (!this.loaded) {
      const loading = document.createElement("div");
      loading.innerHTML = "Lade Top-Tracks...";
      loading.className = "track-loading";
      wrapper.appendChild(loading);
      return wrapper;
    }

    if (this.tracks.length === 0) {
      const noData = document.createElement("div");
      noData.innerHTML = "Keine Daten verfügbar.";
      noData.className = "track-nodata";
      wrapper.appendChild(noData);
      return wrapper;
    }

    const track = this.tracks[this.currentIndex];
    const title = track.name;
    const artist = track.artist.name;
    const playcount = track.playcount;
    const imgObj = track.image?.find(img => img.size === "extralarge") || {};
    const rawUrl = imgObj["#text"]?.trim() || "";
    const imgUrl = rawUrl.startsWith("http://") ? rawUrl.replace("http://", "https://") : rawUrl;
    const finalImg = imgUrl || this.config.fallbackImage;

    const container = document.createElement("div");
    container.className = "track-container";

    const text = document.createElement("div");
    text.className = "track-info";
    text.innerHTML = `<strong>${title}</strong><br>${artist}<br><small>${playcount} Plays</small>`;

    const img = document.createElement("img");
    img.src = finalImg;
    img.className = "track-cover";

    container.appendChild(text);
    container.appendChild(img);
    wrapper.appendChild(container);
    return wrapper;
  },

  getStyles() {
    return ["MMM-LastfmTopTracks.css"];
  }
});

MMM-LastfmTopTracks.css

.MMM-LastfmTopTracks {
  max-width: 300px;
  color: #ccc;
}

.MMM-LastfmTopTracks .module-header {
  color: #fff;
  font-weight: bold;
  font-size: 1.2em;
  margin-bottom: 10px;
}

.track-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.track-info {
  flex-grow: 1;
  padding-right: 10px;
}

.track-cover {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 5px;
}

Any ideas how I get those cover-suckers out of hiding ;) ? Thanks in advance and kind regards!

@chrisfr1976 Thanks a lot! I´ll check it out and keep you posted! Beste Grüße ;) & kind regards

@chrisfr1976

I got it by editing my custom.css. Could have checked prior to my posting. Sorry for that. The sliding option still might be a cool thing ;)

@chrisfr1976
Works like a charme! Thanks for your effort! Great module!!!

May I ask kindly if you´re able to include a sliding option, so that the shown events are not cut off due to limited screen space? My screen only allows 7 events top_left with the clock module above it. Therefore all other events are not shown. A slide-interval option would solve that problem.
Another space saving option would be a “table-view” without those thumbnails, so that the events are shown as a list with date and title (and maybe smaller pictures as an configurable option).

Looking forward to possible updates :)

Thanks again and kind regards!

The idea behind the module is very cool, but it is not working for me neither …

0|MagicMirror | [2025-06-29 13:58:01.345] [ERROR] Error when loading MMM-EventSearch: Cannot find module ‘node-fetch’
0|MagicMirror | Require stack:
0|MagicMirror | - /home/bugphunk/MagicMirror/modules/MMM-EventSearch/node_helper.js
0|MagicMirror | - /home/bugphunk/MagicMirror/js/app.js
0|MagicMirror | - /home/bugphunk/MagicMirror/js/electron.js

Any ideas?

Hi folks, I’m no expert at all and it was a lot of trial and error. I used the lower_third position because there aren’t any other modules in that position which were also moving around the screen when changing the position of MMM-Solar-Picture. Also the NASA-watermark is still there in the upper left corner of the shown solar picture. It is just hidden behind the Earth module, so that worked out for me. My config.js on a 1080p screen

{
        module: "MMM-SolarPicture", //IGNORED
        position: "lower_third",
        config: {
                imageType: 'AIA 304',
                updateInterval: 1 * 60 * 60 * 1000, //(1 hour)
                maxMediaWidth: 1200,  
                maxMediaHeight: 1200 
                    }
        },

I added these lines to my custom.css

.MMM-SolarPicture img {
position: absolute;
top: +100px;     
left: +1100px;   
opacity: 1 !important;
}

Good luck with moving around your sun and kind regards

Got it! Thanks again!

Thanks for your support. The developer window elements tab might do the trick.

Hello everyone!

First of all: Thanks for the module! I like it a lot.

I tried to move the picture around by adding a new position in my custom.css but it is not moving at all. The MMM.MoonPhase module moves without a problem, but these paramaters don´t work for the sun (because of the missing *.css file, I guess). I´m no expert at all, therefore a little help would be highly appreciated!

My goal is to push the sun “outside” the screen so that only the upper left corner of the sun is on the bottom right side of the screen.

Thanks in advance and kind regards,
Marco