search

fixed / industriesalonfunk

0 stars 0 forks source link

Implement Slideshow component #8

Closed fixed closed 11 years ago

fixed commented 11 years ago

Relatively easy. Kind of works the same like the Video component but instead of creating a <video> DOM element, you create a bunch of <img> elements.

Then you take the "blend" effect of Seriously and use that as source node for all other effects. the "top"/"bottom" properties in "blend" will be the image-elements (the current and the next one). For switching, you need to do the timeouts and current image handling yourself.

fde31 commented 11 years ago

Just to let you know: I'm close to pushing my implementation of a slideshow as soon as I cleaned up the code. Will let you know but thought it's helpful to let you know. :)

alponet commented 11 years ago

Thanks that you let me know.

alponet commented 11 years ago

Just to let you know: I think "Thanks for letting me know" would be better English... but maybe you already know.

fde31 commented 11 years ago

haha no worries. I just pushed the SlideShow and refactored the VideoMedia and VideoEffect components. You might wanna do a review?

There is also one issue we have to solve: SeriouslyJS doesn't redraw effects on static images unless a Node in the chain changes. This could be achieved by slightly changing the opacity value of the blender based on an requestAnimationFrame function call when a SlideShow station is loaded but it still sounds like a hack.

@fixed & @alponet any thoughts about this?! Please perform a pull and check out the new SlideShow channel. As mentioned in one of the commites I used two of your images ( @fixed ).. I hope that's ok?!

alponet commented 11 years ago

Looks good to me.

Your solution to animate effects on static images sounds like a hack, yes. Have you seen the demo of seriously.js (js/lib/seriouslyjs/index.html)? There the effects on the static colorBars image are animated, so I wonder if there is a more elegant way of solving this.

fde31 commented 11 years ago

Ok. I just pushed the enhancement and it turns out we needed that for video, too. A closer look at the SeriouslyJS example revealed that it actually uses a similar approach based on requestAnimationFrame or a setTimeout fallback (thanks for the hint @alponet ). Furthermore some effects have a timer or time property one can set to the current time in order to trigger a redraw. I brought that into place and made use of our AudioContext time in order to force the redraw.

I activated some properties in TVGlitch again that didn't work before. Anyway all in all this should be done now. Can someone just pull, double check and then give feedback/close the issue?! Thx!