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

[nbrenn]

@morozgrafix Thanks for the response and the support!

This looks very promising solution and I’ll give it a go once I solve one nagging problem. I am receiving the connection refused error when I am connecting to the localhost: 8080:

pi@raspberrypi:~ $ wget --verbose localhost:8080
--2017-01-24 12:11:12--  http://localhost:8080/
Resolving localhost (localhost)... ::1, 127.0.0.1
Connecting to localhost (localhost)|::1|:8080... failed: Connection refused.
Connecting to localhost (localhost)|127.0.0.1|:8080... failed: Connection refused.
pi@raspberrypi:~ $

[morozgrafix]

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

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