• Recent
  • Tags
  • Unsolved
  • Solved
  • MagicMirror² Repository
  • Documentation
  • 3rd-Party-Modules
  • Donate
  • Discord
  • Register
  • Login
MagicMirror Forum
  • Recent
  • Tags
  • Unsolved
  • Solved
  • MagicMirror² Repository
  • Documentation
  • 3rd-Party-Modules
  • Donate
  • Discord
  • Register
  • Login
  1. Home
  2. doubleT
  3. Posts
A New Chapter for MagicMirror: The Community Takes the Lead
Read the statement by Michael Teeuw here.
D
Offline
  • Profile
  • Following 0
  • Followers 4
  • Topics 4
  • Posts 176
  • Groups 1

Posts

Recent Best Controversial
  • RE: Vanity Mirror, thy name is woman. (using laptop)

    @Mykle1 said in Vanity Mirror, thy name is woman. (using laptop):

    I really like this idea, but seeing as it was your idea, I’ll let you have first crack at it. ;^)

    I have a NYE timer, let me see if I can update it and make the target time more easily exchangable. ;)

    posted in Show your Mirror
    D
    doubleT
    Jan 9, 2018, 12:53 PM
  • RE: Regions

    You’re welcome.
    Btw. depending on how you control your Pi and Mirror, you don’t need to restart your whole Pi. In this case, just refreshing the browser should work, or restarting the Mirror process, if it doesn’t.

    posted in Core System
    D
    doubleT
    Jan 8, 2018, 8:11 PM
  • RE: Regions

    @Peter said in Regions:

    . bottom_bar

    That’s what I ment with exact code. Because this will do nothing, it should be

    .bottom.bar
    

    Because the element you want to address has both classes, there’s no space in between.
    But I see where it went wrong: “bottom_bar” is how you assign a module to a region in the config.js. But that’s not how you address it in css.

    Can you show us your problem with either a screenshot or a photo? If I understand right, you have

    • Newsfeed in bottom_bar (css: .region.bottom.bar .container .module)
    • a module in bottom_left (css: .region.bottom.bar .region.bottom.left)
    • something in bottom_right (css: .region.bottom.bar .region.bottom.right)
      Important: “.region.bottom.bar .container” will address ALL of them because of the structure.

    Usually, the bottom_bar should claim its place as needed and push the other two up as necessary. So that would be normal (and is what you described).

    I’d try

    .region.bottom.bar .container .module.newsfeed {
        height: ???px; /* height of the module with maximum lines possible */
    }
    
    posted in Core System
    D
    doubleT
    Jan 8, 2018, 7:16 PM
  • RE: MMM-Podcast don't show/load the latest video

    Ah, debugging. Welcome to the live of a developer. Good luck.

    posted in Troubleshooting
    D
    doubleT
    Jan 8, 2018, 5:50 PM
  • RE: Regions

    @Peter said in Regions:

    .regio bottom_bar.

    Can you copy and paste your exact code? It’s important that you address it with “.region.bottom” (no space, and note the dots)

    I posted about addressing elements in CSS before, see here.

    posted in Core System
    D
    doubleT
    Jan 8, 2018, 3:46 PM
  • RE: Changing the length of the line under the header

    @cruunnerr said in Changing the length of the line under the header:

    Was just hoping there is an amazing trick to use the custom.css for exactly my problem XD

    There are a lot of amazing tricks. You can do this in custom.css:

    header {
        border-bottom: none; /* instead of 1px solid #666; to remove all lines from all the headers */
        width: 50%;          /* add this to change the width of all module headers */
    }
    .middle header {
        /* addressing the header like this will only influence headers within the middle region */
    }
    #module_3_calendar header {
        /* only addresses the calendar header (find out the modules id before) */
    }
    .shoppinglist header {
        /* or use the class, which should be the module's name */
    }
    
    posted in Custom CSS
    D
    doubleT
    Jan 7, 2018, 10:18 PM
  • RE: MMM-WunderGround24Hours: How to set transparent background?

    The module’s css file is the last one to be called so its values override that of the custom.css. I should have mentioned that. You can try

    body, html {
    	background: none !important;
    }
    

    Changing settings of items not within the module is bad practice imho and shouldn’t be done (read: setting the main background when the module’s css should only do stuff within the module itself), but customizing within the module is also bad practice. And lastly, using !important is also not best practice, but in this case, I think we need to use it.

    Edit: Disregard that. I just saw that it’s an iframe.
    You have to change the module’s main.css. Usually, you cannot set css values in the content of the iframe (though I’m not 100% sure in this case, where it’s both within the same domain) without some jQuery and I guess you don’t want to build a module just to style another module. ;)

    posted in Troubleshooting
    D
    doubleT
    Jan 7, 2018, 5:26 PM
  • RE: MMM-WunderGround24Hours: How to set transparent background?

    That module has a css file (public/css/main.css) that sets the background color to black:

    body, html {
    	background: #000;
    

    #000 is shortened hexadecimal code for black. The line should read

    	background: none;
    

    But: don’t write this in the modules own css file. That’s not the clean solution and brings trouble when the module is updated in the future.

    You probably already edited the custom.css file, right? Try adding:

    body, html {
    	background: none;
    

    What I find odd is that you said it’s just that module but that code would apply to the whole screen.

    posted in Troubleshooting
    D
    doubleT
    Jan 7, 2018, 2:27 PM
  • RE: wrapper.innerHTML

    I was interrupted when I wrote my answer and forgot to add what I was initially going to say. I decided to write a new reply instead of editing the above, not to confuse anyone and keep the two apart.

    There is another way to update the content of an element (that has been created in getDom before):

    Example 3, .innerHTML:

    start: function() {
    // stays the same as above
        setTimeout(function() {
            this.magicContent(self);  // this will call the function "magicContent"
        }, 10 * 1000);                // 10 seconds after the start, 5 seconds after "buildContent"
    },
    // we don't touch getDom or buildContent!
    magicContent: function() {
        document.getElementById("my-content").innerHTML = "Changed <i><b>yet again!";
    }
    

    document.getElementById(“my-content”).innerHTML = “content”; will update the selected element (the div with the id “my-content”) with the selected content without having to call updateDom().

    Keep in mind that this will only work on elements that were created before in getDom, so it will not work within start: function() …

    Caution! This can also update elements of other modules, so be careful and use unique IDs.

    posted in Troubleshooting
    D
    doubleT
    Jan 7, 2018, 12:02 AM
  • RE: wrapper.innerHTML

    In this context, yes.

    “wrapper” is just a variable that holds the content of the (new) HTML element that you create there and “getDom” grabs the content that is to be put into the DOM (Document Object Model, the raw content/structure), => rendered.

    Example 1, basic:

    getDom: function() {
        var wrapper = document.createElement("div");
        wrapper.setAttribute"id", "my-content");
    //  It's always a good idea to make an element addressable
        wrapper.innerHTML = "Hello World!";
        return wrapper;
    }
    

    getDom is called upon starting, grabbing the elements and putting them in place and if you want to change something later on, you need to call “this.updateDom()” to render it again with the new content.

    Example 2, updating:

    start: function() {
        var self = this;
        Log.info("Starting module: " + this.name);
        this.myContent = "nothing yet"; // global variable, available to all functions
        setTimeout(function() {
            this.buildContent(self);  // this will call the function "buildContent"
        }, 5 * 1000);                 // 5 seconds after the start (5 * 1000 ms)
    },
    getDom: function() {
        var wrapper = document.createElement("div");
        wrapper.setAttribute"id", "my-content");
        wrapper.innerHTML = this.myContent ; // will show "nothing yet" at the beginning
        return wrapper;
    },
    buildContent: function(self) { // see above, this will be started after 5 seconds
    //  do your content building
        this.myContent = "New content!"; // changes the value of the global variable
        self.updateDom(); // call for the DOM to be updated, thus showing the new content
    }
    

    I hope that’s somewhat understandable.

    posted in Troubleshooting
    D
    doubleT
    Jan 6, 2018, 3:43 PM
  • 1 / 1
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