yonicd / slickr Goto Github PK

View Code? Open in Web Editor NEW

158.0 9.0 14.0 108.24 MB

slick carousel htmlwidget for R

Home Page: https://yonicd.github.io/slickR/

License: Other

R 20.00% Ruby 0.09% CSS 2.86% JavaScript 70.23% Less 3.25% SCSS 3.56%

slick htmlwidgets r javascript

slickr's People

Contributors

Stargazers

Watchers

Forkers

timelyportfolio applied-statistic-using-r nikolayvoronchikhin wanglaok thioyedev kashenfelter kuzmenkov111 amrrs knapply yogat3ch kamilkandzia han-tun cpsievert

slickr's Issues

reproduce README gif

Is there code somewhere to reproduce the GIF in the README? It looks like you have a way to embed widgets in the carousel, but I can't seem to get it to work.

Thanks!

Blue question marks in Viewer window

Hi,

Thanks for the package. I tried to reproduce the code on RStudio, but when I run:
slickR(obj = teamImg,slideId = 'ex1',height = 100,width='100%')

I only see in the Viewer blue question marks

The slide show seems to work, but images are not displayed, even though the urls in teamImg are correct.

Do you know what could be the issue?
I am running R-3.3.3 and RStudio Version 1.0.136
Thanks,

Best,

Marco

first of all: Thanks a lot for slickR!
At the moment the link targets are set to "_blank" by default (https://cran.r-project.org/web/packages/slickR/vignettes/basics.html#adding-links). I would like to link on the same page and replace with target = "_self", but did not yet find a documented way to achieve this. Is there such an option? If not, I think it would make a great feature.

Thanks, G

slickR with HTML code

Hi,

Is it possible to use it to simply display HTML code?

Thanks a lot for this wonderful package!

Error thrown by HTMLTools

slickR's example code seems to have a conflict with htmltools.

slickR::slickR( list.files(file.path(getwd(),"assets"), full.names = TRUE, pattern = 'png'), height = 200, width = '95%')
produces the following error:

Error in htmltools::tag(tag, varArgs, .noWS) : unused argument (.noWS)

Is this a versioning issue on my end or something else?

autoplay

Is there any easy way to set up autoplay so carousels will slide without prompting?

Enhancement: list of raw images as input

If images do not reside on the file system, (but somewhere in the database), then saving them to temporary files to feed them to slickR seems the only option?

[Docs] Cannot build pkgdown site

I get the following error when trying to build a pkgdown site via build_site() with the plots.Rmd vignette:

Error : callr subprocess failed: package or namespace load failed for 'svglite' in dyn.load(file, DLLpath = DLLpath, ...):
 unable to load shared object '/Users/harshb/Desktop/pkgdown_scripts/renv/library/R-3.6/x86_64-apple-darwin15.6.0/systemfonts/libs/systemfonts.so':
  dlopen(/Users/harshb/Desktop/pkgdown_scripts/renv/library/R-3.6/x86_64-apple-darwin15.6.0/systemfonts/libs/systemfonts.so, 6): Library not loaded: /opt/X11/lib/libfreetype.6.dylib
  Referenced from: /Users/harshb/Desktop/pkgdown_scripts/renv/library/R-3.6/x86_64-apple-darwin15.6.0/systemfonts/libs/systemfonts.so
  Reason: image not found
Error: callr subprocess failed: callr subprocess failed: package or namespace load failed for 'svglite' in dyn.load(file, DLLpath = DLLpath, ...):
 unable to load shared object '/Users/harshb/Desktop/pkgdown_scripts/renv/library/R-3.6/x86_64-apple-darwin15.6.0/systemfonts/libs/systemfonts.so':
  dlopen(/Users/harshb/Desktop/pkgdown_scripts/renv/library/R-3.6/x86_64-apple-darwin15.6.0/systemfonts/libs/systemfonts.so, 6): Library not loaded: /opt/X11/lib/libfreetype.6.dylib
  Referenced from: /Users/harshb/Desktop/pkgdown_scripts/renv/library/R-3.6/x86_64-apple-darwin15.6.0/systemfonts/libs/systemfonts.so
  Reason: image not found

variable sizing for synched carousels?

Is there anyway to have synched carousels where the top images are larger than the bottom?

problems with SVG images

I am trying to create a simple caroussel with slickR and a few SVG images but I get this error after the call to slickR::slickR(...)

Error in checkStandalone(fL) : SVG not standalone

The thing is my SVG is perfectly "standalone". Indeed, its first few lines are:

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="801pt" height="552pt" viewBox="0 0 801 552" version="1.1">
<defs>
<g>
<symbol overflow="visible" id="glyph0-0">
<path style="stroke:none;" d="M 1.25 0 L 1.25 -15.996094 L 8.75 -15.996094 L 8.75 0 Z M 2.5 -1.25 L 7.5 -1.25 L 7.5 -14.746094 L 2.5 -14.746094 Z "/>
</symbol>

Checkin on your code under readImage.R, the above error seems to be produced by a line which attempts to locate the string "xmlns" on the first line of the SVG. notice above this is found on the SECOND LINE. Should this function be relaxed to find "xmlns" on any few first lines of the .svg?

checkStandalone <- function(x){
  if(!grepl("xmlns", readLines(x, n = 1))){
    stop('SVG not standalone')
  }else{
    TRUE
  } 
}

Is there a way to display image title/custom text about the image thats being displayed?

My issue was to find a way to display the image name some where in the shiny app, either on the image or some other place to give viewers a description about the image, but was not able to figure that out.
Being able to display multiple images, it would be nice to add image name/custom text to present more details about that image.

slickR shiny vignette broken

I just tried to run the slickR shiny vignette but it seems to be broken.

Once the radioButtons are used to switch to stacked or synch mode the input$slick_output_current isn't providing any data.
Also the lower carousel isn't rendered properly:

> sessionInfo()
R version 4.0.3 (2020-10-10)
Platform: x86_64-w64-mingw32/x64 (64-bit)
Running under: Windows 10 x64 (build 19042)

Matrix products: default

attached base packages:
[1] stats     graphics  grDevices utils     datasets  methods   base     

other attached packages:
[1] gdtools_0.2.3   svglite_1.2.3.2 slickR_0.5.0    xml2_1.3.2      shiny_1.6.0    

loaded via a namespace (and not attached):
 [1] Rcpp_1.0.6        rstudioapi_0.13   magrittr_2.0.1    xtable_1.8-4      R6_2.5.0          rlang_0.4.10     
 [7] fastmap_1.1.0     tools_4.0.3       jquerylib_0.1.3   withr_2.4.1       systemfonts_1.0.1 htmltools_0.5.1.1
[13] ellipsis_0.3.1    yaml_2.2.1        digest_0.6.27     lifecycle_0.2.0   crayon_1.4.0      later_1.1.0.1    
[19] sass_0.3.1        base64enc_0.1-3   htmlwidgets_1.5.3 promises_1.1.1    cachem_1.0.1      mime_0.9         
[25] compiler_4.0.3    bslib_0.2.4       jsonlite_1.7.2    httpuv_1.5.5

library(shiny)
library(svglite)
library(slickR)

ui <- fluidPage(
  sidebarLayout(
    sidebarPanel(
      
      sliderInput(inputId = "plot_num", 
                  label = "Number of Plots:", 
                  min = 1, max = 20, value = 5),
      
      sliderInput(inputId = "n_obs", 
                  label = "Number of observations:", 
                  min = 10, max = 500, value = 100),
      
      shiny::radioButtons('slick_type',
                          label = 'Carousel Type',
                          choices = c('single','stack','synch'),
                          selected = 'single',
                          inline = TRUE),
      
      shiny::verbatimTextOutput('current')
    ),
    mainPanel(
      
      slickROutput("slick_output",width='100%',height='200px')
      
    )
  )
)

server <- function(input, output) {
  
  # Create content for the carousel
  
  plots <- eventReactive(c(input$n_obs,input$plot_num),{
    
    replicate(input$plot_num,{
      
      xmlSVG({hist(rnorm(input$n_obs),
                   col = 'darkgray',
                   border = 'white')},
             standalone=TRUE)
      
    },simplify = FALSE)
  })
  
  # renderSlickR (We create the slickR objects here)
  
  output$slick_output <- renderSlickR({
    
    x <- slickR(plots(),
                slideId = 'myslick',
                height = 600,
                width = '50%') + 
      settings(slidesToShow=3,centerMode=TRUE)
    
    switch(input$slick_type,
           'single' = x,
           'stack'  = x %stack% x,
           'synch'  = x %synch% x
    )
    
  })
  
  # Observe the active slick
  
  # The htmlwidget is observed by shiny and information can be retrieved. 
  
  # Using the output name you set for the `renderSlick` object in this example
  # it is `output$slick_output`
  
  # Using this you can interact server-side "on click" of the active carousel
  # by accessing elements in `input$slick_output_current$`
  
  # `.clicked_slide`   : The index of the clicked element|
  # `.relative_clicked`: The relative position of the clicked element|
  # `.center_slide`    : The index of the center element|
  # `.total_slide`     : The total number of elements in the carousel|
  # `.active_slide`    : The ID of the active carousel|
  
  # We will store this information in a new reactive environment
  active_slick <- shiny::reactiveValues()
  
  shiny::observeEvent(input$slick_output_current,{
    clicked_slide    <- input$slick_output_current$.clicked
    relative_clicked <- input$slick_output_current$.relative_clicked
    center_slide     <- input$slick_output_current$.center
    total_slide      <- input$slick_output_current$.total
    active_slide     <- input$slick_output_current$.slide
    
    if(!is.null(clicked_slide)){
      active_slick$clicked_slide    <- clicked_slide
      active_slick$center_slide     <- center_slide
      active_slick$relative_clicked <- relative_clicked
      active_slick$total_slide      <- total_slide
      active_slick$active_slide     <- active_slide
    }
  })
  
  # Show in the UI the values in active_slick
  
  output$current <- renderText({
    l <- shiny::reactiveValuesToList(active_slick)
    paste(gsub('_',' ',names(l)), unlist(l),sep=' = ',collapse='\n')
  })
  
}

shinyApp(ui = ui, server = server)

Synch 3 Carousels and Change Color of Text

I am using the slickR package in R for a Shiny app and am looking to synch 3 carousels, as well as trying to change the color of the text (default is a blue, trying to change to black).

The three carousels to be synched are:
Text above the image
Image
Text below the image

Creating a simple example, trying to use nested parentheses, but this doesn't work.

library(slickR)

df <- nba_player_logo[1:20, ]

df$Carousel_Position <- as.character(1:20)

# Photo Slides
photos_slides <- slickR(obj = df$uri,height = 100, width = "100%")

# Text Slides
carousel_positions_slides <- slickR(obj = df$Carousel_Position, slideType = 'p')
names_slides <- slickR(obj = df$name, slideType = 'p')


carousel_settings_arrows <- settings(initialSlide = 0,
                                     slidesToShow = 5, 
                                     slidesToScroll = 5, 
                                     focusOnSelect = TRUE,
                                     autoplay = FALSE,
                                     arrows = TRUE)



carousel_settings_no_arrows <- settings(initialSlide = 0,
                                        slidesToShow = 5, 
                                        slidesToScroll = 5, 
                                        focusOnSelect = TRUE,
                                        autoplay = FALSE,
                                        arrows = FALSE)




( (carousel_positions_slides + carousel_settings_no_arrows) %synch% (photos_slides + carousel_settings_arrows) ) %synch% (names_slides + carousel_settings_no_arrows)

When I try this, when clicking the left and right arrows, the images and player names update correctly, but the carousel positions (top text) do not. It just remains 1-5. Is there a way to synch 3 carousels?

Also, as I mentioned, I am looking to change the color of the text from the default blue to black. Is there a way to do this? I am pretty well-versed in R, but do not know much CSS and Javascript.

Thanks a lot!

IE 11 compatibility

First of all, thank you for this wonderful package.

Unluckily I'm trying to run a simple shiny app which includes a slickROutput from a renderSlickR.
Everything works fine on any browser except for Internet Explorer 11 and Microsoft Edge.
We all, of course, know that those two browsers are the hardest to work on but I was wandering if you are aware of this problem and if it may be related to other issues (such as jquery...).

Thank you in advance,
Flavio

Change figure size according to browser window size

Hi,

I'm new to slickR, I wonder if there are any parameters or functions to change figure size according to browser window size automatically. When the figure size is larger than the browser window, the figure is not fully displayed.

I'm using slickR 0.5.0, the codes I used:

output$carousel <- renderSlickR({
    slickR(list.files(path = './',full.names = T,pattern = "png"),
           slideId = 'myslick') +
      settings(dots = TRUE,
               autoplay = TRUE)
  })

using slickR for mobile

I noticed here that there must be a way to set settings for the carousel to be responsive for mobile as well.

In the documentation for slickR::settings I read responsive - object, Object containing breakpoints and settings objects (see demo). Enables settings sets at given screen width. Set settings to "unslick" instead of an object to disable slick at a given breakpoint., Default: none

Unfortunately, I cannot find the demo. Could you please provide an example on how to set this up in R? Thanks for you work!

error with the basic example?

Hi just installed this and here is my enviroment.

slickR_0.4.9  
 htmlwidgets_1.3 
 htmltools_0.3.6

however when I run the example:

slickR(obj = test ,height = 100, width = "95%") + 
    settings(dots = TRUE)

I get this error:

Error in htmltools::tag(tag, varArgs, .noWS) : unused argument (.noWS)

is this some sort of version error? thanks.

Sizing Issue (Flexdashboard)

Hello,

Before I begin, can I just say thank you for this wonderful package!

Unfortunately, I'm coming across one small issue though I am unsure the exact cause. As you can see below when I run the document and use the inbuilt viewer, the carousel (vertical) displays at the correct image sizes, and scrolls vertically as intended.

Unfortunately, when I open it in the browser (internet explorer, edge, chrome) the images become stretched and only one is visible at a time? The same is true when I deploy to shinyapps.io. See below.

Here is the code:

I've also attached a .rmd file with a comparable layout should the layout be the issue (see test.zip)
test.zip

###Institutes {data-width=200}

```{r, echo=FALSE}
ImgLogo = c("http://ukuniversitysearch.com/img/unilogo_310.png",
"http://www.polyomics.gla.ac.uk/images/uni_glasgow_logo.png",
"http://files.pluca.webnode.com/200000002-924a893448/UoB_logo.png","http://www.fitforworkeurope.eu/getimage.aspx.ID-351338.jpg",
"http://www.southampton.ac.uk/assets/imported/transforms/content-block/LinkImage/0E77997E85664C9CBB37D3BD08163288/ArthritisResearch_HZ_RGB_Logo_300dpi.jpg_SIA_JPG_fit_to_width_INLINE.jpg",
"http://spencerdubois.co.uk/images/made/85d3e9bce8919225/Arthritis_Research_Web-02_420_215_90_c1.jpg",
"http://cdn3.digitalartsonline.co.uk/cmsdata/features/3655443/nhs-logo-opener.png")

slickR(obj = ImgLogo, height="50",width="200",
       slickOpts = list(
         slidesToShow = 6,
         focusOnSelect = T,
         arrows=F,
         autoplay=T,
         centreMode=T,
         autoplaySpeed=750,
         vertical = T))

At a guess, maybe the slidesToShow option is not working? I would also like to centre the carousel within the box if possible?

Thanks!

Heres my sessioninfo()

 R version 3.3.2 (2016-10-31)
Platform: x86_64-w64-mingw32/x64 (64-bit)
Running under: Windows 7 x64 (build 7601) Service Pack 1

locale:
[1] LC_COLLATE=English_United Kingdom.1252  LC_CTYPE=English_United Kingdom.1252    LC_MONETARY=English_United Kingdom.1252
[4] LC_NUMERIC=C                            LC_TIME=English_United Kingdom.1252    

attached base packages:
[1] stats     graphics  grDevices utils     datasets  methods   base     

other attached packages:
 [1] slickR_0.1.0      treemap_2.4-2     leaflet_1.1.0     viridisLite_0.2.0 highcharter_0.5.0 timevis_0.4       ggExtra_0.6      
 [8] DT_0.2.12         shiny_1.0.2       xts_0.9-7         ggrepel_0.6.5     crosstalk_1.0.1   zoo_1.7-14        readr_1.1.0      
[15] d3heatmap_0.6.1   dygraphs_1.1.1.4  flexdashboard_0.5 dplyr_0.5.0       mgcv_1.8-17       nlme_3.1-128      plotly_4.6.0     
[22] ggplot2_2.2.1    

loaded via a namespace (and not attached):
 [1] Rcpp_0.12.10       lubridate_1.6.0    lattice_0.20-34    tidyr_0.6.1        png_0.1-7          assertthat_0.2.0   rprojroot_1.2     
 [8] digest_0.6.12      psych_1.7.3.21     gridBase_0.4-7     mime_0.5           R6_2.2.0           plyr_1.8.4         backports_1.0.5   
[15] evaluate_0.10      httr_1.2.1         lazyeval_0.2.0     data.table_1.10.4  miniUI_0.1.1       TTR_0.23-1         Matrix_1.2-7.1    
[22] rmarkdown_1.4      stringr_1.2.0      foreign_0.8-67     htmlwidgets_0.8    igraph_1.0.1       munsell_0.4.3      broom_0.4.2       
[29] httpuv_1.3.3       base64enc_0.1-3    mnormt_1.5-5       htmltools_0.3.5    tibble_1.3.0       grid_3.3.2         jsonlite_1.4      
[36] xtable_1.8-2       gtable_0.2.0       DBI_0.6-1          magrittr_1.5       scales_0.4.1       rlist_0.4.6.1      quantmod_0.4-8    
[43] stringi_1.1.5      reshape2_1.4.2     xml2_1.1.1         RColorBrewer_1.1-2 tools_3.3.2        purrr_0.2.2        hms_0.3           
[50] rsconnect_0.7      yaml_2.1.14        parallel_3.3.2     colorspace_1.3-2   knitr_1.15.1

I can't update to R 3.3.3 as this is a work station.

Please let me know if you require any additional information - thanks!

SlickR always insert image into html

Hi,

When using Rstudio to knitr an html, slickr always insert the images within the document even though I configure the document not to do it. At some point I thought I found the problem, a bug coming out when the address of the image was of some style but I don't recall what was it.
Has anyone else reported something similar?

carousel not working in rmarkdown

when used in rmarkdown html_document the carousel div is ignored and pushed to the bottom of the rendered document. here is the raw rmd file

---
output: 
  html_document:
    self_contained: false
---

```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = TRUE)
library(slickR)
library(ggplot2)
library(dplyr)
fig.dir=file.path(getwd(),'testSlickR_files/figure-html')

Section

Subsection 1

iris%>%ggplot(aes(x=Sepal.Length,y=Sepal.Width))+geom_point()
iris%>%ggplot(aes(x=Sepal.Length,y=Sepal.Width))+geom_line()

slickR(list.files(fig.dir,pattern = 'PLOT1-',full.names = T),slickOpts = list(dots=T),height='0')

Subsection 2

iris%>%ggplot(aes(x=Species,y=Sepal.Width))+geom_boxplot()
iris%>%ggplot(aes(x=Species,y=Sepal.Width))+geom_bar(stat='identity')

slickR(list.files(fig.dir,pattern = 'PLOT2-',full.names = T),slideId ='newDiv' ,slickOpts = list(dots=T),height='0')

shiny: Carousel "jumps" when re-rendered with numeric height

Initially I came here due to this SO question and I thought, once the issues with the vignette are solved also the issues described there will be gone. However, they are still here using your latest commit.

Please consider the shiny app below (based on one of your examples). Once the radio button is switched, the new carousel is rendered below the old one:

Initially I thought it's the same "piling up" problem as in #51, but once I switch height = 100 to "25vh" in slickR it's working fine.

We've found a workaround using renderUI where height = 100 isn't causing the "jump".

library(shiny)
library(htmlwidgets)
library(slickR)

DF <- data.frame(fish = c(
  "https://www.hakaimagazine.com/wp-content/uploads/aquarium-reef-fish-banner.jpg",
  "https://www.hakaimagazine.com/wp-content/uploads/aquarium-reef-fish-banggai-cardinalfish.jpg",
  "https://www.sonomamag.com/wp-content/uploads/2016/12/fish.jpg"
),
butterfly = c(
  "https://www.futurity.org/wp/wp-content/uploads/2019/02/viceroy-butterfly_1600.jpg",
  "https://harvardforest.fas.harvard.edu/sites/harvardforest.fas.harvard.edu/files/butterfly_giant_swallowtail_model.jpg",
  "https://www.butterflyidentification.com/wp-content/uploads/2019/02/Doris-Longwing-Butterfly-Images.jpg"
),
bird = c(
  "http://www.cutepetname.com/wp-content/uploads/2018/11/funy-bird-names-feat-img.jpeg",
  "http://3.bp.blogspot.com/-mJ-Kw1mdLOo/UeLJx7vxsaI/AAAAAAAADkg/TfDHtuJnY7I/s1600/The-Cardinal-Bird.jpg",
  "https://images7.alphacoders.com/416/thumb-1920-416332.jpg"
))

ui <- fluidPage(slickROutput("mySlick", width = "50%"),
                radioButtons(
                  'series',
                  "Choose Series",
                  choices = c(
                    "fish" = "fish",
                    "butterfly" = "butterfly",
                    "bird" = "bird"
                  )
                ),
                textOutput("center"))

server <- function(input, output, session) {
  output$mySlick <- renderSlickR({

    cP2 <- JS(
      paste0("function(slick,index) {
      var dotObj = ", jsonlite::toJSON(DF[[input$series]]),";
          return '<a><img src= ' + dotObj[index] + '  width=100% height=100%></a>';
          }"))
    
    opts_dot_logo <-
      settings(
        initialSlide = 1,
        slidesToShow = 1,
        slidesToScroll = 3,
        centerMode = TRUE,
        focusOnSelect = TRUE,
        dots = TRUE,
        customPaging = cP2
      )
    
    slick_dots_logo <- slickR(obj = DF[[input$series]],
                              height = 100) + opts_dot_logo # "25vh" works fine
    
    
    slick_dots_logo
  })
  
  observeEvent(input$mySlick_current, {
    print(input$mySlick_current$.center)
  })
  
  output$center <- renderText({
    paste("Center:", input$mySlick_current$.center)
  })
  
}

shinyApp(ui, server)

carousel not working in shiny

shiny is not destroying slick when invalidating reactive elements

library(slickR)
library(svglite)
library(lattice)
library(ggplot2)
library(shiny)


server <- function(input, output) {
  output$distPlot <- renderSlickR({
    slickR(s.in())
  })
  
  s.in=reactive({
    sapply(
      list(
        xmlSVG({hist(rnorm(input$obs), col = 'darkgray', border = 'white')},standalone=TRUE)
        ,xmlSVG({print(xyplot(x~x,data.frame(x=1:10),type="l"))},standalone=TRUE)
        ,xmlSVG({show(ggplot(iris,aes(x=Sepal.Length,y=Sepal.Width,colour=Species))+geom_point())},standalone=TRUE)
        ,xmlSVG({
          print(
            dotplot(variety ~ yield | site , data = barley, groups = year,
                    key = simpleKey(levels(barley$year), space = "right"),
                    xlab = "Barley Yield (bushels/acre) ",
                    aspect=0.5, layout = c(1,6), ylab=NULL)        
          )
        },standalone=TRUE
        )
      )
      ,function(sv){
        paste0(
          "data:image/svg+xml;utf8,"
          ,as.character(sv)
        )
      }
    )
  })
}

ui <- fluidPage(
  sidebarLayout(
    sidebarPanel(
      sliderInput("obs", "Number of observations:", min = 10, max = 500, value = 100)
    ),
    mainPanel(slickROutput("distPlot",width='200px',height='200px'))
  )
)

shinyApp(ui = ui, server = server)

Shiny: carousel collapses / folds after clicking on different tab and returning to carousel page

When clicking on a different tab in the nav bar, and then returning to the 'homepage' with the slick carousel, the carousel 'collapses' or 'folds'. As shown in the GIF below, the texts and images overlap. This only takes a few seconds and after that it works as expected. However, it does not occur every time (2 out of 3) and on start-up it works perfectly.

Can this be prevented?

Using renderSlickR in server:

output$slideshow <- renderSlickR({
  opts <- settings(
    autoplay = TRUE,
    initialSlide = 0,
    slidesToShow = 3,
    slidesToScroll = 1,
    focusOnSelect = TRUE,
    arrows = TRUE)

  slides_dom <- slick_list(
    mapply(create_slides, stock_newest$MAKE, stock_newest$MODEL, stock_newest$COLOR_PHOTO, stock_newest$UPLOADDATE)
  )
  
  slickR(slides_dom) + opts
})

UI of slides:

create_slides <- function(make, model, image, date_added) {
    tagList(
        htmltools::tags$div(
            class = "col-sm-12",
            htmltools::tags$div(
                style = 'min-height:250px',
                class="well",
                htmltools::tags$div(
                    class = 'row',
                    htmltools::tags$p(paste('Toegevoegd op', format(date_added, '%d-%m')), style="font-size:12px; color:#808080"),
                    htmltools::tags$div(
                        class = "col-sm-4",
                        htmltools::tags$img(src = image, height = 110)
                    ),
                    htmltools::tags$div(
                        class = "col-sm-8",
                        htmltools::tags$h2(make, class= 'bold'),
                        htmltools::tags$h3(model, class= 'bold')
                    )
                )
            )
        )
    )
}

Show output with slickROutput:

div(
  slickROutput(ns("slideshow")), style = "height:300px"
)

can this be used to drive a png from visNetwork

Hi - can images be stored and made clickable, perhaps using crosstalk to change a visNetwork graph in R?
http://datastorm-open.github.io/visNetwork/nodes.html

i.e. a small graph stored in some sort of store such as rredis and then the carosel used as a history . Then the carosel could be used to drive previous plots of the network graph?

dotImages not responding

cP1 works but cP2 does not

library(slickR)
library(rvest) 
library(reshape2)
library(dplyr)
library(htmlwidgets)

a=c("ATL","BOS","BKN","CHA","CHI","CLE","DAL","DEN","DET","GSW",
     "HOU","IND","LAC","LAL","MEM","MIA","MIL","MIN","NOP","NYK",
     "OKC","ORL","PHI","PHX","POR","SAC","SAS","TOR","UTA","WAS")
teamImg=sprintf("https://i.cdn.turner.com/nba/nba/.element/img/4.0/global/logos/512x512/bg.white/svg/%s.svg",a)

a1=read_html('http://www.espn.com/nba/depth')%>%html_nodes(css = '#my-teams-table a')
a2=a1%>%html_attr('href')
a3=a1%>%html_text()
gsub('\n','',a3[grepl('\n',a3)])
team_table=read_html('http://www.espn.com/nba/depth')%>%html_table()
team_table=team_table[[1]][-c(1,2),]
playerTable=team_table%>%melt(,id='X1')%>%arrange(X1,variable)
playerName=a2[grepl('[0-9]',a2)]
playerId=do.call('rbind',lapply(strsplit(playerName,'[/]'),function(x) x[c(8,9)]))
playerId=playerId[playerId[,1]!='phi',]
playerTable$img=sprintf('http://a.espncdn.com/combiner/i?img=/i/headshots/nba/players/full/%s.png&w=350&h=254',playerId[,1])


cP1=JS("function(slick,index) {return '<a>'+(index+1)+'</a>';}")
cP2=JS("function(slick,index) {return '<a><img src=' + x.dotImages[index] + ' width=100%></a>';}")
  
  slickR(images = playerTable$img,
         dotImages = teamImg,
         slickOpts = list(initialSlide=0,
                          slidesToShow=5,
                          slidesToScroll=5,
                          focusOnSelect=T,
                          dots=T,
                          customPaging=cP2
  )

slickR not working with markdown when tabs are used?

Hi I notice that the slider does not show up if it is placed in a tab that is not the first, for example below is a markdown in html. The first slider will show up whilst the second will not. Is there a workaround for this? I found several issues in stackoverflow but those seem to be rectifying shiny apps; is there a solution for a markdown? thanks!

#Data
# {.tabset}

## results 

```{r}
opts_dot_number <- settings(
        initialSlide = 0,
        slidesToShow = 1,
        slidesToScroll = 1,
        focusOnSelect = TRUE,
        dots = TRUE,
        adaptiveHeight =T 
        )
    
    
    slickR(
        obj = expfiles
        , padding=0 
        ,height=1200, 
      width=1200 )

## results2
{r second }
opts_dot_number <- settings(
        initialSlide = 0,
        slidesToShow = 1,
        slidesToScroll = 1,
        focusOnSelect = TRUE,
        dots = TRUE,
        adaptiveHeight =T 
        )
    
    
    slickR(
        obj = expfiles
        , padding=0 
        ,height=1200, 
      width=1200 )

Error when using slickR in shiny

Hi,

Thanks for creating this package. Very useful in viewing images on the fly.

I've been able to successfully test the package in RStudio but I keep getting the following error when I attempt to use it in a shiny app;

Saving a widget with selfcontained = TRUE requires pandoc. For details see:
https://github.com/rstudio/rmarkdown/blob/master/PANDOC.md

I did install pandoc but not sure what to do next.

I appreciate any help I can get in resolving this issue.
Thank you.

Set image width within the slide?

While the height and width parameters of slickR() control the dimensions of the slide, there doesn't appear to be any way to adjust the width of the image itself.

As you can see in the first example in your readme, the width of the logo image is 75%. This results in white buffers on either side of the image, which may not always be desirable.

I'd like my images to take up 100% of the slide - can you add a parameter that lets me do that?

Link (clickable) images

Is it possible to create clickable images that redirect to a particular link?

Thanks

Caption Text

Thanks for your amazing work 😺

I was wondering if it was possible to add captions on or below the images such as here?

Didn't find the answer anywhere...

Thanks a lot!

Slow render speeds

I'm not sure if this is a limitation with shiny, or with slick itself, but when rendering a large number of images (e.g., >500) using slickR, the process can take many minutes to execute. In my example code, I use a filter button, which when fired, passes a data frame of image names (images stored on a local SSD hard drive). This works fantastically when only a few images are rendered, but becomes almost unusable when data sets are large. Is there any way to optimise my approach? See below:

 observeEvent(input$mchn_clssfr_vrfctn_fltr_button, {
      req(mchn_clssfr_vrfctn$dir_nm,
          mchn_clssfr_vrfctn$img_dir,
          mchn_clssfr_vrfctn$img,
          mchn_clssfr_vrfctn$srvy_fldr)

          mchn_clssfr_vrfctn$fltr_mtdt <- mchn_clssfr_vrfctn$img

          output$mchn_clssfr_vrfctn_id <- renderSlickR({

          out <- slickR(
          obj = paste0(mchn_clssfr_vrfctn$img_dir, '/',
                     mchn_clssfr_vrfctn$srvy_fldr, "/",
                     mchn_clssfr_vrfctn$fltr_mtdt$FileName_New),
          slideId ="mchn_clssfr_vrfctn_id_up",
          slideIdx = list(1:nrow(mchn_clssfr_vrfctn$fltr_mtdt)),
          synchSlides = c("mchn_clssfr_vrfctn_id_up", "mchn_clssfr_vrfctn_id_down"),
          slideType = "img",
          slickOpts = list(
          list(
            dots = F,
            infinite = F,
            mobileFirst = T,
            speed = 0,
            arrows = F
           )
         )
       )

      out

    })
 }) # observeEvent`

plotly not working with slickR

I have been trying to use plotly outputs similar to the example page but it seems to not be passing in any html from a plotly html file. I can see that it is the same for the example page.

FYI: Github installation method needs updating

devtools::install_github('metrumresearchgroup','slickR')
Downloading GitHub repo slickR/metrumresearchgroup@master
from URL https://api.github.com/repos/slickR/metrumresearchgroup/zipball/master
Installation failed: Not Found (404)

Warning message:
Username parameter is deprecated. Please use slickR/metrumresearchgroup

devtools::install_github('metrumresearchgroup/slickR')
Downloading GitHub repo metrumresearchgroup/slickR@master
from URL https://api.github.com/repos/metrumresearchgroup/slickR/zipball/master
Installing slickR

Tracking slider state

I’ve been incorporating a number of slick carousels (via slickR) into a large shiny app that I’m building. But I’ve run into a little issue that I’m hoping you wouldn’t mind advising me on.

To explain, I have two slick carousels on one shiny page, both showing >200 images. I need to track the index of each image that each carousel is centred on – basically I want to know, for carousel 1, whether I’m looking at image-1, image-2, or image-N; and likewise for carousel 2. To do this, I’ve used a bit of javascript, shown below, where “spcs_idntfctn_id_rf_1” is the outputId from slickROutput:

$(document).ready(function() {

    var n1 = "";

    $("#spcs_idntfctn_id_rf_1").on("afterChange", function(){

    n1 = document.getElementsByClassName("slick-current slick-active")[0].getAttribute("data-slick-index");

    Shiny.onInputChange("spcs_idntfctn_img_num_1_rf_1", n1);
  });

});

Basically, whenever I move through the images on a carousel, the javascript code tracks which image I’m looking at.

This javascript code works well when I have only one carousel, but when I have two carousels, the code doesn’t work. I suspect this is because shiny doesn’t really know which carousel is current (i.e., which carousel I’ve actually clicked on). I thought using “slick-current” would solve this issue, but it hasn’t.

Is there something wrong with my javascript code, or perhaps is there a simpler way to achieve this without javascript using slickR directly?

Many thanks!

Problem with slickR + shiny, when the xmlSVG-file becomes to large.

Hi there!

I'm using slickR with shiny, and I'm happy that this package exists. Unfortunatly, I encountered a strange error, when the necessary xml-Files become large. I traced the error down to the function slick_div_chr. There, it is tested if the input x is a regular file using utils::file_test('-f', x) . Here, x is the (by slickR processed) xml-Input, which is in this case a long string. If that string is to long (>= 1e5 characters) the underlying function file.info throws an error: Error in file.info(x, extra_cols = FALSE) : file name conversion problem -- name too long?.

As I can see, if the xml-Input is short enough, and processed by functions as_svg_character and hash_encode_url, then utils::file_test('-f', x) will always return FALSE, indicating the function file_test is only necessary with certain inputs.

As the function file_test is for a if-statement, maybe this can be solved by adding and extra argument, checking if file_test is actually necessary?

Best regards!

IE SVG doesn't seem to render

IE SVG doesn't seem to render here is a screenshot

shiny htmltools error

When I try to render a slickR slideshow in my R Shiny UI, I get this error message:

The corresponding output from the R console is as follows:

I've verified that I have not specified any white space arguments in the slickR context, in my css, or anywhere else in the app. The message leads me to believe that the error is somewhere in the communication between slickR and htmltools.

Here is a somewhat simplified, reproducible example that produces the error on my computer:

library(shiny)
library(slickR)
library(htmltools)

ui <- fluidPage(
        sidebarLayout(
                sidebarPanel(
                        h3("Select a folder of photos to view as a slideshow"),
                        actionButton(inputId = "choosePhotos", label = HTML("<font size = 4>Click to Choose Folder</font>"), 
                                     style="color: #fff; background-color: #6faade; border-color: #5491c7; width: 100%"),
                        uiOutput("selectedPhotos"),
                        br(),
                        actionButton('displayPhotos',HTML('<font size = 5><b>Display Photos</b></font>'), 
                                     style="color: #fff; background-color: #337ab7; border-color: #2e6da4; width: 100%")
                ),
                mainPanel(
                        uiOutput(outputId = "slideshow")  
                )
        )
        
)


server <- function(input, output, session) {
        observeEvent(input$choosePhotos, {
                current_folder <- choose.dir("")
                if(!is.na(current_folder)){
                        output$selectedPhotos <- renderUI({
                                checkboxGroupInput(inputId = "selectedPhotos", label = NULL,
                                                   choices = current_folder, selected = current_folder)
                        })
                }
        })
        
        output$slideshow <- renderUI({
                if (input$displayPhotos == 0){
                        return()
                }
                else {
                        isolate({ 
                                photos <- list.files(input$selectedPhotos, pattern = "*.JPG$", recursive = TRUE, full.names = TRUE)
                                
                                output$slickr <- renderSlickR({
                                        if(length(photos)<30){
                                                slickR::slickR(photos, height = "400px") +
                                                        settings(dots = T)
                                        } else {
                                                photo_sample <- sample(photos, 30)
                                                slickR::slickR(photo_sample, height = "400px") +
                                                        settings(dots = T)
                                        }
                                })
                                list(h1(HTML("<center><font color=\"#3c8dbc\" style = \"text-shadow: 1.5px 1.5px #4d3a7d\"><b>VIEW PHOTOS</b></font></center>")),
                                     br(),
                                     h4(HTML("Scroll through randomly selected motion photos in the slideshow below")),
                                     br(),
                                     slickROutput("slickr")
                                )
                        })
                }
        })
        
        
}

shinyApp(ui = ui, server = server)

I'd appreciate any and all help! Thanks!

There's no way to set the spacing between dots

Our application is similar to the "Replace dots with text" example except our text is longer --- years or year spans (e.g. "2000-2002", "2003-2005", etc).

We figured out how to set the text of the dots based on the index (from the example) but can't figure out how to space the "dots" such that they don't overlap.

Do we need to hack the css???

Imaging trying to use nba_player_logo$name as the dot text source; how would you do that?

on click moving to other tab panels

Hi again,
Left an issue earlier today and resolved it almost immediately; this one is more challenging, though.

I have a shiny app with a series of tab panels – ideally, on the landing page, I'd have a carousel where you could click on the image in the carousel and be taken to any of the panels.

Since shiny doesn't have standardized urls associated with panels this is very hard...but maybe you've bumped into this problem before?

slickROutput(height = '50px') not respected

Since the last version, the height parameter of slickROutput doesn't seem to work.

Here is an example:

The blue bounding box is 50px but as you see, the pictures are extended beyond it.

Workaround is to set '50px' in slickR(). But then, what is the point of height in slickROutput?

Syncronized sliders

Hi, I'm a little bit confused of usage of your library.
How to add text between synchronized slickR objects? (Or is any way to synchronize sliders from slickROutput?)
Can I synchronize all slickR objects between each other?(asNavFor with specified slideid doesn't work)

shinyglide Conflicts with slickR

Hi!

I posted this to the shinyglide github. It seems that whenever slickR is used, the 'glide' content of the modal gets very squished and unreadable. I'm not sure if this is your package or if it's shinyglide's package but I thought I should let you know.

library(shiny)
library(shinyglide)
library(slickR)

ui <- fixedPage(  
  fluidRow(
    slickROutput("slickr", width="500px")
  ) 
)

server <- function(input, output, session) {
  
  showModal(
    modalDialog(
      title = "Startup assistant",
      easyClose = FALSE,
      footer = NULL,
      glide(
        screen(
          p("Let's initialize some values, would you ?")
        ),
        screen(
          p("First, please select a mean value"),
          numericInput("mean_modal", "Mean", value = 0)
        ),
        screen(
          p("Then, please select a sd value"),
          numericInput("sd_modal", "SD", value = 0)
        )
      )
    )
  )
  
  png('image1.png'); plot(rnorm(100)); dev.off()
  png('image2.png'); plot(runif(100)); dev.off()
  output$slickr <- renderSlickR({
    slickR(c("image1.png",
             "image2.png"),
           height='400px',width='100%')
  })
  }

shinyApp(ui, server)

Browser side linking to other chart

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?

slickr_output_current$.center isn't providing data on shiny app startup

Currently slickr_output_current$.center isn't providing the carousels center on app start only after the first click.

I think it would be useful to provide the center right away, as done here.
Please see the following:

library(shiny)
library(slickR)

js <- "
$(document).ready(function(){
  $('#slickr').on('setPosition', function(event, slick) {
    var index = slick.currentSlide + 1;
    Shiny.setInputValue('imageIndex', index);
  });
})"

# create some local images
if(!dir.exists("myimages")){
  dir.create("myimages")
}

imgs <- paste0("myimages/myplot", seq_len(3), ".png")

for (img in imgs) {
  png(file = img, bg = "transparent")
  plot(runif(10))
  dev.off() 
}

ui <- fluidPage(
  tags$head(
    tags$script(HTML(js))
  ),
  textOutput("imgName"),
  textOutput("imgIndex"),
  tags$hr(),
  tags$div(
    slickROutput("slickr", width="500px"),
    style = "margin-left:100px;"
  )
)

server <- function(input, output) {
  
  output[["slickr"]] <- renderSlickR({
    slickR(imgs)
  })
  
  output[["imgName"]] <- renderText({
    paste0("CURRENT IMAGE: ", basename(imgs[input[["imageIndex"]]]))
  })
  
  output[["imgIndex"]] <- renderText({
    paste0("slickr_current$.center: ", input$slickr_current$.center)
  })
  
}

# Run the application 
shinyApp(ui = ui, server = server)

Jump to specific carousel

Is it possible to jump to a specific carousel, in a slick_list using an observeEvent?

Replace a slide?

I want to replace a slide (without updating all slides because that would be slow).

I was thinking that the add-remove function could work, but I can't figure out how to do that in slickR.

Here's the add-remove function from http://kenwheeler.github.io/slick/:

$('.add-remove').slick({
  slidesToShow: 3,
  slidesToScroll: 3
});
$('.js-add-slide').on('click', function() {
  slideIndex++;
  $('.add-remove').slick('slickAdd','<div><h3>' + slideIndex + '</h3></div>');
});

$('.js-remove-slide').on('click', function() {
  $('.add-remove').slick('slickRemove',slideIndex - 1);
  if (slideIndex !== 0){
    slideIndex--;
  }
});

Can you point me to how this might be done?

Thanks!

slickR no longer available on CRAN

Hello,
It appears that slickR has been removed from CRAN because the maintainer was uncontactable.
Is this the official slickR repo?

Thank you,
Bobby

Move previous next buttons

I can successfully move the "next" button for slickR's carousel. However, when I use the similar method to move the "previous" button it does not work. The action and the mouseover no longer work. Why is this? How can I move the "prev" button and maintain full functionality?

Here is where the fully functional moved buttons should appear:

library(shiny)
library(slickR)

# Test #########################################################################
chart_names_list <- c( "http://placehold.it/900x500/39CCCC/ffffff&text=Slide+1", 
                                                "http://placehold.it/900x500/39CCCC/ffffff&text=Slide+2",
                                                "http://placehold.it/900x500/39CCCC/ffffff&text=Slide+3")
num_slides <- 2


ui <- fluidPage(
  tags$head(
    tags$style(HTML("
    .slick-next {
      right: 163px;
      top: 20px;
    }
    .slick-prev {
      left: 670px;
      top: 20px;
    }
    .slick-slide {
      margin-top: 30px;
    }
      
    ")
    )
  ),
  
  slickROutput("slick_output")
)

server <- function(input, output, session) {
  output$slick_output <- renderSlickR({
    slickR(obj = chart_names_list, height = 300, width = "100%") +
      settings(dots = TRUE)
  })
}

shinyApp(ui, server)

HTMLWidgets and xmlSVG not rendering

Hello,

I love the potential of this package. However, I notice that many of the examples are not rendering in the official readme: https://metrumresearchgroup.github.io/slickR/. I ran the code on my own machine and reproduced the problem. Any ideas?

Encoding issue with with readlines in slick_div

Hi,

I have just noticed that the encoding with htmlwidgets can be wrong due to the current definition of slick_div.htmlwidget, The r readLines function is by default not "UTF-8", resulting in carrousels like these:

I suggest the following change, giving the ability to the user to define the encoding, but defaulting to utf-8:

slick_div.htmlwidget_v2<- function(
  x,
  css = htmltools::css(marginLeft='auto',marginRight='auto'),
  type = 'iframe',
  links = NULL,
encoding="UTF-8"
){
  
  tf <- tempfile(fileext = '.html') 
  on.exit(unlink(tf,force = TRUE))
  htmlwidgets::saveWidget(x,file = tf)
  x_chr <- paste0(readLines(tf, encoding=encoding),collapse='\n')
  slickR:::slick_tag(type,varArgs = list(srcdoc = x_chr, style = css))
}

yonicd / slickr Goto Github PK

slickr's People

Contributors

Stargazers

Watchers

Forkers

slickr's Issues

Section

Subsection 1

Subsection 2

Recommend Projects

Recommend Topics

Recommend Org