Including DiagrammeR and iframe background

[ekstroem]

Hi all,

I'm trying to get slidify to work together with a diagram created by DiagrammeR. I read in one of the issues here that slidify and htmlwidgets don't play nicely together yet, but there were some suggestions to get things up and running by saving the widget as html and then including that in iframe.

I've included my example below. My "current" problem is that when including the widget in the iframe the background becomes white. Can I change that in some way so that it blends into the general format for my slides (i.e., have my background as transparent)?

---
title       : Test
subtitle    : 
author      : Claus
job         : 
framework   : revealjs      # {io2012, html5slides, shower, dzslides, ...}
highlighter : highlight.js  # {highlight.js, prettify, highlight}
hitheme     : zenburn       # 
widgets     : [mathjax angularjs]     # {mathjax, quiz, bootstrap}
mode        : standalone   # {selfcontained, standalone, draft}
knit        : slidify::knit2slides
revealjs    :
  theme: serif 
  incremental: true

---

## Read-And-Delete

1. Edit YAML front matter
2. Write using R Markdown
3. Use an empty line followed by three dashes to separate slides!

--- .class #id 


<style>
iframe {
  width: 800px;
  height: 600px;
  background: #AA0000;
}
</style>
<style>iframe.nvd3{height: 600px;width: 800px}</style>

## Slide 2

   ```{r,echo=FALSE,results=FALSE,warning=FALSE}
   library(htmlwidgets)
   library(DiagrammeR)
    ```

   ```{r echo=FALSE, warning=FALSE,cache=FALSE,results='asis'}
fff <- DiagrammeR::grViz("
  digraph neato {


    rankdir=LR;
    node[width=1,height=1,fixedsize=true];

    { rank=same; B ; C}

    edge[weight=20];
    A -> B [label='&beta;'];
    B -> O [label='&gamma;'];
    edge[weight=1];

    C -> { B O }

    A -> O[label='&beta;&gamma;'];

    A[label='Assigned\ntreatment',shape=circle,fillcolor='lightblue',style='filled'];
    B[label='Actual\ntreatment',shape=circle,fillcolor='lightblue',style='filled'];
    C[label='Confounder',shape=circle,fillcolor='MistyRose',style='filled'];
    O[label='Outcome',shape=circle,fillcolor='lightblue',style='filled'];


  }
", width=650, height=400, engine="dot")

saveWidget(fff, 'diagram.html')
cat('<iframe src="diagram.html" width=100% height=100% allowtransparency="true" style="background: #FFCCFF;"> </iframe>')

[ekstroem]

Not exactly an elegant solution but a bit of CSS'ing got me where I wanted. Forcing the body background to be transparent within the slides did the trick (in combination with allowtransparency="true"). I've included the changes below so others can see it.
Feel free to close it unless you'd want to keep it as a reminder to get slidify to play with htmlwidgets.

Claus

<style type="text/css">
body {background:none transparent;
}
</style>


  ```{r echo=FALSE, warning=FALSE,cache=FALSE,results='asis'}
fff <- DiagrammeR::grViz("
  digraph neato {


    rankdir=LR;
    node[width=1,height=1,fixedsize=true];

    { rank=same; B ; C}

    edge[weight=20];
    A -> B [label='&beta;'];
    B -> O [label='&gamma;'];
    edge[weight=1];

    C -> { B O }

    A -> O[label='&beta;&gamma;'];

    A[label='Assigned\ntreatment',shape=circle,fillcolor='lightblue',style='filled'];
    B[label='Actual\ntreatment',shape=circle,fillcolor='lightblue',style='filled'];
    C[label='Confounder',shape=circle,fillcolor='MistyRose',style='filled'];
    O[label='Outcome',shape=circle,fillcolor='lightblue',style='filled'];


  }
", width=650, height=400, engine="dot")

saveWidget(fff, 'diagram.html')
cat('<iframe src="diagram.html" width=100% height=100% allowtransparency="true"> </iframe>')

[arturochian]

@ekstroem Do you think this could be the solution for working with other HtmlWidgets in slidify?

<style type="text/css"> body {background:none transparent; } </style>

(CODE)

saveWidget(fff, 'diagram.html')
cat('<iframe src="diagram.html" width=100% height=100% allowtransparency="true"> </iframe>')

PD: Really nice work!!

[arturochian]

Yeah it works for other HTML Widgets!

[arturochian]

👏 👏

[jvcasillas]

This is awesome news, but how are you getting DiagrammeR to work? I get the following error:

Error in loadNamespace(i, c(lib.loc, .libPaths()), versionCheck = vI[[i]]) : 
namespace ‘stringr’ 0.6.2 is already loaded, but >= 1.0.0 is required
Error: package or namespace load failed for ‘DiagrammeR’

However, when I update to 1.0.0, then slidify no longer works. I get the following error:

Error in if (body$content == "") { : 
missing value where TRUE/FALSE needed

[ekstroem]

@arturochian

Glad you could use it :)

@jvcasill

Could you try to include an example that reproduces the error or are you just running through my example above?

[jvcasillas]

I removed stringr, and reinstalled version 0.6.2. Then removed DiagrammeR and installed the CRAN version. I am now able to reproduce html widgets.

[ekstroem]

Great!

[safferli]

The stringr update to 1.0 leading to an error is a separate issue #430 but you already found the solution :)