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

      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

        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

          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

            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
            • cowboysdudeC Offline
              cowboysdude Module Developer
              last edited by 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```
              
              
              1 Reply Last reply Reply Quote 2
              • 1 / 1
              • First post
                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