All Icons and bottom panel disappeared

Help and Support Help
#1

The Volumio on my Raspi 4 B has a strange error. After a few days icons and the bottom panel disappear. The problem occurs both under Windows (browser independent) and Android. On Android, the Volumio app shows my Raspi for selection. As soon as I click on the device, the screen is blank (black).

Self-help so far:

  • Reinstall Volumio image (problem from above reappears after a few days).
  • Install Volumio image on a new microSD card (problem from above reoccurs after a few days)
  • Live Log shows no error

Used Volumio image:
3.173 from Audiophonics for Evo-Sabre

Screenshot

IconsDisappeared
IconsDisappeared1920×976 69.6 KB

I would like to continue using the Audiophonics image.

Does anyone have any idea how I could locate the cause of the error?

#2

I guess the icons come back when you restart. Seems like a browser cache issue. Could you try clearing your cache and see what happens?

Regards,

#3

This not a problem of browser cache.

If found this in the output of Angular.js:

VolumioBug
VolumioBug1746×883 129 KB

Please note that the URL for Icon contain twice “undefined”

Removing “undefined” fix the problem

VolumioBugRepaired
VolumioBugRepaired1688×892 132 KB

Any idea what the issue for twice “unbefined” in the URL source could be?

Thanks
Otto

#4

I’m very happy, that Volumio is an Open Source Project. It has certainly been 20 years since I last really programmed. But code is still code and it’s like riding a bike: Once you learn, it takes a few minutes and then you can do it again.

First of all, I look where the URL for the images is generated.
app/services/browse.service.js - Line 238

  findHashInNavigationStack(uri) {
    return this.navigationStack.find(item => item.uri === uri);
  }

  getSourcesAlbumart(albumart) {
    if (!albumart) {
      return '';
    }
    if (~albumart.indexOf('http')) {
      return albumart;
    } else {
      return `${this.socketService.host}${albumart}`;
    }
  }

This “undefined” stuff is generated in this row:

return `${this.socketService.host}${albumart}`;

Second, a short look, then I found the source function in app/services/socket.service.js Line 66:


  changeHost(host) {
    if (this.$window.socket) {
      this.$window.socket.disconnect();
      this.$window.socket.removeAllListeners();
    }
    this.$window.socket = io(this.host, {timeout: 500});
    this.$window.socket.connect();
    this.$window.socket.on('connect_error', () => {
      this.$log.debug(`Socket connect_error for host ${this.host}`);
      this._connectToNextHost();
    });
    this.$window.socket.on('connect_timeout', () => {
      this.$log.debug(`Socket connect_timeout for host ${this.host}`);
      this._connectToNextHost();
    });
    this.$rootScope.$emit('socket:init');
  }

Unfortunately, I have reached the limit of my knowledge.
I would need an explanation of what this line of code does:

this.$rootScope.$emit('socket:init');

I have another device running Volumio on my home network. It is a Rasberry Pi 2b with Volumio 2.89. The Volumio has been working for a long time without any problems.

Now I am at a loss as to where to look for the cause of the error. Does anyone have a hint for me?