How to load a <script> src = " " </script> into my mirror?

nbrenn

@morozgrafix I start my mirror with npm start. And my Mirror config.js, I am using Port 8080.

morozgrafix

@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.

nbrenn

@morozgrafix Yep, when the mirror was running, and running the wget http://localhost:8080 command, I connected successfully.

So then when I open up a command terminal while the mirror is running, and run:

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

it says connected to 8080, but returns 404 Not Found.

morozgrafix

@nbrenn that path is incorrect. Try

wget http://localhost:8080/modules/datafeed/JANUARY22TEST.csv

nbrenn

@morozgrafix You got it! The path was the issue. Do you know why I can’t use the path the way I specified?

Now, I’ll go back and try your solution and see if I have any other problems!

Thanks again for your help. It’s much appreciated.

morozgrafix

@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.

morozgrafix

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

Thanks.

nbrenn

@morozgrafix I am referring back to your jsfiddle example: jsfiddle example, and you created an object called csvData which you refer to in var data = ...

I was wondering how I would create a similar object, except with the file that I have in my directory. I couldn’t seem to find an HTML DOM function that would allow me to load the .csv file. I looked at the examples for the Compliments module, and they were in json. So, I saw that I might be able to use Papa Parse to convert the .csv to json and then follow the similar route as the Compliments.

My d3 approach loads the data from my csv onto my mirror, but the .css doesn’t seem to help it. It doesn’t appear in a table, and is very large (displaying in the upper left part of the mirror) even when I specified it to load in the middle.

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.”

Thanks again for the clarifications. I’m slowly wrapping my head around the interaction of the HTML and Javascript, and I think I get confused when I see code split into HTML and Javascript, when the modules are written with it all together in the HTML DOM format.

morozgrafix

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 removing xobj.overrideMimeType("application/json"); from complimentFile example should be sufficient for CSV file reading.

Thanks.

morozgrafix

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