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-CalvinAndHobbes

    Scheduled Pinned Locked Moved Entertainment
    9 Posts 5 Posters 1.9k Views 6 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.
    • R Offline
      rahultadak
      last edited by

      My wife loved the idea of comics on our MagicMirror and asked for Calvin and Hobbes to be shown on it. I couldn’t find it on the MagicMirror Github’s 3rd party modules page, so I wrote one!

      It simply scrapes the image, and displays it on your Mirror. Best part is, for the Sunday comics, it automatically sets up scrolling of the comic so that you don’t use all the space on your mirror.

      MMM-CalvinAndHobbes

      I hope you guys like it!

      1 Reply Last reply Reply Quote 0
      • S Offline
        stroo333
        last edited by

        just installed it, works great. Any way to adjust the size?

        plainbrokeP 1 Reply Last reply Reply Quote 0
        • plainbrokeP Offline
          plainbroke @stroo333
          last edited by

          @stroo333
          Did you ever get an answer from the developer of this module?
          I really would like to be able to resize it also.
          Plus the sunday comic not scrolling, resize would be a plus there too.

          Slow learner. But trying anyways.

          wishmaster270W 1 Reply Last reply Reply Quote 0
          • wishmaster270W Offline
            wishmaster270 Module Developer @plainbroke
            last edited by wishmaster270

            @plainbroke
            Hi, i did not use the value but made a quick setup to figure out how to resize the image…

            Scrolling did not work in my browser (Firefox). I disabled the complete scrolling and sizing of the module with the config option “limitComicHeight”.
            My config looks like this:

                             {
            			module: 'MMM-CalvinAndHobbes',
            			position: 'top_center',
            			config: {
            				invertColors: false, // Optional, default: false
            				grayScale: false, // Optional, default: false
            				updateInterval: 1000 * 60 * 60 * 12, // 12 Hr
            				limitComicHeight: -1,
            			},
            		},
            

            Then you can define the height of the image in your custom.css with:

            #cahcomiccontent {
              height: 100px;
            }
            

            Edit: If you want to use sliding you can do that with CSS-Animations that should work in all modern browsers.
            Add something like the following to your custom.css will do the trick:

            .MMM-CalvinAndHobbes .module-content {
              max-height: 100px;
              height: 100px;
              overflow: hidden;
            }
            
            #cahcomiccontent {
              height: 300px;
            }
            
            #cahcomiccontent {
              animation-direction: normal;
              animation-duration: 5s;
              animation-timing-function: steps(2, end);
              animation-name: slide;
              animation-iteration-count: infinite;
            }
            
            @keyframes slide {
              0% {
                margin-top: 0px;
              }
            
              50% {
                margin-top: -100px;
              }
            
              100% {
                margin-top: -300px;
              }
            }
            

            Explanation:
            First we limit the height of the outer container “.module-content” to a specific height (100px) and hide all parts that are bigger (overflow: hidden).
            No we set the height of the inner container (the image with id cahcomiccontent) to a height that is bigger than the outer one ( height: 300px).
            In a third step we define a custom animation (@keyframes slide) and add it to the image container (the one with id cahcomiccontent).
            If you want to dive deeper to CSS animations i can suggest this page.

            wishmaster270W 1 Reply Last reply Reply Quote 0
            • wishmaster270W Offline
              wishmaster270 Module Developer @wishmaster270
              last edited by

              If you prefer scrolling from left-right than up-down animations are your friend as well:

              .MMM-CalvinAndHobbes .module-content {
                max-width: 300px;
                width: 300px;
                overflow: hidden;
              }
              
              #cahcomiccontent {
                width: 600px;
              }
              
              #cahcomiccontent {
                animation-direction: normal;
                animation-duration: 30s;
                animation-timing-function: steps(2, end);
                animation-name: slide;
                animation-iteration-count: infinite;
              }
              
              @keyframes slide {
                0% {
                  margin-left: 0px;
                }
              
                50% {
                  margin-left: -300px;
                }
              
                100% {
                  margin-left: -600px;
                }
              }
              
              plainbrokeP 1 Reply Last reply Reply Quote 0
              • plainbrokeP Offline
                plainbroke @wishmaster270
                last edited by

                @wishmaster270
                I used the second one and removed the animation it is big enough on my screen now we can read it from across the living room. Much appreciate the wisdom you have imparted on me. Waiting for Sunday to see if need the animation part of the css code.

                Slow learner. But trying anyways.

                1 Reply Last reply Reply Quote 0
                • M Offline
                  mdiorio
                  last edited by

                  Figured I’d comment here for those that still use it or may want to.

                  The website updated the code and it broke the module. I created a new pull request to fix it. Not sure this will get merged into main, but given it’s a static module with no updates in 6 years, it’s pretty safe to just manually replace the code in your local module.

                  https://github.com/rahultadak/MMM-CalvinAndHobbes/pull/3/files

                  Otherwise, I have forked it here. Not planning on updating it unless it breaks again and even then it will be as time allows.
                  https://github.com/B3DTech/MMM-CalvinAndHobbes

                  plainbrokeP 1 Reply Last reply Reply Quote 1
                  • G GrandizerGo referenced this topic on
                  • plainbrokeP Offline
                    plainbroke @mdiorio
                    last edited by

                    @mdiorio
                    Hey bud,
                    Can you look at the code again and see if you can fix it not updating the comic daily.
                    Maybe it is a API issue, and I need to sign up for it or something. I am not any good at this code stuff, but I really enjoy all the work you and others put into this site…

                    Slow learner. But trying anyways.

                    1 Reply Last reply Reply Quote 0
                    • plainbrokeP Offline
                      plainbroke
                      last edited by plainbroke

                      CAN someone help me?
                      Calvin and Hobbes is my WIFEs favorite part of my MM.
                      My problem is it loads the same comic over and over never changes…
                      This started a few months ago.
                      I removed it and reinstalled it,
                      Then I was getting blank screen saying loading. NEVER DID.
                      Then replaced the node_helper.js file with the one from mdiorio’s post above. and it now gets a the same comic instead of just a loading message.
                      So then I thought I will remove old version and loaded B3DTech’s
                      That sent me back to loading message and never showed a comic.
                      Then I went back to the original version from rahultadak then had to reload the node_helper.js and I am back to the same old comic showing all the time…
                      PLEASE HELP.
                      Thanks in advance to the incredible crew on this site.

                      Slow learner. But trying anyways.

                      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 Sam, technical setup by Karsten.
                      This forum is using NodeBB as its core | Contributors
                      Contact | Privacy Policy