I also updated JSfiddle example with sum calculation logic: https://jsfiddle.net/morozgrafix/8oz1t9g4/2/
Read the statement by Michael Teeuw here.
Posts
-
RE: How to load a <script> src = " " </script> into my mirror?
-
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:
- CSV file is created/updated in
/home/pi/MagicMirror/modules/datafeed/file.csv - When module is loaded JS creates a variable and reads contents of the CSV file into it (similar to what compliments module does)
- CSV data in that variable is parsed, sum of the values in one of the columns calculated and assigned to another variable (
sum). - DOM element is created and innerHTML of that element is updated with "Your sum is " +
sum - 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 removingxobj.overrideMimeType("application/json");fromcomplimentFileexample should be sufficient for CSV file reading.Thanks.
- CSV file is created/updated in
-
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.
-
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?
-
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 toMagicMirrordirectory. In most cases and in your case the full path of that is/home/pi/MagicMirror.
By default it is configured to serve youindex.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.htmlas you can see from above when you asking for
http://localhost:8080/home/pi/MagicMirror/modules/datafeed/JANUARY22TEST.csvwebserver will attempt to serve you something from
/home/pi/MagicMirror/home/pi/MagicMirror/modules/datafeed/JANUARY22TEST.csvwhich 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/MagicMirrordirectory. (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.
-
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 -
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:8080without getting connection refused. -
RE: How to load a <script> src = " " </script> into my mirror?
@nbrenn is your mirror up and running with
npm startornode serveronly? If webserver isn’t running on port 8080 you will getconnection refusederror when attempting to access it over HTTP. -
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.csvfile in the directory of your module nameddatafeedit should be available at this URL: http://localhost:8080/modules/datafeed/JANUARY22TEST.csvHere 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.
-
RE: How to load a <script> src = " " </script> into my mirror?
It seems that you are appending
tableelement to thebody. If you take a look at HelloWorld sample module you will see a basic structure forgetDommethod. It needs to return element that will be injected into HTML of the MM when system callsgetDommethod.Very basic example would look like this:
getDom: function() { var wrapper = document.createElement("div"); wrapper.innerHTML = "Hello World!"; return wrapper; }When system calls
getDomit will getwrapperwhich 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.