Horizonal placement

[mlcampbe]

Is there a way to change the display from a vertical stack of stats to a horizontal one? For example, I'd like to use this in the bottom_bar section as a single line.

[mlcampbe]

I played around with the code some and got it working for me. Just coming back here to update it in case anyone else wants to duplicate it.

In my case I wanted only a few of the system stats in the bottom bar. The first attempt I made was to edit the MMM-SystemStats.js file and move the line that creates the table rows outside of the foreach loop so that there is only 1 row in the html table. I have this now:

    var row = document.createElement('tr');
    Object.keys(sysData).forEach(function (item){

      if (self.config.label.match(/^(text|textAndIcon)$/)) {

This worked but all of the system stats were spread across the entire width of the screen with large spaces between the icon and the corresponding statistic value. It even got worse as I commented out uptime and freespace variables. That left me with cputemp, sysload, and freemem spread across the bottom of the screen.

To fix the spacing I added the following in my custom.css file:

.MMM-SystemStats {
	font-size: 12px;
	display: inline-block;
}

The font size is now acceptable for the bottom bar but the inline-block caused the entire table to be run together horizontally with no space between the 3 statistics. I then added a padding-right attribute to the value by adding a new setAttribute entry.

The full changes to the MMM-SystemStats.js results in this section of code near the bottom of the file:

    var row = document.createElement('tr');
    Object.keys(sysData).forEach(function (item){

      if (self.config.label.match(/^(icon|textAndIcon)$/)) {
        var c2 = document.createElement('td');
        c2.innerHTML = `<i class="fa ${sysData[item].icon}" style="margin-right: 4px;"></i>`;
        row.appendChild(c2);
      }

      var c3 = document.createElement('td');
      c3.setAttribute('class', 'value');
      c3.setAttribute('style', 'padding-right: 10px;');
      c3.style.textAlign = self.config.align;
      c3.innerText = self.stats[item];
      row.appendChild(c3);

      wrapper.appendChild(row);
    });

    return wrapper;

And when displayed on the screen I see the following centered in the bottom bar:

Imgur

In the end it might be better to have configuration options to determine which statistics to display and to offer a horizontal vs vertical display option. I don't think it would be that difficult to add but the above changes work for my purposes.

[bachoo786]

It didnt work for me. I copied your code and changed the relevant bits but no joy. The module does not appear on my mirror and it has disappeared after making your changes

[mlcampbe]

Bachoo786, could it be that your custom.css file is not getting read? I had that problem too for other custom code and had to explictly add it into the config.js. For example:

var config = {
  address: '0.0.0.0',
  port: 8181,
  electronOptions: {},
  ipWhitelist: [],
  timeFormat: 12,
  units: 'imperial',
  customCss: 'css/custom.css',
....

If that does not solve the problem then send me your full MMM-SystemStats.js file and I will take a look.

[bachoo786]

custom.css file is being read i think there is an issue with the MMM-SystemStats.js

This is my MMM-SystemStats.js:

/* global Module */

/* Magic Mirror
 * Module: MMM-SystemStats
 *
 * By Benjamin Roesner http://benjaminroesner.com
 * MIT Licensed.
 */

Module.register('MMM-SystemStats', {

  defaults: {
    updateInterval: 10000,
    animationSpeed: 0,
    align: 'right',
    language: config.language,
    useSyslog: false,
    thresholdCPUTemp: 70, // in celcius
    baseURLSyslog: 'http://127.0.0.1:8080/syslog',
    label: 'textAndIcon'
  },

  // Define required scripts.
	getScripts: function () {
      return ["moment.js", "moment-duration-format.js"];
	},

  // Define required translations.
	getTranslations: function() {
    return {
      'en': 'translations/en.json',
      'fr': 'translations/fr.json',
      'id': 'translations/id.json',
      'de': 'translations/de.json'
    };
	},

  // Define start sequence
  start: function() {
    Log.log('Starting module: ' + this.name);

    // set locale
    moment.locale(this.config.language);

    this.stats = {};
    this.stats.cpuTemp = this.translate('LOADING').toLowerCase();
    this.stats.sysLoad = this.translate('LOADING').toLowerCase();
    this.stats.freeMem = this.translate('LOADING').toLowerCase();
    this.stats.upTime = this.translate('LOADING').toLowerCase();
    this.stats.freeSpace = this.translate('LOADING').toLowerCase();
    this.sendSocketNotification('CONFIG', this.config);
  },

  socketNotificationReceived: function(notification, payload) {
    //Log.log('MMM-SystemStats: socketNotificationReceived ' + notification);
    //Log.log(payload);
    if (notification === 'STATS') {
      this.stats.cpuTemp = payload.cpuTemp;
      //console.log("this.config.useSyslog-" + this.config.useSyslog + ', this.stats.cpuTemp-'+parseInt(this.stats.cpuTemp)+', this.config.thresholdCPUTemp-'+this.config.thresholdCPUTemp);
      if (this.config.useSyslog) {
        var cpuTemp = Math.ceil(parseFloat(this.stats.cpuTemp));
        //console.log('before compare (' + cpuTemp + '/' + this.config.thresholdCPUTemp + ')');
        if (cpuTemp > this.config.thresholdCPUTemp) {
          console.log('alert for threshold violation (' + cpuTemp + '/' + this.config.thresholdCPUTemp + ')');
          this.sendSocketNotification('ALERT', {config: this.config, type: 'WARNING', message: this.translate("TEMP_THRESHOLD_WARNING") + ' (' + this.stats.cpuTemp + '/' + this.config.thresholdCPUTemp + ')' });
        }
      }
      this.stats.sysLoad = payload.sysLoad[0];
      this.stats.freeMem = Number(payload.freeMem).toFixed() + '%';
      upTime = parseInt(payload.upTime[0]);
      this.stats.upTime = moment.duration(upTime, "seconds").humanize();
      this.stats.freeSpace = payload.freeSpace;
      this.updateDom(this.config.animationSpeed);
    }
  },

  // Override dom generator.
  getDom: function() {
    var self = this;
    var wrapper = document.createElement('table');

    var sysData = {
      cpuTemp: {
        text: 'CPU_TEMP',
        icon: 'fa-thermometer',
      },
      sysLoad: {
        text: 'SYS_LOAD',
        icon: 'fa-tachometer',
      },
      freeMem: {
        text: 'RAM_FREE',
        icon: 'fa-microchip',
      },
      upTime: {
        text: 'UPTIME',
        icon: 'fa-clock-o',
      },
      freeSpace: {
        text: 'DISK_FREE',
        icon: 'fa-hdd-o',
      },
    };

    var row = document.createElement('tr');
    Object.keys(sysData).forEach(function (item){

      if (self.config.label.match(/^(icon|textAndIcon)$/)) {
        var c2 = document.createElement('td');
        c2.innerHTML = `<i class="fa ${sysData[item].icon}" style="margin-right: 4px;"></i>`;
        row.appendChild(c2);
      }

      var c3 = document.createElement('td');
      c3.setAttribute('class', 'value');
      c3.setAttribute('style', 'padding-right: 10px;');
      c3.style.textAlign = self.config.align;
      c3.innerText = self.stats[item];
      row.appendChild(c3);

      wrapper.appendChild(row);
    });

    return wrapper;

[mlcampbe]

Ok I see the problem. I didn't explicitly state it in my changes but after the "return wrapper;" line you need to include the rest of the file. You have dropped the final 2 lines. So the bottom of the file should be this:

      row.appendChild(c3);

      wrapper.appendChild(row);
    });

    return wrapper;
  },
});

[bachoo786]

So I just add the above code to my current js file?

[mlcampbe]

All of the above code is there except the last 2 lines. All you need to add after the "return wrapper;" line is:

  },
});

[bachoo786]

Oh right ok thanks.

Last question. As you have place the system stats at the bottom. I have placed it in the same place. However I have got my news feed at the bottom too which is overlapping the system stats.

Is there a way I could place the system stats right at the bottom and not overlap with the newsfeed?

[mlcampbe]

I am not sure about the newsfeed part. I have 2 items in the bottom bar myself -- the systemstats and the dailybibleverse. These work well together for me. I have the dailybibleverse listed first in the config.js and then the systemstats section below that. Both sections have the position set as bottom_bar and for me they display 1 on top of the other with no overlapping.

[bachoo786]

perfect just tried it and works very well thanks for your help

[bachoo786]

in response to my comment on customcss. How do I move any module to the very edge of the screen in both x and y direction? any idea?

[mlcampbe]

I've not tried it myself but this sounds like what you are looking for:

https://forum.magicmirror.builders/topic/2247/border

The 2nd entry talks about some custom.css changes. If you try them let me know how they work as I may do the same too.

[mlcampbe]

Just an FYI I tried the 3 lines in the custom.css for changing the margin and it works perfectly. Inside the main section of the custom.css I added:

margin: 20px;
height: calc(100% - 40px);
width: calc(100% - 40px);

I believe I like this format better than the default.

[bachoo786]

I just tried it too and it looks so much better thanks again

[bachoo786]

@mlcampbe

Quick question. The system stat for my sd card storage on my raspberry pi 3b+ decreases every day by at least 500-600mb. Is this the same for you?

I have mm and a Google assistant installed and have deleted major apps that I don't use.

I also reinstalled mm and Google assistant on a fresh 16gb sd card but feel like I have the same problem.