<p><div><div><div><div data-width="100" data-show-faces="false" data-send="true" data-layout="button_count" data-height="21" data-href="https://www.r-bloggers.com/building-shiny-app-exercises-part-5/"></div></div><div></div></div><div></div></div>
<div>
(This article was first published on <strong><a href="http://r-exercises.com/2017/01/24/building-shiny-app-exercises-part-5/?utm_source=rss&utm_medium=rss&utm_campaign=building-shiny-app-exercises-part-5"> R-exercises</a></strong>, and kindly contributed to <a rel="nofollow" href="https://www.r-bloggers.com/">R-bloggers)</a> </div>
<p><strong><a target="_blank" rel="nofollow" href="http://r-exercises.com/wp-content/uploads/2017/01/shiny-1.png?x61433"><img sizes="(max-width: 265px) 100vw, 265px" alt="" class="wp-image-4236" src="https://i0.wp.com/r-exercises.com/wp-content/uploads/2017/01/shiny-1-265x300.png?resize=265%2C300" data-recalc-dims="1"></a>RENDER FUNCTIONS</strong><br>
In the <a target="_blank" rel="nofollow" href="http://r-exercises.com/2017/01/01/building-shiny-app-exercises-part-4/">fourth</a> part of our series we just “scratched the surface” of reactivity by analyzing some of the properties of the <code>renderTable</code> function.<br>
Now it is time to get deeper and learn how to use the rest of the render functions that shiny provides. As you were told in <a target="_blank" rel="nofollow" href="http://r-exercises.com/2017/01/01/building-shiny-app-exercises-part-4/">part 4</a> these are:</p>
<p><code>renderImage</code><br>
<code>renderPlot</code><br>
<code>renderPrint</code><br>
<code>renderText</code><br>
<code>renderUI</code></p>
<p>Below you will see the functionality of three of them (<code>renderImage</code>, <code>renderText</code> and <code>renderPrint</code>) and then we will be ready to use those of them that match our needs in the next parts, just like the widgets and give a specific form to our application. As you will probably understand, when reading this part our aim is to perform several statistical analyses on our dataset. We will start by creating a K-Means <code>tabPanel</code>.</p>
<p>Follow the examples to understand the logic of the tools you are going to use and then enhance the app you started creating in <a target="_blank" rel="nofollow" href="http://r-exercises.com/2016/12/12/building-shiny-app-exercises-part-1/">part 1</a> by practising with the exercise set we prepared for you. Lets begin!</p>
<p>Answers to the exercises are available <a target="_blank" rel="nofollow" href="http://r-exercises.com/2017/01/24/building-shiny-app-solutions-part-5/">here</a>.</p>
<p>If you obtained a different (correct) answer than those listed on the solutions page, please feel free to post your answer as a comment on that page.</p>
<p><strong>renderImage</strong><br>
Sending pre-rendered images with <code>renderImage</code>.<br>
These are images saved as a link to a source file. If your Shiny app has pre-rendered images saved in a subdirectory, you can send them using <code>renderImage</code>. Suppose the images are in the subdirectory “www”/, and are named “image1.png”, “image2.png”, and so on. The following code would send the appropriate image, depending on the value of <code>input$n</code>:</p>
<p># ui.R<br>
<code>library(shiny)<br>
shinyUI(fluidPage(<br>
titlePanel(&quot;RenderImage&quot;),<br>
sidebarLayout(<br>
sidebarPanel(<br>
radioButtons(&quot;n&quot;, label = h4(&quot;Radio Buttons&quot;),<br>
choices = list(&quot;Choice 1&quot; = 1, &quot;Choice 2&quot; = 2),<br>
selected = 2)<br>
),<br>
mainPanel(<br>
imageOutput(&quot;Image&quot;)<br>
)<br>
)</code></p>
<p>))<br>
#server.R</p>
<p><code>shinyServer(function(input, output, session) {<br>
# Send a pre-rendered image, and don't delete the image after sending it<br>
output$Image &lt;- renderImage({<br>
# When input$n is 3, filename is ./images/image3.jpeg<br>
filename &lt;- normalizePath(file.path('./www',<br>
paste('image', input$n, '.png', sep='')))</code></p>
<p># Return a list containining the filename<br>
list(src = filename)</p>
<p>}, deleteFile = FALSE)<br>
})</p>
<p>Now let’s break down what the code above exactly does. First of all as we saw in <a target="_blank" rel="nofollow" href="http://r-exercises.com/2016/12/12/building-shiny-app-exercises-part-1/">part 1</a> you should save your images in a subdirectory called “www” inside the directory that you work. Let’s say you save 2 images and you name them “image1” and “image2”. As you can see we use <code>radioButtons</code>here to select which one of the two we want to be displayed. The <code>filename</code> contains the exact output path of the images while the <code>list</code> contains the <code>filename</code> along with some other values.<br>
In this example, <code>deleteFile</code> is FALSE because we don’t want Shiny to delete an image after sending it.</p>
<div>
<aside><img src="http://r-exercises.com/2017/01/24/building-shiny-app-exercises-part-5/?utm_source=rss&utm_medium=rss&utm_campaign=building-shiny-app-exercises-part-5"></aside>
<div><strong>Learn more</strong> about Shiny in the online course <a target="_blank" rel="nofollow" href="http://r-exercises.com/product/r-shiny-interactive-web-apps/">R Shiny Interactive Web Apps – Next Level Data Visualization</a>. In this course you will learn how to create advanced Shiny web apps; embed video, pdfs and images; add focus and zooming tools; and many other functionalities (30 lectures, 3hrs.).</div>
</div>
<p><strong>Exercise 1</strong></p>
<p>Place a <code>tabPanel</code> in the <code>tabsetPanel</code> of your Shiny App. Name it “K Means”.</p>
<p><strong>Exercise 2</strong></p>
<p>Move the <code>radioButtons</code> from the <code>sidebarPanel</code> inside the <code>tabPanel</code> “K Means” you just created and name it “Select Image”. Also, move the <code>submitButton</code> from the <code>sidebarPanel</code> to the <code>tabPanel</code> “K Means” without title.</p>
<p><strong>Exercise 3</strong></p>
<p>Place an <code>imageOutput</code> inside the <code>tabPanel</code> “K Means” with name “Image” (ui.R) and the reactive function of it (server.R). Still nothing happens. HINT: Use <code>renderImage</code>.</p>
<p>Create a subdirectory inside the directory you work and name it “images”. Put there two images with names “pic1” and “pic2” respectively and .png ending.</p>
<p><strong>Exercise 4</strong></p>
<p>Now create the <code>filename</code>. Follow the example above to create the right path. Do not forget to connect it with the <code>radioButtons</code>. Two steps left.</p>
<p><strong>Exercise 5</strong></p>
<p>Now it is time to set <code>deleteFile</code> = “FALSE”.</p>
<p><strong>Exercise 6</strong></p>
<p>Create the <code>list</code> that contains the <code>filename</code>.</p>
<p><strong>Exercise 7</strong></p>
<p>Set<code> width</code> = 300 and <code>height</code> = 200 into the <code>list</code>.</p>
<p><strong>renderText-renderPrint</strong></p>
<p>The example below shows how the <code> renderText</code> works.</p>
<p>#ui.R<br>
<code>library(shiny)<br>
shinyUI(fluidPage(<br>
titlePanel(&quot;RenderImage&quot;),<br>
sidebarLayout(<br>
sidebarPanel(<br>
sliderInput(&quot;slider1&quot;, label = h4(&quot;Sliders&quot;),<br>
min =3 , max = 10, value =3)<br>
),<br>
mainPanel(<br>
textOutput(&quot;text1&quot;)<br>
)<br>
)<br>
))</code><br>
#server.R<br>
<code>shinyServer(function(input, output, session) {</code></p>
<p>output$text1 &lt;- renderText({<br>
paste(“You have selected”, input$slider1,”clusters”)<br>
})<br>
})</p>
<p>The code above takes a numeric value from the <code>sliderInput</code> and puts it in the exact place of our sentence in the <code>mainPanel</code>.</p>
<p>Before proceeding to the next exercise move the <code>sliderInput</code> from the <code>sidebarPanel</code> just after the <code>imageOutput</code> in the <code>tabPanel </code>“K Means”. Then change its name to “Clusters”, its <code>min</code> to 3, its <code>max</code> to 10 and <code>value</code> to 3.</p>
<p><strong>Exercise 8</strong></p>
<p>Put the <code>textOutpout</code> named “text1” inside your<code> tabPanel</code> exactly after the <code>sliderInput</code>, then place its reactive function inside server.R using <code>renderText</code>.</p>
<p><strong>Exercise 9</strong></p>
<p>Display the reactive output by putting inside the <code>renderText</code> function the sentence “You have selected”,(?),”clusters.” HINT : Use <code>paste</code>.</p>
<p><strong>Exercise 10</strong></p>
<p>Follow exactly the same steps but this time instead of <code>renderText</code> use <code>renderPrint</code> and note the difference.</p>
<p>
<div>
<div>To <strong>leave a comment</strong> for the author, please follow the link and comment on their blog: <strong><a href="http://r-exercises.com/2017/01/24/building-shiny-app-exercises-part-5/?utm_source=rss&utm_medium=rss&utm_campaign=building-shiny-app-exercises-part-5"> R-exercises</a></strong>.</div>
<hr>
<a rel="nofollow" href="https://www.r-bloggers.com/">R-bloggers.com</a> offers <strong><a rel="nofollow" href="https://feedburner.google.com/fb/a/mailverify?uri=RBloggers">daily e-mail updates</a></strong> about <a title="The R Project for Statistical Computing" rel="nofollow" href="https://www.r-project.org/">R</a> news and <a title="R tutorials" rel="nofollow" href="https://www.r-bloggers.com/search/tutorial">tutorials</a> on topics such as: <a title="Data science" rel="nofollow" href="https://www.r-bloggers.com/search/data%20science">Data science</a>, <a title="Big Data" rel="nofollow" href="https://www.r-bloggers.com/search/Big%20Data">Big Data, <a title="R jobs" rel="nofollow" href="https://www.r-users.com/">R jobs</a>, visualization (<a title="ggplot and ggplot2 tutorials" rel="nofollow" href="https://www.r-bloggers.com/search/ggplot2">ggplot2</a>, <a title="Boxplots using lattice and ggplot2 tutorials" rel="nofollow" href="https://www.r-bloggers.com/search/boxplot">Boxplots</a>, <a title="Maps and gis" rel="nofollow" href="https://www.r-bloggers.com/search/map">maps</a>, <a title="Animation in R" rel="nofollow" href="https://www.r-bloggers.com/search/animation">animation</a>), programming (<a title="RStudio IDE for R" rel="nofollow" href="https://www.r-bloggers.com/search/RStudio">RStudio</a>, <a title="Sweave and literate programming" rel="nofollow" href="https://www.r-bloggers.com/search/sweave">Sweave</a>, <a title="LaTeX in R" rel="nofollow" href="https://www.r-bloggers.com/search/LaTeX">LaTeX</a>, <a title="SQL and databases" rel="nofollow" href="https://www.r-bloggers.com/search/SQL">SQL</a>, <a title="Eclipse IDE for R" rel="nofollow" href="https://www.r-bloggers.com/search/eclipse">Eclipse</a>, <a title="git and github, Version Control System" rel="nofollow" href="https://www.r-bloggers.com/search/git">git</a>, <a title="Large data in R using Hadoop" rel="nofollow" href="https://www.r-bloggers.com/search/hadoop">hadoop</a>, <a title="Web Scraping of google, facebook, yahoo, twitter and more using R" rel="nofollow" href="https://www.r-bloggers.com/search/Web+Scraping">Web Scraping</a>) statistics (<a title="Regressions and ANOVA analysis tutorials" rel="nofollow" href="https://www.r-bloggers.com/search/regression">regression</a>, <a title="principal component analysis tutorial" rel="nofollow" href="https://www.r-bloggers.com/search/PCA">PCA</a>, <a title="Time series" rel="nofollow" href="https://www.r-bloggers.com/search/time+series">time series</a>, <a title="finance trading" rel="nofollow" href="https://www.r-bloggers.com/search/trading">trading</a>) and more...
<img height="1" alt="" width="1" src="http://feeds.feedburner.com/~r/RBloggers/~4/eHypgR_YzPU"></a></div>