How to change spacing between lines

big_nunz

Hi all,

I am trying to make a slight modification to a module that was discussed in this forum post:
https://forum.magicmirror.builders/topic/555/txt-file-include

This module does an excellent job of displaying the contents of a text file (and also seems to support some html formatting). However, when displaying this you see large spaces between each new line of text. I would love it if there is some way to alter this and have more “normal” spacing between each line. Can anyone help with this?

below is the current contents of the following files…

MMM-Text.js:

Module.register("MMM-Text",{
    defaults: {
    updateInterval: 30 * 60 * 1000 //reads the file every 30 mins
},

start: function(){
    this.sendSocketNotification('START', this.config);
},

socketNotificationReceived: function(notification, payload) {
    if(notification === 'DATA'){
        this.dataFile = payload;
        this.updateDom();
    }
},

getDom: function(){
    var wrapper = document.createElement('div');
    if(this.dataFile){
        wrapper.innerHTML = this.dataFile;
    } else {
        wrapper.innerHTML = 'No data';
    }
    return wrapper;
}
});

node_helper.js:

const NodeHelper = require("node_helper");
const fs= require("fs");

module.exports = NodeHelper.create({
    socketNotificationReceived: function(notification, payload) {
    if(notification === 'START'){
        this.config = payload;
        this.readData();
        setInterval(() => {
            this.readData();
        }, this.config.updateInterval);
    }
},

readData: function(){
    //to read a file to do the following
    fs.readFile('/home/pi/MagicMirror/modules/MMM-Text/mmText.txt', 'utf8', (err, data) => {
        if (err) throw err;
        this.sendSocketNotification('DATA', data);
    });
}
});

example of mmText.txt (the file that will be displayed):

< font size="3" >
Attic: 85°<br />
Crawlspace: 77°<br />
Den: 77°<br />
Rack: 71°<br />
< /font >

big_nunz

Figured I would post the answer I came up with to solve this in case anyone else runs into the same problem - I wrapped the text in a < p > and added line-height styling to that - see below for an example:

< font size="3" >
< p style="line-height:100%" >
Attic: 112°<br />
Crawlspace: 80°<br />
Den: 80°<br />
Rack: 71°<br />
Garage: 77°<br />
< /p >
< /font >

rak

For my curiosity. What is the use case behind here? What is the content of that text file?

big_nunz

there are temperatures that are gathered by other computers in other locations in my house and I am trying to monitor those values - I have a script from another computer that builds this text file each hour and copies it to the magic mirror.

cowboysdude

A couple different things you can do here…

One put the data in a table…
or
Two…
You could just either use CSS to do this OR create your element like this:


                var foo= document.createElement("p");
	        foo.classList.add("whatever ");   CSS
 OR
	       foo.setAttribute('style', 'line-height: 20%;');  No CSS```