MMM-CalvinAndHobbes

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.