Posts made by bugphunk

bugphunk

Thanks mate! That´s brilliant! I´ll check it out at and keep you posted!

bugphunk

Merci beaucoup! A cool module and useful to me! A header and an auto hide-function would be cool, so that the module disappears when there are no active down- or uploads!

Thanks again and stay safe!

bugphunk

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!

bugphunk

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

bugphunk

@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 ;)

bugphunk

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

bugphunk

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

Any ideas?

bugphunk

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

bugphunk

Got it! Thanks again!

bugphunk

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