search

yonicd / slickR

slick carousel htmlwidget for R
https://yonicd.github.io/slickR/
Other
161 stars 14 forks source link

Browser side linking to other chart #62

Closed lukas-rokka closed 3 years ago

lukas-rokka commented 3 years ago

Thanks for a slick package!

I would like to do something like fig bellow. Having a slick carousel autoplaying (at 50-100 ms) through a large set of images so that it looks like a time lapse video. In the same time I want to have chart that updates according to which image is showing in the carousel. Going through a Shiny server is too slow so I think it there need to a direct link on the browser side. I came across crosstalk and think it could be used to achieve such linkage on the browser side.

So my question is if there are any plans to add support for crosstalk or if you have any pointers on how I could achieve such fast linkage with an other chart?

202109_wind2

yonicd commented 3 years ago

Thanks for trying the package. Currently crosstalk is not supported by slickR.

you could try to show images via a regular raster viewer instead of the carousel and connect crosstalk to it.

lukas-rokka commented 3 years ago

ok, thanks. Got it working decently with SlickR going trough the server side using this code to get image index and Plotly for fast rendering (only updating parts of the chart).

Maybe regular raster viewer would work as well. But found SlickR to work good as it has lazyLoad (it is several GB of images so really just want to load those that are displayed).

yonicd commented 3 years ago

Sounds good. Glad the package solves your problem. Closing

lukas-rokka commented 3 years ago

One more thing that might be helpful for other people.

I noticed I can't run slick javascript methods directly like suggest in the slick documentation: $('.shinyId).slick('slickGoTo', 1) or $('#shinyId).slick('slickGoTo', 1). Probably because SlickR puts a few outer divs and creates a random class name for actual slick slider element. A work around that worked for me is to query down two levels, for example like this: $('#shinyId').find('.slick-slider').slick('slickGoTo', 1). shinyId is the id given to the slider in Shiny.