In timelyportfolio/imageR: htmlwidget for intense-images

imageR enlivens your images and plots from R. As an htmlwidget, it works in all contexts with nearly all types of HTML elements. While there are lots of great JavaScript image libraries, imageR will begin its life with a wrapper for intense-images by the talented, creative, and funny Tim Holman. I know humor is subjective, but test my definition of "funny" with Tim's giflinks.

Let's see a couple of ways we might use imageR. Please don't let my lack of creativity hamper you. Experiment, play, use, and share. Yes, it works on touch devices and is responsive, so try it on that little device in your pocket or purse.

Quick Installation

imageR has not stabilized enough for CRAN, so for now please install with devtools::install_github.

devtools::intall_github("timelyportfolio/imageR")

Simple Example

I say this is simple, but getting the image right will require use of base64 encoding, which might be new to you. base64 might sound hard, but fortunately, two packages base64enc (which we'll use) and base64 make it easy.

library(imageR)
library(htmltools)
library(base64enc)

# ignore the local if it confuses you
# only use it to delete the tempfile on exit
local({
  # make a tempfile to hold our chart  
  tf <- tempfile()
  # delete our tempfile on exit
  on.exit(unlink(tf))

  # save our chart as a big png; exaggerate the width
  png( tf, height = 800, width = 1600 )
    # make a kind of pretty chart
    plot(sin(0:90),cos(seq(0,360,by=4)),type="l", col= topo.colors(4))
    lines(sin(0:90),cos(0:90),type="l",col=topo.colors(4)[3])
  dev.off()

  intense(
    tags$img(
      style="height:200px;"
      ,src = dataURI(file=tf,mime="image/png")
    )
    ,height = 200
  )
})

Example with Pairs to Show Auto

In the first example, we exaggerated the width so you could see how the image pans from right to left based on your mouse or touch movement. intense-images automatically decides to pan. To see how it adjusts resize your window when in full-screen display mode.

library(imageR)
library(htmltools)
library(base64enc)

# ignore the local if it confuses you
# only use it to delete the tempfile on exit
local({
  # make a tempfile to hold our chart  
  tf <- tempfile()
  # delete our tempfile on exit
  on.exit(unlink(tf))

  # save our chart as a big png
  png( tf, height = 1200, width = 1200 )
    # make a kind of pretty chart
    pairs(USJudgeRatings, main="Example from ?pairs")
  dev.off()

  intense(
    tags$img(
      style="height:400px;overflow:hidden;"
      ,src = dataURI(file=tf,mime="image/png")
    )
    ,height = 400
  )
})

Example with a Non-`img`

intense-images also works with non-img elements, such as a div. To make it work correctly, we'll use some extra tag attributes data-image, data-title, and data-caption on our non-img. I bet you can guess what these attributes mean. We'll use the same plot with some different colors as above to illustrate the difference.

library(imageR)
library(htmltools)
library(base64enc)

# ignore the local if it confuses you
# only use it to delete the tempfile on exit
local({
  # make a tempfile to hold our chart  
  tf <- tempfile()
  tf2 <- tempfile()
  # delete our tempfile on exit
  on.exit({unlink(tf);unlink(tf2)})

  png( tf, height = 1200, width = 1200 )
    # make a kind of pretty chart
    pairs(USJudgeRatings, main="Example from ?pairs")
  dev.off()

  # save our chart as a smaller png than above for demo
  png( tf2, height = 800, width = 800 )
    # make a kind of pretty chart
    pairs(USJudgeRatings, main="Example from ?pairs",
      pch = 4, col="blue", cex = 0.5
    )
  dev.off()

  tagList(
    intense(
      # method already shown
      tags$img(
        style="height:200px;width:200px;overflow:hidden"
        ,src = dataURI(file=tf,mime="image/png")
      )
      ,height=250, width = 400
    )
    , intense(
      tags$div(
        "data-image" = dataURI(file=tf2,mime="image/png")
        ,"data-title" = "?pairs example"
        ,"data-caption" = "neat things happen with extra attributes"
        ,style = "height:50px;width:250px;border: dashed 0.2em lightgray;"
        ,"not an img but still intense; click me"
      )
      ,height = 250, width = 50
    )
  )
})

With Other htmlwidgets and Flickr

htmlwidgets are composeable. Let's add intense-images to an example from Week 10 | Responsive Toolbars with navr and sortableR. You might say this is more like publishing with HTML, and you are right. R is really not necessary for this example, but when you are in a context, it is often much more efficient to stay in that context. Thanks

library(htmltools)
library(curl)
library(navr)
library(sortableR)
library(imageR)

n1 <- navr(
  selector = "#sortableR-toolbar"
  ,taglist = tagList(
    tags$ul(id = "sort-navr"
      ,style="line-height:120px; text-align:center; vertical-align:middle;"
      ,tags$li(
        style="border: solid 0.1em white;border-radius:100%;line-height:inherit;width:130px;height:130px;"
        , class="fa fa-binoculars fa-4x"
        #  attribution everywhere Creative Commons Flickr
        #  awesome picture by https://www.flickr.com/photos/12859033@N00/2288766662/
        , "data-image" = paste0(
          "data:image/jpg;base64,"
          ,base64enc::base64encode(
            curl("https://farm4.staticflickr.com/3133/2288766662_c40c168b76_o.jpg","rb")
          )
        )
        , "data-title" = "Binoculars, a working collection"
        , "data-caption" = "awesome picture courtesy Flickr Creative Commons
            <a href = 'https://www.flickr.com/photos/12859033@N00/2288766662/'>jlcwalker</a>"
      )        
      ,tags$li(
        style="border: solid 0.1em white;border-radius:100%;line-height:inherit;width:130px;height:130px;"
        , class="fa fa-camera fa-4x"
        #  attribution everywhere Creative Commons Flickr
        #  awesome picture by https://www.flickr.com/photos/s58y/5607717791
        , "data-image" = paste0(
          "data:image/jpg;base64,"
          ,base64enc::base64encode(
            curl("https://farm6.staticflickr.com/5309/5607717791_b030229247_o.jpg","rb")
          )
        )
        , "data-title" = "Leica IIIc converted to IIIf BD ST"
        , "data-caption" = "awesome picture courtesy Flickr Creative Commons
            <a href = 'https://www.flickr.com/photos/s58y/5607717791'>s58y</a>"
      )
    )
  )
)

tagList(
  tags$div(
    id = "sortableR-toolbar"
    ,style="width:300px;border: dashed 0.2em lightgray; float:left;"
    ,tags$h3("sortableR Icons for Intense Images")
    ,"These icons drag and drop. Click on them for an"
    ,tags$strong("intense")
    ,"result."
  )
  ,add_font_awesome(n1)
  ,sortableR("sort-navr")
  ,intense( selector = "#sort-navr li" )
)