4. I got sucked up into a magic mirror! (and need some help)
MagicMirror² v2.5.0 is available! For more information about this release, check out this topic.

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

  • E

    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!

    0
  • E

    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 ?

    1
  • E

    Anyone can give some hints?

    0
    R
     1 Reply
  • R
    Module Developer

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

    0
    E
     1 Reply
  • E

    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.

    0
  • E

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

    0
    R
     1 Reply
  • R
    Module Developer

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

    0
    E
     1 Reply
  • E

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

    0
    R
     1 Reply
  • R
    Module Developer

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

    0
    E
     1 Reply
  • E

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

    0
    R
     1 Reply