• Recent
  • Tags
  • Unsolved
  • Solved
  • MagicMirror² Repository
  • Documentation
  • 3rd-Party-Modules
  • Donate
  • Discord
  • Register
  • Login
MagicMirror Forum
  • Recent
  • Tags
  • Unsolved
  • Solved
  • MagicMirror² Repository
  • Documentation
  • 3rd-Party-Modules
  • Donate
  • Discord
  • Register
  • Login
A New Chapter for MagicMirror: The Community Takes the Lead
Read the statement by Michael Teeuw here.

How to change spacing between lines

Scheduled Pinned Locked Moved Solved Troubleshooting
5 Posts 3 Posters 2.0k Views 2 Watching
Loading More Posts
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • B Offline
    big_nunz
    last edited by Jun 18, 2018, 3:11 PM

    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 >
    
    1 Reply Last reply Reply Quote 0
    • B Offline
      big_nunz
      last edited by Jun 19, 2018, 4:39 PM

      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 >
      
      1 Reply Last reply Reply Quote 0
      • R Offline
        rak
        last edited by Jun 19, 2018, 9:12 PM

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

        1 Reply Last reply Reply Quote 0
        • B Offline
          big_nunz
          last edited by Jun 20, 2018, 11:49 AM

          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.

          1 Reply Last reply Reply Quote 0
          • C Offline
            cowboysdude Module Developer
            last edited by cowboysdude Jun 22, 2018, 11:50 AM Jun 22, 2018, 11:47 AM

            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```
            
            
            1 Reply Last reply Reply Quote 2
            • 1 / 1
            1 / 1
            • First post
              5/5
              Last post
            Enjoying MagicMirror? Please consider a donation!
            MagicMirror created by Michael Teeuw.
            Forum managed by Sam, technical setup by Karsten.
            This forum is using NodeBB as its core | Contributors
            Contact | Privacy Policy