{"id":4388,"date":"2018-12-26T17:02:53","date_gmt":"2018-12-26T15:02:53","guid":{"rendered":"https:\/\/engel-wolf.com\/?p=4388"},"modified":"2019-10-27T17:05:51","modified_gmt":"2019-10-27T15:05:51","slug":"very-shiny-holidays","status":"publish","type":"post","link":"https:\/\/engel-wolf.com\/?p=4388","title":{"rendered":"Very shiny holidays"},"content":{"rendered":"\n<p>How would I miss to program just a little bit during the holiday season? But I didn\u2019t 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&nbsp;<a href=\"https:\/\/sebastianwolf.shinyapps.io\/shinyxmas\/\" rel=\"noreferrer noopener\" target=\"_blank\">shiny app<\/a>:<\/p>\n\n\n\n<p>I just googled CSS + holidays and what I found was this article on\u00a0<a rel=\"noreferrer noopener\" href=\"https:\/\/bashooka.com\/coding\/25-cool-css-html5-christmas-animation-effects\/\" target=\"_blank\">CSS for the holidays<\/a>. The Pixel Art Christmas Tree I found from\u00a0<a rel=\"noreferrer noopener\" href=\"https:\/\/codepen.io\/dodozhang21\/pen\/imIvg\" target=\"_blank\">dodozhang21<\/a>\u00a0really 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\u00a0<a href=\"https:\/\/engel-wolf.com\/?p=4357\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\"custom  (\u00f6ffnet in neuem Tab)\">custom <\/a><a rel=\"noreferrer noopener\" href=\"https:\/\/medium.com\/@zappingseb\/7-steps-that-make-custom-inputs-in-shiny-easy-504b303a2973\" target=\"_blank\">shiny inputs<\/a>\u00a0but never on custom shiny outputs.<\/p>\n\n\n\n<p>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%&nbsp;, 25%, 50%, 75%, 100% of the animation). So I read them as data.frames in R. Then I sampled&nbsp;<strong>X<\/strong>&nbsp;colors for the number of balls the user wants to find in the tree and replaced&nbsp;<strong>X&nbsp;<\/strong>of the 83 rows in 5 data frames. Then I put everything back into HTML by:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">glue(\"$('head').append(\\\"&lt;style&gt;{style_css}&lt;\/style&gt;\\\");\")<\/pre>\n\n\n\n<p>where glue is the R package that will replace&nbsp;<code>style_css<\/code>&nbsp;by the CSS I created from my 5 data frames.<\/p>\n\n\n\n<p>To see the whole code, you can go to&nbsp;<a href=\"https:\/\/github.com\/zappingseb\/shinyxmas\" rel=\"noreferrer noopener\" target=\"_blank\">github<\/a>.<\/p>\n\n\n\n<p>You think this is not as easy as I thought?&nbsp;<a href=\"https:\/\/medium.com\/datadriveninvestor\/how-to-get-people-r-ready-in-an-hour-thors-hammer-d8c853abaf0b\" target=\"_blank\" rel=\"noreferrer noopener\">Then just get started with R<\/a>&nbsp;and find the \u201cJamie\u201d in your company that knows R.<\/p>\n\n\n\n<p>Happy Holidays!<\/p>\n\n\n\n<blockquote class=\"wp-block-quote\"><p><a href=\"https:\/\/sebastianwolf.shinyapps.io\/shinyxmas\/\"><strong>Very shiny holidays!<\/strong><br><em>A shiny app to greet people sebastianwolf.shinyapps.io<\/em><\/a><\/p><\/blockquote>\n","protected":false},"excerpt":{"rendered":"<p>How would I miss to program just a little bit during the holiday season? But I didn\u2019t want to work on something serious, so I decided to checkout some ground [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":4389,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"ngg_post_thumbnail":0,"footnotes":""},"categories":[1],"tags":[401,403,400,381,402,388],"_links":{"self":[{"href":"https:\/\/engel-wolf.com\/index.php?rest_route=\/wp\/v2\/posts\/4388"}],"collection":[{"href":"https:\/\/engel-wolf.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/engel-wolf.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/engel-wolf.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/engel-wolf.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=4388"}],"version-history":[{"count":1,"href":"https:\/\/engel-wolf.com\/index.php?rest_route=\/wp\/v2\/posts\/4388\/revisions"}],"predecessor-version":[{"id":4390,"href":"https:\/\/engel-wolf.com\/index.php?rest_route=\/wp\/v2\/posts\/4388\/revisions\/4390"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/engel-wolf.com\/index.php?rest_route=\/wp\/v2\/media\/4389"}],"wp:attachment":[{"href":"https:\/\/engel-wolf.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=4388"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/engel-wolf.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=4388"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/engel-wolf.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=4388"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}