MagicMirror Forum

    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unsolved
    • Solved
    • MagicMirror² Repository
    • Documentation
    • Donate
    • Discord
    MagicMirror² v2.20.0 is available! For more information about this release, check out this topic.

    Module UI Design

    Development
    2
    4
    263
    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.
    • T
      Temisola1 last edited by

      How can I go about designing the UI for my module. Is there any site I can use as a playground to design the UI?

      Thanks,

      S 1 Reply Last reply Reply Quote 0
      • S
        sdetweil @Temisola1 last edited by

        @Temisola1 nothing MM specific…

        just design your page like always… understanding that your ‘body’ content should be as specific as possible…

        a table, or some such, small, say 1/4 page width or smaller… my charts are 400x400 pixels on a 1920/1280 display.
        …the head, and body tags themselves are supplied my MM…

        look at the MM index.html
        each ‘position’: value matches with one of those areas… modules are placed from config.js, top to bottom, fifo.
        second module is pushed down by 1st in that same area…screen is clipped at the edges (main.css, body overflow:hidden)

        Sam

        Create a working config
        How to add modules

        1 Reply Last reply Reply Quote 0
        • T
          Temisola1 last edited by

          @sdetweil said in Module UI Design:

          n

          Okay, so I I have to create another html tag or will it inherit the master?

          S 1 Reply Last reply Reply Quote 0
          • S
            sdetweil @Temisola1 last edited by sdetweil

            @Temisola1 what do you mean inherit the master?
            you don’t need to create any new tags…

            (the forum doesn’t like < , so I will skip it for this discussion)

            head
            fddfd
            /head
            body
            div
            p>some text
            table
            tr
            td
            td
            td
            /tr
            /div
            

            the part that starts with div, thru end div, you can insert into the wrapper div innerHtml

            head and body are controlled by MM

            there are default classes in ~/MagicMirror/css/main.css
            you can add more by adding them to ~/MagicMirror/css/custom.css

            you can also have a css file local to the module folder, and include it with the getStyles() method response
            (and those can be overridden in the custom.css)

            Give it a try, you’ll get it pretty quick

            Sam

            Create a working config
            How to add modules

            1 Reply Last reply Reply Quote 0
            • 1 / 1
            • First post
              Last post
            Enjoying MagicMirror? Please consider a donation!
            MagicMirror created by Michael Teeuw.
            Forum managed by Paul-Vincent Roll and Rodrigo Ramírez Norambuena.
            This forum is using NodeBB as its core | Contributors
            Contact | Privacy Policy