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.

    I got sucked up into a magic mirror! (and need some help)

    Scheduled Pinned Locked Moved Development
    14 Posts 2 Posters 5.7k Views 2 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.
    • E Offline
      E3V3A
      last edited by E3V3A

      I finally decided to get my hands dirty and make my own MM Module, after having hacked and looked at dozens of others. However, I have to humbly admit my huge lack of JS, Node development experience, something which is completely new to me. I need some advise.

      The project I’m doing will look simple and standard enough.

      • Has a multi-column (4-8) colored table.
      • Need updates every ~4 min
      • Uses a few external npm libraries: jquery, jquery-ui, tabulator, +another (to generate tables)
      • Uses an API request from another library to obtain the JSON to populate the table.

      That’s it, but I fail to see exactly where this fit’s into already similar MMM projects and templates.
      I already have the HTML + JS (+ external imported scripts) that generates the table, but I’m not able to get the JSON in from external node library, since it is only running locally on my browser and not yet on a server. It need to get integrated to MM “format” somehow.

      Maybe I’m going about this the wrong way? Maybe I’m totally trying to over-engineer it for what it is. (Using tabulator for simple table?) What is nice with tabulator is that it can sort and modify data in the table on-the-fly. But it also need all those dependencies above.

      I’ve been looking to use and modify https://github.com/erikmohn/MMM-Vindsiden which seem to have the essentials, but I’m don’t know what need to be removed and where to insert my own stuff…

      Any suggestions are most welcome!

      "Everything I do (here) is for free – altruism is the way!"
      MMM-FlightsAbove, MMM-Tabulator, MMM-Assistant (co-maintainer)

      1 Reply Last reply Reply Quote 0
      • E Offline
        E3V3A
        last edited by

        Alright! I’m about ready to throw in the towel! I’ve now been looking to do this, what some developers might think is trivial, and just can’t get anything to work, for several days.

        As a first step in my project, I made a nice demo table using the Tabulator library, but for some reason I am not able to get it into my MMM JS module. As soon as I think I’m starting to understand something I’m bombed out by weird errors!

        For example, I installed the jquery, jquery-ui and tabulator libraries with

        npm install xxxx --save
        

        as instructed on those pages. That means that I have the node_modules directory in my MMM directory.

        Now, trivially trying to import the various JS and CSS library files fails in the browser with:

        The resource from ... node_modules ... was blocked due to MIME type mismatch (X-Content-Type-Options: nosniff)
        

        Here you can find my Tabulator MMM demo called MMM-Tabulator. In that repo you will find a nicely working HTML/JS file: demo.html.

        How can I get that to work in the MMM-Tabulator.js ?

        "Everything I do (here) is for free – altruism is the way!"
        MMM-FlightsAbove, MMM-Tabulator, MMM-Assistant (co-maintainer)

        1 Reply Last reply Reply Quote 1
        • E Offline
          E3V3A
          last edited by

          Anyone can give some hints?

          "Everything I do (here) is for free – altruism is the way!"
          MMM-FlightsAbove, MMM-Tabulator, MMM-Assistant (co-maintainer)

          R 1 Reply Last reply Reply Quote 0
          • R Offline
            raywo Module Developer @E3V3A
            last edited by

            @E3V3A I think your solution may be overly complicated. Why do you need JQuery?

            You can have a look at my recent module MMM-PublicTransportHafas which does exactly what you described:

            • has a multicolumn (not) coloured table
            • updates every so and so minutes (user configurable)
            • uses plain js to generate the table
            • uses another api to request JSON-data to populate the table

            Maybe this is a good starting point for you.
            Can you share your code you have?

            E 1 Reply Last reply Reply Quote 0
            • E Offline
              E3V3A
              last edited by

              I’ve solved one of the problems with the blocked due to MIME type mismatch error above, in this thread. Please look at that answer to import your external jquery related scripts.

              "Everything I do (here) is for free – altruism is the way!"
              MMM-FlightsAbove, MMM-Tabulator, MMM-Assistant (co-maintainer)

              1 Reply Last reply Reply Quote 0
              • E Offline
                E3V3A @raywo
                last edited by

                @raywo

                Your MMM look very nice and the code is indeed very clean, although quite different from what I’ve seen so far. However, I’m looking at this as an exercise, since it’s my first Module.

                So yes, using jquery + add-ons are definitely overkill, but has not yet been done before AFAICT. As you can see, in the demo.html, it makes doing fantastic tables using JSON a super breeze (obviously at the cost of external code and processing bloat). So since I hate making DOM from JS, I rather prefer using tools available, even if it means all this extra work and hair-pulling.

                I’ll soon update the repo code in the signature, once I get the table up.

                "Everything I do (here) is for free – altruism is the way!"
                MMM-FlightsAbove, MMM-Tabulator, MMM-Assistant (co-maintainer)

                R 1 Reply Last reply Reply Quote 0
                • R Offline
                  raywo Module Developer @E3V3A
                  last edited by

                  @E3V3A Thank you! It was indeed my goal to write more readable code. Oftentimes javascript code is a mess and I thought I can do better.

                  I’ve had a look at your code. It’s quite nice too. But of course it can be improved. ;)

                  Maybe you should consider putting the methods processData, getData and scheduleUpdate in another class or at least in the node_helper.js file which is meant for exactly this purpose.

                  E 1 Reply Last reply Reply Quote 0
                  • E Offline
                    E3V3A @raywo
                    last edited by

                    @raywo Hi Thank you fo r taking your time to look at this. I have now updated the code.
                    It runs and I created a new loadTabulate function, that is supposed to do exactly the same as in the demo.html file…it returns, but nothing is displayed. I don’t know how to debug this, since there are no errors.

                    Perhaps, I just doing this Tabulator inclusion all wrong. I have no idea how to proceed at this point.

                    "Everything I do (here) is for free – altruism is the way!"
                    MMM-FlightsAbove, MMM-Tabulator, MMM-Assistant (co-maintainer)

                    R 1 Reply Last reply Reply Quote 0
                    • R Offline
                      raywo Module Developer @E3V3A
                      last edited by raywo

                      @E3V3A Your code looks nicer this way. Well done!

                      What do you want to do next? Try to describe the goal. Maybe you should open an issue in GitHub where you describe what you want to do next. That way you will not forget what you wanted to achieve and others (like me) can see what you’re up to.

                      BTW: I left some comments on your code on GitHub.

                      E 1 Reply Last reply Reply Quote 0
                      • E Offline
                        E3V3A @raywo
                        last edited by E3V3A

                        @raywo Great! Thanks! I just answered…

                        What’s next? Well, the table never get shown, so fixing that is next.
                        Once all this demo works, it’s time to put it all into a module that is actually doing something.

                        "Everything I do (here) is for free – altruism is the way!"
                        MMM-FlightsAbove, MMM-Tabulator, MMM-Assistant (co-maintainer)

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