trafficonese/widgetframe

Embed htmlwidgets in Responsive iframe.

Project needs a new home.

Thank you all of you who have used this package and have contributed code/bugs/enhancements over the years. As you may have noticed I haven't been able to make any contributions to this project and others in the last two years. I was hoping to get back to developing/maintaining this package on a regular basis but my current work-life balance does not allow it and I don't see that situation changing anytime soon.

So here is my humble request to the R geospatial community, if anyone wants to take over this project and maintain/develop it for the greater good, I will be more than happy to transfer the project over to your repo. Send me an email at bhaskarvk AT <google's mail domain>. Same offer holds of any of my other R packages that you might be interested in taking over.

Please note that the javascripts being used in the current version are all almost 2 years old and counting and contain various security vulnerabilities. So I don't recommend anyone use this package anymore unless it is taken over and brought up to date by someone else. Until that happens please consider this project as abandonware.

---

widgetframe: htmlwidgets inside responsive iframes.

The goal of widgetframe is to be able to embed widgets inside iframes using NPR's Pymjs library for responsive iframes.

This package provides two functions frameableWidget, and frameWidget. The frameableWidget is used to add extra code to a htmlwidget which allows it to be rendered inside a responsive iframe. The frameWidget returns a htmlwidget which displays content of another htmlwidget inside a responsive iframe.

Current Status

• Works With
  • Flex Dashboard: Check out this Demo.
  • RMarkdown + knitr: Check out this Demo.
  • RMarkdown Website: Check out this Demo.
  • Xaringan Presentations: Check out this Demo.
    widgetframe should also work with other RMarkdown + knitr based presentations.
  • Bookdown gitbook: Needs a Makefile, but works. Check out this Demo.
  • blogdown: Check out this Demo.

• Does Not (Yet) Work With
  • Shiny

Installation

Release version

install.packages('widgetframe')

OR development version

if(!require(devtools)) {
  install.packages('devtools')
}
devtools::install_github('bhaskarvk/widgetframe')

Usage

frameableWidget function.

The frameableWidget function should be used when you need a HTML which can be embedded in a CMS system like WordPress/blogger or a static HTML website using the Pymjs library.

library(leaflet)
library(widgetframe)
l <- leaflet() %>% addTiles()
htmlwidgets::saveWidget(frameableWidget(l),'leaflet.html')

The resulting leaflet.html contains the necessary Pym.js Child initialization code and will work inside a regular iFrame or better yet a Pym.js responsive iFrame. It is expected that the site which is going to embed this widget's content has the necessary Pymjs Parent initialization code as described here.

frameWidget function

frameWidget function takes an existing htmlwidget as an argument and returns a new htmlwidget which when rendered, wraps the input htmlwdiget inside a responsive iFrame. This function can be used to knit htmlwidgets such that they are unaffected by the parent HTML file's CSS. This could be useful in bookdown or R Markdown Websites to embed widgets such that they are unaffected by the site's global CSS/JS.

You can use widgetFrame inside your R Markdowns as shown below.

```{r 01}
library(leaflet)
library(widgetframe)
l <- leaflet(height=300) %>% addTiles() %>% setView(0,0,1)
frameWidget(l)
```

```{r 02}
library(dygraphs)
ts <- dygraph(nhtemp, main = "New Haven Temperatures",
              height=250, width='95%')
frameWidget(ts)
```

Code of Conduct

Please note that this project is released with a Contributor Code of Conduct. By participating in this project you agree to abide by its terms.

widgetframe's Issues

Upgrade pym

http://blog.apps.npr.org/2018/02/15/pym-security-vulnerability.html

scrolling DT::datatable

hey,
I want to have a DT::datatable in my blogdown website. widgetframe make it possible, but my tables are larger than the width of a page and it does not scroll horizontally once into the widgetframe.

Any idea how to work around that ?

Unable to save html file using widgetframe::saveWidgetframe

I want to use LaTeX to parse descriptions in my plotly plots. I used the example from plotly website:

p <- plot_ly(
    x = c(1, 2, 3, 4),
    y = c(1, 4, 9, 16),
    name = TeX("\\alpha_{1c} = 352 \\pm 11 \\text{ km s}^{-1}")) %>%
  add_trace(
    x = c(1, 2, 3, 4),
    y = c(0.5, 2, 4.5, 8),
    name = TeX("\\beta_{1c} = 25 \\pm 11 \\text{ km s}^{-1}")) %>%
  layout(
    xaxis = list(
      title = TeX("\\sqrt{(n_\\text{c}(t|{T_\\text{early}}))}")),
    yaxis = list(
      title = TeX("d, r \\text{ (solar radius)}"))) %>%
  config(mathjax = 'cdn')

widget <- widgetframe::frameableWidget(p)
widgetframe::saveWidgetframe(widget, paste0("p", ".html"), selfcontained = TRUE)

problem is that both "p" and "widget" display correctly, but I can't get it to save it to a file. I don't mind whether the file is large. I'd also like ot be able to do this in a Shiny app with downloadable plots. Is that doable at all?

frameWidget() returns <PATH> not found in RMarkdown documents

frameWidget() no longer successfully frames htmlwigets anymore on my machine, attempted with both dev and CRAN builds of widgetframe.

sessionInfo()

R version 3.4.1 (2017-06-30)
Platform: x86_64-apple-darwin15.6.0 (64-bit)
Running under: macOS Sierra 10.12.6

Matrix products: default
BLAS: /System/Library/Frameworks/Accelerate.framework/Versions/A/Frameworks/vecLib.framework/Versions/A/libBLAS.dylib
LAPACK: /Library/Frameworks/R.framework/Versions/3.4/Resources/lib/libRlapack.dylib

locale:
[1] en_GB.UTF-8/en_GB.UTF-8/en_GB.UTF-8/C/en_GB.UTF-8/en_GB.UTF-8

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

other attached packages:
[1] dygraphs_1.1.1.4 widgetframe_0.3.0 htmlwidgets_0.9 leaflet_1.1.0

loaded via a namespace (and not attached):
[1] Rcpp_0.12.12 knitr_1.17 magrittr_1.5 xtable_1.8-2 lattice_0.20-35 R6_2.2.2 stringr_1.2.0
[8] tools_3.4.1 grid_3.4.1 htmltools_0.3.6 crosstalk_1.0.0 yaml_2.1.14 digest_0.6.12 rprojroot_1.2
[15] shiny_1.0.5 rsconnect_0.8.5 evaluate_0.10.1 mime_0.5 rmarkdown_1.6 stringi_1.1.5 compiler_3.4.1
[22] backports_1.1.0 httpuv_1.3.5 zoo_1.8-0

What dev packages do I have?

pkgs <- as.tibble(installed.packages()[,c(1,3:4)])
pkgs %>%
  filter(grepl("9000", Version))
\## A tibble: 1 x 3
\#  Package    Version Priority
\#    <chr>      <chr>    <chr>
\#1    pool 0.1.0.9000     <NA>

RStudio Version

rstudioapi::versionInfo()$version
\# [1] ‘1.0.153’

Sample RMarkdown Document

---
title: "html-document"
output: html_document
---

```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = TRUE)
```

## R Markdown

```{r 01}
library(leaflet)
library(widgetframe)
l <- leaflet(height=300) %>% addTiles() %>% setView(0,0,1)
frameWidget(l)
### failure: /rmd_output/1/html-document_files/figure-html//widgets/widget_01.html?initialWidth=910&childId=htmlwidget-56f76eccd2ad2dfccf35&parentTitle=html-document&parentUrl=http%3A%2F%2F127.0.0.1%3A37852%2Frmd_output%2F1%2F not found
```

```{r 02}
library(dygraphs)
ts <- dygraph(nhtemp, main = "New Haven Temperatures",
height=250, width='95%')
frameWidget(ts)
### failure: /rmd_output/1/html-document_files/figure-html//widgets/widget_02.html?initialWidth=910&childId=htmlwidget-dd050e09c463fe9a0b7b&parentTitle=html-document&parentUrl=http%3A%2F%2F127.0.0.1%3A37852%2Frmd_output%2F1%2F not found
```

Additional Configuration

Pym.js installed via Bower
$ bower install pym.js

widgetframe can't find file in rmd

When assigning an htmlwidget, specifically rpivotTable, to frameWidget the file can't be found when knitting to html. It works when running the chunk in R, but not in the html document. I am not very familiar with html so I was unable to troubleshoot in the html output file.

crosstalk

pymjs supports parent/child communication via messages. This can in theory be used for enabling crosstalk between widgets on the same page but embedded in different iframes.

not rendering in xaringan

Really strange issue, I had widgetframe working for rglwidget() earlier and then all of a sudden it stopped working. I've tried the leaflet example from your vignette also. It loads in the viewer but when I knit the document it's not appearing within.

---
title: "Presentation Ninja"
subtitle: "⚔<br/>with xaringan"
author: "Yihui Xie"
date: "2016/12/12 (updated: `r Sys.Date()`)"
output:
  xaringan::moon_reader:
    lib_dir: libs
    nature:
      highlightStyle: github
      highlightLines: true
      countIncrementalSlides: false
---

```{r setup, include=FALSE}
options(htmltools.dir.version = FALSE)

library(widgetframe)
library(leaflet)
suppressPackageStartupMessages(library(widgetframe))
l <- leaflet() %>% addTiles() %>% setView(0,0,2)
frameWidget(l, height = '300')

`> sessionInfo()
R version 3.5.1 (2018-07-02)
Platform: x86_64-w64-mingw32/x64 (64-bit)
Running under: Windows >= 8 x64 (build 9200)

Matrix products: default

locale:
[1] LC_COLLATE=English_Canada.1252  LC_CTYPE=English_Canada.1252   
[3] LC_MONETARY=English_Canada.1252 LC_NUMERIC=C                   
[5] LC_TIME=English_Canada.1252    

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

other attached packages:
[1] widgetframe_0.3.1 htmlwidgets_1.3  

loaded via a namespace (and not attached):
 [1] Rcpp_1.0.0      rprojroot_1.3-2 digest_0.6.18   later_0.7.5     mime_0.6       
 [6] R6_2.3.0        backports_1.1.2 xtable_1.8-3    magrittr_1.5    evaluate_0.12  
[11] xaringan_0.8.2  promises_1.0.1  leaflet_2.0.2   rmarkdown_1.10  tools_3.5.1    
[16] crosstalk_1.0.0 shiny_1.2.0     xfun_0.4        httpuv_1.4.5    yaml_2.2.0     
[21] compiler_3.5.1  htmltools_0.3.6 knitr_1.20 `

Following render()'s self_contained FALSE and lib_dir

When using render(self_contained = FALSE, lib_dir = X), frameWidget does not place dependencies in lib_dir or the html output into the tradition X_files/ folder like other assets, instead both are always placed in the working directory.

widgetframe in bookdown css problem

I am trying to use slickR in a bookdown but I am getting the same css problem you talked about in SO, and pointed to a annotated css.style for leaflet in gist. I tried doing something similar and put the style.css in ./css/style.css.

Did I miss anything? where did you put your style.css? could widgetframe solve this?

returning html instead of widget

continuation of issue opened in htmlwidgets repo.

i wrote an htmlwidget slickR binding slickjs. i allowed input for iframes in the call to the widget, and they need to be in a character vector where the objects are html lines.

example (open in browser not viewer if not using rstudio server):

devtools::install_github('yonicd/slickR')
geom_filenames=ls("package:ggplot2",pattern = '^geom')
inputObj=unlist(lapply(geom_filenames,getHelp,pkg = 'ggplot2'))

inputObj[1]

slickR(inputObj,slideType = 'iframe',height = '0px',
slickOpts = list(dots=T,slidesToShow=2,slidesToScroll=2))

since i can input an iframe i thought a continuation would be to nest self contained htmlwidgets in iframes and run them in a carousel.

can i do this with just a call to widgetframe or do i need to write in my widget the same bindings for pym.js, like var pymParent = new pym.Parent('divId', x.url, {});?

blogdown 404 error - double-slash between "figure-html" and "widgets"

My generated URL looks like this...

http://www.h3tech.io/post/conversion-win-loss_files/figure-html//widgets/widget_unnamed-chunk-4.html?initialWidth=355&childId=htmlwidget-1&parentTitle=Improving%20Conversion%20Win-Loss&parentUrl=http%3A%2F%2Fwww.h3tech.io%2Fpost%2Fconversion-win-loss

where removing one slash after figure-html fixes the issue

R version 3.4.1 (2017-06-30)
Platform: x86_64-w64-mingw32/x64 (64-bit)
Running under: Windows >= 8 x64 (build 9200)

Matrix products: default

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

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

other attached packages:
[1] widgetframe_0.3.1 htmlwidgets_0.9 jsonlite_1.5 dplyr_0.7.2 purrr_0.2.3
[6] readr_1.1.1 tidyr_0.7.0 tibble_1.3.4 ggplot2_2.2.1 tidyverse_1.1.1
[11] highcharter_0.5.0 RevoUtilsMath_10.0.0 RevoUtils_10.0.5 RevoMods_11.0.0 MicrosoftML_1.5.0
[16] mrsdeploy_1.1.2 RevoScaleR_9.2.1 lattice_0.20-35 rpart_4.1-11

Full screen not working on iPhone widgetframe

Great package first of all! Everything seems to be working correctly in leaflet when I use widget frame except the full screen button on iPhone. It works correctly on desktop though. Also full screen works correctly without using the widget frame on phone.

xaringan print to pdf

I have enjoyed my first experiments with widgetframe, particularly to get around issues with xaringan and mouse interaction. Thank you for providing this package!

One issue that I noticed was that when printing the output to pdf from Chrome, the widgetframes are not included. For example, from the provided demo:

A native htmlwidget within xaringan does show up when printed, however. For example, from https://slides.yihui.name/xaringan/#21

Does anyone know why that may be? Or have a potential workaround for this?

Full window

Hi Bhaskar, great little handy package!

One question: how can I create a full window widget (in my case a leaflet map)? When I save the map with saveWidget, I get a full window map:

lf <- leaflet() %>% addTiles() %>% setView(0,0,4)
saveWidget(lf, "hw.html", selfcontained = FALSE)

However, with saveWidgetframe it is 400px:

saveWidgetframe(lf, "wf.html", selfcontained = FALSE)

The widgetframe package is very useful, the html files can get really large for leaflet widgets, especially with polygons and popups. This way, it is easier to embed it in other websites. Side question: do you know whether it's possible to save the json data separately from R? (The same question and a workaround has been posted https://stackoverflow.com/questions/34439928/embedding-an-r-htmlwidget-into-existing-webpage)

What I want to achieve in one of my current projects, is to have radio buttons to toggle between different full-window (leaflet) maps. Although this would be quiet easy, I still bump into several issues, like the ones mentioned.

Moreover, I'm looking to find ways to make it easier for other users to save interactive maps. I've added an argument in.iframe to tmap_save in the development version of tmap (mtennekes/tmap@39554dc), but still thinking about the best approach/defaults to save interactive maps.

Using widgetframe in md files

Heya 😄
I'm looking to incorporate a htmlwidget into pages that'll be included in Hugo. I'm trying to do Rmd -> md conversions (for lightness of deps).

When I use widgetframe with a htmlwidget, I'm not ending up with iframe code. I read the vignette and I'm not sure if I'm doing something wrong - would you be able to advise?

I put a sample doc on gist but in essence in my md file I'm only getting the following output when I run frameWidget()

<!--html_preserve-->

<script type="application/json" data-for="htmlwidget-ee9240b3e9cf31cad221">{"x":{"url":"exampleframewidget_files/figure-markdown_github//widgets/widget_unnamed-chunk-4.html","options":{"xdomain":"*","allowfullscreen":false,"lazyload":false}},"evals":[],"jsHooks":[]}</script>
<!--/html_preserve-->

No iframe or associated js code for the json. Thanks for any guidance you can give!

Request for Comment

See ramnathv/htmlwidgets#252

shiny integration

Any timeline on when this might be integrated into shiny? This would be a very useful feature.

Support single file output with saveWidgetframe

The convenience of standalone html files cannot be overstated.

PS: Please

Can not display in blogdown

library(leaflet)
library(widgetframe)
load("bound.Rdata")
GetURL <- function(service, host = "basemap.nationalmap.gov") {
sprintf("https://%s/arcgis/services/%s/MapServer/WmsServer", host, service)
}
pal <- colorNumeric(
palette = colorRampPalette(c("skyblue", "darkblue"))(length(bound$mean)),
domain = bound$mean
)
map <- leaflet(bound) %>%
setView(lng = -95, lat = 40, zoom = 4)%>%
addPolygons(color = ~ pal(mean), weight = 1, smoothFactor = 0.5,
opacity = 1.0, fillOpacity = 0.5,label = ~htmltools::htmlEscape(paste(huc2, name)),
highlightOptions = highlightOptions(color = "white", weight = 2,
bringToFront = TRUE),
group = "Region")%>%
addCircleMarkers(data = Siteinfo,
lng = ~dec_lon_va,
lat = ~dec_lat_va,
radius = ~3,
stroke = FALSE,
fill = TRUE,
color = "red",
fillOpacity = 0.4,
group = "Site"
)%>%
addLegend("bottomright",
pal = pal,
values = ~mean,
title = "Mean",
labFormat = labelFormat(),
opacity = 1,
group="Region"
) %>%
addWMSTiles(GetURL("USGSHydroCached"),layers = "0", group = "River")%>%
addProviderTiles("Esri.WorldImagery",group = "Topography")%>%
addLayersControl(
overlayGroups =c("River", "Topography", "Region","Site"),
options = layersControlOptions(collapsed=FALSE)
)
frameWidget(map)

Pagedown

Thanks for the great package!

I was just trying to make it work with pagedown, but I don't think this is currently possible? Any thoughts?

Cannot save a mapview object

library(mapview)
#> Loading required package: leaflet
library(widgetframe)
#> Loading required package: htmlwidgets
m = mapview(breweries)
saveWidget(m, "temp.html", selfcontained = FALSE)
#> Error in x$width: $ operator not defined for this S4 class

I've tried to save a mapview object to a file and got the above error. Is it a problem of widgetframe or mapview?