BenRoe
Horizonal placement
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.
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:
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.
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
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.
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;
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;
},
});
All of the above code is there except the last 2 lines. All you need to add after the "return wrapper;" line is:
},
});
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?
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.
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?
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.
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.
@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.
I don't display the free dusk side in mine. I can turn it on next week and see what happens though if you like.
On April 13, 2019 7:15:45 AM bachoo786 [email protected] wrote:
@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.
— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.
I added in the disk space metric and restarted. As of now I see it is showing 7.3G free. I’ll watch it for a few days and see what happens.
Mike Campbell [email protected]
On Apr 13, 2019, at 3:33 PM, bachoo786 [email protected] wrote:
Yes please if you can keep an eye for me thanks
— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/BenRoe/MMM-SystemStats/issues/25#issuecomment-482881388, or mute the thread https://github.com/notifications/unsubscribe-auth/ANDRrWumwIInk3xOJH1NNzo6iE9aHA2gks5vgj8lgaJpZM4bQaZY.
Do you think this is a couple of very large files or a whole lot of small files? I would think you could run something like this to find any file larger than 500 mb:
sudo find / -type f -size +500M
I note that I found 1 file (/home/pi/MagicMirror/core) which is 744mb and is a core dump from my mirror. Perhaps you have something that is core dumping and creating these files? You might want to check for core files using:
sudo find / -iname core -print
While not all files named core may be core dump you can see if there are a lot of them piling up somewhere.
Mike Campbell [email protected]
On Apr 15, 2019, at 7:47 AM, bachoo786 [email protected] wrote:
Well mine shows 1mb left from 7.0gb today
— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/BenRoe/MMM-SystemStats/issues/25#issuecomment-483237242, or mute the thread https://github.com/notifications/unsubscribe-auth/ANDRrbh8JZrCqp5ZbloXkjhGtyyanj1Oks5vhHThgaJpZM4bQaZY.
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.
@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.
Yes I did update with the recent changes a few days back. I put my code back in and it works for me horizontally. I didn’t change anything in the MMM-SystemStats.js file from the original. Double check your custom.css file and make sure the entries are still in there too.
Mike Campbell [email protected]
On Apr 15, 2019, at 6:24 PM, bachoo786 [email protected] wrote:
@mlcampbe https://github.com/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.
— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/BenRoe/MMM-SystemStats/issues/25#issuecomment-483454651, or mute the thread https://github.com/notifications/unsubscribe-auth/ANDRrYeysBvQrRfW8DXB1fYoI9ObQVwsks5vhQo_gaJpZM4bQaZY.
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
Mine still seems to be working. I just did a ‘git pull’ and it complained about my changes so I did the ‘git reset hard’ and then the ‘git pull’ and re-added in my changes for the horizontal stuff and it is fine.
Mike Campbell [email protected]
On Apr 16, 2019, at 7:42 AM, bachoo786 [email protected] wrote:
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
— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/BenRoe/MMM-SystemStats/issues/25#issuecomment-483642866, or mute the thread https://github.com/notifications/unsubscribe-auth/ANDRrdei6OM23RvbvcqaiH-9rxEJnaVrks5vhcUxgaJpZM4bQaZY.
Correct, after the ‘git pull’ it resets everything back to the way that it is from the GitHub site. So I then go in and re-add in the changes to the MMM-SystenStats.js file for horizontal layout.
Mike Campbell [email protected]
On Apr 16, 2019, at 8:18 AM, bachoo786 [email protected] wrote:
You mean you re added your changes in the MMM-SystenStats.js ?
— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/BenRoe/MMM-SystemStats/issues/25#issuecomment-483655648, or mute the thread https://github.com/notifications/unsubscribe-auth/ANDRrQS1N5D2vzYpP5mt8WTI_2XkxqAOks5vhc2igaJpZM4bQaZY.
so I done the changes in the MMM-SystemStats.js and custom.css but its not showing up :(
ok reinstalled the module and done your changes and normal services resume. Thanks
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.
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.
Also if you would like to add more space between the stats you can do this:
c2.innerHTML = " " + <i class="fa ${sysData[item].icon} fa-fw"></i>;
note that i omitted some ` before the < and after the > . You should add them back.