Very shiny holidays

< !-- wp:paragraph -->

How would I miss to program just a little bit during the holiday season? But I didn’t want to work on something serious, so I decided to checkout some ground work on R-Shiny + JQuery + CSS. The result are some nice holiday greetings inside a shiny app:

< !-- /wp:paragraph --> < !-- wp:paragraph -->

I just googled CSS + holidays and what I found was this article on CSS for the holidays. The Pixel Art Christmas Tree I found from dodozhang21 really amazed me. But it was missing some shiny features. So I thought why not make it a custom shiny output? I was already writing about custom shiny inputs but never on custom shiny outputs.

< !-- /wp:paragraph --> < !-- wp:paragraph -->

Actually, the tree is kind of easy. I found that 83 rows of the CSS file account for the moving pixels of the tree as CSS keyframes. There are 5 keyframes (0% , 25%, 50%, 75%, 100% of the animation). So I read them as data.frames in R. Then I sampled X colors for the number of balls the user wants to find in the tree and replaced X of the 83 rows in 5 data frames. Then I put everything back into HTML by:

< !-- /wp:paragraph --> < !-- wp:preformatted -->

glue("$('head').append(\"<style>{style_css}</style>\");")

< !-- /wp:preformatted --> < !-- wp:paragraph -->

where glue is the R package that will replace style_css by the CSS I created from my 5 data frames.

< !-- /wp:paragraph --> < !-- wp:paragraph -->

To see the whole code, you can go to github.

< !-- /wp:paragraph --> < !-- wp:paragraph -->

You think this is not as easy as I thought? Then just get started with R and find the “Jamie” in your company that knows R.

< !-- /wp:paragraph --> < !-- wp:paragraph -->

Happy Holidays!

< !-- /wp:paragraph --> < !-- wp:quote -->

Very shiny holidays!
A shiny app to greet people sebastianwolf.shinyapps.io

< !-- /wp:quote -->