README.md
In shapenaji/midas: Turn HTML 'Shiny'

The `midas` Touch

Nicholas Jhirad

This document covers version >= 0.2.0 of the package and is intended to be an introduction to the package,

The midas package turns html code that you can find around the internet into the necessary shiny functions that would generate the equivalent shiny objects

The package depends on:

xml2 parses html
shiny supports the shiny-object class and the tag function

Shiny is best when it lets us take what we see elsewhere and reproduce it in a fraction of the time attached to some great data-analysis.

I found myself with the following workflow:

# Copy an existing widget or html object
# Either from the web or from an existing function
library(shiny)
library(shinydashboard)

cat(as.character(dashboardHeader()), fill = TRUE)

## <header class="main-header">
##   <span class="logo"></span>
##   <nav class="navbar navbar-static-top" role="navigation">
##     <span style="display:none;">
##       <i class="fa fa-bars"></i>
##     </span>
##     <a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button">
##       <span class="sr-only">Toggle navigation</span>
##     </a>
##     <div class="navbar-custom-menu">
##       <ul class="nav navbar-nav"></ul>
##     </div>
##   </nav>
## </header>

# Reproduce and Modify
logoHeader <- function(href = '#',
                       logosrc = 'logo.png',
                       loadersrc = 'loader.gif',
                       height='78%',
                       width='78%',
                       navbar = NULL) {
    tagList(
        tags$head(
            tags$script(
                "setInterval(function(){
            if ($('html').attr('class')=='shiny-busy') {
              $('div.busy').show();
              $('div.notbusy').hide();
            } else {
          $('div.busy').hide();
          $('div.notbusy').show();
        }
      },100)")
        ),
      tags$header(
          class = 'main-header',
          tags$span(
              class = 'logo',
              tags$a(href='#', class = 'logo',
                     tags$div(
                         class = 'busy',
                         tags$img(src = loadersrc,
                                  height = height,
                                  width = width)
                     ),
                     tags$div(
                         class = 'notbusy',
                         tags$img(src = logosrc,
                                  height = height,
                                  width = width)
                     )
              )
          ),
          navbar

      )
    )
}

But for giant pages, this involved a considerable amount of transcription of things like: <div class="example"></div> into tags$div(class="example").

I felt that this should be programmatic.

Let's try this with midas!

Here's some HTML I found on the internet:

# Let's Try this with midas!
library(midas)

html <- 
'<html>
<head>
<style>
#p01 {
    color: blue;
}
</style>
</head>
<body>

<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p id="p01">I am different.</p>

</body>
</html>'

print(turn_shiny(html))

## tag("html", list(tag("head", list(tag("style", list("#p01 {    color: blue;}")))), tag("body", list(tag("p", list("This is a paragraph.")), tag("p", list("This is a paragraph.")), tag("p", list(id = "p01", "I am different."))))))
## [1] "tag(\"html\", list(tag(\"head\", list(tag(\"style\", list(\"#p01 {    color: blue;}\")))), tag(\"body\", list(tag(\"p\", list(\"This is a paragraph.\")), tag(\"p\", list(\"This is a paragraph.\")), tag(\"p\", list(id = \"p01\", \"I am different.\"))))))"

shapenaji/midas documentation built on May 30, 2019, 8:08 p.m.

rdrr.io home R language documentation Run R code online

CRAN packages Bioconductor packages R-Forge packages GitHub packages

Note that we can't provide technical support on individual packages. You should contact the package authors for that.

Tweet to @rdrrHQ

GitHub issue tracker

ian@mutexlabs.com