Skip to content
This repository has been archived by the owner on Sep 5, 2022. It is now read-only.

Horizonal placement #25

Open
mlcampbe opened this issue Feb 25, 2019 · 34 comments
Open

Horizonal placement #25

mlcampbe opened this issue Feb 25, 2019 · 34 comments

Comments

@mlcampbe
Copy link

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
Copy link
Author

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
Copy link

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
Copy link
Author

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
Copy link

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
Copy link
Author

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
Copy link

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

@mlcampbe
Copy link
Author

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

  },
});

@bachoo786
Copy link

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
Copy link
Author

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
Copy link

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

@bachoo786
Copy link

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
Copy link
Author

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
Copy link
Author

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
Copy link

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

@bachoo786
Copy link

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

@mlcampbe
Copy link
Author

mlcampbe commented Apr 13, 2019 via email

@bachoo786
Copy link

Yes please if you can keep an eye for me thanks

@mlcampbe
Copy link
Author

mlcampbe commented Apr 15, 2019 via email

@bachoo786
Copy link

Well mine shows 1mb left from 7.0gb today

@mlcampbe
Copy link
Author

mlcampbe commented Apr 15, 2019 via email

@bachoo786
Copy link

thanks alot man I checked the MagicMirror-error.log using this sudo find / -iname core -print and it was over 7GB and this was the culprit. The reason why it was accumulating was because of the module MMM-Homeassistant-sensors which kept on piling up the log.

I removed the module and deleted the log file and my storage is back to normal.

Many thanks.

@bachoo786
Copy link

@mlcampbe on a different note did you update this module? I just updated and now I dont get the SystemStats horizontally, I also changed the bottom part of the updated MMM-SystemStats.js to match your changes but it doesnt appear on my MM.

Can you please look into it?

Thanks.

@mlcampbe
Copy link
Author

mlcampbe commented Apr 16, 2019 via email

@bachoo786
Copy link

From the latest version there are changes to the MMM-SystemStats.js file hasn't that affected yours? Because when I tried to update systemstats I had to git reset hard which changed the MMM-SystenStats.js file

@mlcampbe
Copy link
Author

mlcampbe commented Apr 16, 2019 via email

@bachoo786
Copy link

You mean you re added your changes in the MMM-SystenStats.js ?

@mlcampbe
Copy link
Author

mlcampbe commented Apr 16, 2019 via email

@bachoo786
Copy link

so I done the changes in the MMM-SystemStats.js and custom.css but its not showing up :(

@bachoo786
Copy link

can you please share you MMM-SystemStats.js file?

@bachoo786
Copy link

ok reinstalled the module and done your changes and normal services resume. Thanks

@bachoo786
Copy link

hello @mlcampbe

I update MM today and I get systemstats in thick bold font. can you please look into it?

I have copied the systemstats.js file from above but no joy.

thanks.

@bachoo786
Copy link

ok I had to make the changes to custom css as well. everything fine now.

@Kostavro
Copy link

Kostavro commented Jan 16, 2020 •
edited
Loading

To make the stats show up in a horizontal line I just made this change to MMM-SystemStats.js

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

So, just move the line where the row is created outside of the element sysData loop. Works for me.

@Kostavro
Copy link

Kostavro commented Jan 16, 2020 •
edited
Loading

Also if you would like to add more space between the stats you can do this:

c2.innerHTML = "&nbsp;&nbsp;&nbsp;&nbsp;" + <i class="fa ${sysData[item].icon} fa-fw"></i>;
note that i omitted some ` before the < and after the > . You should add them back.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@Kostavro @bachoo786 @mlcampbe