Skip to content
/ ricv Public
forked from xvrdm/ricv

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

License

Unknown, MIT licenses found

Licenses found

Unknown
LICENSE
MIT
LICENSE.md
Notifications You must be signed in to change notification settings

mark0237/ricv

 
 

Repository files navigation

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("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.

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

About

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

Resources

License

Unknown, MIT licenses found

Licenses found

Unknown
LICENSE
MIT
LICENSE.md

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • HTML 96.4%
  • R 3.4%
  • JavaScript 0.2%