ricv icon indicating copy to clipboard operation
ricv copied to clipboard

Create Interactive Image Comparators from R with the 'image-compare-viewer' Javascript Library

ricv

ricv lets you create interactive image comparators from R. It works in Rmarkdown documents and Shiny application. Under the hood, it is just a tiny wrapper around the image-compare-viewer Javascript Library.

Installation

devtools::install_github("xvrdm/ricv")

Usage

library(ricv)
ricv(img1 = "mountains.jpg", img2 = "trees.jpg",
     options = list(addCircle = T, hoverStart = T))

Gif showing an hoverOnStart image comparator


CSS

The ricv() function also has an argument named css, which expect a list in the format:

list(both = "some-css-for-both-label",
     before = "some-css-for-both-label"
     after = "some-css-for-the-after-label")

This can be used to modify the look of the labels. However, remember that the actual display of the labels is driven by one of the options.

ricv(
  img1 = "mountains.jpg", img2 = "trees.jpg",
  options = list(showLabels = T),
  css = list(both = "padding: 40px;", 
             before = "font-size: 2rem;", 
             after = "font-size: 4rem; font-family: serif;")
)

Gif showing a styled with css image comparator


Options

If you don´t want to create by hand the options list accepted by ricv(), you can use the helper function ricv_opts(), which gives you autocomplete and a convenient reminder of the possible attributes. For reference, see below all the possible options. The image-compare-viewer has examples for a few of them.

Users experiencing problems with image sizes (e.g. in shiny, the first image appears very big while the second appears very small) should first try setting the option fluidMode to TRUE.

ricv::ricv_opts()
## $controlColor
## [1] "#FFFFFF"
## 
## $controlShadow
## [1] TRUE
## 
## $addCircle
## [1] TRUE
## 
## $addCircleBlur
## [1] TRUE
## 
## $showLabels
## [1] TRUE
## 
## $smoothing
## [1] TRUE
## 
## $smoothingAmount
## [1] 200
## 
## $hoverStart
## [1] FALSE
## 
## $verticalMode
## [1] FALSE
## 
## $startingPoint
## [1] 50
## 
## $fluidMode
## [1] FALSE
## 
## $labelOptions
## $labelOptions$before
## [1] "Before"
## 
## $labelOptions$after
## [1] "After"
## 
## $labelOptions$onHover
## [1] TRUE