MagicMirror Forum
    • Recent
    • Tags
    • Unsolved
    • Solved
    • MagicMirror² Repository
    • Documentation
    • 3rd-Party-Modules
    • Donate
    • Discord
    • Register
    • Login
    1. Home
    2. morozgrafix
    3. Posts
    A New Chapter for MagicMirror: The Community Takes the Lead
    Read the statement by Michael Teeuw here.
    Offline
    • Profile
    • Following 0
    • Followers 0
    • Topics 3
    • Posts 136
    • Groups 2

    Posts

    Recent Best Controversial
    • RE: How to load a <script> src = " " </script> into my mirror?

      I also updated JSfiddle example with sum calculation logic: https://jsfiddle.net/morozgrafix/8oz1t9g4/2/

      posted in Development
      morozgrafixM
      morozgrafix
    • RE: How to load a <script> src = " " </script> into my mirror?

      It would be very difficult for me to guide you through building entire module without seeing the code and understanding what it is doing. That’s the reason why I’m only able to give you bits and pieces of information. One of the things that can help is for you to create a repo on GitHub with code that you got so far and then I can take a look and possibly offer some suggestions.

      In your original post you mentioned that you wanted to display CSV data from the file in HTML table format which seems a bit different from your most recent requirement:

      For some context, my .csv data table contains two columns of time-series data for which I want to sum together. And then I just want to output a sentence like, “Your sum is XXX.”

      To achieve the above following very rough logic would need to be implemented:

      1. CSV file is created/updated in /home/pi/MagicMirror/modules/datafeed/file.csv
      2. When module is loaded JS creates a variable and reads contents of the CSV file into it (similar to what compliments module does)
      3. CSV data in that variable is parsed, sum of the values in one of the columns calculated and assigned to another variable (sum).
      4. DOM element is created and innerHTML of that element is updated with "Your sum is " + sum
      5. At given config interval steps 1-4 are repeated to get fresh set of data.

      Is this close to something that you are trying to do?

      (Above steps aren’t accounting for any error handling etc.)
      BTW I don’t think you need to convert your CSV to JSON, especially if this is a simple 2 column file. Commenting out or removing xobj.overrideMimeType("application/json"); from complimentFile example should be sufficient for CSV file reading.

      Thanks.

      posted in Development
      morozgrafixM
      morozgrafix
    • RE: How to load a <script> src = " " </script> into my mirror?

      I’ve moved this thread into Development category, since conversation is now mostly related to your module development.

      Thanks.

      posted in Development
      morozgrafixM
      morozgrafix
    • RE: Displaying data from a CSV file saved on my Pi?

      we have ongoing conversation about getting this done in this topic https://forum.magicmirror.builders/topic/1515/how-to-load-a-script-src-script-into-my-mirror

      @nbrenn are you ok if I lock this topic and we will keep going in the thread mentioned above?

      posted in Development
      morozgrafixM
      morozgrafix
    • RE: How to load a <script> src = " " </script> into my mirror?

      @nbrenn glad you are getting closer to solving this.

      Root directory that is served by webserver that is running on localhost:8080/ is mapped to MagicMirror directory. In most cases and in your case the full path of that is /home/pi/MagicMirror.
      By default it is configured to serve you index.html.

      So mapping looks kind of like this:

      http://localhost:8080					---->	/home/pi/MagicMirror/
      http://localhost:8080/index.html			---->	/home/pi/MagicMirror/index.html
      http://localhost:8080/modules/module_name		---->	/home/pi/MagicMirror/modules/module_name/
      http://localhost:8080/modules/module_name/foo.html	---->	/home/pi/MagicMirror/modules/module_name/foo.html
      

      as you can see from above when you asking for

      http://localhost:8080/home/pi/MagicMirror/modules/datafeed/JANUARY22TEST.csv
      

      webserver will attempt to serve you something from

      /home/pi/MagicMirror/home/pi/MagicMirror/modules/datafeed/JANUARY22TEST.csv
      

      which doesn’t really exist and that’s the reason why you can’t use absolute file path in the URL. Which also brings up another point: because root directory that is served by webserver is mapped to /home/pi/MagicMirror, webserver can’t serve anything above the /home/pi/MagicMirror directory. (for example you won’t be able to access /home/pi/foo.html).

      This is just a small portion of how it works and there are other rules that play role, but hopefully this info shines some light and gives you enough explanation on why your path didn’t work.

      posted in Development
      morozgrafixM
      morozgrafix
    • RE: How to load a <script> src = " " </script> into my mirror?

      @nbrenn that path is incorrect. Try

      wget http://localhost:8080/modules/datafeed/JANUARY22TEST.csv
      
      posted in Development
      morozgrafixM
      morozgrafix
    • RE: How to load a <script> src = " " </script> into my mirror?

      @nbrenn when your electron MM app shows up on the screen and while it is running, you should be able to do wget http://localhost:8080 without getting connection refused.

      posted in Development
      morozgrafixM
      morozgrafix
    • RE: How to load a <script> src = " " </script> into my mirror?

      @nbrenn is your mirror up and running with npm start or node serveronly? If webserver isn’t running on port 8080 you will get connection refused error when attempting to access it over HTTP.

      posted in Development
      morozgrafixM
      morozgrafix
    • RE: How to load a <script> src = " " </script> into my mirror?

      Sorry I’m on mobile right now and it’s not easy to write code samples on the phone.

      You will not be able to access your local file via URL like that. You would need to read it from the file system. In default compliments module there is a piece of code that you can modify to achieve that.

      EDIT: If you place your JANUARY22TEST.csv file in the directory of your module named datafeed it should be available at this URL: http://localhost:8080/modules/datafeed/JANUARY22TEST.csv

      Here is a snippet, but I would recommend looking through the whole module to get a better idea how it works:

      	/* complimentFile(callback)
      	 * Retrieve a file from the local filesystem
      	 */
      	complimentFile: function(callback) {
      		var xobj = new XMLHttpRequest();
      		xobj.overrideMimeType("application/json");
      		xobj.open("GET", this.file(this.config.remoteFile), true);
      		xobj.onreadystatechange = function () {
      			if (xobj.readyState == 4 && xobj.status == "200") {
      				callback(xobj.responseText);
      			}
      		};
      		xobj.send(null);
      	},
      

      In this case it’s reading JSON file, but you would need to read plain text CSV. There are a few examples that are similar on Stack Overflow and in tutorials online. I will try to dig up an example when I’m back in front of my computer, but I’m sure you can easily search for them.

      posted in Development
      morozgrafixM
      morozgrafix
    • RE: How to load a <script> src = " " </script> into my mirror?

      It seems that you are appending table element to the body. If you take a look at HelloWorld sample module you will see a basic structure for getDom method. It needs to return element that will be injected into HTML of the MM when system calls getDom method.

      Very basic example would look like this:

      getDom: function() {
      	var wrapper = document.createElement("div");
      	wrapper.innerHTML = "Hello World!";
      	return wrapper;
      }
      

      When system calls getDom it will get wrapper which would have <div>Hello World!</div> HTML.
      If you have a simple CSV file d3 may be an overkill for that, you can probably use a fairly simple javascript to get that done. Here is an example of how you can do it (I didn’t load CSV from external file in that example, I kind of threw it together quickly, but it seems to work): https://jsfiddle.net/morozgrafix/8oz1t9g4/1/

      Module development documentation is also pretty good: https://github.com/MichMich/MagicMirror/tree/master/modules
      In case your CSV data gets updated while mirror is running, you can also figure out how to periodically update information that you display by looking at other modules.

      posted in Development
      morozgrafixM
      morozgrafix
    • 1
    • 2
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 9 / 14