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 load a <script> src = " " </script> into my mirror?

    Scheduled Pinned Locked Moved Development
    35 Posts 4 Posters 27.1k Views 5 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.
    • morozgrafixM Offline
      morozgrafix Moderator @nbrenn
      last edited by

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

      nbrennN 1 Reply Last reply Reply Quote 0
      • nbrennN Offline
        nbrenn @morozgrafix
        last edited by

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

        morozgrafixM 1 Reply Last reply Reply Quote 0
        • morozgrafixM Offline
          morozgrafix Moderator @nbrenn
          last edited by

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

          nbrennN 1 Reply Last reply Reply Quote 0
          • nbrennN Offline
            nbrenn @morozgrafix
            last edited by 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.

            morozgrafixM 1 Reply Last reply Reply Quote 0
            • morozgrafixM Offline
              morozgrafix Moderator @nbrenn
              last edited by

              @nbrenn that path is incorrect. Try

              wget http://localhost:8080/modules/datafeed/JANUARY22TEST.csv
              
              nbrennN 1 Reply Last reply Reply Quote 0
              • nbrennN Offline
                nbrenn @morozgrafix
                last edited by

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

                morozgrafixM 1 Reply Last reply Reply Quote 0
                • morozgrafixM Offline
                  morozgrafix Moderator @nbrenn
                  last edited by 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.

                  1 Reply Last reply Reply Quote 0
                  • morozgrafixM Offline
                    morozgrafix Moderator
                    last edited by

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

                    Thanks.

                    nbrennN 1 Reply Last reply Reply Quote 0
                    • nbrennN Offline
                      nbrenn @morozgrafix
                      last edited by

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

                      1 Reply Last reply Reply Quote 0
                      • morozgrafixM Offline
                        morozgrafix Moderator
                        last edited by

                        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.

                        morozgrafixM 1 Reply Last reply Reply Quote 0
                        • 1
                        • 2
                        • 3
                        • 4
                        • 2 / 4
                        • 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