MMM-CalvinAndHobbes

rahultadak

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!

stroo333

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

plainbroke

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

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.

wishmaster270

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;
  }
}

plainbroke

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

mdiorio

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

plainbroke

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

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.