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.

    MMM-HTMLBox not displaying my 1 hour countdown timer html file

    Scheduled Pinned Locked Moved Unsolved Requests
    18 Posts 3 Posters 3.7k Views 3 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.
    • B Offline
      btni
      last edited by

      not sure if anyone can see this code below, i shall take a screen grab next and upload it

      <html>
      	<head>
      		<link rel="stylesheet" href="flipclock.css">
      
      		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
      
      		<script src="flipclock.js"></script>
      	</head>
      	<body>
      	<div class="clock" style="margin:2em;"></div>
      	<div class="message"></div>
      
      	<script type="text/javascript">
      		var clock;
      		
      		$(document).ready(function() {
      			var clock;
      
      			clock = $('.clock').FlipClock({
      		        clockFace: 'MinuteCounter',
      		        autoStart: false,
      		        callbacks: {
      		        	stop: function() {
      		        		$('.message').html('The clock has stopped!')
      		        	}
      		        }
      		    });
      				    
      		    clock.setTime(3598);
      		    clock.setCountdown(true);
      		    clock.start();
      
      		});
      	</script>
      	
      	</body>
      </html>
      
      1 Reply Last reply Reply Quote 0
      • B Offline
        btni
        last edited by

        0_1574985054807_base.html.jpg

        1 Reply Last reply Reply Quote 0
        • B Offline
          btni
          last edited by

          the file structure looks a bit messy as i have copied the files in a number of places to try to get it working, but currently running with all necessary files in the same location, the sub folder of MMM-HTMLBox

          0_1574985403249_files.JPG

          1 Reply Last reply Reply Quote 0
          • ? Offline
            A Former User
            last edited by

            MMM-HTMLBox is Just putting static HTML code into MagicMirror. as described on byline. It will not parse your JS code, that is not HTML.
            So if you need, you could make iframe wrapper to load your page.
            Or try MMM-Widgetinstead.

            B 1 Reply Last reply Reply Quote 0
            • B Offline
              btni @Guest
              last edited by

              Thanks @Sean i will try that

              1 Reply Last reply Reply Quote 0
              • B Offline
                btni
                last edited by

                ok I have been trying out different code in different modules like MMM-Widget and MMM-iFrames and still unable to get a 1hr coutdown to display.

                issue 1 - MMM-Widget - I cannot get it to display a local file. I have even tried creating a public subfolder and use url local location, but I cant seem to get any public folder to publish?

                Issue 2 - MMM-iFrame - Will display a local single test html file but if I use this code below it doesnt. Here is my code that is working in the www.w3schools.com website.

                Sorry I am a bit of a noob with html, js MM etc.

                I cant seem to add the code in here but here is a link to the w3schools site

                Your Code has Been Saved
                File has been saved to: https://www.w3schools.com/code/tryit.asp?filename=G0I4VVLAWBCN

                Thanks
                Dave

                ? 1 Reply Last reply Reply Quote 0
                • ? Offline
                  A Former User @btni
                  last edited by A Former User

                  @btni
                  Is this what you want?

                  0_1575278171064_ee7c245a-574a-41f1-913a-c6d436f9ed01-image.png

                  {
                    module: "MMM-Widget",
                    config: {
                      widgets: [
                        {
                          html:`
                  // Put your HTML & JS code into here.
                          `,
                          position: "top_left",
                          width: "800px",
                          height: "400px",
                          backgroundColor: "#FFF"
                        },
                  
                      ]
                    }
                  }
                  
                  G 1 Reply Last reply Reply Quote 0
                  • B Offline
                    btni
                    last edited by

                    Thanks Sean, sorry I left my update late last night, then when driving into work this morning remembered I had moved away from testing the MMM-Widget and was going to test it first thing this morning. You beat me to it, thank you for your help, I can now tweak the background and text colour etc.

                    Thanks again
                    David

                    ? 1 Reply Last reply Reply Quote 0
                    • ? Offline
                      A Former User @btni
                      last edited by

                      @btni
                      But if you need just a countdown itself, there be plenty of countdown(and more) modules. How about using them?

                      1 Reply Last reply Reply Quote 0
                      • B Offline
                        btni
                        last edited by btni

                        Hi Sean,
                        I think with my very limited knowledge of the code, I first started looking at some of the modules like Doomsday, countdown etc but from what i could see they all counted down to a date/time, rather than now + 60 minutes.
                        I was then trying to just get html code and use the other modules, but still hitting the same wall. I still cant even get the html code working inside the MMM-Widget lol.

                        If you can help steer me to a countdown module that can reset to 60 minutes via MMM-Remote - restart MM then that would be great, or if you can see where I am going wrong below it would help. I have shorted to a sample html file.
                        At the start of the HTML code, do I need the file header items like DOCUTYPE, html and body? It makes it dissapear in the formatted code below.

                        {
                          module: "MMM-Widget",
                          config: {
                            widgets: [
                              {
                                html:`
                        <!DOCTYPE html>
                        <html>
                        <body>
                        <h1>My First Heading</h1>
                        <p>My first paragraph.</p>
                        </body>
                        </html>        `,
                                position: "top_left",
                                width: "800px",
                                height: "400px",
                                backgroundColor: "#FFF"
                              },
                        

                        0_1575282743647_MMMWidget.JPG

                        ? 2 Replies 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