MMM-CalvinAndHobbes

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…